/*
 * Stellarnav.js 2.5.0
 * Responsive, lightweight, multi-level dropdown menu.
 * Copyright (c) 2018 Vinny Moreira - http://vinnymoreira.com
 * Released under the MIT license
 */
/* all nav */

.stellarnav { 
    @include display-flex;
    margin-right: 4%;
    z-index: 9900; 
    line-height: normal; 
    align-items: flex-start;
}


.stellarnav ul { 
    @include display-flex;
    padding: 0; 
    text-align: left; 
    background-color: #000;
}

.stellarnav a { 
    color: #fff; 
}

.ulheight {
        height: auto;
}

.stellarnav li { 
    list-style: none; 
    display: block; 
    margin: 0; 
    padding: 0; 
    position: relative; 
    line-height: normal; 
    vertical-align: middle; 
}

.stellarnav li a { 
    padding: 15px; 
    display: block; 
    text-decoration: none; 
    color: #fff; background-color: #000; 
    font-size: inherit; 
    font-family: inherit; 
    box-sizing: border-box; 
    -webkit-transition: all .3s ease-out; 
    -moz-transition: all .3s ease-out; 
    transition: all .3s ease-out; 
}

/* main level */
.stellarnav > ul > li { 
    display: inline-block;  
}

.stellarnav > ul > li > a { 
    padding: 20px 40px; 
}

.close-menu {
    font-weight: 700;
    width: 100%;
}



/* only used when 'scrollbarFix' is set to true in the js. This fixes horizontal scrollbar caused by the dd menus that are very long.*/
body.stellarnav-noscroll-x { overflow-x: hidden; }


/* general styling */

.stellarnav li.has-sub > a:after { 
    content: ''; 
    margin-left: 10px; 
    border-left: 6px solid transparent; 
    border-right: 6px solid transparent; 
    border-top: 6px solid #FFF; 
    display: inline-block; 
}

.stellarnav li li.has-sub > a:after { 
    margin-left: 10px; 
    float: left; 
    border-top: 6px solid transparent; 
    border-bottom: 6px solid transparent; 
    border-left: 6px solid #FFF; 
    position: relative; 
    top: 4px; 
}

.stellarnav li.drop-left li.has-sub > a:after { 
    float: left; 
    margin-right: 10px; 
    border-left: 0; 
    border-top: 6px solid transparent; 
    border-bottom: 6px solid transparent; 
    border-right: 6px solid #FFF; 
}

.stellarnav.hide-arrows li.has-sub > a:after, .stellarnav.hide-arrows li li.has-sub > a:after, .stellarnav.hide-arrows li.drop-left li.has-sub > a:after { 
    display: none; 
}

.stellarnav .menu-toggle, .stellarnav .close-menu, .stellarnav .call-btn-mobile, .stellarnav .location-btn-mobile { 
    display: none; 
    text-transform: uppercase; 
    text-decoration: none; 
}

.stellarnav .dd-toggle { 
    display: none; 
    position: absolute; 
    top: 0; 
    right: 0; 
    padding: 0; 
    width: 48px; 
    height: 48px; 
    text-align: center; 
    z-index: 9999; 
    border: 0; 
}

.stellarnav.desktop li.has-sub a { 
    padding-right: 5px; 
}

.stellarnav.desktop.hide-arrows li.has-sub a { 
    padding-right: 15px; 
}

.stellarnav.mobile > ul > li > a.dd-toggle { 
    padding: 0; 
}

.stellarnav li.call-btn-mobile, .stellarnav li.location-btn-mobile { 
    display: none; 
}

