/* Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

a,
a:visited,
a:hover,
a:active,
a:focus {
  color: inherit;
  text-decoration: none;
  outline: none;
}

.thin{
  font-weight:100;
}
.extralight{
  font-weight:200;
 
}
.light{
  font-weight:300;
}
.regular{
  font-weight:300;
}
.medium{
  font-weight:500;
}
.semibold{
  font-weight:600;
}
.bold{
  font-weight:700;
}
.extrabold{
  font-weight:800;
}
.black{
  font-weight:900;
}

.blanca{
  color:#fff;
}
.negra{
  color:#000;
}
.verde{
  color:#07B88A;
}
.olivo{
  color:#013233;
}
.verdeobscuro{
  color:#010e0f;
}
.gris{
  color:#727376;
}
.smallfont {
    font-size: 18px;
    line-height:20px
}

.regularlineheight {
    line-height: 29px;
    
}

.textshadow{
  filter: drop-shadow(2px 3px 3px black);
}


@media (max-width: 768px) { 
  .smallfont {
    font-size: 12px;
    line-height:14px;
    
}
}

@media (max-height: 600px) { 
  .smallfont {
    font-size: 10px;
    line-height:12px;
    
}
}


/* cuerpo y ajustes generales */

body{
  background-color:#000;
  margin:0;
  padding:0;
  color:white;
  overflow: hidden;
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  color:#fff;
        /* Opera/IE 8+ */
}

/* Ajustes recuadro principal */

.recuadrocontainer {
    position: fixed;
    width: 350px;
    height: 350px;
    z-index:10;
  transition: all 0.4s ease;
    margin: auto;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
  pointer-events:none;

   
}   
 
.mascara{
  -webkit-mask-image: url('../media/images/mascara-esquina-diagonal.png');
  mask-image: url('../media/images/mascara-esquina-diagonal.png');
  -webkit-mask-mode: alpha;
  mask-mode: alpha;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position:right bottom;
  mask-position:right bottom;
  
  
  
}

.recuadro {
    position:relative;
    width: calc(100% - 100px);
    height: calc(100% - 100px);
    margin: 50px;
   border: 2px solid #07b88a;
    border-top-left-radius: 20px;
    border-top-right-radius: 43px;
    border-bottom-right-radius: 43px;
    border-bottom-left-radius: 43px;
    background-size:cover;
    background-repeat:no-repeat; 
    
}

.esquinainferior {
    position: absolute;
    width: 150px;
    height: 150px;
    right: 0px;
    bottom: 0px;
    margin: 46px;
}

.str0{
   fill:none !important;
  
}

/* Navegacion */
#nav {
    width: 90%;
    height: 60px;
    position: fixed;
    z-index: 8;
    /*border-bottom: 2px solid #0cb88a;*/
    margin:auto;
  left:0;
  right:0;
}

#navmenu {
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 11;
    background-color: #010d0e;
    opacity: 0.9;
    pointer-events: auto;
    display:none;
}

.flex{
    display: flex !important;
   flex-direction: column; /* Stack children vertically */
    justify-content: center; /* Vertically center */
    align-items: center; 
}

.navmenuitem {
    border: 2px solid #0cb88a;
    border-radius: 150px;
    padding: 18px;
    width: 210px;
    text-align: center;
    font-size: 1em;
    margin: 15px;
    pointer-events: auto !important;
  transition: background 0.3s;
  opacity:0;
  transform:translateY(-15px);
  transition:opacity .4s ease, transform .4s ease;
}

.navmenuitem.show{
  opacity:1;
  transform:translateY(0);
}

.closebutton {
    position: absolute;
    width: 28px;
    height: 28px;
    line-height:28px;
    font-size:.8em;
    padding: 0px;
    right: 4%;
    top: 15px;
}



.navmenuitem:hover {
   background-color:#07B88A;
}

#mainlogo {
    margin-top: 10px;
    width: 110px;
    height: 110px;
    float:left;
}

#menu {
    width: 60px;
    height: 60px;
    float: right;
    padding: 10px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    margin-top: 18px;
}
.menuline{
  width:100%;
  border-bottom: 3px solid #0cb88a;
  height:25%;
}


