*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: sans-serif;
}

html{
    scroll-behavior: smooth;
}
body{
    background-color: white;
}
.principal{
    text-align: left;
    color: black;
    top: 23%;
    width: 100%;
    position: absolute;


}
p{
    font-size:25px;
}
span{
    font-family: 'Aldrich', sans-serif;
    color: white;
    text-decoration: none;
}
.logopras{
    width: 20%;
    height: auto; 
    position: absolute;
    top: 20%;
    left: 40%;
    right: 40%;
}
.principal1{
    text-align: center;
    color: black;
    font-size: 18px;
}
.principal2{
    text-align: center;
    color: black;
    top: 89%;
    width: 100%;
    position: relative;
    font-size: 20px;
}
.principal3{
    text-align: right;
    background-color: white;
    color: black;
    padding-right: 2em;
    font-size: 10px;
}
.fondo{
    position: relative;
    width: 100%;
    text-align: center;
    border-radius: 25px;

}
#MicrotorchV{
    width:300px;
    height:250px;
}
.ejemplo{
    width: 80%; 
    height: 300px; 
    border-radius: 21px 21px 0 0;
    text-align: center;
    padding-bottom: .5em;
}
#btninicio{
    background-color: white;
    border-radius: 50px 50px 50px 50px;
    padding-left: .35em;
    padding-right: .35em;
    position: fixed;
    bottom: 60px;
    right: 20px;
    z-index: 9999;
    font-size: 35px;
    color:  #F29863;
    
}
#btninicio2{
    background-color: black;
    border-radius: 50px 50px 50px 50px;
    padding-left: .3em;
    padding-right: .3em;
    position: fixed;
    bottom: 60px;
    left: 20px;
    z-index: 9999;
    font-size: 35px;
    color:  #F29863;
    
}
#btnflec{
    border-radius: 50px 50px 50px 50px;

}
.right{
    background-color: white;
    text-align: right;
    padding-right: 1em;
}
.right2{
    background-color: white;
    color:  #F29863;
    text-align: right;
    padding-right: 1em;
    padding-bottom: 1em;
}


.zoom {


    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    -ms-transition: all .2s ease-in-out;
}
.transition {
    -webkit-transform: scale(1.8); 
    -moz-transform: scale(1.8);
    -o-transform: scale(1.8);
    transform: scale(1.8);
}
.zoom:hover {
    transform: scale(1.2); 
}
/* Zoom de Imagenes
img.zoom {

    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    -ms-transition: all .2s ease-in-out;
}

.transition {
    -webkit-transform: scale(1.8); 
    -moz-transform: scale(1.8);
    -o-transform: scale(1.8);
    transform: scale(1.8);
}
 
.imgp{
    width: 100%;
    height: 90%;
    opacity: 100%;
}

.carrusel{
    width: 60%;
    margin-left: 20%;
}
*/
.stars{
    padding-top:2.5em ;
    padding-left: 5em;

}
.imgp2{
    width: 100%;
    height: auto;
    opacity: 100%;
    border-radius: 15px;
}
.nav{
    font-size: 40px;
}
h1,h2,h3,h4,h5,h6,dt{
    font-family: 'Aldrich', sans-serif;
    color:  #F29863;
}
.logo{
    text-align: center;
    max-width: 8%;
    height: auto;
    width: auto;
    display: block;
}
.logo2{
    text-align: center;
    max-width: 35%;
    padding-top: 3px;
    padding-left: 25px;
    height: auto;
    display: block;
}
p{
    font-size: 25px;
    font-family: 'Montserrat Alternates', sans-serif;
}
dt{
    font-size: 15px;
}
dd{
    font-size: 15px;
}
ul,li{
    text-align: justify;
    display: block;
}
.firma{
    position: relative;
    top:20em;
}
.firma2{
    font-family: 'Kaushan Script', cursive;
    color: whitesmoke;
}
label{
    font-family: 'Aldrich', sans-serif;
    color: white;
}
.btn1{
    text-align: center;
}
.icon{
    color: black;
    background-color: black;
}
.titulo{
    padding-top: 2.5em;
}
/* Copyrigth  */
.copyrigth{
    color: whitesmoke;
    font-family: 'Aldrich', sans-serif;
    font-size: 15px;
    text-align: justify;
    
}
.copyrigth1{
    color: whitesmoke;
    font-family: 'Aldrich', sans-serif;
    font-size: 15px;
    text-align: justify;
    
}
.copyrigth2{
    color:  #F29863;
    font-family: 'Aldrich', sans-serif;
    font-size: 15px;
    text-align: left;
    
}
.copyrigth:hover{
    color: black;
}

