@charset "utf-8";

/* CSS Reset */
html, body, body div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, hgroup, menu, nav, section, time, mark, audio, video, details, summary {
    margin: 0;
    padding: 0;
}

/*  SECTIONS  */
.section {
	clear: both;
	padding: 4em 0;
	margin: 0;
}

.row {
	clear: both;
	padding: 0;
	margin: 0;
}

.dahsed-border {border-bottom: dashed 2px #f6ec45;}

.main-header.section {
	padding:0;
	border-bottom:none;
}
.main-footer.section {border:none;}

/*  COLUMN SETUP  */
.col {
	display: block;
	float:left;
	margin: 1.25% 0 1.25% 3%;
}
.col:first-child { margin-left: 0; }


/*  GROUPING  */
.group:before,
.group:after { content:""; display:table; }
.group:after { clear:both;}
.group { zoom:1; /* For IE 6/7 */ }
/*  GRID OF TWELVE  */
.span_12_of_12 {
	width: 100%;
}

.span_11_of_12 {
  	width: 91.41%;
}
.span_10_of_12 {
  	width: 82.83%;
}

.span_9_of_12 {
  	width: 74.25%;
}

.span_8_of_12 {
  	width: 65.66%;
}

.span_7_of_12 {
  	width: 57.08%;
}

.center-span_7_of_12 {
  	width: 57.08%;
	margin: 0 auto;
}

.three-options-img .center-span_7_of_12 {
  	width: 75%;
	margin: 0 auto;
}



.span_6_of_12 {
  	width: 48.5%;
}

.span_5_of_12 {
  	width: 39.91%;
}

.span_4_of_12 {
  	width: 31.33%;
}

.span_3_of_12 {
  	width: 22.75%;
}

.span_2_of_12 {
  	width: 14.16%;
}

.span_1_of_12 {
  	width: 5.583%;
}

.remove-grid-margin {margin-left:0;}

.wrapper {
	width:90%;
	margin:0 auto;
	min-width:250px;
	max-width:1920px;
	}
	
.two-wrapper {
	display:block;
	width:900px;
	margin:0 auto;
}
	
.img-respond {
	display:block;
	height: auto;
	width:100%;
}


html {
	background-color:#000;
	color:#fff;
	}
	
body {
	font-family:'Muli', san-serif;
	margin:0;
	padding:0;
	font-size:100%;
	line-height:1.4;
	margin-top:50px;
}

.img-respond {
	display:block;
	height:auto;
	width:100%;
}

.hide {
	float:left;
	left:-9000em;
	position: absolute;
}


.content {
	position:relative;
	z-index:1000;
}


.white-bg {background-color:#fff; padding: 5% 0; margin: 50px 0; color:#000;}

/* TYPE STYLES */
@font-face {
    font-family: BodyFont;
    src: url(../fonts/CASTLEL.ttf) format("truetype");
}

/*h1 {font-family: 'ScriptFont', serif;}*/

.center-text {text-align:center;}

h1, .h1 {
	font-size: 2.5em; 
	/*padding:0 2em;*/
	line-height:1.1;
	margin-bottom:.4em;
	font-weight: 900; 
	}
	
h1, .h1, .tagline {
	font-family: 'Montserrat', sans-serif;
	text-transform:uppercase;
	text-align:center;
}

p {
	font-size:1.2em;
	margin-bottom:10px;
}
	
p.tagline {
	color:#f6ec45;
	font-size: 2.5em; 
	line-height:1.3;
	margin-bottom:1em;
	font-weight: 700;
}

.text-padding {padding: 0 25%;}

.highlight-text {color:#f6ec45;}

.padding {padding:10% 0;}
.black-bg {background-color:#000;}

.height {height:900px;}

/*.comic-winner {float: left;}*/

.hide-win {
	color:#000;
}

/*.insert-image:before {
	content: url('../images/comic-win.png');
}*/

.relative {
	position:relative;

}

.comic-place {
	/*position: absolute;
	left:14%;
	top:-30%;*/
	
	position: absolute;
	left:7%;
	top:-90%;
}

.homepage-h1-border {
		border: solid 8px #fff;
	background-color: rgba(255, 255, 255, 0.3);
	display:inline-block;
	padding:2em 2.5em 1em 2.5em;
}
.banner-h1 {

	/*position: relative;
	z-index:2;*/
	/*top:150px;*/
	margin-bottom:2em;
}

.banner-h1 h1 {
	line-height:-20px;
	padding:0;
	margin:0;
}

.homepage-a {
	width: 357px;
	margin:0 auto;
}

.homepage-a a {
	display:block;
}

.homepage-a a:first-child {
	margin-bottom:1em;
}



.padding-bottom {padding-bottom:30%;}

a {
	text-decoration:none;
	font-family: 'Muli', san-serif;
	}

a.testimonial-client-name {
	color:#fff;
	display:block;
	font-size:1.2em;
	font-weight:900; 
	margin-top:1.5em;
	}

a.testimonial-client-name:hover {
	color:#f6ec45;
	}
	
	

	
	
	

.yellow {color:#f6ec45;}

.tick-list {
	list-style:none;
	margin-bottom:1em;
	}
.tick-list li {
	border-bottom: dashed 1px #fff;
	margin-top:.8em;
	}
	
.tick-list li p {
	padding-left:2em;
	}

.tick-list li:before {
	content: url(../images/tick.png); 
	margin:.2em .7em 0 0;
	color: #f6ec45;
	float:left;
}

/* =========== BUTTONS START HERE ============= */

/* Global button styles */

.content .button {font-size:.9em;}
input.button, a.button, .button > a  {
	background-color:#f6ec45;
	color:#000;
	padding:1.5em;
	display:inline-block;
	text-transform:uppercase;
	text-align:center;
	font-weight:700;
}

.button > a:last-child {
	background-color:#a7aaac;
	/*float:right;*/
	}

input:hover.button, a.button:hover, .button > a:hover {
	background-color:#ef4062;
	transition: all .3s ease-in-out;
	}


/* Two top right buttons in desktop navigation */
.nav-buttons > a {
	font-size:.8em;
	line-height:2;
	}
	
/* cta-button is the main call to action button on the promotion page */
.cta-button > p:first-of-type:before {
	content: url(../images/FB-button-icon.png); 
	display:block;
	float:left;
	margin-right:.5em;
	}
	
.cta-button > p:first-of-type {
	font-size: 1em;
	margin-bottom: .375em;
	}

.cta-button > p:last-of-type {
	font-size:.75em;
	text-transform:initial;
	margin-bottom:0;
	}

.button-small-text {
	font-size:.8em;
	display:block;
	clear: both;
}

/* .fixed-button-cta are the two buttons fixed to the bottom of the mobile page */	
.fixed-buttons-cta {
	position:fixed;
	bottom:0;
	width:100%;
	display:none;
	z-index:1001
}
.fixed-buttons-cta > a {
	display:block;
	width:50%;
	float:left;
	text-align:center;
	padding: .5em 0;
}

.link {color:#f6e95a;}
/* Social media icons styles here */
.social-icon-link a {
	margin-right:.5em;
}
.social-icon-link img {
	padding:.2em;
	background-color:#f6ec45;
	border-radius: 50%;
}

.social-icon-link a:hover img {
	background-color:#ef4062;
}




/* ================ BUTTONS END HERE ================ */

/* MAIN NAVIGATION*/
/*.main-header {margin-bottom:110px;}*/ /*This was to push down the h1 on the promo page*/


.fixed-header {
	overflow: visible;
	background-color: #000;
	position: fixed;
	top: 0;
	width: 100%;
	/*padding:0 4%;*/
	z-index: 10001;
	}

.main-nav-wrapper a {float:left;}
.main-nav {padding-top:.5em;}
.logo {padding:.75em 1.5em 0 0;}
.d-logo {
	width:200px;
	height:auto;
	margin: 0 auto;
	clear: both;
	margin-bottom:30px;
	margin-top:-30px;
}


nav.main-nav {
	width:50%; 
	float:left;
	}
	
nav.main-nav ul {
	list-style:none; 
	float:left;
	margin-top:-12px;
	}
	
nav.main-nav ul li {float:left;}

nav.main-nav ul li:before {
	color:#f6ec45;
	content: "|";
	line-height:3.7em;
}

nav.main-nav ul li a {
	color:#a7aaac;
	padding:1em .8em;
	text-transform:uppercase;
	display:block;
	font-size:1.2em;
	}

nav.main-nav ul li a:hover {
	color:#ef4062;
	text-decoration: underline;
	}


nav.main-nav .active, nav.main-nav .active:hover {color:#f6ec45; cursor:default; text-decoration: none;}

nav.main-nav ul li:last-child:before {content: " ";}

nav.main-nav ul li:last-child {margin-right:0;}


/* sub menu */

.main-nav li {position:relative;}

.sub-nav {
	float:left;
	position: absolute;
	left:-9000em;
	display:block;
	background-color: #f6e95a;
	}

nav.main-nav ul li:hover .sub-nav {
	float:none;
	display:block;
	left:0;
	z-index:10002;
	}
nav.main-nav ul li .sub-nav li { 
	display:block; 
	float: none; 
	}
	
nav.main-nav ul li .sub-nav li a { color:#000;}

	
.main-nav .sub-nav li:before {
	content: "";
}
	
/* Menu icon */
.menu-icon {
	float: right;
	cursor:pointer;
	display: none;
	margin-right:5%;
	}
	
	

	
nav.main-nav .sub-active:hover, nav.main-nav .sub-active {
		/*background-color:#fff; */
		color:#000; 
		cursor:default; 
		text-decoration: underline; 
		}
		


		



/* FIXED BUTTONS */
.float-right {float:right;}

/* tabs */
.tabs {border-bottom: solid 1px #fff;}

/*.tabs div {padding:30px;}*/

.tabs span { 
	display:block;
	padding:.5em 1em;
	margin-right:5px;
	background-color:#fff;
	color:#000;
	float: left;
	font-weight:700;
}

.tabs span > p {margin-bottom: 0;}

.tabs span:last-child { margin-right:0;}


.tabs span:hover { 
	background-color: #ef4062;
	cursor:pointer;
	display:block;
}


.tabs span:hover h2 { 
	color: #b8ac98;
}

.tabs span.current {
	background-color:#a7aaac;	
	color: #000;
	cursor:default;
	display:block;
}


.tab-pannel-container {
	position:relative; 
	}
.tab-pannel-container div {padding:30px 0;}

.tab-pannel {
	color: #fff;
	margin-top:0;
}
.tab-pannel h3 {color: #f6ec45;}

.tab-pannel-hide {
	position:absolute;
	left:-9000em;
	float:left;
}

/*.tab-pannel-order {z-index:900;}*/
.tab-pannel-order {
	left:0; 
	position:static;
	}


/* tab css if js is turned off */

.remove-tabs {display:none;}

/* RESPNSIVE MAP STYLES */

.map-responsive {
	overflow:hidden;
	padding-bottom:44%;
	position:relative;
	height:0;
	margin:30px 0;
	}
.map-responsive embed {
	left:0;
	top:0;
	height:100%;
	width:100%;
	position:absolute
	}


/* FORM STYLES */
.antispam {display:none;}
.submit-form-h1 {margin-top:100px;}/* Look in process form.php */
form {margin-top: 1.5em;}
form label {
	float:left; 
	clear:right;
	margin-bottom:.5em;
	}

.form-input{
	border:1px solid #999;
	padding:.5em .4em;
	margin-bottom:2em;
	width:100%;
	}
	
.form-comments{
	display:block;
	height:200px;
	line-height:normal;
	padding:0 1%;
	font-family: 'Roboto', sans-serif;
	font-size:inherit;
	}

input[type="text"], textarea {
	    background: rgba(255, 255, 255, 0.025);
		outline:0;
		border-radius: 5px;
		color:#fff;
		font-size:1em;
	}
input[type="submit"] {
    border:none;
	font-weight:700;
}
	

#home-footer {
	background-image: url('../images/footer-image.jpg');
	background-repeat: no-repeat;
	background-position: top center;
	background-size: 120%;
	position:relative;
	z-index:500;
}

.contact-details a {margin-bottom:50px;}
.contact-details p {margin-bottom:0;}
.contact-details p:last-child {margin-bottom:1em;}


/* PARALLAX */

.parallax {
    /* The image used */
    background-image: url("img_parallax.jpg");

    /* Set a specific height */
    min-height: 500px; 

    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}


/*.parallax-image { ADD THIS CLASS TO A CONTAINER
  background-repeat: no-repeat;
  background-size: 130% auto;
  height: 800px;
  background-image: url('../images/footer-image.jpg');
  position: relative;

}*/




/* CUSTOM COUNTER LIST */

	.custom-counter {
		counter-reset: section;                     
	}

	.custom-counter div:before {
		counter-increment: section;                 
		content: counter(section);
		display: inline-block;
		/*padding-right:.3em;*/
		float: left;
		font-weight:900; 
	}
	
	.custom-counter div p {text-align:left; padding-left:1.3em;}

	#custom-counter ol {counter-reset: item;}

	#custom-counter li {
		display:block; 
		margin-bottom:1em; 
		border-bottom: dashed 1px #fff; 
	}
		
	#custom-counter li:before {
		display: inline-block;
		content: counter(item) ") ";
		counter-increment: item;
		padding-right:.3em;
		float: left;
		color:#f6ec45;
	}
	
/* sub item*/
	#custom-counter ol ol {counter-reset: sub-item; padding-left:2em;}
	#custom-counter ol li ol li:first-child {padding-top:1em;}
	#custom-counter ol li ol li {display: block;}
	#custom-counter ol li ol li:before {
		display: inline-block;
		content: counter(item) "." counter(sub-item) ": ";
		counter-increment: sub-item;
		color:#f6ec45;
	}
	
	
/* sub sub items */
	#custom-counter ol ol ol {counter-reset: sub-sub-item;}
	#custom-counter ol li ol li ol li {display: block;}
	#custom-counter ol li ol li ol li:before {
		display: inline-block;
		content: counter(sub-sub-item, lower-latin) ": ";
		counter-increment: sub-sub-item;
	}
	
	
/* Slider / lightbox */


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

.slider-outer{position:relative;}

.slider-inner{
	width:100%;
	position:relative;
	overflow:hidden;
	float:left;
}

.slider-inner img{
	display:none;
	width:100%;
	height: auto;
}

.slider-inner img.active{
	display:inline-block;
}

.prev,.next{
	float:left;
	/*margin-top:130px;*/
	cursor: pointer;
	position:absolute;
	z-index:500;
	top:48%;
	bottom:0;
}

/*.prev{top:300px;}*/

.next{
	float:right;
	right:0;
	/*bottom:505px;*/
}

#light-box {
   /*position: fixed;*/
   /*width: 100%;
   height:100%;
   background: rgba(0, 0, 0, 0.8);
   top: 0;
   left: 0;
   color: #fff;*/
 }
 
 #light-box img {
   position: absolute;
   left: 0;
   right: 0;
   top:0;
   bottom: 0;
   margin: auto;
   z-index:500;
   height: auto;
   width: 90%;
   
 }
 
.material-icons { 
	position: absolute;
	top:50px;
	right:0;
	background-color:#f6ec45;
	padding:1em;
	color:#000;
	z-index:501;
 }
 
 
/* .body {
	 position: absolute;
	 background-color:#000;
	 background: rgba(0, 0, 0, 0.7);
	 z-index:100;
	 min-height:100%;
	 height:100vh;
	 min-width:100%;
	 width:100vw;
	 }*/

 


/* PAGE CONTENT */
#homepage-intro {}


.contain-centered-content { position: relative; }

.banner-center-content {
	position: absolute;
	top: 40%;
	left: 50%;/*technically left is setting the width */
	width:80%; /* Override left: 50%; to set the width */
	text-align:center;
	transform: translate(-50%,-50%); /* Ensure Modernizr is installed for legacy browsers */
}

.center-content {
	position: absolute;
	top: 50%;
	left: 50%;/*technically left is setting the width */
	width:80%; /* Override left: 50%; to set the width */
	text-align:center;
	transform: translate(-50%,-50%); /* Ensure Modernizr is installed for legacy browsers */
}

/*.fix-img { position:fixed; display:block;}*/
.fix-img {
	position: fixed;
}


#vehicle-graphics-intro {
	background-image: url('../images/vehicle-graphics-intro.jpg');
	background-repeat: no-repeat;
	background-size:cover;
	background-position:center;
	/*padding:15% 0;*/
	    /*position: fixed;*/  /* If you want the slide show to stay fixed then used fixed and remove overflow hidden */
    position: absolute;
    position: fixed;
	overflow: hidden;
    width: 100%;
    top: 0px;
    z-index: 0;
	height: 850px;
}




/* ====== IMAAGE HOVER ====== */


.win,
.wall,
.arch,
.misc,
.em,
.fs,
.threed,
.bf,
.ic,
.fc,
.pw,
.fw,
.ch,
.de,
.wdw,
.dt {
	background-repeat:no-repeat;
	background-position: center;
	background-size: cover;
	text-align:center;
	position:relative;
	overflow:hidden;
	color: #ffffff;
	text-align: center;
	margin: 0;
	/*padding: 1.1%;*/
}

.span_3_of_12.win,
.span_3_of_12.wall,
.span_3_of_12.arch,
.span_3_of_12.misc,
.span_3_of_12.em,
.span_3_of_12.fs,
.span_3_of_12.threed,
.span_3_of_12.bf,
.span_3_of_12.de,
.span_3_of_12.wdw,
.span_3_of_12.ic,
.span_3_of_12.fc,
.span_3_of_12.pw,
.span_3_of_12.fw{
	width:25%;
	height:335px;
	max-height:335px;
	}


.span_3_of_12.ch,
.span_3_of_12.dt {width:30%;}

.span_3_of_12.ch {margin-left:20%;}
.span_3_of_12.dt {margin-right:20%;}


.win {background-image: url('../images/Airbus 02.jpg');}
.wall {background-image: url('../images/wallpaper-timelapse.gif');}
.arch {background-image: url('../images/Desk Wrap - main.jpg');}
.misc {background-image: url('../images/Misc-main.jpg');}
.em {background-image: url('../images/kidlington-outside-inside.jpg');}
.fs {background-image: url('../images/mcafee.jpg');}
.threed {background-image: url('../images/McAfee3DLogo.jpg');}
.bf {background-image: url('../images/danis.jpg');}
.ic {background-image: url('../images/individual-Colour-vehicle.jpg');}
.fc {background-image: url('../images/full-colour-vehicle.jpg');}
.pw {background-image: url('../images/part-wrap-vehicle.jpg');}
.fw {background-image: url('../images/full-wrap-vehicle.jpg');}
.ch {background-image: url('../images/colour-change-option.jpg');}
.dt {background-image: url('../images/detailing-option.jpg');}
.wdw {background-image: url('../images/Airbus 01.jpg');}
/*.de {background-image: url('../images/RollupBanner-XBox.jpg');}*/
.de {background-image: url('../images/citreon.jpg');}

.normal-state { 
	padding:40% 0;
	background-color: rgba(0, 0, 0, 0.3);
	/*-webkit-transition: padding 1.9s, background-color 2s;
	transition: padding 1.9s, background-color 2s;*/
	
	-webkit-transition: padding .6s, background-color .6s;
	transition: padding .6s, background-color .6s;
}

.normal-state p { padding-left:1em; padding-right:1em;}

.a { 
	bottom: 100%;
	color: #fff;
	height: 100%;
	/*left: 0%;*/
	text-align: center;
	position: absolute;
	-webkit-transition: bottom .6s ease;
	transition: bottom .6s ease;
	width: 100%;
	}
	



.win:hover .normal-state, 
.wall:hover .normal-state, 
.arch:hover .normal-state, 
.misc:hover .normal-state, 
.em:hover .normal-state, 
.fs:hover .normal-state, 
.threed:hover .normal-state, 
.bf:hover .normal-state, 
.ic:hover .normal-state, 
.fc:hover .normal-state, 
.pw:hover .normal-state, 
.fw:hover .normal-state, 
.ch:hover .normal-state, 
.de:hover .normal-state, 
.wdw:hover .normal-state, 
.dt:hover .normal-state { 
	padding:25% 0 55% 0;
	background-color: rgba(237, 66, 99, 0.7);
}





.win:hover .a, 
.wall:hover .a,
.arch:hover .a,
.misc:hover .a,	
.em:hover .a, 
.fs:hover .a, 
.threed:hover .a, 
.bf:hover .a, 
.ic:hover .a, 
.fc:hover .a, 
.pw:hover .a, 
.fw:hover .a, 
.ch:hover .a, 
.wdw:hover .a, 
.de:hover .a, 
.dt:hover .a { bottom: -65%;}
	



/*#vehicle-graphics-promote-business {
	background-image: url('../images/vehicle-graphics-promote-buiness.jpg');
	background-repeat: no-repeat;
	background-size:cover;
	background-position:center;
	padding:15% 0;
}*/

/*#colour-change-your-vehicle {
	background-image: url('../images/colour-change.jpg');
	background-repeat: no-repeat;
	background-size:cover;
	background-position:center;
	padding:15% 0;
}*/

figure{
  overflow: hidden;
  position: relative;
  display: inline-block;
  vertical-align: center;
}

figcaption{
  position: absolute;
  left: 0; right: 0;
  top: 0; bottom: 0;
  text-align: center;
  font-weight: bold;
  width: 100%;
  height: 100%;
  display: table;
  padding: 27% 0;
}

figcaption div{
  display: table-cell;
  vertical-align: middle;
  position: relative;
  /*top: 20px;*/
  opacity: 0;
  color: #000;
  text-transform: uppercase;
  /*padding: 0 15%;*/
  border: none;
}

/*figcaption div p{
  font-family: 'Roboto', sans-serif;
  font-weight: 900;
}

figcaption div:after{
  position: absolute;
  content: "";
  left: 0; right: 0;
  bottom: 0;
  text-align: center;
  margin: auto;
  width: 0;
  height: 2px;
  background: #2c3e50;
}

figure img {
  -webkit-transition: all 0.5s linear;
          transition: all 0.5s linear;
  -webkit-transform: scale3d(1, 1, 1);
          transform: scale3d(1, 1, 1);
}


.grow { transition: all .2s ease-in-out; }

.grow:hover { transform: scale(1.7); }


figure:hover figcaption{ background: rgba(255,255,255,0.3)}

figure:hover div{
  opacity: 1;
  /*top: 0;
  height:100%;*/
}

figure:hover div:after{width: 50%;}

figure:hover img{
  -webkit-transform: scale3d(1.2, 1.2, 1);
          transform: scale3d(1.2, 1.2, 1);
	}

.quotes:before, .quotes:after {
	color:#f6ec45;
	content: '"';
	} 
	


	

ul.signs-list {list-style:none;}

ul.list {margin:1em 0; list-style:none;}
ul.list li {margin-bottom:1em;}


.four-options-img img, .three-options-img img {margin-bottom:1em;}
.four-options-img .span_3_of_12, .center-span_7_of_12 .span_6_of_12, .three-options-img .span_4_of_12   {
	background-color:#f6ec45; 
	color:#000; 
	position:relative; 
	padding-bottom:2em; 
	}
	
.four-options-img .span_3_of_12 ul.list, .center-span_7_of_12 .span_6_of_12 ul.list, .three-options-img .span_4_of_12 ul.list {padding:0 2em;}
.four-options-img .span_3_of_12 a.button, .center-span_7_of_12 .span_6_of_12 a.button, .three-options-img .span_4_of_12 a.button {
	display:block; 
	border-top: solid 1px #000; 
	position:absolute;
	bottom: -5em;
	left:0;
	right:0;
	text-align:center;
	background-color:#000;
	color:#fff;
	}

.spacer-span_3_of_12 {display:none;}


.trained-installer-logos a {
	float: left;
	clear: right;
	margin: 40px 60px 20px 0px;
}

.trained-installer-logos p {
	clear: both;
}






/* ===== DESKTOP & MOBILE GALLERY ====== */ 

.desktop_gallery {display:block;}
.mobile_gallery {display:none;}


/* ===== 404 Styles ====== */ 

.four-o-four {
	background-color:#000;
	text-align:center;
	padding:3em;
	}
.four-o-four_title {
	color:#f6ec45;
	font-size:10em;
	font-family: 'Montserrat', sans-serif;
	text-transform:uppercase;
	display:block;
	padding:0;
	margin:0;
	}
.four-o-four_subline {
	color:#fff;
	font-size:3em;
	margin-bottom:1em;
	}
	
.four-o-four_message {
	margin-bottom:4em;
	}
	
	



@media only screen and (max-width: 1920px) {
.wrapper {width:80%;}
h1, .h1 {
	/*font-size: 4em; */
	padding:0 2em;
	}
	
p.tagline {font-size: 2em;} 

	
}


@media only screen and (max-width: 1770px) {
	h1, .h1 {padding:0 1.5em;}	
}

@media only screen and (max-width: 1650px) {
	h1, .h1 {padding:0 1em;}	
		nav.main-nav ul {margin-top:-10px;}

nav.main-nav ul li:before {line-height:3.3em;}

nav.main-nav ul li a {
	padding:1em .8em;
	font-size:1em;
	}
	
}

@media only screen and (max-width: 1550px) {
	.wrapper {width:85%;}

	h1, .h1 {
	/*font-size: 3.5em;*/ 
	padding:0 1.8em;
	}
	
.tagline {font-size: 1.7em;}


.span_3_of_12.ch,
.span_3_of_12.dt {width:40%;}

.span_3_of_12.ch {margin-left:10%;}
.span_3_of_12.dt {margin-right:10%;} 

}


@media only screen and (max-width: 1370px) {
/*.nav-buttons > a { padding:.8em;}*/

.wrapper {width:90%;}

	

h1, .h1 {padding:0 1.3em;} 

	
}

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

h1, .h1 {
	/*font-size: 3.125em; */
	padding:0 1.5em;
	} 

	
p.tagline {
	margin-bottom:1em; 
	}
	
nav.main-nav {
	width:50%; 
	float:left;
	}
	
.center-span_7_of_12 {width: 63%;}

.three-options-img .center-span_7_of_12 {width:73%;}
	
}

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


