/*--------------------------------------------------------------
MAIN SIZE
--------------------------------------------------------------*/

@media screen and ( min-width: 1024px )
{
    @supports (display: grid)
    {
        /*--------------------------------------------------------------
        Main Menu
        --------------------------------------------------------------*/

        #main-menu
        {
            font-family: 'Montserrat', Arial, Helvetica, sans-serif;
            font-weight: 400;
            font-size: 0.7em;
            letter-spacing: 0.2em;
            text-transform: uppercase;

            display: flex;
            align-items: stretch;
            margin: 0;
            padding: 0;
            height: 100%;
        }

        #main-menu:before
        {
            flex-grow: 1;
            content: " ";
        }

        #main-menu ul
        {
            padding: 0;
        }

        #main-menu li
        {
            list-style: none;
        }

        #main-menu > li
        {
            flex: 1;
            text-align: center;
            min-width: 12.5em;
            max-width: 12.5em;
            display: inline-flex;
            margin: 0;
            padding: 0;
            position: relative;
        }

        #main-menu > li:hover
        {
            color: #ffffff !important;
            background: #469dbc linear-gradient(#4493b6, #2c72a6);
        }

        #main-menu > li.active
        {
            background: #2e9eb7 linear-gradient(#2e9eb7, #2c72a6);
        }

        #main-menu > li.active > a
        {
            color: #ffffff;
        }

        #main-menu > li > a
        {
            padding: 0;
            line-height: 1.5em;
            display: flex;
            flex: 1;
            text-decoration: none;
            color: #333333;
            text-align: center;
        }

        #main-menu > li:hover > a
        {
            color: #ffffff;
        }

        .menu-item-inner
        {
            display: flex;
            align-items: center;
            flex: 1;
            padding: 0 7px 0 7px;
        }

        .menu-item-inner-content
        {
            flex: 1;
        }

        #main-menu .single-line .menu-item-inner-content::after
        {
            content: "\00a0";
            display: block;
        }

        /*--------------------------------------------------------------
        Main Menu Sub-Menu
        --------------------------------------------------------------*/

        #main-menu > li > ul
        {
            width: 280px;
            height: auto;
            position: absolute;
            top: 100%;
            left: 0;
            z-index: 100;

            background: #20537b;

            color: white;
            visibility: hidden;
            opacity: 0;
            transition: 0.1s;
        }

        #main-menu > li > ul > li.active
        {
            /*background: #2f9fbd;*/
            background: #1797ad linear-gradient(to right, rgb(23, 151, 173) 0%,rgb(27, 142, 187) 100%);
        }

        #main-menu > li:hover > ul
        {
            opacity: 1;
            visibility: visible;
            top: 100%;
        }

        #main-menu > li > ul a
        {
            padding: 0;
            line-height: 1.5em;
            display: flex;
            flex: 1;
            text-decoration: none;
            color: #f3faff;
            text-align: left;
            letter-spacing: 0.1em;
            font-size: 0.88em;
        }

        #main-menu li > ul li a:hover
        {
            color: #ffffff;
            background-color: #1797ad;
        }

        #main-menu > li > ul > li
        {
            border-bottom: solid 1px #216486;
        }

        #main-menu > li > ul > li:last-of-type
        {
            border-bottom: none;
        }

        #main-menu > li > ul > li .menu-item-inner
        {
            padding: 0 12px 0 12px;
        }

        #main-menu > li > ul > li .menu-item-inner-content
        {
            padding: 11px 2px 11px 2px;
        }

        /*--------------------------------------------------------------
        Main Menu
        --------------------------------------------------------------*/

        header .menu nav
        {
            float: right;
            display: block;
            width: 100%;
            height: 100%;
            transition: 0.3s;
        }

    }
}