/* Background pattern from Subtle Patterns: https://www.toptal.com/designers/subtlepatterns */

body{
margin: 0;
padding: 0;
width: 100%;
font-family: 'Barlow', sans-serif !important;
}

a {
    /* color: #FFFFFF !important; */
    text-decoration: underline !important;
}

h1 {
font-size: 85px;
text-align: center;
color: #fff;
margin: 0;
padding: 0;
font: arial;
}

h2 {
font-size: 80px !important;
text-align: center;
color: #fff;
margin: 0;
padding: 0;
font-family: 'Barlow', sans-serif !important;
font-weight: bold;
}

h3 {
margin: 5px 0;
padding: 0;
position: relative;
font-family: 'Barlow', sans-serif !important;
font-size: 40px;
color: #fff;
}

h4 {
margin: 5px 0;
padding: 0;
position: relative;
font-family: 'Barlow', sans-serif !important;
font-size: 24px;
color: #fff;
}

small-text {
position: relative;
font-family: 'Barlow', sans-serif !important;
font-size: 12px;
color: #fff;
}

.center { margin: 0 auto; }
.content{ margin: 0 auto; width: 960px; }
.clear { clear: both; }

card {
color: #000000;
}

card-title {
color: #000000;
}

card-text {
color: #000000;
}

.card-url {
color:#808080;
font-size:12px;
font-style: oblique;
}

#header {
z-index: 1;
width: 100%;
background-color: #21455b;
background-image: url("../img/grey.jpg");
position: fixed;
font-family: 'Barlow', sans-serif;
}

#nav { width: 410px; float: right; padding-top: 0px;padding-bottom: 10px;background-color: #21455b; background-image: url("../img/grey.jpg"); width:100%;}
#logo a { color: #fff; font-family: 'Barlow', sans-serif; text-decoration: none; float: left; font-size: 30px; margin-top: 5px; margin-left: 60px; color: #fff; }
#nav ul{
list-style: none;
display: block;
margin: 0 auto;
list-style: none;
}

#nav li{
margin-top: 5px;
float: left;
margin-left: 21px;
font-family: 'Barlow', sans-serif;
}
#nav li a { color: #fff; opacity:0.6; font-size: 16px; text-decoration: none; }
#nav li a.active { color: #fff; opacity:1; border-bottom: 2px solid #fff; }
#nav li a:hover { color: #fff; opacity:1; }

#nav-info {
color: #ffffff;
}

#nav-producers {
color: #ffffff;
background:#17303A;
padding-left:5px;
padding-right:5px;
border-radius: 5px;
}

#nav-distributors {
color: #ffffff;
background:#A76E29;
padding-left:5px;
padding-right:5px;
border-radius: 5px;
}

#nav-strategy {
color: #ffffff;
background:#EF3B39;
padding-left:5px;
padding-right:5px;
border-radius: 5px;
}

#nav-users {
color: #ffffff;
background:#006838;
padding-left:5px;
padding-right:5px;
border-radius: 5px;
}

#body-container{
background:linear-gradient(0deg, rgba(8, 118, 19, 0.0), rgba(8, 118, 19, 0.6)), url('../img/AdobeStock_305712326.jpeg') 50% 0 no-repeat fixed;
background-color: #000000;
color: #fff;
height: 100%;
margin: 0;
padding: 0 0 100px 0;
background-size: cover;
text-align: center;
width: 100%;
}

#mangrove-container{
background:linear-gradient(0deg, rgba(69, 159, 237, 0.4), rgba(69, 159, 237, 0.6)), url('../img/AdobeStock_284387308.jpeg') 50% 0 no-repeat fixed;
background-color: #000000;
color: #fff;
height: 100%;
margin: 0;
padding: 0 0 100px 0;
background-size: cover;
text-align: center;
width: 100%;
}

