/* Header -------------------------------*/


header {
	z-index:3;
	position:relative;
	width:100%;
	overflow:hidden;
	background-color:white;
	box-shadow:0px 2px 10px 5px rgba(100,100,100, 0.2);
}
.h-menu {
	display:block;
	position:absolute;
	left:2%;
	top:50%;
	height:60%;
	z-index:3;
	transform:translateY(-50%);
}
.h-logo {
	backface-visibility: hidden;
	margin:0px;
	padding:0px;
	background-color:white;
	position:absolute;
}
.h-logo a {
	display:block;
}
.h-logo-img {
	display:block;
	height:100%;
	-mox-box-sizing:border-box;
	box-sizing:border-box;
}
@media only screen and (min-width : 200px) {
	header {
		height:4em;
	}
	.h-logo {
		width:50%;
		height:70%;
		left:50%;
		top:50%;
		overflow:visible;
		transform:translate3d(-50%,-50%,0);
	}
	.h-logo a {
		position:relative;
		left:50%;
		top:50%;
		transform:translate3d(-50%,-50%,0);
		height:100%;
	}
	.h-logo-img {
		margin:0px auto;
	}
}
@media only screen and (min-width : 400px) {
	.h-menu {
		height:80%;
	}
	.h-logo {
		height:90%;
	}
}
@media only screen and (min-width : 800px) {
	header {
		height:120px;
	}
	.h-menu {
		display:none;
	}
	.h-logo {
		float:left;
		width:400px;
		height:100%;
		left:0%;
		top:0%;
		z-index:1;
		transform:none;
	}
	.h-skew {
		position:absolute;
		top:0px;
		left:0px;
		width:100%;
		background-color:white;
		transform:skewX(-30deg) translate3d(10%,0,0);
		height:100%;
	}
	.h-logo a {
		display:block;
		position:relative;
		height:90%;
		top:50%;
		left:0%;
		transform:translateY(-50%);
	}
	.h-bg {
		position:absolute;
		z-index:0;
		background-color:white;
		right:0%;
		margin:0px;
		padding:0px;
		width:80%;
		height:100%;
	}
	.h-bg img {
		position:relative;
		float:right;
		z-index:0;
		opacity:0.8;
	}
	.h-bg address {
		position:absolute;
		margin-right:3em;
		color:white;
		font-style:normal;
		font-size:1em;
		line-height:2em;
		top:50%;
		right:0%;
		z-index:1;
		transform:translateY(-50%);
	}
	.h-bg address span {
		margin-left:1em;
	}
}

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

nav {
	z-index:2;
	position:absolute;
	width:100%;
	overflow:hidden;
	background-color:#f9ac46;
}
.n-closed {
	transition:all 0.3s;
}

/*  Basic Navigation Element ------------*/

	.n-item {
		overflow:hidden;
		cursor:pointer;
	}
	.n-item div {
		height:100%;
	}
	.n-item h1 {
		position:relative;
		display:inline-block;
		vertical-align:top;
		padding:0px;
		margin:0px 1em 0px 0px;
		font-weight:normal;
		font-size:1.1em;
		color:#333;
		top:50%;
		transform:translateY(-50%);
	}
	.n-item img {
		backface-visibility: hidden;
		display:inline-block;
		position:relative;
		height:50%;
		top:50%;
		transform:translateY(-50%);
	}
	.n-underline {
		position:absolute;
		left:0%;
		top:120%;
		height:0.1em;
		width:0%;
		background-color:#815231;
		transition:width 0.3s;
	}
	.n-item:hover .n-underline {
		width:100%;
	}

/* Right Hand Navigation Element ---------------------*/

	.n-right {
		height:100%;
		background-color:#bcb773;
	}

/* Nav Mobile ---------------------------------------*/

@media only screen and (min-width : 200px) {
	.n-closed {
		transform:translateY(-100%);
	}
	.n-item {
		display:block;
		height:5em;
		width:90%;
		margin:0px auto;
		border-bottom:1px solid black;
	}
	.n-item:last-of-type {
		border-bottom:none;
	}
	.n-item:nth-child(4) {
		border-bottom:none;
	}
	.n-item div {
		display:block;
	}
}

