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

body {	
	font-weight:400;
	color: #333;	
	-webkit-font-smoothing: antialiased; 
	-webkit-text-size-adjust: 100%;
	overflow-x: hidden;
	font-family: 'Roboto', 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: 2.5em; color:#fff; font-weight: 400; font-family: 'Oswald', sans-serif; text-transform:uppercase;}
h1 span {white-space: nowrap;}
h2 { font-size: 2em; color:#f9bc00; font-weight: 700;  margin-top: 1em; font-family: 'Oswald', sans-serif; text-transform:uppercase;}
h3 { font-size: 1.25em; color:#575757; font-weight: 700;	margin-top: 30px;}

p { margin: 0 0 1.5em 0; }
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: #f28b00; 
	text-decoration: none; 
	outline: 0;
}
a:hover, a:active { color: #f9bc00; }

.align-left{text-align: left;}
.align-center{text-align: center;}
.align-right{text-align: 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:#1a212a;
}
#top {background:#2c3140; padding:.5em 0;}
#top img {float:right;}
.logo {margin-top:-1em;	}
.boss {padding-top:1.5em;	}
.call {padding-top:.5em; text-align:right;	font-size:1.5em; color:#fff; text-transform:uppercase;}
.call span {font-size:.8em;}
.call a {color:#fff;}

/* hero */
#hero {width:100%; max-height: 600px; overflow:hidden; position:relative; z-index:1; background: url(../images/slide1b.jpg) center bottom no-repeat;}
#hero h2 { font-weight: 400; color: #fff; font-size: 3em;  margin: 0;  padding: 0; }
#hero h2 span {font-size:.75em; text-transform:none;}
#hero p {font-size: 3em; color:#f9bc00; font-family: 'Oswald', sans-serif; text-transform:uppercase;}
.cta {width:70%; margin:10em auto; padding:2em 1em; text-align:center; background: rgba(0,0,0,0.5);}

.toggle, [id^=drop] { display: none;}
#nav {background: #1b1f27;}
nav {	
	width: 100%;
	text-align:center;	
	font-size: 1.5em;	
	position: relative;	
	z-index: 10;	
	text-transform:uppercase;	
	font-weight:bold;
}
nav:after {
  content: "";
  display: table;
  clear: both;
}
nav ul {
	padding: 0;
	margin: 0 auto;
	list-style:none;
	position: relative;
	
}
nav ul li {
	display: inline-block;	
	padding:0 2%;
	margin:0; 
	background:#f9bc00;
}
nav ul li.qu {background:#f9b000;}
nav a {	
	display: block;
	padding: .75em .5em;
	text-decoration: none;		
}

nav a:link, nav a:visited {color:#fff;} 
nav a:hover, nav a:active {color:#fff;}
nav li:hover, nav li.qu:hover {background:#2c3140;}

nav ul ul {
  display: none;
  position: absolute;
  top: 54px;
  text-align:center;
  font-size:.7em;
}

nav ul li:hover > ul { display: inherit; }
nav ul ul li {
  width: 170px;
  float: none;
  display: list-item;
  position: relative;
  background:#2c3140;
  margin:0 0 0 -50px;
}
nav ul ul li:hover { background: #1f232d; }

li > a:after { content: ' +'; }

li > a:only-child:after { content: ''; }

.content.light {font-size: 1.125em;}
.content.dark {padding: 2.5em 0; background: url(../images/bg.jpg);}
.content.commercial {padding: 2.5em 0; background: url(../images/bg-commercial.jpg);}

.feature {margin-top: 1.5em; text-align: center;color:#fff;}
.feature img { border: 1px solid #e2e2e2;   margin: 0 auto 1.5em; max-width:97%;}
.feature img:hover {border: 1px solid #ccc;}
h2.featureTitle { font-family: 'Roboto', sans-serif; text-transform:none; font-size: 1.25em; margin: 1em 0; padding: 0 2%;}
.feature a, h2.featureTitle a {color:#f9bc00;}
.feature a:hover, h2.featureTitle a:hover {color:#fff;}
.featureDesc {  padding: 0 2% 1.5em;}
.testimonial {background:#2c3140; padding:4em 0 3em; color:#fff;}
.testimonial a {color:#f9bc00;}
.testimonial p, .quote p {margin-bottom:0;}
.quote {background:#f9bc00; font-size:3em; padding:.5em 0 .25em; font-family: 'Oswald', sans-serif;}
.quote span {white-space: nowrap;}
.quote a {color:#333;}
.free {text-align:center; line-height:2.0; background-color: rgba(0, 0, 0, 0.04); width:80%; padding: 3em 3%; margin:1em auto;}
.free strong { text-transform:uppercase;}
.free span {font-size:1.25em; color:#0082c9;}
.swipebox img {
    display: inline;
    margin: 1%;
    max-width: 98%;
}

form {font-size:.9em;}
.form-label {float: left; width: 150px;}
.review {
    display: block;
    background: url(../images/quote.png) no-repeat 10px 10px;    
    height: auto;
    overflow: auto;
    border-radius: 3px;
    padding: 3em; 
    margin: 20px 0 0 0;
    border: 1px solid #bbb;
}

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

footer {width: 100%;	display: block;	background:#1b1f27;	color:#fff; padding: 1.5em 0 0 0;	margin: 0;	position: relative; }
footer a:link, footer a:visited {color:#f28b00;}
footer a:hover, footer a:active {border-bottom: 1px solid #f28b00;}
ul.footernav {padding: 0;
	margin: 0 auto;
	list-style:none;
	position: relative; font-size:1.25em;}
ul.footernav li {display: inline-block;	
	padding:0 1%;
	margin:0; }

#copyright {color: #fff; margin: 1.5em 0; font-size: .75em;}
#copyright a, #copyright span {color:#fff;}
#copyright a:hover, #copyright a:active{border-bottom: 1px solid #fff;}

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

/*media queries*/
@media screen and (max-width: 1200px) {
/* ipad portrait */
  .boss {padding-top:.5em;}
  .call {padding-top:.5em;}
  nav ul li {padding:0 1%; }
  nav a {}
	
	.content {-webkit-overflow-scrolling : touch;}	
	header {-webkit-overflow-scrolling : touch;}
	
}


/* mobile devices */
@media only screen and (max-width: 860px) {
.logo img{margin:0 auto;}
.boss img{margin:0 auto;}
.call {text-align:center;}

#hero h2 { font-size:2em;}
#hero p { font-size:2em;}
#nav {position:relative; top:0;}
nav { background:#1b1f27; font-size:1em;}
nav ul {	text-align:left;}
.toggle + a,
.menu { display: none; }

.toggle {
  display: block;   
  color: #fff;  
  line-height: 42px;
  text-decoration: none;
  border: none;
  margin-left:.5em;
}

.toggle:hover { color:#d0d0d0; }

[id^=drop]:checked + ul { display: block; }

nav ul li {
  display: block;
  width: 80%;
  margin:0 auto;
  padding:0;
}

nav ul ul .toggle,
nav ul ul li {background:none; margin:0;}
nav ul li ul li:hover { background: none; }
nav a:hover { color:#d0d0d0; }

nav ul ul {
  float: none;
  position: static;
  color: #fff;
  text-align:left;
  margin-left:1em;
  font-size:1em;
}

nav ul ul li:hover > ul,
nav ul li:hover > ul { display: none; }

nav ul ul li {
  display: block;
  width: 100%;
}
h1 {font-size:2em;}	
.quote  {font-size:2em;}	
ul.footernav {margin-bottom:2em; }
ul.footernav li {padding:0 2%;}
.imageLeft {float: none;	margin: 2% auto; max-width:96%;}
.imageRight {float:none; margin: 2% auto; max-width:96%;}
.free {line-height:1.6; width:80%; padding: 2em 2%;}


}