#forest-container{
background:linear-gradient(0deg, rgba(49, 133, 55, 0.4), rgba(49, 133, 55, 0.6)), url('../img/AdobeStock_113620606.jpeg') 50% 0 no-repeat fixed;
background-color: #000000;
color: #fff;
height: 100%;
margin: 0;
padding: 0 0 100px 0;
background-size: cover;
text-align: center;
width: 100%;
}

#land-container{
background:linear-gradient(0deg, rgba(49, 133, 55, 0.4), rgba(49, 133, 55, 0.6)), url('../img/AdobeStock_84442037.jpeg') 50% 0 no-repeat fixed;
background-color: #000000;
color: #fff;
height: 100%;
margin: 0;
padding: 0 0 100px 0;
background-size: cover;
text-align: center;
width: 100%;
}

#worldcover-container{
background:linear-gradient(0deg, rgba(49, 133, 55, 0.4), rgba(49, 133, 55, 0.6)), url('../img/AdobeStock_442239824.jpeg') 50% 0 no-repeat fixed;
background-color: #000000;
color: #fff;
height: 100%;
margin: 0;
padding: 0 0 100px 0;
background-size: cover;
text-align: center;
width: 100%;
}

#hilda-container{
background:linear-gradient(0deg, rgba(49, 133, 55, 0.4), rgba(49, 133, 55, 0.6)), url('../img/AdobeStock_248557151.jpeg') 50% 0 no-repeat fixed;
background-color: #000000;
color: #fff;
height: 100%;
margin: 0;
padding: 0 0 100px 0;
background-size: cover;
text-align: center;
width: 100%;
}

#copernicus-container{
background:linear-gradient(0deg, rgba(49, 133, 55, 0.4), rgba(49, 133, 55, 0.6)), url('../img/AdobeStock_84442037.jpeg') 50% 0 no-repeat fixed;
background-color: #000000;
color: #fff;
height: 100%;
margin: 0;
padding: 0 0 100px 0;
background-size: cover;
text-align: center;
width: 100%;
}

#agriculture-container{
background:linear-gradient(0deg, rgba(181, 113, 14, 0.4), rgba(181, 113, 14, 0.6)), url('../img/AdobeStock_274062235.jpeg') 50% 0 no-repeat fixed;
background-color: #000000;
color: #fff;
height: 100%;
margin: 0;
padding: 0 0 100px 0;
background-size: cover;
text-align: center;
width: 100%;
}

#fire-container{
background:linear-gradient(0deg, rgba(181, 113, 14, 0.4), rgba(181, 113, 14, 0.6)), url('../img/AdobeStock_607364294.jpeg') 50% 0 no-repeat fixed;
background-color: #000000;
color: #fff;
height: 100%;
margin: 0;
padding: 0 0 100px 0;
background-size: cover;
text-align: center;
width: 100%;
}

#biomass-container{
background:linear-gradient(0deg, rgba(49, 133, 55, 0.4), rgba(49, 133, 55, 0.6)), url('../img/AdobeStock_156095781.jpeg') 50% 0 no-repeat fixed;
background-color: #000000;
color: #fff;
height: 100%;
margin: 0;
padding: 0 0 100px 0;
background-size: cover;
text-align: center;
width: 100%;
}

#africa-biomass-container{
background:linear-gradient(0deg, rgba(105, 104, 86, 0.4), rgba(105, 104, 86, 0.6)), url('../img/AdobeStock_107773780.jpeg') 50% 0 no-repeat fixed;
background-color: #000000;
color: #fff;
height: 100%;
margin: 0;
padding: 0 0 100px 0;
background-size: cover;
text-align: center;
width: 100%;
}

#icesat2-boreal-biomass-container{
background:linear-gradient(0deg, rgba(105, 104, 86, 0.4), rgba(105, 104, 86, 0.6)), url('../img/AdobeStock_67411490.jpeg') 50% 0 no-repeat fixed;
background-color: #000000;
color: #fff;
height: 100%;
margin: 0;
padding: 0 0 100px 0;
background-size: cover;
text-align: center;
width: 100%;
}

