@charset "utf-8";
/*
* Navigataur: A pure CSS responsive navigation menu
* Author: Mike King (@micjamking)
*/
/*
Notes:
- Media queries should be edited in both style sections if you require
a different breakpoint for your navigation.
- Toggle class & menu anchor tags in list items have box-sizing: border-box
style property to allow padding inside the container without conflicting with layout.
*/
/*--------------------------------
Functional Styles (Required)
---------------------------------*/
.header { position: relative; }
#toggle, .toggle { display: none; }
.menu > li { list-style: none; float:left; }
/* Nicolas Gallagher micro clearfix */
.clearfix:before, .clearfix:after { display: table; content: ""; }
.clearfix:after { clear: both; }
@media only screen and (max-width: 768px){
.menu { display: none; opacity: 0; width: 100%; position: absolute; right: 0; }
.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 + div .menu { display: block; opacity: 1;}
}
/*--------------------------------
Presentation Styles (Editable)
---------------------------------*/
.header{
min-height:100px;
height: 100%;
padding: 0 20px;
background:none;
z-index:1000;


}

.nav{
display: block;
float: right;

}

.nav, .menu, .menu > li, .menu > li > a{
height: 100%;

}

.menu > li > a{
	display: block;
	padding: 42px 20px 42px 35px;
	text-decoration: none;
	font-weight: normal;
	font-size: 12px;
	line-height: 1;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-transition: all 0.25s linear;
	-moz-transition: all 0.25s linear;
	-o-transition: all 0.25s linear;
	transition: all 0.25s linear;
	color:#6B5B51;
	text-decoration:none;
	
}
.menu > li > a:hover, .menu > li > a:focus{
	background: #F2F2F2;
	box-shadow: inset 0px 5px #999999;
	color: #998675;
	padding: 50px 20px 34px;
	font-weight:normal;
}
.toggle{
z-index: 2;
margin-bottom:0;
}

.headerimg{
	height: auto;
	padding: 0;
	margin-bottom: -20px;
	margin-left: 0%;
	float: left;
	width: 100px;
	text-align: left;
}
.headerimg img{
	margin:10px 0 0 0;
	padding:0;
	width:100px;
}
@media only screen and (max-width: 768px){
.menu{
background: rgba(242,242,242,0.9);
border-top: 1px solid #999;
}
.menu, .menu > li, .menu > li > a{
height: auto;
}
.menu > li > a{
font-size: 15px;
padding: 10px 25px;
}
.menu > li > a:hover, .menu > li > a:focus{
background: #F2F2F2;
box-shadow: inset 5px 0px #999;
padding: 10px 15px 10px 25px;
}
.toggle:after {
content: attr(data-open);
display: block;
width: 200px;

margin: 33px 0 10px;
padding: 10px 50px;
background: #999;
-webkit-border-radius: 2px;
border-radius: 2px;
text-align: center;
font-size: 13px;
color: #FFFFFF;
-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;
}
.toggle:hover:after{
background: #666;
}
#toggle:checked + div .toggle:after{
content: attr(data-close);
}

}
@media only screen and (max-width: 479px){
.header > h1 {
text-align: center;
}
.header > h1, .nav, .toggle:after{
float: none;
}
.toggle:after {
text-align: center; width: 100%;
}
.headerimg{
	float:none;
	text-align:center;
		margin-left: 35%;
}
}