/* Navigation Menu - Background */
.navigation {
  /* critical sizing and position styles */
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 0;
  
  /* non-critical appearance styles */
  list-style: none;
  background: #111;
}

/* Navigation Menu - List items */
.nav-item {
  /* non-critical appearance styles */
	width: 200px;
	border-top: 1px solid #111;
	border-bottom: 1px solid #000;
}

.nav-item a {
	/* non-critical appearance styles */
  	display: block;
	padding: 1em;
	background-color:#111;
	color: white;
	font-size: 1.2em;
	text-decoration: none;
	transition: color 0.2s, background 0.4s;
}

.nav-item a:hover {
	color: #D4FFFF;
	background: rgba(7,74,163,0.75);
}

/* Site Wrapper - Everything that isn't navigation */
.site-wrap {
	/* Critical position and size styles */
	min-height: 100%;
	min-width: 100%;
	background-color: white; /* Needs a background or else the nav will show through */
	position: relative;
	top: 0;
	bottom: 100%;
	left: 0;
	z-index: 1;
	/* non-critical apperance styles */
	padding: 6em;
	background-size: 200%;
	text-align: left;
}

/* Nav Trigger */
.nav-trigger {
  /* critical styles - hide the checkbox input */
  position: absolute;
  clip: rect(0, 0, 0, 0);
}

label[for="nav-trigger"] {
  /* critical positioning styles */
  position: fixed;
  left: 2em; top: 15px;
  z-index: 2;
  /* non-critical apperance styles */
  height: 50px;
  width: 50px;
  cursor: pointer;
  background-image: url("/images/ferndalemenu.jpg");
  background-repeat: no-repeat;
  background-size: contain;
}

/* Make the Magic Happen */
.nav-trigger + label, .site-wrap {
  transition: left 0.3s;
}

.nav-trigger:checked + label {
  left: 215px;
}

.nav-trigger:checked ~ .site-wrap {
  left: 200px;
  box-shadow: 0 0 5px 5px rgba(0,0,0,0.5);
}


/* Additional non-critical styles */


/* Micro reset */
*,*:before,*:after{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;margin:0;padding:0;}
html, body {
	height: 100%;
	width: 100%;
}
.container {
	width: 95%;
/*	max-width:1500px; */
	margin: auto;
	text-align: center;
}

.promoimg .mobile {
	display: none;
}
.promoimg .desktop {
	display: block;
} 




/* Landscape phones and down */

@media (max-width: 700px) {
	body {
		padding: 0 .5em;
	}
	h1 {
		padding: .5em 0;
	}
	.mainlogo .mobile {
		display: block;
	}
	.mainlogo .desktop {
		display: none;
	} 
	.promoimg .mobile {
		display: block;
	}
	.promoimg .desktop {
		display: none;
	} 
	
	.breadcrumcen { font-size: 14px; }
	label[for="nav-trigger"] {
		left: 0.6em; top: 15px;
		height: 35px;
		width: 35px;
		cursor: pointer;
		background-image: url("/images/ferndalemenu.jpg");
		background-repeat: no-repeat;
		background-size: contain;
	}
	.site-wrap {
		padding-right:2em;
		padding-left: 3em;
		}
		
}