/* 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;
	}



/* TEIRED NAV STYLING */


/* float menu to right and set width*/
#menu ul{
   float:right;
   margin: 0;
   width:680px;

}

/* menu styling nav text */
#menu ul li{
	float:left;
	cursor:pointer;	
	display:inline-block;
	margin: 0;
}

#menu li a {
	color:#AF8B30;
	text-decoration:none;
	padding-left:20px;
	padding-right:20px;
	padding-top:30px;
	display:block;
	font-size:14px;
	}
	
#menu li a:hover{
	color:#B3B3B3;
	/*background-color:red;*/
	text-decoration:none;
	}


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

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

/* second level shows up on rollover */
#menu ul li:hover ul, 
#menu ul li.iehover ul{
    top:0px;
    display:block;
    animation-name:fadein;
	animation-duration:1s;
}

#menu ul li ul li{
  	width:100%;
  	border-bottom:solid 1px black;
}
	
#menu ul li ul li:nth-last-child(1){
	border-bottom:none;
	}	
	
/* style the color of level 2 links */
#menu ul li ul li a{
    color:black;
    padding-top:5px; 
    padding-bottom:5px; 
    background-color:#f3f3f3; 
	width:100%; 
}

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



/**** 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: 1024px) {
	
	

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

/* contains the logo and hamburger*/	
.mobiletopspace{
	display:block;
	float:left;
	width:100%;
	background-color:#f3f3f3;
	}

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

/* source in TMtheme css */
.headercontainer{
	display:block;
	/*use this to fix the nav
	position:fixed;
	z-index:1000;*/
	}	


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

   
}

nav li a {
	display: inline-block;
	width:100%;
	text-indent:0px;
	
}
	
#menu ul li{
    position: relative;
    width:100%;
	margin-left:0px;
	float:left;
	list-style:none;
	margin-bottom:0px;
	cursor:pointer;	
	line-height:20px;
	padding-top:0px;
	padding-bottom:0px;
	padding-right:0px;
	padding-left:0px;
	display:block;	
	border-bottom:solid 1px white;
}

#menu ul li:nth-last-child(1){
	border-bottom:none;
	

	}

		
#menu li a {
	color:white;
	display:block;
	text-decoration:none;
	padding-left:20px;
	padding-right:0px;
	background-color:#666666;
	padding-top:15px;
	padding-bottom:15px;
	box-sizing:border-box;
	
	/*background: url("./images/plus.jpg");
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-position: center center;*/
	
	
	
	}
	
#menu li a:hover{
	background-color:black;
	}
	
	
/**** SECOND LEVEL MENU ****/

@keyframes movetop{
	from {margin-top:0px;opacity:1;}
	to {opacity:1;}
	}

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

/* 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;
    }

#menu ul li ul li{
	width:100%;
	 
}

#menu ul li ul li:nth-last-child(1) {
	border-bottom:none;
	}

#menu ul li ul li a{
	width:100%;
	padding-top:10px;
	padding-bottom:10px;
	background-color:#999999;
	color:black;
	border-bottom:0px;
	text-indent:20px;   
	}
	
#menu ul li ul li a:hover{
	background-color:yellow;
	}


/* 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:#f5f5f5;
    background-image:none !important;
    
}


/**** 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 #mob-icon2 */
#mobileoutside{
	display:block;
	float:right;
	width:30px;
	margin-right:15px;
	margin-top:15px;
	margin-bottom:10px;


	}
		
.mobileinside{
	float:left;
	margin-top:0px;
	width:100%;
	display:none;
	/*use this along with fixed nav to tint the screen
	height:100vh;
	background-color:rgba(0,0,0,0.8);*/
	}

* {
  margin: 0;
  padding: 0; 
}


/* Hamburger Icon */

/* This defines the width of the active touch area in unison with #mobileoutside */
#mob-icon2 {
  width: 30px;
  height: 30px;
  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;
  height: 1px;
  width: 15px;
  background: #000000;
  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;
  margin-top:0px;
 
 
}

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

#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: 10px;
}

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

/* 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: 3px;
  top: 5px;
}

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

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

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

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

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


}