html, body, div, span, h1, h2, h3, h4, h5, h6, p, 
a, img, ins, kbd, q, s, samp, small, strong, var,
b, u, i, center, ul, li, footer, header, 
menu, nav {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;	
	font: inherit;
	vertical-align: baseline;	
}

	
html {
	overflow-y: scroll;
	min-height:100%;
}


@font-face {
	font-family:Kiona Regular;
	src:url('Kiona-Regular.ttf');
}

body {
	background: #121212; 
	position: relative;
	min-height: 100%;
	font-family: 'Montserrat', sans-serif;
	color:#333333;
}

* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

a 
{
    color:#ffffff;
    text-decoration:none;
	font-family: "Open Sans", "Arial", sans-serif;
	text-decoration: none;
	font-size: 18px;
}

a:hover
{
	color: #ffffff;
}

h1 {
	font-size: 100px;
	font-weight: normal;
	font-family: 'Balthazar', serif;
	text-transform: uppercase;
}

h2, h3, h4, p, label, input, a, textarea {
	font-weight: normal;
	
	color:#65686d;
	
}

p {
	font-size: 18px;
}

h2 {
	font-size: 20px;
}

h3 {
	font-size: 16px;
}

h4 {
    font-size: 16px;
    font-weight: bold;
}

ul li {
	list-style: none;
	padding-bottom: 4%;
}

.wrapper {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	margin: 0 auto;
	min-height:100%;
	background-color: transparent;
}

.container {
	position: relative;
	margin: 0 auto;
	width: 100%;
	
	min-height:100%;
	
}

@media only screen and (max-width:1024px) {
	.container {
		width: 100%;
		box-shadow: none;
	}
}

.masthead {
	width: 100%;
	position: relative;
	background: #ffffff;
	padding: 1% 0% 1% 3%;
}

.logo {
	position: relative;
	display:inline-block;
	width: 250px;
	z-index: 100;
	
}

.logo img {
	display:block;
	position:relative;
	width: 100%;
	image-rendering: -webkit-optimize-contrast;
	
}

@media only screen and (max-width:600px) {
	.logo {
		width:195px;
		padding-left: 3%;
	}
}

.banner {
	height: 518px;
	width: 100%;
	display: block;
	position: relative;
	top: 0;
	left: 0;
	color: white;
	padding-top: 10%;
}

.banner h1 {
	position: relative;
	text-align: center;
	padding: 80px 0;
	
}



@media only screen and (max-width:1024px) {
	.banner {
		height: 0;
		padding-bottom: 40%;
	}
}

@media only screen and (max-width:800px) {
	.banner h1 {
		font-size: 60px;
	}
}

@media only screen and (max-width:600px) {
	.banner h1 {
		font-size:40px;
	}
}

@media only screen and (max-width:500px) {
	.banner {
		padding-bottom:45%;
	}
	.banner h1 {
		padding: 50px 0;
	}
}

.contact {
	background-image: url('../images/contact-bg.jpg');
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
}

.menuOpen {
	display: none;
	position: absolute;
	top: 20px;
	right:20px;
	z-index:999;
}
.menuOpen img {
	width:34px;
	image-rendering: -webkit-optimize-contrast;
	image-rendering:-moz-crisp-edges;           /* Firefox, Chrome, eventually Safari */
	image-rendering:-o-crisp-edges;             /* Opera                          */
	padding-top:30%;
}

@media only screen and (max-width:1000px) {
	.menuOpen {display:block;}
}

.closeBtn {
	display: block;
	position: absolute;
	top: 15px;
	right: 20px;
}


p.closeBtn{
	font-size:32px;
	font-weight:bold;
	font-family:sans-serif;
	}

/*
.closeBtn img {
	width:24px;
	image-rendering: -webkit-optimize-contrast;
	image-rendering:-moz-crisp-edges;           /* Firefox, Chrome, eventually Safari */
/*	image-rendering:-o-crisp-edges;             /* Opera                          */
/*}*/

.nav {
	display: block;
	position: relative;
	margin-top: 12%;
	text-align:center;
}	

.nav ul li a {
		color: white;
		padding-bottom: 5px;
}

