/* RESET */
*{
	margin: 0;
	padding: 0;
	-webkit-margin-before:0em;
	-webkit-margin-after:0em;
	line-height: 1.5;
	font-family: 'Open Sans Condensed', sans-serif;
	box-sizing: border-box;
}
body{
	-webkit-text-size-adjust:none;
	-moz-text-size-adjust:none;
	-ms-text-size-adjust:none;
	-webkit-text-size-adjust:100%;
	-moz-text-size-adjust:100%;
	-ms-text-size-adjust:100%;
}

.homepage, .case-studies{color: rgba(0,0,0,1);}
.homepage a, .case-studies a{color: rgba(255,255,255,0.8); text-decoration: none;}
.homepage a:hover, .case-studies a:hover{color: rgba(255,255,255,1.0); border-bottom: 1px solid rgba(255,255,255,1.0)}
img{ font-size: 0; display: block;
}
img.width{ position: relative; width: 100%; height: auto; }
img.height{ position: relative; height: 100%; width: auto; }

/* PRODUCTS & SERVICES */


ul{ list-style-type: none; margin-bottom: 3em; font-size: 1em; vertical-align: top;}
.service{padding-bottom: 1em; vertical-align: top; text-align: center;}
.service h2, .service p{text-align: left;}
.product{ padding: 0em; border: 0.1em solid rgba(0,0,0,0.8); position: relative;vertical-align: top; margin-bottom: 2em; text-align: left;}	

.infopanel{
	position: absolute;
	top: 0; width: 100%; z-index: 10;
	background: rgba(0,0,0,0.75);
	display: table; border-collapse: collapse; height: 2.4em;
}
.infopanel .icon{ display: table-cell; vertical-align: middle; width: 4.4em;}
.infopanel h3{ display: table-cell; vertical-align: middle; width: calc(100% - 4.4em);padding: 1em; color: white; font-size: 1.2em;}


@media (min-width: 50em){
	.product{	width: calc(50% - 1em); display: inline-block; margin-right: 2em; }
}
@media (min-width: 81em){
	.product{	width: calc(33% - 2em); display: inline-block; margin-right: 3em; }
	.last{margin-left: 3em; margin-right: 0;}
}

/* HEADER BAR*/

header{
	background: rgba(0,0,0,0.95);
	color: white;
	height: 3em;
	padding: 0em;
	position: fixed;
	top: 0;
	z-index: 15;
	width: 100%;
}
.logo{
	height: 1em;
	margin: 1em;
	display: inline-block;
	opacity: 0.95
}
nav{
	float: right;
	display: inline-block;
	text-align: right;
	margin-right: 1em;
}
nav a{
	margin-left: 2em;
	text-transform: uppercase;
	font-size: 1em;
	line-height: 3em;
}
.tagline{font-weight: bold;}

.call::before, .email::before, .work::before, .home::before,
.instagram::before, .twitter::before, .facebook::before{
	font-family: FontAwesome;
	font-style: normal;
	font-weight: normal;
	text-decoration: inherit;
	color: white;

}
/* nav icons */
.call::before{content: "\f095"}
.email::before{content: "\f0e0"}
.work::before{content: "\f03e"}
.home::before{content: "\f015"}

.instagram::before{content: "\f16d"}
.twitter::before{content: "\f099"}
.facebook::before{content: "\f09a"}
a.facebook{font-size: em;text-decoration: none;}

/* responsive - desktop */

@media (min-width: 50em){
	header{
		height: 8em;
		padding: 2em;
	}
	.logo{
		height: 4em;
		margin: .25em
	}
	.call::before{content: "01527 570404"}
	.email::before{content: "contact"}
	.work::before{content: "case studies"}
	.home::before{content: "home"}
	.call::before, .email::before, .work::before, .home::before{
		font-family: 'Michroma', sans-serif;
	}
}

/* responsive - HD */

@media (min-width: 81em){
	.call::before{	content: "call now: 01527 570404" }
	.email::before{	content: "send us a message" }
	nav a{
		margin-left: 4em;
	}
}		

/* TYPOGRAPHIC SCALE AND RHYTHM*/

h1,h2,h3{line-height: 1.25em;text-transform: uppercase;font-family: 'Michroma', sans-serif;}
h1{font-size: 1.5em;margin-bottom: 1em;padding-top: 1em;}
h2{font-size: 1em;}
h3{font-size: 0.75em;margin-bottom: 1em;}
p{font-size: 1.25em;padding: 0 0 1.5em 0;}

h1{}
h3, input[type="submit"]{padding: 0.5em 0;}

@media (min-width: 50em){
	.pad{padding: 3em;}
	h1{font-size: 2.4em;}
	h2{font-size: 1.4em;}
	h3{font-size: 1.2em;}
}


@media (min-width: 81em){
	.pad{padding: 5em;}
	h1{font-size: 4em;}
	h2{font-size: 2.5em;}
	h3{font-size: 2em;}
	p{font-size: 1.5em;}
}



/* HERO */

.hero{
	display: block;
	position: fixed;
	z-index: -1;
	width: 100%;
	height: 100%;
	top: 3em;
	bottom: 0;
	left: 0;
	right: 0;
	background-image: url("img/hero/hero__moduleo.jpg");
	background-size: cover;
	background-repeat: no-repeat;
}
.hero__fill{
	position: relative;
	width: 100%;
	padding-top: 30em;
}
.hero__text{
	position: absolute;
	display: inline-block;
	top: 50%;
	transform: translateY(-50%);
	width: 100%;
	text-align: center;
	color: #ffffff;
	text-shadow: 0.1em 0.1em 0.1em rgba(0,0,0,0.6);
}

