:root {
    --verde: #565C1E;
    --crema: #FFFBDA;
    --cafe: #604C1B;
    --ver2: #927630;
    --plomo: #FCFEFE;
    --ver3: #546605;

}

*{
    margin: 0;
    padding: 0;
    /* background: var(--background); */
    box-sizing: border-box;
}

a:link, a:visited, a:active {
    text-decoration:none !important;
    color: var(--negro) !important;
}


.sahitya-regular {
  font-family: "Sahitya", serif;
  font-weight: 400;
  font-style: normal;
}

.sahitya-bold {
  font-family: "Sahitya", serif;
  font-weight: 700;
  font-style: normal;
}

.balthazar-regular {
  font-family: "Balthazar", serif;
  font-weight: 400;
  font-style: normal;
}

.nunito-1 {
  font-family: "Nunito", sans-serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
}

.nunito-2 {
  font-family: "Nunito", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
}

.nunito-3 {
  font-family: "Nunito", sans-serif;
  font-optical-sizing: auto;
  font-weight: 800;
  font-style: normal;
}


.lemaprincipal{
    background-color: var(--cafe);
    padding: 10px;
    font-size:20px;
    color: var(--crema);
}

.decorati-menu{
    height: 60px;
    background-color: var(--crema);

}

.decoratimob-menu{
    height: 30px;
    background-color: var(--crema);
}

.decoratimob2-menu{
    height: 15px;
    background-color: var(--crema);

}

.mobile__firstslide{
    display: none;
}

.menutot{
    background-color: var(--verde);
    padding: 20px;
    color: var(--crema);
    font-size: 25px;
    height: 100px;
    justify-content: space-around;
    padding-top: 30px;
    
}

.iconosm1{
    float: left;
}

.idiomash{
    padding-right: 50px !important;
}

.item-men{
    padding: 0 40px;
    
}


.cotiz{
    border: 3px solid var(--crema);
    padding: 8px 20px;
    border-radius: 20px;
    
    
}

.inicio2{
     background-image: url("/applets/photoboot/back1.png");
    color: white;
    background-size: 100% 100%;
    padding-top:100px;
    padding-bottom:100px;
    
    
}

.ficha-inicio{
    background-color: var(--ver2);
    border-radius: 20px;
    padding: 20px;
    width: 70%;
    margin-left: auto;
    margin-right: auto;
    font-size: 20px;
    margin-top:30px;
    margin-bottom:30px;
}

.cont-ficha{
    display: inline-block;
    text-align: justify;
    padding: 20px;
}

.caracters{
    background-color: var(--crema);
    
    
}

.yape1{
    font-size: 20px;
}

.backfoto1{
    background-image: url("/applets/photoboot/back2.png");
    color: white;
    background-size: 100% 100%;
    padding-bottom: 100px;
    
}

.backfoto1 img{
    width: 80%;
    padding: 50px;
    padding-top: 100px;

}

.caraz1{
    padding: 20px;
    border-radius: 30px;
    background-color: var(--verde);
    color:var(--crema);
    font-weight: 500;
    margin:20px;
    font-size: 25px;
    text-align: center;
    width: 300px;
    margin-left: auto;
    margin-right: auto;

}

.caraz2{
    padding: 20px;
    border-radius: 30px;
    background-color: var(--cafe);
    color:var(--crema);
    font-weight: 500;
    margin:20px;
    font-size: 25px;
    text-align: center;
    width: 300px;
    margin-left: auto;
    margin-right: auto;

}

.caraz3{
    padding: 20px;
    border-radius: 30px;
    background-color: var(--ver3);
    color:var(--crema);
    font-weight: 500;
    margin:20px;
    font-size: 25px;
    text-align: center;
    width: 300px;
    margin-left: auto;
    margin-right: auto;
}


.titulocara{
    text-align: center;
    font-size:35px;
    font-weight: 700;
    color: var(--verde);
    padding-bottom: 30px;   
}

.float-ini{
    position: absolute; 
    top: 30%; 
    right: 0%;
    
}

.titulo1{
    color: var(--crema);
    font-size: 27px;
    text-align: right;
    padding: 30px;
}

.titulo2{
    color: var(--crema);
    font-size: 30px;
    font-weight: 500;
    text-align: right;
    padding: 30px;
}

.titulo21{
    color: var(--crema);
    font-size: 30px;
    font-weight: 500;
    text-align: right;
    padding: 30px;
}

.titulo31{
   color: var(--crema);
    font-size: 25px;
    font-weight: 500;
    text-align: right;
    padding: 30px;
}


.mobinicsd{
    background-color: #604C1B;
}


