@import url('https://fonts.googleapis.com/css2?family=Fira+Sans: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');

.os-animation{opacity:0;}
.os-animation.animated{opacity:1.5;}
.os-animation1{opacity:0;}
.os-animation1{opacity:1.5;}
html,body{width:100%;height:100%; background-color: #5e881c;}


*{
 font-family: "Fira Sans", sans-serif;
list-style:none;
text-decoration:none;
margin:0;
padding:0;
}
iframe{display:block;border:none;}

.os-animation{opacity:0;}
.os-animation.animated{opacity:1;}

ul, ol {list-style:none;}
.nav > li { float:left;transition:all .6s;-moz-transition:all .6s;-webkit-transition:all .6s;-o-transition:all .6s;}
.nav li a {;text-decoration:none;display:block;}
.nav li {line-height:20px;}
.nav li ul {display:none;position:absolute; background-color:#ffffff; min-width:128px;  text-align:center;border-radius:10px;}
.nav li:hover > ul { display:block; padding-top:10px;  padding-bottom:10px; }

.donas { font-weight:400; color:#000000; font-size:15px; transition:all .6s;-moz-transition:all .6s;-webkit-transition:all .6s;-o-transition:all .6s; text-transform: uppercase; line-height: 200%;}
.donas:hover { text-decoration:underline; font-weight:500;}	


#slide1{text-align:center;width:100%; height:700px; margin-top: 310px; }
#flechahome{text-align:center;width:90%; max-width: 1600px; left: 5%; height:65px; margin-top: 700px; position: absolute;}


#elheader{ width:100%; height:150px; text-align: center; z-index:9999; position:fixed; top:0px; background-color: #5e881c;}
#invi{ width: 100%; height: 117px;}

.texto1{color:#ffffff;font-size:14px; font-weight: 400; line-height: 120%; text-decoration:none;}
.texto2{color:#ffffff;font-size:75px; font-weight: 700; line-height: 100%; text-decoration:none; text-transform: uppercase;}
.texto2a{color:#ffffff;font-size:70px; font-weight: 700; line-height: 100%; text-decoration:none; text-transform: uppercase;}
.texto3{color:#ffffff;font-size:38px; font-weight: 400; line-height: 120%; text-decoration:none;}
.texto4{color:#ffd200;font-size:38px; font-weight: 400; line-height: 120%; text-decoration:none;}
.texto4a{color:#ffd200;font-size:38px; font-weight: 400; line-height: 120%; text-decoration:none;}
.texto5{color:#000000;font-size:50px; font-weight: 400; line-height: 120%; text-decoration:none;}
.texto5a{color:#000000;font-size:50px; font-weight: 700; line-height: 43px; text-decoration:none;}
.texto6{color:#000000;font-size:20px; font-weight: 400; line-height: 120%; text-decoration:none;}
.texto7{color:#000000;font-size:55px; font-weight: 400; line-height: 100%; text-decoration:none;}
.texto6a{color:#FFFFFF;font-size:20px; font-weight: 400; line-height: 120%; text-decoration:none;}
.texto7a{color:#FFFFFF;font-size:55px; font-weight: 400; line-height: 100%; text-decoration:none;}
.texto8{color:#000000;font-size:30px; font-weight: 700; line-height: 100%; text-decoration:none;}
.texto9{color:#000000;font-size:22px; font-weight: 700; line-height: 120%; text-decoration:none;}
.texto10{color:#000000;font-size:15px; font-weight: 400; line-height: 130%; text-decoration:none;}
.texto8a{color:#ffffff;font-size:30px; font-weight: 700; line-height: 100%; text-decoration:none;}
.texto9a{color:#ffffff;font-size:22px; font-weight: 700; line-height: 120%; text-decoration:none;}
.texto10a{color:#ffffff;font-size:15px; font-weight: 400; line-height: 130%; text-decoration:none;}
.texto11{color:#FFFFFF;font-size:58px; font-weight: 400; line-height: 100%; text-decoration:none;}
.texto12{color:#ffffff;font-size:16px; font-weight: 400; line-height: 120%; text-decoration:none;}
.texto13{color:#000000;font-size:15px; font-weight: 400; line-height: 130%; text-decoration:none;}
.texto13a{color:#000000;font-size:18px; font-weight: 400; line-height: 130%; text-decoration:none;}
.texto13b{color:#000000;font-size:13px; font-weight: 400; line-height: 130%; text-decoration:none;}
.texto13c{color:#000000;font-size:12px; font-weight: 400; line-height: 130%; text-decoration:none;}
.texto14{color:#000000;font-size:15px; font-weight: 700; line-height: 150%; text-decoration:none; background-color:#fed926 ;}
.texto15{color:#000000;font-size:22px; font-weight: 700; line-height: 100%; text-decoration:none;}

#arriba, #arriba1,#arriba2{display:inline-block;vertical-align:top; }
#arriba{width:1600px;vertical-align:middle; text-align:left; }
#arriba1{width:820px;margin-right:-4px; text-align:left;z-index:1; margin-top: 20px; }
#arriba2{width:780px; margin-right:-4px;text-align:right; z-index:1; margin-top: 10px; }
#arriba3{width:100%; margin-right:0px;text-align:right; height: 1px; background-color: #ffffff; margin-top: 21px; }

.logo{ display: block;}
.logomovil{ display: none;}

#lasredes, #lasredes1,#lasredes2,#lasredes3,#lasredes4,#lasredes0,#lasredes00{display:inline-block;vertical-align:top; }
#lasredes{width:600px;vertical-align:middle; text-align:right; }
#lasredes1{width:510px;margin-right:-4px; text-align:left; margin-top: 7px;}
#lasredes2{width:90px;margin-right:-4px;text-align:left;}


#elmenu, #elmenu1,#elmenu2,#elmenu3,#elmenu4,#elmenu5{display:inline-block;vertical-align:top; }
#elmenu{width:100%;vertical-align:middle; text-align:right; margin-top: 18px; }
#elmenu1{width:65px;margin-right:-4px; text-align:right;}
#elmenu2{width:145px;margin-right:-4px;text-align:right;}
#elmenu3{width:197px;margin-right:-4px;text-align:right;}
#elmenu4{width:120px;margin-right:-4px;text-align:left;}
#elmenu5{width:110px;margin-right:-4px;text-align:right; }

#info{ width:100%; top:150px; text-align: center;  position:absolute; background-color: #5e881c;}


.infotext{ width: 90%; max-width: 1600px; display: inline-block; text-align: left;}

#conocenos{text-align:center;width:100%; background-color: #ffffff; display: inline-block;}
.infotext2{ width: 90%; max-width: 680px; display: inline-block; text-align: left;}

.lali{width: 100%; height: 1px; background-color: #dedede;}

#orgullosos, #orgullosos1,#orgullosos2{display:inline-block;vertical-align:top; }
#orgullosos{width:100%;vertical-align:middle; text-align:left; background-color:#52c2f0;  }
#orgullosos1{width:55%; height: 700px; background: url("../imagenes/home1.jpg") no-repeat center center ;  -webkit-background-size: cover; -moz-background-size: cover;  -o-background-size: cover;margin-right:-4px; text-align:left; }
#orgullosos2{width:45%; height: 700px; background-color:#52c2f0; margin-right:-4px;text-align:center;}


#presencia{text-align:center;width:100%; background-color: #ffffff; display: inline-block;}
.elmapa{ width: 100%; max-width:1052px ;}


.zonas {
      max-width: 1600px; width: 96%;
      margin: auto;
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      border-radius: 20px;
      overflow: hidden;
      border: 1px solid #ccc;
    }

    .zona {
      display: flex;
      flex-direction: column;
      border-right: 1px solid #ccc;
      border-bottom: 1px solid #ccc;
    }

    .zona:nth-child(5n) {
      border-right: none;
    }

    .zona-header {
      padding: 10px;
      text-align: center;
      font-size: 18px;
      font-weight: bold;
      color: white;
    }

    .zona-body {
      padding: 20px 20px 20px 20px;
      font-size: 14px;
      text-align: left; line-height: 130%;
    }

.teltel {
      font-size: 14px;
       text-decoration: none; font-weight: 700; color: #000000;    }

    .zona1 .zona-header { background-color: #6cd6ff; color: #002c52; }
    .zona2 .zona-header { background-color: #4d6c1c; }
    .zona3 .zona-header { background-color: #f1c232; color: #333; }
    .zona4 .zona-header { background-color: #4b7c1f; }
    .zona5 .zona-header { background-color: #000000; }

    .contacto {
      margin-bottom: 20px;
      line-height: 1.5;
    }

    .contacto strong {
      display: block;
      margin-bottom: 4px;
      font-size: 15px;
    }

    .icono {
      display: inline-block;
      color: #bfbfbf;
      filter: grayscale(100%) brightness(0.7);
    }

    .icono-hoja {
      width: 13px;
      height: 18px;
      vertical-align: middle;
      margin-right: 4px;
    }

    .luli {
      color: inherit;
      text-decoration: underline; font-size: 14px;
    }

.infotext3{ width: 90%; max-width: 680px; display: inline-block; text-align: center;}

#separador{ width: 100%; height:650px; background: url("../imagenes/separador.jpg") no-repeat center center fixed ;  -webkit-background-size: cover; -moz-background-size: cover;  -o-background-size: cover;}
	

#contacto, #contacto1,#contacto2{display:inline-block;vertical-align:top; }
#contacto{width:100%;vertical-align:middle; text-align:left; background-color:#52c2f0;  }
#contacto1{width:50%; height: 700px; margin-right:-4px;text-align:center;}
#contacto2{width:50%; height: 700px; background: url("../imagenes/home2.jpg") no-repeat center center ;  -webkit-background-size: cover; -moz-background-size: cover;  -o-background-size: cover;margin-right:-4px; text-align:left; }

.infotext4{ width: 90%; max-width: 600px; display: inline-block; text-align: left;}


#contactame, #contactame1,#contactame2{display:inline-block;vertical-align:top; }
#contactame{width:100%;vertical-align:middle; text-align:right; }
#contactame1{width:33%;margin-left:-4px; text-align:left; padding-bottom: 10px;}
#contactame2{width:66%;margin-left:-4px;text-align:left; padding-bottom: 10px;}
#contactame3{width:100%;margin-left:0px;text-align:left;}


#footer{ width:100%; text-align: center; background-color: #000000;}

.logoabajo{ display: block;}
.logoabajom{ display: none;}


#abajo, #abajo1,#abajo2,#abajo3,#abajo4,#abajo5,#abajo6{display:inline-block;vertical-align:top; }
#abajo{width:1600px;vertical-align:middle; text-align:left; }
#abajo1{width:820px;margin-right:-4px; text-align:left;z-index:1; }
#abajo2{width:780px; margin-right:-4px;text-align:right; z-index:1; margin-top: 76px; }
#abajo3{width:100%; margin-right:0px;text-align:right; height: 1px; background-color: #4a4a4a; margin-top: 30px;  margin-bottom: 30px; }
#abajo4{width:1100px;margin-right:-4px; text-align:left;z-index:1; margin-top: 20px; }
#abajo5{width:440px;margin-right:-4px; text-align:left;z-index:1; margin-top: 20px; }
#abajo6{width:60px;margin-right:-4px; text-align:right;z-index:1;  }


#categos, #categos1{display:inline-block;vertical-align:top; }
#categos{width:1600px;vertical-align:middle; text-align:left; }
#categos1{width:400px;margin-right:-4px; text-align:left;z-index:1; margin-bottom: 12px; }

#todo{text-align:center;width:100%; background-color: #ffffff; }

#enza{ width: 100%; height: 950px; background: url("../enza/banner.jpg") no-repeat center center fixed ;  -webkit-background-size: cover; -moz-background-size: cover;  -o-background-size: cover;}

#sakata{ width: 100%; height: 950px; background: url("../sakata/banner.jpg") no-repeat center center fixed ;  -webkit-background-size: cover; -moz-background-size: cover;  -o-background-size: cover;}

#westar{ width: 100%; height: 950px; background: url("../westar/banner.jpg") no-repeat center center fixed ;  -webkit-background-size: cover; -moz-background-size: cover;  -o-background-size: cover;}

#rijk{ width: 100%; height: 950px; background: url("../rijk/banner.jpg") no-repeat center center fixed ;  -webkit-background-size: cover; -moz-background-size: cover;  -o-background-size: cover;}

.invi2{ width: 100%; }

#amarillo{ width: 100%; text-align: center; background-color: #ffd925;}

.back{ width: 40px; height: 40px;}


#linfo, #linfo1, #linfo0{display:inline-block;vertical-align:top; }
#linfo1{width:1600px;vertical-align:middle; text-align:left; }
#linfo1{width:800px;margin-left:-4px; text-align:left; margin-bottom: 60px; }
#linfo0{width:100%;margin-left:0px; text-align:left; }

#sub, #sub1, #sub2, #sub3, #sub4, #sub5{display:inline-block;vertical-align:top; }
#sub{width:775px;vertical-align:middle; text-align:left; }
#sub1{width:346px;margin-left:-4px; text-align:left;z-index:1;  }
#sub2{width:424px; height: 429px; margin-left:-6px; text-align:left;z-index:1;  }
#sub3{width:424px; height: 429px; margin-left:-6px; text-align:left;z-index:1;  }
#sub4{width:424px; height: 429px; margin-left:-6px; text-align:left;z-index:1;  }
#sub5{width:424px; height: 429px; margin-left:-6px; text-align:left;z-index:1;  }

.elcuadro{border-top: 6px solid #fed926;border-right: 6px solid #fed926;border-bottom: 6px solid #fed926; border-left: 0; width: 100%; height: 100%;}

 *:focus { 
    outline: none; 
} 

::placeholder{color:#ffffff;}

.forma1{text-align:center;HEIGHT:50px;width:95%;  font-size:15PX;font-weight:400; background-color:transparent;  border:2px solid #ffffff; color:#ffffff; border-radius: 100px;}

.forma2{text-align:center;HEIGHT:50px;width:90%;  font-size:15PX;font-weight:400; background-color:transparent;  border:2px solid #ffffff; color:#ffffff; border-radius: 100px;}


.boton{color:#ffffff; border: 0;  font-size:16px; font-weight:400;  text-decoration:none;transition:all .5s;-moz-transition:all .5s;-webkit-transition:all .5s;-o-transition:all .5s; border-radius: 100px;cursor:pointer; padding-top:5px; padding-left:16px; padding-right:16px; padding-bottom:5px; text-align:center; background-color:#000000; width:90%; height:50px;}
.boton:hover{background-color:#373737;}

.invi{ display: none;}

.botos{ color: #ffffff; font-size: 16px; transition:all 1s;-moz-transition:all 1s;-webkit-transition:all 1s;-o-transition:all 1s;}
.botos:hover{ color: #ffd750;} 

.botoss{ color: #ffffff; font-size: 16px; transition:all 1s;-moz-transition:all 1s;-webkit-transition:all 1s;-o-transition:all 1s;}
.botoss:hover{ color: #ffd750;} 

#kbe{ width: 100%; text-align: center; background-color: #f3f3f3;}


#calendar, #calendar1, #calendar2{display:inline-block;vertical-align:top; }
#calendar{width:90%; max-width: 1600px; vertical-align:middle; text-align:center; }
#calendar1{width:40%;margin-left:-4px; text-align:left; }
#calendar2{width:60%;margin-left:-4px; text-align:right; margin-top: 10px; }

@media screen and (max-width:1620px){
    
#linfo1{width:776px;vertical-align:middle; text-align:left; }
#linfo1{width:776px;margin-left:0px; text-align:left;}    
    
    
#categos{width:1200px;}    
    
#enza,#sakata,#westar,#rijk{ height:900px;}

    
#abajo{width:1400px; }
#abajo1{width:620px; }
#abajo2{width:780px; }
#abajo4{width:900px;}
#abajo5{width:440px;}
#abajo6{width:60px; }
    
    
#separador{height:600px;}    
    
#orgullosos1{height: 650px; }
#orgullosos2{height: 650px; }    
    
#arriba{width:1400px;vertical-align:middle; text-align:left; }
#arriba1{width:620px;}    
}


@media screen and (max-width:1420px){
    
#enza,#sakata,#westar,#rijk{ height:850px;}
    
#abajo{width:1300px; }
#abajo1{width:520px; }
#abajo2{width:780px; }
#abajo4{width:800px;}
#abajo5{width:440px;}
#abajo6{width:60px; }    
    
.texto11{font-size:50px;}    
#contacto1{height: 600px; }
#contacto2{height: 600px; }
    
#separador{height:550px;} 
    
#orgullosos1{height: 600px; }
#orgullosos2{height: 600px; }    
    
    
#slide1{ height:650px;  }  
    
#arriba{width:1300px;vertical-align:middle; text-align:left; }
#arriba1{width:520px;}    
}


@media screen and (max-width:1320px){
#abajo{width:1200px; text-align: center; }
#abajo1{width:520px; }
#abajo2{width:680px; }
#abajo4{width:100%; margin-left: 0; text-align: center;}
#abajo5{width:100%; margin-left: 0; text-align: center; margin-top: 30px;}
#abajo6{width:100%; margin-left: 0; text-align: center; margin-top: 30px; }    

.logomovil{ display: block;}
.logo{ display: none;}.texto2{font-size:65px;}    
    
#arriba{width:1200px;vertical-align:middle; text-align:left; }
#arriba1{width:520px;} 
#arriba2{width:680px;}
    
    
.logoabajom{ display: inline-block;}
.logoabajo{ display: none;}.texto2{font-size:65px;}
}

@media screen and (max-width:1270px){
#zonas1{width:50%; height: 400px;}
#zonas2{width:50%; height: 400px;}
#zonas3{width:50%; height: 400px;}
#zonas4{width:50%; height: 400px;}
}

@media screen and (max-width:1220px){

    
#categos{width:800px;}     
    
#enza,#sakata,#westar,#rijk{ height:800px;}    
    
#abajo{width:90%; text-align: center; }
#abajo1{width:100%; margin-left: 0; text-align: center; }
#abajo2{width:100%; margin-left: 0; text-align: center; margin-top: 30px; }    
    
    
.texto11{font-size:40px;}     
    
#separador{height:500px;}     
    
#orgullosos1{height: 550px; }
#orgullosos2{height: 550px; }       
    
 #slide1{ height:600px;  }     
#arriba{width:1000px;vertical-align:middle; text-align:left; }
#arriba1{width:320px;} 

.logomovil{ display: block;}
.logo{ display: none;}
}

@media screen and (max-width:1120px){
.infotext4{ width: 100%; max-width: 100%; display: inline-block; text-align: center;}    
    
#contacto1{width:100%; height: 500px; margin-right:0px;text-align:center;}
#contacto2{width:100%; height:600px;margin-right:0px; text-align:center; }

#contactame3{text-align:center;}    
    
}

@media screen and (max-width:1020px){
#enza{ width: 100%; height: 700px; background: url("../enza/banner.jpg") no-repeat center center ;  -webkit-background-size: cover; -moz-background-size: cover;  -o-background-size: cover;}
#sakata{ width: 100%; height: 700px; background: url("../sakata/banner.jpg") no-repeat center center ;  -webkit-background-size: cover; -moz-background-size: cover;  -o-background-size: cover;}
#westar{ width: 100%; height: 700px; background: url("../westar/banner.jpg") no-repeat center center ;  -webkit-background-size: cover; -moz-background-size: cover;  -o-background-size: cover;}
#rijk{ width: 100%; height: 700px; background: url("../rijk/banner.jpg") no-repeat center center ;  -webkit-background-size: cover; -moz-background-size: cover;  -o-background-size: cover;}    
    
    
#separador{height:450px;background: url("../imagenes/separador.jpg") no-repeat center center ;  -webkit-background-size: cover; -moz-background-size: cover;  -o-background-size: cover;}       
    
.texto7,.texto7a{font-size:50px;}    
#orgullosos1{height: 500px; }
#orgullosos2{height: 500px; }       
    
#slide1{ height:800px;}
.texto5{font-size:45px;}    

}

@media screen and (max-width:820px){

#categos{width:388px;}     
#categos1{width:388px; margin-left: 0;} 
    
    
#contacto2{height:550px;}    
    
#separador{height:400px; }    
    
 #zonas1, #zonas2, #zonas3, #zonas4{width:100%; margin-left: 0;}
    
#orgullosos1{width: 100%; height: 600px; }
#orgullosos2{width: 100%; height:400px; }       
    
    
.texto5{font-size:40px;}    
    
#slide1{ height:550px; margin-top: 320px;  }      
.infotext,.infotext2{ text-align: center;}
.texto2{font-size:60px;}
.invi{ display: inline-block; width: 100%; height: 30px;}
}


@media screen and (max-width:796px){
    
#calendar1{width:100%;margin-left:0px; text-align:center; }
#calendar2{width:100%;margin-left:0px; text-align:center; }   
    
 #linfo1{width:346px;vertical-align:middle; text-align:left; }
#linfo1{width:346px;margin-left:0px; text-align:left;margin-bottom: 70px; }     
 #linfo0{width:100%;margin-left:0px; text-align:center; }
    
    
#sub{width:346px;vertical-align:middle; text-align:left; }
#sub1{width:346px;margin-left:0px; text-align:left;z-index:1;  }
#sub2{width:334px; height: 530px; margin-left:0px; text-align:left;z-index:1;} 
#sub3{width:334px; height: 450px; margin-left:0px; text-align:left;z-index:1;} 
#sub4{width:334px; height: 400px; margin-left:0px; text-align:left;z-index:1;} 
#sub5{width:334px; height: 550px; margin-left:0px; text-align:left;z-index:1;} 
 
.elcuadro{border-top: 6px solid #fed926;border-right: 6px solid #fed926;border-bottom: 6px solid #fed926; border-left: 6px solid #fed926; width: 100%; height: 100%;}    

.texto14{line-height: 120%;}       
}
    
@media screen and (max-width:660px){
.zona-body {
      padding: 20px 20px 20px 0px;
      font-size: 14px;
      text-align: center; line-height: 130%;
    }    
    
    
.texto5a{font-size:40px;}
    .back{ width: 35px; height: 35px;}
    
    #abajo2{ display: none;}    
    
.texto11{font-size:35px;}     
    
#contacto1{height: 500px;}
#contacto2{height:500px;}      
    
#separador{height:350px; }     
    
#orgullosos1{height: 550px; }    
    
#slide1{ height:500px; margin-top: 340px;  }  
    
.texto2{font-size:50px;}
}

@media screen and (max-width:520px){
.invi2{ height: 400px;}    
    
.texto2a{font-size:60px; }    
    
#contacto2{height:450px;}       
    
#separador{height:300px; }     
    
#orgullosos1{height: 450px; }     
#orgullosos2{ height:450px; }     
    
.texto5{font-size:35px;}
    
#slide1{ height:400px; margin-top: 400px;  }  
.texto2{font-size:46px;}
}


#menumovil{ display:none;}
.button_container {
  position: absolute;
  top: -10px;;
  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: .9;
}
.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 {
  position: fixed;
  background-color:rgba(0,204,105,.95);
    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 .5s ease forwards;
  -moz-animation: fadeInUp .5s ease forwards;
          animation: fadeInUp .5s ease forwards;
  -webkit-animation-delay: .35s;
  -moz-animation-delay: .35s;
          animation-delay: .35s;
}
.overlay.open li:nth-of-type(2) {
  -webkit-animation-delay: .4s;
  -moz-animation-delay: .4s;
          animation-delay: .4s;
}
.overlay.open li:nth-of-type(3) {
  -webkit-animation-delay: .45s;
  -moz-animation-delay: .45s;
          animation-delay: .45s;
}
.overlay.open li:nth-of-type(4) {
  -webkit-animation-delay: .50s;
  -moz-animation-delay: .50s;
          animation-delay: .50s;
}
.overlay.open li:nth-of-type(5) {
  -webkit-animation-delay: .55s;
  -moz-animation-delay: .55s;
          animation-delay: .55s;
}
.overlay.open li:nth-of-type(6) {
  -webkit-animation-delay: .60s;
  -moz-animation-delay: .60s;
          animation-delay: .60s;
}
.overlay.open li:nth-of-type(7) {
  -webkit-animation-delay: .65s;
  -moz-animation-delay: .65s;
          animation-delay: .65s;
}
.overlay.open li:nth-of-type(8) {
  -webkit-animation-delay: .7s;
  -moz-animation-delay: .7s;
          animation-delay: .7s;
}
.overlay.open li:nth-of-type(9) {
  -webkit-animation-delay: .75s;
  -moz-animation-delay: .75s;
          animation-delay: .75s;
}
.overlay.open li:nth-of-type(10) {
  -webkit-animation-delay: .8s;
  -moz-animation-delay: .8s;
          animation-delay: .8s;
}
.overlay.open li:nth-of-type(11) {
  -webkit-animation-delay: .85s;
  -moz-animation-delay: .85s;
          animation-delay: .85s;
}
.overlay nav {
  position: relative;
  height: 70%;
  top: 40%;
  -webkit-transform: translateY(-35%);
  -moz-transform: translateY(-35%);
          transform: translateY(-35%);
  
  font-weight: 900;
  text-align: center;
  margin-right:0;
}
.overlay ul {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  display: inline-block;
  position: relative;
  height: 100%;
}
.overlay ul li {
  display: block;
  min-height: 45px;
  position: relative;
  opacity: 0;
}
.overlay ul li a {
  display: block;
  position: relative;
  color: #ffffff;
  text-decoration: none;
  overflow: hidden;
  font-size: 32px;
  opacity:1;
  font-weight:600;
}
.overlay ul li a:hover,a:after, .overlay ul li a:focus:after, .overlay ul li a:active:after {
  width: 100%;font-size: 32px;color: #000000; text-decoration:underline;
  opacity:.8;-webkit-transition: .25s;
  transition: .25s;
}
.overlay ul li a:after {
  font-size: 40px;
  opacity:.9;-webkit-transition: .25s;
  transition: .25s;
}
.subme {  width: 100%;font-size: 32px;color: #ffffff; font-weight:600; }


@-webkit-keyframes fadeInRight {
  0% {
    opacity: 0;
    left: 20%;
  }
  100% {
    opacity: 1;
    left: 0;
  }
}

@keyframes fadeInRight {
  0% {
    opacity: 0;
    left: 20%;
  }
  100% {
    opacity: 1;
    left: 0;
  }
}


@media screen and (max-width:1020px){
#arriba{width:90%;vertical-align:middle; text-align:left; }
#arriba1{width:300px;margin-right:-4px; text-align:center;z-index:1; }
#arriba2{ display:none;}
#arriba3{margin-top: 25px; }
    
#elheader{ width:100%; height:150px;  position:fixed; z-index:9999;  top:0px;}

#menumovil{ z-index:9999;position: absolute;top: 70px;
  right: 30px;
  height: 27px;
  width: 35px; display:block; z-index:999;}

#elheader{ z-index:9999;}
}




.ball {
    margin: 0 auto;
    -moz-animation: spin 1.5s infinite linear;
    -webkit-animation: spin 1.5s infinite linear;
}

@-moz-keyframes spin {
    0% {
opacity: 1;   -moz-transform: translateY(5px); }

    100% {
opacity: 1;  -moz-transform: translateY(-5px);   }
}



@-webkit-keyframes spin {
    0% {
opacity: 1; -webkit-transform: translateY(5px); }

    100% {
opacity: 1; -webkit-transform: translateY(-5px); }  
}

.ball2 {
    margin: 0 auto;
    -moz-animation: spin2 1.5s infinite linear;
    -webkit-animation: spin2 1.5s infinite linear;
}

@-moz-keyframes spin2 {
    0% {
opacity: 1;   -moz-transform: translateY(0px); }

    100% {
opacity: 1;  -moz-transform: translateY(5px);   }
}



@-webkit-keyframes spin2 {
    0% {
opacity: 1; -webkit-transform: translateY(0px); }

    100% {
opacity: 1; -webkit-transform: translateY(5px); }  
}


.ball3 {
    margin: 0 auto;
    -moz-animation: spin3 1.5s infinite linear;
    -webkit-animation: spin3 1.5s infinite linear;
}

@-moz-keyframes spin3 {
    0% {
opacity: 1;   -moz-transform: translateX(0px); }

    100% {
opacity: 1;  -moz-transform: translateX(-5px);   }
}



@-webkit-keyframes spin3 {
    0% {
opacity: 1; -webkit-transform: translateX(0px); }

    100% {
opacity: 1; -webkit-transform: translateX(-5px); }  
}


.redes{transition:all 1s;-moz-transition:all 1s;-webkit-transition:all 1s;-o-transition:all 1s; opacity: 1; margin: 2px;}
.redes:hover{ opacity: .8;}   


.redes2{transition:all 1s;-moz-transition:all 1s;-webkit-transition:all 1s;-o-transition:all 1s; opacity: 1; margin: 2px;}
.redes2:hover{ opacity: .6;} 


.ampliar{
-webkit-transform:scale(1);
-webkit-transition-duration: 0.6s;
-webkit-opacity: 1;

-moz-transform:scale(1);
-moz-transition-duration: 0.6s;
-moz-opacity: 1;

-ms-transform:scale(1);
-ms-transition-duration: 0.6s;
-ms-opacity: 1;
}
.ampliar:hover{
-webkit-transform:scale(1.1);
-webkit-opacity:.8;
-webkit-transition-duration: 0.6s;

-moz-transform:scale(1.1);
-moz-opacity:.8;
-moz-transition-duration: 0.6s;

-ms-transform:scale(1.1);
-ms-opacity:.8;
-ms-transition-duration: 0.6s;

}


/* Radial Out */
.hvr-radial-out {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  position: relative;
  overflow: hidden;
  -webkit-transition-property: color;
  transition-property: color;
  -webkit-transition-duration: 0.3s; font-weight: 500; font-size: 16px; color: #ffffff;
  transition-duration: 0.3s;border-radius:20px; padding-top: 10px; padding-bottom: 10px; padding-left: 20px; padding-right: 20px;
}
.hvr-radial-out:before {
  content: "";border-radius:20px;
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #000000;
  border-radius: 100%;
  -webkit-transform: scale(0);
  transform: scale(0);
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-duration: 0.4s;
  transition-duration: 0.4s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.hvr-radial-out:hover{
  color: #ffd200;
}
.hvr-radial-out:hover:before {
  -webkit-transform: scale(2);
  transform: scale(2);
}


/* Radial Out */
.dos {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  position: relative;
  overflow: hidden;
  -webkit-transition-property: color;
  transition-property: color;
  -webkit-transition-duration: 0.3s; font-weight: 500; font-size: 16px; color: #ffffff;
  transition-duration: 0.3s;border-radius:20px; padding-top: 10px; padding-bottom: 10px; padding-left: 20px; padding-right: 20px;
}
.dos:before {
  content: "";border-radius:20px;
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #000000;
  border-radius: 100%;
  -webkit-transform: scale(0);
  transform: scale(0);
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-duration: 0.4s;
  transition-duration: 0.4s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.dos:hover{
  color: #ffd200;
}
.dos:hover:before {
  -webkit-transform: scale(2);
  transform: scale(2);
}