#cci-lc-container{
background:linear-gradient(0deg, rgba(130, 68, 40, 0.2), rgba(130, 68, 40, 0.6)), url('../img/AdobeStock_269685600.jpeg') 50% 0 no-repeat fixed;
background-color: #000000;
color: #fff;
height: 100%;
margin: 0;
padding: 0 0 100px 0;
background-size: cover;
text-align: center;
width: 100%;
}

#cci-biomass-container{
background:linear-gradient(0deg, rgba(69, 159, 237, 0.4), rgba(69, 159, 237, 0.6)), url('../img/AdobeStock_92698515.jpeg') 50% 0 no-repeat fixed;
background-color: #000000;
color: #fff;
height: 100%;
margin: 0;
padding: 0 0 100px 0;
background-size: cover;
text-align: center;
width: 100%;
}

#jpl-biomass-container{
background:linear-gradient(0deg, rgba(69, 159, 237, 0.4), rgba(69, 159, 237, 0.6)), url('../img/AdobeStock_211409401.jpeg') 50% 0 no-repeat fixed;
background-color: #000000;
color: #fff;
height: 100%;
margin: 0;
padding: 0 0 100px 0;
background-size: cover;
text-align: center;
width: 100%;
}

#ghg-container{
background:linear-gradient(0deg, rgba(69, 159, 237, 0.4), rgba(69, 159, 237, 0.6)), url('../img/AdobeStock_196117554.jpeg') 50% 0 no-repeat fixed;
background-color: #000000;
color: #fff;
height: 100%;
margin: 0;
padding: 0 0 100px 0;
background-size: cover;
text-align: center;
width: 100%;
}

#methane-container{
background:linear-gradient(0deg, rgba(69, 159, 237, 0.3), rgba(69, 159, 237, 0.4)), url('../img/AdobeStock_139899101.jpeg') 50% 0 no-repeat fixed;
background-color: #000000;
color: #fff;
height: 100%;
margin: 0;
padding: 0 0 100px 0;
background-size: cover;
text-align: center;
width: 100%;
}

#carbon-dioxide-container{
background:linear-gradient(0deg, rgba(105, 104, 86, 0.4), rgba(105, 104, 86, 0.6)), url('../img/AdobeStock_140806806.jpeg') 50% 0 no-repeat fixed;
background-color: #000000;
color: #fff;
height: 100%;
margin: 0;
padding: 0 0 100px 0;
background-size: cover;
text-align: center;
width: 100%;
}

#GEDI-biomass-container{
background:linear-gradient(0deg, rgba(69, 159, 237, 0.4), rgba(69, 159, 237, 0.6)), url('../img/AdobeStock_375879673.jpeg') 50% 0 no-repeat fixed;
background-color: #000000;
color: #fff;
height: 100%;
margin: 0;
padding: 0 0 100px 0;
background-size: cover;
text-align: center;
width: 100%;
}

#user-stories-container{
background:linear-gradient(0deg, rgba(69, 159, 237, 0.0), rgba(69, 159, 237, 0.2)), url('../img/AdobeStock_311874710.jpg') 50% 0 no-repeat fixed;
background-color: #000000;
color: #fff;
height: 100%;
margin: 0;
padding: 0 0 100px 0;
background-size: cover;
text-align: center;
width: 100%;
}

#uganda-container{
background:linear-gradient(0deg, rgba(69, 159, 237, 0.2), rgba(69, 159, 237, 0.4)), url('../img/AdobeStock_182142143.jpg') 50% 0 no-repeat fixed;
background-color: #000000;
color: #fff;
height: 100%;
margin: 0;
padding: 0 0 100px 0;
background-size: cover;
text-align: center;
width: 100%;
}

#paraguay-container{
background:linear-gradient(0deg, rgba(69, 159, 237, 0.2), rgba(69, 159, 237, 0.4)), url('../img/AdobeStock_166338711.jpg') 50% 0 no-repeat fixed;
background-color: #000000;
color: #fff;
height: 100%;
margin: 0;
padding: 0 0 100px 0;
background-size: cover;
text-align: center;
width: 100%;
}

