/*Reset*/

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{
    padding-top: 70px;
    font-family: 'Montserrat',sans-serif;
}

ul{
    list-style: none;  
}

a{
    text-decoration: none;
}

/*Fin Reset*/

/*Estilos Comunes*/

    /*Textos*/

    h1,h2,h3,h4,h5,h6,p{
        color: #2D3332;
    }

    h1,h2,h3,h4,h5,h6{
        margin: 5px 0;
        text-align: center;
        text-transform: uppercase;
    }

    h1{
        font-size: 28px;
    }

    h2{
        font-size: 24px;
    }

    h3{
        font-size: 20px;
    }

    p{
        font-size: 15px;
        line-height: 30px;
        text-align: justify;
        text-align-last: center;
        margin: 15px 0;
    }

    strong{
        color: #2D3332;
    }

    /*Fin Textos*/

    /*Listas*/

    .lista li{
        font-size: 15px;
        margin: 5px 0;
        padding-left: 15px;
        color: #2D3332;
        position: relative;
    }

    .lista li::before{
        font-size: 20px;
        font-family: "Font Awesome 5 Free";
        font-weight: 900;
        position: absolute;
        left: 0;
    }

    /*Fin Listas*/

    /*Botones*/

    .btn{
        font-weight: 600;
        text-transform: uppercase;
        padding: 10px 25px;
        margin: 15px 0;
        color: #FFF;
        background-color: #2D3332;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
    }

    .i-btn{
        font-size: 30px;
        cursor: pointer;
    }

    .btn.rd{
        border-radius: 3px;
    }

    .btn.e{
        border-radius: 25px;
    }

    .btn.tr{
        color: #252122;
        border: 3px solid #252122;
        background-color: transparent;
    }

    .btn i{
        margin: 0 10px;
    }

        /*Botones Especiales*/

            /*Botón Retorno*/

            #retorno-btn{
                font-size: 40px;
                right: 10px;
                bottom: 10px;
                opacity: .8;
                z-index: 9999;
                transition: all .5s ease-in-out;
                cursor: pointer;
            }

            #retorno-btn:hover{
                opacity: 1;
                text-shadow: 0 0 3px #000;
                transform: scale(1.1);
            }

            /*Fin Botón Retorno*/

            /*Botón Información*/
                
            #info-btn{
                font-size: 30px;
            }
                
            /*Fin Botón Información*/

            /*Botones Tienda*/

            #login-btn{
                font-size: 30px;
            }

            #carrito-btn{
                font-size: 30px;
            }

            #carrito-btn span{
                width: 20px;
                height: 20px;
                padding: 2px;
                font-size: 20px;
                font-weight: 600;
                border: 1px solid #000;
                border-radius: 50%;
                background-color: #FFF;
                top: 5px;
                right: -3px;
            }

            /*Fin Botones Tienda*/

            /*Botón Menú Hamburguesa*/

            .hamburger{
                width: 30px;
                height: 60px;
                display: flex;
                align-items: center;
                justify-content: center;
                cursor: pointer;
                transition-property: opacity, filter;
                transition-duration: 0.15s;
                transition-timing-function: linear;
                text-transform: none;
                background-color: transparent;
                overflow: visible; 
            }

            .hamburger.is-active .hamburger-inner,
            .hamburger.is-active .hamburger-inner::before,
            .hamburger.is-active .hamburger-inner::after{
                background-color: #252122;
            }

            .hamburger-box{
                width: 25px;
                height: 20px;
                display: inline-block;
                position: relative;
            }

            .hamburger-inner{
                display: block;
                top: 50%;
                margin-top: -2px;
            }

            .hamburger-inner, .hamburger-inner::before, .hamburger-inner::after{
                width: 25px;
                height: 3px;
                background-color: #252122;
                border-radius: 4px;
                position: absolute;
                transition-property: transform;
                transition-duration: 0.15s;
                transition-timing-function: ease;
            }

            .hamburger-inner::before, .hamburger-inner::after{
                content: "";
                display: block;
            }

            .hamburger-inner::before{
                top: -7px;
            }

            .hamburger-inner::after{
                bottom: -7px;
            }

                /*Squeeze*/

                .hamburger--squeeze .hamburger-inner{
                    transition-duration: 0.075s;
                    transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
                }

                .hamburger--squeeze .hamburger-inner::before{
                    transition: top 0.075s 0.12s ease, opacity 0.075s ease;
                }

                .hamburger--squeeze .hamburger-inner::after{
                    transition: bottom 0.075s 0.12s ease, transform 0.075s cubic-bezier(0.55, 0.055, 0.675, 0.19);
                }

                .hamburger--squeeze.is-active .hamburger-inner{
                    transform: rotate(45deg);
                    transition-delay: 0.12s;
                    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
                }

                .hamburger--squeeze.is-active .hamburger-inner::before{
                    top: 0;
                    opacity: 0;
                    transition: top 0.075s ease, opacity 0.075s 0.12s ease;
                }

                .hamburger--squeeze.is-active .hamburger-inner::after{
                    bottom: 0;
                    transform: rotate(-90deg);
                    transition: bottom 0.075s ease, transform 0.075s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1);
                } 

            /*Fin Botón Menú Hamburguesa*/

        /*Fin Botones Especiales*/

    /*Fin Botones*/

    /*Formularios*/

    form{
        margin: 10px 0;
    }

    fieldset{
        margin: 10px 0;
        padding: 5px;
        border-radius: 3px;
    }

    fieldset div{
        margin: 3px 0;
    }

    fieldset div span{
        font-size: 15px;
    }

    legend{
        font-size: 16px;
        font-weight: 600;
        text-transform: uppercase;
        margin: 0 5px;
        padding: 0 5px;
    }

    input[type="checkbox"]{
        width: 15px;
        height: 15px;
        margin-right: 5px;
        cursor: pointer;
    }

    button{
        border: none;
    }

    input,select,textarea{
        width: 100%;
        padding-left: 40px;
        font-family: 'Montserrat', sans-serif;
        border: none;
        background-color: transparent;
    }

    textarea{
        padding-top: 10px;
    }

    input,select,.campo,.campo_select{
        height: 40px;
    }

    input[type=file]{
        display: none;
    }

    .campo,.campo_textarea{
        overflow: hidden;
    }

    .campo,.campo_select,.campo_textarea{
        margin: 2px 0;
        border: 1px solid #999;
        border-radius: 3px;
        background-color: #FFF;
        position: relative;
    }
    
    .campo_textarea,textarea{
        height: 150px;
    }

    .campo::before,.campo_select::before,.campo_textarea::before,.obligatorio::after{
        width: 40px;
        height: 40px;
        font-family: 'Font Awesome 5 Free';
        font-size: 18px;
        font-weight: 900;
        position: absolute;
        top: 0;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .campo::before,.campo_select::before{
        left: 0;
    }

    .complemento{
        display: none;
    }

    .campo_select::before{
        content: '\f07c';
    }

    .texto::before{
        content: '\f303';
    }

    .usuario::before{
        content: '\f007';
    }

    .clave::before{
        content: '\f084';
    }

    .email::before{
        content: '\f1fa';
    }

    .asunto::before{
        content: '\f27a';
    }

    .mensaje::before{
        content: '\f0e0';
    }

    .font::before{
        content: '\f031';
    }

    .url::before{
        content: '\f0c1';
    }

    .direccion::before{
        content: '\f3c5';
    }

    .tlf::before{
        content: '\f095';
    }

    .movil::before{
        content: '\f3cd';
    }

    .fax::before{
        content: '\f1ac';
    }

    .colorpicker::before{
        content: '\f53f';
    }

    .rss::before{
        content: '\f09e';
    }

    .facebook::before{
        content: '\f39e';
    }

    .twitter::before{
        content: '\f081';
    }

    .google::before{
        content: '\f0d4';
    }

    .instagram::before{
        content: '\f16d';
    }

    .linkedin::before{
        content: '\f08c';
    }

    .pinterest::before{
        content: '\f0d3';
    }

    .youtube::before{
        content: '\f167';
    }

    .vimeo::before{
        content: '\f40a';
    }

    .tripadvisor::before{
        content: '\f262';
    }

    .obligatorio::after{
        content: '\f069';
        font-size: 10px;
        color: #FFF;
        right: 0;
        background-color: #252122;
        transform: skewX(-2deg) translateX(1px);
    }

    .obligatorio.ok::after{
        content: '\f00c';
        background-color: green; 
    }

    .obligatorio.error::after{
        content: '\f00d';
        background-color: red;
    }

    .archivo label{
        margin: 0;
        cursor: pointer;
    }

    .preview,.preview img{
        height: 150px;
    }

    .preview{
        margin: 5px 0;
        border: 1px solid #999;
        border-radius: 3px;
        overflow: hidden;
    }

        /*Protección Datos*/

        #info p{
            font-size: 14px;
            line-height: 20px;
            text-align-last: left;
        }

        #info div{
            margin: 5px 0;
        }

        #info div p{
            margin: 0;
        }

        #info input{
            margin-top: 5px;
        }

        #info strong{
            color: #2D3332;
        }

        /*Fin Protección Datos*/

    /*Fin Formularios*/

    /*Menús*/

    #main-menu{
        width: 80%;
        height: 100vh;
        background-color: #FFF;
        position: fixed;
        top: 71px;
        left: 0;
        transform: translateX(-100%);
        opacity: 0;
        transition: all .5s ease-in-out;
    }

    #main-menu ul{
        width: 100%;
        padding: 15px 0;
    }

    #main-menu li,#main-menu a{
        width: 100%;
        height: 40px;
    }

    #main-menu a{
        font-size: 16px;
        color: #2D3332;
        padding: 0 5px;
        display: flex;
        text-transform: uppercase;
        display: flex;
        align-items: center;
        transition: all .5s ease-in-out;
    }

    #main-menu a.active{
        color: #FFF;
        font-weight: 600;
        background-color: #000;
    }

    #main-menu a:hover{
        color: #FFF;
        background-color: #2D3332;
    }

    /*Fin Menús*/

    /*Elementos Comunes*/

    #cabecera{
        height: 70px;
        background-color: #FFF;
        box-shadow: 0 0 3px #000;
        top: 0;
        z-index: 9999;
    }

    #logo{
        height: 40px;
    }

    #ajuste{
        width: 40px;
        height: 70px;
    }

    #pie_pagina p,#pie_pagina a{
        font-size: 14px;
        color: #FFF;
    }

    #pie_pagina p{
        margin: 5px 0;
        line-height: 20px;
        text-align: center;
    }

    /*Fin Elementos Comunes*/

