#header { position: relative; }
#header > .content-wrapper {}
#header > .content-wrapper > main {
	position: relative;
	padding-top: 170px;
	padding-bottom: 70px;
	
	color: #FFF;
}
#header > .content-wrapper > main:before {
	content: "";
	position: absolute; top: 0; right: min(-45px, calc(((100vw - 100px - 1290px + 90px) / 2) * -1)); bottom: 0; z-index: -1;
	
	background-color: #136064;
}
#header > .content-wrapper > main > :not(.gallery) { padding-left: 45px; }
@media (min-width: 1200px) {
	#header > .content-wrapper > main:before { left: 50%; }
	#header > .content-wrapper > main > :not(.gallery) { margin-left: 50%; }
}
@media (max-width: 1199.99px) {
	#header > .content-wrapper > main:before { left: 20%; }
	#header > .content-wrapper > main > :not(.gallery) { margin-left: 20%; }
}

/*--------------------------------------------------------------------------------------------------------------*/

#header > .content-wrapper > main > .hook {
  	margin-bottom: 20px;
	line-height: 120%;
	
	font-weight: 100;
	color: #47B0B5;
}
@media (min-width: 1200px)	  { #header > .content-wrapper > main > .hook { font-size: 30px; } }
@media (max-width: 1199.99px) { #header > .content-wrapper > main > .hook { font-size: 24px; } }
#header > .content-wrapper > main > .complex-title {
	margin-bottom: 45px;
	font-weight: 700;
}
@media (min-width: 1200px)		 					 { #header > .content-wrapper > main > .complex-title { font-size: 48px; } }
@media (max-width: 1199.99px) and (min-width: 700px) { #header > .content-wrapper > main > .complex-title { font-size: 32px; } }
@media (max-width:  699.99px)						 { #header > .content-wrapper > main > .complex-title { font-size: 26px; } }
#header > .content-wrapper > main > .subtitle {
	margin-bottom: 70px;
	
	font-size: 20px;
	font-weight: 600;
}
#header > .content-wrapper > main > .description {
	font-size: 20px;
	font-weight: 600;
}

/*--------------------------------------------------------------------------------------------------------------*/

#header > .content-wrapper > main > .gallery { display: flex; }
#header > .content-wrapper > main > .gallery:not(:last-child) { margin-bottom: 45px; }
#header > .content-wrapper > main > .gallery > .image-wrapper {}
@media (min-width: 1200px) {
	#header > .content-wrapper > main > .gallery { flex-direction: row; }
	#header > .content-wrapper > main > .gallery > .image-wrapper { flex: 0 0 calc(100% / 4); }
}
@media (max-width: 1199.99px) and (min-width: 800px) {
	#header > .content-wrapper > main > .gallery { flex-direction: row; }
	#header > .content-wrapper > main > .gallery > .image-wrapper { flex: 0 0 calc(100% / 3); }
}
@media (max-width: 799.99px) and (min-width: 500px) {
	#header > .content-wrapper > main > .gallery {
		flex-direction: row;
		flex-wrap: wrap;
	}
	#header > .content-wrapper > main > .gallery > .image-wrapper { flex: 0 0 calc(100% / 2); }
	#header > .content-wrapper > main > .gallery > .image-wrapper:nth-child(2) ~ .image-wrapper { display: none; }
}
@media (max-width: 499.99px) {
	#header > .content-wrapper > main > .gallery { flex-direction: column; }
	#header > .content-wrapper > main > .gallery > .image-wrapper:not(:first-child) { display: none; }
}
#header > .content-wrapper > main > .gallery > .image-wrapper > div.image {
	padding-top: 130%;
	
	background-position: center;
	background-size: cover;
}