/* Barra de Navegacion */
.navbar{
    background-attachment: fixed;
    background-color: white;
   height: auto;
    width: 100%;
}
.offcanvas{
    background-color: gray;
    color:#0d0d0d;
    
}
.links{
    color:  #F29863;
    font-size: 30px;
    font-family: 'Aldrich', sans-serif;
}
.navbar-toggler{
    font-size: 20px;
}
/* Fin Barra de Navegacion */

/* Containers */
.containersolid{
    background-color: #734B3D;
    height: auto;
    padding-left: 1em;
    padding-right: 1em;
    
}
.container{

    color:whitesmoke;
    text-align: left;
    font-size: 30px;
    padding-left: 1em;
    padding-right: 1em;
    text-decoration: none;
    height: auto;
}
.container2{
    background-color:  #8C8C8C;
    color: white;
    text-align: center;
    font-size: 30px;
    padding-left: 1em;
    padding-right: 1em;
    text-decoration: none;
    height: auto;
     
}
.container-3{
    background-color: #737373;
    padding: 1.5em;
    text-align: center;
    color: white;
}
.container4{
    background-color: #732817;
    color:white;
    padding: 1.5em;
    font-size: 16px;
    display: flex;
}
.container5{
    background-color: whitesmoke;
    color: black;

    text-align: justify;
}
.container6{
    background-color: #26282E;
    color: whitesmoke;

    text-align: justify;

}
.container7{
    background-color: #81808C;
    color: whitesmoke;
    border-radius: 1em;
    margin: 1em;
    text-align: center;
    padding: 1em;
}
.container8{
    color: black;
    border-radius: 1em;
    margin: 1em;
    text-align:left;
    padding: 1em;
    border-color: black ;
    /* Borde*/
    box-shadow: 0 0 25px 0 rgba(20,27,201,.05);
    border-radius: 10px;
    background-color: white;
    transition: all .4s ease-in-out;
    box-shadow: 0 0 25px 0 rgba(20,27,202,.17);
}
.container9{
    background-color: #404040;
    color: white;
    padding-left: .5em;
    padding-right: .5em;
    text-align: center;
}
.container10{
    background-color: #0d0d0d;
    color: whitesmoke;
}
.container11{
    background-color: white;
    color: black;
    border-radius: 1em;
    margin: 1em;
    text-align:left;
    padding: 1em;
}
/* Fin Containers */

/* Backgronds Colors */
.backg{
    background-color:  #BFA065;
    text-align: left;
    border-radius: 1em;
    height: auto;
    padding: 1em;
    padding-left: 1em;
    padding-right: 1em;
}
.backg1{
    background-color: #81808C;
    padding: 1em;
    border-radius: 1em;
}
.backg2{
    background-color: #F2F2F0;
    padding: 1em;
    border-radius: 1em;
}
.backg3{
    background-color: white;
    padding: 1em;
    border-radius: 1em;
    padding-top: 3.5em;
}
.backg4{
    background-color:white;
    color: black;
    text-align: center;
    border-radius: 25px;
}
.backg5{
    background-color: #000000;
    color: white;
    text-align: center;
    border-radius: 25px;
}
.backg6{
    background-color: #D7D8D9;
}
.backg7{
    background-color: #A64B29;
    color: white;
}
.bg-dark{
    color: white;
    text-align: center;
}
/* Fin Backgronds Colors */

