/* Box sizing. Awesome thing. Read about it here: http://www.w3schools.com/cssref/css3_pr_box-sizing.asp */
*{	box-sizing:border-box;
	-moz-box-sizing:border-box;}

/*MAIN MENU*/
.menu-toggle {
	display: block;
	padding: 6px 10px;
	margin: 0;
	background: #000;
	color: #848484;
	cursor: pointer;
	text-transform: uppercase;
	font-size: 12px;
}
.menu-toggle.toggled-on, .menu-toggle:hover { background: #444 }
.srt-menu { display:none }	
.srt-menu.toggled-on {
	display:block;
	position:relative;
	z-index:10;
}
.srt-menu {
	clear:both;
	margin-bottom:0px;
	
}
.srt-menu li a {
	background: #000;
	display:block;
	padding: 5px 4px;
	text-decoration:none;
	text-transform: uppercase;
}
.srt-menu li a:hover {
	background: #000;
	color:#e08408;
}
.srt-menu li li a {
	background: #000;
	padding-left:20px;
	text-transform: capitalize;
}
.srt-menu li li li a {
	background:#efefef;
	padding-left:40px;
}

/*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:#000;
	color:#e08408;
}


/* Contain floats: h5bp.com/q */ 
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }

.rightfloat {
	float:right;
}
.leftfloat {
	float:left;
}

.menu-toggle { /*make menu float right, instead of sitting under the logo*/
	margin-top: -7px; /*this depends on the height of the logo*/
	clear: both;
	float:right;
} 

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

/*** MAIN MENU - ESSENTIAL STYLES ***/
.menu-toggle{display:none;}
#menu-main-navigation{display:block;}

.srt-menu, .srt-menu * {
	margin:			0;
	padding:		0;
	list-style:		none;
}
.srt-menu ul {
	position:		absolute;
	display:none;
	width:			auto; /* left offset of submenus need to match (see below) */
}
body.line .srt-menu ul {
	border-top: 1px solid #343c2b;
}
.srt-menu ul li {
	width:			100%;
	white-space:nowrap;
}
.srt-menu li:hover {
	visibility:		inherit; /* fixes IE7 'sticky bug' */
}
.srt-menu li {
	float:			left;
	position:		relative;
	margin-left:1px;
}
.srt-menu li li {
	margin-left:0px;
}
.srt-menu a {
	display:		block;
	position:		relative;
}
.srt-menu li:hover ul,
.srt-menu li.sfHover ul {
	display:block;
	left:			0;
	top:			20px; /* match top ul list item height */
	z-index:		99;
	-webkit-box-shadow:  2px 3px 2px 0px rgba(00, 00, 00, .3);
    box-shadow:  2px 3px 2px 0px rgba(00, 00, 00, .3);
}
ul.srt-menu li:hover li ul,
ul.srt-menu li.sfHover li ul {
	top:			-999em;
}
ul.srt-menu li li:hover ul,
ul.srt-menu li li.sfHover ul {
	left:			auto; /* match ul width */
	top:			0;
}
ul.srt-menu li li:hover li ul,
ul.srt-menu li li.sfHover li ul {
	top:			-999em;
}
ul.srt-menu li li li:hover ul,
ul.srt-menu li li li.sfHover ul {
	left:			10em; /* match ul width */
	top:			0;
}

/*** DEMO1 SKIN ***/
#topnav, .srt-menu {
	float:right;
	margin: 0;
}
.srt-menu a {
	text-decoration:none;
}
.srt-menu li a {
	background: transparent;
	margin:0; 
	padding: 2px 8px;
	height: 23px; /* match .srt-menu li:hover ul top */
}
.srt-menu a, .srt-menu a:visited  { /* visited pseudo selector so IE6 applies text colour*/
	color:	#848484;
	text-transform: uppercase; 
	letter-spacing: 3px;
}
.srt-menu li li a {
		/* border-top:		1px solid #fff; */
		background: #000;
		color:	#848484;
		text-transform: capitalize;
		padding: 0 10px;
		height: auto;
}
.srt-menu li li a:visited { color: #848484 }
.srt-menu li li li a,
.srt-menu li.current * li a{
	padding-left: 10px;
	background:none;
}

.srt-menu li li a.nolink { color:#848484 }

.srt-menu li:hover > a,
.srt-menu li.current a { 
	color: #e08408;
	background: transparent;
}
.srt-menu li li:hover > a{
	color:#e08408;
	background: #000;
}

/*
DESKTOP
This is the average viewing window. So Desktops, Laptops, and
in general anyone not viewing on a mobile device. Here's where
you can add resource intensive styles.
*/
@media only screen and (min-width: 1030px) {

} 

/*
LARGE VIEWING SIZE
This is for the larger monitors and possibly full screen viewers.
*/
@media only screen and (min-width: 1240px) {

} 

/*
RETINA (2x RESOLUTION DEVICES)
This applies to the retina iPhone (4s) and iPad (2,3) along with
other displays with a 2x resolution.
*/
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
       only screen and (min--moz-device-pixel-ratio: 1.5),
       only screen and (min-device-pixel-ratio: 1.5) {


} 

/*
iPHONE 5 MEDIA QUERY
iPhone 5 or iPod Touch 5th generation styles (you can include your own file if you want)
*/
@media (device-height: 568px) and (-webkit-min-device-pixel-ratio: 2) { 

  
}