﻿/*-----Fernando Facio Reyes-----*/

/*#region General */
.Header_Container {
    width: 100%;
}

.dv_Header {
    background-color: #302c26;
    display: flex;
    justify-content: space-between;
    position: relative;
    z-index: 11;
}

    .dv_Header .dv_img_Logo {
        height: 7rem;
    }

        .dv_Header .dv_img_Logo img {
            height: 100%;
            display: block;
        }


    .dv_Header .container_Menu_Options {
        width: 100%;
        display: grid;
        opacity: 1;
    }

        .dv_Header .container_Menu_Options .dv_MenuOpts_Header {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(7.4rem, 1fr));
            align-items: flex-end;
            height: 100%;
            width: 100%;
            box-sizing: border-box;
        }

        .dv_Header .container_Menu_Options .dv_btn_Menu {
            display: flex;
            align-items: center;
            justify-content: center;
            border-bottom: .2rem solid transparent;
            padding: .5rem 0;
            box-sizing: border-box;
        }

            .dv_Header .container_Menu_Options .dv_btn_Menu .Btn_Menu {
                cursor: pointer;
                border: none;
                font-size: 1rem;
                font-weight: 600;
                background-color: transparent;
                color: #ffffff;
                transition: 0.4s;
            }

                .dv_Header .container_Menu_Options .dv_btn_Menu .Btn_Menu:hover {
                    color: rgba(255, 255, 255, 0.5);
                }

        .dv_Header .container_Menu_Options .dv_btn_Menu_selected {
            box-sizing: border-box;
            display: flex;
            align-items: center;
            justify-content: center;
            border-bottom: .2rem solid #fff500;
            padding: .5rem 0;
        }

            .dv_Header .container_Menu_Options .dv_btn_Menu_selected .Btn_Menu {
                cursor: pointer;
                border: none;
                font-size: 1rem;
                font-weight: 600;
                background-color: transparent;
                color: #ffffff;
                transition: 0.4s;
            }

                .dv_Header .container_Menu_Options .dv_btn_Menu_selected .Btn_Menu:hover {
                    color: rgba(255, 255, 255, 0.5);
                }

    .dv_Header .container_Btns_Header {
        box-sizing: border-box;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0 1%;
    }
        /*#region Btn_IniciarLegado */
        .dv_Header .container_Btns_Header #dv_Btn_MenuIniciarLE {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100%;
        }

            .dv_Header .container_Btns_Header #dv_Btn_MenuIniciarLE > .Btn_IniciarLE {
                cursor: pointer;
                border: none;
                border-radius: 100vw;
                width: max-content;
                padding: .65rem 1rem;
                font-size: 1rem;
                font-weight: 600;
                background-color: #fff500;
                color: #000000;
                transition: 0.5s;
            }

                .dv_Header .container_Btns_Header #dv_Btn_MenuIniciarLE > .Btn_IniciarLE:hover {
                    color: #ffffff;
                    background-color: #000000;
                }
/*#endregion */

.dv_Panel_Header {
    width: -webkit-fill-available;
    z-index: 10;
    position: absolute;
    background-color: #5c5953;
    display: none;
    justify-content: center;
    padding: 1.25%;
}

    .dv_Panel_Header .dv_Container_Certificados, .dv_Container_Conoce {
        display: none;
        justify-content: center;
        grid-template-columns: 1fr 1fr 1fr;
    }

    .dv_Panel_Header .container_txt {
        margin: 0;
        padding-left: 2%;
        border-left: 0.1vw solid rgba(255, 255, 255, 0.2);
    }

    .dv_Panel_Header .div_txt {
        display: flex;
        white-space: nowrap;
        margin-bottom: 1rem;
    }

    .dv_Panel_Header .div_txt-sub {
        margin-bottom: 1.25rem;
    }

    .dv_Panel_Header .text {
        color: white;
        font-size: 1rem;
        font-style: normal;
        font-weight: 600;
    }

    .dv_Panel_Header .text-sub {
        cursor: pointer;
        border: none;
        background-color: transparent;
        color: #ffffff;
        font-style: normal;
        transition: 0.5s;
        white-space: initial;
        text-align: initial;
        font-size: .85rem;
        display: block;
    }

        .dv_Panel_Header .text-sub:hover {
            color: rgba(255, 255, 255, 0.5);
        }

    .dv_Panel_Header .Container_Btn_MenuMoviles {
        display: none;
    }

    .dv_Panel_Header .Container_Btn_volverMenuMoviles {
        display: none;
    }

