/*Variables CSS*/

:root{
    --fuente-principal: 'Roboto Condensed', sans-serif;
    --fuente-secundaria: 'Roboto Condensed', sans-serif;
    --blanco: #FFF;
    --negro: #000;
    --color-principal: #d0280b;
    --color-hover: #2064C6;
    --color-secundario: ;
}

/*Fin Variables CSS*/

/*Reset*/

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

h5,h6{
    font-weight: normal;
}

h5{
    font-size:15px;
}

h6{
    font-size:13px;
}


body{
    padding-top:120px;
}

ul{
    list-style: none;
}

a{
    text-decoration: none;
    color:#d0280b;
}

.relative{
    position: relative;
}

.textoCentrado{
    text-align: center;
}

/*Fin Reset*/

/*Estilos Comunes*/

    /*Textos*/

    .titular,.titulo,.subtitulo{
        font-family: var(--fuente-principal);
        color: #d0280b;
        text-transform: uppercase;
        text-align: center;
        position: relative;
    }

    .subtitulo{
        font-size: 22px;
        margin: 10px 0;
    }

    p{
        font-size: 16px;
        font-family: var(--fuente-secundaria);
        text-align: justify;
        text-align-last: center;
        padding: 20px 10px;
        line-height: 30px;
    }

    /*Fin Textos*/

    /*Botones*/

    .btn{
        min-width: 40px;
        min-height: 40px;
        height: 40px;
        padding: 0 5px;
        margin: 20px auto;
        font-family: var(--fuente-principal);
        font-size: 14px;
        text-transform: uppercase;
        color: var(--blanco);
        background-color: var(--color-principal);
        border: none;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        transition: all .25s ease-in-out;
    }

    .btn:hover{
        background-color: var(--color-hover);
    }

    .rd{
        border-radius: 3px;
    }

        /*Casos Especiales*/

        #retorno-btn{
            font-size: 40px;
            color: var(--color-principal);
            position: fixed;
            right: 5px;
            bottom: 5px;
            cursor: pointer;
            transform: scale(0);
            transition: all .25s ease-in-out;
        }

        #retorno-btn:hover{
            color: var(--color-hover);
        }

        #fin-btn{
            position: fixed;
            top: 10px;
            right: 5px;
            z-index: 1000;
        }

        .editar-btn{
            text-align: center;
            float: right;
            margin-right: 40px;
            margin-top: -80px;
            position: relative;
            z-index: 100;
        }

        #menu-btn{
            width: 40px;
            border: none;
        }

            /*Estilos Y Animaciones Botón Menú*/

            .hamburger{
                display: flex;
                align-items: 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: #d0280b;
            }

            .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: #d0280b;
                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 Estilos Y Animaciones Botón Menú*/

        /*Fin Casos Especiales*/

    /*Botones*/

    /*Formularios*/

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

    .campo,.campo_select{
        margin: 10px 0;
        border: 1px solid #000;
        border-radius: 3px;
        position: relative;
        overflow: hidden;
    }

    .campo.obligatorio input{
        padding: 0 40px;
    }

    .campo_select select{
        height: 40px;
    }

    .campo input,.campo_select select,.campo textarea{
        width: 100%;
        font-family: var(--fuente-principal);
        font-size: 16px;
        padding-left: 40px;
    }

    .campo input,.campo_select select,.campo textarea{
        border: none;
    }

    .textarea{
        height: 300px;
    }

    textarea{
        height: 305px;
        padding: 10px 10px 10px 40px;
    }

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

    .campo::before,.campo_select::before{
        color: #d0280b;
        left: 0;
    }

    .obligatorio::after{
        content: '\f069';
        font-size: 10px;
        color: #FFF;
        background-color: #000;
        top: -1px;
        right: -1px;
        transform: skewX(-2deg);
        transition: all .25s ease-in-out;
    }

    .obligatorio.ok::after{
        content: '\f00c';
        font-size: 14px;
        background-color: darkgreen;
    }

    .obligatorio.error::after{
        content: '\f00d';
        font-size: 14px;
        background-color: darkred;
    }

    .buscar::before{
        content: '\f002';
        font-size: 26px;
    }

    .usuario::before{
        content: '\f007';
        font-size: 22px;
    }

    .clave::before{
        content: '\f084';
        font-size: 22px;
    }

    .texto::before{
        content: '\f303';
        font-size: 22px;
    }

    .menu::before{
        content: '\f0c9';
        font-size: 22px;
    }

    .link::before{
        content: '\f0c1';
        font-size: 22px;
    }

    .mail::before{
        content: '\f1fa';
        font-size: 22px;
    }

    .tlf::before{
        content: '\f095';
        font-size: 22px;
    }

    .asunto::before{
        content: '\f0e0';
        font-size: 22px;
    }

    .mensaje::before{
        content: '\f27a';
        font-size: 22px;
    }

    .pais::before{
        content: '\f0ac';
    }

    .ciudad::before{
        content: '\f64f';
    }

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

    .factura::before{
        content: '\f571';
    }

    /*Fin Formularios*/

    /*Cabecera*/

    #cabecera{
        height: 60px;
        box-shadow: 0 0 3px var(--negro);
        background-color: var(--blanco);
        z-index: 999;
        transition: all 1s ease-in-out;
        position: fixed;
        top:0;
    }

    #logo,#logo img{
        height: 50px;
    }

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

        /*Menú Principal*/

        #menu{
            background-color: #FFF;
            position: fixed;
            top: 60px;
            left: 0;
            z-index: 99;
            display: none;
        }

        #menu a,#menu span{
            height: 40px;
            padding: 0 15px;
            color: #d0280b;
            display: flex;
            align-items: center;
            justify-content: space-between;
            cursor: pointer;
            text-transform: uppercase;
        }

        #menu .subnivel{
            display: none;
        }

        #menu>ul>li>.subnivel a,#menu>ul>li>.subnivel span{
            color: #FFF;
            padding: 0 20px;
        }

        #menu>ul>li>.subnivel>li>.subnivel a,#menu>ul>li>.subnivel>li>.subnivel span{
            padding: 0 30px;
        }

        /*Fin Menú Principal*/

    /*Fin Cabecera*/

    /*Pie Página*/

    #pie_pagina{
        font-family: var(--fuente-secundaria);
        padding: 15px 0;
        background-color: var(--color-principal);
    }

    #pie_pagina p,#pie_pagina a{
        font-size: 14px;
        color: var(--blanco);
        text-align: center;
        line-height: 25px;
        margin: 5px 0;
    }

    #info i{
        margin: 0 5px;
    }

    /*Fin Pie Página*/

    /*Dialogs*/

    #dialogEditar,#iframeEditar{
        min-height: 400px;
    }

    #iframeEditar{
        border: none;
    }

    /*Fin Dialogs*/

    /*Media Queries*/

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

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

    @media only screen and (min-width: 1024px){
        
        /*Textos*/
        
        .subtitulo{
            font-size: 20px;
        }
        
        p{
            font-size: 16px;
            text-align-last: left;
            padding: 0;
        }
        
        /*Fin Textos*/
        
        /*Botones*/
        
        #menu-btn{
            display: none;
        }
        
        /*Fin Botones*/
        
        /*Cabecera*/
        
            /*Menú Principal*/

            #menu{
                height: 40px;
                padding-top: 0;
                transform: translateX(0);
                visibility: visible;
                box-shadow: none;
            }
        
            #menu i{
                margin: 0 5px;
            }
        
            #menu>.centrado>ul{
                justify-content: space-between;
            }

            #menu a,#menu span,#menu>ul>li>.subnivel a,#menu>ul>li>.subnivel span,#menu>ul>li>.subnivel>li>.subnivel a,#menu>ul>li>.subnivel>li>.subnivel span{
                padding: 0;
                transition: all .25s ease-in;
            }
        
            #menu ul li{
                height: 40px;
            }

            #menu>.centrado>ul>li>.subnivel{
                transform: translate(0,5px);
            }

            #menu>.centrado>ul>li>.subnivel>li>.subnivel{
                transform: translate(101%,-40px);
            }

            #menu>.centrado>ul>li>.subnivel,#menu>.centrado>ul>li>.subnivel>li>.subnivel{
                display: flex;
                background-color: #252122;
                border-radius: 3px;
                box-shadow: 0 3px 5px #000;
                visibility: hidden;
                opacity: 0;
                transition: all .5s ease-in-out;
            }
        
            #menu>.centrado>ul>li i{
                transition: all .5s ease-in-out;
            }
        
            #menu>.centrado>ul>li:hover i{
                transform: rotateX(180deg);
            }

            #menu>.centrado>ul>li:hover>.subnivel,#menu>.centrado>ul>li:hover>.desplegable::after,#menu>.centrado>ul>li>.subnivel>li:hover>.subnivel{
                visibility: visible;
                opacity: 1;
            }

            #menu>.centrado>ul>li>.subnivel a:hover,#menu>.centrado>ul>li>.subnivel span:hover,#menu>.centrado>ul>li>.subnivel>li>.subnivel a:hover,#menu>.centrado>ul>li>.subnivel>li>.subnivel span:hover{
                background-color: transparent;
                color: #FFF;
            }

            /*Fin Menú Principal*/
        
        /*Fin Cabecera*/
        
        #pie_pagina p,#pie_pagina a{
            font-size: 14px;
            color: var(--blanco);
            text-align: center;
            text-align-last: center;
            line-height: 25px;
            margin: 5px 0;
        }
        
    }

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

        .titular,.titulo,.subtitulo{
            font-size: 25px;
        }

        p{
            font-size: 20px;
        }

        /*Fin Textos*/
        
        /*Dialogs*/

        #dialogEditar,#iframeEditar{
            min-height: 600px;
        }

        /*Fin Dialogs*/
    }

    /*Fin Media Queries*/

/*Estilos Comunes*/