/*Bordes de imagen*/
.imgborder{
    border-radius: 25px;
    text-align: center;
}
/*Fin de Bordes Imagenes*/
.navegacion{
    font-family: 'Kite One', sans-serif;
    font-size: 15px;
    margin-left: 5px;
    margin-right: 5px;

}
.navegacion2{
    font-family: 'Kite One', sans-serif;
    font-size: 19px;
    margin-left: 5px;
    margin-right: 5px;

}
.iconc{
    color: silver;
    font-size: 20px;
}
.iconos{
text-decoration: none;

}
.text{
    right: 10%;
}

.mapa{

    text-align: center;

}
.navbar-nav{
    text-align: right ;
}
.list{
    float: left;
}

a{
    text-decoration: none;
    color:black;
    font-size: 15px;
}
a:hover{
    color: gold;
}

/* Utilidades 2 */
.contador{
    background-color: gray;
    max-height: 10%;
}
.benefits{
    opacity: 100%;
    border-top-left-radius: 100%;
    border-top-right-radius: 100%;
    border-bottom-right-radius: 100%;
    border-bottom-left-radius: 100%;
}
.title{
    font-size: 35px;
}
.bi {

    fill: currentColor;
    
  }
.center{
    text-align: center;
}
.justify{
    text-align: justify;
}
/* Fin de Utilidades 2*/

/*Producto*/
h5{
    text-align: center;
}
.historia{

    color: black;
    text-align: center;
    font-size: 16px;
    float: none;
    vertical-align: top;
    
}
.order{
    display: flex;
    text-align: center;
}
.beneficios{
    text-align: center;
    margin:2em;
}
.listb{
    text-align: center;
    display: flex;
}
.ingredientes{
    text-align:center;
}

.aboutmore{
    background-color: whitesmoke;
    border-radius: 5px;
    padding: 5px;
    
}
.aboutmore:hover{
color: black;
box-shadow: 0 0 25px 0 rgba(20,27,201,.05);
cursor: pointer;
background-image: linear-gradient(-45deg, #00BCD4 0%, #CEECF2 100%)
}
.publicidad{
    font-family: 'Kite One', sans-serif;
    font-size: small;
    margin-left: 5px;
    margin-right: 5px;
}
.publicidad:hover{
    color: #404040;
}
.mini{
    font-size: small;
}
.contenedor-producto{
    width:600px;
    height:550px;
    margin:auto;		
}

/* Productos*/

/*Contacto*/
.formulario{
    text-align: justify;
    margin-left: 20%;
    margin-right: 20%;
}
.formulario2{
    background-color: #732817;
    text-align: justify;
    padding-left: 20%;
    padding-right: 20%;
}
.desccont{
    text-align: center;
    margin-left: 15%;
    margin-right: 15%;
}
.btnbck{
    position: absolute;
}
/* CSS Boton Flotante*/

#botup{
    position: fixed;
    display: none;
    top: 0px;
    left: 100px;
    font-size: 3rem;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    line-height: 1;
    text-align: center;
    
    border-color: black;
    border-top-left-radius: 100%;
    border-top-right-radius: 100%;
    border-bottom-right-radius: 100%;
    border-bottom-left-radius: 100%;
    }

/* Ingredientes */
.about{
    font-size: 15px;
}
/*EFECTOS*/