/*#region Animations_Menu */
@keyframes ShowMenuSecMovil {
    from {
        opacity: 0;
        transform: translateY(-100%);
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes HideMenuSecMovil {

    from {
        opacity: 1;
        transform: translateY(0);
    }

    to {
        transform: translateY(-100%);
        opacity: 0;
    }
}
/*#endregion */
/*#endregion */

/*moviles*/
@media (max-width: 767px) {

    /*#region Btn_IniciarLegado */
    .dv_Header .container_Btns_Header #dv_Btn_MenuIniciarLE {
        position: fixed;
        right: 0;
        top: 0;
        height: 5rem;
        width: 15rem;
        border: none;
        background-color: #302c26;
        /*opacity: 1;*/
        opacity: 0;
    }
    /*#endregion */

    /*#region Btn_MenuMoviles */
    .Container_Btn_MenuMoviles {
        z-index: 11;
        position: fixed;
        right: 0;
        top: 0;
        height: 5rem;
        width: 5rem;
        background-color: #302c26;
        display: grid;
        justify-content: center;
        align-items: center;
    }

        .Container_Btn_MenuMoviles .menu_icon {
            height: 2.8rem;
            width: 3.2rem;
            padding: 0.7rem;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: center;
            background-color: transparent;
            transition: all .2s ease;
        }

            .Container_Btn_MenuMoviles .menu_icon span {
                width: 100%;
                height: 0.22rem;
                border-radius: 100vw;
                background-color: white;
                transition: all .4s ease;
            }

            .Container_Btn_MenuMoviles .menu_icon:hover span {
                background-color: #979797;
            }

        .Container_Btn_MenuMoviles .menu_icon2 {
            height: 5rem;
            width: 5rem;
            padding: 1.25rem;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: center;
            background-color: transparent;
            transition: all .2s ease;
        }

            .Container_Btn_MenuMoviles .menu_icon2 span {
                width: 100%;
                height: 0.3rem;
                border-radius: 100vw;
                background-color: white;
                transition: all .4s ease;
            }

                .Container_Btn_MenuMoviles .menu_icon2 span:nth-child(1) {
                    transform: translateY(1rem) rotate(-45deg);
                }

                .Container_Btn_MenuMoviles .menu_icon2 span:nth-child(2) {
                    transform: translate(-50%);
                    opacity: 0;
                }

                .Container_Btn_MenuMoviles .menu_icon2 span:nth-child(3) {
                    transform: translateY(-1.19rem) rotate(45deg);
                }



    /*#endregion */

    /*#region Animations_Menu */
    @keyframes ShowMenuMovil {
        from {
            width: 0;
            opacity: 0;
        }

        to {
            width: 15rem;
            opacity: 1;
        }
    }

    @keyframes HideMenuMovil {

        from {
            width: 15rem;
            opacity: 1;
        }

        to {
            width: 0;
            opacity: 0;
        }
    }

    @keyframes ShowMenuSecMovil {
        from {
            transform: translateX(100%);
            opacity: 0;
        }

        to {
            transform: translateX(0);
            opacity: 1;
        }
    }

    @keyframes HideMenuSecMovil {

        from {
            transform: translateX(0);
            opacity: 1;
        }

        to {
            transform: translateX(100%);
            opacity: 0;
        }
    }


    @keyframes MoveBtnMenuMoviles {
        from {
            right: 0;
        }

        to {
            right: 15rem;
        }
    }

    @keyframes MoveBtnMenuMoviles2 {
        from {
            right: 15rem;
        }

        to {
            right: 0;
        }
    }
    /*#endregion */

    /*#endregion */

    .General_Container {
        display: block;
        overflow: hidden;
        width: 100%;
        overflow: visible;
    }

    .dv_Header {
        position: fixed;
        width: 100%;
        z-index: 11;
    }

        .dv_Header .dv_img_Logo {
            height: 5rem;
        }

        .dv_Header .container_Menu_Options {
            display: none;
            opacity: 0;
            position: fixed;
            top: 5rem;
            right: 0;
            width: 0;
            height: 100%;
            overflow: hidden;
            justify-content: flex-start;
            background-color: #302c26;
            grid-template-columns: 1fr;
        }

            .dv_Header .container_Menu_Options .dv_MenuOpts_Header {
                grid-template-columns: 1fr;
                box-sizing: border-box;
                height: min-content;
            }

            .dv_Header .container_Menu_Options .dv_btn_Menu {
                justify-content: flex-start;
                display: flex;
                align-items: flex-end;
                border: none;
                padding: 0;
                margin: 0;
            }

                .dv_Header .container_Menu_Options .dv_btn_Menu .Btn_Menu {
                    text-align: left;
                    width: 100%;
                    border: none;
                    font-size: 1.25rem;
                    font-weight: 500;
                    padding: 10%;
                    margin: 0;
                }

                    .dv_Header .container_Menu_Options .dv_btn_Menu .Btn_Menu:hover {
                        color: black;
                        background-color: white;
                    }

            .dv_Header .container_Menu_Options .dv_btn_Menu_selected {
                justify-content: flex-start;
                display: flex;
                align-items: flex-end;
                border: none;
                padding: 0;
                margin: 0;
            }

            .dv_Header .container_Menu_Options .dv_btn_Menu_selected {
                justify-content: flex-start;
                display: flex;
                align-items: flex-end;
                border: none;
                padding: 0;
                margin: 0;
            }

                .dv_Header .container_Menu_Options .dv_btn_Menu_selected .Btn_Menu {
                    text-align: left;
                    width: 100%;
                    border: none;
                    font-size: 1.25rem;
                    font-weight: 500;
                    padding: 10%;
                    margin: 0;
                }

                    .dv_Header .container_Menu_Options .dv_btn_Menu_selected .Btn_Menu:hover {
                        color: black;
                        background-color: white;
                    }

    .dv_Panel_Header {
        z-index: 12;
        position: fixed;
        right: 0;
        top: 0;
        width: 15rem;
        height: 100vh;
        grid-template-columns: 1fr;
        padding: 0;
        box-sizing: border-box;
    }

        .dv_Panel_Header .dv_Container_Certificados {
            display: none;
            grid-template-columns: 1fr;
            box-sizing: border-box;
            height: min-content;
        }

        .dv_Panel_Header .dv_Container_Conoce {
            display: none;
            grid-template-columns: 1fr;
            box-sizing: border-box;
            height: min-content;
        }

        .dv_Panel_Header .container_txt {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
            border: none;
        }

            .dv_Panel_Header .container_txt .div_txt {
                white-space: normal;
                margin: 0;
            }

                .dv_Panel_Header .container_txt .div_txt .text {
                    color: white;
                    font-size: 1rem;
                    background-color: rgba(64, 59, 51, 0.5);
                    padding: 1rem;
                    width: 100%;
                }

            .dv_Panel_Header .container_txt .div_txt-sub {
                width: 100%;
                margin-bottom: 0;
                padding: 0;
                box-sizing: border-box;
            }

                .dv_Panel_Header .container_txt .div_txt-sub .text-sub {
                    color: #ffffff;
                    font-size: 1rem;
                    padding: 1.09rem 1rem;
                    width: 100%;
                }

                    .dv_Panel_Header .container_txt .div_txt-sub .text-sub:hover {
                        color: black;
                        background-color: white;
                    }

        /*#region Btn_volverMenuMoviles */
        .dv_Panel_Header .Container_Btn_volverMenuMoviles {
            display: block;
            position: fixed;
            z-index: 120;
            bottom: 0;
            right: 0;
            height: 5vh;
            width: 15rem;
            background-color: #5c5953;
        }

            .dv_Panel_Header .Container_Btn_volverMenuMoviles .Btn_volverMenuMoviles {
                width: 100%;
                height: 100%;
                color: #ffffff;
                font-size: 1rem;
                font-weight: 600;
                cursor: pointer;
                border: none;
                background-color: transparent;
                text-align: center;
                display: block;
                transition: 0.5s;
            }

                .dv_Panel_Header .Container_Btn_volverMenuMoviles .Btn_volverMenuMoviles:hover {
                    color: black;
                    background-color: white;
                }

    /*#endregion */
    /*#endregion */
    /*#endregion */
}

/*Tabletas*/
@media (min-width: 768px) and (max-width:1023px) {

    /*#region Btn_IniciarLegado */
    .dv_Header .container_Btns_Header #dv_Btn_MenuIniciarLE {
        position: fixed;
        right: 0;
        top: 0;
        height: 5rem;
        width: 15rem;
        border: none;
        background-color: #302c26;
        /*opacity: 1;*/
        opacity: 0;
    }
    /*#endregion */

    /*#region Btn_MenuMoviles */
    .Container_Btn_MenuMoviles {
        z-index: 11;
        position: fixed;
        right: 0;
        top: 0;
        height: 5rem;
        width: 5rem;
        background-color: #302c26;
        display: grid;
        justify-content: center;
        align-items: center;
    }

        .Container_Btn_MenuMoviles .menu_icon {
            height: 2.8rem;
            width: 3.2rem;
            padding: 0.7rem;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: center;
            background-color: transparent;
            transition: all .2s ease;
        }

            .Container_Btn_MenuMoviles .menu_icon span {
                width: 100%;
                height: 0.22rem;
                border-radius: 100vw;
                background-color: white;
                transition: all .4s ease;
            }

            .Container_Btn_MenuMoviles .menu_icon:hover span {
                background-color: #979797;
            }

        .Container_Btn_MenuMoviles .menu_icon2 {
            height: 5rem;
            width: 5rem;
            padding: 1.25rem;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: center;
            background-color: transparent;
            transition: all .2s ease;
        }

            .Container_Btn_MenuMoviles .menu_icon2 span {
                width: 100%;
                height: 0.5rem;
                border-radius: 100vw;
                background-color: white;
                transition: all .4s ease;
            }

                .Container_Btn_MenuMoviles .menu_icon2 span:nth-child(1) {
                    transform: translateY(1rem) rotate(-45deg);
                }

                .Container_Btn_MenuMoviles .menu_icon2 span:nth-child(2) {
                    transform: translate(-50%);
                    opacity: 0;
                }

                .Container_Btn_MenuMoviles .menu_icon2 span:nth-child(3) {
                    transform: translateY(-1rem) rotate(45deg);
                }



    /*#endregion */

    /*#region Animations_Menu */
    @keyframes ShowMenuMovil {
        from {
            width: 0;
            opacity: 0;
        }

        to {
            width: 15rem;
            opacity: 1;
        }
    }

    @keyframes HideMenuMovil {

        from {
            width: 15rem;
            opacity: 1;
        }

        to {
            width: 0;
            opacity: 0;
        }
    }

    @keyframes ShowMenuSecMovil {
        from {
            transform: translateX(100%);
            opacity: 0;
        }

        to {
            transform: translateX(0);
            opacity: 1;
        }
    }

    @keyframes HideMenuSecMovil {

        from {
            transform: translateX(0);
            opacity: 1;
        }

        to {
            transform: translateX(100%);
            opacity: 0;
        }
    }


    @keyframes MoveBtnMenuMoviles {
        from {
            right: 0;
        }

        to {
            right: 15rem;
        }
    }

    @keyframes MoveBtnMenuMoviles2 {
        from {
            right: 15rem;
        }

        to {
            right: 0;
        }
    }
    /*#endregion */

    /*#endregion */

    .General_Container {
        display: block;
        overflow: hidden;
        width: 100%;
        overflow: visible;
    }

    .dv_Header {
        position: fixed;
        width: 100%;
        z-index: 11;
    }

        .dv_Header .dv_img_Logo {
            height: 5rem;
        }

        .dv_Header .container_Menu_Options {
            display: none;
            opacity: 0;
            position: fixed;
            top: 5rem;
            right: 0;
            width: 0;
            height: 100%;
            overflow: hidden;
            justify-content: flex-start;
            background-color: #302c26;
            grid-template-columns: 1fr;
        }

            .dv_Header .container_Menu_Options .dv_MenuOpts_Header {
                grid-template-columns: 1fr;
                box-sizing: border-box;
                height: min-content;
            }

            .dv_Header .container_Menu_Options .dv_btn_Menu {
                justify-content: flex-start;
                display: flex;
                align-items: flex-end;
                border: none;
                padding: 0;
                margin: 0;
            }

                .dv_Header .container_Menu_Options .dv_btn_Menu .Btn_Menu {
                    text-align: left;
                    width: 100%;
                    border: none;
                    font-size: 1.25rem;
                    font-weight: 500;
                    padding: 10%;
                    margin: 0;
                }

                    .dv_Header .container_Menu_Options .dv_btn_Menu .Btn_Menu:hover {
                        color: black;
                        background-color: white;
                    }

            .dv_Header .container_Menu_Options .dv_btn_Menu_selected {
                justify-content: flex-start;
                display: flex;
                align-items: flex-end;
                border: none;
                padding: 0;
                margin: 0;
            }

            .dv_Header .container_Menu_Options .dv_btn_Menu_selected {
                justify-content: flex-start;
                display: flex;
                align-items: flex-end;
                border: none;
                padding: 0;
                margin: 0;
            }

                .dv_Header .container_Menu_Options .dv_btn_Menu_selected .Btn_Menu {
                    text-align: left;
                    width: 100%;
                    border: none;
                    font-size: 1.25rem;
                    font-weight: 500;
                    padding: 10%;
                    margin: 0;
                }

                    .dv_Header .container_Menu_Options .dv_btn_Menu_selected .Btn_Menu:hover {
                        color: black;
                        background-color: white;
                    }

    .dv_Panel_Header {
        z-index: 12;
        position: fixed;
        right: 0;
        top: 0;
        width: 15rem;
        height: 100vh;
        grid-template-columns: 1fr;
        padding: 0;
        box-sizing: border-box;
    }

        .dv_Panel_Header .dv_Container_Certificados {
            display: none;
            grid-template-columns: 1fr;
            box-sizing: border-box;
            height: min-content;
        }

        .dv_Panel_Header .dv_Container_Conoce {
            display: none;
            grid-template-columns: 1fr;
            box-sizing: border-box;
            height: min-content;
        }

        .dv_Panel_Header .container_txt {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
            border: none;
        }

            .dv_Panel_Header .container_txt .div_txt {
                white-space: normal;
                margin: 0;
            }

                .dv_Panel_Header .container_txt .div_txt .text {
                    color: white;
                    font-size: 1rem;
                    background-color: rgba(64, 59, 51, 0.5);
                    padding: 1rem;
                    width: 100%;
                }

            .dv_Panel_Header .container_txt .div_txt-sub {
                width: 100%;
                margin-bottom: 0;
                padding: 0;
                box-sizing: border-box;
            }

                .dv_Panel_Header .container_txt .div_txt-sub .text-sub {
                    color: #ffffff;
                    font-size: 1rem;
                    padding: 1.09rem 1rem;
                    width: 100%;
                }

                    .dv_Panel_Header .container_txt .div_txt-sub .text-sub:hover {
                        color: black;
                        background-color: white;
                    }

        /*#region Btn_volverMenuMoviles */
        .dv_Panel_Header .Container_Btn_volverMenuMoviles {
            display: block;
            position: fixed;
            z-index: 120;
            bottom: 0;
            right: 0;
            height: 5vh;
            width: 15rem;
            background-color: #5c5953;
        }

            .dv_Panel_Header .Container_Btn_volverMenuMoviles .Btn_volverMenuMoviles {
                width: 100%;
                height: 100%;
                color: #ffffff;
                font-size: 1rem;
                font-weight: 600;
                cursor: pointer;
                border: none;
                background-color: transparent;
                text-align: center;
                display: block;
                transition: 0.5s;
            }

                .dv_Panel_Header .Container_Btn_volverMenuMoviles .Btn_volverMenuMoviles:hover {
                    color: black;
                    background-color: white;
                }

    /*#endregion */
    /*#endregion */
    /*#endregion */
}

@media (max-width: 480px) {
    .dv_Header .dv_img_Logo img {
        height: 90%;
        display: block;
    }
}

/*Portátiles*/
@media (min-width: 1024px) and (max-width:1280px) {

    .dv_Header .dv_img_Logo {
        height: 6rem;
    }

    .dv_Header .container_Menu_Options .dv_MenuOpts_Header {
        grid-template-columns: repeat(auto-fill, minmax(6.7rem, 1fr));
    }
}
/*Escritorio*/
@media (min-width: 1281px) {
}