nav.main-nav ul li a {
	padding:1em .5em;
	font-size:1em;
	}

h1, .h1 {
	font-size: 2.6em; 
	}
	


	


.span_3_of_12.win, 
.span_3_of_12.wall,
.span_3_of_12.arch,
.span_3_of_12.misc,	
.span_3_of_12.bf,
.span_3_of_12.threed,
.span_3_of_12.fs,
.span_3_of_12.em,
.span_3_of_12.ic,
.span_3_of_12.fc,
.span_3_of_12.pw,
.span_3_of_12.fw{width:50%;}
	
.span_3_of_12.ch,
.span_3_of_12.dt {width:50%;}

.span_3_of_12.ch {margin-left:0;}
.span_3_of_12.dt {margin-right:0;}





.normal-state { padding:25% 0;}


.win:hover .normal-state, 
.wall:hover .normal-state, 
.arch:hover .normal-state, 
.misc:hover .normal-state, 
.em:hover .normal-state, 
.fs:hover .normal-state, 
.threed:hover .normal-state, 
.bf:hover .normal-state, 
.ic:hover .normal-state, 
.fc:hover .normal-state, 
.pw:hover .normal-state, 
.fw:hover .normal-state, 
.ch:hover .normal-state, 
.de:hover .normal-state, 
.wdw:hover .normal-state, 
.dt:hover .normal-state { padding:10% 0 55% 0;}