.backfoto2{
    background-image: url("/applets/photoboot/back3.png");
    color: white;
    background-size: 100% 100%;
    padding-bottom: 100px;
    
}

.backfoto2 img{
    width: 80%;
    padding: 50px;
    padding-top: 100px;

}


.certificacion1{
    background-color: var(--cafe);
    color: var(--crema);
    padding-top: 100px;
    padding-bottom: 100px;
}

.titulocert{
    text-align: right;
    font-size:35px;
    font-weight: 700;
    color: var(--crema);
    padding-bottom: 20px;
    
}

.historia1{
     background-image: url("/applets/photoboot/back4.png");
    color: white;
    background-size: 100% 100%;
    color: var(--crema);
    font-size:20px;
    padding-bottom: 100px;

}

.colhist{
    padding: 100px;
}

.tihistoria1{
    font-size: 30px;
    font-weight: 600;
}

.subhistoria1{
    font-size: 35px;
    font-weight: 600;
    padding-bottom: 30px;
}
.empresa1{
    background-color: var(--cafe);
    color: var(--crema);
    padding-top: 100px;
    padding-bottom: 100px;
}

.empresa21{
    padding-top: 30px;
    font-size: 30px !important;
    font-weight: 500 !important;
}


.empresa22{
    padding-top: 20px;
    font-size: 45px !important;
    font-weight: 700 !important;
}

.empresa32{
    background-color: var(--verde);
    color: var(--crema);
    padding: 20px;
    border-radius: 20px;
    text-align: center;
    font-size: 35px;
    font-weight: 500;
    width:250px;
    margin-left: -150px;
}

.image-empre img{
    padding-left:100px;
}

.titulo-in{
    background-color: var(--verde);
    color: var(--crema);
    font-size: 2em;
    text-align: center;
    padding: 10px;
}

.empresa33{
    background-color: var(--verde);
    color: var(--crema);
    padding: 20px;
    border-radius: 20px;
    text-align: center;
    font-size: 35px;
    font-weight: 500;
    width:250px;
    margin-right: 800px;
    
}

.mision-vision{
    background-color: var(--verde);

}

.mision1{
    background-color: var(--plomo);
    color: var(--cafe);
    padding: 30px;
    

}

.titulo-mi{
    
    font-size: 35px;
    text-align: center;
    padding-bottom: 20px;
}

.descripcion-mi{
    text-align: center;
    font-size: 20px;
    padding:20px;

}

.filmi{
     padding-top: 100px;
    padding-right: 200px;
}

.filvis{
    padding-left: 200px;
    padding-top: 100px;
    padding-bottom: 100px;
}

.botana{
    background-color: #604C1B;
    color: var(--crema);
    padding-top: 100px;
    padding-bottom: 100px;
}

.titulobot{
    font-size: 40px;
    font-weight: 600;
}

.linkbot{
    font-size: 20px;
}

.linkbot a{
    background-color: var(--verde);
    padding: 20px;
}

.nombre-prod{
    font-size: 20px;
}


.boton-prod{
    background-color: var(--ver2);
    color: var(--crema);
    padding: 10px;
    border-radius: 20px;
    font-size: 20px;
    width: 150px;
    font-weight: 500;
    margin-left: auto;
    margin-right: auto;
    margin-top:20px;
}

.product-card{
    padding-bottom: 100px;
}

.titulo-productos{
    font-weight: 600;
    font-size:35px;
    color: var(--ver3);
    
}

.foto-prodd img{
    width: 500px;
    margin-top:50px;
}

.presentacion-prod{
    margin-top:20px;
}

.nombre-prodd{
    font-size: 30px;
}

.titulo-productosd{
    font-weight: 600;
    font-size:40px;
    color: var(--ver3);
    
}

.titulo-con{
    font-size: 30px;
    
    color:var(--verde);
    padding-top: 50px;
}

.dato-con{
     font-size: 25px;
     color:var(--verde);
    
}

.contact-info{
    padding-top: 100px !important;
    padding-bottom: 100px !important;
}

.whats-con{
    background-color: #604C1B;
    padding: 10px;
    border-radius: 10px;
    width: 170px;
    font-size: 25px;
    color: var(--crema);
    margin-left: auto;
    margin-right: auto;
    margin-top:20px;
}


.rrss-con{
    background-color:var(--ver2);
    padding: 10px;
    border-radius: 10px;
    width: 200px;
    font-size: 25px;
    color: var(--crema);
    margin-right: auto;
    margin-top:20px;
}


.rrss-con2{
    background-color:var(--ver2);
    padding: 10px;
    border-radius: 10px;
    width: 200px;
    font-size: 25px;
    color: var(--crema);
    margin-left: auto;
    margin-top:20px;
}