.box{
    position: relative;
    width:100%;
    height: auto;
    display:inline-block;
    
}
.our-services{
    margin-top: 75px;
    padding-bottom: 30px;
    padding: 0 60px;
    min-height: 198px;
    text-align: center;
    font-size: 12px ;
    border-radius: 10px;
    background-color: #fff;
    transition: all .4s ease-in-out;
    box-shadow: 0 0 25px 0 rgba(20,27,202,.17);
}
.our-services:hover h4, .our-services:hover p{
    color: #fff;
}
.carousel-caption{
    background-color: whitesmoke;
    color: black;
    border-radius: 25px;
    opacity: 90%;
}
.I{
    box-shadow: 0 0 25px 0 rgba(20,27,201,.05);
    text-align: center;
    color: white;
    border-radius: 15px;
    padding: 1em;
    background-image: linear-gradient(-45deg, #3C3C40 0%,#8C8C8C 60%, #3C3C40  100%)
}
.II{
    box-shadow: 0 0 25px 0 rgba(20,27,201,.05);

    background-image: linear-gradient(-45deg, #000000 0%,#8D041B 50%, #D90628  100%)
}
.III:hover{
    box-shadow: 0 0 25px 0 rgba(20,27,201,.05);
    cursor: pointer;
    background-image: linear-gradient(-45deg, #A6A6A6  0%,  #F2F2F2 100%)
}
.IV:hover{
    box-shadow: 0 0 25px 0 rgba(20,27,201,.05);
    cursor: pointer;
    background-image: linear-gradient(-45deg, #F2F2F2 0%, #A6A6A6 100%)
}
.V:hover{
    box-shadow: 0 0 25px 0 rgba(20,27,201,.05);
    cursor: pointer;
    background-image: linear-gradient(-45deg, #D9D9D9 0%, #26282E 100%)
}
.VI:hover{
    box-shadow: 0 0 25px 0 rgba(20,27,201,.05);
    cursor: pointer;
    background-image: linear-gradient(-45deg, #26282E 0%, #D9D9D9 100%)
}
.VII:hover{
    box-shadow: 0 0 25px 0 rgba(20,27,201,.05);
    cursor: pointer;
    background-image: linear-gradient(-45deg, #BF5B04 0%, #8C3503 100%)
}
.VIII:hover{
    box-shadow: 0 0 25px 0 rgba(20,27,201,.05);
    cursor: pointer;
    background-image: linear-gradient(-45deg, #36362B 0%, #825534 100%)
}
.IX:hover{
    box-shadow: 0 0 25px 0 rgba(20,27,201,.05);
    cursor: pointer;
    background-image: linear-gradient(-45deg, #5D917D 0%, #E6D3A8 100%)
}
.X:hover{
    box-shadow: 0 0 25px 0 rgba(20,27,201,.05);
    cursor: pointer;
    background-image: linear-gradient(-45deg, #F2B705 0%, #A8AD80 100%)
}
.XI:hover{
    box-shadow: 0 0 25px 0 rgba(20,27,201,.05);
    cursor: pointer;
    background-image: linear-gradient(-45deg, #E8F2D0 0%, #A2A63F 100%)
}
.XII:hover{
    box-shadow: 0 0 25px 0 rgba(20,27,201,.05);
    cursor: pointer;
    background-image: linear-gradient(-45deg, #AEBF2A 0%, #F2F2F2 100%)
}
.XIII:hover{
    box-shadow: 0 0 25px 0 rgba(20,27,201,.05);
    cursor: pointer;
    background-image: linear-gradient(-45deg, #B0CC99 0%, #40281A 100%)
}
.XIV:hover{
    box-shadow: 0 0 25px 0 rgba(20,27,201,.05);
    cursor: pointer;
    background-image: linear-gradient(-45deg, #677E52 0%, #F6E8B1 100%)
}
.XV:hover{
    box-shadow: 0 0 25px 0 rgba(20,27,201,.05);
    cursor: pointer;
    background-image: linear-gradient(-45deg, #91D7F2 0%, #BF7534 100%)
}
.XVI:hover{
    box-shadow: 0 0 25px 0 rgba(20,27,201,.05);
    cursor: pointer;
    background-image: linear-gradient(-45deg, #D9A86C 0%, #592D14 100%)
}
.XVII:hover{
    box-shadow: 0 0 25px 0 rgba(20,27,201,.05);
    cursor: pointer;
    background-image: linear-gradient(-45deg, #5EAF95 0%, #8D982C 100%)
}
.XVIII:hover{
    box-shadow: 0 0 25px 0 rgba(20,27,201,.05);
    cursor: pointer;
    background-image: linear-gradient(-45deg, #A1FBDF 0%, #F29B30 100%)
}
.XIX:hover{
    box-shadow: 0 0 25px 0 rgba(20,27,201,.05);
    cursor: pointer;
    background-image: linear-gradient(-45deg, #639ED9 0%, #581C12 100%)
}
.XX:hover{
    box-shadow: 0 0 25px 0 rgba(20,27,201,.05);
    cursor: pointer;
    background-image: linear-gradient(-45deg, #A66D03 0%, #41A3A7 100%)
}
.XXI:hover{
    box-shadow: 0 0 25px 0 rgba(20,27,201,.05);
    cursor: pointer;
    background-image: linear-gradient(-45deg, #A2A63F 0%, #598269 100%)
}
.XXII:hover{
    box-shadow: 0 0 25px 0 rgba(20,27,201,.05);
    cursor: pointer;
    background-image: linear-gradient(-45deg, #81A698 0%, #212026 100%)
}

@media (min-width: 990px) {
    p{
        font-size:25px;
    }

    .logopras{
        width:14%;
        height: auto; 
        position: absolute;
        top: 10%;
        left: 80%;
        right: 10%;
        display: block;
    }
    .title{
        font-size: 40px;
    }
    .imgp{
        width: 75%;
        height: auto;
        opacity: 90%;
    }
    .container2{
        text-decoration: none;
        font-size: small;
        height: auto;
    }

    .container7{
        color: black;
        border-radius: 1em;
        margin: 1em;
        text-align: center;
    }
    .carrusel{
        width: 60%;
        margin-left: 20%;
    }
    .principal1{
        font-size: 18px;
        top: 35%;
        text-align: center;
    }
    .principal{
        top: 37%;
        padding-left: 37em;
    }

    .fondo{
        text-align: center;
        width: 80%;
        height: auto;
        padding-left: 20%;
        padding-right: 10%;
        
    }
    .navbar{

        
        width: 100%;
    }
    .nav-link{
        color: whitesmoke;
        font-size: 20px;
        font-family:'Aclonica', sans-serif
    }
    .logo{
        text-align: center;
        max-width: 4.5%;
        height: 100%;
        width: auto;
    }
    .navbar-toggler{
        font-size: 20px;
    }
    .logo2{
        text-align: justify;
        width: 20%;
        max-width: 55%;
        height: auto;

    }
    .container9{
        color: black;

        padding-left: .5em;
        padding-right: .5em;
        text-align: center;
    }
    #btninicio {
        position: fixed;
        bottom: 45px;
        right: 20px;
        z-index: 9999;
        font-size: 35px;
;
      }
      #btninicio2{
        position: fixed;
        bottom: 45px;
        left: 20px;
        z-index: 9999;
        font-size: 35px;

      }
    .iconc{
        color: silver;
        font-size: 20px;
        text-align: center;
    }
    .firma{
        position: relative;
        top:20em;
    }
    #MicrotorchV{
        width:850px;
        height:400px;
    }
    .container12{
        background-color: white;
        color: black;
        opacity: 70%;
        position:absolute;
        top: 10px;
        font-size: small;
        margin: 2em;
    }
    .copyrigth{
        color: whitesmoke;
        
        font-size: 18px;
    }
    .titulo{
        padding-top: 6em;
    }
    .principal3{
        text-align: center;
        color: gray;
        top: 35%;
        left: 30%;
        position: absolute;
        font-size: 10px;
    }
    .zoom {
        

        -webkit-transition: all .2s ease-in-out;
        -moz-transition: all .2s ease-in-out;
        -o-transition: all .2s ease-in-out;
        -ms-transition: all .2s ease-in-out;
    }
    .stars{
        padding-top:2.5em ;
        padding-left: 13em;
    
    }
}