@media (min-width: 50em){
	.hero__fill{padding-top: 40em;}
}
@media (min-width: 81em){
	.hero__fill{padding-top: 45em;}
}

/* DOUBLE GRID */

.double-grid{
	position: relative;
}
.cell{
	width: calc(50% - 2em);
	display: inline-block;
	background: white;
	margin-right: 3em;
}
.even{margin-right: 0}
@media (min-width: 50em){
	.double-grid{
	padding: 2em;
}
}
/* SECTIONS */

section{
	position: relative;
	display: block;
	width: 100%;
	border: 1em solid white;
	border-bottom: 0;
}
.page{
	position: relative;
	display: block;
	width: 100%;
	height: 10em;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center bottom;

}	
.case-studies .page{
	height: 20em;
}
.panel{
	position: relative;
	display: inline-block;
	padding: 0.5em 0 1.5em 0;
	background: rgba(255,255,255,1);
	width: 100%;
	vertical-align: top;
}
.panel img{
	width: 49%;
	display: inline-block;
	vertical-align: top;
	margin-bottom: 0;
}

@media (min-width: 50em){
	.page{
			min-height: 40em;
			border-top: 0.25em solid white;
	}
	section{border: 2em solid white;}
}

@media (min-width: 81em){
	.page {
		min-height: 50em;
		padding: 4em;
	}
	section{border: 4em solid white;}
	.funnel{
		max-width: 60em;
		margin: 0 auto;
	}
}



/* PAGE BACKGROUNDS */

.page__shadow--bottom{background-image: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 0%,rgba(0,0,0,0.25) 100%)} 
.page__white{background: white; color: rgba(0,0,0,0.9); height: auto;}
.page__karndean{background-image: url("img/hero/hero__karndean.jpg");}
.page__skills{background-image: url("img/hero/hero__skills.jpg");}
.page__moduleo{background-image: url("img/hero/hero__moduleo.jpg");}
.page__showroom{background-image: url("img/hero/hero__showroom.jpg");}
.page__masterchef{background-image: url("case-studies/hero__masterchef.jpg"); background-position: top;}
.page__domestic{background-image: url("case-studies/hero__domestic.jpg"); background-position: center;}
.page__commercial{background-image: url("case-studies/hero__commercial.jpg"); background-position: center;}
.page__premierInn,
.hero__premierInn{background-image: url("case-studies/hero__premierInn.jpg"); background-position: center;}
.page__arden{background-image: url("case-studies/hero__arden.jpg"); background-position: bottom;}
.page__cadmore{background-image: url("case-studies/hero__cadmore.jpg");}

/* LOGO STRIP */

.strip{height: 12em; padding: 0.5em; text-align: center; background: white;}
.strip a{display: inline-block;height: 2em;}
.strip img{display: inline-block; margin: 0 0.5em; margin-bottom: 0.5em;}
.strip a:hover{border-bottom: 0;}

@media (min-width: 50em){
	.strip{
		height: 6em;
		padding: 1em;
		overflow: hidden;
		text-align: center;
		background: white;
	}
	.strip a{
		display: inline-block;
		height: 2em;
	}
	.strip img{
		display: inline-block;
		margin: 0 0.5em;
	}
}

@media (min-width: 81em){
	.strip{
		height: 8em;
		padding: 1.5em;
		overflow: hidden;
		text-align: center;
		background: white;
	}
	.strip a{
		display: inline-block;
		height: 2.5em;
	}
	.strip img{
		display: inline-block;
		margin: 0 1em;
	}
}

/* FOOTER */

footer{
	padding: 1em;
	background: rgba(0,0,0,0.9);
	color: white;
	width: 100%;
	vertical-align: top;
}
footer .legal{font-size: 0.75em; display: block; width: 100%;}
footer a{
	text-transform: uppercase;
	font-size: 1em;
	line-height: 4em;
}
input, textarea{
	display: inline-block;
	width: 100%;
	padding: 0.5em;
}
form{font-size: 1.25em; margin-bottom: 4em;}
.about{
	display: inline-block;
	vertical-align: top;
}
label{
	display: block;
	margin-bottom: 0;
	margin-top: 1em;
}
input, textarea, button{display: block; margin-bottom: 1.5em; width: 100%;}
input[type="submit"]{
	border: 1px solid rgba(255,255,255,0.8);
	background-color:rgba(0,0,0,0);
	color: white;
	text-transform: uppercase;
}
input[type="submit"]:hover{background-color:rgba(255,255,255,0.8);color: black;cursor:pointer;}


@media (min-width: 50em){
	footer{padding: 2em;}
}
@media (min-width: 81em){
	footer{padding: 4em;}
}

nav a,footer, input[type="submit"]{font-family: 'Michroma', sans-serif;}
#wrapper--top{
	height: 150px; 
	position: relative;
	z-index: 0;
}
#wrapper--bottom{
	z-index: -1;
	top: 0;
	height: 100%;
	position: absolute;
	width: 100%;
}
#heroImg{
	position: absolute;
	z-index: 2;
	color: #ffffff;
}

/* RESPONSIVE STYLING */

/* unused? */

.cs-grid{
	position: relative;
	padding: 2em;
}
.cs-grid img{
	width: 100%;
	margin-bottom: 4em;
}

@media (min-width: 50em){
	.cs-grid img{
		display: inline-block;
		width: calc(50% - 2em);
		margin-right: 4em;
	}
	.even{margin-right: 0}	
}