/*=== Push navigation ===*/
/* Global levels */
    #ml-menu {width: 100%;height: 100%;z-index: 1;position: relative;}
    #ml-menu .menu__wrap {position: absolute;top: 0;bottom: 0;left: 0;right: 0;overflow: hidden;width: 100%;z-index: 2;height: 100%;}
    #ml-menu .menu__level {position: absolute;top: 0;left: 0;visibility: hidden;overflow: hidden;height: 100%;list-style-type: none;padding-top: 60px;} /* Padding top allows for the back button */
    #ml-menu .menu__level::-webkit-scrollbar {width: 8px;} 
    #ml-menu .menu__level::-webkit-scrollbar-track {background-color: #000000;}
    #ml-menu .menu__level::-webkit-scrollbar-thumb {background-color: #ff5e00;}    
    .main-navigation a {padding-top:16px; padding-bottom:14px; color: #fff; display:inline-block;  vertical-align: middle; line-height: 1; font-size: 14px;}
    .main-navigation .transition-trigger {font-size:0;margin: 0; padding:0; width: 40px;height: 44px;border: none;margin-left:  -6px; background-color:transparent;}      
    .main-navigation .transition-trigger:after {background-image: url(/assets/svg/arrow-right.svg);background-position: center left 10px; background-size:16px 16px;
        -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); -ms-transform: rotate(0deg);
        -webkit-transition: transform 0.35s ease, background 0.35s ease;
        -moz-transition: transform 0.35s ease, background 0.35s ease;
        -o-transition: transform 0.35s ease, background 0.35s ease;
        transition: transform 0.35s ease, background 0.35s ease;}
    .main-navigation li {background:transparent;
        -webkit-transition: background 0.35s ease-in-out; -moz-transition: background 0.35s ease-in-out; -o-transition: background 0.35s ease-in-out; transition: background 0.35s ease-in-out;}
    .main-navigation li.has-child > a {padding-right: 0;max-width: calc(100% - 40px);}
    .main-navigation li.has-child > .transition-trigger {padding-right:0;}

/* Sub level */
    .main-navigation .sublevel {background:transparent;}
    .main-navigation .sublevel[class*=' animate-'] {-webkit-transition: background 0.35s ease-in-out; -moz-transition: background 0.35s ease-in-out; -o-transition: background 0.35s ease-in-out; transition: background 0.35s ease-in-out;}
    .main-navigation .sublevel a.text-medium {font-size: 22px;line-height: 1;}

/* 2nd level */    
    .main-navigation .level-2.animate-inFromLeft,
    .main-navigation .level-2.animate-inFromRight,
    .main-navigation .level-2.menu__level--current {background-color: #333333;}
    .main-navigation .level-2.animate-outToRight {background:transparent;}

/* 3rd level */
    .main-navigation .level-3.animate-inFromLeft,
    .main-navigation .level-3.animate-inFromRight,
    .main-navigation .level-3.menu__level--current {background-color: #fff;}
    .main-navigation .level-3.animate-outToRight {background:transparent;}
    .main-navigation .level-3 > li > a {color:#333333;}

/* 4th level */
    .main-navigation .level-4.animate-inFromLeft,
    .main-navigation .level-4.animate-inFromRight,
    .main-navigation .level-4.menu__level--current {background-color: #333333;}
    .main-navigation .level-4.animate-outToRight {background:transparent;}

/* Current */
    .main-navigation .current-ancestor > a {color:#ff5e00;}

/* Active */
    #ml-menu .menu__level--current {visibility: visible;overflow-y: auto;}
    .main-navigation .current {background:transparent!important;;}
    .main-navigation .current > a {color:#ff5e00!important;}

/* Back a level */
    #ml-menu .menu__back {position: relative; width: 100%;height:45px; padding: 0 15px; border: none; z-index: 3; display:block; opacity:1; background: transparent; text-align:left; color:#fff;
        -webkit-transition: opacity 0.15s ease-in-out, width 0.01s ease-in-out 0s, padding 0.01s ease-in-out 0s;
        -moz-transition: opacity 0.15s ease-in-out, width 0.01s ease-in-out 0s, padding 0.01s ease-in-out 0s;
        -o-transition: opacity 0.15s ease-in-out, width 0.01s ease-in-out 0s, padding 0.01s ease-in-out 0s;
        transition: opacity 0.15s ease-in-out, width 0.01s ease-in-out 0s, padding 0.01s ease-in-out 0s;}
    #ml-menu .menu__back .icon {width: 100%; height: 100%; padding-left: 25px; padding-top: 17px; margin-top: 13px; line-height: 1; display: block; color:#ff5e00; text-transform:uppercase; font-size:13px; 
        background: transparent url("/assets/svg/arrow-left.svg") no-repeat center left; background-size: 13px 13px;} /* Padding-top vertically centers the back text within the wrapper */
    #ml-menu .menu__back.menu__back--hidden {width:0; padding:0; overflow:hidden; opacity:0;
        -webkit-transition: opacity 0.15s ease-in-out, width 0.01s ease-in-out 0.35s, padding 0.01s ease-in-out 0.35s;
        -moz-transition: opacity 0.15s ease-in-out, width 0.01s ease-in-out 0.35s, padding 0.01s ease-in-out 0.35s;
        -o-transition: opacity 0.15s ease-in-out, width 0.01s ease-in-out 0.35s, padding 0.01s ease-in-out 0.35s;
        transition: opacity 0.15s ease-in-out, width 0.01s ease-in-out 0.35s, padding 0.01s ease-in-out 0.35s;}

/*=== Animations ===*/
    #ml-menu [class^='animate-'],
    #ml-menu [class*=' animate-'] {visibility: visible;    overflow-y: auto;}
    #ml-menu .animate-outToRight .menu__item {
        -webkit-animation: outToRight 0.6s both cubic-bezier(0.7, 0, 0.3, 1); 
        -moz-animation: outToRight 0.6s both cubic-bezier(0.7, 0, 0.3, 1);
        -o-animation: outToRight 0.6s both cubic-bezier(0.7, 0, 0.3, 1);
        animation: outToRight 0.6s both cubic-bezier(0.7, 0, 0.3, 1);}
    #ml-menu .animate-outToLeft .menu__item {
        -webkit-animation: outToLeft 0.6s both cubic-bezier(0.7, 0, 0.3, 1);
        -moz-animation: outToLeft 0.6s both cubic-bezier(0.7, 0, 0.3, 1);
        -o-animation: outToLeft 0.6s both cubic-bezier(0.7, 0, 0.3, 1);
        animation: outToLeft 0.6s both cubic-bezier(0.7, 0, 0.3, 1);}
    #ml-menu .animate-inFromLeft .menu__item {
        -webkit-animation: inFromLeft 0.6s both cubic-bezier(0.7, 0, 0.3, 1);
        -moz-animation: inFromLeft 0.6s both cubic-bezier(0.7, 0, 0.3, 1);
        -o-animation: inFromLeft 0.6s both cubic-bezier(0.7, 0, 0.3, 1);
        animation: inFromLeft 0.6s both cubic-bezier(0.7, 0, 0.3, 1);}
    #ml-menu .animate-inFromRight .menu__item {
        -webkit-animation: inFromRight 0.6s both cubic-bezier(0.7, 0, 0.3, 1); 
        -moz-animation: inFromRight 0.6s both cubic-bezier(0.7, 0, 0.3, 1);
        -o-animation: inFromRight 0.6s both cubic-bezier(0.7, 0, 0.3, 1);
        animation: inFromRight 0.6s both cubic-bezier(0.7, 0, 0.3, 1);}

