#header {
  position: relative;
  
  background-color: var(--lightgray);
  
  height: 100vh;
  
  display: flex;
  overflow: hidden;
  
  color: var(--white);
}

#hero-content {
	position: relative;
	width: 100vw;
	height: 100vh;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--menu-height);
  
  background: url('img/background.jpg') center/cover no-repeat;
  
	-webkit-user-select: none;
  -ms-user-select: none;
  user-select: none; 
  
	z-index: 0;
}

#header-overset {
	position: absolute;
	height: 100vh;
	width: 100vw;
	display: flex;
		
	background-color: var(--greenalpha);
	
	z-index: 1;
}

.header-logo {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
  justify-content: center;
	width: min(100vh, 100vw);
	height: min(100vh, 100vw);
	top: -10vh;
	left: 0;
	
	z-index: 1;
}

.header-logo img {
  width: 100%;
  height: auto;
}

.hero-catchphrase {
	position: absolute;
	display: flex;
	align-items: center;
  justify-content: center;
	top: 60vh;
	padding: 4em;
  	
  text-align: center;
  font-size: min(3vh, 3vw);
  opacity: 0;
  
  z-index: 1;
}

.know-more {
	position: absolute;
	display: flex;
	align-items: center;
  justify-content: center;
	top: 80vh;
	padding: 4em;
	
  color: var(--accent);
  padding: 14px;
  border: none;
  border-radius: 4px;
  text-decoration: none;
  cursor: pointer;
  	
  text-align: center;
  font-size: min(3vh, 3vw);
  opacity: 0;
  
  z-index: 1;
}

.know-more-icon {
	width: min(5vh, 5vw);
	height: min(5vh, 5vw);
	fill: var(--accent);
}

.know-more-icon:hover {
	fill: var(--white);
}

/* Animations */

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fadeInLeaf {
  from {
		transform: translate(-38.671875%, 37%) scale(0.2);
  }
  to {
		transform: translate(0, 0) scale(1);
	}
}

.scan-word {
	animation: fadeIn 0.5s ease-out 0.4s forwards;
}

.carbone-word {
	animation: fadeIn 0.5s ease-out 0.4s forwards;
}

.hero-catchphrase {
	animation: fadeIn 0.2s ease-out 0.8s forwards;
}

.know-more {
	animation: fadeIn 0.2s ease-out 0.8s forwards;
}

.leaf {
	animation: fadeInLeaf 0.5s ease-out 0s none;
}

/* Media */

@media (max-width: 1200px) {
}

@media (max-width: 992px) {
}

@media (max-width: 768px) {
}

@media (max-width: 480px) {
}