#glad-container{
background:linear-gradient(0deg, rgba(69, 159, 237, 0.2), rgba(69, 159, 237, 0.4)), url('../img/AdobeStock_166133976.jpg') 50% 0 no-repeat fixed;
background-color: #000000;
color: #fff;
height: 100%;
margin: 0;
padding: 0 0 100px 0;
background-size: cover;
text-align: center;
width: 100%;
}

.tile {
color: white;
cursor: pointer;
}

.tile .hovered { display: none; }
.tile:hover .hovered { display: block; }
.tile:hover .initial { display: none; }

#tile1 {
background:linear-gradient(270deg, rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.8)), url('../img/still-jan_1_2006-1920x959_print.jpeg') 10% 0 no-repeat;
background-size: cover;
}

#tile1:hover {
background:linear-gradient(270deg, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.75)), url('../img/still-jan_1_2006-1920x959_print.jpeg') 10% 0 no-repeat;
background-size: cover;
color: white;
}

#tile2 {
background:linear-gradient(270deg, rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.8)), url('../img/AdobeStock_156095781.jpeg') 10% 0 no-repeat;
background-size: cover;
}

#tile2:hover {
background:linear-gradient(270deg, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.75)), url('../img/AdobeStock_156095781.jpeg') 10% 0 no-repeat;
background-size: cover;
color: white;
}

#tile3 {
background:linear-gradient(270deg, rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.8)), url('../img/AdobeStock_113620606.jpeg') 10% 0 no-repeat;
background-size: cover;
}

#tile3:hover {
background:linear-gradient(270deg, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.75)), url('../img/AdobeStock_113620606.jpeg') 10% 0 no-repeat;
background-size: cover;
color: white;
}

#tile4 {
background:linear-gradient(270deg, rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.8)), url('../img/AdobeStock_284387308.jpeg') 65% 65% no-repeat;
background-size: cover;
}

#tile4:hover {
background:linear-gradient(270deg, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.75)), url('../img/AdobeStock_284387308.jpeg') 65% 65% no-repeat;
background-size: cover;
color: white;
}

#tile5 {
background:linear-gradient(270deg, rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.8)), url('../img/AdobeStock_274062235.jpeg') 65% 65% no-repeat;
background-size: cover;
}

#tile5:hover {
background:linear-gradient(270deg, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.75)), url('../img/AdobeStock_274062235.jpeg') 65% 65% no-repeat;
background-size: cover;
color: white;
}

#tile6 {
background:linear-gradient(270deg, rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.8)), url('../img/AdobeStock_84442037.jpeg') 65% 65% no-repeat;
background-size: cover;
}

#tile6:hover {
background:linear-gradient(270deg, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.75)), url('../img/AdobeStock_84442037.jpeg') 65% 65% no-repeat;
background-size: cover;
color: white;
}

#tile7 {
background:linear-gradient(270deg, rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.8)), url('../img/AdobeStock_607364294.jpeg') 65% 65% no-repeat;
background-size: cover;
}

#tile7:hover {
background:linear-gradient(270deg, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.75)), url('../img/AdobeStock_607364294.jpeg') 65% 65% no-repeat;
background-size: cover;
color: white;
}

#tile8 {
background:linear-gradient(270deg, rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.8)), url('../img/AdobeStock_269685600.jpeg') 65% 65% no-repeat;
background-size: cover;
}

#tile8:hover {
background:linear-gradient(270deg, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.75)), url('../img/AdobeStock_269685600.jpeg') 65% 65% no-repeat;
background-size: cover;
color: white;
}

#tile9 {
background:linear-gradient(270deg, rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.8)), url('../img/AdobeStock_248557151.jpeg') 65% 65% no-repeat;
background-size: cover;
}

#tile9:hover {
background:linear-gradient(270deg, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.75)), url('../img/AdobeStock_248557151.jpeg') 65% 65% no-repeat;
background-size: cover;
color: white;
}

