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

}
html {
overflow: scroll;
overflow-x: hidden;
}


body{
  
    background-image:linear-gradient(
   rgba(238, 245, 207, 0.7),
    rgb(209, 255, 253, 0.5)),
    url(../img/Olivo.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: auto;
    
}

/* Scroll */
.ir-arriba{
   background-color: #d80f01;
   box-shadow: 2px 3px 10px #130f0f;
   padding: 15px;
   border-radius: 50%;
   position: fixed;
   z-index: 1000;
   color: #ffffff;
   bottom: 20px;
   right: 20px;
   transition: .4s ease;
}
.ir-arriba:hover{
   background-color: #01d830;
   transform: translateY(-5px);

}

/* 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 #016930 ;
   border-radius: 50%;
   z-index: 50;
}
.menu{
   width: 100%;
   display: flex;
   justify-content: center;
   align-items: center;
   background: #016930 ;
   
   box-shadow: 1px 3px 3px #00070a;
}
.item{  
   margin: 0 15px;
   font-size: 18px;
   font-weight: 600;
   cursor: pointer;
   color: #f7dea8;
   text-shadow:2px 3px 3px  #ccc;
}
.item:hover{
   color: rgb(229, 255, 0);
}
#menu{
   display: none;
}
.menu-icono{
   width: 25px;

}

label{
   width: 100%;
   cursor: pointer;
   display: none;
}
.menu-burger{
    width: 25px;
    margin-left: 20px;
    
}
.enlace{
    margin: 0 15px;
    font-size: 18px;
    font-weight: 600;
    cursor: pointer;
    color: rgb(250, 250, 225);
    text-decoration-line: none;
}
.enlace:hover{color: rgb(255, 255, 255);
zoom: 1.2;}
label{
    cursor: pointer;
    display: none;
}
.menu .vertical{
   display: none;
}
.lace{
   text-transform: uppercase;
   text-decoration: none;
   color: #d7ff8d;
   text-shadow: 2px 3px 4px  #000000;
}
.lace:hover{
   zoom: 1.2;
}
.laceado{
   text-transform: uppercase;
   text-decoration: none;
   color: aqua;
   text-shadow: 2px 3px 4px  #000000;
}
.laceado:hover{
   zoom: 1.2;
}

.banda{    width: 30px ;    cursor: pointer; height: auto;}
.banda:hover{ box-shadow: 1px 1px 35px 0px rgb(255, 255, 255);
transform: translateY(-10px);
}
/*
.banda{
   
   width:40px;
   height: 30px;
   cursor: pointer;
   height:auto;
   box-shadow: 3px 4px 5px #ffffff;
  
}
.banda:hover{
  
   zoom: 1.2;
}
   */


/* Texto animado */
.animatetext{
   overflow-y: hidden;
   display: flex;
   align-items: center;
   justify-content: center;
   margin-top: 90PX;
   padding: 20px;
   background-color: rgb(21, 136, 50);
   opacity: 0.75;
   box-shadow: 1px 2px 5px #212121;
 }
 .animatetext .static-txt{
   color: #fbff02;
   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: #4d0101;
   font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
   font-size: 35px;
   font-weight: 700;
   text-shadow: 1px 2px 5px   #ffffff;
   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 ;

 }

 /* info */
 .cart-info{
   margin-top: 30px;
   text-align: center;
   padding: 30px 20px 45px 50px;
   background: linear-gradient( rgb(209, 212, 176), #01662f);
   text-shadow: 2px 2px 5px #002f06;
   box-shadow: 1px 0 10px #00070a;
 }
 .cart-info h2{
   color: #f6e793;
   font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
   text-align: center;
   font-size: 35px;
 }
 .MINIMUM{
   color: #ffffff;
   font-size: 20px;
 }
 .separar{
   color: #e3e70e;
   font-weight: 700;
   text-align: center;
   font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
   font-size: 20px;
 }

 /* camara de fotos */

.maxv {
   display: flex;
   padding: 20px;
   margin-top: 55px;
  justify-content: center;
  align-items: center;
}
.volum{
   border: 35px solid green;
   box-shadow:  15px 20px 10px #012e01;
   border-radius: 0% 12% 0% 12% / 0% 12% 0% 12%  ;
   
}


 /* maapa */
 .mapa{
   display: flex;
   align-items: center;
   justify-content: center;
   
 }
 iframe {
  box-shadow: 2px 2px 10px #121212;
   border-radius: 30px;
 }



 /* Galeria */
 .star{
   margin-top: 30px;
   padding-top: 50px;
   text-align: center;
   color: #01d830;
   font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
   font-size: 25px;
   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 16px 20px rgba(0, 0, 0, 0.9);
   
   
 }
 .mi-nombre{
   display: flex;
   justify-content: center;
   margin-bottom:-200px;
   
 }
 .mi-nombre img{
   width: 500px;
   height: auto;
   
  
 }

 .info{
   background-color: rgb(80, 133, 37);
   position: relative;
   font-family: Arial, Helvetica, sans-serif;
   font-size: 14px;
   padding: 0;
   margin: 0;
   color: #000000;
   margin-bottom: 80px;
   overflow-y: hidden;
   
 }


.swiper{
   width: 100%;
   padding: 80px 0 50px 0;
   
}
.swiper-slide{
   width: 630px;
   height: 900px;
   background-color: #012e01;
   box-shadow: 0 0 20px rgba(0,0,0,0.5);
   padding: 40px;
   text-align: center;
   justify-content: 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: 100%;
   background: #ffffff;
   border-radius: 15px;
   box-shadow: 1px 4px 5px #ffffff;
}
.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;
}
/* Galeria */
.visor{
   padding: 20px;
/*   background: rgba(0, 54, 10, 0.5);  */
   background: linear-gradient( rgba(209, 212, 176, 0.3),rgba(0, 57, 10, 0.4));
}
.galeria{
   
   
   margin: 20px auto;
   width: 90%;
   max-width: 1200px;
   display: grid;
   grid-template-columns: repeat(auto-fit,minmax(100px, 1fr)  );
   gap: 5px;

}
.galeria img{
   width: 100%;
   object-fit: cover;
   border-radius: 30px;
   box-shadow: 0 5px 15px #ffffff;
   transition: transform 0,1s ease;
}
.galeria img:hover{
   transform: scale(1.9);
}
/*.visor{
   width: 100vw;
   height: auto;
   margin: auto;
   overflow: hidden;
   display: grid;
   place-items: center;
}
.visor .visor-track {
   display: flex;
   animation: scroll 40s linear infinite;
   -webkit-animation: scroll 40s linear infinite;
   width: calc(150px * 18);
}
.visor .ver¨{
   width: 150px;
   margin: 10px;
   padding: 40px;
   display: flex;
   align-items: center;
}
.visor .ver img{
   
   width: 100%;
}

@keyframes scroll{
   0%{
      -webkit-transform: translateX(0);
      transform: translateX(0)
   }
   100%{
      -webkit-transform: translateX( calc(-150px*9));
      transform: translateX( calc(-150px*9))
   }
}
   */
 
/* 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:900px){
   .menu{
       padding: 30px;
       margin: 0;

   }
   label{
       display: initial;
   }
   .menu{
       position: absolute;
       top: 100%;
       left: 0;
       right: 0;
       background-color: rgba(0, 54, 10, 0.5) ;
       display: none;
   }
   .item{
       margin: 0 0 20px 0;
       width: 100%;
   }
   #menu:checked ~ .menu{
       display: initial;
   }
   .banda{
      width: 40px;height: 20px;
   }
   /* Footer */
   .gif{
      width: 400px;
   }
   .menu-burger{
      color: #016930;
   }

/* reduccion libro */
 .star{
   margin-top: 30px;
   padding-top: 50px;
   text-align: center;
   color: #01d830;
   font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', 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 16px 20px rgba(0, 0, 0, 0.9);
   
   
 }

 .info{
   background-color: rgb(80, 133, 37);
   position: relative;
   font-family: Arial, Helvetica, sans-serif;
   font-size: 14px;
   padding: 0;
   margin: 0;
   color: #000000;
   margin-bottom: 80px;
   
 }


.swiper{
   width: 100%;
   padding: 50px 0 20px 0;
}
.swiper-slide{
   width: 500px;
   height: 750px;
   background-color: #012e01;
   box-shadow: 0 0 20px rgba(0,0,0,0.5);
   padding: 40px;
   text-align: center;
   justify-content: center;
   border-radius: 15px

}
.iconos {
   display:flex; 
   justify-content: space-between;
   align-items: center ;
   margin-bottom: 40px;
}
.iconos i{
   font-size: 10px;
   color: burlywood;
}
.iconos img{
   width: 100%;
   background: #ffffff;
   border-radius: 15px;
   box-shadow: 1px 4px 5px #ffffff;
}
.producto-content{
   display: flex;
   justify-content: space-between;
}
.producto-txt{
   flex-basis: 50%;
   text-align: left;
}
.producto-txt h3{
   font-size: 18px;
   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;
}


/* reduccion libro */
/* LLevar */
.crear .mini{
  font-size: 25px;
}

}

