/* RESET */
*{box-sizing:border-box}
html{font-family: 'Arimo', sans-serif;line-height: 1.5;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%; margin: 0; padding: 0;}
body{ background: url("../img/food-wallpaper.png") repeat fixed; color:#b2b2b2;}
img,video{width: 100%; height: auto;}
figure{margin: 0; padding: 1em;}
figcaption{padding: 1em 0;}
figure img{outline: 1px solid gray;}
.half{width: 50%;display: inline-block; float: left;}
video{padding: 8em 0 4em 0;}
img.height{height: 100%; width: auto;}
hr{border: 0;margin: 2em 0;height: 1px;}
table, th, td{border: 1px solid black;border-collapse: collapse;}
td{padding: 0.5em;}

/* UTILITIES*/

.sans, .sans h1, .sans h2, .sans h3, .sans h4{font-family: 'Arimo', sans-serif;}
.cursive{font-family: 'Pacifico', cursive;}
.sans--bold{font-family: 'Arimo', cursive; font-weight: 600;}
.bold{font-weight: 600;}
.desktop{display: none; visibility: hidden;}
.mobile{display: block; visibility: visible; top: 56.25%;}
br{display: none}
.left{clear: left;}
@media screen and (min-width: 56em) {
	.desktop{display: block; visibility: visible;}
	.mobile{display: none; visibility: hidden;}
	br{display: inline}
}

.funnel{padding: 2em;}
.funnel--max{padding: 3em 0;}
.funnel--narrow{padding: 4em;}
.funnel--super--narrow{padding: 4em 6em;}
.bottom--flat{padding-bottom: 0;}

@media screen and (min-width: 56em) {
	.funnel{max-width: 60em; margin: 0 auto; padding: 4em 0;}
	.nav-container{
	}
	nav{
		position: absolute;
		left: 4em;
		right: 4em;
	}
	.funnel--max{margin: 0 auto;}
	.funnel--narrow{max-width: 60em; margin: 0 auto; padding: 8em;}
	.funnel--wide{max-width: 100em; margin: 0 auto; padding: 0 2em; position: relative;}
	.funnel--super--narrow{padding: 8em;}
}

.verticalAlign{
	position: relative;
	top: 50%;
	transform: translateY(-50%);
}

zed-lowest{z-index: 1}
zed-low{z-index: 10}
zed-middle{z-index: 100}
zed-high{z-index: 1000}
zed-highest{z-index: 10000}

/* 	COLOURS */

.whiteBG{background: #fff}
.whiteText{color: #fff}
.blackBG{background: #000}
.blackText{color: #000}

.groundText{color: #f3e2b7;}
.groundBG{background: #f3e2b7;}

.earthText{color: #c5824b;}
.earthBG{background: #c5824b;}

.waterText{color: #8bd4e4;}
.waterBG{background: #8bd4e4;}

.chloroText{color: #ccff66;}
.chloroBG{background: #ccff66;}

/* TYPOGRAPHY */
h1,h2,h3{font-family: 'Pacifico', cursive;}
h1{font-weight: 400; font-size: 2.75em; text-align: center; line-height: 1.5em; margin-bottom: 0.5em; margin-top: 0.5; letter-spacing: -0.05em;}
h2{font-weight: 400; font-size: 1.75em; text-align: center; line-height: 1.25em; margin-top: 1.25em; margin-bottom: .5em; letter-spacing: -0.05em; display: block;}
h2.alt{font-weight: 400; text-align: left; line-height: 1.25em;}
h3{font-weight: 400; font-size: 1.5em; line-height: 1.5; margin-bottom: 1.5em; display: block; clear: left;}
h4{font-weight: 400; font-size: 1.25em; line-height: 1.5; margin-bottom: 1.5em; display: block; clear: left;}
.number{font-weight: 400; font-size: 2em; line-height: 1; letter-spacing: -0.1em; margin: 0;}
p{line-height: 1.5; margin-bottom: 1.5em; font-size: 1em; display: block; clear: left;}
p.pretext{text-align: center; margin-bottom: 0;}
p.note{font-size: 0.75em; padding: 1em; background: ghostwhite;}
a{text-decoration: none}


ul.textList{
	margin: 0;
	list-style: none;
	font-weight: 400;
}
ul.textList li {
	margin-bottom: 0.5em;
}
ul.textList li:before {
	content: "+";
	display: inline-block;
	width: 1em;
	margin-left: -1em;
}

@media screen and (min-width: 56em) {
	h1{font-size: 5em;}
	h2{font-size: 2.75em;}
	h3{font-size: 2em;}
	p{font-size: 1em;}
	
	ul.textList{font-size: 1.5em; margin-bottom: 1em;}
	ul.textList li {margin-bottom: 1em;}
	ul.textList li:before {
		width: 2em;
		margin-left: -2em;
	}
}

/* FORM */

input[type=text], select, textarea{
	font-family: 'Arimo', sans-serif;
	width:100%;
	font-size: 1em;
	padding: 0.5em;
	border-radius: 1em;
	border: 1px solid #aea9aa;
	margin-bottom: 1.5em;
	background: transparent;
	color: black;
}
select {
-webkit-appearance: none;
  -moz-appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, gray 50%),
    linear-gradient(135deg, gray 50%, transparent 50%),
    linear-gradient(to right, #ccc, #ccc);
  background-position:
    calc(100% - 20px) calc(1em + 2px),
    calc(100% - 15px) calc(1em + 2px),
    calc(100% - 2.5em) 0.5em;
  background-size:
    5px 5px,
    5px 5px,
    1px 1.5em;
  background-repeat: no-repeat;
}

select:focus {
  background-image:
    linear-gradient(45deg, gray 50%, transparent 50%),
    linear-gradient(135deg, transparent 50%, gray 50%),
    linear-gradient(to right, #ccc, #ccc);
  background-position:
    calc(100% - 15px) 1em,
    calc(100% - 20px) 1em,
    calc(100% - 2.5em) 0.5em;
  background-size:
    5px 5px,
    5px 5px,
    1px 1.5em;
  background-repeat: no-repeat;
  outline: 0;
}


select:-moz-focusring {
  color: transparent;
  text-shadow: 0 0 0 #000;
}

textarea{height: 13em}
label{
	display: block;
	margin-left: 1em;
	margin-bottom: 0.5em;
	font-size: 0.75em;
	font-weight: 400;
	line-height: 1.5em;
	color: #aea9aa;
}
:focus {outline: #c97c47 auto 5px;}

@media screen and (min-width: 56em) {
	label{
	}
}
/* LAYOUT */


@media screen and (min-width: 56em) {
	.col-wrapper {
		margin-left: 4em;
	}
	.col-wrapper:after {
		    content: "";
		    display: table;
		    clear: both;
		}
	.col--1 {
		float: left;
		width: 50%;
		width: -webkit-calc(50% - 4em);
		width:         calc(50% - 4em);
		margin-bottom: 2em;
		padding-left: 4em;
	}
}
.pad-2{padding: 2em;}
.clearfix{display: block; clear: both;}
.full-block{display: block; width: 100%;}
.imgBG{background-size: contain; background-repeat: no-repeat;}
.imgBG--specs{
	background: url('../img/photography/PatternBackground.jpg') no-repeat, rgba(245,237,235,0.9);
	background-size: cover;
	background-blend-mode: soft-light;
}
.text-center {text-align: center;}
#map{height: 46em; width: 100%; margin: 0;}
#title{height: 100vh;}
#title p{width: 100%; margin-bottom: -2em; padding: 0; font-weight: 400;}
#title p,
#title h1,
button:before,
button:after,
.logo{
	text-shadow: 1px 1px 5px rgba(0,0,0,0.75); 
}
.line{margin: 0 -2em;}
.imgFixed{
	position: fixed;
	width: 100%;
	top:0;
	height: 100%;
	z-index: -1;
}

#companies{
}
.company{z-index: 1000;}

@media screen and (min-width: 56em) {
	#title{height: 100vh;}
	nav a{
	text-shadow: 1px 1px 2px black; 
	}
	nav a.button{
		text-shadow: none; 
	}
}






/* FOOTER VCARDS */
.vcard{margin-bottom: 2em;}
.vcard a{text-decoration: none; display: block; color: #000;}
.vcard a:hover{text-decoration: underline;}
.url{}
.vcard p{ margin: 0; font-size: 1.25em; font-weight: 400;}
.fn{}
.email{margin-bottom: 1.5em;}
.legal{font-size: 0.75em; margin-bottom: 3em; text-align: justify;text-justify: inter-word;}
.legal br{display: inline}
.copyright{font-size: 0.9em; margin-bottom: 0;}
.flygun{color: #fd5a5a;}

@media screen and (min-width: 56em) {
	.vcard p{ margin: 0; font-size: 1em;}
	.vcard img{margin-right: 1em; height: 6em; width: auto; float: left;}
	.legal{text-align: left;}
}



/* MOBILE MENU */

nav:after {
        content: "";
        display: table;
        clear: both;
    }

header{
	height: 3em;
	display: block;
	width: 100%;
	position: absolute;
	z-index: 10;
}
.logo{
	position: absolute;
	top: 1em;
	left: 1em;
	width: 6em;
}


/* Mobile menu link */
.js nav .skip{
	position: absolute;
	overflow: hidden;
	text-align: center;
	color: #fff;
	font-size: 2em;
	line-height: 1em;
	height: 2em;
	width: 2em;
	padding: 0.5em;
	z-index: 100;
	top: 0;
	right: 0;
}

.hamburger-icon{
	height: 100%;
	width: 100%;
	background-image: url("../img/icon__hamburger.svg");
	background-size: contain;
}
.cross-icon{
	height: 100%;
	width: 100%;
	background-image: url("../img/icon__cross.svg");
	background-size: contain;
}
.icon{
	height: 3em;
	padding-top: 8em;
}


/* Give the nav ul a height when it's been opened, i.e. make it show */
.js nav ul.open {
	max-height: 100%;
}

/* Hide and position the closed nav ul */
.js nav ul {
	max-height: 0;
	overflow: hidden;
	position: fixed;
	z-index: 5;
	width: 100%;
	left: 0;
	right: 0;
	bottom:0;
	top:0;
	margin: 0;
	padding: 0;
	background: #7c7a7e;
	transition: max-height 0.3s ease-in-out;
	list-style: none;
}

/* Style the list items to appear under the menu link */
.js nav li {
	text-align: left;
	font-weight: 400;
	padding-left: 2em;
	padding-bottom: 2em;
	
}
.js nav li:nth-child(1) {
	margin-top: 6em;
}

/* Style the list item links for ease of touch on small screens */
.js nav li a {
	display: block;
	text-decoration: none;
	color: white;
	font-size: 1.5em;
}

/* DESKTOP MENU */

@media screen and (min-width: 56em) {
	header{
		width: auto;
		position: relative;
		height: 5em;
		float: left;
	}
	
	.logo{
		position: relative;
		padding-top: 1em;
		width: auto;
		height: 5em;
	}
	
	
	.js nav ul {
		position: relative;
		overflow: auto;
		max-height: 5em;
		height: 5em;
		float: right;
		vertical-align: middle;
		width: auto;
		margin: 0;
		padding: 0;
		padding-top: 1em;
		background: transparent;
	}
	
	.js nav li {
		vertical-align: middle;
		display: inline-block;
		margin: 0;
		padding: 0;
	}
	.js nav li:nth-child(1) {margin-top: 0;}


	.js nav li a img{
		max-height: 3em;
	}


	.js nav li:nth-child(2) { margin-top: 0 }

	.js nav .skip{
		display: none;
		visibility: hidden;
	}
}

.button, .js nav li a.button, input[type="submit"]{
	-webkit-appearance: none;
	font-family: 'Pacifico', cursive;
	display: inline-block;
	color: black;
	border-radius: 1.5em;
	border: 0;
	font-size: 1em;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	padding: 1em 0;
	line-height: 1em;
	width: 12em;
	font-weight: 400;
}
button{display: none !important; visbility: hidden !important;}
@media screen and (min-width: 56em) {
	.js nav li {
			text-align: center;
			padding: 0 1em;
		}
	button{display: block !important; visbility: visible !important;}
}


.replaceline{display: none;}

/*only mobile*/
@media screen and (max-width: 56em) {
html[data-useragent*='MSIE 10.0'] .line {display: none;}
html[data-useragent*='MSIE 10.0'] .replaceline {display: block; margin: 0 -2em}
}

	.thanks{
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		background: rgba(0,0,0,0.5);
		z-index: 99999;
		opacity:1;
		-webkit-transition: opacity 400ms ease-in;
		-moz-transition: opacity 400ms ease-in;
		transition: opacity 400ms ease-in;
  }
  .thanks div{
	  	text-align: center;
	  	max-width: 40em;
		position: relative;
		margin: 10% auto;
		padding: 4em;
		background: #fff;
  }




/* ############################################################################ */
/* ########################## DESKTOP STYLING ################################# */
/* ############################################################################ */


@media screen and (min-width: 56em) {
	
	html{font-size: 0.9em;}

	.desktop{display: block; visibility: visible;}
	.mobile{display: none; visibility: hidden;}
	.mobile-nav{display: none !important;}
	.buffer{display: none;}
	


	
	#home{text-align: left;}
	

	.imgFixed{
		position: fixed;
		width: 100%;
		height: 100vh;
		z-index: -1;
	}
	.widescreen{display: block;width: 100%; padding-bottom: 42.55%; padding-bottom: calc(56.25% - 1em);}
	

	#who{
		display: block;
		text-align: center;
	}
	
}


/* INTERNET EXPLORER */

/** Let's target IE to respect aspect ratios and sizes for img tags containing SVG files */
.ie9 img[src$=".svg"] {
  width: 100%; 
}
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  img[src$=".svg"] {
    width: 100%; 
  }
}