/* Transition out to the left */
    @-webkit-keyframes outToLeft {
        to {opacity: 0;	-webkit-transform: translateX(-100%);}
    }
    @-moz-keyframes outToLeft {
        to {opacity: 0;	-moz-transform: translateX(-100%);}
    }
    @-o-keyframes outToLeft {
        to {opacity: 0;	-o-transform: translateX(-100%);}
    }
    @keyframes outToLeft {
        to {opacity: 0;	transform: translateX(-100%);}
    }


/* Transition out to the right */
    @-webkit-keyframes outToRight {
        to {opacity: 0; -webkit-transform: translateX(100%);}
    }
    @-moz-keyframes outToRight {
        to {opacity: 0;	-moz-transform: translateX(100%);}
    }
    @-o-keyframes outToRight {
        to {opacity: 0;	-o-transform: translateX(100%);}
    }
    @keyframes outToRight {
        to {opacity: 0;	transform: translateX(100%);}
    }

/* Transition in from the left */
    @-webkit-keyframes inFromLeft {
        from {opacity: 0; -webkit-transform: translateX(-100%);}
        to {opacity: 1; -webkit-transform: translateX(0);}
    }
    @-moz-keyframes inFromLeft {
        from {opacity: 0; -moz-transform: translateX(-100%);}
        to {opacity: 1; -moz-transform: translateX(0);}
    }
    @-o-keyframes inFromLeft {
        from {opacity: 0; -o-transform: translateX(-100%); }
        to {opacity: 1; -o-transform: translateX(0);}
    }
    @keyframes inFromLeft {
        from {opacity: 0;transform: translateX(-100%);}
        to {opacity: 1; transform: translateX(0);}
    }

/* Transition in from the right */
    @-webkit-keyframes inFromRight {
        from {opacity: 0; -webkit-transform: translate3d(100%, 0, 0); }
        to {opacity: 1;	-webkit-transform: translateX(0);}
    }
    @-moz-keyframes inFromRight {
        from {opacity: 0; -moz-transform: translate3d(100%, 0, 0); }
        to {opacity: 1;	-moz-transform: translateX(0);}
    }
    @-o-keyframes inFromRight {
        from {opacity: 0; -o-transform: translate3d(100%, 0, 0);}
        to {opacity: 1;	-o-transform: translateX(0);}
    }
    @keyframes inFromRight {
        from { opacity: 0; transform: translate3d(100%, 0, 0); }
        to { opacity: 1; transform: translateX(0); }
    }



/*========== Small Tablet devices and up ==========*/
@media (min-width: 480px) { 

}


/*========== Large Tablet devices and up ==========*/
@media (min-width: 768px) {

}


/*========== Small Laptop devices and up ==========*/
@media (min-width: 992px) {
    .main-navigation a { font-size:12px}
}


/*========== Desktop devices and up ==========*/
@media (min-width: 1200px) {
    .main-navigation a { font-size: 14px }
}