/*    footer   */
.footer{
   position: relative;
   width: 100%;
   background: #016930;
   min-height: 100px;
   padding: 20px 45px;
   justify-content: center;
   align-items: center;
   flex-direction: column;
}
.social-icono{
 display: flex;
   justify-content: center;
   align-items: center;
   position: relative;
   margin: 10px 5px;
   flex-wrap: wrap;
}
.icon{
  color: #ccc;
  font-size: 40px;
  display: inline-block;
  margin: 0 15px;
  transition: .5s;
  
}
.icon:hover{
   transform: translateY(-15px);
}
.icon-ele{
   list-style: none;
}
.grupo{
   width: 90%;
   max-width: 1500px;
   margin: auto;
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   text-align: center;
   grid-gap: 45px;
   padding: 45Px 0 ;
}
.mi-logo{
   width: 100px;
   height: auto;
   border-radius: 50%;
   box-shadow: 2px 5px 10px #000000;
}
.tiempo{
   color: rgb(255, 232, 127);
   text-shadow: 5px 2px 10px #ff0000;
}
.dia{
   font-family: 'Times New Roman', Times, serif;
   font-weight: 600;
   color: #f7dea8;
}
.hora{
   font-family: 'Times New Roman', Times, serif;
   font-size: 20px;
   font-weight: bold;
   color: coral;
}
.telefono{
   list-style: none;
   font-family:  'Times New Roman', Times, serif;
   color: bisque;
   font-weight: 800;
   font-size: 25px;
}
.red{
   color: #f81515;
   font-family: Arial, Helvetica, sans-serif;
   text-shadow: 2px 2px 5px #ffffff;
   font-size: 30px;
}
.redos{
   color: #ff5858;
   font-size: 18px;
}

.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;
}
@media screen and ( max-width: 800px){
   .grupo{
   width: 90%;
   max-width: 1500px;
   
   grid-template-columns: repeat(1, 1fr);
   text-align: center;
   grid-gap: 30px;
   padding: 35Px 0 ;
}
}

.by{
   font-size: 22px;
   font-weight: 700;
   color: #ffffff;
   text-align: center;
   align-items: center;
   text-shadow: 1px 1px 5px #000000;
}
.crear{ justify-content: center;
   align-items: center;
   text-align: center;
   margin-right: -100px;
   font-size: 15px;
   color: #a9aaa2;
   
   
   
}
.crear H2{
   color: #ffb300;
   text-shadow: 2px 2px 5px #4d0101;
}
.crear h3{
   font-size: 35px;
   font-family: 'Times New Roman', Times, serif;
   font-weight: 700;
   color: #fbff02;
   text-shadow: 1px 2px 10px #000000;
}
.moto{
   width: 120px;
   color:#fbff02;
   filter: drop-shadow(-50px 5px 20px rgba(255, 230, 0, 0.7) );
}