/* 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.
-------------------------------------------------------------------------------------------*/

.sm {
    position: relative;
    z-index: 9999;
}

.sm, .sm ul, .sm li {
    display: block;
    list-style: none;
    margin: 0;
    padding: 0;
    line-height: normal;
    direction: ltr;
    text-align: left;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.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: not-allowed;
}

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

.sm, .sm *, .sm *:before, .sm *:after {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.main-menu-btn {
    position: relative;
    display: block;
    height: 24px;
    overflow: hidden;
    line-height: 26px;
    /*
    text-align: center;
    padding: 0.815em 40px;
    */
    padding: 0 40px;
    cursor: pointer;
    color: #BBB1A3;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.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: #184b9d;
    -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 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);
}

/* hide the menu in mobile view */
#main-menu-state:not(:checked) ~ #main-menu {
    display: none;
}

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

.main-menu-btn {
    top: -40px;
    width: 50%;
    left: 0;
}

@media (min-width: 991px) {
    /* hide the button in desktop view */
    .main-menu-btn {
        position: absolute;
        top: -99999px;
    }

    /* always show the menu in desktop view */
    #main-menu-state:not(:checked) ~ #main-menu {
        display: block;
    }
}