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

@font-face {
  font-family: esanotes;
  src: url("../font/NotesEsaReg.otf") format("opentype");
}

body{
margin: 0;
padding: 0;
width: 100%;
font-family: esanotes !important;
font-size: 18px !important;
}

a {
    color: #000000 !important;
    font-weight: bold;
    text-decoration: underline !important;
}

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

h2 {
font-size: 60px !important;
color: #fff;
margin: 0;
padding: 0;
font-family: esanotes !important;
font-weight: bold;
}

h3 {
margin: 5px 0;
padding: 0;
position: relative;
font-family: esanotes !important;
font-size: 40px;
color: #fff;
}

h4 {
margin: 5px 0;
padding: 0;
position: relative;
font-family: esanotes !important;
font-size: 24px;
color: #fff;
}

h5 {
margin: 5px 0;
padding: 0;
position: relative;
font-family: esanotes !important;
font-size: 24px;
color: #fff;
}

small-text {
position: relative;
font-family: esanotes !important;
font-size: 12px;
color: #fff;
}

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

.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(88, 52, 29,0.3), rgba(88, 52, 29, 0.8)), url('../img/Earth_from_Space_Agricultural_patchwork_Romania.jpg') 50% 0 no-repeat fixed;
background-color: #000000;
color: #fff;
height: 100%;
margin: 0;
padding: 0 0 20px 0;
background-size: cover;
text-align: center;
width: 100%;
}

#c5-header{
background:linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.5)), url('../img/casestudy1.jpg') 50% 0 no-repeat fixed;
background-color: #000000;
color: #fff;
height: 100%;
margin: 0;
padding: 0 0 20px 0;
background-size: cover;
text-align: center;
width: 100%;
}

#malawi-header{
background:linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.5)), url('../img/malawi-head.jpg') 50% 0 no-repeat fixed;
background-color: #000000;
color: #fff;
height: 100%;
margin: 0;
padding: 0 0 20px 0;
background-size: cover;
text-align: center;
width: 100%;
}


#text-container{
background-color: #000000;
color: #fff;
height: 100%;
margin: 0;
padding: 0 0 100px 0;
background-size: cover;
text-align: center;
width: 80%;
}

#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%;
}

.btn.custom {
  background-color: rgb(88, 52, 29) !important; 
  border-color: rgb(88, 52, 29) !important;     
  color: white !important;
  font-size:18px;
}

.btn.custom:hover,
.btn.custom:focus,
.btn.custom:active {
  background-color: rgb(61, 40, 27)!important; 
  border-color: rgb(61, 40, 27) !important;
}

html {
  scroll-behavior: smooth;
}

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

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


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

#header-buttons{
margin: 0 auto;
color: #000000;
text-align:center;
}

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

.cover {
  width: 100px;
}

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

.health {
background-color: #396033;
border-radius: 15px;
color:#FFFFFF;
width: fit-content;
padding:5px;
margin-bottom:5px;
margin-right:5px;
font-size: 11px;
}

.ag {
background-color: #b69123;
border-radius: 15px;
color:#FFFFFF;
width: fit-content;
padding:5px;
margin-bottom:5px;
margin-right:5px;
font-size: 11px;
}


tr {
  border-bottom: 1px solid #ddd;
}


#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;
	}
}