/* Box sizing. Awesome thing. Read about it here: http://www.w3schools.com/cssref/css3_pr_box-sizing.asp */

#topnav{ display:none;z-index:999999;}
#menu-main-navigation{ border:none;}
/*MAIN MENU*/
.menu-toggle{
	display:block;
	padding:8px 10px 8px 14px;
	margin:0;
	background:#2A2A2A url(../images/menu_icon.png) 10px 10px no-repeat;
	color:#fff;
	cursor:pointer;
	text-transform:uppercase; font-weight:bold;
	font-size:15px; 
}
.navsearch{width:88%;margin-left:40px;}
.navsearch input[type="text"]{height:20px;z-index:999999;}
.menu-toggle:hover{background:#FF9000 url(../images/menu_icon.png) 10px 10px no-repeat;}
.menu-toggle.toggled-on{background:#2A2A2A url(../images/menu_icon.png) 10px 10px no-repeat;}
.srt-menu{ font-size:12px; display:none;}	
.srt-menu.toggled-on{
	display:block;
	position:relative;
	z-index:10;
	list-style:none;
	
}
.srt-menu.toggled-on li{ list-style:none; margin:0; padding:0;}
.srt-menu.toggled-on ul{ margin:0; padding:0;}
.srt-menu.toggled-on ul li{ margin:0; padding:0;}
.srt-menu{
	clear:both;
	margin-bottom:60px; margin:0; padding:0; background:#fff;
	
}

.menu-toggle:hover > ul.srt-menu{display:block;}
/*SECONDARY MENU*/
#secondary-navigation{
	margin-bottom:60px;
}
#secondary-navigation ul{
	margin:0;
	padding:0;
}
#secondary-navigation ul li a{ 
	background:#E6E6E6;
	display:block;
	margin:5px 0; 
	padding:10px;
	text-decoration:none;
}
#secondary-navigation ul li a:hover,
#secondary-navigation ul li.current a{
	background:#0099ff;
	color:#fff;
}




/*
LARGER MOBILE DEVICES
This is for mobile devices with a bit larger screens.
*/
@media only screen and (min-width: 481px) {
.menu-toggle{/*make menu float right, instead of sitting under the logo*/
	margin-top:0; /*this depends on the height of the logo*/
}


} 

/*
TABLET & SMALLER LAPTOPS
The average viewing window and preferred media query for those is 768px.
But I think that some more breathing space is good:)
*/
@media only screen and (min-width: 982px) {

}



@media (min-width: 1200px) {}
@media (min-width: 992px) 
{
   
}
@media (max-width: 768px) 
{
    #nav-content{display:none;}
    #topnav{display:block;}
    #nav{height:auto;}
    
    
    #menu-main-navigation{ border:1px solid #bdbdbd; }
    .srt-menu li a {display:block; margin:1px 0; padding:4px 13px; text-decoration:none; background:#FF9000; font-weight:bold; color:#fff; text-transform:uppercase; font-size:13px;}
    .srt-menu li{ border:none;}
    .srt-menu li a:hover{ background:#017d70;	color:#fff;}
    .srt-menu li li a {	background:#e8e8e8 url(../images/nav_icon2.png) 12px 10px no-repeat; padding:4px 3px 4px 30px; font-weight:bold; color:#0052a0; text-transform:none; font-size:12px;}
    .srt-menu li li a:hover{background:#0d9788 url(../images/nav_icon3.png) 12px 10px no-repeat; color:#fff;}

    .srt-menu li li li a {padding:2px 2px 2px 40px;	background:#efefef url(../images/nav_icon4.png) 30px 8px no-repeat;	font-weight:normal;	text-transform:capitalize;}
    .srt-menu li li li a:hover{	background:#0d9788 url(../images/nav_icon5.png) 30px 8px no-repeat;	color:#fff;}
}
@media (max-width: 600px) 
{
    #nav-content{display:none;}
    #topnav{display:block;}
}
@media (max-width: 459px) 
{
    #nav-content{display:none;}
    #topnav{display:block;}
}
@media screen and (max-width: 480px) 
{
    #nav-content{display:none;}
    #topnav{display:block;}
}
/* Phone Portrait (320px) */
@media only screen and (max-width: 320px) 
{
    #nav-content{display:none;}
    #topnav{display:block;}
}
/* Other screen */
@media only screen and (max-width: 240px) 
{
   #nav-content{display:none;}
    #topnav{display:block;}
}