/* svg icons */
.stellarnav svg { fill: #fff; width: 1em; height: 1em; position: relative; top: 2px; }
/* svg icons */

.stellarnav a.dd-toggle .icon-plus { 
    box-sizing: border-box; 
    transition: transform 0.3s; 
    width: 16px; 
    height: 100%; 
    margin-top: 12%;
    margin-right: 99%;
    position: relative; 
    vertical-align: middle; 
    display: inline-block; 
}

.stellarnav a.dd-toggle .icon-plus:before { 
    content: ''; 
    display: block; 
    width: 16px; 
    height: 0px; 
    border-bottom: solid 3px #fff; 
    position: absolute; 
    top: 50%; 
    transform: rotate(90deg); 
    transition: width 0.3s; 
}

.stellarnav a.dd-toggle .icon-plus:after { 
    content: ''; 
    display: block; 
    width: 16px; 
    height: 0px; 
    top: 50%; 
    border-bottom: solid 3px #fff; 
    position: absolute; 
}

.stellarnav li.open > a.dd-toggle .icon-plus { 
    -webkit-transform: rotate(135deg); 
    -ms-transform: rotate(135deg); 
    -o-transform: rotate(135deg); 
    transform: rotate(135deg); 
}

.stellarnav.light a.dd-toggle .icon-plus:before { 
    border-color: #000; 
}

.stellarnav.light a.dd-toggle .icon-plus:after { 
    border-color: #000; 
}

.stellarnav.dark a.dd-toggle .icon-plus:before { 
    border-color: #FFF; 
}

.stellarnav.dark a.dd-toggle .icon-plus:after { 
    border-color: #FFF; 
}

.stellarnav .icon-close { 
    box-sizing: border-box; 
    width: 12px; 
    height: 12px; 
    position: relative; 
    display: inline-block; 
}

.stellarnav .icon-close:before { 
    content: ''; 
    display: block; 
    width: 12px; 
    height: 0px; 
    border-bottom: solid 3px #fff; 
    position: absolute; 
    top: 50%; 
    transform: rotate(45deg); 
}

.stellarnav .icon-close:after { 
    content: ''; 
    display: block; 
    width: 12px; 
    height: 0px; 
    top: 50%; 
    border-bottom: solid 3px fff; 
    position: absolute; 
    transform: rotate(-45deg); 
}


/* mobile nav - hamburger etc*/

.stellarnav .call-btn-mobile, .stellarnav .location-btn-mobile, .stellarnav .close-menu { 
    padding: 34px; 
    background-color: #000; 
    color: #fff; 

}

.stellarnav .menu-toggle span.bars { 
    display: inline-block; 
    margin-right: 4px; 
    position: relative; 
    top: 3px; 
}

.stellarnav .menu-toggle span.bars span { /* Hamburger */
    display: block; 
    width: 32px; 
    height: 4px; 
    border-radius: 0; 
    background: #EC0202; 
    margin: 0 0 4px; 
    transition: .3s;
}

.stellarnav .menu-toggle:hover span.bars span { 
    width: 38px; 
    border-radius: 3px; 
    background: #fff; 
}

.stellarnav .full { 
    width: 100%; 
}

.stellarnav .half { 
    width: 50%; 
}

.stellarnav .third { 
    width: 33%; 
    text-align: center; 
}

.stellarnav .location-btn-mobile.third { 
    text-align: center; 
}

.stellarnav .location-btn-mobile.half { 
    text-align: right; 
}

.stellarnav.mobile { 
    display: flex; 
}

.stellarnav.mobile.fixed {
    display: flex; 
}

.stellarnav.mobile ul { 
    position: relative; 
    display: none; 
    background-color: #000;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.stellarnav.mobile.active { 
    padding-bottom: 0; 
}

.stellarnav.mobile.active > ul { 
    display: block; 
}

.stellarnav.mobile ul { 
    text-align: left; 
}

.stellarnav.mobile > ul > li { 
    display: block; 
}

.stellarnav.mobile > ul > li > a { 
    padding: 22px; 
}


.stellarnav.mobile ul ul { 
    position: relative; 
    opacity: 1; visibility: visible; 
    width: auto; 
    display: none; 
    -moz-transition: none; 
    -webkit-transition: none; 
    -o-transition: color 0 ease-in; 
    transition: none; 
    padding-left: 10%;
    font-size: .8em;
}

.stellarnav.mobile ul ul ul { left: auto; top: auto; }

.stellarnav.mobile li.drop-left ul ul { right: auto; }

.stellarnav.mobile li a { border-bottom: 1px solid rgba(255, 255, 255, .15); }

.stellarnav.mobile > ul { border-top: 1px solid rgba(255, 255, 255, .15); }

.stellarnav.mobile li a.dd-toggle { border: 0; }

.stellarnav.mobile.light li a.dd-toggle { border: 0; }

.stellarnav.mobile .menu-toggle, .stellarnav.mobile .dd-toggle, .stellarnav.mobile .close-menu, .stellarnav.mobile .call-btn-mobile, .stellarnav.mobile .location-btn-mobile { display: inline-block; }

.stellarnav.mobile li.call-btn-mobile { border-right: 1px solid rgba(255, 255, 255, .1); box-sizing: border-box; }

.stellarnav.mobile li.call-btn-mobile, .stellarnav.mobile li.location-btn-mobile { display: inline-block; width: 50%; text-transform: uppercase; text-align: center; }

.stellarnav.mobile li.call-btn-mobile.full, .stellarnav.mobile li.location-btn-mobile.full { display: block; width: 100%; text-transform: uppercase; border-right: 0; text-align: left; }



.stellarnav.mobile.top { position: absolute; width: 100%; top: 0; left: 0; z-index: 9999; }

.stellarnav.mobile li.has-sub > a:after, .stellarnav.mobile li li.has-sub > a:after, .stellarnav.mobile li.drop-left li.has-sub > a:after { display: none; }

/* left and right positions */

.stellarnav.mobile.right > ul, .stellarnav.mobile.left > ul { position: fixed; top: 0; bottom: 0; width: 100%; max-width: 280px; overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; }

.stellarnav.mobile.right > ul { right: 0; }

.stellarnav.mobile.right .close-menu, .stellarnav.mobile.left .close-menu { display: inline-block; text-align: right; }

.stellarnav.mobile.left > ul { left: 0; }

.stellarnav.mobile.right .location-btn-mobile.half, .stellarnav.mobile.right .call-btn-mobile.half, .stellarnav.mobile.right .close-menu.half { text-align: center; }

.stellarnav.mobile.right .location-btn-mobile.third, .stellarnav.mobile.right .call-btn-mobile.third, .stellarnav.mobile.right .close-menu.third { text-align: center; }

.stellarnav.mobile.left .location-btn-mobile.half, .stellarnav.mobile.left .call-btn-mobile.half, .stellarnav.mobile.left .close-menu.half { text-align: center; }

.stellarnav.mobile.left .location-btn-mobile.third, .stellarnav.mobile.left .call-btn-mobile.third, .stellarnav.mobile.left .close-menu.third { text-align: center; }

.stellarnav.mobile.left .menu-toggle.half, .stellarnav.mobile.left .menu-toggle.third, .stellarnav.mobile.right .menu-toggle.half, .stellarnav.mobile.right .menu-toggle.third { text-align: left; }

.stellarnav.mobile.left .close-menu.third span, .stellarnav.mobile.right .close-menu.third span { display: none; }





/* Fallback for slow javascript load */
@media only screen and (max-width : 768px) {
	.stellarnav { overflow: hidden; display: block; }
	.stellarnav ul { position: relative; display: none; }
}

/* mobile nav */
@media only screen and (max-width : 420px) {
	.stellarnav.mobile .call-btn-mobile.third span, .stellarnav.mobile .location-btn-mobile.third span { display: none; }
}
