/* Flexnav Base Styles */
.flexnav {
	-webkit-transition: none;
	-moz-transition: none;
	-ms-transition: none;
	transition: none;
	-webkit-transform-style: preserve-3d;
	overflow: hidden;
	/*margin: 0 auto;*/
	/*width: 70%;
	margin-right: 30%;*/
	max-height: 0;
	/*box-shadow: 10px 10px 5px #888888;*/
	box-shadow: 2px 2px 6px #666;
}
.flexnav.opacity {
    opacity: 0; 
}
.flexnav.show {
	max-height: 2000px;
	opacity: 1;
	-webkit-transition: all .5s ease-in-out;
	-moz-transition: all .5s ease-in-out;
	-ms-transition: all .5s ease-in-out;
	transition: all .5s ease-in-out; 
}
.flexnav.one-page {
	position: fixed;
	top: 50px;
	right: 5%;
	max-width: 200px; 
}

.flexnav li {
	list-style:none;
	margin-left:0px;
	/*font-size: 100%;*/
	position: relative;
	overflow: hidden; 
	/*line-height: 1.0em;*/
	width: 100%;
	background: #ffcc00;
	display: block;
	padding: .6em .8em;
	/*border-bottom: 1px solid rgba(0, 0, 0, 0.15);*/ 
	font-family: 'Sofia-pro-bold',/*'GarageGothic-Black',*/ Verdana, Arial, sans-serif; /*text-transform: uppercase;*/ font-weight: normal;
	/*font-size: 2.0em;*/
}

.flexnav li li {padding: .2em .8em;}
.flexnav li ul {padding-top: 15px}

.flexnav li a {
	position: relative;
	/*display: block;*/
	padding: .16em .4em;
	z-index: 2;
	overflow: hidden;
	color: #000;
	/*text-transform: uppercase;*/
	text-decoration: none;
	background: #fff;
	/*border-bottom: 1px solid rgba(0, 0, 0, 0.15); */
	font-size: 1.4em;
	font-weight: normal;
	line-height: 1.0em;
}

