@import "normalize.css";
@import "skeleton.css";

body {	
	font-weight:300;
	color: #333;	
	-webkit-font-smoothing: antialiased; 
	-webkit-text-size-adjust: 100%;
	overflow-x: hidden;
	font-family: 'Open Sans', Arial, Helvetica, sans-serif;	
}
/*font size: html is set to 62.5% so that all the REM measurements throughout Skeleton
are based on 10px sizing. So 1.5rem = 15px :) body font-size is set to 1.5em*/
/* heading styles over-riding skeleton */
h1 { font-size: 2em; line-height: 44px; color:#f58710; font-weight: 400; }
h1.page-title {margin-top: 1em;}
h2 { font-size: 1.5em; line-height: 44px; color:#7f7f7f; font-weight: 400;  margin-top: 1em;  }
h3 { font-size: 1.25em; line-height: 30px; color: #0c60b9; font-weight: 400;	margin-top: 30px;}

p { margin: 0 0 1.5em 0; line-height: 170%;}
em { font-style: italic; }
strong { font-weight: bold;}
img, object, video {max-width: 100%; height: auto; display:block;}
img { max-width: 100%; width: auto; border: 0; -ms-interpolation-mode: bicubic;}
hr { border: solid #ff7a00; border-width: 1px 0 0; clear: both; margin: 30px auto; height: 0; width:80%;}

/* links */
a:link, a:visited { 
	color: #f90; 
	text-decoration: none; 
	outline: 0;
}
a:hover, a:active { color: #f29c41; }

.align-left{float: left;}
.align-center{text-align: center;}
.align-right{float: right}
.imageLeft {float: left;	margin: 2%;}
.imageRight {float:right; margin: 2%;}
.imageCenter {margin:2% auto;}

header {
  margin:0 auto;
  padding: 0;
	width: 100%;
	z-index: 4;
	background:rgba(13,36,47,.9);
	min-height:98px;
	position:fixed;
	top:0px;
}


/* hero */
#hero {width:100%; max-height: 413px; overflow:hidden; position:relative; z-index:1;  margin-top:98px;background:#0d242f;}
.photoSlide  {width:100%; height: 413px;	background: url(../images/hero2.jpg) center bottom no-repeat; }
.photoSlide-about  {width:1140px; height: 192px;	background: url(../images/bg-about.jpg) center bottom no-repeat; margin: 0 auto;}
.photoSlide-about2  {width:1140px; height: 192px;	background: url(../images/banner4.jpg) center bottom no-repeat; margin: 0 auto;}
.photoSlide-carport  {width:1140px; height: 192px;	background: url(../images/bg-carport.jpg) center bottom no-repeat; margin: 0 auto;}
.photoSlide-barn  {width:1140px; height: 192px;	background: url(../images/bg-barn.jpg) center bottom no-repeat; margin: 0 auto;}
.photoSlide-projects  {width:1140px; height: 192px;	background: url(../images/bg-projects.jpg) center bottom no-repeat; margin: 0 auto;}
.photoSlide-services  {width:1140px; height: 192px;	background: url(../images/bg-services.jpg) center bottom no-repeat; margin: 0 auto;}
.photoSlide h2 {
    color: #fff;
    font-size: 1.75em;
    padding: 3em 0 0 0;
    margin: 0 0 .5em 0;
    font-family: 'Roboto Condensed', sans-serif;}

.photoSlide h1 {
    font-size: 3.25em;
    margin: 0;
    padding: 0;
    color: #c4c2c2;
    text-transform:uppercase;
    font-family: 'Roboto Condensed', sans-serif;
    letter-spacing: -3px;
    line-height:58px; }
.photoSlide h2 span{padding: .25em 2%; background:rgba(52,116,176,.5);}
.photoSlide h1 span{padding: .125em 2%; background:rgba(39,86,130,.5);}
nav {	
	width: 100%;
	text-align:right;	
	font-size: 1em;	
	position: relative;
	text-transform:uppercase;
	font-weight:bold;
	z-index: 10;
	margin-top:3em;
}
nav ul {
	padding: 0;
	margin: 0 auto;
	list-style:none;
}
nav li {
	display: inline;	
	padding:0 3%;
	margin:0; 
}
.right {padding-right:0;}
.left {padding-left:0;}
nav a {	
	display: inline-block;
	padding: 1em 0 .5em 0;
	text-decoration: none;
			
}

nav ul li a:link, nav ul li a:visited {color:#e4e3e3;} 
nav ul li a:hover, nav ul li a:active {color:#fff;border-bottom: 2px solid #fff;}
nav ul li.active a { color: #f371b0;}

nav a#pull {display: none;}
.quote {margin:3em 0 0 2%;}
.quote .button {background:rgba(235,135,16,.6);}
.button {font-size:1em;}
a.button:link, a.button:visited {color:#fff;} 
a.button:hover,  a.button:active {color:#fff; border-color:#fff;} 
.call-to-action-button {text-align:right;}
.cert {margin:2em 0 0 1%;}
.cert img{display:inline;}

.content {padding: 2.5em 0;}
.content.home {padding-bottom: 5em; text-align:center; }
.feature {margin-top: 1.5em; text-align:center;}
.feature img { margin: 0 auto 1.5em; max-width:98%;}
.feature img:hover {opacity:0.9;}
h2.featureTitle { font-size: 1.25em;  margin: 1em 0; padding: 0 2%; background: url(../images/line.jpg) center bottom no-repeat; }
#project h2.featureTitle {background: none; }

h2.featureTitle a {}
h2.featureTitle a:hover {}
.featureDesc {  padding: 0 2% 1.5em;}

.logos {text-align:center; margin-top: 2em;}
.logos img {display:inline;}

.catalogue h2.title { margin:0;}
.catalogue h1 {padding-bottom:.5rem; margin:1rem 0; border-bottom:1px solid #f58710;}
/*.catalogue h2 a {color:#efefef;}
.catalogue h2 a:hover {color:#ccc;}*/
.catalogue img {border:1px solid #e4e4e4;}

.swipebox img { margin:1%; display: inline;  max-width: 98%;}
.swipebox img:hover { opacity:0.9;}

/*.content2 {background:#0a6347; padding: 2.5em 2% 5em 2%; color:#fff;}
.content2 h1 {color:#fff; padding-bottom:.5rem; margin:1rem 0; border-bottom:1px solid #efefef;}
.content2 h2 {color:#efefef;}*/
.cat {margin-top:1em;}
img.cat:hover {opacity:0.9;}
.sep {height:2em; margin-top:2em; border-top:1px solid #efefef;}
.options-button {margin-top:2em;}
.options-button a.button:link, .options-button a.button:visited {color:#f90;} 
.options-button a.button:hover,  .options-button a.button:active {color:#f29c41;border-color:#dcdbdb;} 
.bsep {border-right:1px solid #efefef; padding-right:4%;}

.quote-form p {margin:1.5em 0;}
.typev, .typet, .typeu, .basic {border:1px solid #e4e4e4;}
.options {margin-top:5px; border:1px solid #e4e4e4; background:#efefef;}

.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 35px;
    height: 0;
    overflow: hidden;
}
.video-container iframe {
    position: absolute;
    top:0;
    left: 0;
    width: 100%;
    height: 100%;
}

footer {width: 100%;	display: block;	background-color:#183848;	}
.footerMiddle {color:#fff; padding: 1.5em 0 0 0;	margin: 0;	position: relative;}
footer a:link, footer a:visited {color:#fff;}
footer a:hover, footer a:active {color:#ccc;}
.footerBottomText {	min-height: 60px; position: relative;}
.footer-phone {text-align:center;}
#copyright {color: rgba(255,255,255,.7); margin: 1.5em 0; font-size: .75em;}
#copyright a, #copyright span {color:rgba(255,255,255,.7);}
#copyright a:hover, #copyright a:active{border:0;}

/* Clearfix */
.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}
.clearfix:after {
    clear: both;
}
.clearfix {
    *zoom: 1;
}

/*media queries*/
@media screen and (max-width: 1040px) {
/* ipad portrait */

  nav {margin-top:.5em;}
  nav ul li, .right {padding:0 2%; }  
  nav ul li a {padding: .5em 0 .5em 0;}
  nav ul li a:hover, nav ul li a:active {border-bottom: 0;}
	
	.content {-webkit-overflow-scrolling : touch;}	
	header {-webkit-overflow-scrolling : touch;}
	.photoSlide-about  {width:100%; height: 320px;	background: url(../images/bg-about.jpg) -200px bottom no-repeat;}
	
}


/* mobile devices */
@media only screen and (max-width: 767px) {

	header {position:relative;}
	#hero {margin-top:0;}
	.photoSlide  {width:100%; height: 413px;	background: url(../images/hero.jpg) -400px bottom no-repeat; }
	
	#logo img{margin:0 auto;}
	nav {text-align:center;}
	nav ul {
		display: none;
		height: auto;
	}
	nav li {
		display: block;		
		width: 100%;
	}
	.left {padding-left:2%;}
	nav li a {
    width: 100%;
		text-align: left;	
	}
	nav ul li a:link, nav ul li a:visited {border-bottom: 1px solid #576979;} 
	nav a#pull {
		display: block;		
		width: 100%;
		position: relative;
	}
	nav a#pull:after {
		content:"";
		background: url('../images/nav-icon.png') no-repeat;
		width: 30px;
		height: 30px;
		display: inline-block;
		position: absolute;
		right: 35px;
		top: 15px;
	}
	
.footer-address {text-align:center;}
.call-to-action-button {text-align:center;}
#copyright {text-align:center;}

}

@media only screen and (max-width: 600px) {
.photoSlide h2 { padding: 2em 0 0 0;}
.photoSlide h2 span{padding: .25em 0; }
.photoSlide h1 span{padding: .125em 0; }
.cert {margin:.5em 0 0 1%;}
.content2 {padding: 2.5em 6% 5em 6%;}
.options-button {text-align:center;}
.bsep {border-bottom:1px solid #2a5f91; border-right:0; padding:0 0 2em 0; margin-bottom:2em;}

}