@import url('https://fonts.googleapis.com/css2?family=Onest:wght@100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

html{width:100%;	height:100%;}

body{width:100%;height:100%;font-family: "Poppins", sans-serif;}


* { margin: 0px;padding: 0px; outline: 0;}
iframe { display:block; border:none; }

.os-animation{opacity:0; }  
.os-animation.animated{opacity: 1.5; }  
 
 *:focus {     outline: none; } 

h1,h2,h3,h4,h5,h6{ display:inline !important;}

#whats{ width: 68px; height: 69px; right: 20px; bottom: 20px; position: fixed; z-index: 9999;}

#elheader0{width:100%; height:5px; top:0px; left:0; position:fixed; z-index:1; background-color: #FFFFFF; z-index:9998;}

#elheader{ width:100%; height:102px; top:5px; left:0; position:fixed;transition:all 1s;-moz-transition:all 1s;-webkit-transition:all 1s;-o-transition:all 1s; z-index:9998; background: url("../imagenes/fondo.jpg") no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover;  -o-background-size: cover;  background-size: cover; text-align: center;}

.invi{ width: 100%; height: 102px;}

#home{width:100%; text-align:center; }

.smooth{ font-size:18px;color:#ffffff;font-weight:400; text-decoration: none; -moz-transition:all .6s;-webkit-transition:all .6s;-o-transition:all .6s; font-family: "Onest", sans-serif;}
.smooth:hover{color:#2aafe5;}

.smooth2{ font-size:18px;color:#ffffff;font-weight:400; text-decoration: none; -moz-transition:all .6s;-webkit-transition:all .6s;-o-transition:all .6s; font-family: "Onest", sans-serif;}
.smooth2:hover{color:#2aafe5;}

.redes{opacity:1;transition:all .6s;-moz-transition:all .6s;-webkit-transition:all .6s;-o-transition:all .6s; cursor:pointer;}
.redes:hover{ opacity: .5;}

.texto1{color:#ffffff; font-size:50px; line-height: 120%; font-weight:400; text-decoration:none;font-optical-sizing: auto;}
.texto2{color:#2aafe5; font-size:50px; line-height: 120%; font-weight:700; text-decoration:none;font-optical-sizing: auto;}
.texto3{color:#2aafe5; font-size:18px; line-height: 120%; font-weight:500; text-decoration:none;font-optical-sizing: auto;font-family: "Onest", sans-serif;}
.texto4{color:#0a1642; font-size:60px; line-height: 100%; font-weight:700; text-decoration:none;font-optical-sizing: auto;font-family: "Onest", sans-serif;}
.texto4a{color:#39afe2; font-size:60px; line-height: 100%; font-weight:700; text-decoration:none;font-optical-sizing: auto;font-family: "Onest", sans-serif;}
.texto4b{color:#FFFFFF; font-size:60px; line-height: 100%; font-weight:700; text-decoration:none;font-optical-sizing: auto;font-family: "Onest", sans-serif;}
.texto5{color:#5c6e94; font-size:18px; line-height: 140%; font-weight:400; text-decoration:none;font-optical-sizing: auto;font-family: "Onest", sans-serif;}
.texto5a{color:#FFFFFF; font-size:18px; line-height: 140%; font-weight:400; text-decoration:none;font-optical-sizing: auto;font-family: "Onest", sans-serif;}
.texto6{color:#0a1642; font-size:18px; line-height: 140%; font-weight:700; text-decoration:none;font-optical-sizing: auto;font-family: "Onest", sans-serif;}
.texto7{color:#ffffff; font-size:18px; line-height: 140%; font-weight:500; text-decoration:none;font-optical-sizing: auto;font-family: "Onest", sans-serif;}
.texto8{color:#ffffff; font-size:55px; line-height: 100%; font-weight:700; text-decoration:none;font-optical-sizing: auto;font-family: "Onest", sans-serif;}
.texto9{color:#39afe2; font-size:55px; line-height: 100%; font-weight:700; text-decoration:none;font-optical-sizing: auto;font-family: "Onest", sans-serif;}
.texto10{color:#0a1642; font-size:27px; line-height: 100%; font-weight:700; text-decoration:none;font-optical-sizing: auto;font-family: "Onest", sans-serif;}
.texto10a{color:#0a1642; font-size:27px; line-height: 100%; font-weight:700; text-decoration:none;font-optical-sizing: auto;font-family: "Onest", sans-serif;}
.texto11{color:#5c6e94; font-size:17px; line-height: 180%; font-weight:400; text-decoration:none;font-optical-sizing: auto;font-family: "Onest", sans-serif;}
.texto11a{color:#5c6e94; font-size:15px; line-height: 180%; font-weight:400; text-decoration:none;font-optical-sizing: auto;font-family: "Onest", sans-serif;}
.texto12{color:#5c6e94; font-size:15px; line-height: 140%; font-weight:400; text-decoration:none;font-optical-sizing: auto;font-family: "Onest", sans-serif;}
.texto13{color:#0a1642; font-size:22px; line-height: 160%; font-weight:700; text-decoration:none;font-optical-sizing: auto;font-family: "Onest", sans-serif;}
.texto14{color:#0a1642; font-size:40px; line-height: 100%; font-weight:700; text-decoration:none;font-optical-sizing: auto;font-family: "Onest", sans-serif;}
.texto14a{color:#39afe2; font-size:40px; line-height: 100%; font-weight:700; text-decoration:none;font-optical-sizing: auto;font-family: "Onest", sans-serif;}


#arriba, #arriba1,#arriba2,#arriba3,#arriba3a,#arriba4,#arriba0{display:inline-block;vertical-align:top;}
#arriba{ width:1400px;  vertical-align:middle; text-align:center; background: url("../imagenes/fondo2.jpg") no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover;  -o-background-size: cover;  background-size: cover;}
#arriba1{width:488px; height: 102px; margin-left:-4px; text-align:center; background-color: #FFFFFF;   }
#arriba2{width:612px; height: 100px; margin-left:-4px;text-align:center; }
#arriba3{width:300px; margin-left:-4px; margin-top: 12px; text-align:right; }
#arriba4,#arriba0,#arriba3a{ display: none;}

#frasehome{width:100%; text-align:center; background-color: #010e42; }

.infotext{ display: inline-block; width: 90%; max-width: 1500px; text-align: center;}

#nosotros{width:100%; text-align:center; background-color: #ffffff; }

#somos, #somos1,#somos2,#somos3,#somos4,#somos5{display:inline-block;vertical-align:top;}
#somos{ width:1400px;  vertical-align:middle; text-align:center; }
#somos1{width:100%; margin-left:-4px; text-align:left; }
#somos2{width:50%; margin-left:-4px;text-align:left; }
#somos3{width:50%; margin-left:-4px; text-align:right; margin-top: 60px; }
#somos4{width:50%; margin-left:-4px;text-align:left; }
#somos5{width:50%; margin-left:-4px; text-align:left; }

.infotext2{ display: inline-block; width: 95%; max-width: 1500px; text-align: left;}
.infotext3{ display: inline-block; width: 95%; margin-left: 5%; max-width: 1500px; text-align: left;}
.infotext4{ display: inline-block; width: 100%;  max-width: 1500px; text-align: left;}

.lima{ width: 100%;}
.lalis{ width: 100%; }

.tarjeta-azul{border-radius:  55px 20px 55px 20px;-webkit-border-radius: 55px 20px 55px 20px;-moz-border-radius: 55px 20px 55px 20px;background-color: #010e42; width: 100%; text-align: center; height: 550px; }

.lima1{border-radius:  55px 20px 55px 20px;-webkit-border-radius: 55px 20px 55px 20px;-moz-border-radius: 55px 20px 55px 20px; width: 100%; text-align: center; height: 550px; background: url("../imagenes/ima1.jpg") no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover;  -o-background-size: cover;  background-size: cover;}


#productos{width:100%; text-align:center; background-color: #e8eff5; }

#prodos, #prodos1,#prodos2,#prodos3,#prodos4,#prodos5{display:inline-block;vertical-align:top;}
#prodos{ width:1400px;  vertical-align:middle; text-align:center; }
#prodos1{width:100%; margin-left:-4px; text-align:left; }
#prodos2{width:50%; margin-left:-4px;text-align:left; }
#prodos3{width:50%; margin-left:-4px; text-align:right; margin-top: 60px; }
#prodos4{width:50%; margin-left:-4px;text-align:left; margin-bottom: 40px; }
#prodos5{width:25%; margin-left:-4px;text-align:center; margin-bottom: 20px;  }


#separador{width:100%; height: 700px; background: url("../imagenes/separador1.jpg") no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover;  -o-background-size: cover;  background-size: cover;}


#brinda{ width: 100%; text-align: center;}
#brindas{ width: 100%; text-align: center; background: url("../imagenes/fondo4.jpg") repeat-x center center; -webkit-background-size: cover; -moz-background-size: cover;  -o-background-size: cover;  background-size: cover;}


#brindamos, #brindamos1,#brindamos2{display:inline-block;vertical-align:top;}
#brindamos{ width:1400px;  vertical-align:middle; margin-top: -160px; text-align:center; background: url("../imagenes/fondo3.jpg") no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover;  -o-background-size: cover;  background-size: cover; border-radius:  55px 20px 55px 20px;-webkit-border-radius: 55px 20px 55px 20px;-moz-border-radius: 55px 20px 55px 20px;}
#brindamos1{width:90%; margin-left:0px;text-align:center; }


#brindamoss, #brindamoss1,#brindamoss2{display:inline-block;vertical-align:top;}
#brindamoss{ width:1400px;  vertical-align:middle; text-align:center; background: url("../imagenes/fondo3.jpg") no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover;  -o-background-size: cover;  background-size: cover; border-radius:  55px 20px 55px 20px;-webkit-border-radius: 55px 20px 55px 20px;-moz-border-radius: 55px 20px 55px 20px;}
#brindamoss1{width:90%; margin-left:0px;text-align:center; }

#brindis, #brindis1,#brindis2{display:inline-block;vertical-align:top;}
#brindis{ width:100%;  vertical-align:middle; text-align:center; }
#brindis1{width:60%; margin-left:-4px;text-align:left; }
#brindis2{width:40%; margin-left:-4px;text-align:right; }


#servicios{width:100%; text-align:center;}

#loservi, #loservi1,#loservi2{display:inline-block;vertical-align:top;}
#loservi{ width:1400px;   vertical-align:middle; text-align:center; }
#loservi1{width:33.3%; margin-left:-4px;text-align:center; margin-bottom:60px;  }


.servi1{border-radius:  55px 20px 55px 20px;-webkit-border-radius: 55px 20px 55px 20px;-moz-border-radius: 55px 20px 55px 20px; width: 100%; text-align: center; height: 500px; background: url("../imagenes/ser1.jpg") no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover;  -o-background-size: cover;  background-size: cover; display: inline-block;}

.servi2{border-radius:  55px 20px 55px 20px;-webkit-border-radius: 55px 20px 55px 20px;-moz-border-radius: 55px 20px 55px 20px; width: 100%; text-align: center; height: 500px; background: url("../imagenes/ser2.jpg") no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover;  -o-background-size: cover;  background-size: cover; display: inline-block;}

.servi3{border-radius:  55px 20px 55px 20px;-webkit-border-radius: 55px 20px 55px 20px;-moz-border-radius: 55px 20px 55px 20px; width: 100%; text-align: center; height: 500px; background: url("../imagenes/ser3.jpg") no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover;  -o-background-size: cover;  background-size: cover; display: inline-block;}

.logris{background-color: #e8eff5;border-radius:  20px 55px 20px 55px;-webkit-border-radius: 20px 55px 20px 55px;-moz-border-radius: 20px 55px 20px 55px; width: 100%; text-align: center; height: 110px;}


#preduslide{ width: 100%; height: 700px;}
@media screen and (max-width:1600px){#preduslide{height:680px;}}
@media screen and (max-width:1280px){#preduslide{height:600px;}}
@media screen and (max-width:1024px){#preduslide{height:540px;}}
@media screen and (max-width:900px){#preduslide{height:480px;}}
@media screen and (max-width:600px){#preduslide{height:380px;}}
@media screen and (max-width:420px){#preduslide{height:320px;}}


#losproductos{ width:100%; text-align: center;}

#lospros, #lospros1,#lospros2{display:inline-block;vertical-align:top;}
#lospros{ width:1400px;  vertical-align:middle; text-align:center; margin-top: -70px; }
#lospros1{width:25%; margin-left:-4px;text-align:center; }

.infotext5{ width: 85%; max-width:300px; text-align: center; display: inline-block;}

#footer{ width:100%; text-align: center; background-color: #000e41;}

#abajo, #abajo1,#abajo2,#abajo3,#abajo3b,#abajo3c,#abajo4,#abajo5,#abajo6{display:inline-block;vertical-align:top;}
#abajo{ width:1400px;  vertical-align:middle; text-align:center;  z-index:9999;}
#abajo1{width:50%; margin-left:-4px; text-align:left; }
#abajo2{width:50%; margin-left:-4px; text-align:right; margin-top: 20px; }
#abajo3{width:660px; margin-left:-4px; text-align:left; margin-top: 40px; }
#abajo3b{width:600px; margin-left:-4px; text-align:left; margin-top: 40px; }
#abajo3c{width:140px; margin-left:-4px; text-align:left; margin-top: 40px; }
#abajo4{width:100%; height: 1px; margin-left:0px; text-align:center; background-color: #1e2d66; }
#abajo5{width:100%; margin-left:0px; text-align:right;}
#abajo6{width:100%; margin-left:0px; text-align:center;}


.lapleca{ height: 90px;}
.lata{ display: inline-block; width: 600px;}



#cuadro{ width:100%; text-align: center;  }

#contacto{ width:100%; height: 550px; text-align: center;  background: url("../imagenes/conacto.jpg") no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover;  -o-background-size: cover;  background-size: cover;}

#contactame, #contactame1,#contactame2{display:inline-block;vertical-align:top;}
#contactame{ width:1400px;  vertical-align:middle; text-align:center; margin-top: 160px;  }
#contactame1{width:1063px; margin-left:-4px; text-align:left; margin-top: 50px; }
#contactame2{width:337px; margin-left:-4px; text-align:right; }

#datos, #datos1{display:inline-block;vertical-align:top;}
#datos{ width:100%;  vertical-align:middle; text-align:center; }
#datos1{width:50%; margin-left:-4px; text-align:left; }

.limacontacto{ width: 100%; max-width: 337px; display: block;}

.infotext6{ width: 90%; max-width: 560px; display: inline-block; text-align: left;}
.infotext6a{ width: 90%; max-width: 560px; display: inline-block; text-align: left;}

.lalis2{ width: 100%; max-width: 711px; height: 1px; background-color:#5c6e94 ;}
.lalis3{ width: 90%; max-width: 560px; height: 1px; background-color:#5c6e94; display: inline-block}
    
.redes-texto{  display:flex;  align-items:center;   gap:10px;  }


#llenado, #llenado1,#llenado2{display:inline-block;vertical-align:top;}
#llenado{ width:1400px;  vertical-align:middle; text-align:center;  }
#llenado1{width:50%; margin-left:-4px; text-align:left; }
#llenado2{width:50%; margin-left:-4px; text-align:left; }


@media(max-width:700px){
  .grid-form{
    grid-template-columns:1fr;
  }

  .acciones{
    flex-direction:column;
    align-items:center; /* centra todo */
    text-align:center;
  }

  .btn-enviar{
    justify-content:center;
  }
}



::placeholder{color:#0e0e11;}

.forma2{text-align:left;HEIGHT:50px;width:100%;border:1; border:0; font-size:15PX;font-weight:400; background-color: transparent;  font-family: 'Poppins', sans-serif; color:#0e0e11;
border-top: 0px solid red;
  border-right: 0px solid red;
  border-bottom: 1px solid #cdcdcd;
  border-left: 0px solid red; opacity:1;
}

.boto5{ text-align:center; font-size:14px; line-height: 50px; text-transform: uppercase; width: 90%; max-width: 1050px; height: 50px; border:1px solid #0e0e11;color:#0e0e11; background-color: transparent; text-decoration:none;-moz-transition:all .6s;-webkit-transition:all .6s;-o-transition:all .6s; font-weight:400; cursor: pointer; display: inline-block;-webkit-border-radius: 100px;-moz-border-radius: 100px;border-radius: 100px;}
.boto5:hover{border:1px solid #f9711f;}

@media screen and (max-width:1420px)
 {
#llenado{ width:1200px;  }     
     
#contactame{ width:1200px; }
#contactame1{width:863px; }     
     
#lospros{ width:1200px;  }
     
#abajo{ width:1200px;}
#abajo3{width:560px;}
#abajo3b{width:500px;}
    
     
#loservi{ width:1200px; }
.servi1,.servi2,.servi3{height: 470px;}  
     
#brindamos,#brindamoss{ width:1200px;}     
     
.texto8,.texto9{font-size:45px;}

#somos{ width:1200px;  vertical-align:middle; text-align:center; }
#prodos{ width:1200px;  vertical-align:middle; text-align:center; } 
     
     
.tarjeta-azul,.lima1{height:500px; }

     
#arriba{ width:1300px;}
#arriba1{width:488px; }
#arriba2{width:612px;}
#arriba3{width:200px; }
}


@media screen and (max-width:1320px)
 {
#separador{ height: 600px;}  
     
#arriba{ width:1100px;}
#arriba1{width:488px; }
#arriba2{width:580px;}
#arriba3{ display: none;}
#arriba3a{width:32px; height: 20px; margin-left:-4px; margin-top: 38px; text-align:right; display: inline-block;   }
}


@media screen and (max-width:1220px)
 {
#llenado{ width:1100px;  }       
     
#contactame{ width:1000px; }
#contactame1{width:663px; }     
     
#lospros{ width:1100px;}
     
#abajo{ width:1000px;}
#abajo1{width:30%;}
#abajo2{width:70%; }
#abajo3{width:460px; }
#abajo3b{width:400px;}     
     
#loservi{ width:1000px; }
 .servi1,.servi2,.servi3{height: 420px;} 
.texto10{font-size:22px;}  
     
#brindamos,#brindamoss{ width:1100px;}        
     
#prodos{ width:1000px;  vertical-align:middle; text-align:center; }      
#prodos4{width:100%; margin-left:0px;text-align:center; margin-bottom: 0; }
#prodos5{width:50%; margin-left:-4px;text-align:center;  }
     
.texto4,.texto4a,.texto4b{font-size:56px;}   
.texto8,.texto9{font-size:40px;}

#somos{ width:1000px;  vertical-align:middle; text-align:center; }
#somos3{width:50%; margin-left:-4px; text-align:right; }
 
.tarjeta-azul,.lima1{height:500px; }    
}


@media screen and (max-width:1120px)
 {
#datos{ width: 90%;}
#datos1{width:100%; margin-left:0px; text-align:center; }     
     
 #llenado{ width:90%;  vertical-align:middle; text-align:center; }
#llenado1,#llenado2{width:100%; margin-left:0px; text-align:center; }     
     
  .redes-texto{
    justify-content:center;
    width:100%;
  }
     
     
#lospros{ width:90%; }
#lospros1{width:50%; }     
     
#brindamos,#brindamoss{ width:90%; }

#brindis{ width:100%;  vertical-align:middle; text-align:center; }
#brindis1{width:100%; margin-left:0px;text-align:left; }
#brindis2{width:100%; margin-left:0px;text-align:left; padding-top: 50px; }
}


@media screen and (max-width:1020px)
 {
#contactame{ width:90%; }
#contactame1{width:100%; margin-left: 0;  text-align: left; }       
#contactame2{ display: none;}  
     
 .infotext6,.lalis2{ width: 100%; max-width: 1020px; text-align: center;}
     
     
#abajo{ width:90%;  vertical-align:middle; text-align:center;  z-index:9999;}
#abajo1{width:100%; margin-left:0px; text-align:center; }
#abajo2{width:100%; margin-left:0px; text-align:center; margin-top: 20px; }
#abajo3{width:100%; margin-left:0px; text-align:center; margin-top: 40px; }
#abajo3b{width:100%; margin-left:0px; text-align:center; margin-top: 40px; }
#abajo3c{width:100%; margin-left:0px; text-align:center; margin-top: 40px; }
#abajo5{width:100%; margin-left:0px; text-align:center; margin-bottom: 40px}  
     
     
#loservi{ width:400px; }
#loservi1{width:100%; margin-left:0px;text-align:center;}
     
 .servi1,.servi2,.servi3{height: 420px;} 
.texto10{font-size:25px;}      
     
#separador{ height:550px;}
     
     
.infotext2{width: 100%; max-width: 1500px; text-align: center;}
.infotext3{width: 100%; margin-left:0; max-width: 1500px; text-align: center;}
.infotext4{width: 100%;  max-width: 1500px; text-align: center;}

#prodos{ width:90%;  vertical-align:middle; text-align:center; }
#prodos1{width:100%; margin-left:0px; text-align:left; }
#prodos2{width:100%; margin-left:0px;text-align:left; }
#prodos3{width:100%; margin-left:0px; text-align:right; margin-top: 40px; }
#prodos4{width:100%; margin-left:0px;text-align:center; margin-bottom: 0; }
#prodos5{width:50%; margin-left:-4px;text-align:center; margin-bottom: 20px; }     
     
     
#somos{ width:90%;  vertical-align:middle; text-align:center; }
#somos1{width:100%; margin-left:0px; text-align:left; }
#somos2{width:100%; margin-left:0px;text-align:left; }
#somos3{width:100%; margin-left:0px; text-align:right; margin-top: 40px; }
#somos4{width:100%; margin-left:0px;text-align:left; }
#somos5{width:100%; margin-left:0px; text-align:left; }

.tarjeta-azul,.lima1{height:450px; }
     
}


@media screen and (max-width:820px)
{
   
    
#lospros1{width:100%; margin-left: 0; margin-bottom: 30px; }    
.infotext5{ width: 90%; max-width:450px;}
     
     
.lapleca{ height: 70px;}    
    
#brindamos{ width:90%;  vertical-align:middle; margin-top:-80px; }    
    
#brindis1{text-align:center; }
#brindis2{text-align:center; }    
    
#separador{width:100%; height: 500px; background: url("../imagenes/separador1.jpg") no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover;  -o-background-size: cover;  background-size: cover;}    
    
#prodos5{width:100%; margin-left:0px;text-align:center;}     
    
.texto4,.texto4a,.texto4b{font-size:47px;}       
     
.texto8,.texto9{font-size:35px;}
}


@media screen and (max-width:620px)
 {   #contactame1{width:100%; margin-left: 0; margin-top: 190px; text-align: left; }  
#abajo2{ display: none;}     
          
.lapleca{ height: 60px;}     
     
.texto4,.texto4a,.texto4b{font-size:42px;}  
     
#separador{ height:400px;}     
     
.texto8,.texto9{font-size:30px;}
.tarjeta-azul,.lima1{height:500px; }
}     
     


#menumovil{ display:none;}
@media screen and (max-width:1120px)
 { 
     
#arriba{ width:100%;}     
#arriba2,#arriba1,#arriba3a{ display: none;}
#arriba0{width:35%; height: 102px; margin-left:-4px; text-align:center; background-color: #FFFFFF; display: inline-block;   }
#arriba4{ display: inline-block;width:65%; margin-left:-4px;  text-align:left; }     
     
#menumovil{ z-index:9999;position: absolute;
  right: 30px;
  height: 27px;
        top: 31px;
  width: 35px; display:block;}
}


.button_container {
  position: absolute;
  top: -2px;
  right: 0px;
  height: 0px;
  width: 35px;
  cursor: pointer;
  z-index: 9999;
  -webkit-transition: opacity .25s ease;
  -moz-transition: opacity .25s ease;
  transition: opacity .25s ease;
}
.button_container:hover {
  opacity: .7;
}
.button_container.active .top {
  -webkit-transform: translateY(11px) translateX(0) rotate(45deg);
  -moz-transform: translateY(11px) translateX(0) rotate(45deg);
          transform: translateY(11px) translateX(0) rotate(45deg);
  background: #ffffff;
}
.button_container.active .middle {
  opacity: 0;
  background: #ffffff;
}
.button_container.active .bottom {
  -webkit-transform: translateY(-11px) translateX(0) rotate(-45deg);
  -moz-transform: translateY(-11px) translateX(0) rotate(-45deg);
          transform: translateY(-11px) translateX(0) rotate(-45deg);
  background: #ffffff;
}
.button_container span {
  background: #ffffff;
  border: none;
  height: 5px;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  -webkit-transition: all .35s ease;
  -moz-transition: all .35s ease;
  transition: all .35s ease;
  cursor: pointer;z-index: 9999;
}
.button_container span:nth-of-type(2) {
  top: 11px;
}
.button_container span:nth-of-type(3) {
  top: 22px;
}

.overlay {
	background-color:rgba(1,14,66,.9);  position: fixed;
    top: 0;
  left: 0;
  width: 100%;
  height: 0%;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: opacity .35s, visibility .35s, height .35s;
  -moz-transition: opacity .35s, visibility .35s, height .35s;
  transition: opacity .35s, visibility .35s, height .35s;
  overflow: hidden;
}
.overlay.open {
  opacity: 1;
  visibility: visible;
  height: 100%;
}
.overlay.open li {
  -webkit-animation: fadeInUp .8s ease forwards;
  -moz-animation: fadeInUp .8s ease forwards;
          animation: fadeInUp .8s ease forwards;
  -webkit-animation-delay: .35s;
  -moz-animation-delay: .35s;
          animation-delay: .35s;
}
.overlay.open li:nth-of-type(2) {
  -webkit-animation-delay: .45s;
  -moz-animation-delay: .45s;
          animation-delay: .45s;
}
.overlay.open li:nth-of-type(3) {
  -webkit-animation-delay: .55s;
  -moz-animation-delay: .55s;
          animation-delay: .55s;
}
.overlay.open li:nth-of-type(4) {
  -webkit-animation-delay: .65s;
  -moz-animation-delay: .65s;
          animation-delay: .65s;
}
.overlay.open li:nth-of-type(5) {
  -webkit-animation-delay: .75s;
  -moz-animation-delay: .75s;
          animation-delay: .75s;
}
.overlay.open li:nth-of-type(6) {
  -webkit-animation-delay: .85s;
  -moz-animation-delay: .85s;
          animation-delay: .85s;
}
.overlay.open li:nth-of-type(7) {
  -webkit-animation-delay: .95s;
  -moz-animation-delay: .95s;
          animation-delay: .95s;
}
.overlay nav {
  position: relative;
  top: 40%; left:5%;
  -webkit-transform: translateY(-35%);
  -moz-transform: translateY(-35%);
          transform: translateY(-35%);
  text-align: center;
  margin-right:52px;
}
.overlay ul {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  display: inline-block;
  position: relative;
  height: 100%; width:100%;
}
.overlay ul li {
  display: inline-block;
  position: relative;
  opacity: 0;
  min-width:18%; text-align:center;
}
.overlay ul li a {
  display: inline-block;
  position: relative;
  color: #ffffff;
  text-decoration: none;
  overflow: hidden;
  font-size: 40px;
  opacity:1; line-height: 150%; text-transform: uppercase; font-weight: 700;
}
.overlay ul li a:hover,a:after, .overlay ul li a:focus:after, .overlay ul li a:active:after {
  width: 100%;
  opacity:1;-webkit-transition: .25s;
  transition: .25s;opacity:.8;color:#2aafe5;
}

 .ball{-moz-animation:spin 1.5s infinite linear;-webkit-animation:spin 1.5s infinite linear;-0-animation:spin 1.5s infinite linear;animation:spin 1.5s infinite linear;}
@-moz-keyframes spin{0%{opacity:01;}
100%{opacity:1;-moz-transform:translateY(10px);}
}
@-webkit-keyframes spin{0%{opacity:1;}
100%{opacity:1;-webkit-transform:translateY(10px);}
}
@-o-keyframes spin{0%{opacity:1;}
100%{opacity:1;-0-transform:translateY(10px);}
}
@-moz-keyframes spin{0%{opacity:01;}
100%{opacity:1;-moz-transform:translateY(10px);}
} 


 .ball2{-moz-animation:spin2 1.5s infinite linear;-webkit-animation:spin2 1.5s infinite linear;-0-animation:spin 1.5s infinite linear;animation:spin2 1.5s infinite linear;}
@-moz-keyframes spin2{0%{opacity:01;-moz-transform:translateY(10px);}
100%{opacity:1;-moz-transform:translateY(0px);}
}
@-webkit-keyframes spin2{0%{opacity:1;-webkit-transform:translateY(10px);}
100%{opacity:1;-webkit-transform:translateY(0px);}
}
@-o-keyframes spin2{0%{opacity:1;-0-transform:translateY(10px);}
100%{opacity:1;-0-transform:translateY(0px);}
}
@-moz-keyframes spin2{0%{opacity:01;-moz-transform:translateY(10px);}
100%{opacity:1;-moz-transform:translateY(0px);}
} 


.home-slider{position:relative;width:100%;height:780px;overflow:hidden;font-family:Arial,Helvetica,sans-serif;}
.home-slides{position:absolute;inset:0;}
.home-slide{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transition:opacity 1.2s ease;z-index:1;}
.home-slide.active{opacity:1;z-index:2;}

.home-linea{position:absolute;left:0;bottom:98px;width:100%;height:1px;background:#fff;z-index:3;}

.home-pleca{position:absolute;right:0;bottom:0;width:455px;height:111px;background:url("../imagenes/plecahome.png") no-repeat right bottom;background-size:contain;z-index:4;pointer-events:none;}

.home-flecha{position:absolute;right:30px;bottom:30px;z-index:5;pointer-events:auto;}
.home-flecha img{width:46px;height:46px;display:block;}

.home-controls{position:absolute;bottom:25px;left:0;width:calc(100% - 455px);display:flex;justify-content:center;gap:40px;z-index:6;flex-wrap:nowrap;}
        
.home-controls{position:absolute;bottom:25px;left:0;width:calc((100% - 455px) * .7);margin-left:calc((100% - 455px) * .15);display:flex;justify-content:space-between;z-index:6;flex-wrap:nowrap;}        
        
.home-btn{background:rgba(255,255,255,.20);border:0;border-radius:30px;padding:14px 26px;color:#fff;font-size:16px;cursor:pointer;transition:background .3s ease;white-space:nowrap;}
.home-btn:hover,.home-btn.active{background:rgba(10,22,66,.75);}

.home-bullets{display:none;position:absolute;bottom:40px;left:0;width:calc(100% - 455px);justify-content:center;gap:14px;z-index:6;}
.home-bullet{width:12px;height:12px;border-radius:50%;background:#bcbcbc;cursor:pointer;transition:background .3s;}
.home-bullet.active{background:#fff;}

@media screen and (max-width:1150px){.home-controls{display:none;}.home-bullets{display:flex;}}
@media screen and (max-width:720px){.home-pleca{display:none;}.home-flecha{display:none;}.home-bullets{width:100%;left:50%;transform:translateX(-50%);}}
@media screen and (max-width:1600px){.home-slider{height:680px;}}
@media screen and (max-width:1280px){.home-slider{height:600px;}.home-btn{font-size:15px;}}
@media screen and (max-width:1024px){.home-slider{height:540px;}.home-btn{font-size:14px;}}
@media screen and (max-width:900px){.home-slider{height:480px;}}
@media screen and (max-width:600px){.home-slider{height:380px;}}
@media screen and (max-width:420px){.home-slider{height:320px;}}

.form-contacto{
  width:100%;
  max-width:900px;
  margin:0 auto;
  color:#0b1445;
}

.grid-form{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:28px 40px;
}

.campo{
  display:flex;
  flex-direction:column;
}

.campo-full{
  grid-column:1 / -1;
}

label{
  font-weight:700;
  margin-bottom:8px;
  font-size:18px;
}

input, textarea{
  border:2px solid #39afe2;
  border-radius:40px;
  padding:14px 22px;
  font-size:15px;
  outline:none;
  color:#0b1445;
}

input::placeholder,
textarea::placeholder{
  color:#8fa6c0;
}

textarea{
  resize:none;
  height:40px;
  padding-top:18px; font-family: "Poppins", sans-serif; 
}

.acciones{
  display:flex;
  align-items:center;
  gap:25px;
  margin-top:35px;
}

.btn-enviar{
  background:#00a6e8;
  color:#fff;
  border:none;
  border-radius:50px;
  width:210px;
  height:52px;
  font-weight:700;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  cursor:pointer;
  padding:0; /* importante para que no cambie el tamaño */
  box-sizing:border-box;
}

.btn-enviar span{
  background:#fff;
  color:#00a6e8;
  width:28px;
  height:28px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:18px;
  line-height:1;
  flex-shrink:0;
}

.acciones p{
  color:#5a6f90;
  font-size:16px;
}

@media(max-width:700px){
  .grid-form{
    grid-template-columns:1fr;
  }

  .acciones{
    flex-direction:column;
    align-items:flex-start;
  }

  .btn-enviar{
    align-self:center;
  }

  .acciones p{
    text-align:center;
    width:100%;
  }
}

