/* Mobile first layout SmartMenus Core CSS (it's not recommended editing these rules)
   You need this once per page no matter how many menu trees or different themes you use.
-------------------------------------------------------------------------------------------*/
#main-nav {
    line-height: 0;
    text-align: center;
    background-color: #27386E;
}

#main-menu {
    display: inline-block;
}

.sm {
    box-sizing: border-box;
    position: relative;    
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}

    .sm, .sm ul, .sm li {
        display: block;
        list-style: none;
        margin: 0;
        padding: 0;
        line-height: normal;
        direction: ltr;
        text-align: left;
    }

.sm-rtl, .sm-rtl ul, .sm-rtl li {
    direction: rtl;
    text-align: right;
}

.sm > li > h1, .sm > li > h2, .sm > li > h3, .sm > li > h4, .sm > li > h5, .sm > li > h6 {
    margin: 0;
    padding: 0;
}

.sm ul {
    display: none;
}

.sm li, .sm a {
    position: relative;
}

.sm a {
    display: block;
}

    .sm a.disabled {
        cursor: default;
    }

.sm::after {
    content: "";
    display: block;
    height: 0;
    font: 0px/0;
    clear: both;
    overflow: hidden;
}

.sm *, .sm *::before, .sm *::after {
    box-sizing: inherit;
}

/********* Mobile Menu *********/

/* hide menu state checkbox (keep it visible to screen readers) */
#main-menu-state {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    border: 0;
    padding: 0;
    overflow: hidden;
    clip: rect(1px,1px,1px,1px);
}

@media (max-width: 980px) {

    .main-menu-btn {
        top: 45px;
        left: 10px;
        position: absolute;
        display: inline-block;
        padding: 15px;
        height: 24px;
        overflow: hidden;
        line-height: 26px;
        text-align: center;
        cursor: pointer;
        color: #BBB1A3;
        -webkit-tap-highlight-color: rgba(0,0,0,0);
    }

    .main-menu-btn-text {
        position: absolute;
        top: -99999px;
    }

    .main-menu-btn-title {
        display: block;
        white-space: nowrap;
        overflow: hidden;
        -ms-text-overflow: ellipsis;
        -o-text-overflow: ellipsis;
        -moz-text-overflow: ellipsis;
        -webkit-text-overflow: ellipsis;
        text-overflow: ellipsis;
        opacity: 1;
        -webkit-transform: none;
        transform: none;
        -webkit-transition: all 0.25s;
        transition: all 0.25s;
    }

    #main-menu-state:checked ~ .main-menu-btn .main-menu-btn-title {
        opacity: 0;
        -webkit-transform: translate3d(0, -50%, 0);
        transform: translate3d(0, -50%, 0);
    }

    .main-menu-btn-title [data-icon]:before {
        position: relative;
        top: -1px;
        vertical-align: top;
    }
    /* hamburger icon */
    .main-menu-btn-icon, .main-menu-btn-icon:before, .main-menu-btn-icon:after {
        position: absolute;
        top: 50%;
        left: 5px;
        height: 2px;
        width: 24px;
        background: #000;
        -webkit-transition: all 0.25s;
        transition: all 0.25s;
    }

        .main-menu-btn-icon:before {
            content: '';
            top: -7px;
            left: 0;
        }

        .main-menu-btn-icon:after {
            content: '';
            top: 7px;
            left: 0;
        }

    /* close icon */
    #main-menu-state:checked ~ .main-menu-btn .main-menu-btn-icon {
        height: 0;
        background: transparent;
    }

        #main-menu-state:checked ~ .main-menu-btn .main-menu-btn-icon:before {
            top: 0;
            -webkit-transform: rotate(-45deg);
            transform: rotate(-45deg);
        }

        #main-menu-state:checked ~ .main-menu-btn .main-menu-btn-icon:after {
            top: 0;
            -webkit-transform: rotate(45deg);
            transform: rotate(45deg);
        }

    .main-menu-btn-logo {
        font: italic bold 1.111em/10px Verdana,Arial,Helvetica,sans-serif;
        color: #3092C0;
    }

    .main-menu-btn-logo-separator {
        margin-right: 0.222em;
        border-right: 1px solid #dad3c9;
        padding-right: 0.5em;
    }
    /* hide the menu in mobile view */
    #main-menu-state:not(:checked) ~ #main-menu {
        display: none;
    }

    #main-menu-state:checked ~ #main-menu {
        display: block;
    }
}