/* //mobile first CSS */
@media only screen {

    #primary-menu .nav-btn {
        text-align: center; 
        color: #FFFFFF !important;
        padding: 5px 20px;
    }

    #primary-menu .nav-btn a {
        color: #FFFFFF !important;
        text-decoration: none;
        text-transform: lowercase;
        background-color: #283A47;
        border-radius: 3px;
        padding: 12px 26px;
    }

    .sf-menu .sub-menu {
        padding-left: 20px;
        background-color: transparent;
    }

    .sf-menu .sub-menu a {
        text-transform: inherit;
        font-weight: 400;
    }

    .main-nav.nav-menu-cont {
        display:none; 
    }

    .hamburger-menu-cont {
        position: fixed;
        height: 100%;
        width: 100%;
        background-color: #ffffff;
        z-index: 99999;
        visibility: hidden;
        /*top: 250px;*/
        opacity: 0;
        transition: visibility 0s, opacity 0.2s linear;
        padding: 40px 40px;
    }
    
    .hamburger-menu span {
        font-weight: 600;
        font-size: 1.125rem;
    }
    
    .hamburger-btn{
        outline: none;
        cursor: pointer;
        display: none;
        transition-property: opacity, filter;
        transition-duration: 0.15s;
        transition-timing-function: linear;
        font: inherit;
        color: inherit;
        border: 0;
        margin: 0;
        overflow: visible;
        background-color: transparent !important;
    }
    
    .hamburger-btn:hover {
        color: unset;
    }
    
    .hamburger-btn i {
        padding-left: 20px;
    }
    
    .hamburger-menu-item, .hamburger-menu-item div {
        gap: .5rem;
    }
    
    .hamburger-menu-items {
        /*display: flex;*/
        justify-content: space-between;
    }

    .hamburger-menu-items div {
        display: flex;
        flex-direction: column;
        padding-top: 20px;
        break-inside: avoid;
    }
    
    .hamburger-menu-items span {
        text-transform: uppercase;
        font-weight: 700;
        font-size: 18px;
    }
    
    .hamburger-menu-items a {
        text-decoration: none;
        color:inherit;
    }
    
    .hamburger-menu-cont .nav-btn {
        background-color: #283A47;
        color: #FFFFFF !important;
        padding: 10px 40px;
        width: 260px;
        border-radius: 5px;
    }

    .main-navigation.mobile-menu-control-wrapper button {
        padding: 0 10px;
        background-color: transparent !important;
    }

    .main-navigation.mobile-menu-control-wrapper .icon-search {
        margin-right: -10px;
    }
   
}



/* // breakpoint #1 = XS */
@media only screen and (min-width: 600px) {
    #primary-menu .nav-btn a {
        width: 50%;
    }

    .main-navigation.mobile-menu-control-wrapper .icon-search {
        margin-right: unset;
    }

}

/* // breakpoint #2 = SM */
@media only screen and (min-width: 768px) {
    .main-navigation #primary-menu {
        display:none;
    }
    
    .main-nav.nav-menu-cont {
        display:block;
    }
    
    .hamburger-menu {
        width: 120px;
    }

    .hamburger-menu:not(.is-active) .open, .hamburger-menu.is-active .close {
        display: flex;
        flex-direction: row;
        align-content: center;
        align-items: center;
        font-weight: 700;
    }

    .main-navigation.hamburger-menu:before {
        content: "";
        height: 93px;
        display: block;
        border-left: 1px solid #E2E2E2;
        position: absolute;
        top: 4px;
    }

    .hamburger-menu-cont.is-active{
        column-count: 5;
        visibility: visible;
        opacity: 1;
        /*top: 162px;*/
    }
   
    body.nav-is-inactive {
        position: fixed;
        overflow-y: scroll;
    }
    .main-navigation .main-nav ul li a {
        font-size: unset;
        color: unset;

    }
}

/* // breakpoint #3 = MD */
@media only screen and (min-width: 1000px) {

}

/* // breakpoint #4 = LG */
@media only screen and (min-width: 1200px) {

}

/* // breakpoint #5 = XL */
@media only screen and (min-width: 1400px) {

}