.tittleslide {
    position: fixed;
    height: 70px;
    width: 200px;
   
    top: 179px;
    right: -116px;
    z-index: 2;
    font-size: 23px;
    padding: 0px 37px;
    line-height: 53px;
    rotate: -90deg;
    border-radius: 30px 30px 0 0;
    text-align: center;
}


@media (max-width: 768px) { 

.tittleslide {
    position: fixed;
    height: 30px;
    width: 140px;

    top: 179px;
    right: -92px;
    z-index: 2;
    font-size: 17px;
    padding: 0px 37px;
    line-height: 30px;
    rotate: -90deg;
    border-radius: 20px 20px 0 0;
    text-align: center;
}
  
}



/* Preloader */
#preloader {
    position: fixed;
    width: 100vw;
    height: 100vh;
    left: 0;
    top: 0;
    z-index: 9;
    background: linear-gradient(135deg,  #4da783 0%, #1a4035 27%, #0d2521 35%,#0b1e1c 40%, #0b1e1c 60%, #0d2521 65%,#1a4035 73%, #4da783 100%);
}

.logoloader {
  width:71px;
  height:71px;
    position: fixed;
    top: 0;
    bottom: 0;
    margin: auto;
    left: 0;
    right: 0;
}

.logoloader path {
    width:100%;
    fill: none;
    stroke: #0cb88a;
    stroke-width: 17px;
}

@keyframes girar {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

#preloader .logoloader {
  animation: girar 2s linear infinite;
}

/* Logo */

.logo-puntoverde {
    height: 100%;
    width: 100%;
}
.logoengrane {
    width: 26%;
    float: right;
}
.logopunto {
    width: 72%;
    height: 19.5%;
    padding-top: 17%;
}
.logoslogan {
    width: 78%;
}


.logoverde {
    width: 76%;
    height: 25%;
}

.logopunto path{
  fill: #ffffff;
}

.logoslogan path{
  fill: #ffffff;
}

.logoverde path{
  fill: #ffffff;
}


.logoengrane path {
    fill: #0cb88a;
}



/*swipers */

 .swiper {
      width: 98%;
      height: 100%;
    }

.swiper-button-next, .swiper-button-prev {
  color: #0cb88a;
  opacity: 1;
  margin-top:100px;
}

.swiper-pagination-bullet-active{
  background: #0cb88a;
}




/* Tipos de contenedores */

.seccion{
  position:relative;
  width:100vw;
  height:200vh;
  background-attachment:fixed;
  background-size:cover;
  background-repeat:no-repeat;
  background-position:center;
 }

.slide{
  position:fixed;
  width:100vw;
  height:100vh;
  z-index:1;
  pointer-events:none;
}

.slide.activa {
  pointer-events: auto;
}

.slidefooter{
  pointer-events:none !important;
}

.fulltextcontent {
    width: 80%;
    margin: 10%;
    float: right;
}









.tituloizquierdo{
    position: absolute;
    margin: auto;
    top: 33%;
    left: 18%;
    font-size: 59px;
    line-height: 50px;

}

.elementoderecho {
    position: absolute;
    width: 350px;
    height: 350px;
    right: 18%;
    top: 0;
    bottom: 0;
    margin: auto;
    padding-top: 50px;
}


@media (max-width: 1360px) { 
.tituloizquierdo {
    top: 30%;
    left: 18%;
    font-size: 45px;
    line-height: 45px;
}
  

  
}


@media (max-width: 768px) { 

.tituloizquierdo {
    top: 20%;
    font-size:28px;
    line-height:30px;
  }
  
  .elementoderecho {
    position: absolute;
    margin:auto;
    width: 61vw;
    height: 61vw;
    left: 0;
    right: 0;
    top: 35px;
    bottom: 0;
}

}

@media (max-height: 700px) and (min-width: 768px)  { 

 .elementoderecho {
    
    width: 250px;
    height: 250px;
    top: 0;
   
}
}



 .swiper-home {
    width: 41%;
    height: 100%;
    text-align: center;
    font-size: 18px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-size: cover;
    background-position: center;
}

.swiper-home-img {
    width: 100%;
    height: 62%;
    position: absolute;
    padding: 20%;
    text-align: left;
    font-size: 32px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    background-size: cover;
    background-position: center;
}

.swiper-home-text {
    position: absolute;
    text-align: left;
    width: 67%;
    top: 50%;
    font-size: 16px;
}

.mission-img{
  height:85vh;
}

