@charset "UTF-8";
/* CSS Document */

/*--------------------------------
 Functional Styles (Required)
---------------------------------*/

/* Tim Pietrusky advanced checkbox hack (Android <= 4.1.2) */
body{ -webkit-animation: bugfix infinite 1s; }
@-webkit-keyframes bugfix { from {padding:0;} to {padding:0;} }

.header { position: relative; }
#toggle, .toggle { display: none; }
.nav > li { list-style: none; display:inline-block;	}

/* Nicolas Gallagher micro clearfix */
.clearfix:before, .clearfix:after { display: table; content: ""; }
.clearfix:after { clear: both; }


/*--------------------------------
Navigation - Desktop
---------------------------------*/


.container{
    width: 100%;
    margin: 0;
	padding:0;
	display:block;
	text-align:center;
}

.header{
	min-height: 100px;
	height: 100%;
	padding: 0;
}

body, div, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, img, form, fieldset, input, textarea, blockquote {
	margin: 0; padding: 0; border: 0;
}

body {
	background: #fff;
	font-family: Helvetica, sans-serif; font-size: 16px; line-height: 24px;
}


.menu {
	*zoom: 1;
	background: #9d080d;
	padding: 0 10px;  
	list-style: none;
	text-align: center;
	text-transform:uppercase;
	position:relative;
	letter-spacing:2px;
}

.menu ul {
	display: none;
	list-style: none;
}

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

.menu:after {
	content: ""; clear: both; display: block;
}

.menu li {
	display: inline-block;
}

.menu li:hover {
	background: #9d080d;
}

.menu li:hover a {
	color: #fff;
}

.menu li a {
	display: block; padding: 10px 40px;
	color: #fff; text-decoration: none;
}

.menu ul {
	border-radius: 0px; padding: 0;
	position: absolute; top: 100%;
	background: #9d080d;
}

.menu ul li {
	float: left; 
	border-top: 1px solid #81060a;
	border-right: 1px solid #81060a; position: relative;
}

.menu ul li a {
	padding: 10px 40px;
	color: #fff;
}

.menu ul li a:hover {
	background: #81060a;
	text-decoration:none;
}

.menu ul ul {
	position: absolute; left: 100%; top:0;
}

.toggle{ 
	z-index: 2; 
}


/*--------------------------------
Navigation - Tablet
---------------------------------*/


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

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

.menu{
	background: #9d080d;
	border-top: 1px solid #81060a;
	padding: 0;
}



.menu, .menu > li, .menu > li > a{
	height: auto;
}
	
.menu > li > a{
	padding: 15px 15px;
}
	
.menu > li > a:hover, .menu > li > a:focus, .menu > li > ul > li > a:hover, .menu > li > ul > li > a:focus{
	background: #9d080d;
	box-shadow: inset 5px 0px #9d080d;
}

.menu ul {
	display: none;
	list-style: none;
	width:100%;
	margin: 0 0 15px;
	position: inherit;
	top: inherit;
	float: left;
}

.menu ul li {
	float: left;
	width: 100%;
	background: #81060A;
}

.menu ul li:hover {
}

.toggle:after {
	content: 'Main Menu';
	display: block;
	width: 100%;
	margin: 0;
	padding: 10px 50px;
	background: #9d080d;
	-webkit-border-radius: 2px;
	border-radius: 2px;
	text-align: center;
	font-size: 16px;
	color: #fff;
	-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; 
	letter-spacing:2px;
}
	
.toggle:hover:after{
	background: #81060a;
}

#toggle:checked + .toggle:after{
	content: 'Close Menu';
}

}


/*--------------------------------
Navigation - Mobile
---------------------------------*/


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

.menu, .menu > li > ul, .toggle:after{ 
	float: none; letter-spacing:2px;
}
.toggle:after { 
	text-align: center; width: 100%; 
}

}