/* ECOSYSTEM **/



#ecosystem-header { position:relative; }
#ecosystem-header #image-container { position:relative;width:100%;height:100%;background-size:cover;background-position:center;background-image:url('/images/ecosystem/cover.jpeg'); }

#ecosystem-header #image-container #text-container { top:0;left:0;position:absolute;width:100%;height:100%;background-color:rgba(255,255,255,0.7);z-index:2; }
#ecosystem-header #image-container #text-container h2 { line-height:90px;font-size:80px;text-align:center;font-weight:800;color:#232323;margin-top:6.5vh; }
#ecosystem-header #image-container #text-container p { max-width:1000px;margin:0 auto;width:90%;text-align:center;font-size: 38px;line-height: 1.5em;font-weight: 500;margin-top:60px; }

#ecosystem-header.stats-container .row { position:absolute;bottom:0;width:100%;z-index:3; }
.stats-container .grid > div { padding-bottom:56.25%;position:relative;background-size:cover; }
.stats-container .grid > div > div { display: flex;align-items: center;justify-content:center;position:absolute;width:100%;height:100%;color:#fff;text-align:center; }
.stats-container .grid > div > div h3 { font-size:6vw;font-weight:700; }
.stats-container .grid > div > div p { font-size:1.5vw;padding-top:2vw;font-weight:500; }

#ecosystem-page { position:relative;margin:0 auto;max-width:1200px;width:90%;padding:100px 0 50px 0; }
#ecosystem-page > h2 { font-size:80px;text-align:center;font-weight:800;color:#232323;margin-bottom:75px; }

#ecosystem-page > p { width:80%;max-width:840px;margin:0 auto;font-size: 24px;font-weight: 300;line-height: 40px; }


#ecosystem-filter { text-align:right;font-size:0;margin: 75px 10px 25px 0; }
#ecosystem-filter div { display:inline-block;font-size:16px;border:1px solid #C42323;padding:8px 15px;color:#000; }
#ecosystem-filter div.active { background-color:#C42323;color:#fff;border-right:0; }

#ecosystem-page .grid { padding:0 10px;margin-bottom:20px; }
#ecosystem-page .grid a { display:block;background-color:#FFE200;text-decoration: none; }
#ecosystem-page .grid a > div:first-child {padding-bottom:110%;background-color:grey;background-position: center;background-size:cover; }

#ecosystem-page .grid a > div.filter-name { color:#000;line-height:13px;text-align:center;padding:10px 5px;font-size:12px;font-weight:700; }



@media (max-width:800px) {

	#ecosystem-header #image-container #text-container h2 { font-size: 56px;line-height:70px;margin-top: 10vw }
	#ecosystem-header #image-container #text-container p { font-size: 32px;line-height: 45px; }

	#ecosystem-page { padding:15vw 0; }
	#ecosystem-page h2{ font-size: 11vw;margin-bottom: 10vw; }
	#ecosystem-page > p { width:90%; }
}

@media (max-width:730px) { #ecosystem-page .grid a > div.filter-name .break { display:block;height:3px; } }

@media (max-width:535px) {
	#ecosystem-header #image-container #text-container h2 { font-size: 8vw;line-height: 11vw;margin-top: 10vw; }
	#ecosystem-header #image-container #text-container p { font-size: 5vw;line-height: 7vw;margin-top:8vw; }
	.stats-container .row .grid.twenty-five { width:50%; }
	.stats-container .grid > div > div h3 { font-size:12.5vw; }
	.stats-container .grid > div > div p { font-size: 3.8vw; }
}

@media (max-width:524px) {
	#ecosystem-filter { margin-top:15vw; }
	#ecosystem-page > p { font-size:4vw;line-height:7vw}
	#ecosystem-page .grid.one-fifth { width:25%; }

}

@media (max-width:465px) { #ecosystem-page .grid.one-fifth { width:33%; } }
@media (max-width:350px) { #ecosystem-page .grid.one-fifth { width:50%; } }