@media (max-width: 900px) { 
  .swiper-home {
    width: 80%;
    height: 100%;
    font-size: 18px;
  }
  
  .swiper-home-text {
    position: absolute;
    text-align: left;
    width: 67%;
    top: 50%;
    font-size: 14px;
  }
  
}

@media (max-width: 375px) { 
  
  .swiper-home-img {
   
    font-size: 26px;
  
}
  
  .swiper-home-text {
     top: 45%;
    font-size: 11px;
    left:18%
  }
  
}

@media (max-height: 750px) { 
.swiper-home-text{
    font-size:12px;
}
  
  .swiper-home-img {
    
    padding-top:70px;
    
}
}

.SwipperMaterials {
   width: 100%;
   height: 100%;
}

@keyframes fondoFlotante {
  0% {
    background-position: right top;
  }
  50% {
    background-position: right -40px; /* o ajusta el valor para mayor efecto */
  }
  100% {
    background-position: right 0px;
  }
}






.swiper-materials-img {
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: 64%;
    background-repeat: no-repeat;
    background-position: right 0px;
    right: 0;
    animation: fondoFlotante 4s ease-in-out infinite;
}

.swiper-materials-text {
    font-size: 50px;
    width: 20%;
    position: absolute;
    margin: auto;
    top: 0;
    bottom: 0;
    left: 13%;
    top: 26%;

 
}

.recuadroseccontainer {
    position: absolute;
    left: 5%;
    top: 0;
    bottom: 0;
    margin: auto;
    width: 68%;
    height: 68%;
    z-index:2;
    pointer-events:none;
}

.recuadrosecundario {
    position: absolute;
    width: 100%;
    height: 100%;
    margin: auto;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    pointer-events: none;
    rotate:180deg;
    
} 