ul.nav li a {
	color: white;
	font-size: 170%;
	padding:1%;
}

ul.nav li a:hover {
	color: gray;
}
.clearfix::after
{
	content: '';
	display: table;
	clear: both;

	}

	
header {
	display: inline-block;
	position: absolute;
	top: 25px;
	right:0;
	padding-right:5px;
	z-index:1000;
	margin-right:3%;
	width: auto;
}

header nav {
	text-align: right;
	position: relative;
	
	width:100%;
	padding-top: 15px;
	padding-bottom: 15px;
}

header nav ul {
	position: relative;
	margin: 0;
	padding: 0;
	list-style-type: none;
	text-align: center;
	display: inline-block;
	
}

header nav ul li {
	display: inline;
	margin-left: 0;
	font-weight:bold;
	
}

header nav ul ul li {
	border: none;
}
header nav ul li:first-child {
	margin-left: 0px;
}

header nav ul ul{
	padding:10px;
	margin: 0;
	margin-left: -10px;
	text-align: left;
	line-height: 150%;
	font-size: 100%;
	display: block;
}
	
header nav ul li, ul ul li {
	list-style-type: none;
    padding-right: 0px;
	display: inline-block;
	padding: 5px;
	padding-right: 20px;
}

header nav ul ul li	 {
	padding:0;
	width: 100%;
	
}


header nav ul li a {
/*	padding: 3px 0px 3px 5px;*/
	color: #ffffff;
	text-transform: uppercase;
}


header nav ul li ul li a {
	border:none;
}	
header nav ul li a, ul li ul li a {
    text-decoration: none;
    display:inline-block;
	font-size: 80%;
	font-weight: 500;
	color: #333333;
	font-family: 'Montserrat', 'Kiona Regular', 'Alegreya', sans-serif;
	letter-spacing: .1em;
}



header nav ul li a:hover {
	text-decoration: none;
	display:inline-block;
	color: gray;
	
}

header nav ul li ul li a:hover {
	text-decoration: none;
	font-weight:bold;
	display:inline-block;
}

header nav ul li ul{
display: none;
position: absolute;
top: 31px;
left:0;
z-index:999;
background: #ffffff;
text-transform: none;
}

header nav ul li:hover ul {
    display:block;
}



@media only screen and (max-width:1000px) {
	header {display:none}
}

#content {
	position: relative;
	display:block;
	margin: 0 auto;
	width:100%;
	min-height:100%;
	padding: 0 30px 15px 30px;
}



footer {
  position: relative;
  display: block;
  margin: 0 auto;
  padding: 3% 2% 3% 2%;
  width:100%;
  background-color:#121212; 
 }

footer p {
	font-size: 18px;
	position: relative;
	text-align: center;
	color: #ffffff;
	font-weight: 500;
	padding: 10px;
	font-family: 'Montserrat', sans-serif;
	text-transform: none;
	
	
}

footer p a {
	color: #ffffff;
	font-family: 'Montserrat', sans-serif;
	font-size:18px;	
}


@media only screen and (max-width:600px) {
	footer p, footer p a {
		font-size: 15px;
	}
}

.clear {
	clear: both;
	display: block;
	overflow: hidden;
	visibility: hidden;
	width: 0px;
	height: 0px;
}

.indexcontainer {
	position: relative;
	display:block;
	margin: 0 auto;
	width:100%;
	height:auto;
	z-index: 7;		
	overflow:hidden;
}
	
.slideShow {
	position: relative;
	padding: 0;
	display:block;
	margin: 0 auto;
	z-index: 7;
	padding-bottom:60.5%;
	height:0;
	text-align: center;
	
}

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

/*found this code on stackoverflow to make background image fit and stay fixed while scrolling on tablets*/
body:before {
  content: "";
  display: block;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: -10;
  background: url('../images/asparagus-index-mobile.jpg') no-repeat center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
} 

.slideShow {
	display: none;
}
footer {
	position: fixed;
	left: 0;
	bottom: 0;
	padding:0;
	
}
}

span.menu {display:block;
background: #555555;
height:4px;
margin-top: 4px;
z-index:1000;
width: 29px;}