.flexnav li a:hover {background: #000; color: #ffcc00}
.flexnav li li a:hover {background: none; color: #fff}

.flexnav li ul {
	list-style:none;
	width: 100%; 
	margin-left:0px;
	}
.flexnav li ul li {
	font-size: 100%;
	position: relative;
	overflow: hidden;
	width: 100%;
}
.flexnav li ul.show li {
	overflow: visible; 
}
.flexnav li ul li a {
	display: block;
	/*background: #9a9a9a;
	background: rgba(154, 154, 154, 0.8); */
	background: none;
	color: #000;
	font-family: verdana;
	font-size: 0.9em;
	text-transform: lowercase
}
.flexnav ul li ul li a {
	color: #000;
	/*background: #b9b9b9;*/
	font-weight: normal; 
}

.flexnav ul li ul li ul li a {
	background: #b9b9b9; 
	background: rgba(185, 185, 185, 0.8); 
}
.flexnav .touch-button {
	position: absolute;
	z-index: 999;
	top: 0;
	right: 0;
	width: 40px;
	height: 40px;
	display: inline-block;
	/*background: #acaca1;
	background: #333;
	background: rgba(0, 0, 0, 0.3);*/
	text-align: center; 
}
.flexnav .touch-button:hover {
	cursor: pointer; 
}
.flexnav .touch-button .navicon {
	position: relative;
	top: 0.5em;
	font-size: 1.4em;
	color: #fff; 
}

.flexnav li ul .touch-button .navicon {color: #fff}

.menu-button-search {
 margin-right: 10px
}

.menu-button,
.menu-button-search,
.menu-button-sm {
	position: relative;
	font-size: 0.9em;
	/*display: block;*/
	float:left;
	width:30px;
	height:30px;
	padding: 8px;
	/*background: #a6a6a2;*/
	overflow:hidden;
	/*background:#7c7c7c;*/
	color: #000;
	cursor: pointer;
	border-bottom: 0px solid rgba(0, 0, 0, 0.2); 
}
.menu-button.one-page {
	position: fixed;
	top: 0;
	right: 5%;
	padding-right: 45px; 
}
.menu-button .touch-button,
.menu-button-search .touch-button,
.menu-button-sm .touch-button {
	background: transparent;
	position: absolute;
	z-index: 999;
	top: 0;
	right: 0;
	width: 40px;
	height: 46px;
	display: inline-block;
	text-align: center; 
}
.menu-button .touch-button .navicon, 
.menu-button-search .touch-button .navicon,
.menu-button-sm .touch-button .navicon {
	font-size: 1.15em;
	line-height: 0.75em;
	position: relative;
	top: 0.5em;
	color: #000; 
}




/* social media buttons in the mobile menu */
.menu-button-sm .touch-button .fa-twitter, .menu-button-sm .touch-button .fa-youtube, .menu-button-sm .touch-button .fa-facebook  {color: #000}

/* breakingpoint for showing the menu as a regular horizontal menu-bar with vertical dropdowns. */
@media all and (min-width: 3000px) {
	body.one-page {
		padding-top: 70px; 
	}
	
	.flexnav {
		overflow: visible; 
	}
	
	.flexnav.opacity {
		opacity: 1; 
	}
	
	.flexnav.one-page {
		top: 0;
		right: auto;
		max-width: 1080px; 
	}
	
	.flexnav li {
		position: relative;
		list-style: none;
		float: left;
		display: block;
		background-color: #a6a6a2;
		width: 20%;
		overflow: visible; 
	}
	
	.flexnav li a {
		border-left: 1px solid #acaca1;
		border-bottom: none; 
	}
	
	.flexnav li > ul {
		position: absolute;
		top: auto;
		left: 0; 
	}
	
	.flexnav li > ul li {
		width: 100%; 
	}
	
	.flexnav li ul li > ul {
		margin-left: 100%;
		top: 0; 
	}
	
	.flexnav li ul li a {
		border-bottom: none; 
	}
	
	.flexnav li ul.open {
		display: block;
		opacity: 1;
		visibility: visible;
		z-index: 1; 
	}
	
	.flexnav li ul.open li {
		overflow: visible;
		max-height: 100px; 
	}
	
	.flexnav li ul.open ul.open {
		margin-left: 100%;
		top: 0; 
	}
	
	.menu-button {
	display: none; 
	} 
}
    
.oldie body.one-page {
  padding-top: 70px; }
.oldie .flexnav {
  overflow: visible; }
  .oldie .flexnav.one-page {
    top: 0;
    right: auto;
    max-width: 1080px; }
  .oldie .flexnav li {
    position: relative;
    list-style: none;
    float: left;
    display: block;
    background-color: #a6a6a2;
    width: 20%;
    min-height: 50px;
    overflow: visible; }
  .oldie .flexnav li:hover > ul {
    display: block;
    width: 100%;
    overflow: visible; }
    .oldie .flexnav li:hover > ul li {
      width: 100%;
      float: none; }
  .oldie .flexnav li a {
    border-left: 1px solid #acaca1;
    border-bottom: none;
    overflow: visible; }
  .oldie .flexnav li > ul {
    background: #acaca1;
    position: absolute;
    top: auto;
    left: 0;
    display: none;
    z-index: 1;
    overflow: visible; }
  .oldie .flexnav li ul li ul {
    top: 0; }
  .oldie .flexnav li ul li a {
    border-bottom: none; }
  .oldie .flexnav li ul.open {
    display: block;
    width: 100%;
    overflow: visible; }
    .oldie .flexnav li ul.open li {
      width: 100%; }
    .oldie .flexnav li ul.open ul.open {
      margin-left: 100%;
      top: 0;
      display: block;
      width: 100%;
      overflow: visible; }
  .oldie .flexnav ul li:hover ul {
    margin-left: 100%;
    top: 0; }
.oldie .menu-button {
  display: none; }
.oldie.ie7 .flexnav li {
  width: 19.9%; }


/************************************************************************************
MEDIA QUERIES
*************************************************************************************/


/***** MAX WIDTH 980 ****/
/*********************************************/
@media screen and (max-width:980px) {

.flexnav {
	width: 60%;
	margin-right: 55%;
}

#mobileMenu ul {margin: 0 0 0 0; clear: both}	
	
}

/***** MAX WIDTH 600 ****/
/*********************************************/
@media screen and (max-width:600px) {
.flexnav {
	width: 80%;
	margin-right: 30%;
}	

.flexnav li a {font-size: 1.0em}
.flexnav li {padding: .25em .8em}

#mobileMenu ul {margin: 0 0 0 0}
#mobileMenu ul ul {margin: 0 0 0 0}

}