/* 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;
  }
  
  a {
      /* color: #FFFFFF !important; */
      text-decoration: none !important;
  }
  
  h1 {
  font-size: 85px;
  text-align: center;
  color: #fff;
  margin: 0;
  padding: 0;
  font: arial;
  }
  
  h2 {
  font-size: 80px !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: 22px;
  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 {
  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(16, 68, 0, 0.01), rgba(59, 182, 1, 0.1)), url('../img/EO_Handbook_background_green.png') 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;
  }
  
  #past-editions{
  background-color: #003348;
  margin: 0 auto;
  color: #fff;
  }
  
  #past-editions-body{
  background-color: #ffffff;
  margin: 0 auto;
  color: #000000;
  }
  
  #past-editions-row{
  background-color: #ffffff;
  margin: 0 auto;
  color: #000000;
  padding:15px;
  border-bottom: 1px dashed rgba(0,51,72,0.2);
  }
  
  #past-editions-thumbnail{
  background-color: #ffffff;
  margin: 0 auto;
  color: #000000;
  text-align:center;
  padding-top:10px;
  }
  
  #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%;
  }
  
  #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;
      }
  }