*{
   margin: 0;
   padding: 0;
   text-decoration: none;
   list-style: none;

}
body{
   background: linear-gradient(
      180deg,
      rgba(147,182,240, 0.7)0%,
      rgba(209,240,255, 1)50%,
      rgba(178,210,255, 1)100%
   );
}

/* menu   */
header{
   width: 100%; 
   position: fixed;
   top: 0;
   left: 0;
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding:   20px  ;
   padding-left:  10%;
   height: 100px;
   z-index: 100;
}
.logo{
   height: 50px;
   box-shadow: 0px 0px 5px 9px #8fa0ec ;
   border-radius: 30%;
   z-index: 50;
}
.menu{
   width: 100%;
   display: flex;
   justify-content: center;
   align-items: center;
   background: #8fa0ec ;
   box-shadow: 1px 3px 3px #00070a;
}
.item{  
   margin: 0 15px;
   font-size: 18px;
   font-weight: 600;
   cursor: pointer;
   color: #033194;
   text-shadow:2px 3px 3px  #ccc;
}
.item:hover{
   color: rgb(208, 229, 235);
}
#menu{
   display: none;
}
.menu-icono{
   width: 25px;

}

label{
   width: 100%;
   cursor: pointer;
   display: none;
}
.banda{    width: 30px ;    cursor: pointer; height: auto; }
.banda:hover{ box-shadow: 1px 1px 35px 0px #022ffa;}


   


/* Texto animado */
.animatetext{
   display: flex;
   align-items: center;
   justify-content: center;
   margin-top: 120PX;
   padding: 20px;
   background-color: #8fa0ec;
   box-shadow: 1px 2px 5px #212121;
 }
 .animatetext .static-txt{
   color: #ff0202;
   font-family: Georgia;
   font-size: 30px;
   font-weight: 700;
   text-shadow: 1px 2px 5px   #0a0000;
 }
 .animatetext .dynamic-txts{
   margin-left: 25px;
   height: 90px;
   line-height: 90px;
   overflow: hidden;
 }
 .dynamic-txts li{
   list-style: none;
   color: #1200af;
   font-size: 30px;
   font-weight: 700;
   position: relative;
   top: 0;
   animation: slide 5s steps(4) infinite;
 }
 .dynamic-txts li span{
   position: relative;
 }
 .dynamic-txts li span::after{
   content: "";
   position: absolute;
   height: 100%;
   width: 100%;
   animation: typing 1.2s steps(10) infinite ;

 }

 /* separador  */
 .playa{
   background: linear-gradient(0.25turn, #8fa0ec, #ffffff, #f8cfa2);
   box-shadow: 1px 3px 5px #000000;
   position: relative;
   background-size: cover;
   width: auto;
   height: 40px;
   margin-top: 50px;
 }


 /* Galeria */
 .star{
   margin-top: 30px;
   padding-top: 50px;
   text-align: center;
   color: #eeff01;
   font-family: Georgia, 'Times New Roman', Times, serif;
   font-size: 20px;
   text-transform: uppercase;
   letter-spacing: .1em;
   text-shadow: 
     0 -1px 0 #fff, 
     0 1px 0 #2e2e2e, 
     0 2px 0 #2c2c2c, 
     0 3px 0 #2a2a2a, 
     0 4px 0 #282828, 
     0 5px 0 #262626, 
     0 6px 0 #242424, 
     0 7px 0 #222, 
     0 8px 0 #202020, 
     0 9px 0 #1e1e1e, 
     0 10px 0 #1c1c1c, 
     0 11px 0 #1a1a1a, 
     0 12px 0 #181818, 
     0 13px 0 #161616, 
     0 14px 0 #141414, 
     0 15px 0 #121212, 
     0 22px 30px rgba(0, 0, 0, 0.9);
   
   
 }

 .info{
   background-color: darkslategray;
   position: relative;
   font-family: Arial, Helvetica, sans-serif;
   font-size: 14px;
   padding: 0;
   margin: 0;
   color: #000000;
   
 }


.swiper{
   width: 100%;
   padding: 80px 0 50px 0;
}
.swiper-slide{
   width: 300px;
   height: 300px;
   background-color: #032500;
   box-shadow: 0 0 20px rgba(0,0,0,0.5);
   padding: 40px;
   text-align: center;
   border-radius: 15px

}
.iconos {
   display:flex; 
   justify-content: space-between;
   align-items: center ;
   margin-bottom: 40px;
}
.iconos i{
   font-size: 20px;
   color: burlywood;
}
.iconos img{
   width: 120px;
   background: #ffffff;
   border-radius: 15px;
   box-shadow: 1px 4px 5px #ff5e00;
}
.producto-content{
   display: flex;
   justify-content: space-between;
}
.producto-txt{
   flex-basis: 50%;
   text-align: left;
}
.producto-txt h3{
   font-size: 20px;
   font-weight: 600;
   color: #ffffff;
   text-transform: uppercase;
}
.producto-txt p{
   font-size: 14px;
   color: #d3d3d3;
}
.producto-imagen{
   flex-basis: 50%;
   text-align: right;
}
.producto-imagen img{
   width: 120px;
}


 
/* carrusel imagenes */
.baner{
   padding: 50px;
   background: linear-gradient(
      180deg,
      rgba(12,22,120, 0.7)0%,
      rgba(124,159,247, 1)50%,
      rgba(232,235,249, 1)100%
   );
   box-shadow: 0 0 20px rgba(0,0,0,0.5);
}
.portada{
   width: 100%;
   height: auto;
   display: flex;justify-content: center;
}
.gif{
   width: 600px;
   box-shadow: 0 3px 20px rgba(0,0,0,0.5);
   border-radius: 10px;
}


 /* Texto animado */

 @keyframes slide {
   100%{
     top: -360px;
   }
 }

 
 .dynamic-txts li span{
   position: relative;
   margin: 5px 0;
   line-height: 90px;
 }
 .dynamic-txts li span::after{
   content: "";
   position: absolute;
   left: 0;
   height: 100%;
   width: 100%;
   
   animation: typing 3s steps(10) infinite;
 }
 @keyframes typing {
   40%, 60%{
     left: calc(100% + 30px);
   }
   100%{
     left: 0;
   }
 }

/* Menu       */

@media( max-width:700px){
   .menu{
       padding: 30px;
       margin: 0;

   }
   label{
       display: initial;
   }
   .menu{
       position: absolute;
       top: 100%;
       left: 0;
       right: 0;
       background-color: rgba(143,160,236,0.3) ;
       display: none;
   }
   .item{
       margin: 0 0 20px 0;
       width: 100%;
   }
   #menu:checked ~ .menu{
       display: initial;
   }
   /* Footer */
   .gif{
      width: 400px;
   }
}

/*    footer   */



.texto-animado{
   justify-items: center;
   text-align: center;
   color: #040344;
   font-family: 'Times New Roman', Times, serif;
   font-size: 10px;
   margin-top: 20px;
   padding-top: 30px;
}
.mapa{
   box-shadow: 1px 5px 12px #000000;
   border-radius: 20px;
}

.pie{margin-top: 10px;
   padding-top: 10px;
   display: flex;
   justify-content: center;
   text-align: center;
   align-items: flex-end;
   background: #040038;
   min-height: 100px; }

footer{
   position: relative;
   display: flex;
   justify-content: center;
   align-items: center;
   width: 100%;
   background: #1972ad;
   height: 150px;
   padding: 20px 50px;
   flex-direction: column;
}
footer .ico-social,
footer .main{
   position: relative;
   display: flex;
   justify-content: center;
   align-items: center;
   text-align: center;
   margin: 10px 0;
   flex-wrap: wrap;

}
footer .ico-social li, 
footer .main li{
   list-style: none;
}
footer .ico-social li a{
   font-size: 2em;
   margin: 0 10px;
   color: #ffffff;
   display: inline-block;
   transition:  0.5s;
}
footer .ico-social li a:hover{   
   
   transform: rotate( 360deg );
}
footer .main li a{
   font-size: 1.2em;
   font-weight: 600;
   color: #d9ff00;
   margin: 0 10px;
   display: inline-block;
   text-decoration: none;
   opacity: 0.75;
   transition:  0.5s;
}
footer .main li a:hover{
   opacity: 1;
   transform: translateY(-3px);
}
footer p{
   color: #00ff00;
   font-weight: 700;
   text-align: center;
   margin-top: 15px;
   margin-bottom: 15px;
}
footer .ola{
   position: absolute;
   top: -60px;
   display: flex;
   left: 0;
   width: 100%;
   height: 100px;
   background: url( /img/Ola.png);
   background-repeat: no-repeat;
   background-size: 100% 100px;
}
footer .ola#ola1 {
   
   
   margin-right: -25px;
   opacity: 1;
   bottom: 0;
   animation: animateola 3s infinite alternate ease-in-out;
}
footer .ola#ola2 {
   
  
   margin-right: 0px;
   opacity: 0.75;
   bottom: 0;
   animation: animateola 5s infinite alternate ease-in-out;
}
footer .ola#ola3 {
   
   margin-right: 5px;
   opacity: 0.9;
   bottom: 0;
   animation: animateola 2s infinite alternate ease-in-out;
}
footer .ola#ola4 {
   top: -50px;
   
   
   
}


@keyframes animateola {
   0% {
      transform: translateX(-200px);}
      100% {
         transform: translateX(1800px);
       }
   }


.creator{
   color: #363636;
   font-weight: 800;
   font-family: 'Arial Narrow Bold', sans-serif;
   font-size: 12px;
}