.cover-ecosistemas{
    min-height: 800px;
    padding: 200px 0;
    background-position: center !important;
    background-size: cover !important ;
    position: relative;
}
.titulo-ecosistema {
  color: #fff;
  font-weight: 800;
  font-size: 100px;
  filter: drop-shadow(2px 2px 4px rgba(0,0,0,.9));
  line-height: 1;
  margin-bottom: -5px;
}
.titulo-ecosistema-mini {
  color: #fff;
  font-weight: 800;
  font-size: 74px;
  filter: drop-shadow(2px 2px 4px rgba(0,0,0,.9));
  line-height: 1;
  margin-bottom: -5px;
}
.titulo-mini{
    font-size: 60px;
}
i{
    color: #469f02;
font-size: 14px;
}
.titulo2-ecosistema {
  color: #000000;
  font-weight: 800;
  font-size: 30px;
  background-color: #94DE1D;
  display: table;
    padding: 10px 20px;
    margin-bottom: 0;
}
.titulo3-ecosistema {
  color: #ffffff;
  font-size: 18px;
  background-color: #0E172D;
  display: table;
  padding: 10px 20px;
  margin-top: 0;
}
.flora-fauna{
    padding: 0;
}
.fauna{
    width: 100%;
    background-color: #2246a1;
    display: table;
}
.flora{
    width: 100%;
    display: table;
    
     background-color: #0E172D;
}
.fauna-text{
    width: 440px;
    float: right;
    color: #fff;
    position: relative;
    z-index: 1;
}
.fauna-photo{
    width: 200px;
    float: right;
    text-align: center;
    padding: 30px 0;
    position: relative;
    z-index: 1;
}
.division{
    width: 100%;
    display: table;
}