.materials-parrafo {
    font-size: 18px;
    font-weight: 400;
    margin-top: 20px;
    color: #727376;
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

.marker {
  animation: blink 1.2s infinite ease-in-out;
  animation-delay: var(--delay);
    width: 10%;
    height: 10%;
    background-image: url("../media/images/marker.png");
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
  
  
}

.mapamarkers {
    background-size: 100% 100%;
    width: 69%;
    height: 50vw;
    animation: none;
}

.graficalabel {
    width: 100%;
    font-size: 20px;
    height: 29px;
    float: left;
    margin-top: 10px;
}

.barragrafica {
    float: left;
    height: 3px;
    background-color: #0cb88a;
   
}

@media (max-width: 1419px) { 
   .recuadroseccontainer {
    left: 10%;
    width: 63%;
    }
   .swiper-materials-text {
   left: 19%;
   top: 32%;
     width:30%;
     font-size: 40px;
   }
   
}





@media (max-width: 768px) { 
   .recuadroseccontainer {
    left: 0;
    right: 0;
    width: 89%;
    top: 12%;
    height: 67%;
}
  
   .swiper-materials-img {
      background-size: 100%;
      background-position: center top;
    }
  
  .swiper-materials-text {
    left: 0;
    right: 0;
    top: 50%;
    width: 51%;
    font-size: 38px;
  
}
  
  .materials-parrafo {
    font-size: 15px;
}
  
  .mapamarkers {
    top:10%;
    width: 100%;
    height: 68vw;
  
}
  
  
   
}

@media (max-width: 390px) { 
   
  
  
  
   .swiper-materials-text {
   
    top: 40%;
      font-size: 32px;
  
    }
  
  .materials-parrafo {
    font-size: 12px;
}

   
}
@media (max-width: 320px) { 
   
  
  .recuadroseccontainer {
   display:none;
   
}
  
    .swiper-materials-text {
   

      font-size: 28px;
  
    }
  
  .graficalabel {
   
    font-size: 16px;
   
}
}

@media (max-height: 750px) { 

.materials-parrafo {
    font-size: 14px;
}
   .recuadroseccontainer {
   display:none;
   
}
  
  .graficalabel {

    font-size: 13px;
    height: 17px;
 
}
  
}





.SwipperPresence {
    margin-top: 10px;
    height: 55%;
    pointer-events: auto;
}

.swiper-presence{
   text-align:center;
   font-size:30px;
}

.subbullet{
  font-size:21px;
}

.bullettext {
    width: 100%;
    position: absolute;
    bottom: 42px;
    font-size: 15px;
}

.presencecircle {
    position: absolute;
    justify-content: center;
    height: 109px;
    width: 67%;
    padding-top: 20px;
    line-height: 29px;
    border: 2px solid #0cb88a;
    border-radius: 115px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    right: 0;
    left: 0;
    margin: auto;
}

@media (max-width: 1024px) { 
   .presencecircle {
     width: 95%;
     
  }
  
  

  
}

@media (max-width: 450px){ 

  
   .presencecircle {
     font-size: 25px;
  }
  
 
  
 
  
}

@media (max-height:680px){
   .bullettext {
   
    font-size:10px;
}
}



@media (max-height:570px){
   .bullettext {
   
    display: none;
}
  
  .SwipperPresence {
   
    height: 45%;
   
}
}


.vectordiv{
  width:100%;
  height:100%;
  position:absolute;
  background-image: url('../media/svg/fondo.svg');
  background-size: 200px; 
  background-position: center;
  background-repeat:repeat;
}

.vectordiv2 {
    filter: opacity(0.4) grayscale(1);
}






   
.recuadrotercontainer {
    position: absolute;
    left: 7%;
    top: 0;
    bottom: 0;
    margin: auto;
    width: 50vw;
    min-width:555px;
    height: 95%;
    z-index: 2;
    pointer-events: none;
}

.ternewheight{
   height: 100%;
}

.righttec{
   right:7%;
   left:unset;
}

.recuadroterciario {
    position: absolute;
    width: 100%;
    height: 100%;
    margin: auto;
    right:0;
    top: 0;
    bottom: 0;
    bottom:0;
    pointer-events: none;
  

   
}
.recuadrotexturatitle {
    width: 85%;
    height: 100%;
    padding-left: 6vw;
    padding-top: 100px;
    font-size: 35px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.recuadroterciario .recuadro {
  border: #555 !important;
  background-image: url('../media/images/square5.jpg') !important;

}

.recuadroterciario .recuadro2 {
  border: #555 !important;
  background-image: url('../media/images/square1.jpg') !important;
}

.recuadroterciario .recuadro3 {
  border: #555 !important;
  background-image: url('../media/images/square2.jpg') !important;

}

.recuadroterciario .recuadro4 {
  border: #555 !important;
  background-image: url('../media/images/square3.jpg') !important;

}

.recuadroterciario .recuadro5 {
  border: #555 !important;
  background-image: url('../media/images/square4.jpg') !important;
 
}

.recuadroterciario .str0 {
  stroke: transparent !important;
  
}



@media (max-width: 768px)   { 

.recuadrotercontainer {
   
    left: -1%;
    top: 50px;
    bottom: 0;
    margin: auto;
    width: 103vw;
    min-width: unset;
    height: 98%;
    
}
  
  .recuadrotexturatitle {
    width: 88%;
    height: 100%;
    padding-left: 12vw;
    padding-top: 100px;
    font-size: 27px;
}
  
}

@media (max-width: 470px) { 

.recuadrotercontainer {
    left: -7%;  
    width: 111vw;
 
    
}
  
}


@media (max-width: 375px) { 

.recuadrotexturatitle {
    width: 88%;
    height: 100%;
    padding-left: 12vw;
    padding-top: 30%;
    font-size: 22px;
}
  
}

@media (max-height: 800px){

   .recuadrotexturatitle {
    width: 75%;
    height: 100%;
    font-size: 20px;
}
  
  .subbullet{
    font-size:18px;
  }
  
  .presencecircle{
    font-size:25px;
  }
  
 
  




}



.recuadrofondolisotitle {
    position: absolute;
    width: 29%;
    min-width: 350px;
    height: 55vh;
    font-size: 35px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    line-height: 30px;
    margin: auto;
    top: -29px;
    bottom: 0;
    left: 17%;
    text-align: right;
}

.bigelement path {
    stroke: #0fa67e;
    stroke-width: 2px;
    fill: transparent;
    opacity: 0.5;
}

.bigelement {
    position: absolute;
    width: 135vh;
    margin: auto;
    right: -10%;
    top: -10vh;
  animation: girar 120s linear infinite;
 
}







@media (max-width: 768px) { 

.recuadrofondolisotitle {
    width: 62%;
  min-width: 62%;
    height: 54vh;
    font-size: 35px;
    left: 17%;
}
   

  
}


@media (max-width: 375px) { 
  
  .recuadrofondolisotitle {
    width: 60%;
    height: 54vh;
    font-size: 25px;
    left: 18%;
    line-height: 23px;
}

  
}




.supertitle {
    position: absolute;
    width: 70%;
    font-size: 40px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: auto;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
} 

.logosrewards{
  width:85%;
}

.mapslide{
  padding:0px;
}

.maptext {
    position: relative;
    background-color: #0b1e1c;
    padding: 26px;
    padding-left: 12%;
    width: 30%;
    top: unset;
}
.maptitle {
    position: relative;
    background-color: black;
    padding: 12%;
    height: 50px;
}
  
  


@media (max-width: 768px) { 
  .supertitle {
    font-size: 25px;
    width:60%;
    line-height: 22px;
  }
  
  .logosrewards{
  width:130%;
    margin-left:-15%;
}
}

@media (max-width: 450px) { 
.maptext {
    position: relative;
    padding: 26px;
    padding-left: 9%;
    width:50%;
}
  
  .maptitle {
   
    padding: 20%;
    padding-bottom: 6%;
    font-size: 19px;
}
  
  .supertitle {
    font-size: 15px;
  
  }
}

@keyframes heartbeat-soft {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
}

.iconocentrado{
  width:30%;
  animation: heartbeat-soft 2s ease-in-out infinite;
  transform-origin: center;
}


.backgroundaboutus{
  position:absolute;
  width:100%;
  height:100%;
  background-image:url('../media/images/material4.png');
  background-size:80%;
  background-position:bottom right;
  background-repeat:no-repeat;
  filter: brightness(0.85);

}



   
  /* ---- Footer ------ */ 
.engranefooter {
    width: 75px;
    position: relative;
    float: right;
    margin: 70px;
}

.ligasfooter {
    position: absolute;
    bottom: 0;
    margin: 51px 70px;
    line-height: 36px;
    color: #04b88a;
}



.followicon {
    width: 24px;
    float: left;
    margin-right: 10px;
}

.disclaimer {
    position: absolute;
    text-align: right;
    font-size: 10px;
    bottom: 0;
    right: 0;
    margin: 60px 70px;
    line-height: 14px;
}

.followicon path {
   fill:#04b88a;
}


@media (max-width: 768px) { 

.engranefooter {
    width: 75px;
    margin: 33px;
}
  
  .ligasfooter {
    font-size:15px;
    margin: 51px 51px;
    line-height: 36px;
}
  
  .followicon {
    width: 24px;
    margin-right: 10px;
}
  
  .disclaimer {
    margin: 60px 36px;
   
}
  
  
}
   








/* Home */
#home1{
  background-image:url('../media/images/fondo1.jpg');

}

#pestana1{
  background-color:transparent;
  border:none;
}