#tile10 {
background:linear-gradient(270deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url('../img/AdobeStock_311874710.jpg') 65% 65% no-repeat;
background-size: cover;
color: white;
}

#footer-container{
background-color: #464646;
margin: 0 auto;
padding: 25px 0;
color: #fff;
}

.icon {
  width: 70px;
  height: 70px;
  padding-right: 30px;
}

.cover {
  width: 100px;
}

.centerimg {
    display: block;
    margin: auto;
    width:70%;
}

#nav-bottom ul{
list-style: none;
display: block;
list-style: none;
}

#nav-bottom li{
margin-top: 5px;
font-family: 'Barlow', sans-serif;
width:50%;
}
#nav-bottom li a { color: #fff; opacity:0.6; font-size: 16px; text-decoration: none; }
#nav-bottom li a.active { color: #fff; opacity:1; border-bottom: 2px solid #fff; }
#nav-bottom li a:hover { color: #fff; opacity:1; }

    /* fix for the ipad */
@media (min-device-width : 768px) and (max-device-width : 1024px)  { 
    #slide1,#slide3 {
        background-attachment: scroll;
        height: 100%;
    }

    .ipadfix{
        height: 300px !important;
    }
    img.ipadfix{
        width:100% !important; 
        height:auto !important;
    }
    
    #producers {
    background: linear-gradient(110deg, #22465B 50%, #315D72 50%);
    border-radius: 20px;
    padding: 10px;
    margin: 10px;
    width: 200px;
    display: inline-block
	}

	#distributors {
    background: linear-gradient(110deg, #A76E29 60%, #BC803F 40%);
    border-radius: 20px;
    padding: 10px;
    margin: 10px;
    width: 200px;
    display: inline-block
	}

	#users {
    background: linear-gradient(110deg, #006838 70%, #0E7A44 30%);
    border-radius: 20px;
    padding: 10px 20px 10px 20px;
    margin: 10px;
    width: 200px;
    display: inline-block
	}
	
	.icon {
  	width: 50px;
  	height: 50px;
  	padding-right: 10px;
	}
    
}
/* fix for the ipad */
@media (min-device-width : 768px) and (max-device-width : 1024px) and (orientation: portrait) {
    #slide1,#slide3 {
        height: 100%;
    }
    
    #producers {
    background: linear-gradient(110deg, #22465B 50%, #315D72 50%);
    border-radius: 20px;
    padding: 10px;
    margin: 10px;
    width: 200px;
    display: inline-block
	}

	#distributors {
    background: linear-gradient(110deg, #A76E29 60%, #BC803F 40%);
    border-radius: 20px;
    padding: 10px;
    margin: 10px;
    width: 200px;
    display: inline-block
	}

	#users {
    background: linear-gradient(110deg, #006838 70%, #0E7A44 30%);
    border-radius: 20px;
    padding: 10px 20px 10px 20px;
    margin: 10px;
    width: 200px;
    display: inline-block
	}
	
	.icon {
  	width: 50px;
  	height: 50px;
  	padding-right: 10px;
	}
    
} 


/* fix for the iphone */

@media (min-device-width : 320px) and (max-device-width : 568px)  { 
    #slide1,#slide3 {
        background-attachment: scroll;
        height: 100%;
    }

    .ipadfix{
        height: 150px !important;
    }
    img.ipadfix{
        width:100% !important; 
        height:auto !important;
    }
    
    h2 {
		font-size: 50px !important;
		text-align: center;
		color: #fff;
		margin: 0;
		padding: 0;
		font-family: 'Barlow', sans-serif !important;
		font-weight: bold;
	}
    
}

@media (min-device-width : 320px) and (max-device-width : 568px) and (orientation: portrait) {
    #slide1,#slide3 {

        height: 100%;
    }
    
    h2 {
		font-size: 50px !important;
		text-align: center;
		color: #fff;
		margin: 0;
		padding: 0;
		font-family: 'Barlow', sans-serif !important;
		font-weight: bold;
	}
}