.win:hover .a, 
.wall:hover .a,
.arch:hover .a,
.misc:hover .a,	
.em:hover .a, 
.fs:hover .a, 
.threed:hover .a, 
.bf:hover .a, 
.ic:hover .a, 
.fc:hover .a, 
.pw:hover .a, 
.fw:hover .a, 
.ch:hover .a, 
.wdw:hover .a, 
.de:hover .a, 
.dt:hover .a { bottom: -65%;}
	


}

@media only screen and (max-width: 1100px) {
	nav.main-nav ul {margin-top:-5px;}
	nav.main-nav ul li:before {line-height:2.8em;}
	nav.main-nav ul li a {
		font-size:.9em;
		}

	#home-footer {background-size: 200%;}
	
	
	nav.main-nav {
	width:44%; 
	float:left;
	}
}

@media only screen and (max-width: 1050px) {
	nav.main-nav {
		width:46%; 
		}
}

@media only screen and (max-width: 1020px) {
	
	.four-options-img .span_3_of_12 a.button, .center-span_7_of_12 .span_6_of_12 a.button, .center-span_7_of_12 .span_4_of_12 a.button  {bottom: -3.5em;}
	
	.d-logo {
	width:100px;
	margin-bottom:15px;
}
	/*.section {padding: 2em 0;}*/

	
	h1, .h1 {
		font-size: 2.3em; 
		padding: 0 .5em;
	} 

	
	p.tagline {
		font-size: 1.5em; 
	}
	.fixed-buttons-cta {display:block;}
	.nav-buttons {display:none;}
	.hide-nav {
		float:left;
		left:-9000em;
		position: absolute;
	}
	.menu-icon {display: block;}
	
	nav.main-nav {
		width:35%;
		float:right;
		margin-top:3em;
		}
		
	nav.main-nav ul {
		float:none;
		background-color:#fff;
		text-align:left;
		padding: 5%;
		width:90%;
		}
		
	nav.main-nav ul li {
		float:none;
		display:block;
		}

	nav.main-nav ul li:before {
		content: "";
	}

	nav.main-nav ul li a {
		display:block; 
		width:90%;
		padding-left:1em;
		padding-right:0;
		padding:5%;
		color:#000;
		font-weight:700;
		}
	nav.main-nav ul li a:hover {background-color: #ef4062; color:#000;}
	
	nav.main-nav .active, nav.main-nav .active:hover  {background-color:#f6ec45; color:#000;}
	

	
	
	/* sub nav */
	.sub-nav {
	float:none;
	position: static;
	display:block;
	}
	
.sign-active {background-color: yellow;}
	
	nav.main-nav ul li:hover .sub-nav {
	position:static;
	}
	
	nav.main-nav ul li .sub-nav li a {
		font-weight:300;
		padding: .5em 0 .5em 1.5em;
		}
		
	/*nav.main-nav ul li .sub-nav li a:before {
    content: "-";
    margin-right: 1.5em;
}*/
	
	
	a.button, .button > a  {padding:.8em;}
	.fixed-buttons-cta > a {padding-left:0; padding-right:0;}
	
	.cta-button > p:first-of-type {
	font-size: .8em;
	margin-bottom: .3em;
	}
	
	
	
	nav.main-nav .sub-active:hover, nav.main-nav .sub-active {
		background-color:#fff; 
		color:#000; 
		cursor:default; 
		text-decoration: underline; 
		    margin-left: -2.2em;
		}
		
		
		
	nav.main-nav ul li ul.sub-nav li a.sub-active  {
		color:#000;
		text-decoration:none;
		}
	
		
		
	nav.main-nav ul li ul.sub-nav li a.sub-active:before  {
		content: ">";
		margin-right: 1.5em;
		text-indent:-1.5em;
	}
	
	nav.main-nav ul li ul.sub-nav li a.sub-active  {
		content: ">";
		margin-right: 1.5em;
		text-decoration:none;
		font-weight:600;
	}
	
	
	


	
	.text-padding {padding: 0 10%;}
	
	.spacer-span_3_of_12 {display: block; width:100%; height:1px;}
	.span_3_of_12 {width: 48.5%; margin-bottom:10%;}
	.span_3_of_12:nth-child(3n+1) {margin-left:0; }
	


	.span_3_of_12.win,
	.span_3_of_12.wall,
	.span_3_of_12.arch,
	.span_3_of_12.misc,
	.span_3_of_12.bf,
	.span_3_of_12.threed,
	.span_3_of_12.fs,
	.span_3_of_12.em,
	.span_3_of_12.ic,
	.span_3_of_12.fc,
	.span_3_of_12.pw,
	.span_3_of_12.fw{margin:0;}
	
	
		/* sub menu */

.main-nav li {position:static;}



nav.main-nav ul li.mobile-hover-off a:hover {
	background-color:#fff; 
	cursor:default;
	text-decoration:none;
	}
	
nav.main-nav ul li.mobile-hover-off  ul li a:hover {background-color: #ef4062; color:#000;}
nav.main-nav ul li.mobile-hover-off .active:hover   {background-color: #f6ec45 ;}




/* ===== 404 Styles ====== */ 

.four-o-four {
	padding:2em;
	}
.four-o-four_title {
	font-size:8em;
	}
.four-o-four_subline {
	font-size:2.5em;
	margin-bottom:1em;
	}
	
.four-o-four_message {
	margin-bottom:3em;
	}
	

}

@media only screen and (max-width: 900px) {
	
	p.tagline {margin-bottom:2em;}
	
	.center-span_7_of_12 {width: 80%;}
	.three-options-img .center-span_7_of_12 {width:85%;}
	
	.two-wrapper {width:700px;}

	
.span_3_of_12.win,
.span_3_of_12.wall,
.span_3_of_12.arch,
.span_3_of_12.misc,
.span_3_of_12.bf,
.span_3_of_12.threed,
.span_3_of_12.fs,
.span_3_of_12.em,	
.span_3_of_12.de,
.span_3_of_12.wdw,
.span_3_of_12.ic,
.span_3_of_12.fc,
.span_3_of_12.pw,
.span_3_of_12.fw{
	    height:235px;
	max-height:235px;
	}
	
	
	.win:hover .normal-state, 
.wall:hover .normal-state, 
.arch:hover .normal-state, 
.misc:hover .normal-state, 
.em:hover .normal-state, 
.fs:hover .normal-state, 
.threed:hover .normal-state, 
.bf:hover .normal-state, 
.ic:hover .normal-state, 
.fc:hover .normal-state, 
.pw:hover .normal-state, 
.fw:hover .normal-state, 
.ch:hover .normal-state, 
.de:hover .normal-state, 
.wdw:hover .normal-state, 
.dt:hover .normal-state { padding:7% 0 55% 0;}
}

@media only screen and (max-width: 800px) {
	
	.wrapper {width:80%;}
	.two-wrapper {width:600px;}

	.span_6_of_12 {
		width:100%;
		margin-left:0;
	}
	
	
	.center-span_7_of_12, .three-options-img .center-span_7_of_12 .span_4_of_12  {width: 100%;}
	.center-span_7_of_12 > .span_6_of_12:first-child, .center-span_7_of_12 > .span_4_of_12:first-child {margin-left:0;}
	.center-span_7_of_12 > .span_6_of_12 {width: 48.5%; margin-left:3%;}
	
	
	.span_4_of_12 {
		width:100%;
		margin-left:0;
	}
	
	h1, .h1 {
		font-size: 2.2em; 
		padding: 0;
		font-weight:700;
	} 
	
	p {font-size:1em;}
	.text-padding {padding: 0 5%;}

	
	/*.main-header {margin-bottom:90px;}*/
	
	#home-footer {background-size: cover;}

	
	/* RESPNSIVE MAP STYLES */

	.map-responsive {margin-top:-30px;}
	
	
	
	nav.main-nav {
		width:55%;
		}
	
}

@media only screen and (max-width: 700px) {
	
	.two-wrapper {width:100%;}

	h1, .h1 {
	font-size: 2em; 
	} 

	
	p.tagline {
	font-size: 1.2em; 
	}
	
	.spacer-span_3_of_12 {display: none; }
	.four-options-img .span_3_of_12 {width: 100%; margin-bottom:20%; margin-left:0;}
	
	.center-span_7_of_12  {width: 100%;}
	.center-span_7_of_12 > .span_6_of_12 {width:100%; margin-left:0;}
	.center-span_7_of_12 > .span_6_of_12:first-child {margin-bottom:20%;}
	
	
	.span_3_of_12.win,
.span_3_of_12.wall,
.span_3_of_12.arch,
.span_3_of_12.misc,
	.span_3_of_12.bf,
	.span_3_of_12.threed,
	.span_3_of_12.fs,
	.span_3_of_12.em,
	.span_3_of_12.ic,
	.span_3_of_12.fc,
	.span_3_of_12.pw,
	.span_3_of_12.fw,
	.span_3_of_12.ch,
	.span_3_of_12.dt {width:100%;}

	.span_3_of_12.ch, .span_3_of_12.dt {margin:0;}
	
	
}


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

	h1, .h1 {
	font-size: 1.5em; 
	}

	.cta-button > p:first-of-type {margin-top:7px;}
	.cta-button > p:last-of-type {display:none;}
	
	
	/*a.button, .button > a  {padding:.6em;}*/
	.fixed-buttons-cta > a {padding-left:0; padding-right:0;}
	
	.cta-button > p:first-of-type {font-size: .6em;}
	
	nav.main-nav {
		width:75%;
		}
		
		
	/* ===== 404 Styles ====== */ 

.four-o-four {
	padding:2em 1em;
	}
.four-o-four h1.four-o-four_title {
	font-size:4em;
	text:center;
	}
.four-o-four_subline {
	font-size:1.5em;
	}
	
.four-o-four_message {
	margin-bottom:1em;
	}
	
}

@media only screen and (max-width: 560px) {
	/*h1, h2, h3, p, .tagline {text-align:left;}*/
	
	.wrapper {width:80%;}
	
	.text-padding {padding:0;}
	
	.slider-inner img{
	display:block;
	width:50%;
	float:left;
	/*width:500px;
	height:300px;*/
}

.next, .prev {display:none;}

.cta-text {display: none;}

nav.main-nav {
		width:100%;
		}
		
		
/* Testimonial  */

.small-mobile-test {font-size:85%;}

/* ===== DESKTOP & MOBILE GALLERY ====== */ 

.desktop_gallery {display:none;}
.mobile_gallery {display:block;}





}


	
	
/*  GO FULL WIDTH BELOW 480 PIXELS */
@media only screen and (max-width: 480px) {
	
	#homepage-intro .padding {padding:30% 0 0 0;}
	
	.homepage-a {
	width: 100%;
}


.homepage-a a:first-child {
	margin-bottom:0;
}

	
	.col {  margin: 1% 0 1% 0%; }
    
    .span_1_of_12, .span_2_of_12, .span_3_of_12, .span_4_of_12, .span_5_of_12, .span_6_of_12, .span_7_of_12, .span_8_of_12, .span_9_of_12, .span_10_of_12, .span_11_of_12, .span_12_of_12 {
	width: 100%; 
	}
	
	h1, .h1 {
	text-align:left; 
	}
	
	
	.center-text {text-align:left;}
	#homepage-intro .center-text, #homepage-intro h1 {text-align:center;}
	

/* tabs */
.tabs span { 
	display:block;
	padding:.6em;
	margin-right:2px;
	background-color:#fff;
	float: left;
}

	p.tagline {font-size:1.3em;}
	
	
	.quotes:before, .quotes:after {
	content: '';
	} 
	
	.single-quote:before {
		content: '"';
		color:#f6ec45;
		display:block;
		float:left;
		clear:right;
		position:relative;
		bottom:25px;
		left:20px;
		font-size:2em;
		margin-left:-20px;
	}
	
	
#homepage-intro .wrapper { width:100%;}
/*#homepage-intro .center-text {text-align:center;}*/
#homepage-intro h1 {
	/*text-align:center;*/
	font-size:2.2em;
	text-shadow: 0px 3px 8px rgba(1, 1, 1, 0.4);
}
#homepage-intro .yellow {color:#686a6b;}
.homepage-a.button > a {
	background-color:#000; 
	color: #fff; 
	border-bottom: solid 2px #fff; 
	text-align:left;
	padding:1.2em 0 1.2em 2em;
	display:block;
	text-indent:-2em;
	font-size:1.3em;
	} 
	
.homepage-a.button > a:hover {
	background-color:#f6ec45; 
	color: #000;
	} 
	
.homepage-a.button > a:before {
	content: url('../images/tiny-logo-eye.png');
	margin-right:.5em;
	margin-left:2em;
	} 
	
.homepage-a > a {/*width: 100%;*/ z-index:9000;}



.banner-h1 {
	border: none;
	background-color: #fff;
	margin: auto auto;
	padding:2em 2.5em 1em 2.5em;
	/*position: static;*/
	/*z-index:2;
	top:150px;*/
	color:#000;
	display: block;
	margin-top:25px;
}

.banner-h1 h1 {
	line-height:-20px;
	padding:0;
	margin:0;
}

.homepage-a {
	/*position:static;*/
	padding-bottom:0;
}


.button-small-text {display: none;}

.contain-centered-content { position: relative; }

.center-content {
	position: static;
	width:80%; /* Override left: 50%; to set the width */
	text-align:left;
	transform: translate(0,0); /* Ensure Modernizr is installed for legacy browsers */
	margin: 0 auto;
	padding: 10% 0;
}


.four-options-img .span_3_of_12 h2, .center-span_7_of_12 .span_6_of_12 h2, .three-options-img .span_4_of_12 h2 {padding-left:1.2em;}


	/* ===== 404 Styles ====== */ 

h1#four-o-four_title-center.four-o-four_title {
	font-size:4em;
	text:center;
	}



}

@media only screen and (max-width: 400px) {
	.wrapper {width:80%;}
}