.arbolito{
    background-color: var(--cafe);
    text-align: center;
    padding:30px;
    
}
.arbolito img{
    width: 300px;
}

.title-contact{
    font-size: 35px;
    font-weight: 500;
    color: var(--crema);
    padding-top: 20px;

}

.mobile-12{
    display: none;
}

.futber{
    background-image: url("/applets/photoboot/back4.png");
    color: white;
    background-size:cover;
    
    padding-bottom:100px;
    
}


.futber2{
    background-color: var(--cafe);
    color: white;
    padding: 20px;

}


.direccion1{
    font-size: 20px;
    padding-top: 10px;
    margin-top: 40px;
}


.direccion2{
    font-size: 23px;
    font-weight: 500;
       
}

.direccion3{
    font-size: 20px;
    padding-top: 10px;
    margin-top: 20px;
    padding-bottom: 10px;
}




.off-screen-menu{
     background-image: url("/applets/photoboot/back1.png");
    color: white;
    background-size: cover;
    padding-top:100px;
    padding-bottom:100px;
    color: var(--verdemo);
    height: 100vh;
    width: 100%;
    max-width: 820px;
    position: fixed;
    top:0;
    right: -820px;
    
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: 3rem;
    transition: .3s ease;
    -webkit-transition: .3s ease;
    -moz-transition: .3s ease;
    -ms-transition: .3s ease;
    -o-transition: .3s ease;
    font-size: 30px;
}

.navmob{
    padding: 1rem;
    display: flex;
    text-decoration: none;
    
}


.off-screen-menu.active {
    right: 0;
}


.off-screen-menu a{
    text-decoration: none;
    color: var(--verdemo) !important;
    
}

.off-screen-menu a:hover{
    text-decoration: none;
    color: #B4E97C;
    
}


.off-screen-menu ul{
  
    text-decoration: none;
    list-style-type: none;    
}
.off-screen-menu li{
  
    text-decoration: none;
    list-style-type: none;
    
}

.cerrar-menov{
    margin-top: -35px;
    margin-bottom: 100px;
    align-content: end;
    text-align: right;
    padding-right: 30px
}



/* LOADER */

.preloadingspace{
    background-color: var(--cafe);
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    z-index:  10000;
    color: white;
    clip-path: circle(150% at 100% 0);
    transition: clip-path 2s ease-in-out;
    -webkit-transition: clip-path 2s ease-in-out;
    -moz-transition: clip-path 2s ease-in-out;
    -ms-transition: clip-path 2s ease-in-out;
    -o-transition: clip-path 2s ease-in-out;
}

.preloadingspace img{
    width: 300px;
}

.preloadingspace2{
    clip-path: circle(0% at 100% 100%);
}

.charging{
    color: white;
    font-size:30px;
    font-family: "Kadwa", serif;
    font-weight: 700;
    font-style: normal;
    margin-top: 30px;
    animation: fadeIn 1s infinite;
    -webkit-animation: fadeIn 1s infinite;
}

@keyframes fadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
  }

  /* FIN LOADER */

/* mobile */

@media (max-width:820px){
 .inicio2{
        background-size:contain;
 } 
 
 .backfoto1 img{
    width: 100%;
    padding: 10px;
    padding-top: 100px;

}

.titulocara{
    
    font-size:25px;
    font-weight: 700;
    color: var(--verde);
    padding-bottom: 30px;   
}

.caraz1{
    font-size: 20px;
    width: 100%;
}

.caraz2{
    font-size: 20px;
    width: 100%;
}

.caraz3{
    font-size: 20px;
    width: 100%;
}

.desktop-12{
    display: none;
}

.mobile-12{
    display: block;
}

.backfoto2 img{
    width: 100%;
    padding: 10px;
    padding-top: 50px;
}

.ficha-inicio{

    padding: 10px;
    width: 90%;
    font-size: 18px;
 
}

.cont-ficha{
    display: inline-block;
    text-align: center;
    padding: 20px;
}

.filmi{
    
    padding-right: 0px;
}

.filvis{
    padding-left: 0px;

}

.rrss-con{

    width: 80%;
    margin-right: auto;
    margin-left: auto;
}


.rrss-con2{
     width: 80%;
    margin-right: auto;
    margin-left: auto;
}

.empresa22{
    font-size: 28px !important;
}

.arbolito img{
    width: 100px;
}

 .desktop__firstslide{
        display: none;
    }

    .mobile__firstslide{
    display: block;
}


}


@media (max-width:1300px){
.item-men{
    padding: 0 10px;
    
}

.cotiz{
    border: 3px solid var(--crema);
    padding: 8px 30px;
    border-radius: 20px;
    
    
}
}