#home2{
  background: linear-gradient(135deg,  #4da783 0%, #1a4035 27%, #0d2521 35%,#0b1e1c 40%, #0b1e1c 60%, #0d2521 65%,#1a4035 73%, #4da783 100%);


}

#pestana2 {
    background-color: rgb(13, 39, 34, 0.7);
    border: 2px solid #07b88a;
    border-bottom: none;
}

#home3{
  background-image:url('../media/images/fondo2.jpg');

}
#pestana3 {
    background-color: transparent;
    border: 2px solid #07b88a;
    border-bottom: none;
}

#pestana3 #t1 {
  color: #000;
}
#pestana3 #t2 {
  color: #000;
}

#home4{
  background: linear-gradient(135deg,  #ced0d0 0%, #edebeb 35%, #ccd3d3 100%);


}
#pestana4 {
    background-color: transparent;
    background-image: url('../media/images/square5.jpg');
    background-size: cover;
    border: none;
    border-bottom: none;
}

#home5{
 background-image:url('../media/images/fondo7.jpg');


}
#pestana5{
  background-color: transparent;
    border: 2px solid #07b88a;
    border-bottom: none;
  
}


#home6{
  background: linear-gradient(135deg,  #4da783 0%, #1a4035 27%, #0d2521 35%,#0b1e1c 40%, #0b1e1c 60%, #0d2521 65%,#1a4035 73%, #4da783 100%);
  
}


}

#pestana6{
  background-color:transparent;
  border: none;
  
}

