/***************************************************************
horizontal menu. dynamic background color. responsive.
\***************************************************************/

/*--------------------------------
 Functional Styles (Required)
---------------------------------*/
/* checkbox hack (Android 4.1.2) */
body{ -webkit-animation: bugfix infinite 1s; }
@-webkit-keyframes bugfix { from {padding:0;} to {padding:0;} }

.header { position: relative; }
#style_toggle, .style_toggle { display: none; }
.navigation > li { list-style: none; float:left;	}



@media only screen and (max-width: 768px){
	.udm { display: none; opacity: 0; width: 100%; position: absolute; right: 0; }
	.udm li { display: block; width: 100%; margin: 0; }
	.udm li > a { display: block; width: 100%; text-decoration: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
	.style_toggle { display: block; position: relative; cursor: pointer; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
	#style_toggle:checked ~ .udm { display: block; opacity: 1;}
}



/*--------------------------------
 the pretty stuff
---------------------------------*/

.navigation {
	margin: 8px auto; 
	text-align: center;
}

.navigation ul ul {
	display: none;
}

.navigation ul li:hover > ul {
		display: block;
	}


.navigation ul,
.navigation li,
.navigation span,
.navigation a {
  position: relative;
  margin: 0;
  padding: 0;
  list-style-type:none;
  font-size:16px;
}

.navigation ul {
	position: relative;
	padding: 0 0.9em;
	background: #; 
	box-shadow: 0px 0px 9px rgba(0,0,0,0.15);  
	list-style: none;
}
.navigation ul:after { 
    display: block; 
    clear: both;
	content: "";
}

.navigation ul li {
	float: left;
	border:0px;
    /*fade in pretty like*/
    -webkit-transition: all 0.5s linear;
	-moz-transition: all 0.5s linear;
	-o-transition: all 0.5s linear;
	transition: all 0.5s linear;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box; 
}
.navigation ul li:hover {
	background:#;;	
}
.navigation ul li:hover a {
	color: #;;
}
.navigation ul li a {
	display: block; 
	padding: 1.0em 1.4em;
	color: #;; 
	text-decoration: none;
}
.navigation ul ul {
	position: absolute; 
	top: 100%; 
	z-index:1000; 
	padding: 0; 
	border-radius: 0px;
	background: #;
}
.navigation ul ul li { 
    position: relative;
	float: none; 
	border-top: 1px solid  #;
	border-bottom: 1px solid #;
}
.navigation ul ul li a {
	padding: 15px 40px;
	color:  #ffffff;
}	
.navigation ul ul li a:hover {
	background: ;
}
.navigation ul ul ul {
    position: absolute; 
    top:0; 
    left: 100%;
}
		
.style_toggle{ 
	z-index: 2; 
}



@media only screen and (max-width: 768px){

#sitelogo{
    float:none;
    text-align:center;
}


.navigation {
	margin: 0px auto 10px; 
	text-align: center;
}

.navigation, .navigation > li, .navigation > li > a{
		height: auto;
		width: 80%;
}
	
/*Make all menu links full width*/
	ul li, li a, ul li ul {
		width: 100%;
	}
 
/*stack 3 level subs*/ 
.navigation ul ul ul {
    position: absolute;
    left: 0px;
    top: 0px;
    position: static;
		display: none;
}
    
.navigation a {
        padding:0 50px;
    }    



.style_toggle:after {
		content: 'Main Menu';
		display: block;
		width: auto;
		margin: 33px 0;
		padding: 10px 50px;
		background: #; 
		-webkit-border-radius: 2px;
		border-radius: 2px;
		text-align: center;
		font-size: 18px;
		color: #;
        -webkit-transition: all 0.5s linear;
		-moz-transition: all 0.5s linear;
		-o-transition: all 0.5s linear;
		transition: all 0.5s linear;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box; 
	}
	
	.style_toggle:hover:after{
		background:#;
	}
	
	#style_toggle:checked + .style_toggle:after{
		content: 'Close Menu';
	}
  
}


@media only screen and (max-width: 479px){

#sitelogo{
    float:none;
    clear:both;
    margin:0;
    padding:0px;
    text-align:center;
    }

.navigation{
    margin:0px auto;
    text-align:center;
}

.navigation, .style_toggle:after{ 
    float: none; 
}

.style_toggle:after { 
    text-align: center; 
    width: 100%; 
	}
	
.navigation li {
  text-align:left;
  width:100%; /*one column%*/
}

ul.udm > li {  float: none; width: 100%; }
ul.udm a { line-height: 40px; }
    
ul.udm ul { 
  position: relative;
  float:none;
}

.navigation, .navigation > li, .navigation > li > a{
  width: 100%; 
}

.navigation ul ul ul {
    position: relative; 
    top:0; 
    left: 0;
}
  
}