﻿@media (max-width: 1280px) {

    /*+++++++++++++++++++++++++++++++++++++++++++++++++++
                         Cabeçalho
    +++++++++++++++++++++++++++++++++++++++++++++++++++*/

    .main-header .mh-side-left .mhsl-menu {
        width: 270px;
    }

        .main-header .mh-side-left .mhsl-menu .mhsl-menu-toggle-ct {
            left: 110px;
        }

            .main-header .mhsl-menu .mhsl-menu-toggle-ct .mhsl-menu-toggle:after {
                display: none;
            }

    .main-header .mh-side-right {
        padding-right: 20px;
    }

    .institutional-nav {
        display: none;
    }

        .institutional-nav ul {
            height: 60px;
        }

            .institutional-nav ul li a {
                font-size: 0.7rem;
                padding-left: 15px;
                padding-right: 15px;
            }

            .institutional-nav ul li a {
                line-height: 60px;
            }

    /*+++++++++++++++++++++++++++++++++++++++++++++++++++
                           Layout 
    +++++++++++++++++++++++++++++++++++++++++++++++++++*/

    body.lateral-menu-opened .main-container .main-container-align .lateral-menu-container {
        left: 0
    }

    .main-container .main-container-align .main-content .main-content-align .mca-side-left {
        padding-top: 40px;
        padding-left: 20px
    }

        .main-container .main-container-align .main-content .main-content-align .mca-side-left .mcasl-title, .main-container .main-container-align .main-content .main-content-align .mca-side-left .mcasl-nav li {
            margin-bottom: 30px
        }

    form label .lbl {
        font-size: 0.9rem
    }

    .main-container .main-container-align .main-content .main-content-inside .mci-container .mcic-subtitle {
        font-size: 1rem;
        margin-bottom: 15px
    }

    .main-container .main-container-align .main-content .main-content-inside {
        padding-top: 40px;
        padding-left: 30px;
        padding-right: 35px
    }

        .main-container .main-container-align .main-content .main-content-inside .mci-title {
            margin-bottom: 25px;
            font-size: 1.65rem
        }

        .main-container .main-container-align .main-content .main-content-inside .mci-container .mcic-title {
            font-size: 1.3rem;
            margin-bottom: 20px
        }

    .main-container .main-container-align .main-content .main-content-align .mca-side-left {
        padding-top: 30px;
        padding-left: 10px
    }

        .main-container .main-container-align .main-content .main-content-align .mca-side-left .mcasl-title, .main-container .main-container-align .main-content .main-content-align .mca-side-left .mcasl-nav li {
            margin-bottom: 25px
        }

    .main-container .main-container-align .main-content .main-content-inside .mci-container .mcic-subtitle {
        margin-bottom: 10px
    }

    .main-container .main-container-align .main-content .main-content-inside {
        padding-top: 30px;
        padding-left: 25px;
        padding-right: 25px
    }

        .main-container .main-container-align .main-content .main-content-inside .mci-title {
            margin-bottom: 20px;
            font-size: 1.6rem
        }

        .main-container .main-container-align .main-content .main-content-inside .mci-container .mcic-title {
            font-size: 1.2rem;
            margin-bottom: 15px
        }

    /****-- Header-Collapse --****/

    header.sidebar-collapse .main-header .mh-side-left .v-align .mhsl-menu-toggle-ct {
        transform: translateX(-90px);
    }

    /****-- Menu-Collapse --****/

    .sidebar-collapse .main-container .main-container-align .lateral-menu-container {
        width: 0px;
        transition: 0.2s ease-in-out;
    }

    .sidebar-active .main-container .main-container-align .lateral-menu-container {
        width: 220px;
        transform: translateX(0px);
        transition: 0.2s ease-in-out;
    }

    .lateral-menu-container {
        height: 100%;
        padding-bottom: 30px;
        position: unset;
        transform: translateX(-220px);
        transition: 0.2s ease-in-out;
        padding-top: 14px
    }

        .lateral-menu-container .search-in-menu {
            margin-bottom: 35px
        }

        .lateral-menu-container .main-nav > ul > li > a {
            padding-left: 15px;
        }

        .lateral-menu-container .main-nav > ul > li.nav-item-has-submenu > ul li a {
            padding-left: 60px;
        }

        /**** NavMenu ****/
        .lateral-menu-container .search-in-menu {
            padding-left: 20px;
        }

    /*+++++++++++++++++++++++++++++++++++++++++++++++++++
                          Rodapé
    +++++++++++++++++++++++++++++++++++++++++++++++++++*/

    .main-footer {
        padding-left: 50px;
        padding-right: 25px
    }

        .main-footer .mf-align-one, .main-footer .mf-title, .main-footer .mf-itens-ct {
            display: block !important;
        }

        .main-footer .mf-title {
            margin-bottom: 15px;
            padding-right: 0
        }
}

@media (min-width: 1280px) {

    .sidebar-collapse .main-container .main-container-align .lateral-menu-container .main-nav .modules-links .nav-item-has-submenu:hover > ul.hover-on {
        display: inline-block;
        left: 50px;
        position: absolute;
        background: var(--primary-background);
        z-index: 1;
        border-radius: 0px 0px 5px 5px;
        height: auto !important;
        box-shadow: 10px 10px 29px -15px rgba(0,0,0,0.24);
        animation: fade-in 0.2s;
    }

        .sidebar-collapse .main-container .main-container-align .lateral-menu-container .main-nav .modules-links .nav-item-has-submenu:hover > ul.hover-on li a {
            padding-left: 15px;
        }

    .sidebar-collapse .main-container .main-container-align .lateral-menu-container .main-nav .modules-links .nav-item-has-submenu > ul.hover-on li a:hover {
        background-color: var(--primary-transparent);
        transition: 0.2s ease;
    }

    .sidebar-collapse .main-container .main-container-align .lateral-menu-container .main-nav .modules-links .nav-item-has-submenu:hover > a.active .hover-on {
        background-color: var(--primary-transparent);
    }

    .sidebar-collapse .main-container .main-container-align .lateral-menu-container .main-nav .modules-links .nav-item-has-submenu:hover > a .hover-on {
        display: block;
        z-index: 1;
        background-color: var(--primary-transparent);
        left: 50px;
        position: absolute;
        border-radius: 5px 5px 0px 0px;
        box-shadow: 10px 10px 29px -15px rgba(0,0,0,0.24);
        animation: fade-in 0.2s;
    }

    @keyframes fade-in {
        from {
            opacity: 0;
        }

        to {
            opacity: 100;
        }
    }
}
