/* shows the desktop menu */
.hidemenu{
display:block;
	}
	
/* hides mobile menu */
.mobiletopspace{
	display:none;
	}

/* triggered by hamburger-mobile.js */	
/* toggle outside and hides mobile hamburger */
#mobileoutside{
	display:none;
	}
	
/* hides mobile menu inside toggle */
.mobilemenuall{
	display:none;
	}


/*----------------Menu Styling on Desktop -------------------------------------*/

/*.menu li:first-child {
	margin-left:5px;
}*/


/* TEIRED NAV STYLING */


#menu ul{
    list-style:none;
    margin-top:5px;
}

/* menu styleing puts menu to right */
#menu ul li{
	cursor:pointer;
	float:left;
	margin:0px;
	padding-left:15px;
	padding-right:15px;	
	line-height:20px;
	display:inline-block;	
	font-family: BankGothicMdBT;
	-webkit-font-smoothing: antialiased;
	font-weight: normal;
	font-style: normal;
}

#menu li a {
	color:white;
	display:block;
	padding-top:10px;
	padding-bottom:10px;
	width:100%;
	}
#menu li a:hover{
	color:red;
	}



/**** SECOND LEVEL MENU ****/

	
@keyframes movetop{
	from {margin-top:200px;opacity:0;}
	to {opacity:1;}
	}
		
/* hide second level ul*/
#menu ul li ul{
    position:absolute;
    display:none;
    margin-top:60px;
    z-index:500;     
}

/* show second level up on rollover */
#menu ul li:hover ul, 
#menu ul li.iehover ul{
    top:0px;
    display:block;
    margin-left:-0px; 
    float:left;
    width:190px;
    animation-name:movetop;
	animation-duration:.5s;
	border:solid 5px black;
	box-sizing:border-box;
}

/* Different background color to 2nd level menu items and also width*/
#menu ul li ul li{
    background-color:white;
    display:block;
    width:150px;
    float:left;
    transition: .5s;
	-webkit-transition: .5s;
   	
}

/* change the background color for the level 2 submenu when hovering the menu */
#menu ul li:hover ul li:hover,
#menu ul li.iehover ul li.iehover{
    background-color:red;
    background-image:none !important; 
}

/* style the color of level 2 links */
#menu ul li ul li a{
    color:black;   
}

#menu ul li:hover ul li:hover a,
#menu ul li.iehover ul li.iehover a{
    color:white;
}

/**** THIRD LEVEL MENU ****/


/* hide the 3rd menu, when hovering the first level menu */
#menu ul li:hover ul li ul,
#menu ul li.iehover ul li ul{
    position:absolute;
    display:none;
    margin-top:0px;
}

/* show the third level menu only when they hover the second level menu parent */
#menu ul li:hover ul li:hover ul,
#menu ul li.iehover ul li.iehover ul{
    display:block;
    left:170px;
    top:0;
}

/* change the background color for the level 3 submenu*/
#menu ul li:hover ul li:hover ul li,
#menu ul li.iehover ul li.iehover ul li{
    
}

/* change the background color for the level 3 submenu when hovering the menu */
#menu ul li:hover ul li:hover ul li:hover,
#menu ul li.iehover ul li.iehover ul li.iehover{
    background:#cccccc;
}

/* change the level 3 link color */
#menu ul li:hover ul li:hover ul li a,
#menu ul li.iehover ul li.iehover ul li a{
    color:#000000;
}








	
	
/*Styles for screen 600px and lower*/
@media screen and (max-width: 1000px) {

/* hides desktop menu*/
.hidemenu{
	display:none;
	}

/* the circle for the hamburger*/	
.mobiletopspace{
	display:block;
	width:50px;
	height:50px;
	border-radius:50%;
	background-color:black;
	position:fixed;
	right:20px;
	top:20px;
	z-index:10000;
	}

/* holds wp navigation */
.mobilemenuall{
	display:block;
	float:left;
	width:100%;
	}

/* the entire menu page area, mobilemenuall is inside of this */
.mobileinside{
	float:left;
	margin-top:0px;
	width:80%;
	padding-left:10%;
	padding-right:10%;
	padding-top:80px;
	display:none;
	background-color:black;
	position:fixed;
	z-index:9000;
	margin-top:0px;
	height:100vh;

	
	}
		

/**** TOP LEVEL MENU ****/
	
#menu ul{
    margin:0;
    padding:0;
    list-style:none;
    float:left;
    width:100%;
    margin-bottom:15px;
   
}

nav li a {
	display: block;
	width:50%;
	text-indent:0px;
	
	
}
	
#menu ul li{
    position: relative;
    width:48%;
	float:left;
	list-style:none;
	cursor:pointer;	
	line-height:28px;
	padding-top:0px;
	padding-bottom:0px;
	padding-right:0px;
	padding-left:0px;
	text-align:center;
	display:block;	
	border:solid 2px #ffffff; 
	box-sizing:border-box;	
	margin-bottom:12px;
}
 
#menu ul li:nth-child(1),
#menu ul li:nth-child(4),
#menu ul li:nth-child(6),
#menu ul li:nth-child(8),
#menu ul li:nth-child(10),
#menu ul li:nth-child(12){
	margin-right:4%;
	}

#menu ul li:nth-child(2){
	background-color:red; 
	}

#menu ul li:nth-child(3){
	width:100%;
	}
		
 
/**** SECOND LEVEL MENU ****/

#menu ul li ul{
	padding-bottom:20px;
	}

#menu ul li ul li{
	width:50%;
	padding-left:0px;
	padding-right:0px;
	margin-left:0px;
	margin-right:0px;
    text-indent:0px;
    border:none;
    line-height:10px; 
    margin-bottom:0px; 
    background-color:black;
    box-sizing:border-box;    
}