@media only screen and (min-width:350px) {
	.n-item h1 {
		font-size:1.2em;
	}
}
/* Nav Desktop -------------------------------------*/

@media only screen and (min-width : 800px) {
	nav {
		position:relative;
	}
	.n-closed {
		display:block;
		height:60px;
		transform:none;
	}
	.n-item {
		height:100%;
		width:auto;
		min-width:180px;
		overflow:hidden;
		display:inline-block;
		border-bottom:none;
	}
	.n-item div {
		display:block;
		overflow:hidden;
	}
	.n-item h1 {
		margin:0px .5em 0px .5em;
		font-size:1em;
	}
	.n-item img {
		height:70%;
	}
	.n-right {
		float:right;
		padding:0px 0px 0px 3em;
	}
	.n-right .n-item:last-of-type img {
		display:none;
	}
}

@media only screen and (min-width: 1420px) {
	.n-item {
		min-width:220px;
	}
	.n-item h1 {
		margin:0px 1em 0px 1em;
		font-size:1.2em;
	}
}
.n-open {
	transform:none;
}


/* Footer --------------------------------------*/

footer {
	position:relative;
	width:100%;
	height:auto;
	background-color:#bcb773;
	font-size:0.8em;
	color:#808080;
	overflow:hidden;
}
.f-col-2 {
	height:50%;
	width:50%;
	float:left;
}
.f-link {
	display:block;
	float:left;
	min-width:61px;
	height:100%;
	padding:1.2em 0px 1.2em 0.5em;
}
.f-link:first-of-type {
	margin-left:0px;
}
.f-link a {
	position:relative;
	vertical-align:middle;
	margin-right:0.5em;
	color:#808080;
	line-height:1em;
}
.f-link a span {
	display:none;
	font-size: 1.5em;
    vertical-align: middle;
    margin-left: 0.5em;
}
.f-link a:hover {
	color:#909090;
}
.f-link img {
	height:35%;
	position:relative;
	top:50%;
	transform:translateY(-50%);
}
.f-col-4 {
	height:50%;
}
.f-address {
	float:left;
	width:48%;
	margin:1em 0px 0px 0px;
	text-align:right;
}
.f-col-4 address {
	font-style:normal;
	position:relative;
	line-height:1.5em;
}
.f-col-4 address span {
	margin-left:2em;
}
.f-copyright {
	height:50%;
	float:left;
	margin:3em 0px 0px 0px;
}
.f-copyright span {
	display:block;
	position:relative;
	top:50%;
	transform:translateY(-50%);
}

@media only screen and (min-width:400px) {
	.f-link {
		padding:0px 0px 0px 0.5em;
	}
	.f-link a {
		line-height: 4em;
	}
	.f-link a span  {
		display:inline;
	}
}

@media only screen and (min-width:800px) {
	footer {
		height:8em;
	}
	.f-col-2 {
		width:100%;
	}
	.f-link:first-of-type {
		margin-left:2em;
	}
	.f-address {
		float:right;
		width:auto;
		margin:0px 2em 0px 0px;
		text-align:left;
		padding-right:0px;
	}
	.f-col-4 address {
		top:50%;
		transform:translateY(-50%);
	}
	.f-copyright {
		margin:0px 0px 0px 2em;
	}
}

@media only screen and (min-width:1080px) {
	footer {
		height:6em;
	}
	.f-col-2 {
		height:75%;
		min-width:762px;
		width:auto;
	}
	.f-col-4 {
		height:75%;
	}
	.f-address {
		float:right;
		margin:0px 2em 0px 0px;
	}
	.f-copyright {
		height:25%;
		float:left;
		margin:0px 0px 0px 2em;
	}
}
@media only screen and (min-width:1450px) {
	footer {
		height:4em;
	}
	.f-col-2 {
		height:100%;
	}
	.f-col-4 {
		height:100%;
	}
	.f-address {
		float:left;
		margin:0px 0px 0px 5%;
	}
	.f-copyright {
		height:100%;
		float:right;
		margin:0px 2em 0px 0px;
	}
}
@media only screen and (min-width:1680px) {
	footer {
		font-size:0.9em;
	}
}