#home7{
 background-image:url('../media/images/fondo8.jpg');


}

#pestana7{
  background-color: transparent;
    border: 2px solid #07b88a;
    border-bottom: none;
  
}

#home8{
 background-color: #013233;
 height:80vh;

}

#pestana8{
  background-color: transparent;
    border: none;
    border-bottom: none;
  
}

#whatwedo1{
  background: linear-gradient(90deg,rgba(0, 0, 0, 1) 0%, rgba(14, 41, 45, 1) 70%);
}

#whatwedo2{
background: linear-gradient(135deg,rgba(114, 115, 118, 1) 0%, rgba(54, 54, 54, 1) 24%, rgba(33, 32, 32, 1) 51%, rgba(54, 54, 54, 1) 73%, rgba(84, 85, 89, 1) 100%);
}

#whatwedo3{
  background-image:url('../media/images/fondo3.jpg');
  brightness(0.85)

}

#whatwedo4{
  background-image:url('../media/images/fondo4.jpg');
  brightness(0.85)

}

#whatwedo5{
  background-image:url('../media/images/fondo5.jpg');
  brightness(0.85)

}

#whatwedo6{
  background-image:url('../media/images/fondo6.jpg');
  brightness(0.85)

}


#pestana9, #pestana10, #pestana11, #pestana12, #pestana14, #pestana15, #pestana16, #pestana17, #pestana18 {
  background-color: transparent;
    border: 2px solid #07b88a;
    border-bottom: none;
    background-color: rgb(0, 0, 0, 0.2);
 
}

#aboutus1{
  background-image:url('../media/images/fondo9.jpg');
  brightness(0.85);

}

#contact1{
  background-image:url('../media/images/fondo12.jpg');
  

}

#aboutus2{
  background-image:url('../media/images/fondo11.jpg');

}
#aboutus3{
  background-color:#363738;

}


#pestana13 {
    background-color: transparent;
    border: 2px solid #07b88a;
    border-bottom: none;
    background-color: rgb(0, 0, 0, 0.2);
}








/* ANIMACIONES */


/* Animaciones generales */