#menu ul li ul li:nth-child(1){
	width:50%;
	margin-right:0%;
	border-right:solid 0px white;
	box-sizing:border-box;

	}
	
#menu ul li ul li:nth-child(2){
	width:50%;
	margin-right:0%;
	background-color:black;
	box-sizing:border-box;

	}

#menu ul li ul li:nth-child(3){
	width:50%;
	margin-right:0%;
	border-right:solid 0px white;
	box-sizing:border-box;
	}
	
#menu ul li ul li:nth-child(4){
	width:50%;
	margin-right:0%;
	box-sizing:border-box;
	}
	
#menu ul li ul li:nth-child(5){
	width:100%;
	margin-right:0%;
	box-sizing:border-box;
	text-align:center;
	}

/* style the color of level 2 links */
#menu ul li ul li a{
    color:white;   
}

/* Hide the second level menu until clicked*/
#menu ul li ul{
    position:relative;
    display:none;
    margin-top:0px;  
    margin-bottom:0px;
    border-bottom:none;
     
}

/* When the menu item is clicked show the second level */
#menu ul li:hover ul, 
#menu ul li.iehover ul{
    top:0px;
    display:block;
    margin-left:0px;
    text-indent:0px;
    margin-top:0px;
    margin-bottom:0px;
    width:100%;
    border:none;
    }

/* change the background color for the level 2 submenu when hovering the menu */
#menu ul li:hover ul li:hover,
#menu ul li.iehover ul li.iehover{
    background-color:black;
    background-image:none !important;  
}

/* style the color of level 2 links */
#menu ul li:hover ul li:hover a{
    color:red;   
}


/**** THIRD LEVEL MENU ****/


#menu ul li ul li ul li{
	width:100%;
	padding-left:0px;
    text-indent:20px;
    border-bottom:none;     
}


/* hide the 3rd menu, when hovering the first level menu */
#menu ul li:hover ul li ul,
#menu ul li.iehover ul li ul{
    position:relative;
    display:none;
    margin-top:0px;
}

/* show the third level menu only when they hover the second level menu parent */
#menu ul li:hover ul li:hover ul,
#menu ul li.iehover ul li.iehover ul{
    display:block;
    left:0px;
    top:0;
}

/* change the background color for the level 3 submenu*/
#menu ul li:hover ul li:hover ul li,
#menu ul li.iehover ul li.iehover ul li{
background-color:#f5f5f5;   
}



/* End Teired Menu */




/* TOGGLE AND HAMBURGER STYLING 
How this works is the toggle action is used to open the toggle which has the menu embedded. At the same time the toggle happens the hamburger animation is triggered because the hamburger is embedded in the toggle div #mobileoutside */

/* defines the width of the toggle area which should match the width tof #mobile-icon2 */
#mobileoutside{
	display:block;
	float:right;
	width:25px;
	height:25px;
	padding-top:15px;
	padding-left:10px;
	padding-right:10px;
	padding-bottom:10px;
	margin-right:0px;
	margin-top:1px;
	margin-right:2px;

	}
		


* {
  margin: 0;
  padding: 0; 
}


/* Hamburger Icon */

/* This defines the width of the active touch area in unison with #mobileoutside */
#mob-icon2 {
  width: 25px;
  height: 20px;
  padding-top:15px;
  padding-left:10px;
  padding-right:10px;
  padding-bottom:15px;
 
   float:right;
   margin-top:-15px;
   margin-left:-10px;
  
  float:left;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .5s ease-in-out;
  -moz-transition: .5s ease-in-out;
  -o-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
  cursor: pointer;
 

  
}

/* this is the line width, color and height an placement*/
#mob-icon2 span {
  display: block;
  position: absolute;
  margin-left:10px;
  margin-top:15px;
  
  height: 2px;
  width: 12px;
  background: #ffffff;
  opacity: 1;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .25s ease-in-out;
  -moz-transition: .25s ease-in-out;
  -o-transition: .25s ease-in-out;
  transition: .25s ease-in-out;

 
 
}

/* this postions the lines (6 total) in their correct configuration*/
#mob-icon2 span:nth-child(even) {
  left: 12px;
}

#mob-icon2 span:nth-child(odd) {
  left:0px;
}

/* this determines the space between the lines*/
#mob-icon2 span:nth-child(1), 
#mob-icon2 span:nth-child(2) {
  top: 0px;
}

#mob-icon2 span:nth-child(3), 
#mob-icon2 span:nth-child(4) {
  top: 8px;
}

#mob-icon2 span:nth-child(5), 
#mob-icon2 span:nth-child(6) {
  top: 16px;
}

/* this is the angle of rotation */
#mob-icon2.open span:nth-child(1),
#mob-icon2.open span:nth-child(6) {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}

#mob-icon2.open span:nth-child(2),
#mob-icon2.open span:nth-child(5) {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}


/* this determines the postion of each line to make the x happen */


#mob-icon2.open span:nth-child(1) {
  left: 2px;
  top: 5px;
}

#mob-icon2.open span:nth-child(2) {
  left: 11px;
  top: 5px;
}



#mob-icon2.open span:nth-child(3) {
  left: 0px;
  opacity: 0;
}

#mob-icon2.open span:nth-child(4) {
  left: 0px;
  opacity: 0;
}



#mob-icon2.open span:nth-child(5) {
  left: 2px;
  top: 13px;
}

#mob-icon2.open span:nth-child(6) {
  left: 11px;
  top: 13px;
}




}


/*for iphone 5*/
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 320px) { 
		
#menu ul li{
	line-height:18px;
	font-size:12px;
	margin-bottom:8px;
}


	
}