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

body {		
	color: #424b54;	
	-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; color:#6c7a89; font-weight: 400; margin-bottom: .5em; }
h2 { font-size: 1.5em; color:#ff6c00; font-weight: 400; line-height:1.4;}
h2 span {font-weight: 400;}
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: #58636f; 
	text-decoration: none; 
	outline: 0;
	border-bottom: 1px solid #58636f;
}
a:hover, a:active { color: #6c7a89; border-bottom: 1px solid #6c7a89;}

.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:#1799dd;
	color:#fff;
}
#studio-one header {background:#e8330f;}
#topnav { padding: 1.25em 10em 1.25em 0; font-weight:700; font-size: .8em; text-align:right;}
#topnav a {margin-right:2.5em;}
#topnav a.last {margin-right:0;}
header a:link, header a:visited, #topnav a:link, #topnav a:visited {color:#fff; border:0;} 
header a:hover, header a:active, #topnav a:hover, #topnav a:active {color:#cdeaf9; border:0;}
#logo { }
#shop {position:absolute; top:0; right:0;}
#shop img:hover {opacity:0.9;}
.order img{float:right;}
#nav {background:#6c7a89;border-bottom: 1px solid #fff;}
nav {			
	font-weight:700;	
	position: relative;	
	z-index: 10;	
	padding: .8em 0;
	text-align:center;	
}
nav ul {
	padding: 0;
	margin: 0 auto;
	list-style:none;
}
nav li {
	display: inline;	
	padding:0;
	margin:0;
	background: url(../images/star.png) 0 3px no-repeat; 
}
nav a {	
	display: inline-block;
	margin:0 1.5em 0 2.25em;
	text-decoration: none;		
}

nav ul li a:link, nav ul li a:visited {color:#fff; border:0;} 
nav ul li a:hover, nav ul li a:active {color:#93a6ba; border:0;}
nav li.first {background:none;}
nav li.first a{margin-left:0;}
nav li.last a{margin-right:0;}
nav a#pull {display: none;}
nav li.sec {display: none;}

/* hero */
#hero {width:100%; max-height: 240px; overflow:hidden; position:relative; z-index:1;}
.photoSlide  {width:100%; height: 240px;	background: url(../images/bg1.jpg) center bottom no-repeat;}
.photoSlide2  {width:100%; height: 240px;	background: url(../images/bg2.jpg) center bottom no-repeat;}
.photoSlide-inner  {width:100%; height: 20px;	}

.content {padding: 4em 0 6em 0;}
.home h1 {display:none;}
.home h2 {font-size: 2em; color:#6c7a89;}

#call-buttons {margin-top:3em;}
#call-buttons img:hover {opacity:0.9;}
.e-path {margin-top:1rem;}
.samples img {margin:0 auto;}
.customer-service a:link, .customer-service a:visited { 
	color: #ff6c00; 	
	border-bottom: 0;
}
.customer-service a:hover, .customer-service a:active { color: #fb9346; border-bottom: 0;}
.customer-service h1 {color:#1799dd;}
form {border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    margin: 0 auto 1em auto;
    border: 1px solid #efefef;
    padding: 30px;
    background: #f8f8f8;
   font-size:.9em;
   max-width:480px;    
    }

label, legend {font-weight:400; }
button,
input[type="submit"],
input[type="reset"],
input[type="button"] {font-size: 1em; text-transform: none; font-weight:400; letter-spacing: normal; height:42px;}
.button.button-primary,
button.button-primary,
input[type="submit"].button-primary,
input[type="reset"].button-primary,
input[type="button"].button-primary {
  color: #fff;
  background-color: #1799dd;
  border-color: #33C3F0; }

input[type="submit"].button-primary-s,
input[type="reset"].button-primary-s,
input[type="button"].button-primary-s {
  color: #fff;
  background-color: #ea2b00;
  border-color: fd5f3c; }
form a:link, form a:visited { 
	color: #ff6c00; 	
	border-bottom: 0;
}
form a:hover, form a:active { color: #fb9346; border-bottom: 0;}

.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-color:#6c7a89;	}
.footerMiddle {color:#fff; padding: 4em 0 0 0;	margin: 0;	position: relative; font-size: .8em;	}
.footerMiddle span {color:#CCC;}

#copyright {color: #ccc; margin: 2em 0 4em 0; font-size: .7em; }
#copyright a, #copyright span {color:#424b54; border:0;}
#copyright a:hover, #copyright a:active{border:0;}

/* Clearfix */
.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}
.clearfix:after {
    clear: both;
}
.clearfix {
    *zoom: 1;
}
@media screen and (max-width: 1040px) {

nav li {background:none;}
nav a {margin:0 .5em;}

}
/* mobile devices */
@media only screen and (max-width: 940px) {
.content {-webkit-overflow-scrolling : touch;}	
	header {-webkit-overflow-scrolling : touch;}
#topnav a {margin-right:0;}
#sec {display:none;}
#shop { width:4em;}
nav {font-weight:400;}
	nav ul {
		display: none;
		height: auto;
	}
	nav li {
		display: block;		
		width: 100%;
		background:none;
		border-bottom: 1px solid #7e8e9f;
	}
	nav li a {
    width: 50%;		
		text-align: left;
		padding:.5em 0 .5em 1em;
		margin:0;					
	}
	nav li.sec {display: block;}
	nav a#pull {
		display: block;		
		width: 50%;
		position: relative;
		color:#fff;
		border:0;
		padding:.5em 0 .5em 1em;		
	}
	nav a#pull:after {
		content:"";
		background: url('../images/nav-icon.png') no-repeat;
		width: 30px;
		height: 30px;
		display: inline-block;
		position: absolute;
		right: 15px;
		top: 10px;
	}
	
.imageLeft {float: none;	margin: 2% auto; max-width:96%;}
.imageRight {float:none; margin: 2% auto; max-width:96%;}
}


@media only screen and (max-width: 600px) {
img.slogan {display:none;}
#topnav {padding: 1.25em 0; text-align:center;}
nav li a { width: 80%; }
nav a#pull { width: 60%;}
.photoSlide  {height: 10px;	background: none;}	
#call-buttons img {margin-bottom: 2em;}

}
@media only screen and (max-width: 400px) {
#topnav {padding: 1.25em 0; text-align:left;}
#shop { top:2.75em; right:2em; width:3em;}
}