@keyframes fadeSlideIn {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.elemento-animado {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.fade-in {
  opacity: 1;
  transform: translateY(0);
}


/* ANIMACIÓN 1 */

.animacion1-estilos .recuadrocontainer {
    width: 85%;
    height: 60%;
  min-height:325px;
    rotate: 0deg;
    left: 0;
    right: 0;
}
.animacion1-estilos .recuadro {
  border: 2px solid #07b88a;
  background-color: transparent;
  background-image: none;
}
.animacion1-estilos .str0 {
  stroke-width: 24px;
  stroke: #07b88a;
}
.animacion1-estilos .esquinainferior {
  margin: 46px;
}



@media (max-width: 768px) { 


.animacion1-estilos .recuadrocontainer {
    width: 100%;
    height: 85%;
}


}


/* ANIMACIÓN 2 */

.animacion2-estilos .recuadrocontainer {
    width: 40%;
    height: 65%;
    rotate: 0deg;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}
.animacion2-estilos .recuadro {
  border: 2px solid #07b88a;
  background-color: transparent;
  background-image: url('transparent');
}
.animacion2-estilos .str0 {
  stroke-width: 24px;
  stroke: #07b88a;
}
.animacion2-estilos .esquinainferior {
  margin: 46px;
}

@media (max-width: 900px) { 

.animacion2-estilos .recuadrocontainer {
    width: 80%;
   
}
  
}



@media (max-width: 768px) { 

.animacion2-estilos .recuadrocontainer {
    width: 85%;
  height: 70%;

}
  
}

/* ANIMACIÓN 3 */

.animacion3-estilos .recuadrocontainer {
    width: 43vw;
    min-width: 512px;
    height: 90vh;
    rotate: 180deg;
    left: 9%;
    right: unset;
}
.animacion3-estilos .recuadro {
  border: 2px solid #07b88a;
  background-color: transparent;
  background-image: url('transparent');
}
.animacion3-estilos .str0 {
  stroke-width: 24px;
  stroke: #07b88a;
}
.animacion3-estilos .esquinainferior {
  margin: 46px;
}


@media (max-width: 768px) { 

.animacion3-estilos .recuadrocontainer {
    width: 95vw;
    min-width: 95vw;
    height: 87vh;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}
  
}


/* ANIMACIÓN 4 */

.animacion4-estilos .recuadrocontainer {
    width: 75%;
    height: 75%;
    rotate: 0deg;
    left: 45px;
    right: unset;
}
.animacion4-estilos .recuadro {
  border: 2px solid #07b88a;
  background-color: transparent;
  background-image: url('transparent');
}
.animacion4-estilos .str0 {
  stroke-width: 15px;
  stroke: #07b88a;
}
.animacion4-estilos .esquinainferior {
  margin: 46px;
}

@media (max-width: 768px) { 

.animacion4-estilos .recuadrocontainer {
        width: 100vw;
        height: 80vh;
        rotate: 0deg;
        left: 0;
        right: 0;
        bottom: 0;
        top: unset;
}
  
}

/* ANIMACIÓN 5 */

.animacion5-estilos .recuadrocontainer {
    width: 180%;
    height: 180%;
    rotate: 0deg;
    left: -25%;
    top: -25%;
}
.animacion5-estilos .recuadro {
  border: 2px solid #fff;
  background-color: transparent;
  background-image: url('transparent');
}
.animacion5-estilos .str0 {
  stroke-width: 15px;
  stroke: #fff;
}
.animacion5-estilos .esquinainferior {
  margin: 46px;
}



/* ANIMACIÓN 6 */

.animacion6-estilos .recuadrocontainer {
    width: 45vw;
    min-width: 507px;
    height: 87vh;
    rotate: 180deg;
    left: 9%;
    right: unset;
    z-index: 1;
}
.animacion6-estilos .recuadro {
  border: 2px solid #07b88a;
  background-color: #07b88a;
  background-image: url('transparent');
}
.animacion6-estilos .str0 {
  stroke-width: 24px;
  stroke: #07b88a;
}
.animacion6-estilos .esquinainferior {
  margin: 46px;
}


@media (max-width: 768px) { 

.animacion6-estilos .recuadrocontainer {
    width: 95vw;
  min-width: 95vw;
    height: 87vh;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}
  
}

/* ANIMACIÓN 7 */

.animacion7-estilos .recuadrocontainer {
    width: 43vw;
   min-width: 512px;
    height: 90vh;
    rotate: 180deg;
    right: unset;
    left: 45%;
}
.animacion7-estilos .recuadro {
  border: 2px solid #07b88a;
  background-color: transparent;
  background-image: url('transparent');
}
.animacion7-estilos .str0 {
  stroke-width: 24px;
  stroke: #07b88a;
}
.animacion7-estilos .esquinainferior {
  margin: 46px;
}


@media (max-width: 768px) { 

.animacion7-estilos .recuadrocontainer {
    width: 95vw;
  min-width: 95vw;
    height: 87vh;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}
  
}



/* ANIMACIÓN 8 */

.animacion8-estilos .recuadrocontainer {
    width: 85%;
    height: 60%;
    rotate: 0deg;
    left: 0;
    right: 0;
    z-index:1;
}
.animacion8-estilos .recuadro {
  border: 2px solid #07b88a;
   background-color: rgb(0, 0, 0, 0.3);
   brightness(0.85)
   background-image: none;

}
.animacion8-estilos .str0 {
  stroke-width: 24px;
  stroke: #07b88a;
}
.animacion8-estilos .esquinainferior {
  margin: 46px;
}



@media (max-width: 768px) { 


.animacion8-estilos .recuadrocontainer {
    width: 100%;
    height: 85%;
}


}

/* ANIMACIÓN 9 */

.animacion9-estilos .recuadrocontainer {
    width: 40%;
    height: 85%;
    rotate: 0deg;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}
.animacion9-estilos .recuadro {
  border: 2px solid #07b88a;
  background-color: transparent;
  background-image: url('transparent');
}
.animacion9-estilos .str0 {
  stroke-width: 24px;
  stroke: #07b88a;
}
.animacion2-estilos .esquinainferior {
  margin: 46px;
}

@media (max-width: 900px) { 

.animacion9-estilos .recuadrocontainer {
    width: 80%;
   
}
  
}



@media (max-width: 768px) { 

.animacion9-estilos .recuadrocontainer {
    width: 85%;


}
}
  
  @media (max-width: 358px) { 

.animacion9-estilos .recuadrocontainer {
    width: 95%;
    height: 95%;


}
  
}