/*Fin Estilos Comunes*/

/*Media Queries*/

@media only screen and (min-width: 400px){}

@media only screen and (min-width: 600px){
    
    /*Menús*/

    #main-menu{
        width: 50%;
    }
    
    /*Fin Menús*/
    
}

@media only screen and (min-width: 800px){
    
    /*Textos*/

    h1{
        font-size: 37px;
    }

    h2{
        font-size: 28px;
    }

    h3{
        font-size: 22px;
    }

    /*Fin Textos*/
    
    /*Menús*/

    #main-menu{
        width: 40%;
    }
    
    /*Fin Menús*/
    
}

@media only screen and (min-width: 1000px){
        
    /*Menús*/

    #main-menu{
        width: 35%;
    }
    
    /*Fin Menús*/
    
}

@media only screen and (min-width: 1200px){
    
    /*Textos*/

    h1{
        font-size: 45px;
    }

    h2{
        font-size: 32px;
    }

    /*Fin Textos*/
    
    /*Menús*/
    
    #menu-btn{
        display: none;
    }

    #main-menu{
        width: 70%;
        height: 70px;
        position: relative;
        top: 0;
        opacity: 1;
        transform: translateX(0);
    }
    
    #main-menu ul{
        padding: 0;
        display: flex;
    }
    
    #main-menu li,#main-menu a{
        height: 70px;
    }
    
    #main-menu a{
        font-size: 14px;
        padding: 0;
        justify-content: center;
    }
    
    /*Fin Menús*/
    
}

@media only screen and (min-width: 1400px){
    
    /*Textos*/
    
    p,.lista li{
        font-size: 17px;
        line-height: 35px;
    }

    /*Fin Textos*/
    
}

@media only screen and (min-width: 1800px){
    
    /*Textos*/

    h1{
        font-size: 50px;
    }

    h2{
        font-size: 35px;
    }
    
    p,.lista li{
        font-size: 18px;
    }

    /*Fin Textos*/
    
}

/*Fin Media Queries*/