/* EDITOR
54 logo height
105 position of nav from bottom
185 padding of basic link
348 - max width for mobile
color scheme
#444 dark
#ee395b pink
*/

.uk-background-nav {background-color:#9B9EA2;}







ol, ul {
	list-style: none;
	padding:0;
	margin:0;
}


/* holds the whole nav */

.inner {
     padding:0;
	margin: 0 auto;
	max-width: 1200px;
	min-height:40px;

}

.relative {
	position: relative;
}

.right {
	float: right;
}

.left {
	float: left;
}



/* logo or word */


img.logo-nav {
width:100%;
max-width:100px;
height:auto;
display: inline-block;
font-size: 0;
padding-top:0;
}


.uk-logo-word {
font-size: 1em;
display: inline-block;
font-weight:600;
margin:0 0 0 15px;
height:60px;
line-height:60px;
}



a.uk-logo-word, a.uk-logo-word:visited, a.uk-logo-word:active {
    color: #444;
    text-decoration: none;
    display:inline-block;
}


a.uk-logo-word:hover {
color:#ee395b;
text-decoration:none;
}





/* HEADER Background */
.uk-container > header {
	background-color: #9B9EA2;
     padding-top: 20px;
	margin:0;

}




/* ///////////// DESKTOP /////////////  */


/* important - room on right for nav - overall height determined by this and padding
so if logo is 60px high, line 159 padding is 40, this should be 15*/

#navigation {
position: absolute;
left: 0;
right: 0;
margin: auto;
bottom: 15px;
}




/*dont display menu toggle by default */
#menu-toggle {
display: none;
float: right;
color:#444;
width:60px;
height:60px;
text-align:center;
line-height:60px;
}


a#menu-toggle {color:#444;}





/* Just wraps all links desktop */


ul#main-menu {
margin:0 auto;
text-align:center;
}


/* Just wraps each link desktop */
ul#main-menu > li {
	display: inline-block;
	margin-left: 25px;
	padding: 4px 0;

}




/* Display Icon on top row + to indicate menu items  */

#main-menu > li.parent {
/* background-image: url(/site/templates/img/plusgray.png); */
	background-size: 9px 9px;
	background-repeat: no-repeat;
	background-position: 95% center;
}


/* space between word and icon  */

#main-menu > li.parent > a {
padding-right: 15px;
}


/* the primary desktop link */

#main-menu > ul > li  {
margin:0;
padding:0;
}

#main-menu > li > a {
	color: #444;
	font-size: 14px;
	margin:0;
	padding: 10px 15px 15px;
	font-weight:400;
	text-transform: uppercase;
	text-decoration:none;
}


/* and it's rollover */

#main-menu > li:hover > a,
#main-menu > li.current-menu-item > a {
	text-decoration:none;
     transition: all .25s ease-in-out;
    -moz-transition: all .25s ease-in-out;
    -webkit-transition: all .25s ease-in-out;
}





/* the primary desktop link: BIG BUTTON - see colors in styles.php */


#main-menu > li > a.uk-outbound {
	font-size: 14px;
	margin:5px 0 0 0;
	padding: 10px 10px 12px;
	font-weight:400;
	text-transform: none;
	text-decoration:none;
	border-radius:0;

}

#main-menu > li:hover > a.uk-outbound {}










/* ///////////// DROP DOWN MENUS /////////////  */



#main-menu li {
	position: relative;
}

/* HOW far from top menu and initial width */


ul.sub-menu { /* level 2 */
	display: none;
	left: 0px;
	top: 35px;
	padding-top: 0px;
	position: absolute;
	width: 225px;
	z-index: 9999;
	background-color:#fff;

}

/* and relative placement of flyout menu from the left and top edge */


ul.sub-menu ul.sub-menu { /* level 3+ */
	margin-top: 0px;
	padding-top: 0;
	left: 205px;
	top: 0px;
	border-left: 1px solid rgba(0,0,0,0.04);
}





/* basic drop down menu and rollover */

ul.sub-menu > li > a {
	background-color: #fff;
	color: #444;
	display: block;
	font-size: 14px;
	line-height: 18px;
	font-weight:400;
	text-transform:uppercase;
	padding: 20px 15px 20px 20px;
}


ul.sub-menu > li > a:hover {
	background-color: #ee395b;
	color: #eeeeee;
	text-decoration:none;
	border:0;
     transition: all .25s ease-in-out;
    -moz-transition: all .25s ease-in-out;
    -webkit-transition: all .25s ease-in-out;
    }







/* MENU DECORATIONS OFF BY DEFAULT  */



/* BORDER ON FIRST / SECOND DROP DOWN  */

ul.sub-menu > li:first-child {
}

ul.sub-menu ul.sub-menu > li:first-child {
}



/* ROUNDED BOTTOM ON DROPDOWN */

ul.sub-menu > li:last-child > a {
	border-radius: 0 0 0 0;
}





/* empower second flyout menu and include an icon for parents */


ul.sub-menu > li.parent > a {
/*background-image: url(/site/templates/img/hdotsgray.png);
	background-size: 9px 9px;
	background-repeat: no-repeat;
	background-position: 95% center;*/
}

#main-menu li:hover > ul.sub-menu {
	display: block; /* show the submenu */
}



/* ///////////// MOBILE MENUS BEGIN /////////////  */






/* SET YOUR MAX WIDTH HERE */

@media all and (max-width: 960px) {
.uk-container-nav-mobile {margin:0; padding:0;}


#navigation {
position: static;
margin-top: 20px;
}

#menu-toggle {
display: block;
font-size:24px;
margin:15px 15px 0 0;
}


/* Outer primary menu */

#main-menu {
display: none;
float: none;
}

ul#main-menu {
margin: 0;
padding: 0;
width:100%;
}


ul#main-menu>li {
display: block;
margin-left: 0;
padding:0;
}



#main-menu > li:last-child {
}






/* Primary links */

ul#main-menu > li > a {
background-color: #fff;
color: #444;
display: block;
font-size: 14px;
font-weight:400;
text-transform:uppercase;
text-align:left;
padding: 15px 15px !important;
}

/* Primary links hover */

ul#main-menu li > a:hover {
background-color: #9b9ea2;
color:#fff;
}

/* turn off corners for mobile */

#main-menu > li > a.uk-outbound {
border-radius:0;
}



/* Nested menus */


ul.sub-menu {
display: block;
border-left:0;
margin:0;
padding: 0;
position: static;
width: inherit;
box-shadow: 0 0 0 rgba(0,0,0,0);
background-color: #9b9ea2;
}

ul.sub-menu ul.sub-menu {
}



ul.sub-menu li {
padding:0;
margin:0;
}

ul.sub-menu > li  {}

ul.sub-menu > li:first-child {}



/* IN MOBILE MENU THIS PARENT IS LEVEL 2 WITH A CHILD */

ul.sub-menu > li.parent > a  {}

ul.sub-menu > li.parent > a::before {
content: "";
}

/* All children */

ul.sub-menu > li > a {
color: #444;
display: block;
font-size: 15px;
padding: 10px 15px !important;
text-transform:uppercase;
}

ul.sub-menu > li > a:hover {
    background-color: #eeeeee;
    color: #f05127;
}


ul.sub-menu > li > ul.sub-menu > li a {
padding: 10px 15px !important;
}

ul.sub-menu > li > ul.sub-menu > li a::before {
content: "";
}



}