.fauna-cont, .flora-cont{
    display: flex;
    flex-wrap: wrap;
    float: right;
    height: 260px;
    padding: 50px 0;
    background-position: center !important;
    background-size: cover !important;
    position: relative;
}
.flora-text{
    width: 440px;
    float: right;
    color: #fff;
    position: relative;
    z-index: 1;
}
.flora-photo{
    width: 200px;
    float: right;
    text-align: center;
    padding: 30px 0;
    position: relative;
    z-index: 1;
}
.flora-fauna-imagen{
    background-size: cover;
    background-position: center;
}
.flora-photo img, .fauna-photo img{
    width: 60px;
}
.overlay-blue{
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    background: -moz-linear-gradient(left, rgba(34,70,161,1) 0%, rgba(34,70,161,0.8) 44%, rgba(34,70,161,0) 74%, rgba(34,70,161,0) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left, rgba(34,70,161,1) 0%,rgba(34,70,161,0.8) 44%, rgba(34,70,161,0) 74%,rgba(34,70,161,0) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right, rgba(34,70,161,1) 0%,rgba(34,70,161,0.8) 44%, rgba(34,70,161,0) 74%,rgba(34,70,161,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
.overlay-navy{
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    background: -moz-linear-gradient(left, rgba(14,23,45,1) 0%, rgba(14,23,45,0.8) 44%, rgba(14,23,45,0) 74%, rgba(14,23,45,0) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left, rgba(14,23,45,1) 0%,rgba(14,23,45,0.8) 44%, rgba(14,23,45,0) 74%,rgba(14,23,45,0) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right, rgba(14,23,45,1) 0%,rgba(14,23,45,0.8) 44%, rgba(14,23,45,0) 74%,rgba(14,23,45,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
.mfp-close-btn-in .mfp-close {
  background: red;
  color: #ffffff;
  border-radius: 50%;
}
.mfp-content{
    max-width: 800px;
    margin: auto;
  
}
.gallery-top__slide{
    background: transparent;
}
.swiper-slide img{
    width: 100%;
}
.gallery-top__image{
    border: solid 10px #fff;
}
#notebook-paper {
  width: 90%;
  background: linear-gradient(to bottom,white 29px,#dfe3f0 1px);
    background-size: auto;
  margin: 20px auto;
  background-size: 100% 30px;
  position: relative;
  padding-top: 38px;
  padding-left: 10px;
  padding-right: 20px;
  overflow: hidden;
  line-height: 1.7;
  -webkit-box-shadow: 3px 3px 10px rgba(0,0,0,.2);
  -moz-box-shadow: 3px 3px 10px rgba(0,0,0,.2);
  -ms-box-shadow: 3px 3px 10px rgba(0,0,0,.2);
  -o-box-shadow: 3px 3px 10px rgba(0,0,0,.2);
  box-shadow: 3px 3px 10px rgba(0,0,0,.2);
  border-radius: 5px;
  border: solid 10px #fff;
  transform: rotate(-1deg);
}
#notebook-paper ul{
    font-size: 14px;
}

.sabias-que {
  background: #ffffff;
  background-image: url(../images/bg-pattern-ecology.jpg);
  background-size: 280px;
  margin-top: -1px;
  padding-bottom: 50px;
}




.medalla {
  width: 60px;
  margin-right: 20px;
  float: left;
  margin-left: -60px;
}
.reconocimientos {
  width: 95%;
  border-radius: 5px;
  background: #010C2C;
  color: #fff;
  padding: 30px;
  margin-bottom: 20px;
  margin-left: 5%;
}
.reconocimientos ul{
    font-size: 14px;
}


  
  /* HORIZONTAL */
  
  @-webkit-keyframes horizontal {
    0% {
      -webkit-transform: translate(0,0);
      transform: translate(0,0);
    }
  
    6% {
      -webkit-transform: translate(5px,0);
      transform: translate(5px,0);
    }
  
    12% {
      -webkit-transform: translate(0,0);
      transform: translate(0,0);
    }
  
    18% {
      -webkit-transform: translate(5px,0);
      transform: translate(5px,0);
    }
  
    24% {
      -webkit-transform: translate(0,0);
      transform: translate(0,0);
    }
  
    30% {
      -webkit-transform: translate(5px,0);
      transform: translate(5px,0);
    }
  
    36% {
      -webkit-transform: translate(0,0);
      transform: translate(0,0);
    }
  }
  
  @keyframes horizontal {
    0% {
      -webkit-transform: translate(0,0);
      -ms-transform: translate(0,0);
      transform: translate(0,0);
    }
  
    3% {
      -webkit-transform: translate(5px,0);
      -ms-transform: translate(5px,0);
      transform: translate(5px,0);
    }
  
    6% {
      -webkit-transform: translate(0,0);
      -ms-transform: translate(0,0);
      transform: translate(0,0);
    }
  
    9% {
      -webkit-transform: translate(5px,0);
      -ms-transform: translate(5px,0);
      transform: translate(5px,0);
    }
  
    12% {
      -webkit-transform: translate(0,0);
      -ms-transform: translate(0,0);
      transform: translate(0,0);
    }
  
    15% {
      -webkit-transform: translate(5px,0);
      -ms-transform: translate(5px,0);
      transform: translate(5px,0);
    }
  
    18% {
      -webkit-transform: translate(0,0);
      -ms-transform: translate(0,0);
      transform: translate(0,0);
    }
  }
  
  .btn-fotos-causa img, .flora-photo img, .fauna-photo img, .btn-fotos-comunidad img{
    -webkit-animation: horizontal 4s ease infinite;
    animation: horizontal 4s ease infinite;
  }




.donativo{
   padding: 80px 0 0; 
   background-size: cover !important;
   background-position: top center !important;
   position: relative;
}
.cheque{
    background: #fff;
    width: 80%;
    border: solid 1px #5e5e5e;
    padding: 20px;
    outline: solid 10px #fff;
    position: relative;
    display: none;
}
.cheque img{
    width: 160px;
    position: absolute;
    right: -10%;
    top: 10%;
    filter: drop-shadow(2px 2px 4px rgba(0,0,0,.6));
}
.cheque .titulo{
    margin-bottom: -5px;
}
.cifra-cheque{
    font-size: 35px;
    color: #3063B5;
    font-weight: 800;
    margin-bottom: -5px;
}
.cheque-nombre{
    background-color: #282F34;
    color: #fff;
    margin: auto 0 6px;
    padding: 10px;
    text-transform: uppercase;
    display: table;
    
}
.metas{
    margin-top: 30px;
    background: #fff;
    padding: 30px;
    position: relative;
    z-index: 1;
}
.metas ul{
    font-size: 14px;
}
.metas img{
    width: 48px;
    margin-bottom: 15px;
}
.titulo-donativo{
    font-size: 18px;
    text-transform: uppercase;
    font-weight: 600;
}

.causa{
padding: 100px 0 0;

}
.img-causa{
    width: 100%;
    margin-bottom: -20%;
    border: solid 8px #fff;
    box-shadow: 2px 2px 10px rgba(0,0,0,.2);
}
.adopta{
    padding: 60px 0 20px;
    background-color: #22263F;
    color: #fff;
}
.arbol-adopta-cont{
    position: relative;
    transform: rotate(8deg);
}
.arbol-adopta{
    width: 90%;
    max-width: 400px;
    border: solid 8px #fff;
}
.nombre-arbol{
    background-color: #3063B5;
    color: #fff;
    padding: 10px 20px;
    position: absolute;
    left: 0;
    bottom: 20px;
}
.btn-donar-paypal{
    background: #f3cc55;
    color: #274595;
    font-size: 13px;
    padding: 10px 20px;
        border-radius: 5px
}
.btn-donar-paypal img{
   width: 50px;
;
}
.area-natural{
    padding: 80px;
    background-size: cover !important;
    background-position: top center !important;
}
.fotos-area-natural{
    width: 100%;
    max-width: 500px;
    margin-bottom: -100px;
}
.foto-comunidad{
    width: 100%;
    border: solid 8px #fff;
    margin-top: -100px;
}
.btn-fotos-causa{
    width: 60px;
    display: table;
}
.btn-fotos-causa img{
    width: 100%;
}
.btn-fotos-comunidad{
    width: 60px;
    display: table;
    margin-top: -100px;
    float: right;
    position: relative;
}
.btn-fotos-comunidad img{
    width: 100%;
}
.video-thumb{
    width: 100%;
    margin-top: -50%;
    margin-bottom: 80px;
}
.icon-ff{
    width: 34px;
    float: left;
    margin-right: 5px;
}
.video-thumb.video-tab{
    margin-top: 0;
}
.ecosistema-tabs {
  display: flex;
  flex-wrap: wrap;
  margin-top: -130px;
  position: relative;
}
.ecosistema-tabs .nav-item{
    width: 33%;

}

#myTab.ecosistema-tabs .nav-item .nav-link{
     width: 100%;
}
#myTab.ecosistema-tabs .nav-item button.nav-link {
     padding: 10px 15px !important;
     text-align: center;
}
/*  _____---------------------------------- Coahuila---------------------------*/
.webp .cover-coahuila{
  background-image: url("../images/ecosistemas/coahuila/coahuila-cover.webp");
}
.no-webp .cover-coahuila {
  background-image: url("../images/ecosistemas/coahuila/coahuila-cover.jpg");
}

.webp .donativo-coahuila{
    background-image: url("../images/ecosistemas/coahuila/coahuila-donativo-bg.webp");
}
.no-webp .donativo-coahuila{
    background-image: url("../images/ecosistemas/coahuila/coahuila-donativo-bg.jpg");
}

.webp .area-natural-coahuila{
    background-image: url("../images/ecosistemas/coahuila/area-natural-bg.webp");
}
.no-webp .area-natural-coahuila{
    background-image: url("../images/ecosistemas/coahuila/area-natural-bg.jpg");
}

/*  _____---------------------------------- CHIAPAS---------------------------*/

.webp .cover-chiapas{
  background-image: url("../images/ecosistemas/chiapas/cover.webp");
  background-position:  bottom center !important;
}
.no-webp .cover-chiapas {
  background-image: url("../images/ecosistemas/chiapas/cover.jpg");
  background-position:  bottom center !important;
}

.webp .donativo-chiapas{
    background-image: url("../images/ecosistemas/chiapas/donativo-bg.webp");
}
.no-webp .donativo-chiapas{
    background-image: url("../images/ecosistemas/chiapas/donativo-bg.jpg");
}

.webp .area-natural-chiapas{
    background-image: url("../images/ecosistemas/chiapas/area-natural-bg.webp");
}
.no-webp .area-natural-chiapas{
    background-image: url("../images/ecosistemas/chiapas/area-natural-bg.jpg");
}
/*  _____---------------------------------- Durango---------------------------*/

.webp .cover-durango{
  background-image: url("../images/ecosistemas/durango/cover.webp");
  
}
.no-webp .cover-durango {
  background-image: url("../images/ecosistemas/durango/cover.jpg");
  
}

.webp .donativo-durango{
    background-image: url("../images/ecosistemas/durango/donativo-bg.webp");
}
.no-webp .donativo-durango{
    background-image: url("../images/ecosistemas/durango/donativo-bg.jpg");
}

.webp .area-natural-durango{
    background-image: url("../images/ecosistemas/durango/area-natural-bg.webp");
}
.no-webp .area-natural-durango{
    background-image: url("../images/ecosistemas/durango/area-natural-bg.jpg");
}


/*  _____---------------------------------- jalisco---------------------------*/

.webp .cover-jalisco{
  background-image: url("../images/ecosistemas/jalisco/cover.webp");
  
}
.no-webp .cover-jalisco {
  background-image: url("../images/ecosistemas/jalisco/cover.jpg");
  
}

.webp .donativo-jalisco{
    background-image: url("../images/ecosistemas/jalisco/donativo-bg.webp");
}
.no-webp .donativo-jalisco{
    background-image: url("../images/ecosistemas/jalisco/donativo-bg.jpg");
}

.webp .area-natural-jalisco{
    background-image: url("../images/ecosistemas/jalisco/area-natural-bg.webp");
}
.no-webp .area-natural-jalisco{
    background-image: url("../images/ecosistemas/jalisco/area-natural-bg.jpg");
}

/*  _____---------------------------------- Quintana Roo---------------------------*/

.webp .cover-quintana-roo{
  background-image: url("../images/ecosistemas/quintana-roo/cover.webp");
  
}
.no-webp .cover-quintana-roo {
  background-image: url("../images/ecosistemas/quintana-roo/cover.jpg");
  
}

.webp .donativo-quintana-roo{
    background-image: url("../images/ecosistemas/quintana-roo/donativo.webp");
}
.no-webp .donativo-quintana-roo{
    background-image: url("../images/ecosistemas/quintana-roo/donativo.jpg");
}

.webp .area-natural-quintana-roo{
    background-image: url("../images/ecosistemas/quintana-roo/area-natural-bg.webp");
}
.no-webp .area-natural-quintana-roo{
    background-image: url("../images/ecosistemas/quintana-roo/area-natural-bg.jpg");
}

/*  _____---------------------------------- Tabasco---------------------------*/

.webp .cover-tabasco{
  background-image: url("../images/ecosistemas/tabasco/cover.webp");
}
.no-webp .cover-tabasco {
  background-image: url("../images/ecosistemas/tabasco/cover.jpg");
}

.webp .donativo-tabasco{
    background-image: url("../images/ecosistemas/tabasco/donativo-bg.webp");
}
.no-webp .donativo-tabasco{
    background-image: url("../images/ecosistemas/tabasco/donativo-bg.jpg");
}

.webp .area-natural-tabasco{
    background-image: url("../images/ecosistemas/tabasco/area-natural-bg.webp");
}
.no-webp .area-natural-tabasco{
    background-image: url("../images/ecosistemas/tabasco/area-natural-bg.jpg");
}


/*  _____---------------------------------- CDMX  ---------------------------*/

.webp .cover-cdmx{
  background-image: url("../images/ecosistemas/cdmx/cover.webp");
}
.no-webp .cover-cdmx {
  background-image: url("../images/ecosistemas/cdmx/cover.jpg");
}

.webp .donativo-cdmx{
    background-image: url("../images/ecosistemas/cdmx/donativo.webp");
}
.no-webp .donativo-cdmx{
    background-image: url("../images/ecosistemas/cdmx/donativo.jpg");
}

.webp .area-natural-cdmx{
    background-image: url("../images/ecosistemas/cdmx/area-natural-bg.webp");
}
.no-webp .area-natural-cdmx{
    background-image: url("../images/ecosistemas/cdmx/area-natural-bg.jpg");
}


/*  _____---------------------------------- Oaxaca  ---------------------------*/

.webp .cover-oaxaca{
  background-image: url("../images/ecosistemas/oaxaca/cover.webp");
}
.no-webp .cover-oaxaca {
  background-image: url("../images/ecosistemas/oaxaca/cover.jpg");
}

.webp .donativo-oaxaca{
    background-image: url("../images/ecosistemas/oaxaca/donativo-bg.webp");
}
.no-webp .donativo-oaxaca{
    background-image: url("../images/ecosistemas/oaxaca/donativo-bg.jpg");
}

.webp .area-natural-oaxaca{
    background-image: url("../images/ecosistemas/oaxaca/area-natural-bg.webp");
}
.no-webp .area-natural-oaxaca{
    background-image: url("../images/ecosistemas/oaxaca/area-natural-bg.jpg");
}


/*  _____---------------------------------- Xochimilco  ---------------------------*/

.webp .cover-xochimilco{
  background-image: url("../images/ecosistemas/xochimilco/cover.webp");
}
.no-webp .cover-xochimilco {
  background-image: url("../images/ecosistemas/xochimilco/cover.jpg");
}

.webp .donativo-xochimilco{
    background-image: url("../images/ecosistemas/xochimilco/donativo.webp");
}
.no-webp .donativo-xochimilco{
    background-image: url("../images/ecosistemas/xochimilco/donativo.jpg");
}

.webp .area-natural-xochimilco{
    background-image: url("../images/ecosistemas/xochimilco/area-natural-bg.webp");
}
.no-webp .area-natural-xochimilco{
    background-image: url("../images/ecosistemas/xochimilco/area-natural-bg.jpg");
}
/*  _____---------------------------------- Loreto  ---------------------------*/

.webp .cover-loreto{
  background-image: url("../images/ecosistemas/loreto/cover.webp");
}
.no-webp .cover-loreto {
  background-image: url("../images/ecosistemas/loreto/cover.jpg");
}

.webp .donativo-loreto{
    background-image: url("../images/ecosistemas/loreto/donativo.webp");
}
.no-webp .donativo-loreto{
    background-image: url("../images/ecosistemas/loreto/donativo.jpg");
}

.webp .area-natural-loreto{
    background-image: url("../images/ecosistemas/loreto/area-natural-bg.webp");
}
.no-webp .area-natural-loreto{
    background-image: url("../images/ecosistemas/loreto/area-natural-bg.jpg");
}
/*  _____---------------------------------- campeche  ---------------------------*/

.webp .cover-campeche{
  background-image: url("../images/ecosistemas/campeche/cover.webp");
}
.no-webp .cover-campeche {
  background-image: url("../images/ecosistemas/campeche/cover.jpg");
}

.webp .donativo-campeche{
    background-image: url("../images/ecosistemas/campeche/donativo.webp");
}
.no-webp .donativo-campeche{
    background-image: url("../images/ecosistemas/campeche/donativo.jpg");
}

.webp .area-natural-campeche{
    background-image: url("../images/ecosistemas/campeche/area-natural-bg.webp");
}
.no-webp .area-natural-campeche{
    background-image: url("../images/ecosistemas/campeche/area-natural-bg.jpg");
}

/*  _____---------------------------------- zitacuaro  ---------------------------*/

.webp .cover-zitacuaro{
  background-image: url("../images/ecosistemas/zitacuaro/cover.webp");
}
.no-webp .cover-zitacuaro {
  background-image: url("../images/ecosistemas/zitacuaro/cover.jpg");
}

.webp .donativo-zitacuaro{
    background-image: url("../images/ecosistemas/zitacuaro/donativo.webp");
}
.no-webp .donativo-zitacuaro{
    background-image: url("../images/ecosistemas/zitacuaro/donativo.jpg");
}

.webp .area-natural-zitacuaro{
    background-image: url("../images/ecosistemas/zitacuaro/area-natural-bg.webp");
}
.no-webp .area-natural-zitacuaro{
    background-image: url("../images/ecosistemas/zitacuaro/area-natural-bg.jpg");
}
/*  _____---------------------------------- kolijke  ---------------------------*/

.webp .cover-kolijke{
  background-image: url("../images/ecosistemas/kolijke/cover.webp");
}
.no-webp .cover-kolijke {
  background-image: url("../images/ecosistemas/kolijke/cover.jpg");
}

.webp .donativo-kolijke{
    background-image: url("../images/ecosistemas/kolijke/donativo.webp");
}
.no-webp .donativo-kolijke{
    background-image: url("../images/ecosistemas/kolijke/donativo.jpg");
}

.webp .area-natural-kolijke{
    background-image: url("../images/ecosistemas/kolijke/area-natural-bg.webp");
}
.no-webp .area-natural-kolijke{
    background-image: url("../images/ecosistemas/kolijke/area-natural-bg.jpg");
}

/*  _____---------------------------------- ahuisculco  ---------------------------*/

.webp .cover-ahuisculco{
  background-image: url("../images/ecosistemas/ahuisculco/cover.webp");
}
.no-webp .cover-ahuisculco {
  background-image: url("../images/ecosistemas/ahuisculco/cover.jpg");
}

.webp .donativo-ahuisculco{
    background-image: url("../images/ecosistemas/ahuisculco/donativo.webp");
}
.no-webp .donativo-ahuisculco{
    background-image: url("../images/ecosistemas/ahuisculco/donativo.jpg");
}

.webp .area-natural-ahuisculco{
    background-image: url("../images/ecosistemas/ahuisculco/area-natural-bg.webp");
}
.no-webp .area-natural-ahuisculco{
    background-image: url("../images/ecosistemas/ahuisculco/area-natural-bg.jpg");
}

/*  _____---------------------------------- maroma  ---------------------------*/

.webp .cover-maroma{
  background-image: url("../images/ecosistemas/maroma/cover.webp");
}
.no-webp .cover-maroma {
  background-image: url("../images/ecosistemas/maroma/cover.jpg");
}

.webp .donativo-maroma{
    background-image: url("../images/ecosistemas/maroma/donativo.webp");
}
.no-webp .donativo-maroma{
    background-image: url("../images/ecosistemas/maroma/donativo.jpg");
}

.webp .area-natural-maroma{
    background-image: url("../images/ecosistemas/maroma/area-natural-bg.webp");
}
.no-webp .area-natural-maroma{
    background-image: url("../images/ecosistemas/maroma/area-natural-bg.jpg");
}

/*  _____---------------------------------- tancitaro  ---------------------------*/

.webp .cover-tancitaro{
  background-image: url("../images/ecosistemas/tancitaro/cover.webp");
}
.no-webp .cover-tancitaro {
  background-image: url("../images/ecosistemas/tancitaro/cover.jpg");
}

.webp .donativo-tancitaro{
    background-image: url("../images/ecosistemas/tancitaro/donativo.webp");
}
.no-webp .donativo-tancitaro{
    background-image: url("../images/ecosistemas/tancitaro/donativo.jpg");
}

.webp .area-natural-tancitaro{
    background-image: url("../images/ecosistemas/tancitaro/area-natural-bg.webp");
}
.no-webp .area-natural-tancitaro{
    background-image: url("../images/ecosistemas/tancitaro/area-natural-bg.jpg");
}
/*  _____---------------------------------- colima  ---------------------------*/

.webp .cover-colima{
  background-image: url("../images/ecosistemas/colima/cover.webp");
}
.no-webp .cover-colima {
  background-image: url("../images/ecosistemas/colima/cover.jpg");
}

.webp .donativo-colima{
    background-image: url("../images/ecosistemas/colima/donativo.webp");
}
.no-webp .donativo-colima{
    background-image: url("../images/ecosistemas/colima/donativo.jpg");
}

.webp .area-natural-colima{
    background-image: url("../images/ecosistemas/colima/area-natural-bg.webp");
}
.no-webp .area-natural-colima{
    background-image: url("../images/ecosistemas/colima/area-natural-bg.jpg");
}


/*  _____---------------------------------- veracruz  ---------------------------*/

.webp .cover-veracruz{
  background-image: url("../images/ecosistemas/veracruz/cover.webp");
}
.no-webp .cover-veracruz {
  background-image: url("../images/ecosistemas/veracruz/cover.jpg");
}

.webp .donativo-veracruz{
    background-image: url("../images/ecosistemas/veracruz/donativo.webp");
}
.no-webp .donativo-veracruz{
    background-image: url("../images/ecosistemas/veracruz/donativo.jpg");
}

.webp .area-natural-veracruz{
    background-image: url("../images/ecosistemas/veracruz/area-natural-bg.webp");
}
.no-webp .area-natural-veracruz{
    background-image: url("../images/ecosistemas/veracruz/area-natural-bg.jpg");
}

/*  _____---------------------------------- sonora  ---------------------------*/

.webp .cover-sonora{
  background-image: url("../images/ecosistemas/sonora/cover.webp");
}
.no-webp .cover-sonora {
  background-image: url("../images/ecosistemas/sonora/cover.jpg");
}

.webp .donativo-sonora{
    background-image: url("../images/ecosistemas/sonora/donativo.webp");
}
.no-webp .donativo-sonora{
    background-image: url("../images/ecosistemas/sonora/donativo.jpg");
}

.webp .area-natural-sonora{
    background-image: url("../images/ecosistemas/sonora/area-natural-bg.webp");
}
.no-webp .area-natural-sonora{
    background-image: url("../images/ecosistemas/sonora/area-natural-bg.jpg");
}
/*  _____---------------------------------- isla-contoy  ---------------------------*/

.webp .cover-isla-contoy{
  background-image: url("../images/ecosistemas/isla-contoy/cover.webp");
}
.no-webp .cover-isla-contoy {
  background-image: url("../images/ecosistemas/isla-contoy/cover.jpg");
}

.webp .donativo-isla-contoy{
    background-image: url("../images/ecosistemas/isla-contoy/donativo.webp");
}
.no-webp .donativo-isla-contoy{
    background-image: url("../images/ecosistemas/isla-contoy/donativo.jpg");
}

.webp .area-natural-isla-contoy{
    background-image: url("../images/ecosistemas/isla-contoy/area-natural-bg.webp");
}
.no-webp .area-natural-isla-contoy{
    background-image: url("../images/ecosistemas/isla-contoy/area-natural-bg.jpg");
}

/*  _____---------------------------------- laguna-om  ---------------------------*/

.webp .cover-laguna-om{
  background-image: url("../images/ecosistemas/laguna-om/cover.webp");
}
.no-webp .cover-laguna-om {
  background-image: url("../images/ecosistemas/laguna-om/cover.jpg");
}

.webp .donativo-laguna-om{
    background-image: url("../images/ecosistemas/laguna-om/donativo.webp");
}
.no-webp .donativo-laguna-om{
    background-image: url("../images/ecosistemas/laguna-om/donativo.jpg");
}

.webp .area-natural-laguna-om{
    background-image: url("../images/ecosistemas/laguna-om/area-natural-bg.webp");
}
.no-webp .area-natural-laguna-om{
    background-image: url("../images/ecosistemas/laguna-om/area-natural-bg.jpg");
}
/*  _____---------------------------------- siembre-vida  ---------------------------*/

.webp .cover-siembre-vida{
    background-image: url("../images/ecosistemas/siembre-vida/cover.webp");
  }
  .no-webp .cover-siembre-vida {
    background-image: url("../images/ecosistemas/siembre-vida/cover.jpg");
  }
  
  .webp .donativo-siembre-vida{
      background-image: url("../images/ecosistemas/siembre-vida/donativo.webp");
  }
  .no-webp .donativo-siembre-vida{
      background-image: url("../images/ecosistemas/siembre-vida/donativo.jpg");
  }
  
  .webp .area-natural-siembre-vida{
      background-image: url("../images/ecosistemas/siembre-vida/area-natural-bg.webp");
  }
  .no-webp .area-natural-siembre-vida{
      background-image: url("../images/ecosistemas/siembre-vida/area-natural-bg.jpg");
  }
  

  /*  _____---------------------------------- sierra-guadalupe  ---------------------------*/

.webp .cover-sierra-guadalupe{
    background-image: url("../images/ecosistemas/sierra-guadalupe/cover.webp");
  }
  .no-webp .cover-sierra-guadalupe {
    background-image: url("../images/ecosistemas/sierra-guadalupe/cover.jpg");
  }
  
  .webp .donativo-sierra-guadalupe{
      background-image: url("../images/ecosistemas/sierra-guadalupe/donativo.webp");
  }
  .no-webp .donativo-sierra-guadalupe{
      background-image: url("../images/ecosistemas/sierra-guadalupe/donativo.jpg");
  }
  
  .webp .area-natural-sierra-guadalupe{
      background-image: url("../images/ecosistemas/sierra-guadalupe/area-natural-bg.webp");
  }
  .no-webp .area-natural-sierra-guadalupe{
      background-image: url("../images/ecosistemas/sierra-guadalupe/area-natural-bg.jpg");
  }
  
 /*  _____---------------------------------- chipinque  ---------------------------*/

 .webp .cover-chipinque{
    background-image: url("../images/ecosistemas/chipinque/cover.webp");
  }
  .no-webp .cover-chipinque {
    background-image: url("../images/ecosistemas/chipinque/cover.jpg");
  }
  
  .webp .donativo-chipinque{
      background-image: url("../images/ecosistemas/chipinque/donativo.webp");
  }
  .no-webp .donativo-chipinque{
      background-image: url("../images/ecosistemas/chipinque/donativo.jpg");
  }
  
  .webp .area-natural-chipinque{
      background-image: url("../images/ecosistemas/chipinque/area-natural-bg.webp");
  }
  .no-webp .area-natural-chipinque{
      background-image: url("../images/ecosistemas/chipinque/area-natural-bg.jpg");
  }
   /*  _____---------------------------------- cenote  ---------------------------*/

 .webp .cover-cenote{
    background-image: url("../images/ecosistemas/proyecto-cenote/cover.webp");
  }
  .no-webp .cover-cenote {
    background-image: url("../images/ecosistemas/proyecto-cenote/cover.jpg");
  }
  
  .webp .donativo-cenote{
      background-image: url("../images/ecosistemas/proyecto-cenote/donativo.webp");
  }
  .no-webp .donativo-cenote{
      background-image: url("../images/ecosistemas/proyecto-cenote/donativo.jpg");
  }
  
  .webp .area-natural-cenote{
      background-image: url("../images/ecosistemas/proyecto-cenote/area-natural-bg.webp");
  }
  .no-webp .area-natural-cenote{
      background-image: url("../images/ecosistemas/proyecto-cenote/area-natural-bg.jpg");
  }
  /*  _____---------------------------------- tehuacan  ---------------------------*/

 .webp .cover-tehuacan{
    background-image: url("../images/ecosistemas/tehuacan/cover.webp");
  }
  .no-webp .cover-tehuacan {
    background-image: url("../images/ecosistemas/tehuacan/cover.jpg");
  }
  
  .webp .donativo-tehuacan{
      background-image: url("../images/ecosistemas/tehuacan/donativo.webp");
  }
  .no-webp .donativo-tehuacan{
      background-image: url("../images/ecosistemas/tehuacan/donativo.jpg");
  }
  
  .webp .area-natural-tehuacan{
      background-image: url("../images/ecosistemas/tehuacan/area-natural-bg.webp");
  }
  .no-webp .area-natural-tehuacan{
      background-image: url("../images/ecosistemas/tehuacan/area-natural-bg.jpg");
  }

   /*  _____---------------------------------- tehuacan  ---------------------------*/

 .webp .cover-el-salvador{
    background-image: url("../images/ecosistemas/el-salvador/cover.webp");
  }
  .no-webp .cover-el-salvador {
    background-image: url("../images/ecosistemas/el-salvador/cover.jpg");
  }
  
  .webp .donativo-el-salvador{
      background-image: url("../images/ecosistemas/el-salvador/donativo.webp");
  }
  .no-webp .donativo-el-salvador{
      background-image: url("../images/ecosistemas/el-salvador/donativo.jpg");
  }
  
  .webp .area-natural-el-salvador{
      background-image: url("../images/ecosistemas/el-salvador/area-natural-bg.webp");
  }
  .no-webp .area-natural-el-salvador{
      background-image: url("../images/ecosistemas/el-salvador/area-natural-bg.jpg");
  }

   /*  _____---------------------------------- cerro-apapasco  ---------------------------*/

 .webp .cover-cerro-apapasco{
    background-image: url("../images/ecosistemas/cerro-apapasco/cover.webp");
  }
  .no-webp .cover-cerro-apapasco {
    background-image: url("../images/ecosistemas/cerro-apapasco/cover.jpg");
  }
  
  .webp .donativo-cerro-apapasco{
      background-image: url("../images/ecosistemas/cerro-apapasco/donativo.webp");
  }
  .no-webp .donativo-cerro-apapasco{
      background-image: url("../images/ecosistemas/cerro-apapasco/donativo.jpg");
  }
  
  .webp .area-natural-cerro-apapasco{
      background-image: url("../images/ecosistemas/cerro-apapasco/area-natural-bg.webp");
  }
  .no-webp .area-natural-cerro-apapasco{
      background-image: url("../images/ecosistemas/cerro-apapasco/area-natural-bg.jpg");
  }
   /*  _____---------------------------------- corredor-mariposa-monarca  ---------------------------*/

 .webp .cover-corredor-mariposa-monarca{
    background-image: url("../images/ecosistemas/corredor-mariposa-monarca/cover.webp");
  }
  .no-webp .cover-corredor-mariposa-monarca {
    background-image: url("../images/ecosistemas/corredor-mariposa-monarca/cover.jpg");
  }
  
  .webp .donativo-corredor-mariposa-monarca{
      background-image: url("../images/ecosistemas/corredor-mariposa-monarca/donativo.webp");
  }
  .no-webp .donativo-corredor-mariposa-monarca{
      background-image: url("../images/ecosistemas/corredor-mariposa-monarca/donativo.jpg");
  }
  
  .webp .area-natural-corredor-mariposa-monarca{
      background-image: url("../images/ecosistemas/corredor-mariposa-monarca/area-natural-bg.webp");
  }
  .no-webp .area-natural-corredor-mariposa-monarca{
      background-image: url("../images/ecosistemas/corredor-mariposa-monarca/area-natural-bg.jpg");
  }
/*  _____---------------------------------- recuperacion-de-alimentos  ---------------------------*/

.webp .cover-recuperacion-de-alimentos{
    background-image: url("../images/ecosistemas/recuperacion-de-alimentos/cover.webp");
  }
  .no-webp .cover-recuperacion-de-alimentos {
    background-image: url("../images/ecosistemas/recuperacion-de-alimentos/cover.jpg");
  }
  .webp .area-natural-recuperacion-de-alimentos{
      background-image: url("../images/ecosistemas/recuperacion-de-alimentos/area-natural-bg.webp");
  }
  .no-webp .area-natural-recuperacion-de-alimentos{
      background-image: url("../images/ecosistemas/recuperacion-de-alimentos/area-natural-bg.jpg");
  }

  /*  _____---------------------------------- axoarca  ---------------------------*/

 .webp .cover-axoarca{
    background-image: url("../images/ecosistemas/axoarca/cover.webp");
  }
  .no-webp .cover-axoarca {
    background-image: url("../images/ecosistemas/axoarca/cover.jpg");
  }
  
  .webp .donativo-axoarca{
      background-image: url("../images/ecosistemas/axoarca/donativo.webp");
  }
  .no-webp .donativo-axoarca{
      background-image: url("../images/ecosistemas/axoarca/donativo.jpg");
  }
  
  .webp .area-natural-axoarca{
      background-image: url("../images/ecosistemas/axoarca/area-natural-bg.webp");
  }
  .no-webp .area-natural-axoarca{
      background-image: url("../images/ecosistemas/axoarca/area-natural-bg.jpg");
  }

  /*  _____---------------------------------- refugio-de-aves  ---------------------------*/

 .webp .cover-refugio-de-aves{
    background-image: url("../images/ecosistemas/refugio-de-aves/cover.webp");
  }
  .no-webp .cover-refugio-de-aves {
    background-image: url("../images/ecosistemas/refugio-de-aves/cover.jpg");
  }
  
  .webp .donativo-refugio-de-aves{
      background-image: url("../images/ecosistemas/refugio-de-aves/donativo.webp");
  }
  .no-webp .donativo-refugio-de-aves{
      background-image: url("../images/ecosistemas/refugio-de-aves/donativo.jpg");
  }
  
  .webp .area-natural-refugio-de-aves{
      background-image: url("../images/ecosistemas/refugio-de-aves/area-natural-bg.webp");
  }
  .no-webp .area-natural-refugio-de-aves{
      background-image: url("../images/ecosistemas/refugio-de-aves/area-natural-bg.jpg");
  }
/*  _____---------------------------------- sistema-arrecifal-veracruzano  ---------------------------*/

.webp .cover-sistema-arrecifal-veracruzano{
    background-image: url("../images/ecosistemas/sistema-arrecifal-veracruzano/cover.webp");
  }
  .no-webp .cover-sistema-arrecifal-veracruzano {
    background-image: url("../images/ecosistemas/sistema-arrecifal-veracruzano/cover.jpg");
  }
  
  .webp .donativo-sistema-arrecifal-veracruzano{
      background-image: url("../images/ecosistemas/sistema-arrecifal-veracruzano/donativo-bg.webp");
  }
  .no-webp .donativo-sistema-arrecifal-veracruzano{
      background-image: url("../images/ecosistemas/sistema-arrecifal-veracruzano/donativo-bg.jpg");
  }
  
  .webp .area-natural-sistema-arrecifal-veracruzano{
      background-image: url("../images/ecosistemas/sistema-arrecifal-veracruzano/area-natural-bg.webp");
  }
  .no-webp .area-natural-sistema-arrecifal-veracruzano{
      background-image: url("../images/ecosistemas/sistema-arrecifal-veracruzano/area-natural-bg.jpg");
  }
  /*  _____---------------------------------- museo-del-agua  ---------------------------*/

.webp .cover-museo-del-agua{
    background-image: url("../images/ecosistemas/museo-del-agua/cover.webp");
  }
  .no-webp .cover-museo-del-agua {
    background-image: url("../images/ecosistemas/museo-del-agua/cover.jpg");
  }
  
  .webp .donativo-museo-del-agua{
      background-image: url("../images/ecosistemas/museo-del-agua/donativo-bg.webp");
  }
  .no-webp .donativo-museo-del-agua{
      background-image: url("../images/ecosistemas/museo-del-agua/donativo-bg.jpg");
  }
  
  .webp .area-natural-museo-del-agua{
      background-image: url("../images/ecosistemas/museo-del-agua/area-natural-bg.webp");
  }
  .no-webp .area-natural-museo-del-agua{
      background-image: url("../images/ecosistemas/museo-del-agua/area-natural-bg.jpg");
  }

    /*  _____---------------------------------- rescatando-las-sierras-de-la-ciudad  ---------------------------*/

.webp .cover-rescatando-las-sierras-de-la-ciudad{
    background-image: url("../images/ecosistemas/rescatando-las-sierras-de-la-ciudad/cover.webp");
  }
  .no-webp .cover-rescatando-las-sierras-de-la-ciudad {
    background-image: url("../images/ecosistemas/rescatando-las-sierras-de-la-ciudad/cover.jpg");
  }
  
  .webp .donativo-rescatando-las-sierras-de-la-ciudad{
      background-image: url("../images/ecosistemas/rescatando-las-sierras-de-la-ciudad/donativo-bg.webp");
  }
  .no-webp .donativo-rescatando-las-sierras-de-la-ciudad{
      background-image: url("../images/ecosistemas/rescatando-las-sierras-de-la-ciudad/donativo-bg.jpg");
  }
  
  .webp .area-natural-rescatando-las-sierras-de-la-ciudad{
      background-image: url("../images/ecosistemas/rescatando-las-sierras-de-la-ciudad/area-natural-bg.webp");
  }
  .no-webp .area-natural-rescatando-las-sierras-de-la-ciudad{
      background-image: url("../images/ecosistemas/rescatando-las-sierras-de-la-ciudad/area-natural-bg.jpg");
  }
  /*  _____---------------------------------- sierra-de-tepotzotlan  ---------------------------*/

.webp .cover-sierra-de-tepotzotlan{
    background-image: url("../images/ecosistemas/sierra-de-tepotzotlan/cover.webp");
  }
  .no-webp .cover-sierra-de-tepotzotlan {
    background-image: url("../images/ecosistemas/sierra-de-tepotzotlan/cover.jpg");
  }
  
  .webp .donativo-sierra-de-tepotzotlan{
      background-image: url("../images/ecosistemas/sierra-de-tepotzotlan/donativo-bg.webp");
  }
  .no-webp .donativo-sierra-de-tepotzotlan{
      background-image: url("../images/ecosistemas/sierra-de-tepotzotlan/donativo-bg.jpg");
  }
  
  .webp .area-natural-sierra-de-tepotzotlan{
      background-image: url("../images/ecosistemas/sierra-de-tepotzotlan/area-natural-bg.webp");
  }
  .no-webp .area-natural-sierra-de-tepotzotlan{
      background-image: url("../images/ecosistemas/sierra-de-tepotzotlan/area-natural-bg.jpg");
  }


  /*  _____---------------------------------- bosque-de-la-primavera-y-cerro-viejo  ---------------------------*/

.webp .cover-bosque-de-la-primavera-y-cerro-viejo{
    background-image: url("../images/ecosistemas/bosque-de-la-primavera-y-cerro-viejo/cover.webp");
  }
  .no-webp .cover-bosque-de-la-primavera-y-cerro-viejo {
    background-image: url("../images/ecosistemas/bosque-de-la-primavera-y-cerro-viejo/cover.jpg");
  }
  
  .webp .donativo-bosque-de-la-primavera-y-cerro-viejo{
      background-image: url("../images/ecosistemas/bosque-de-la-primavera-y-cerro-viejo/donativo-bg.webp");
  }
  .no-webp .donativo-bosque-de-la-primavera-y-cerro-viejo{
      background-image: url("../images/ecosistemas/bosque-de-la-primavera-y-cerro-viejo/donativo-bg.jpg");
  }
  
  .webp .area-natural-bosque-de-la-primavera-y-cerro-viejo{
      background-image: url("../images/ecosistemas/bosque-de-la-primavera-y-cerro-viejo/area-natural-bg.webp");
  }
  .no-webp .area-natural-bosque-de-la-primavera-y-cerro-viejo{
      background-image: url("../images/ecosistemas/bosque-de-la-primavera-y-cerro-viejo/area-natural-bg.jpg");
  }

  /*  _____---------------------------------- centro-de-rescate-y-rehabilitacion-de-fauna-silvestre  ---------------------------*/

.webp .cover-centro-de-rescate-y-rehabilitacion-de-fauna-silvestre{
    background-image: url("../images/ecosistemas/centro-de-rescate-y-rehabilitacion-de-fauna-silvestre/cover.webp");
  }
  .no-webp .cover-centro-de-rescate-y-rehabilitacion-de-fauna-silvestre {
    background-image: url("../images/ecosistemas/centro-de-rescate-y-rehabilitacion-de-fauna-silvestre/cover.jpg");
  }
  
  .webp .donativo-centro-de-rescate-y-rehabilitacion-de-fauna-silvestre{
      background-image: url("../images/ecosistemas/centro-de-rescate-y-rehabilitacion-de-fauna-silvestre/donativo-bg.webp");
  }
  .no-webp .donativo-centro-de-rescate-y-rehabilitacion-de-fauna-silvestre{
      background-image: url("../images/ecosistemas/centro-de-rescate-y-rehabilitacion-de-fauna-silvestre/donativo-bg.jpg");
  }
  
  .webp .area-natural-centro-de-rescate-y-rehabilitacion-de-fauna-silvestre{
      background-image: url("../images/ecosistemas/centro-de-rescate-y-rehabilitacion-de-fauna-silvestre/area-natural-bg.webp");
  }
  .no-webp .area-natural-centro-de-rescate-y-rehabilitacion-de-fauna-silvestre{
      background-image: url("../images/ecosistemas/centro-de-rescate-y-rehabilitacion-de-fauna-silvestre/area-natural-bg.jpg");
  }

  /*  _____---------------------------------- desarrollo-comunitario-de-lostuxtlas  ---------------------------*/

.webp .cover-desarrollo-comunitario-de-lostuxtlas{
    background-image: url("../images/ecosistemas/desarrollo-comunitario-de-lostuxtlas/cover.webp");
  }
  .no-webp .cover-desarrollo-comunitario-de-lostuxtlas {
    background-image: url("../images/ecosistemas/desarrollo-comunitario-de-lostuxtlas/cover.jpg");
  }
  
  .webp .donativo-desarrollo-comunitario-de-lostuxtlas{
      background-image: url("../images/ecosistemas/desarrollo-comunitario-de-lostuxtlas/donativo-bg.webp");
  }
  .no-webp .donativo-desarrollo-comunitario-de-lostuxtlas{
      background-image: url("../images/ecosistemas/desarrollo-comunitario-de-lostuxtlas/donativo-bg.jpg");
  }
  
  .webp .area-natural-desarrollo-comunitario-de-lostuxtlas{
      background-image: url("../images/ecosistemas/desarrollo-comunitario-de-lostuxtlas/area-natural-bg.webp");
  }
  .no-webp .area-natural-desarrollo-comunitario-de-lostuxtlas{
      background-image: url("../images/ecosistemas/desarrollo-comunitario-de-lostuxtlas/area-natural-bg.jpg");
  }
  
  /*  _____---------------------------------- bosque-antiguo  ---------------------------*/

.webp .cover-bosque-antiguo{
    background-image: url("../images/ecosistemas/bosque-antiguo/cover.webp");
  }
  .no-webp .cover-bosque-antiguo {
    background-image: url("../images/ecosistemas/bosque-antiguo/cover.jpg");
  }
  
  .webp .donativo-bosque-antiguo{
      background-image: url("../images/ecosistemas/bosque-antiguo/donativo-bg.webp");
  }
  .no-webp .donativo-bosque-antiguo{
      background-image: url("../images/ecosistemas/bosque-antiguo/donativo-bg.jpg");
  }
  
  .webp .area-natural-bosque-antiguo{
      background-image: url("../images/ecosistemas/bosque-antiguo/area-natural-bg.webp");
  }
  .no-webp .area-natural-bosque-antiguo{
      background-image: url("../images/ecosistemas/bosque-antiguo/area-natural-bg.jpg");
  }

  /*  _____---------------------------------- reserva-de-la-biosfera-de-sian-kaan  ---------------------------*/

.webp .cover-reserva-de-la-biosfera-de-sian-kaan{
    background-image: url("../images/ecosistemas/reserva-de-la-biosfera-de-sian-kaan/cover.webp");
  }
  .no-webp .cover-reserva-de-la-biosfera-de-sian-kaan {
    background-image: url("../images/ecosistemas/reserva-de-la-biosfera-de-sian-kaan/cover.jpg");
  }
  
  .webp .donativo-reserva-de-la-biosfera-de-sian-kaan{
      background-image: url("../images/ecosistemas/reserva-de-la-biosfera-de-sian-kaan/donativo-bg.webp");
  }
  .no-webp .donativo-reserva-de-la-biosfera-de-sian-kaan{
      background-image: url("../images/ecosistemas/reserva-de-la-biosfera-de-sian-kaan/donativo-bg.jpg");
  }
  
  .webp .area-natural-reserva-de-la-biosfera-de-sian-kaan{
      background-image: url("../images/ecosistemas/reserva-de-la-biosfera-de-sian-kaan/area-natural-bg.webp");
  }
  .no-webp .area-natural-reserva-de-la-biosfera-de-sian-kaan{
      background-image: url("../images/ecosistemas/reserva-de-la-biosfera-de-sian-kaan/area-natural-bg.jpg");
  }

  /*  _____---------------------------------- cadnr-026-bajo-rio-san-juan  ---------------------------*/

.webp .cover-cadnr-026-bajo-rio-san-juan{
    background-image: url("../images/ecosistemas/cadnr-026-bajo-rio-san-juan/cover.webp");
  }
  .no-webp .cover-cadnr-026-bajo-rio-san-juan {
    background-image: url("../images/ecosistemas/cadnr-026-bajo-rio-san-juan/cover.jpg");
  }
  
  .webp .donativo-cadnr-026-bajo-rio-san-juan{
      background-image: url("../images/ecosistemas/cadnr-026-bajo-rio-san-juan/donativo-bg.webp");
  }
  .no-webp .donativo-cadnr-026-bajo-rio-san-juan{
      background-image: url("../images/ecosistemas/cadnr-026-bajo-rio-san-juan/donativo-bg.jpg");
  }
  
  .webp .area-natural-cadnr-026-bajo-rio-san-juan{
      background-image: url("../images/ecosistemas/cadnr-026-bajo-rio-san-juan/area-natural-bg.webp");
  }
  .no-webp .area-natural-cadnr-026-bajo-rio-san-juan{
      background-image: url("../images/ecosistemas/cadnr-026-bajo-rio-san-juan/area-natural-bg.jpg");
  }

    /*  _____---------------------------------- sierra-sur-oaxaca-costa-pacifico  ---------------------------*/

.webp .cover-sierra-sur-oaxaca-costa-pacifico{
    background-image: url("../images/ecosistemas/sierra-sur-oaxaca-costa-pacifico/cover.webp");
  }
  .no-webp .cover-sierra-sur-oaxaca-costa-pacifico {
    background-image: url("../images/ecosistemas/sierra-sur-oaxaca-costa-pacifico/cover.jpg");
  }
  
  .webp .donativo-sierra-sur-oaxaca-costa-pacifico{
      background-image: url("../images/ecosistemas/sierra-sur-oaxaca-costa-pacifico/donativo-bg.webp");
  }
  .no-webp .donativo-sierra-sur-oaxaca-costa-pacifico{
      background-image: url("../images/ecosistemas/sierra-sur-oaxaca-costa-pacifico/donativo-bg.jpg");
  }
  
  .webp .area-natural-sierra-sur-oaxaca-costa-pacifico{
      background-image: url("../images/ecosistemas/sierra-sur-oaxaca-costa-pacifico/area-natural-bg.webp");
  }
  .no-webp .area-natural-sierra-sur-oaxaca-costa-pacifico{
      background-image: url("../images/ecosistemas/sierra-sur-oaxaca-costa-pacifico/area-natural-bg.jpg");
  }

   /*  _____---------------------------------- bahia-de-la-paz  ---------------------------*/

.webp .cover-bahia-de-la-paz{
    background-image: url("../images/ecosistemas/bahia-de-la-paz/cover.webp");
  }
  .no-webp .cover-bahia-de-la-paz {
    background-image: url("../images/ecosistemas/bahia-de-la-paz/cover.jpg");
  }
  
  .webp .donativo-bahia-de-la-paz{
      background-image: url("../images/ecosistemas/bahia-de-la-paz/donativo-bg.webp");
  }
  .no-webp .donativo-bahia-de-la-paz{
      background-image: url("../images/ecosistemas/bahia-de-la-paz/donativo-bg.jpg");
  }
  
  .webp .area-natural-bahia-de-la-paz{
      background-image: url("../images/ecosistemas/bahia-de-la-paz/area-natural-bg.webp");
  }
  .no-webp .area-natural-bahia-de-la-paz{
      background-image: url("../images/ecosistemas/bahia-de-la-paz/area-natural-bg.jpg");
  }

   /*  _____---------------------------------- coralisma  ---------------------------*/

.webp .cover-coralisma{
    background-image: url("../images/ecosistemas/coralisma/cover.webp");
  }
  .no-webp .cover-coralisma {
    background-image: url("../images/ecosistemas/coralisma/cover.jpg");
  }
  
  .webp .donativo-coralisma{
      background-image: url("../images/ecosistemas/coralisma/donativo-bg.webp");
  }
  .no-webp .donativo-coralisma{
      background-image: url("../images/ecosistemas/coralisma/donativo-bg.jpg");
  }
  
  .webp .area-natural-coralisma{
      background-image: url("../images/ecosistemas/coralisma/area-natural-bg.webp");
  }
  .no-webp .area-natural-coralisma{
      background-image: url("../images/ecosistemas/coralisma/area-natural-bg.jpg");
  }

   /*  _____---------------------------------- ejido-cuitzeo  ---------------------------*/

.webp .cover-ejido-cuitzeo{
    background-image: url("../images/ecosistemas/ejido-cuitzeo/cover.webp");
  }
  .no-webp .cover-ejido-cuitzeo {
    background-image: url("../images/ecosistemas/ejido-cuitzeo/cover.jpg");
  }
  
  .webp .donativo-ejido-cuitzeo{
      background-image: url("../images/ecosistemas/ejido-cuitzeo/donativo-bg.webp");
  }
  .no-webp .donativo-ejido-cuitzeo{
      background-image: url("../images/ecosistemas/ejido-cuitzeo/donativo-bg.jpg");
  }
  
  .webp .area-natural-ejido-cuitzeo{
      background-image: url("../images/ecosistemas/ejido-cuitzeo/area-natural-bg.webp");
  }
  .no-webp .area-natural-ejido-cuitzeo{
      background-image: url("../images/ecosistemas/ejido-cuitzeo/area-natural-bg.jpg");
  }
 
    /*  _____---------------------------------- restauremos-el-pico-de-orizaba  ---------------------------*/

.webp .cover-restauremos-el-pico-de-orizaba{
    background-image: url("../images/ecosistemas/restauremos-el-pico-de-orizaba/cover.webp");
  }
  .no-webp .cover-restauremos-el-pico-de-orizaba {
    background-image: url("../images/ecosistemas/restauremos-el-pico-de-orizaba/cover.jpg");
  }
  
  .webp .donativo-restauremos-el-pico-de-orizaba{
      background-image: url("../images/ecosistemas/restauremos-el-pico-de-orizaba/donativo-bg.webp");
  }
  .no-webp .donativo-restauremos-el-pico-de-orizaba{
      background-image: url("../images/ecosistemas/restauremos-el-pico-de-orizaba/donativo-bg.jpg");
  }
  
  .webp .area-natural-restauremos-el-pico-de-orizaba{
      background-image: url("../images/ecosistemas/restauremos-el-pico-de-orizaba/area-natural-bg.webp");
  }
  .no-webp .area-natural-restauremos-el-pico-de-orizaba{
      background-image: url("../images/ecosistemas/restauremos-el-pico-de-orizaba/area-natural-bg.jpg");
  }
  /*  _____---------------------------------- cumbres-de-monterrey  ---------------------------*/

.webp .cover-cumbres-de-monterrey{
    background-image: url("../images/ecosistemas/cumbres-de-monterrey/cover.webp");
  }
  .no-webp .cover-cumbres-de-monterrey {
    background-image: url("../images/ecosistemas/cumbres-de-monterrey/cover.jpg");
  }
  
  .webp .donativo-cumbres-de-monterrey{
      background-image: url("../images/ecosistemas/cumbres-de-monterrey/donativo-bg.webp");
  }
  .no-webp .donativo-cumbres-de-monterrey{
      background-image: url("../images/ecosistemas/cumbres-de-monterrey/donativo-bg.jpg");
  }
  
  .webp .area-natural-cumbres-de-monterrey{
      background-image: url("../images/ecosistemas/cumbres-de-monterrey/area-natural-bg.webp");
  }
  .no-webp .area-natural-cumbres-de-monterrey{
      background-image: url("../images/ecosistemas/cumbres-de-monterrey/area-natural-bg.jpg");
  }
 /*  _____---------------------------------- pro-red-participativa  ---------------------------*/

 .webp .cover-pro-red-participativa{
    background-image: url("../images/ecosistemas/pro-red-participativa/cover.webp");
  }
  .no-webp .cover-pro-red-participativa {
    background-image: url("../images/ecosistemas/pro-red-participativa/cover.jpg");
  }
  
  .webp .donativo-pro-red-participativa{
      background-image: url("../images/ecosistemas/pro-red-participativa/donativo-bg.webp");
  }
  .no-webp .donativo-pro-red-participativa{
      background-image: url("../images/ecosistemas/pro-red-participativa/donativo-bg.jpg");
  }
  
  .webp .area-natural-pro-red-participativa{
      background-image: url("../images/ecosistemas/pro-red-participativa/area-natural-bg.webp");
  }
  .no-webp .area-natural-pro-red-participativa{
      background-image: url("../images/ecosistemas/pro-red-participativa/area-natural-bg.jpg");
  }

  /*  _____---------------------------------- laguna-de-tecocomulco  ---------------------------*/

 .webp .cover-laguna-de-tecocomulco{
    background-image: url("../images/ecosistemas/laguna-de-tecocomulco/cover.webp");
  }
  .no-webp .cover-laguna-de-tecocomulco {
    background-image: url("../images/ecosistemas/laguna-de-tecocomulco/cover.jpg");
  }
  
  .webp .donativo-laguna-de-tecocomulco{
      background-image: url("../images/ecosistemas/laguna-de-tecocomulco/donativo-bg.webp");
  }
  .no-webp .donativo-laguna-de-tecocomulco{
      background-image: url("../images/ecosistemas/laguna-de-tecocomulco/donativo-bg.jpg");
  }
  
  .webp .area-natural-laguna-de-tecocomulco{
      background-image: url("../images/ecosistemas/laguna-de-tecocomulco/area-natural-bg.webp");
  }
  .no-webp .area-natural-laguna-de-tecocomulco{
      background-image: url("../images/ecosistemas/laguna-de-tecocomulco/area-natural-bg.jpg");
  }

  /*  _____---------------------------------- ejido-loma-bonita  ---------------------------*/

 .webp .cover-ejido-loma-bonita{
    background-image: url("../images/ecosistemas/ejido-loma-bonita/cover.webp");
  }
  .no-webp .cover-ejido-loma-bonita {
    background-image: url("../images/ecosistemas/ejido-loma-bonita/cover.jpg");
  }
  
  .webp .donativo-ejido-loma-bonita{
      background-image: url("../images/ecosistemas/ejido-loma-bonita/donativo-bg.webp");
  }
  .no-webp .donativo-ejido-loma-bonita{
      background-image: url("../images/ecosistemas/ejido-loma-bonita/donativo-bg.jpg");
  }
  
  .webp .area-natural-ejido-loma-bonita{
      background-image: url("../images/ecosistemas/ejido-loma-bonita/area-natural-bg.webp");
  }
  .no-webp .area-natural-ejido-loma-bonita{
      background-image: url("../images/ecosistemas/ejido-loma-bonita/area-natural-bg.jpg");
  }

    /*  _____---------------------------------- laguna-de-atotonilco  ---------------------------*/

 .webp .cover-laguna-de-atotonilco{
    background-image: url("../images/ecosistemas/laguna-de-atotonilco/cover.webp");
  }
  .no-webp .cover-laguna-de-atotonilco {
    background-image: url("../images/ecosistemas/laguna-de-atotonilco/cover.jpg");
  }
  
  .webp .donativo-laguna-de-atotonilco{
      background-image: url("../images/ecosistemas/laguna-de-atotonilco/donativo-bg.webp");
  }
  .no-webp .donativo-laguna-de-atotonilco{
      background-image: url("../images/ecosistemas/laguna-de-atotonilco/donativo-bg.jpg");
  }
  
  .webp .area-natural-laguna-de-atotonilco{
      background-image: url("../images/ecosistemas/laguna-de-atotonilco/area-natural-bg.webp");
  }
  .no-webp .area-natural-laguna-de-atotonilco{
      background-image: url("../images/ecosistemas/laguna-de-atotonilco/area-natural-bg.jpg");
  }

  /*  _____---------------------------------- salvatierra  ---------------------------*/

 .webp .cover-salvatierra{
    background-image: url("../images/ecosistemas/salvatierra/cover.webp");
  }
  .no-webp .cover-salvatierra {
    background-image: url("../images/ecosistemas/salvatierra/cover.jpg");
  }
  
  .webp .donativo-salvatierra{
      background-image: url("../images/ecosistemas/salvatierra/donativo-bg.webp");
  }
  .no-webp .donativo-salvatierra{
      background-image: url("../images/ecosistemas/salvatierra/donativo-bg.jpg");
  }
  
  .webp .area-natural-salvatierra{
      background-image: url("../images/ecosistemas/salvatierra/area-natural-bg.webp");
  }
  .no-webp .area-natural-salvatierra{
      background-image: url("../images/ecosistemas/salvatierra/area-natural-bg.jpg");
  }

  /*  _____---------------------------------- tecolutla  ---------------------------*/

 .webp .cover-tecolutla{
    background-image: url("../images/ecosistemas/tecolutla/cover.webp");
  }
  .no-webp .cover-tecolutla {
    background-image: url("../images/ecosistemas/tecolutla/cover.jpg");
  }
  
  .webp .donativo-tecolutla{
      background-image: url("../images/ecosistemas/tecolutla/donativo-bg.webp");
  }
  .no-webp .donativo-tecolutla{
      background-image: url("../images/ecosistemas/tecolutla/donativo-bg.jpg");
  }
  
  .webp .area-natural-tecolutla{
      background-image: url("../images/ecosistemas/tecolutla/area-natural-bg.webp");
  }
  .no-webp .area-natural-tecolutla{
      background-image: url("../images/ecosistemas/tecolutla/area-natural-bg.jpg");
  }

   /*  _____---------------------------------- isla-del-carmen-bahia-de-loreto  ---------------------------*/

 .webp .cover-isla-del-carmen-bahia-de-loreto{
    background-image: url("../images/ecosistemas/isla-del-carmen-bahia-de-loreto/cover.webp");
  }
  .no-webp .cover-isla-del-carmen-bahia-de-loreto {
    background-image: url("../images/ecosistemas/isla-del-carmen-bahia-de-loreto/cover.jpg");
  }
  
  .webp .donativo-isla-del-carmen-bahia-de-loreto{
      background-image: url("../images/ecosistemas/isla-del-carmen-bahia-de-loreto/donativo-bg.webp");
  }
  .no-webp .donativo-isla-del-carmen-bahia-de-loreto{
      background-image: url("../images/ecosistemas/isla-del-carmen-bahia-de-loreto/donativo-bg.jpg");
  }
  
  .webp .area-natural-isla-del-carmen-bahia-de-loreto{
      background-image: url("../images/ecosistemas/isla-del-carmen-bahia-de-loreto/area-natural-bg.webp");
  }
  .no-webp .area-natural-isla-del-carmen-bahia-de-loreto{
      background-image: url("../images/ecosistemas/isla-del-carmen-bahia-de-loreto/area-natural-bg.jpg");
  }

.gradient1{
position: absolute;
width: 100%;
height: 10vh;
bottom: -5vh;
left: 0;
background: -moz-linear-gradient(top, rgba(241,238,227,0) 0%, rgba(241,238,227,1) 50%, rgba(241,238,227,0) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(241,238,227,0) 0%,rgba(241,238,227,1) 50%,rgba(241,238,227,0) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(241,238,227,0) 0%,rgba(241,238,227,1) 50%,rgba(241,238,227,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
.gradient-blanco{
position: absolute;
width: 100%;
height: 60%;
bottom: -1px;
left: 0;
background: -moz-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 0%rgba(255, 255, 255, 1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%rgba(255, 255, 255, 1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
.gradient-navy{
position: absolute;
width: 100%;
height: 10vh;
bottom: -1px;
left: 0;
background: -moz-linear-gradient(top, rgba(14, 23, 45, 0) 0%,  rgba(14, 23, 45,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(14, 23, 45,0) 0%,rgba(14, 23, 45,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(14, 23, 45,0) 0%,rgba(14, 23, 45,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

}





@media (max-width: 1399.98px) { 
    .fauna-cont, .flora-cont {
        max-width: 560px;
    }
    .fauna-text, .flora-text {
        width: 380px;
    }
    .fauna-photo, .flora-photo {
        width: 170px;
    }
/*  _____---------------------------------- CHIAPAS---------------------------*/

    .webp .cover-chiapas{
    background-image: url("../images/ecosistemas/chiapas/cover-md.jpg");
    background-position:  bottom center !important;
    }
    .no-webp .cover-chiapas {
    background-image: url("../images/ecosistemas/chiapas/cover-md.jpg");
    background-position:  bottom center !important;
    }

    .webp .donativo-chiapas{
        background-image: url("../images/ecosistemas/chiapas/donativo-md.jpg");
    }
    .no-webp .donativo-chiapas{
        background-image: url("../images/ecosistemas/chiapas/donativo-md.jpg");
    }

    .webp .area-natural-chiapas{
        background-image: url("../images/ecosistemas/chiapas/area-natural-bg-md.webp");
    }
    .no-webp .area-natural-chiapas{
        background-image: url("../images/ecosistemas/chiapas/area-natural-bg-md.jpg");
    }
    /*  _____---------------------------------- Durango---------------------------*/

    .webp .cover-durango{
    background-image: url("../images/ecosistemas/durango/cover-md.webp");
    
    }
    .no-webp .cover-durango {
    background-image: url("../images/ecosistemas/durango/cover-md.jpg");
    
    }

    .webp .donativo-durango{
        background-image: url("../images/ecosistemas/durango/donativo-md.webp");
    }
    .no-webp .donativo-durango{
        background-image: url("../images/ecosistemas/durango/donativo-md.jpg");
    }

    .webp .area-natural-durango{
        background-image: url("../images/ecosistemas/durango/area-natural-md.webp");
    }
    .no-webp .area-natural-durango{
        background-image: url("../images/ecosistemas/durango/area-natural-md.jpg");
    }
    /*  _____---------------------------------- jalisco---------------------------*/

    .webp .cover-jalisco{
    background-image: url("../images/ecosistemas/jalisco/cover-md.webp");
    
    }
    .no-webp .cover-jalisco {
    background-image: url("../images/ecosistemas/jalisco/cover-md.jpg");
    
    }

    .webp .donativo-jalisco{
        background-image: url("../images/ecosistemas/jalisco/donativo-md.webp");
    }
    .no-webp .donativo-jalisco{
        background-image: url("../images/ecosistemas/jalisco/donativo-md.jpg");
    }

    .webp .area-natural-jalisco{
        background-image: url("../images/ecosistemas/jalisco/area-natural-md.webp");
    }
    .no-webp .area-natural-jalisco{
        background-image: url("../images/ecosistemas/jalisco/area-natural-md.jpg");
    }
    /*  _____---------------------------------- Coahuila---------------------------*/
    .webp .cover-coahuila{
    background-image: url("../images/ecosistemas/coahuila/cover-md.webp");
    }
    .no-webp .cover-coahuila {
    background-image: url("../images/ecosistemas/coahuila/cover-md.jpg");
    }

    .webp .donativo-coahuila{
        background-image: url("../images/ecosistemas/coahuila/coahuila-donativo-md.webp");
    }
    .no-webp .donativo-coahuila{
        background-image: url("../images/ecosistemas/coahuila/coahuila-donativo-md.jpg");
    }

    .webp .area-natural-coahuila{
        background-image: url("../images/ecosistemas/coahuila/area-natural-md.webp");
    }
    .no-webp .area-natural-coahuila{
        background-image: url("../images/ecosistemas/coahuila/area-natural-md.jpg");
    }
    /*  _____---------------------------------- Quintana Roo---------------------------*/

    .webp .cover-quintana-roo{
    background-image: url("../images/ecosistemas/quintana-roo/cover-md.webp");
    
    }
    .no-webp .cover-quintana-roo {
    background-image: url("../images/ecosistemas/quintana-roo/cover-md.jpg");
    
    }

    .webp .donativo-quintana-roo{
        background-image: url("../images/ecosistemas/quintana-roo/donativo-md.webp");
    }
    .no-webp .donativo-quintana-roo{
        background-image: url("../images/ecosistemas/quintana-roo/donativo-md.jpg");
    }

    .webp .area-natural-quintana-roo{
        background-image: url("../images/ecosistemas/quintana-roo/area-natural-md.webp");
    }
    .no-webp .area-natural-quintana-roo{
        background-image: url("../images/ecosistemas/quintana-roo/area-natural-md.jpg");
    }
       /*  _____---------------------------------- Tabasco---------------------------*/

    .webp .cover-tabasco{
    background-image: url("../images/ecosistemas/tabasco/cover-md.webp");
    }
    .no-webp .cover-tabasco {
    background-image: url("../images/ecosistemas/tabasco/cover-md.jpg");
    }

    .webp .donativo-tabasco{
        background-image: url("../images/ecosistemas/tabasco/donativo-md.webp");
    }
    .no-webp .donativo-tabasco{
        background-image: url("../images/ecosistemas/tabasco/donativo-md.jpg");
    }

    .webp .area-natural-tabasco{
        background-image: url("../images/ecosistemas/tabasco/area-natural-md.webp");
    }
    .no-webp .area-natural-tabasco{
        background-image: url("../images/ecosistemas/tabasco/area-natural-md.jpg");
    }
    /*  _____---------------------------------- CDMX  ---------------------------*/

    .webp .cover-cdmx{
    background-image: url("../images/ecosistemas/cdmx/cover-md.webp");
    }
    .no-webp .cover-cdmx {
    background-image: url("../images/ecosistemas/cdmx/cover-md.jpg");
    }

    .webp .donativo-cdmx{
        background-image: url("../images/ecosistemas/cdmx/donativo-md.webp");
    }
    .no-webp .donativo-cdmx{
        background-image: url("../images/ecosistemas/cdmx/donativo-md.jpg");
    }

    .webp .area-natural-cdmx{
        background-image: url("../images/ecosistemas/cdmx/area-natural-md.webp");
    }
    .no-webp .area-natural-cdmx{
        background-image: url("../images/ecosistemas/cdmx/area-natural-md.jpg");
    }

    /*  _____---------------------------------- Oaxaca  ---------------------------*/

    .webp .cover-oaxaca{
    background-image: url("../images/ecosistemas/oaxaca/cover-md.webp");
    }
    .no-webp .cover-oaxaca {
    background-image: url("../images/ecosistemas/oaxaca/cover-md.jpg");
    }

    .webp .donativo-oaxaca{
        background-image: url("../images/ecosistemas/oaxaca/donativo-md.webp");
    }
    .no-webp .donativo-oaxaca{
        background-image: url("../images/ecosistemas/oaxaca/donativo-md.jpg");
    }

    .webp .area-natural-oaxaca{
        background-image: url("../images/ecosistemas/oaxaca/area-natural-md.webp");
    }
    .no-webp .area-natural-oaxaca{
        background-image: url("../images/ecosistemas/oaxaca/area-natural-md.jpg");
    }

    /*  _____---------------------------------- xochimilco  ---------------------------*/

    .webp .cover-xochimilco{
    background-image: url("../images/ecosistemas/xochimilco/cover-md.webp");
    }
    .no-webp .cover-xochimilco {
    background-image: url("../images/ecosistemas/xochimilco/cover-md.jpg");
    }

    .webp .donativo-xochimilco{
        background-image: url("../images/ecosistemas/xochimilco/donativo-md.webp");
    }
    .no-webp .donativo-xochimilco{
        background-image: url("../images/ecosistemas/xochimilco/donativo-md.jpg");
    }

    .webp .area-natural-xochimilco{
        background-image: url("../images/ecosistemas/xochimilco/area-natural-md.webp");
    }
    .no-webp .area-natural-xochimilco{
        background-image: url("../images/ecosistemas/xochimilco/area-natural-md.jpg");
    }

    /*  _____---------------------------------- loreto  ---------------------------*/

    .webp .cover-loreto{
    background-image: url("../images/ecosistemas/loreto/cover-md.webp");
    }
    .no-webp .cover-loreto {
    background-image: url("../images/ecosistemas/loreto/cover-md.jpg");
    }

    .webp .donativo-loreto{
        background-image: url("../images/ecosistemas/loreto/donativo-md.webp");
    }
    .no-webp .donativo-loreto{
        background-image: url("../images/ecosistemas/loreto/donativo-md.jpg");
    }

    .webp .area-natural-loreto{
        background-image: url("../images/ecosistemas/loreto/area-natural-md.webp");
    }
    .no-webp .area-natural-loreto{
        background-image: url("../images/ecosistemas/loreto/area-natural-md.jpg");
    }
/*  _____---------------------------------- campeche  ---------------------------*/

    .webp .cover-campeche{
    background-image: url("../images/ecosistemas/campeche/cover-md.webp");
    }
    .no-webp .cover-campeche {
    background-image: url("../images/ecosistemas/campeche/cover-md.jpg");
    }

    .webp .donativo-campeche{
        background-image: url("../images/ecosistemas/campeche/donativo-md.webp");
    }
    .no-webp .donativo-campeche{
        background-image: url("../images/ecosistemas/campeche/donativo-md.jpg");
    }

    .webp .area-natural-campeche{
        background-image: url("../images/ecosistemas/campeche/area-natural-md.webp");
    }
    .no-webp .area-natural-campeche{
        background-image: url("../images/ecosistemas/campeche/area-natural-md.jpg");
    }

    /*  _____---------------------------------- zitacuaro  ---------------------------*/

    .webp .cover-zitacuaro{
    background-image: url("../images/ecosistemas/zitacuaro/cover-md.webp");
    }
    .no-webp .cover-zitacuaro {
    background-image: url("../images/ecosistemas/zitacuaro/cover-md.jpg");
    }

    .webp .donativo-zitacuaro{
        background-image: url("../images/ecosistemas/zitacuaro/donativo-md.webp");
    }
    .no-webp .donativo-zitacuaro{
        background-image: url("../images/ecosistemas/zitacuaro/donativo-md.jpg");
    }

    .webp .area-natural-zitacuaro{
        background-image: url("../images/ecosistemas/zitacuaro/area-natural-md.webp");
    }
    .no-webp .area-natural-zitacuaro{
        background-image: url("../images/ecosistemas/zitacuaro/area-natural-md.jpg");
    }

        /*  _____---------------------------------- kolijke  ---------------------------*/

    .webp .cover-kolijke{
    background-image: url("../images/ecosistemas/kolijke/cover-md.webp");
    }
    .no-webp .cover-kolijke {
    background-image: url("../images/ecosistemas/kolijke/cover-md.jpg");
    }

    .webp .donativo-kolijke{
        background-image: url("../images/ecosistemas/kolijke/donativo-md.webp");
    }
    .no-webp .donativo-kolijke{
        background-image: url("../images/ecosistemas/kolijke/donativo-md.jpg");
    }

    .webp .area-natural-kolijke{
        background-image: url("../images/ecosistemas/kolijke/area-natural-md.webp");
    }
    .no-webp .area-natural-kolijke{
        background-image: url("../images/ecosistemas/kolijke/area-natural-md.jpg");
    }

    /*  _____---------------------------------- ahuisculco  ---------------------------*/

    .webp .cover-ahuisculco{
    background-image: url("../images/ecosistemas/ahuisculco/cover-md.webp");
    }
    .no-webp .cover-ahuisculco {
    background-image: url("../images/ecosistemas/ahuisculco/cover-md.jpg");
    }

    .webp .donativo-ahuisculco{
        background-image: url("../images/ecosistemas/ahuisculco/donativo-md.webp");
    }
    .no-webp .donativo-ahuisculco{
        background-image: url("../images/ecosistemas/ahuisculco/donativo-md.jpg");
    }

    .webp .area-natural-ahuisculco{
        background-image: url("../images/ecosistemas/ahuisculco/area-natural-md.webp");
    }
    .no-webp .area-natural-ahuisculco{
        background-image: url("../images/ecosistemas/ahuisculco/area-natural-md.jpg");
    }

    /*  _____---------------------------------- maroma  ---------------------------*/

    .webp .cover-maroma{
    background-image: url("../images/ecosistemas/maroma/cover-md.webp");
    }
    .no-webp .cover-maroma {
    background-image: url("../images/ecosistemas/maroma/cover-md.jpg");
    }

    .webp .donativo-maroma{
        background-image: url("../images/ecosistemas/maroma/donativo-md.webp");
    }
    .no-webp .donativo-maroma{
        background-image: url("../images/ecosistemas/maroma/donativo-md.jpg");
    }

    .webp .area-natural-maroma{
        background-image: url("../images/ecosistemas/maroma/area-natural-md.webp");
    }
    .no-webp .area-natural-maroma{
        background-image: url("../images/ecosistemas/maroma/area-natural-md.jpg");
    }

    /*  _____---------------------------------- tancitaro  ---------------------------*/

    .webp .cover-tancitaro{
    background-image: url("../images/ecosistemas/tancitaro/cover-md.webp");
    }
    .no-webp .cover-tancitaro {
    background-image: url("../images/ecosistemas/tancitaro/cover-md.jpg");
    }

    .webp .donativo-tancitaro{
        background-image: url("../images/ecosistemas/tancitaro/donativo-md.webp");
    }
    .no-webp .donativo-tancitaro{
        background-image: url("../images/ecosistemas/tancitaro/donativo-md.jpg");
    }

    .webp .area-natural-tancitaro{
        background-image: url("../images/ecosistemas/tancitaro/area-natural-md.webp");
    }
    .no-webp .area-natural-tancitaro{
        background-image: url("../images/ecosistemas/tancitaro/area-natural-md.jpg");
    }
       /*  _____---------------------------------- colima  ---------------------------*/

    .webp .cover-colima{
    background-image: url("../images/ecosistemas/colima/cover-md.webp");
    }
    .no-webp .cover-colima {
    background-image: url("../images/ecosistemas/colima/cover-md.jpg");
    }

    .webp .donativo-colima{
        background-image: url("../images/ecosistemas/colima/donativo-md.webp");
    }
    .no-webp .donativo-colima{
        background-image: url("../images/ecosistemas/colima/donativo-md.jpg");
    }

    .webp .area-natural-colima{
        background-image: url("../images/ecosistemas/colima/area-natural-md.webp");
    }
    .no-webp .area-natural-colima{
        background-image: url("../images/ecosistemas/colima/area-natural-md.jpg");
    }

    /*  _____---------------------------------- veracruz  ---------------------------*/

    .webp .cover-veracruz{
    background-image: url("../images/ecosistemas/veracruz/cover-md.webp");
    }
    .no-webp .cover-veracruz {
    background-image: url("../images/ecosistemas/veracruz/cover-md.jpg");
    }

    .webp .donativo-veracruz{
        background-image: url("../images/ecosistemas/veracruz/donativo-md.webp");
    }
    .no-webp .donativo-veracruz{
        background-image: url("../images/ecosistemas/veracruz/donativo-md.jpg");
    }

    .webp .area-natural-veracruz{
        background-image: url("../images/ecosistemas/veracruz/area-natural-md.webp");
    }
    .no-webp .area-natural-veracruz{
        background-image: url("../images/ecosistemas/veracruz/area-natural-md.jpg");
    }
/*  _____---------------------------------- sonora  ---------------------------*/

    .webp .cover-sonora{
    background-image: url("../images/ecosistemas/sonora/cover-md.webp");
    }
    .no-webp .cover-sonora {
    background-image: url("../images/ecosistemas/sonora/cover-md.jpg");
    }

    .webp .donativo-sonora{
        background-image: url("../images/ecosistemas/sonora/donativo-md.webp");
    }
    .no-webp .donativo-sonora{
        background-image: url("../images/ecosistemas/sonora/donativo-md.jpg");
    }

    .webp .area-natural-sonora{
        background-image: url("../images/ecosistemas/sonora/area-natural-md.webp");
    }
    .no-webp .area-natural-sonora{
        background-image: url("../images/ecosistemas/sonora/area-natural-md.jpg");
    }

    /*  _____---------------------------------- isla-contoy  ---------------------------*/

    .webp .cover-isla-contoy{
    background-image: url("../images/ecosistemas/isla-contoy/cover-md.webp");
    }
    .no-webp .cover-isla-contoy {
    background-image: url("../images/ecosistemas/isla-contoy/cover-md.jpg");
    }

    .webp .donativo-isla-contoy{
        background-image: url("../images/ecosistemas/isla-contoy/donativo-md.webp");
    }
    .no-webp .donativo-isla-contoy{
        background-image: url("../images/ecosistemas/isla-contoy/donativo-md.jpg");
    }

    .webp .area-natural-isla-contoy{
        background-image: url("../images/ecosistemas/isla-contoy/area-natural-md.webp");
    }
    .no-webp .area-natural-isla-contoy{
        background-image: url("../images/ecosistemas/isla-contoy/area-natural-md.jpg");
    }
     /*  _____---------------------------------- laguna-om  ---------------------------*/

    .webp .cover-laguna-om{
    background-image: url("../images/ecosistemas/laguna-om/cover-md.webp");
    }
    .no-webp .cover-laguna-om {
    background-image: url("../images/ecosistemas/laguna-om/cover-md.jpg");
    }

    .webp .donativo-laguna-om{
        background-image: url("../images/ecosistemas/laguna-om/donativo-md.webp");
    }
    .no-webp .donativo-laguna-om{
        background-image: url("../images/ecosistemas/laguna-om/donativo-md.jpg");
    }

    .webp .area-natural-laguna-om{
        background-image: url("../images/ecosistemas/laguna-om/area-natural-md.webp");
    }
    .no-webp .area-natural-laguna-om{
        background-image: url("../images/ecosistemas/laguna-om/area-natural-md.jpg");
    }

    /*  _____---------------------------------- siembre-vida  ---------------------------*/

    .webp .cover-siembre-vida{
        background-image: url("../images/ecosistemas/siembre-vida/cover-md.webp");
        }
        .no-webp .cover-siembre-vida {
        background-image: url("../images/ecosistemas/siembre-vida/cover-md.jpg");
        }
    
        .webp .donativo-siembre-vida{
            background-image: url("../images/ecosistemas/siembre-vida/donativo-md.webp");
        }
        .no-webp .donativo-siembre-vida{
            background-image: url("../images/ecosistemas/siembre-vida/donativo-md.jpg");
        }
    
        .webp .area-natural-siembre-vida{
            background-image: url("../images/ecosistemas/siembre-vida/area-natural-md.webp");
        }
        .no-webp .area-natural-siembre-vida{
            background-image: url("../images/ecosistemas/siembre-vida/area-natural-md.jpg");
        }

     /*  _____---------------------------------- sierra-guadalupe  ---------------------------*/

    .webp .cover-sierra-guadalupe{
        background-image: url("../images/ecosistemas/sierra-guadalupe/cover-md.webp");
        }
        .no-webp .cover-sierra-guadalupe {
        background-image: url("../images/ecosistemas/sierra-guadalupe/cover-md.jpg");
        }
    
        .webp .donativo-sierra-guadalupe{
            background-image: url("../images/ecosistemas/sierra-guadalupe/donativo-md.webp");
        }
        .no-webp .donativo-sierra-guadalupe{
            background-image: url("../images/ecosistemas/sierra-guadalupe/donativo-md.jpg");
        }
    
        .webp .area-natural-sierra-guadalupe{
            background-image: url("../images/ecosistemas/sierra-guadalupe/area-natural-md.webp");
        }
        .no-webp .area-natural-sierra-guadalupe{
            background-image: url("../images/ecosistemas/sierra-guadalupe/area-natural-md.jpg");
        }   

        /*  _____---------------------------------- chipinque  ---------------------------*/

    .webp .cover-chipinque{
        background-image: url("../images/ecosistemas/chipinque/cover-md.webp");
        }
        .no-webp .cover-chipinque {
        background-image: url("../images/ecosistemas/chipinque/cover-md.jpg");
        }
    
        .webp .donativo-chipinque{
            background-image: url("../images/ecosistemas/chipinque/donativo-md.webp");
        }
        .no-webp .donativo-chipinque{
            background-image: url("../images/ecosistemas/chipinque/donativo-md.jpg");
        }
    
        .webp .area-natural-chipinque{
            background-image: url("../images/ecosistemas/chipinque/area-natural-md.webp");
        }
        .no-webp .area-natural-chipinque{
            background-image: url("../images/ecosistemas/chipinque/area-natural-md.jpg");
        }
        /*  _____---------------------------------- cenote  ---------------------------*/

        .webp .cover-cenote{
        background-image: url("../images/ecosistemas/proyecto-cenote/cover-md.webp");
        }
        .no-webp .cover-cenote {
        background-image: url("../images/ecosistemas/proyecto-cenote/cover-md.jpg");
        }
    
        .webp .donativo-cenote{
            background-image: url("../images/ecosistemas/proyecto-cenote/donativo-md.webp");
        }
        .no-webp .donativo-cenote{
            background-image: url("../images/ecosistemas/proyecto-cenote/donativo-md.jpg");
        }
    
        .webp .area-natural-cenote{
            background-image: url("../images/ecosistemas/proyecto-cenote/area-natural-md.webp");
        }
        .no-webp .area-natural-cenote{
            background-image: url("../images/ecosistemas/proyecto-cenote/area-natural-md.jpg");
        }
        /*  _____---------------------------------- tehuacan  ---------------------------*/

        .webp .cover-tehuacan{
        background-image: url("../images/ecosistemas/tehuacan/cover-md.webp");
        }
        .no-webp .cover-tehuacan {
        background-image: url("../images/ecosistemas/tehuacan/cover-md.jpg");
        }
    
        .webp .donativo-tehuacan{
            background-image: url("../images/ecosistemas/tehuacan/donativo-md.webp");
        }
        .no-webp .donativo-tehuacan{
            background-image: url("../images/ecosistemas/tehuacan/donativo-md.jpg");
        }
    
        .webp .area-natural-tehuacan{
            background-image: url("../images/ecosistemas/tehuacan/area-natural-md.webp");
        }
        .no-webp .area-natural-tehuacan{
            background-image: url("../images/ecosistemas/tehuacan/area-natural-md.jpg");
        }
        /*  _____---------------------------------- el-salvador  ---------------------------*/

        .webp .cover-el-salvador{
        background-image: url("../images/ecosistemas/el-salvador/cover-md.webp");
        }
        .no-webp .cover-el-salvador {
        background-image: url("../images/ecosistemas/el-salvador/cover-md.jpg");
        }
    
        .webp .donativo-el-salvador{
            background-image: url("../images/ecosistemas/el-salvador/donativo-md.webp");
        }
        .no-webp .donativo-el-salvador{
            background-image: url("../images/ecosistemas/el-salvador/donativo-md.jpg");
        }
    
        .webp .area-natural-el-salvador{
            background-image: url("../images/ecosistemas/el-salvador/area-natural-md.webp");
        }
        .no-webp .area-natural-el-salvador{
            background-image: url("../images/ecosistemas/el-salvador/area-natural-md.jpg");
        }

        /*  _____---------------------------------- cerro-apapasco  ---------------------------*/

        .webp .cover-cerro-apapasco{
            background-image: url("../images/ecosistemas/cerro-apapasco/cover-md.webp");
            }
            .no-webp .cover-cerro-apapasco {
            background-image: url("../images/ecosistemas/cerro-apapasco/cover-md.jpg");
            }
        
            .webp .donativo-cerro-apapasco{
                background-image: url("../images/ecosistemas/cerro-apapasco/donativo-md.webp");
            }
            .no-webp .donativo-cerro-apapasco{
                background-image: url("../images/ecosistemas/cerro-apapasco/donativo-md.jpg");
            }
        
            .webp .area-natural-cerro-apapasco{
                background-image: url("../images/ecosistemas/cerro-apapasco/area-natural-md.webp");
            }
            .no-webp .area-natural-cerro-apapasco{
                background-image: url("../images/ecosistemas/cerro-apapasco/area-natural-md.jpg");
            }

             /*  _____---------------------------------- corredor-mariposa-monarca  ---------------------------*/

            .webp .cover-corredor-mariposa-monarca{
            background-image: url("../images/ecosistemas/corredor-mariposa-monarca/cover-md.webp");
            }
            .no-webp .cover-corredor-mariposa-monarca {
            background-image: url("../images/ecosistemas/corredor-mariposa-monarca/cover-md.jpg");
            }
        
            .webp .donativo-corredor-mariposa-monarca{
                background-image: url("../images/ecosistemas/corredor-mariposa-monarca/donativo-md.webp");
            }
            .no-webp .donativo-corredor-mariposa-monarca{
                background-image: url("../images/ecosistemas/corredor-mariposa-monarca/donativo-md.jpg");
            }
        
            .webp .area-natural-corredor-mariposa-monarca{
                background-image: url("../images/ecosistemas/corredor-mariposa-monarca/area-natural-md.webp");
            }
            .no-webp .area-natural-corredor-mariposa-monarca{
                background-image: url("../images/ecosistemas/corredor-mariposa-monarca/area-natural-md.jpg");
            }
            /*  _____---------------------------------- recuperacion-de-alimentos  ---------------------------*/

        .webp .cover-recuperacion-de-alimentos{
            background-image: url("../images/ecosistemas/recuperacion-de-alimentos/cover-md.webp");
            }
            .no-webp .cover-recuperacion-de-alimentos {
            background-image: url("../images/ecosistemas/recuperacion-de-alimentos/cover-md.jpg");
            }
            .webp .area-natural-recuperacion-de-alimentos{
                background-image: url("../images/ecosistemas/recuperacion-de-alimentos/area-natural-md.webp");
            }
            .no-webp .area-natural-recuperacion-de-alimentos{
                background-image: url("../images/ecosistemas/recuperacion-de-alimentos/area-natural-md.jpg");
            }

            /*  _____---------------------------------- axoarca  ---------------------------*/

            .webp .cover-axoarca{
                background-image: url("../images/ecosistemas/axoarca/cover-md.webp");
                }
                .no-webp .cover-axoarca {
                background-image: url("../images/ecosistemas/axoarca/cover-md.jpg");
                }
            
                .webp .donativo-axoarca{
                    background-image: url("../images/ecosistemas/axoarca/donativo-md.webp");
                }
                .no-webp .donativo-axoarca{
                    background-image: url("../images/ecosistemas/axoarca/donativo-md.jpg");
                }
            
                .webp .area-natural-axoarca{
                    background-image: url("../images/ecosistemas/axoarca/area-natural-md.webp");
                }
                .no-webp .area-natural-axoarca{
                    background-image: url("../images/ecosistemas/axoarca/area-natural-md.jpg");
                }
                /*  _____---------------------------------- refugio-de-aves  ---------------------------*/

        .webp .cover-refugio-de-aves{
            background-image: url("../images/ecosistemas/refugio-de-aves/cover-md.webp");
            }
            .no-webp .cover-refugio-de-aves {
            background-image: url("../images/ecosistemas/refugio-de-aves/cover-md.jpg");
            }
        
            .webp .donativo-refugio-de-aves{
                background-image: url("../images/ecosistemas/refugio-de-aves/donativo-md.webp");
            }
            .no-webp .donativo-refugio-de-aves{
                background-image: url("../images/ecosistemas/refugio-de-aves/donativo-md.jpg");
            }
        
            .webp .area-natural-refugio-de-aves{
                background-image: url("../images/ecosistemas/refugio-de-aves/area-natural-bg-md.webp");
            }
            .no-webp .area-natural-refugio-de-aves{
                background-image: url("../images/ecosistemas/refugio-de-aves/area-natural-bg-md.jpg");
            }

        /*  _____---------------------------------- sistema-arrecifal-veracruzano  ---------------------------*/

        .webp .cover-sistema-arrecifal-veracruzano{
        background-image: url("../images/ecosistemas/sistema-arrecifal-veracruzano/cover-md.webp");
        }
        .no-webp .cover-sistema-arrecifal-veracruzano {
        background-image: url("../images/ecosistemas/sistema-arrecifal-veracruzano/cover-md.jpg");
        }

        .webp .donativo-sistema-arrecifal-veracruzano{
            background-image: url("../images/ecosistemas/sistema-arrecifal-veracruzano/donativo-md.webp");
        }
        .no-webp .donativo-sistema-arrecifal-veracruzano{
            background-image: url("../images/ecosistemas/sistema-arrecifal-veracruzano/donativo-md.jpg");
        }

        .webp .area-natural-sistema-arrecifal-veracruzano{
            background-image: url("../images/ecosistemas/sistema-arrecifal-veracruzano/area-natural-bg-md.webp");
        }
        .no-webp .area-natural-sistema-arrecifal-veracruzano{
            background-image: url("../images/ecosistemas/sistema-arrecifal-veracruzano/area-natural-bg-md.jpg");
        }
    /*  _____---------------------------------- museo-del-agua  ---------------------------*/

    .webp .cover-museo-del-agua{
    background-image: url("../images/ecosistemas/museo-del-agua/cover-md.webp");
    }
    .no-webp .cover-museo-del-agua {
    background-image: url("../images/ecosistemas/museo-del-agua/cover-md.jpg");
    }

    .webp .donativo-museo-del-agua{
        background-image: url("../images/ecosistemas/museo-del-agua/donativo-md.webp");
    }
    .no-webp .donativo-museo-del-agua{
        background-image: url("../images/ecosistemas/museo-del-agua/donativo-md.jpg");
    }

    .webp .area-natural-museo-del-agua{
        background-image: url("../images/ecosistemas/museo-del-agua/area-natural-bg-md.webp");
    }
    .no-webp .area-natural-museo-del-agua{
        background-image: url("../images/ecosistemas/museo-del-agua/area-natural-bg-md.jpg");
    }

    /*  _____---------------------------------- rescatando-las-sierras-de-la-ciudad  ---------------------------*/

.webp .cover-rescatando-las-sierras-de-la-ciudad{
    background-image: url("../images/ecosistemas/rescatando-las-sierras-de-la-ciudad/cover-md.webp");
    }
    .no-webp .cover-rescatando-las-sierras-de-la-ciudad {
    background-image: url("../images/ecosistemas/rescatando-las-sierras-de-la-ciudad/cover-md.jpg");
    }
    
    .webp .donativo-rescatando-las-sierras-de-la-ciudad{
        background-image: url("../images/ecosistemas/rescatando-las-sierras-de-la-ciudad/donativo-md.webp");
    }
    .no-webp .donativo-rescatando-las-sierras-de-la-ciudad{
        background-image: url("../images/ecosistemas/rescatando-las-sierras-de-la-ciudad/donativo-md.jpg");
    }
    
    .webp .area-natural-rescatando-las-sierras-de-la-ciudad{
        background-image: url("../images/ecosistemas/rescatando-las-sierras-de-la-ciudad/area-natural-bg-md.webp");
    }
    .no-webp .area-natural-rescatando-las-sierras-de-la-ciudad{
        background-image: url("../images/ecosistemas/rescatando-las-sierras-de-la-ciudad/area-natural-bg-md.jpg");
    }

    /*  _____---------------------------------- sierra-de-tepotzotlan  ---------------------------*/

.webp .cover-sierra-de-tepotzotlan{
    background-image: url("../images/ecosistemas/sierra-de-tepotzotlan/cover-md.webp");
    }
    .no-webp .cover-sierra-de-tepotzotlan {
    background-image: url("../images/ecosistemas/sierra-de-tepotzotlan/cover-md.jpg");
    }
    
    .webp .donativo-sierra-de-tepotzotlan{
        background-image: url("../images/ecosistemas/sierra-de-tepotzotlan/donativo-md.webp");
    }
    .no-webp .donativo-sierra-de-tepotzotlan{
        background-image: url("../images/ecosistemas/sierra-de-tepotzotlan/donativo-md.jpg");
    }
    
    .webp .area-natural-sierra-de-tepotzotlan{
        background-image: url("../images/ecosistemas/sierra-de-tepotzotlan/area-natural-bg-md.webp");
    }
    .no-webp .area-natural-sierra-de-tepotzotlan{
        background-image: url("../images/ecosistemas/sierra-de-tepotzotlan/area-natural-bg-md.jpg");
    }

        /*  _____---------------------------------- bosque-de-la-primavera-y-cerro-viejo  ---------------------------*/

.webp .cover-bosque-de-la-primavera-y-cerro-viejo{
    background-image: url("../images/ecosistemas/bosque-de-la-primavera-y-cerro-viejo/cover-md.webp");
    }
    .no-webp .cover-bosque-de-la-primavera-y-cerro-viejo {
    background-image: url("../images/ecosistemas/bosque-de-la-primavera-y-cerro-viejo/cover-md.jpg");
    }
    
    .webp .donativo-bosque-de-la-primavera-y-cerro-viejo{
        background-image: url("../images/ecosistemas/bosque-de-la-primavera-y-cerro-viejo/donativo-md.webp");
    }
    .no-webp .donativo-bosque-de-la-primavera-y-cerro-viejo{
        background-image: url("../images/ecosistemas/bosque-de-la-primavera-y-cerro-viejo/donativo-md.jpg");
    }
    
    .webp .area-natural-bosque-de-la-primavera-y-cerro-viejo{
        background-image: url("../images/ecosistemas/bosque-de-la-primavera-y-cerro-viejo/area-natural-bg-md.webp");
    }
    .no-webp .area-natural-bosque-de-la-primavera-y-cerro-viejo{
        background-image: url("../images/ecosistemas/bosque-de-la-primavera-y-cerro-viejo/area-natural-bg-md.jpg");
    }
     /*  _____---------------------------------- centro-de-rescate-y-rehabilitacion-de-fauna-silvestre  ---------------------------*/

.webp .cover-centro-de-rescate-y-rehabilitacion-de-fauna-silvestre{
    background-image: url("../images/ecosistemas/centro-de-rescate-y-rehabilitacion-de-fauna-silvestre/cover-md.webp");
    }
    .no-webp .cover-centro-de-rescate-y-rehabilitacion-de-fauna-silvestre {
    background-image: url("../images/ecosistemas/centro-de-rescate-y-rehabilitacion-de-fauna-silvestre/cover-md.jpg");
    }
    
    .webp .donativo-centro-de-rescate-y-rehabilitacion-de-fauna-silvestre{
        background-image: url("../images/ecosistemas/centro-de-rescate-y-rehabilitacion-de-fauna-silvestre/donativo-md.webp");
    }
    .no-webp .donativo-centro-de-rescate-y-rehabilitacion-de-fauna-silvestre{
        background-image: url("../images/ecosistemas/centro-de-rescate-y-rehabilitacion-de-fauna-silvestre/donativo-md.jpg");
    }
    
    .webp .area-natural-centro-de-rescate-y-rehabilitacion-de-fauna-silvestre{
        background-image: url("../images/ecosistemas/centro-de-rescate-y-rehabilitacion-de-fauna-silvestre/area-natural-bg-md.webp");
    }
    .no-webp .area-natural-centro-de-rescate-y-rehabilitacion-de-fauna-silvestre{
        background-image: url("../images/ecosistemas/centro-de-rescate-y-rehabilitacion-de-fauna-silvestre/area-natural-bg-md.jpg");
    }

     /*  _____---------------------------------- desarrollo-comunitario-de-lostuxtlas  ---------------------------*/

.webp .cover-desarrollo-comunitario-de-lostuxtlas{
    background-image: url("../images/ecosistemas/desarrollo-comunitario-de-lostuxtlas/cover-md.webp");
    }
    .no-webp .cover-desarrollo-comunitario-de-lostuxtlas {
    background-image: url("../images/ecosistemas/desarrollo-comunitario-de-lostuxtlas/cover-md.jpg");
    }
    
    .webp .donativo-desarrollo-comunitario-de-lostuxtlas{
        background-image: url("../images/ecosistemas/desarrollo-comunitario-de-lostuxtlas/donativo-md.webp");
    }
    .no-webp .donativo-desarrollo-comunitario-de-lostuxtlas{
        background-image: url("../images/ecosistemas/desarrollo-comunitario-de-lostuxtlas/donativo-md.jpg");
    }
    
    .webp .area-natural-desarrollo-comunitario-de-lostuxtlas{
        background-image: url("../images/ecosistemas/desarrollo-comunitario-de-lostuxtlas/area-natural-bg-md.webp");
    }
    .no-webp .area-natural-desarrollo-comunitario-de-lostuxtlas{
        background-image: url("../images/ecosistemas/desarrollo-comunitario-de-lostuxtlas/area-natural-bg-md.jpg");
    }

    /*  _____---------------------------------- bosque-antiguo  ---------------------------*/

.webp .cover-bosque-antiguo{
    background-image: url("../images/ecosistemas/bosque-antiguo/cover-md.webp");
    }
    .no-webp .cover-bosque-antiguo {
    background-image: url("../images/ecosistemas/bosque-antiguo/cover-md.jpg");
    }
    
    .webp .donativo-bosque-antiguo{
        background-image: url("../images/ecosistemas/bosque-antiguo/donativo-md.webp");
    }
    .no-webp .donativo-bosque-antiguo{
        background-image: url("../images/ecosistemas/bosque-antiguo/donativo-md.jpg");
    }
    
    .webp .area-natural-bosque-antiguo{
        background-image: url("../images/ecosistemas/bosque-antiguo/area-natural-bg-md.webp");
    }
    .no-webp .area-natural-bosque-antiguo{
        background-image: url("../images/ecosistemas/bosque-antiguo/area-natural-bg-md.jpg");
    }

    /*  _____---------------------------------- reserva-de-la-biosfera-de-sian-kaan  ---------------------------*/

    .webp .cover-reserva-de-la-biosfera-de-sian-kaan{
    background-image: url("../images/ecosistemas/reserva-de-la-biosfera-de-sian-kaan/cover-md.webp");
    }
    .no-webp .cover-reserva-de-la-biosfera-de-sian-kaan {
    background-image: url("../images/ecosistemas/reserva-de-la-biosfera-de-sian-kaan/cover-md.jpg");
    }
    
    .webp .donativo-reserva-de-la-biosfera-de-sian-kaan{
        background-image: url("../images/ecosistemas/reserva-de-la-biosfera-de-sian-kaan/donativo-md.webp");
    }
    .no-webp .donativo-reserva-de-la-biosfera-de-sian-kaan{
        background-image: url("../images/ecosistemas/reserva-de-la-biosfera-de-sian-kaan/donativo-md.jpg");
    }
    
    .webp .area-natural-reserva-de-la-biosfera-de-sian-kaan{
        background-image: url("../images/ecosistemas/reserva-de-la-biosfera-de-sian-kaan/area-natural-bg-md.webp");
    }
    .no-webp .area-natural-reserva-de-la-biosfera-de-sian-kaan{
        background-image: url("../images/ecosistemas/reserva-de-la-biosfera-de-sian-kaan/area-natural-bg-md.jpg");
    }

    /*  _____---------------------------------- cadnr-026-bajo-rio-san-juan  ---------------------------*/

    .webp .cover-cadnr-026-bajo-rio-san-juan{
        background-image: url("../images/ecosistemas/cadnr-026-bajo-rio-san-juan/cover-md.webp");
        }
        .no-webp .cover-cadnr-026-bajo-rio-san-juan {
        background-image: url("../images/ecosistemas/cadnr-026-bajo-rio-san-juan/cover-md.jpg");
        }
        
        .webp .donativo-cadnr-026-bajo-rio-san-juan{
            background-image: url("../images/ecosistemas/cadnr-026-bajo-rio-san-juan/donativo-md.webp");
        }
        .no-webp .donativo-cadnr-026-bajo-rio-san-juan{
            background-image: url("../images/ecosistemas/cadnr-026-bajo-rio-san-juan/donativo-md.jpg");
        }
        
        .webp .area-natural-cadnr-026-bajo-rio-san-juan{
            background-image: url("../images/ecosistemas/cadnr-026-bajo-rio-san-juan/area-natural-bg-md.webp");
        }
        .no-webp .area-natural-cadnr-026-bajo-rio-san-juan{
            background-image: url("../images/ecosistemas/cadnr-026-bajo-rio-san-juan/area-natural-bg-md.jpg");
        }

    /*  _____---------------------------------- sierra-sur-oaxaca-costa-pacifico  ---------------------------*/

    .webp .cover-sierra-sur-oaxaca-costa-pacifico{
        background-image: url("../images/ecosistemas/sierra-sur-oaxaca-costa-pacifico/cover-md.webp");
        }
        .no-webp .cover-sierra-sur-oaxaca-costa-pacifico {
        background-image: url("../images/ecosistemas/sierra-sur-oaxaca-costa-pacifico/cover-md.jpg");
        }
        
        .webp .donativo-sierra-sur-oaxaca-costa-pacifico{
            background-image: url("../images/ecosistemas/sierra-sur-oaxaca-costa-pacifico/donativo-md.webp");
        }
        .no-webp .donativo-sierra-sur-oaxaca-costa-pacifico{
            background-image: url("../images/ecosistemas/sierra-sur-oaxaca-costa-pacifico/donativo-md.jpg");
        }
        
        .webp .area-natural-sierra-sur-oaxaca-costa-pacifico{
            background-image: url("../images/ecosistemas/sierra-sur-oaxaca-costa-pacifico/area-natural-bg-md.webp");
        }
        .no-webp .area-natural-sierra-sur-oaxaca-costa-pacifico{
            background-image: url("../images/ecosistemas/sierra-sur-oaxaca-costa-pacifico/area-natural-bg-md.jpg");
        }

        /*  _____---------------------------------- bahia-de-la-paz  ---------------------------*/

    .webp .cover-bahia-de-la-paz{
        background-image: url("../images/ecosistemas/bahia-de-la-paz/cover-md.webp");
        }
        .no-webp .cover-bahia-de-la-paz {
        background-image: url("../images/ecosistemas/bahia-de-la-paz/cover-md.jpg");
        }
        
        .webp .donativo-bahia-de-la-paz{
            background-image: url("../images/ecosistemas/bahia-de-la-paz/donativo-md.webp");
        }
        .no-webp .donativo-bahia-de-la-paz{
            background-image: url("../images/ecosistemas/bahia-de-la-paz/donativo-md.jpg");
        }
        
        .webp .area-natural-bahia-de-la-paz{
            background-image: url("../images/ecosistemas/bahia-de-la-paz/area-natural-bg-md.webp");
        }
        .no-webp .area-natural-bahia-de-la-paz{
            background-image: url("../images/ecosistemas/bahia-de-la-paz/area-natural-bg-md.jpg");
        }

        /*  _____---------------------------------- coralisma  ---------------------------*/

    .webp .cover-coralisma{
        background-image: url("../images/ecosistemas/coralisma/cover-md.webp");
        }
        .no-webp .cover-coralisma {
        background-image: url("../images/ecosistemas/coralisma/cover-md.jpg");
        }
        
        .webp .donativo-coralisma{
            background-image: url("../images/ecosistemas/coralisma/donativo-md.webp");
        }
        .no-webp .donativo-coralisma{
            background-image: url("../images/ecosistemas/coralisma/donativo-md.jpg");
        }
        
        .webp .area-natural-coralisma{
            background-image: url("../images/ecosistemas/coralisma/area-natural-bg-md.webp");
        }
        .no-webp .area-natural-coralisma{
            background-image: url("../images/ecosistemas/coralisma/area-natural-bg-md.jpg");
        }

        
        /*  _____---------------------------------- ejido-cuitzeo  ---------------------------*/

    .webp .cover-ejido-cuitzeo{
        background-image: url("../images/ecosistemas/ejido-cuitzeo/cover-md.webp");
        }
        .no-webp .cover-ejido-cuitzeo {
        background-image: url("../images/ecosistemas/ejido-cuitzeo/cover-md.jpg");
        }
        
        .webp .donativo-ejido-cuitzeo{
            background-image: url("../images/ecosistemas/ejido-cuitzeo/donativo-md.webp");
        }
        .no-webp .donativo-ejido-cuitzeo{
            background-image: url("../images/ecosistemas/ejido-cuitzeo/donativo-md.jpg");
        }
        
        .webp .area-natural-ejido-cuitzeo{
            background-image: url("../images/ecosistemas/ejido-cuitzeo/area-natural-bg-md.webp");
        }
        .no-webp .area-natural-ejido-cuitzeo{
            background-image: url("../images/ecosistemas/ejido-cuitzeo/area-natural-bg-md.jpg");
        }

    /*  _____---------------------------------- restauremos-el-pico-de-orizaba  ---------------------------*/

    .webp .cover-restauremos-el-pico-de-orizaba{
    background-image: url("../images/ecosistemas/restauremos-el-pico-de-orizaba/cover-md.webp");
    }
    .no-webp .cover-restauremos-el-pico-de-orizaba {
    background-image: url("../images/ecosistemas/restauremos-el-pico-de-orizaba/cover-md.jpg");
    }
    
    .webp .donativo-restauremos-el-pico-de-orizaba{
        background-image: url("../images/ecosistemas/restauremos-el-pico-de-orizaba/donativo-md.webp");
    }
    .no-webp .donativo-restauremos-el-pico-de-orizaba{
        background-image: url("../images/ecosistemas/restauremos-el-pico-de-orizaba/donativo-md.jpg");
    }
    
    .webp .area-natural-restauremos-el-pico-de-orizaba{
        background-image: url("../images/ecosistemas/restauremos-el-pico-de-orizaba/area-natural-bg-md.webp");
    }
    .no-webp .area-natural-restauremos-el-pico-de-orizaba{
        background-image: url("../images/ecosistemas/restauremos-el-pico-de-orizaba/area-natural-bg-md.jpg");
    }

    /*  _____---------------------------------- cumbres-de-monterrey  ---------------------------*/

    .webp .cover-cumbres-de-monterrey{
        background-image: url("../images/ecosistemas/cumbres-de-monterrey/cover-md.webp");
        }
        .no-webp .cover-cumbres-de-monterrey {
        background-image: url("../images/ecosistemas/cumbres-de-monterrey/cover-md.jpg");
        }
        
        .webp .donativo-cumbres-de-monterrey{
            background-image: url("../images/ecosistemas/cumbres-de-monterrey/donativo-md.webp");
        }
        .no-webp .donativo-cumbres-de-monterrey{
            background-image: url("../images/ecosistemas/cumbres-de-monterrey/donativo-md.jpg");
        }
        
        .webp .area-natural-cumbres-de-monterrey{
            background-image: url("../images/ecosistemas/cumbres-de-monterrey/area-natural-bg-md.webp");
        }
        .no-webp .area-natural-cumbres-de-monterrey{
            background-image: url("../images/ecosistemas/cumbres-de-monterrey/area-natural-bg-md.jpg");
        }

        /*  _____---------------------------------- pro-red-participativa  ---------------------------*/

    .webp .cover-pro-red-participativa{
        background-image: url("../images/ecosistemas/pro-red-participativa/cover-md.webp");
        }
        .no-webp .cover-pro-red-participativa {
        background-image: url("../images/ecosistemas/pro-red-participativa/cover-md.jpg");
        }
        
        .webp .donativo-pro-red-participativa{
            background-image: url("../images/ecosistemas/pro-red-participativa/donativo-md.webp");
        }
        .no-webp .donativo-pro-red-participativa{
            background-image: url("../images/ecosistemas/pro-red-participativa/donativo-md.jpg");
        }
        
        .webp .area-natural-pro-red-participativa{
            background-image: url("../images/ecosistemas/pro-red-participativa/area-natural-bg-md.webp");
        }
        .no-webp .area-natural-pro-red-participativa{
            background-image: url("../images/ecosistemas/pro-red-participativa/area-natural-bg-md.jpg");
        }

        /*  _____---------------------------------- laguna-de-tecocomulco  ---------------------------*/

    .webp .cover-laguna-de-tecocomulco{
        background-image: url("../images/ecosistemas/laguna-de-tecocomulco/cover-md.webp");
        }
        .no-webp .cover-laguna-de-tecocomulco {
        background-image: url("../images/ecosistemas/laguna-de-tecocomulco/cover-md.jpg");
        }
        
        .webp .donativo-laguna-de-tecocomulco{
            background-image: url("../images/ecosistemas/laguna-de-tecocomulco/donativo-md.webp");
        }
        .no-webp .donativo-laguna-de-tecocomulco{
            background-image: url("../images/ecosistemas/laguna-de-tecocomulco/donativo-md.jpg");
        }
        
        .webp .area-natural-laguna-de-tecocomulco{
            background-image: url("../images/ecosistemas/laguna-de-tecocomulco/area-natural-bg-md.webp");
        }
        .no-webp .area-natural-laguna-de-tecocomulco{
            background-image: url("../images/ecosistemas/laguna-de-tecocomulco/area-natural-bg-md.jpg");
        }

        /*  _____---------------------------------- ejido-loma-bonita  ---------------------------*/

    .webp .cover-ejido-loma-bonita{
        background-image: url("../images/ecosistemas/ejido-loma-bonita/cover-md.webp");
        }
        .no-webp .cover-ejido-loma-bonita {
        background-image: url("../images/ecosistemas/ejido-loma-bonita/cover-md.jpg");
        }
        
        .webp .donativo-ejido-loma-bonita{
            background-image: url("../images/ecosistemas/ejido-loma-bonita/donativo-md.webp");
        }
        .no-webp .donativo-ejido-loma-bonita{
            background-image: url("../images/ecosistemas/ejido-loma-bonita/donativo-md.jpg");
        }
        
        .webp .area-natural-ejido-loma-bonita{
            background-image: url("../images/ecosistemas/ejido-loma-bonita/area-natural-bg-md.webp");
        }
        .no-webp .area-natural-ejido-loma-bonita{
            background-image: url("../images/ecosistemas/ejido-loma-bonita/area-natural-bg-md.jpg");
        }

        /*  _____---------------------------------- laguna-de-atotonilco  ---------------------------*/

    .webp .cover-laguna-de-atotonilco{
        background-image: url("../images/ecosistemas/laguna-de-atotonilco/cover-md.webp");
        }
        .no-webp .cover-laguna-de-atotonilco {
        background-image: url("../images/ecosistemas/laguna-de-atotonilco/cover-md.jpg");
        }
        
        .webp .donativo-laguna-de-atotonilco{
            background-image: url("../images/ecosistemas/laguna-de-atotonilco/donativo-md.webp");
        }
        .no-webp .donativo-laguna-de-atotonilco{
            background-image: url("../images/ecosistemas/laguna-de-atotonilco/donativo-md.jpg");
        }
        
        .webp .area-natural-laguna-de-atotonilco{
            background-image: url("../images/ecosistemas/laguna-de-atotonilco/area-natural-bg-md.webp");
        }
        .no-webp .area-natural-laguna-de-atotonilco{
            background-image: url("../images/ecosistemas/laguna-de-atotonilco/area-natural-bg-md.jpg");
        }

        /*  _____---------------------------------- salvatierra  ---------------------------*/

        .webp .cover-salvatierra{
        background-image: url("../images/ecosistemas/salvatierra/cover-md.webp");
        }
        .no-webp .cover-salvatierra {
        background-image: url("../images/ecosistemas/salvatierra/cover-md.jpg");
        }
        
        .webp .donativo-salvatierra{
            background-image: url("../images/ecosistemas/salvatierra/donativo-md.webp");
        }
        .no-webp .donativo-salvatierra{
            background-image: url("../images/ecosistemas/salvatierra/donativo-md.jpg");
        }
        
        .webp .area-natural-salvatierra{
            background-image: url("../images/ecosistemas/salvatierra/area-natural-bg-md.webp");
        }
        .no-webp .area-natural-salvatierra{
            background-image: url("../images/ecosistemas/salvatierra/area-natural-bg-md.jpg");
        }

        /*  _____---------------------------------- tecolutla  ---------------------------*/

        .webp .cover-tecolutla{
        background-image: url("../images/ecosistemas/tecolutla/cover-md.webp");
        }
        .no-webp .cover-tecolutla {
        background-image: url("../images/ecosistemas/tecolutla/cover-md.jpg");
        }
        
        .webp .donativo-tecolutla{
            background-image: url("../images/ecosistemas/tecolutla/donativo-md.webp");
        }
        .no-webp .donativo-tecolutla{
            background-image: url("../images/ecosistemas/tecolutla/donativo-md.jpg");
        }
        
        .webp .area-natural-tecolutla{
            background-image: url("../images/ecosistemas/tecolutla/area-natural-bg-md.webp");
        }
        .no-webp .area-natural-tecolutla{
            background-image: url("../images/ecosistemas/tecolutla/area-natural-bg-md.jpg");
        }

        
        /*  _____---------------------------------- isla-del-carmen-bahia-de-loreto  ---------------------------*/

        .webp .cover-isla-del-carmen-bahia-de-loreto{
        background-image: url("../images/ecosistemas/isla-del-carmen-bahia-de-loreto/cover-md.webp");
        }
        .no-webp .cover-isla-del-carmen-bahia-de-loreto {
        background-image: url("../images/ecosistemas/isla-del-carmen-bahia-de-loreto/cover-md.jpg");
        }
        
        .webp .donativo-isla-del-carmen-bahia-de-loreto{
            background-image: url("../images/ecosistemas/isla-del-carmen-bahia-de-loreto/donativo-md.webp");
        }
        .no-webp .donativo-isla-del-carmen-bahia-de-loreto{
            background-image: url("../images/ecosistemas/isla-del-carmen-bahia-de-loreto/donativo-md.jpg");
        }
        
        .webp .area-natural-isla-del-carmen-bahia-de-loreto{
            background-image: url("../images/ecosistemas/isla-del-carmen-bahia-de-loreto/area-natural-bg-md.webp");
        }
        .no-webp .area-natural-isla-del-carmen-bahia-de-loreto{
            background-image: url("../images/ecosistemas/isla-del-carmen-bahia-de-loreto/area-natural-bg-md.jpg");
        }
 }






@media (max-width: 1199.98px) { 

 }


@media (max-width: 991.98px) { 
    .flora-fauna-imagen {
        height: 300px;
    }
    .fauna-cont, .flora-cont {
        width: 100%;
        height: auto;
        max-width: 100%;
    }
    .fauna-text, .flora-text {
        width: 60%;
        margin-left: 10%;
    }
     .fauna-photo, .flora-photo {
        width: 20%;
    }
    .fotos-area-natural {
        width: 100%;
        max-width: 500px;
        margin-bottom: -60px;
    }
 }


@media (max-width: 767.98px) { 
    .titulo-ecosistema {
        font-size: 80px;
    }
    .titulo-ecosistema-mini {
    font-size: 54px;
    }
    .titulo2-ecosistema {
        font-size: 28px;
        padding: 5px 20px;
    }
    .metas img {
        margin: 0 auto 15px;
        display: table;
    }
    .titulo-donativo{
        text-align: center;
    }
    .arbol-adopta {
        width: 90%;
        max-width: 220px;
        margin: 13% 10px 10px 60px;
    }
    .nombre-arbol {
    left: 50px;
    }
    /*  _____---------------------------------- CHIAPAS---------------------------*/

    .webp .cover-chiapas{
    background-image: url("../images/ecosistemas/chiapas/cover-sm.webp");
    background-position:  bottom center !important;
    }
    .no-webp .cover-chiapas {
    background-image: url("../images/ecosistemas/chiapas/cover-sm.jpg");
    background-position:  bottom center !important;
    }
    .webp .donativo-chiapas{
        background-image: url("../images/ecosistemas/chiapas/donativo-sm.webp");
    }
    .no-webp .donativo-chiapas{
        background-image: url("../images/ecosistemas/chiapas/donativo-sm.jpg");
    }
    .webp .area-natural-chiapas{
        background-image: url("../images/ecosistemas/chiapas/area-natural-bg-sm.webp");
    }
    .no-webp .area-natural-chiapas{
        background-image: url("../images/ecosistemas/chiapas/area-natural-bg-sm.jpg");
    }
    /*  _____---------------------------------- Durango---------------------------*/

    .webp .cover-durango{
    background-image: url("../images/ecosistemas/durango/cover-sm.webp");
    }
    .no-webp .cover-durango {
    background-image: url("../images/ecosistemas/durango/cover-sm.jpg");
    }
    .webp .donativo-durango{
        background-image: url("../images/ecosistemas/durango/donativo-sm.webp");
    }
    .no-webp .donativo-durango{
        background-image: url("../images/ecosistemas/durango/donativo-sm.jpg");
    }
    .webp .area-natural-durango{
        background-image: url("../images/ecosistemas/durango/area-natural-sm.webp");
    }
    .no-webp .area-natural-durango{
        background-image: url("../images/ecosistemas/durango/area-natural-sm.jpg");
    }
    /*  _____---------------------------------- jalisco---------------------------*/

    .webp .cover-jalisco{
    background-image: url("../images/ecosistemas/jalisco/cover-sm.webp");
    }
    .no-webp .cover-jalisco {
    background-image: url("../images/ecosistemas/jalisco/cover-sm.jpg");
    }
    .webp .donativo-jalisco{
        background-image: url("../images/ecosistemas/jalisco/donativo-sm.webp");
    }
    .no-webp .donativo-jalisco{
        background-image: url("../images/ecosistemas/jalisco/donativo-sm.jpg");
    }
    .webp .area-natural-jalisco{
        background-image: url("../images/ecosistemas/jalisco/area-natural-sm.webp");
    }
    .no-webp .area-natural-jalisco{
        background-image: url("../images/ecosistemas/jalisco/area-natural-sm.jpg");
    }
     /*  _____---------------------------------- Coahuila---------------------------*/
    .webp .cover-coahuila{
    background-image: url("../images/ecosistemas/coahuila/cover-sm.webp");
    }
    .no-webp .cover-coahuila {
    background-image: url("../images/ecosistemas/coahuila/cover-sm.jpg");
    }

    .webp .donativo-coahuila{
        background-image: url("../images/ecosistemas/coahuila/coahuila-donativo-sm.webp");
    }
    .no-webp .donativo-coahuila{
        background-image: url("../images/ecosistemas/coahuila/coahuila-donativo-sm.jpg");
    }

    .webp .area-natural-coahuila{
        background-image: url("../images/ecosistemas/coahuila/area-natural-sm.webp");
    }
    .no-webp .area-natural-coahuila{
        background-image: url("../images/ecosistemas/coahuila/area-natural-sm.jpg");
    }
        /*  _____---------------------------------- Quintana Roo---------------------------*/

    .webp .cover-quintana-roo{
    background-image: url("../images/ecosistemas/quintana-roo/cover-sm.webp");
    
    }
    .no-webp .cover-quintana-roo {
    background-image: url("../images/ecosistemas/quintana-roo/cover-sm.jpg");
    
    }

    .webp .donativo-quintana-roo{
        background-image: url("../images/ecosistemas/quintana-roo/donativo-sm.webp");
    }
    .no-webp .donativo-quintana-roo{
        background-image: url("../images/ecosistemas/quintana-roo/donativo-sm.jpg");
    }

    .webp .area-natural-quintana-roo{
        background-image: url("../images/ecosistemas/quintana-roo/area-natural-sm.webp");
    }
    .no-webp .area-natural-quintana-roo{
        background-image: url("../images/ecosistemas/quintana-roo/area-natural-sm.jpg");
    }
    /*  _____---------------------------------- Tabasco---------------------------*/

    .webp .cover-tabasco{
    background-image: url("../images/ecosistemas/tabasco/cover-sm.webp");
    }
    .no-webp .cover-tabasco {
    background-image: url("../images/ecosistemas/tabasco/cover-sm.jpg");
    }

    .webp .donativo-tabasco{
        background-image: url("../images/ecosistemas/tabasco/donativo-sm.webp");
    }
    .no-webp .donativo-tabasco{
        background-image: url("../images/ecosistemas/tabasco/donativo-sm.jpg");
    }

    .webp .area-natural-tabasco{
        background-image: url("../images/ecosistemas/tabasco/area-natural-sm.webp");
    }
    .no-webp .area-natural-tabasco{
        background-image: url("../images/ecosistemas/tabasco/area-natural-sm.jpg");
    }
     /*  _____---------------------------------- CDMX  ---------------------------*/

    .webp .cover-cdmx{
    background-image: url("../images/ecosistemas/cdmx/cover-md.webp");
    }
    .no-webp .cover-cdmx {
    background-image: url("../images/ecosistemas/cdmx/cover-md.jpg");
    }

    .webp .donativo-cdmx{
        background-image: url("../images/ecosistemas/cdmx/donativo-md.webp");
    }
    .no-webp .donativo-cdmx{
        background-image: url("../images/ecosistemas/cdmx/donativo-md.jpg");
    }

    .webp .area-natural-cdmx{
        background-image: url("../images/ecosistemas/cdmx/area-natural-md.webp");
    }
    .no-webp .area-natural-cdmx{
        background-image: url("../images/ecosistemas/cdmx/area-natural-md.jpg");
    }
        /*  _____---------------------------------- Oaxaca  ---------------------------*/

    .webp .cover-oaxaca{
    background-image: url("../images/ecosistemas/oaxaca/cover-sm.webp");
    }
    .no-webp .cover-oaxaca {
    background-image: url("../images/ecosistemas/oaxaca/cover-sm.jpg");
    }

    .webp .donativo-oaxaca{
        background-image: url("../images/ecosistemas/oaxaca/donativo-sm.webp");
    }
    .no-webp .donativo-oaxaca{
        background-image: url("../images/ecosistemas/oaxaca/donativo-sm.jpg");
    }

    .webp .area-natural-oaxaca{
        background-image: url("../images/ecosistemas/oaxaca/area-natural-sm.webp");
    }
    .no-webp .area-natural-oaxaca{
        background-image: url("../images/ecosistemas/oaxaca/area-natural-sm.jpg");
    }

     /*  _____---------------------------------- xochimilco ---------------------------*/

    .webp .cover-xochimilco{
    background-image: url("../images/ecosistemas/xochimilco/cover-sm.webp");
    }
    .no-webp .cover-xochimilco {
    background-image: url("../images/ecosistemas/xochimilco/cover-sm.jpg");
    }

    .webp .donativo-xochimilco{
        background-image: url("../images/ecosistemas/xochimilco/donativo-sm.webp");
    }
    .no-webp .donativo-xochimilco{
        background-image: url("../images/ecosistemas/xochimilco/donativo-sm.jpg");
    }

    .webp .area-natural-xochimilco{
        background-image: url("../images/ecosistemas/xochimilco/area-natural-sm.webp");
    }
    .no-webp .area-natural-xochimilco{
        background-image: url("../images/ecosistemas/xochimilco/area-natural-sm.jpg");
    }
        /*  _____---------------------------------- loreto ---------------------------*/

    .webp .cover-loreto{
    background-image: url("../images/ecosistemas/loreto/cover-sm.webp");
    }
    .no-webp .cover-loreto {
    background-image: url("../images/ecosistemas/loreto/cover-sm.jpg");
    }

    .webp .donativo-loreto{
        background-image: url("../images/ecosistemas/loreto/donativo-sm.webp");
    }
    .no-webp .donativo-loreto{
        background-image: url("../images/ecosistemas/loreto/donativo-sm.jpg");
    }

    .webp .area-natural-loreto{
        background-image: url("../images/ecosistemas/loreto/area-natural-sm.webp");
    }
    .no-webp .area-natural-loreto{
        background-image: url("../images/ecosistemas/loreto/area-natural-sm.jpg");
    }
/*  _____---------------------------------- campeche ---------------------------*/

    .webp .cover-campeche{
    background-image: url("../images/ecosistemas/campeche/cover-sm.webp");
    }
    .no-webp .cover-campeche {
    background-image: url("../images/ecosistemas/campeche/cover-sm.jpg");
    }

    .webp .donativo-campeche{
        background-image: url("../images/ecosistemas/campeche/donativo-sm.webp");
    }
    .no-webp .donativo-campeche{
        background-image: url("../images/ecosistemas/campeche/donativo-sm.jpg");
    }

    .webp .area-natural-campeche{
        background-image: url("../images/ecosistemas/campeche/area-natural-sm.webp");
    }
    .no-webp .area-natural-campeche{
        background-image: url("../images/ecosistemas/campeche/area-natural-sm.jpg");
    }
    /*  _____---------------------------------- zitacuaro ---------------------------*/

    .webp .cover-zitacuaro{
    background-image: url("../images/ecosistemas/zitacuaro/cover-sm.webp");
    }
    .no-webp .cover-zitacuaro {
    background-image: url("../images/ecosistemas/zitacuaro/cover-sm.jpg");
    }

    .webp .donativo-zitacuaro{
        background-image: url("../images/ecosistemas/zitacuaro/donativo-sm.webp");
    }
    .no-webp .donativo-zitacuaro{
        background-image: url("../images/ecosistemas/zitacuaro/donativo-sm.jpg");
    }

    .webp .area-natural-zitacuaro{
        background-image: url("../images/ecosistemas/zitacuaro/area-natural-sm.webp");
    }
    .no-webp .area-natural-zitacuaro{
        background-image: url("../images/ecosistemas/zitacuaro/area-natural-sm.jpg");
    }
    /*  _____---------------------------------- kolijke ---------------------------*/

    .webp .cover-kolijke{
    background-image: url("../images/ecosistemas/kolijke/cover-sm.webp");
    }
    .no-webp .cover-kolijke {
    background-image: url("../images/ecosistemas/kolijke/cover-sm.jpg");
    }

    .webp .donativo-kolijke{
        background-image: url("../images/ecosistemas/kolijke/donativo-sm.webp");
    }
    .no-webp .donativo-kolijke{
        background-image: url("../images/ecosistemas/kolijke/donativo-sm.jpg");
    }

    .webp .area-natural-kolijke{
        background-image: url("../images/ecosistemas/kolijke/area-natural-sm.webp");
    }
    .no-webp .area-natural-kolijke{
        background-image: url("../images/ecosistemas/kolijke/area-natural-sm.jpg");
    }
    /*  _____---------------------------------- ahuisculco ---------------------------*/

    .webp .cover-ahuisculco{
    background-image: url("../images/ecosistemas/ahuisculco/cover-sm.webp");
    }
    .no-webp .cover-ahuisculco {
    background-image: url("../images/ecosistemas/ahuisculco/cover-sm.jpg");
    }

    .webp .donativo-ahuisculco{
        background-image: url("../images/ecosistemas/ahuisculco/donativo-sm.webp");
    }
    .no-webp .donativo-ahuisculco{
        background-image: url("../images/ecosistemas/ahuisculco/donativo-sm.jpg");
    }

    .webp .area-natural-ahuisculco{
        background-image: url("../images/ecosistemas/ahuisculco/area-natural-sm.webp");
    }
    .no-webp .area-natural-ahuisculco{
        background-image: url("../images/ecosistemas/ahuisculco/area-natural-sm.jpg");
    }

    /*  _____---------------------------------- tancitaro ---------------------------*/

    .webp .cover-tancitaro{
    background-image: url("../images/ecosistemas/tancitaro/cover-sm.webp");
    }
    .no-webp .cover-tancitaro {
    background-image: url("../images/ecosistemas/tancitaro/cover-sm.jpg");
    }

    .webp .donativo-tancitaro{
        background-image: url("../images/ecosistemas/tancitaro/donativo-sm.webp");
    }
    .no-webp .donativo-tancitaro{
        background-image: url("../images/ecosistemas/tancitaro/donativo-sm.jpg");
    }

    .webp .area-natural-tancitaro{
        background-image: url("../images/ecosistemas/tancitaro/area-natural-sm.webp");
    }
    .no-webp .area-natural-tancitaro{
        background-image: url("../images/ecosistemas/tancitaro/area-natural-sm.jpg");
    }
    /*  _____---------------------------------- colima ---------------------------*/

    .webp .cover-colima{
    background-image: url("../images/ecosistemas/colima/cover-sm.webp");
    }
    .no-webp .cover-colima {
    background-image: url("../images/ecosistemas/colima/cover-sm.jpg");
    }

    .webp .donativo-colima{
        background-image: url("../images/ecosistemas/colima/donativo-sm.webp");
    }
    .no-webp .donativo-colima{
        background-image: url("../images/ecosistemas/colima/donativo-sm.jpg");
    }

    .webp .area-natural-colima{
        background-image: url("../images/ecosistemas/colima/area-natural-sm.webp");
    }
    .no-webp .area-natural-colima{
        background-image: url("../images/ecosistemas/colima/area-natural-sm.jpg");
    }
    /*  _____---------------------------------- veracruz ---------------------------*/

    .webp .cover-veracruz{
    background-image: url("../images/ecosistemas/veracruz/cover-sm.webp");
    }
    .no-webp .cover-veracruz {
    background-image: url("../images/ecosistemas/veracruz/cover-sm.jpg");
    }

    .webp .donativo-veracruz{
        background-image: url("../images/ecosistemas/veracruz/donativo-sm.webp");
    }
    .no-webp .donativo-veracruz{
        background-image: url("../images/ecosistemas/veracruz/donativo-sm.jpg");
    }

    .webp .area-natural-veracruz{
        background-image: url("../images/ecosistemas/veracruz/area-natural-sm.webp");
    }
    .no-webp .area-natural-veracruz{
        background-image: url("../images/ecosistemas/veracruz/area-natural-sm.jpg");
    }
       /*  _____---------------------------------- sonora ---------------------------*/

    .webp .cover-sonora{
    background-image: url("../images/ecosistemas/sonora/cover-sm.webp");
    }
    .no-webp .cover-sonora {
    background-image: url("../images/ecosistemas/sonora/cover-sm.jpg");
    }

    .webp .donativo-sonora{
        background-image: url("../images/ecosistemas/sonora/donativo-sm.webp");
    }
    .no-webp .donativo-sonora{
        background-image: url("../images/ecosistemas/sonora/donativo-sm.jpg");
    }

    .webp .area-natural-sonora{
        background-image: url("../images/ecosistemas/sonora/area-natural-sm.webp");
    }
    .no-webp .area-natural-sonora{
        background-image: url("../images/ecosistemas/sonora/area-natural-sm.jpg");
    }
    
       /*  _____---------------------------------- isla-contoy ---------------------------*/

    .webp .cover-isla-contoy{
    background-image: url("../images/ecosistemas/isla-contoy/cover-sm.webp");
    }
    .no-webp .cover-isla-contoy {
    background-image: url("../images/ecosistemas/isla-contoy/cover-sm.jpg");
    }

    .webp .donativo-isla-contoy{
        background-image: url("../images/ecosistemas/isla-contoy/donativo-sm.webp");
    }
    .no-webp .donativo-isla-contoy{
        background-image: url("../images/ecosistemas/isla-contoy/donativo-sm.jpg");
    }

    .webp .area-natural-isla-contoy{
        background-image: url("../images/ecosistemas/isla-contoy/area-natural-sm.webp");
    }
    .no-webp .area-natural-isla-contoy{
        background-image: url("../images/ecosistemas/isla-contoy/area-natural-sm.jpg");
    }

    /*  _____---------------------------------- laguna-om ---------------------------*/

    .webp .cover-laguna-om{
    background-image: url("../images/ecosistemas/laguna-om/cover-sm.webp");
    }
    .no-webp .cover-laguna-om {
    background-image: url("../images/ecosistemas/laguna-om/cover-sm.jpg");
    }

    .webp .donativo-laguna-om{
        background-image: url("../images/ecosistemas/laguna-om/donativo-sm.webp");
    }
    .no-webp .donativo-laguna-om{
        background-image: url("../images/ecosistemas/laguna-om/donativo-sm.jpg");
    }

    .webp .area-natural-laguna-om{
        background-image: url("../images/ecosistemas/laguna-om/area-natural-sm.webp");
    }
    .no-webp .area-natural-laguna-om{
        background-image: url("../images/ecosistemas/laguna-om/area-natural-sm.jpg");
    }

    /*  _____---------------------------------- Siembre-vida ---------------------------*/

    .webp .cover-siembre-vida{
        background-image: url("../images/ecosistemas/siembre-vida/cover-sm.webp");
        }
        .no-webp .cover-siembre-vida {
        background-image: url("../images/ecosistemas/siembre-vida/cover-sm.jpg");
        }
    
        .webp .donativo-siembre-vida{
            background-image: url("../images/ecosistemas/siembre-vida/donativo-sm.webp");
        }
        .no-webp .donativo-siembre-vida{
            background-image: url("../images/ecosistemas/siembre-vida/donativo-sm.jpg");
        }
    
        .webp .area-natural-siembre-vida{
            background-image: url("../images/ecosistemas/siembre-vida/area-natural-sm.webp");
        }
        .no-webp .area-natural-siembre-vida{
            background-image: url("../images/ecosistemas/siembre-vida/area-natural-sm.jpg");
        }

        /*  _____---------------------------------- sierra-guadalupe ---------------------------*/

    .webp .cover-sierra-guadalupe{
        background-image: url("../images/ecosistemas/sierra-guadalupe/cover-sm.webp");
        }
        .no-webp .cover-sierra-guadalupe {
        background-image: url("../images/ecosistemas/sierra-guadalupe/cover-sm.jpg");
        }
    
        .webp .donativo-sierra-guadalupe{
            background-image: url("../images/ecosistemas/sierra-guadalupe/donativo-sm.webp");
        }
        .no-webp .donativo-sierra-guadalupe{
            background-image: url("../images/ecosistemas/sierra-guadalupe/donativo-sm.jpg");
        }
    
        .webp .area-natural-sierra-guadalupe{
            background-image: url("../images/ecosistemas/sierra-guadalupe/area-natural-sm.webp");
        }
        .no-webp .area-natural-sierra-guadalupe{
            background-image: url("../images/ecosistemas/sierra-guadalupe/area-natural-sm.jpg");
        }

        /*  _____---------------------------------- chipinque ---------------------------*/

    .webp .cover-chipinque{
        background-image: url("../images/ecosistemas/chipinque/cover-sm.webp");
        }
        .no-webp .cover-chipinque {
        background-image: url("../images/ecosistemas/chipinque/cover-sm.jpg");
        }
    
        .webp .donativo-chipinque{
            background-image: url("../images/ecosistemas/chipinque/donativo-sm.webp");
        }
        .no-webp .donativo-chipinque{
            background-image: url("../images/ecosistemas/chipinque/donativo-sm.jpg");
        }
    
        .webp .area-natural-chipinque{
            background-image: url("../images/ecosistemas/chipinque/area-natural-sm.webp");
        }
        .no-webp .area-natural-chipinque{
            background-image: url("../images/ecosistemas/chipinque/area-natural-sm.jpg");
        }
         /*  _____---------------------------------- cenote ---------------------------*/

        .webp .cover-cenote{
        background-image: url("../images/ecosistemas/proyecto-cenote/cover-sm.webp");
        }
        .no-webp .cover-cenote {
        background-image: url("../images/ecosistemas/proyecto-cenote/cover-sm.jpg");
        }
    
        .webp .donativo-cenote{
            background-image: url("../images/ecosistemas/proyecto-cenote/donativo-sm.webp");
        }
        .no-webp .donativo-cenote{
            background-image: url("../images/ecosistemas/proyecto-cenote/donativo-sm.jpg");
        }
    
        .webp .area-natural-cenote{
            background-image: url("../images/ecosistemas/proyecto-cenote/area-natural-sm.webp");
        }
        .no-webp .area-natural-cenote{
            background-image: url("../images/ecosistemas/proyecto-cenote/area-natural-sm.jpg");
        }
        /*  _____---------------------------------- tehuacan ---------------------------*/

        .webp .cover-tehuacan{
        background-image: url("../images/ecosistemas/tehuacan/cover-sm.webp");
        }
        .no-webp .cover-tehuacan {
        background-image: url("../images/ecosistemas/tehuacan/cover-sm.jpg");
        }
    
        .webp .donativo-tehuacan{
            background-image: url("../images/ecosistemas/tehuacan/donativo-sm.webp");
        }
        .no-webp .donativo-tehuacan{
            background-image: url("../images/ecosistemas/tehuacan/donativo-sm.jpg");
        }
    
        .webp .area-natural-tehuacan{
            background-image: url("../images/ecosistemas/tehuacan/area-natural-sm.webp");
        }
        .no-webp .area-natural-tehuacan{
            background-image: url("../images/ecosistemas/tehuacan/area-natural-sm.jpg");
        }
        /*  _____---------------------------------- el-salvador ---------------------------*/

        .webp .cover-el-salvador{
        background-image: url("../images/ecosistemas/el-salvador/cover-sm.webp");
        }
        .no-webp .cover-el-salvador {
        background-image: url("../images/ecosistemas/el-salvador/cover-sm.jpg");
        }
    
        .webp .donativo-el-salvador{
            background-image: url("../images/ecosistemas/el-salvador/donativo-sm.webp");
        }
        .no-webp .donativo-el-salvador{
            background-image: url("../images/ecosistemas/el-salvador/donativo-sm.jpg");
        }
    
        .webp .area-natural-el-salvador{
            background-image: url("../images/ecosistemas/el-salvador/area-natural-sm.webp");
        }
        .no-webp .area-natural-el-salvador{
            background-image: url("../images/ecosistemas/el-salvador/area-natural-sm.jpg");
        }
        /*  _____---------------------------------- corredor-mariposa-monarca ---------------------------*/

        .webp .cover-corredor-mariposa-monarca{
            background-image: url("../images/ecosistemas/corredor-mariposa-monarca/cover-sm.webp");
            }
            .no-webp .cover-corredor-mariposa-monarca {
            background-image: url("../images/ecosistemas/corredor-mariposa-monarca/cover-sm.jpg");
            }
        
            .webp .donativo-corredor-mariposa-monarca{
                background-image: url("../images/ecosistemas/corredor-mariposa-monarca/donativo-sm.webp");
            }
            .no-webp .donativo-corredor-mariposa-monarca{
                background-image: url("../images/ecosistemas/corredor-mariposa-monarca/donativo-sm.jpg");
            }
        
            .webp .area-natural-corredor-mariposa-monarca{
                background-image: url("../images/ecosistemas/corredor-mariposa-monarca/area-natural-sm.webp");
            }
            .no-webp .area-natural-corredor-mariposa-monarca{
                background-image: url("../images/ecosistemas/corredor-mariposa-monarca/area-natural-sm.jpg");
            }
            /*  _____---------------------------------- cerro-apapasco ---------------------------*/

        .webp .cover-cerro-apapasco{
            background-image: url("../images/ecosistemas/cerro-apapasco/cover-sm.webp");
            }
            .no-webp .cover-cerro-apapasco {
            background-image: url("../images/ecosistemas/cerro-apapasco/cover-sm.jpg");
            }
        
            .webp .donativo-cerro-apapasco{
                background-image: url("../images/ecosistemas/cerro-apapasco/donativo-sm.webp");
            }
            .no-webp .donativo-cerro-apapasco{
                background-image: url("../images/ecosistemas/cerro-apapasco/donativo-sm.jpg");
            }
        
            .webp .area-natural-cerro-apapasco{
                background-image: url("../images/ecosistemas/cerro-apapasco/area-natural-sm.webp");
            }
            .no-webp .area-natural-cerro-apapasco{
                background-image: url("../images/ecosistemas/cerro-apapasco/area-natural-sm.jpg");
            }
             /*  _____---------------------------------- recuperacion-de-alimentos ---------------------------*/

        .webp .cover-recuperacion-de-alimentos{
            background-image: url("../images/ecosistemas/recuperacion-de-alimentos/cover-sm.webp");
            }
            .no-webp .cover-recuperacion-de-alimentos {
            background-image: url("../images/ecosistemas/recuperacion-de-alimentos/cover-sm.jpg");
            }
            .webp .area-natural-recuperacion-de-alimentos{
                background-image: url("../images/ecosistemas/recuperacion-de-alimentos/area-natural-sm.webp");
            }
            .no-webp .area-natural-recuperacion-de-alimentos{
                background-image: url("../images/ecosistemas/recuperacion-de-alimentos/area-natural-sm.jpg");
            }

            /*  _____---------------------------------- axoarca ---------------------------*/

            .webp .cover-axoarca{
            background-image: url("../images/ecosistemas/axoarca/cover-sm.webp");
            }
            .no-webp .cover-axoarca {
            background-image: url("../images/ecosistemas/axoarca/cover-sm.jpg");
            }
        
            .webp .donativo-axoarca{
                background-image: url("../images/ecosistemas/axoarca/donativo-sm.webp");
            }
            .no-webp .donativo-axoarca{
                background-image: url("../images/ecosistemas/axoarca/donativo-sm.jpg");
            }
        
            .webp .area-natural-axoarca{
                background-image: url("../images/ecosistemas/axoarca/area-natural-sm.webp");
            }
            .no-webp .area-natural-axoarca{
                background-image: url("../images/ecosistemas/axoarca/area-natural-sm.jpg");
            }
            /*  _____---------------------------------- refugio-de-aves ---------------------------*/

            .webp .cover-refugio-de-aves{
            background-image: url("../images/ecosistemas/refugio-de-aves/cover-sm.webp");
            }
            .no-webp .cover-refugio-de-aves {
            background-image: url("../images/ecosistemas/refugio-de-aves/cover-sm.jpg");
            }
        
            .webp .donativo-refugio-de-aves{
                background-image: url("../images/ecosistemas/refugio-de-aves/donativo-sm.webp");
            }
            .no-webp .donativo-refugio-de-aves{
                background-image: url("../images/ecosistemas/refugio-de-aves/donativo-sm.jpg");
            }
        
            .webp .area-natural-refugio-de-aves{
                background-image: url("../images/ecosistemas/refugio-de-aves/area-natural-sm.webp");
            }
            .no-webp .area-natural-refugio-de-aves{
                background-image: url("../images/ecosistemas/refugio-de-aves/area-natural-sm.jpg");
            }

/*  _____---------------------------------- sistema-arrecifal-veracruzano. ---------------------------*/

    .webp .cover-sistema-arrecifal-veracruzano{
    background-image: url("../images/ecosistemas/sistema-arrecifal-veracruzano/cover-sm.webp");
    }
    .no-webp .cover-sistema-arrecifal-veracruzano {
    background-image: url("../images/ecosistemas/sistema-arrecifal-veracruzano/cover-sm.jpg");
    }

    .webp .donativo-sistema-arrecifal-veracruzano{
        background-image: url("../images/ecosistemas/sistema-arrecifal-veracruzano/donativo-sm.webp");
    }
    .no-webp .donativo-sistema-arrecifal-veracruzano{
        background-image: url("../images/ecosistemas/sistema-arrecifal-veracruzano/donativo-sm.jpg");
    }

    .webp .area-natural-sistema-arrecifal-veracruzano{
        background-image: url("../images/ecosistemas/sistema-arrecifal-veracruzano/area-natural-sm.webp");
    }
    .no-webp .area-natural-sistema-arrecifal-veracruzano{
        background-image: url("../images/ecosistemas/sistema-arrecifal-veracruzano/area-natural-sm.jpg");
    }

    /*  _____---------------------------------- museo-del-agua. ---------------------------*/

    .webp .cover-museo-del-agua{
    background-image: url("../images/ecosistemas/museo-del-agua/cover-sm.webp");
    }
    .no-webp .cover-museo-del-agua {
    background-image: url("../images/ecosistemas/museo-del-agua/cover-sm.jpg");
    }

    .webp .donativo-museo-del-agua{
        background-image: url("../images/ecosistemas/museo-del-agua/donativo-sm.webp");
    }
    .no-webp .donativo-museo-del-agua{
        background-image: url("../images/ecosistemas/museo-del-agua/donativo-sm.jpg");
    }

    .webp .area-natural-museo-del-agua{
        background-image: url("../images/ecosistemas/museo-del-agua/area-natural-sm.webp");
    }
    .no-webp .area-natural-museo-del-agua{
        background-image: url("../images/ecosistemas/museo-del-agua/area-natural-sm.jpg");
    }
    /*  _____---------------------------------- rescatando-las-sierras-de-la-ciudad ---------------------------*/

    .webp .cover-rescatando-las-sierras-de-la-ciudad{
    background-image: url("../images/ecosistemas/rescatando-las-sierras-de-la-ciudad/cover-sm.webp");
    }
    .no-webp .cover-rescatando-las-sierras-de-la-ciudad {
    background-image: url("../images/ecosistemas/rescatando-las-sierras-de-la-ciudad/cover-sm.jpg");
    }

    .webp .donativo-rescatando-las-sierras-de-la-ciudad{
        background-image: url("../images/ecosistemas/rescatando-las-sierras-de-la-ciudad/donativo-sm.webp");
    }
    .no-webp .donativo-rescatando-las-sierras-de-la-ciudad{
        background-image: url("../images/ecosistemas/rescatando-las-sierras-de-la-ciudad/donativo-sm.jpg");
    }

    .webp .area-natural-rescatando-las-sierras-de-la-ciudad{
        background-image: url("../images/ecosistemas/rescatando-las-sierras-de-la-ciudad/area-natural-sm.webp");
    }
    .no-webp .area-natural-rescatando-las-sierras-de-la-ciudad{
        background-image: url("../images/ecosistemas/rescatando-las-sierras-de-la-ciudad/area-natural-sm.jpg");
    }

    /*  _____---------------------------------- sierra-de-tepotzotlan ---------------------------*/

    .webp .cover-sierra-de-tepotzotlan{
        background-image: url("../images/ecosistemas/sierra-de-tepotzotlan/cover-sm.webp");
        }
        .no-webp .cover-sierra-de-tepotzotlan {
        background-image: url("../images/ecosistemas/sierra-de-tepotzotlan/cover-sm.jpg");
        }
    
        .webp .donativo-sierra-de-tepotzotlan{
            background-image: url("../images/ecosistemas/sierra-de-tepotzotlan/donativo-sm.webp");
        }
        .no-webp .donativo-sierra-de-tepotzotlan{
            background-image: url("../images/ecosistemas/sierra-de-tepotzotlan/donativo-sm.jpg");
        }
    
        .webp .area-natural-sierra-de-tepotzotlan{
            background-image: url("../images/ecosistemas/sierra-de-tepotzotlan/area-natural-sm.webp");
        }
        .no-webp .area-natural-sierra-de-tepotzotlan{
            background-image: url("../images/ecosistemas/sierra-de-tepotzotlan/area-natural-sm.jpg");
        }

        /*  _____---------------------------------- bosque-de-la-primavera-y-cerro-viejo ---------------------------*/

    .webp .cover-bosque-de-la-primavera-y-cerro-viejo{
    background-image: url("../images/ecosistemas/bosque-de-la-primavera-y-cerro-viejo/cover-sm.webp");
    }
    .no-webp .cover-bosque-de-la-primavera-y-cerro-viejo {
    background-image: url("../images/ecosistemas/bosque-de-la-primavera-y-cerro-viejo/cover-sm.jpg");
    }

    .webp .donativo-bosque-de-la-primavera-y-cerro-viejo{
        background-image: url("../images/ecosistemas/bosque-de-la-primavera-y-cerro-viejo/donativo-sm.webp");
    }
    .no-webp .donativo-bosque-de-la-primavera-y-cerro-viejo{
        background-image: url("../images/ecosistemas/bosque-de-la-primavera-y-cerro-viejo/donativo-sm.jpg");
    }

    .webp .area-natural-bosque-de-la-primavera-y-cerro-viejo{
        background-image: url("../images/ecosistemas/bosque-de-la-primavera-y-cerro-viejo/area-natural-sm.webp");
    }
    .no-webp .area-natural-bosque-de-la-primavera-y-cerro-viejo{
        background-image: url("../images/ecosistemas/bosque-de-la-primavera-y-cerro-viejo/area-natural-sm.jpg");
    }

/*  _____---------------------------------- centro-de-rescate-y-rehabilitacion-de-fauna-silvestre ---------------------------*/

.webp .cover-centro-de-rescate-y-rehabilitacion-de-fauna-silvestre{
    background-image: url("../images/ecosistemas/centro-de-rescate-y-rehabilitacion-de-fauna-silvestre/cover-sm.webp");
    }
    .no-webp .cover-centro-de-rescate-y-rehabilitacion-de-fauna-silvestre {
    background-image: url("../images/ecosistemas/centro-de-rescate-y-rehabilitacion-de-fauna-silvestre/cover-sm.jpg");
    }

    .webp .donativo-centro-de-rescate-y-rehabilitacion-de-fauna-silvestre{
        background-image: url("../images/ecosistemas/centro-de-rescate-y-rehabilitacion-de-fauna-silvestre/donativo-sm.webp");
    }
    .no-webp .donativo-centro-de-rescate-y-rehabilitacion-de-fauna-silvestre{
        background-image: url("../images/ecosistemas/centro-de-rescate-y-rehabilitacion-de-fauna-silvestre/donativo-sm.jpg");
    }

    .webp .area-natural-centro-de-rescate-y-rehabilitacion-de-fauna-silvestre{
        background-image: url("../images/ecosistemas/centro-de-rescate-y-rehabilitacion-de-fauna-silvestre/area-natural-sm.webp");
    }
    .no-webp .area-natural-centro-de-rescate-y-rehabilitacion-de-fauna-silvestre{
        background-image: url("../images/ecosistemas/centro-de-rescate-y-rehabilitacion-de-fauna-silvestre/area-natural-sm.jpg");
    }

    /*  _____---------------------------------- bosque-antiguo ---------------------------*/

    .webp .cover-bosque-antiguo{
    background-image: url("../images/ecosistemas/bosque-antiguo/cover-sm.webp");
    }
    .no-webp .cover-bosque-antiguo {
    background-image: url("../images/ecosistemas/bosque-antiguo/cover-sm.jpg");
    }

    .webp .donativo-bosque-antiguo{
        background-image: url("../images/ecosistemas/bosque-antiguo/donativo-sm.webp");
    }
    .no-webp .donativo-bosque-antiguo{
        background-image: url("../images/ecosistemas/bosque-antiguo/donativo-sm.jpg");
    }

    .webp .area-natural-bosque-antiguo{
        background-image: url("../images/ecosistemas/bosque-antiguo/area-natural-sm.webp");
    }
    .no-webp .area-natural-bosque-antiguo{
        background-image: url("../images/ecosistemas/bosque-antiguo/area-natural-sm.jpg");
    }

    /*  _____---------------------------------- reserva-de-la-biosfera-de-sian-kaan ---------------------------*/

    .webp .cover-reserva-de-la-biosfera-de-sian-kaan{
    background-image: url("../images/ecosistemas/reserva-de-la-biosfera-de-sian-kaan/cover-sm.webp");
    }
    .no-webp .cover-reserva-de-la-biosfera-de-sian-kaan {
    background-image: url("../images/ecosistemas/reserva-de-la-biosfera-de-sian-kaan/cover-sm.jpg");
    }

    .webp .donativo-reserva-de-la-biosfera-de-sian-kaan{
        background-image: url("../images/ecosistemas/reserva-de-la-biosfera-de-sian-kaan/donativo-sm.webp");
    }
    .no-webp .donativo-reserva-de-la-biosfera-de-sian-kaan{
        background-image: url("../images/ecosistemas/reserva-de-la-biosfera-de-sian-kaan/donativo-sm.jpg");
    }

    .webp .area-natural-reserva-de-la-biosfera-de-sian-kaan{
        background-image: url("../images/ecosistemas/reserva-de-la-biosfera-de-sian-kaan/area-natural-sm.webp");
    }
    .no-webp .area-natural-reserva-de-la-biosfera-de-sian-kaan{
        background-image: url("../images/ecosistemas/reserva-de-la-biosfera-de-sian-kaan/area-natural-sm.jpg");
    }

/*  _____---------------------------------- cadnr-026-bajo-rio-san-juan ---------------------------*/

    .webp .cover-cadnr-026-bajo-rio-san-juan{
    background-image: url("../images/ecosistemas/cadnr-026-bajo-rio-san-juan/cover-sm.webp");
    }
    .no-webp .cover-cadnr-026-bajo-rio-san-juan {
    background-image: url("../images/ecosistemas/cadnr-026-bajo-rio-san-juan/cover-sm.jpg");
    }

    .webp .donativo-cadnr-026-bajo-rio-san-juan{
        background-image: url("../images/ecosistemas/cadnr-026-bajo-rio-san-juan/donativo-sm.webp");
    }
    .no-webp .donativo-cadnr-026-bajo-rio-san-juan{
        background-image: url("../images/ecosistemas/cadnr-026-bajo-rio-san-juan/donativo-sm.jpg");
    }

    .webp .area-natural-cadnr-026-bajo-rio-san-juan{
        background-image: url("../images/ecosistemas/cadnr-026-bajo-rio-san-juan/area-natural-sm.webp");
    }
    .no-webp .area-natural-cadnr-026-bajo-rio-san-juan{
        background-image: url("../images/ecosistemas/cadnr-026-bajo-rio-san-juan/area-natural-sm.jpg");
    }

    /*  _____---------------------------------- sierra-sur-oaxaca-costa-pacifico ---------------------------*/

    .webp .cover-sierra-sur-oaxaca-costa-pacifico{
    background-image: url("../images/ecosistemas/sierra-sur-oaxaca-costa-pacifico/cover-sm.webp");
    }
    .no-webp .cover-sierra-sur-oaxaca-costa-pacifico {
    background-image: url("../images/ecosistemas/sierra-sur-oaxaca-costa-pacifico/cover-sm.jpg");
    }

    .webp .donativo-sierra-sur-oaxaca-costa-pacifico{
        background-image: url("../images/ecosistemas/sierra-sur-oaxaca-costa-pacifico/donativo-sm.webp");
    }
    .no-webp .donativo-sierra-sur-oaxaca-costa-pacifico{
        background-image: url("../images/ecosistemas/sierra-sur-oaxaca-costa-pacifico/donativo-sm.jpg");
    }

    .webp .area-natural-sierra-sur-oaxaca-costa-pacifico{
        background-image: url("../images/ecosistemas/sierra-sur-oaxaca-costa-pacifico/area-natural-sm.webp");
    }
    .no-webp .area-natural-sierra-sur-oaxaca-costa-pacifico{
        background-image: url("../images/ecosistemas/sierra-sur-oaxaca-costa-pacifico/area-natural-sm.jpg");
    }

    /*  _____---------------------------------- bahia-de-la-paz ---------------------------*/

    .webp .cover-bahia-de-la-paz{
    background-image: url("../images/ecosistemas/bahia-de-la-paz/cover-sm.webp");
    }
    .no-webp .cover-bahia-de-la-paz {
    background-image: url("../images/ecosistemas/bahia-de-la-paz/cover-sm.jpg");
    }

    .webp .donativo-bahia-de-la-paz{
        background-image: url("../images/ecosistemas/bahia-de-la-paz/donativo-sm.webp");
    }
    .no-webp .donativo-bahia-de-la-paz{
        background-image: url("../images/ecosistemas/bahia-de-la-paz/donativo-sm.jpg");
    }

    .webp .area-natural-bahia-de-la-paz{
        background-image: url("../images/ecosistemas/bahia-de-la-paz/area-natural-sm.webp");
    }
    .no-webp .area-natural-bahia-de-la-paz{
        background-image: url("../images/ecosistemas/bahia-de-la-paz/area-natural-sm.jpg");
    }

     /*  _____---------------------------------- coralisma ---------------------------*/

    .webp .cover-coralisma{
    background-image: url("../images/ecosistemas/coralisma/cover-sm.webp");
    }
    .no-webp .cover-coralisma {
    background-image: url("../images/ecosistemas/coralisma/cover-sm.jpg");
    }

    .webp .donativo-coralisma{
        background-image: url("../images/ecosistemas/coralisma/donativo-sm.webp");
    }
    .no-webp .donativo-coralisma{
        background-image: url("../images/ecosistemas/coralisma/donativo-sm.jpg");
    }

    .webp .area-natural-coralisma{
        background-image: url("../images/ecosistemas/coralisma/area-natural-sm.webp");
    }
    .no-webp .area-natural-coralisma{
        background-image: url("../images/ecosistemas/coralisma/area-natural-sm.jpg");
    }


    /*  _____---------------------------------- ejido-cuitzeo ---------------------------*/

    .webp .cover-ejido-cuitzeo{
    background-image: url("../images/ecosistemas/ejido-cuitzeo/cover-sm.webp");
    }
    .no-webp .cover-ejido-cuitzeo {
    background-image: url("../images/ecosistemas/ejido-cuitzeo/cover-sm.jpg");
    }

    .webp .donativo-ejido-cuitzeo{
        background-image: url("../images/ecosistemas/ejido-cuitzeo/donativo-sm.webp");
    }
    .no-webp .donativo-ejido-cuitzeo{
        background-image: url("../images/ecosistemas/ejido-cuitzeo/donativo-sm.jpg");
    }

    .webp .area-natural-ejido-cuitzeo{
        background-image: url("../images/ecosistemas/ejido-cuitzeo/area-natural-sm.webp");
    }
    .no-webp .area-natural-ejido-cuitzeo{
        background-image: url("../images/ecosistemas/ejido-cuitzeo/area-natural-sm.jpg");
    }

    /*  _____---------------------------------- restauremos-el-pico-de-orizaba ---------------------------*/

    .webp .cover-restauremos-el-pico-de-orizaba{
    background-image: url("../images/ecosistemas/restauremos-el-pico-de-orizaba/cover-sm.webp");
    }
    .no-webp .cover-restauremos-el-pico-de-orizaba {
    background-image: url("../images/ecosistemas/restauremos-el-pico-de-orizaba/cover-sm.jpg");
    }

    .webp .donativo-restauremos-el-pico-de-orizaba{
        background-image: url("../images/ecosistemas/restauremos-el-pico-de-orizaba/donativo-sm.webp");
    }
    .no-webp .donativo-restauremos-el-pico-de-orizaba{
        background-image: url("../images/ecosistemas/restauremos-el-pico-de-orizaba/donativo-sm.jpg");
    }

    .webp .area-natural-restauremos-el-pico-de-orizaba{
        background-image: url("../images/ecosistemas/restauremos-el-pico-de-orizaba/area-natural-sm.webp");
    }
    .no-webp .area-natural-restauremos-el-pico-de-orizaba{
        background-image: url("../images/ecosistemas/restauremos-el-pico-de-orizaba/area-natural-sm.jpg");
    }

    /*  _____---------------------------------- cumbres-de-monterrey ---------------------------*/

    .webp .cover-cumbres-de-monterrey{
    background-image: url("../images/ecosistemas/cumbres-de-monterrey/cover-sm.webp");
    }
    .no-webp .cover-cumbres-de-monterrey {
    background-image: url("../images/ecosistemas/cumbres-de-monterrey/cover-sm.jpg");
    }

    .webp .donativo-cumbres-de-monterrey{
        background-image: url("../images/ecosistemas/cumbres-de-monterrey/donativo-sm.webp");
    }
    .no-webp .donativo-cumbres-de-monterrey{
        background-image: url("../images/ecosistemas/cumbres-de-monterrey/donativo-sm.jpg");
    }

    .webp .area-natural-cumbres-de-monterrey{
        background-image: url("../images/ecosistemas/cumbres-de-monterrey/area-natural-sm.webp");
    }
    .no-webp .area-natural-cumbres-de-monterrey{
        background-image: url("../images/ecosistemas/cumbres-de-monterrey/area-natural-sm.jpg");
    }

     /*  _____---------------------------------- pro-red-participativa ---------------------------*/

    .webp .cover-pro-red-participativa{
    background-image: url("../images/ecosistemas/pro-red-participativa/cover-sm.webp");
    }
    .no-webp .cover-pro-red-participativa {
    background-image: url("../images/ecosistemas/pro-red-participativa/cover-sm.jpg");
    }

    .webp .donativo-pro-red-participativa{
        background-image: url("../images/ecosistemas/pro-red-participativa/donativo-sm.webp");
    }
    .no-webp .donativo-pro-red-participativa{
        background-image: url("../images/ecosistemas/pro-red-participativa/donativo-sm.jpg");
    }

    .webp .area-natural-pro-red-participativa{
        background-image: url("../images/ecosistemas/pro-red-participativa/area-natural-sm.webp");
    }
    .no-webp .area-natural-pro-red-participativa{
        background-image: url("../images/ecosistemas/pro-red-participativa/area-natural-sm.jpg");
    }

    /*  _____---------------------------------- laguna-de-tecocomulco ---------------------------*/

    .webp .cover-laguna-de-tecocomulco{
    background-image: url("../images/ecosistemas/laguna-de-tecocomulco/cover-sm.webp");
    }
    .no-webp .cover-laguna-de-tecocomulco {
    background-image: url("../images/ecosistemas/laguna-de-tecocomulco/cover-sm.jpg");
    }

    .webp .donativo-laguna-de-tecocomulco{
        background-image: url("../images/ecosistemas/laguna-de-tecocomulco/donativo-sm.webp");
    }
    .no-webp .donativo-laguna-de-tecocomulco{
        background-image: url("../images/ecosistemas/laguna-de-tecocomulco/donativo-sm.jpg");
    }

    .webp .area-natural-laguna-de-tecocomulco{
        background-image: url("../images/ecosistemas/laguna-de-tecocomulco/area-natural-sm.webp");
    }
    .no-webp .area-natural-laguna-de-tecocomulco{
        background-image: url("../images/ecosistemas/laguna-de-tecocomulco/area-natural-sm.jpg");
    }

    /*  _____---------------------------------- ejido-loma-bonita ---------------------------*/

    .webp .cover-ejido-loma-bonita{
    background-image: url("../images/ecosistemas/ejido-loma-bonita/cover-sm.webp");
    }
    .no-webp .cover-ejido-loma-bonita {
    background-image: url("../images/ecosistemas/ejido-loma-bonita/cover-sm.jpg");
    }

    .webp .donativo-ejido-loma-bonita{
        background-image: url("../images/ecosistemas/ejido-loma-bonita/donativo-sm.webp");
    }
    .no-webp .donativo-ejido-loma-bonita{
        background-image: url("../images/ecosistemas/ejido-loma-bonita/donativo-sm.jpg");
    }

    .webp .area-natural-ejido-loma-bonita{
        background-image: url("../images/ecosistemas/ejido-loma-bonita/area-natural-sm.webp");
    }
    .no-webp .area-natural-ejido-loma-bonita{
        background-image: url("../images/ecosistemas/ejido-loma-bonita/area-natural-sm.jpg");
    }

    /*  _____---------------------------------- laguna-de-atotonilco ---------------------------*/

    .webp .cover-laguna-de-atotonilco{
    background-image: url("../images/ecosistemas/laguna-de-atotonilco/cover-sm.webp");
    }
    .no-webp .cover-laguna-de-atotonilco {
    background-image: url("../images/ecosistemas/laguna-de-atotonilco/cover-sm.jpg");
    }

    .webp .donativo-laguna-de-atotonilco{
        background-image: url("../images/ecosistemas/laguna-de-atotonilco/donativo-sm.webp");
    }
    .no-webp .donativo-laguna-de-atotonilco{
        background-image: url("../images/ecosistemas/laguna-de-atotonilco/donativo-sm.jpg");
    }

    .webp .area-natural-laguna-de-atotonilco{
        background-image: url("../images/ecosistemas/laguna-de-atotonilco/area-natural-sm.webp");
    }
    .no-webp .area-natural-laguna-de-atotonilco{
        background-image: url("../images/ecosistemas/laguna-de-atotonilco/area-natural-sm.jpg");
    }

    /*  _____---------------------------------- salvatierra ---------------------------*/

    .webp .cover-salvatierra{
    background-image: url("../images/ecosistemas/salvatierra/cover-sm.webp");
    }
    .no-webp .cover-salvatierra {
    background-image: url("../images/ecosistemas/salvatierra/cover-sm.jpg");
    }

    .webp .donativo-salvatierra{
        background-image: url("../images/ecosistemas/salvatierra/donativo-sm.webp");
    }
    .no-webp .donativo-salvatierra{
        background-image: url("../images/ecosistemas/salvatierra/donativo-sm.jpg");
    }

    .webp .area-natural-salvatierra{
        background-image: url("../images/ecosistemas/salvatierra/area-natural-sm.webp");
    }
    .no-webp .area-natural-salvatierra{
        background-image: url("../images/ecosistemas/salvatierra/area-natural-sm.jpg");
    }

    /*  _____---------------------------------- tecolutla ---------------------------*/

    .webp .cover-tecolutla{
        background-image: url("../images/ecosistemas/tecolutla/cover-sm.webp");
        }
        .no-webp .cover-tecolutla {
        background-image: url("../images/ecosistemas/tecolutla/cover-sm.jpg");
        }
    
        .webp .donativo-tecolutla{
            background-image: url("../images/ecosistemas/tecolutla/donativo-sm.webp");
        }
        .no-webp .donativo-tecolutla{
            background-image: url("../images/ecosistemas/tecolutla/donativo-sm.jpg");
        }
    
        .webp .area-natural-tecolutla{
            background-image: url("../images/ecosistemas/tecolutla/area-natural-sm.webp");
        }
        .no-webp .area-natural-tecolutla{
            background-image: url("../images/ecosistemas/tecolutla/area-natural-sm.jpg");
        }

        /*  _____---------------------------------- isla-del-carmen-bahia-de-loreto ---------------------------*/

    .webp .cover-isla-del-carmen-bahia-de-loreto{
    background-image: url("../images/ecosistemas/isla-del-carmen-bahia-de-loreto/cover-sm.webp");
    }
    .no-webp .cover-isla-del-carmen-bahia-de-loreto {
    background-image: url("../images/ecosistemas/isla-del-carmen-bahia-de-loreto/cover-sm.jpg");
    }

    .webp .donativo-isla-del-carmen-bahia-de-loreto{
        background-image: url("../images/ecosistemas/isla-del-carmen-bahia-de-loreto/donativo-sm.webp");
    }
    .no-webp .donativo-isla-del-carmen-bahia-de-loreto{
        background-image: url("../images/ecosistemas/isla-del-carmen-bahia-de-loreto/donativo-sm.jpg");
    }

    .webp .area-natural-isla-del-carmen-bahia-de-loreto{
        background-image: url("../images/ecosistemas/isla-del-carmen-bahia-de-loreto/area-natural-sm.webp");
    }
    .no-webp .area-natural-isla-del-carmen-bahia-de-loreto{
        background-image: url("../images/ecosistemas/isla-del-carmen-bahia-de-loreto/area-natural-sm.jpg");
    }
 }


@media (max-width: 575.98px) { 
     .titulo-ecosistema {
        font-size: 60px;
    }
    .titulo-ecosistema-mini {
    font-size: 45px;
    }
    .titulo2-ecosistema {
        font-size: 22px;
    }
    .cover-ecosistemas{
        min-height: 90vh;
    }
    .video-thumb {
        margin-bottom: 30px;
    }
    .cheque{
        width: 100%;
        padding: 20px 27% 20px 20px;
    }
    .cheque img {
    width: 30%;
   
    right: 0%;
    top: 11%;
    }
    .area-natural {
        padding: 100px 20px;
        background-size: cover !important;
        background-position: top center !important;
    }
    .foto-comunidad {
    margin-top: -30px;
    }
    .arbol-adopta-cont {
       width: 80%;
    }
     .fauna-cont, .flora-cont{
        padding: 20px 0;

    }
    .fauna-text, .flora-text {
    width: 65%;
    margin-left: 5%;
    
    }
    .fauna-text p, .flora-text p{
        font-size: 13px;
        line-height: 1.2;
    }

    .titulo3-ecosistema {
        font-size: 15px;
        padding: 4px 16px;
    }
    .causa {
    padding: 50px 0 0;
    }
    .metas {
  
        width: calc(100% - 40px);
        margin-left: 20px;
    }
    .reconocimientos ul{
        font-size: 14px;
    }
    #notebook-paper ul {
        font-size: 13px;
    }

 }

 @media (max-width: 420px){
    .cheque{
        padding: 13% 20px 20px;
    }
    .cheque img {
    width: 30%;
    right: 1%;
    top: 1%;
    }
    .titulo-ecosistema {
        font-size: 40px;
    }
    .titulo-ecosistema-mini {
    font-size: 36px;
    }
    .area-natural {
        padding: 40px 0px;
    }

 }