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

body {	
	font-weight:300;
	color: #333;
	background: #fafbfc;
	-webkit-font-smoothing: antialiased; 
	-webkit-text-size-adjust: 100%;
	overflow-x: hidden;
	font-family: Tahoma,Verdana,Segoe,sans-serif;
}
body#home {background: #fafbfc url(../images/bg1a.jpg) repeat-x; }
/*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 {	color:#9b9a9a; 	font-size: 1.5em; font-family: "Open Sans", sans-serif;	margin: .4em 0;}

h2 {	color:#0975c2; 	font-size: 1.4em; font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif; font-weight:bold; margin-top: 2em;}	
h2.page-title {margin-top: 0;}
h2 span {color:#0c60b9;}
h3 { font-size: 1.25em; color: #0c60b9; font-weight: 400;	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;}


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

.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;
}
#logo {margin-top:.5em;	}
#call {text-align:right; padding:2.25em 2em 0 0; color: #05538a; font-size: 1.125em; font-family: "Open Sans",sans-serif; font-weight:bold;}
#call img {display:inline;}
#call h1 {color: #9b9a9a; font-size: 1em; margin:.5em 0 0 0; font-weight:700;}

/* hero */
#hero {width:100%; max-height: 400px; overflow:hidden; position:relative; z-index:1; margin-top:1em;}
.photoSlide  {width:100%; height: 400px;	background: url(../images/banner.jpg) center bottom no-repeat;}

nav {	
	width: 100%;
	text-align:right;	
	font-size: 1em;	
	font-family: "Open Sans",sans-serif;
	text-transform:uppercase;
	font-weight:400;
	position: relative;	
	z-index: 10;
	background:#035489;
}
nav ul {
	padding: 0;
	margin: 0 auto;
	list-style:none;
}
nav li {
	display: inline;	
	padding:0;
	margin:0; 
}
nav a {	
	display: inline-block;
	padding: .5em 3.5% .25em 3.5%;
	text-decoration: none;
		
}

nav a:link, nav a:visited {color:#fff;} 
nav a:hover, nav a:active {color:#e4e3e3;}
nav ul li.active a { color: #f371b0;}

nav a#pull {display: none;}

.content {padding: 2.5em 0;}
.content.home {padding: 0 0 5em;}
.feature {margin-top: 1.5em; text-align: center; text-transform: uppercase;}
.feature img { border: 1px solid #efd4bb; margin: 0 auto; max-width:97%;}
.feature img:hover {border: 1px solid #ccc; opacity:0.8;}
h2.featureTitle { font-size: 1.125em; font-family: "Open Sans",sans-serif; margin: 0; padding: .5em 10% 1em; }
h2.featureTitle a {color:#f58b28;}
h2.featureTitle a:hover {color:#f2a966;}


.sidenav hr {display: block; height: 2px; border: 0; border-top: 1px solid #dde2e8; margin: .25em 0; padding: 0; width: 80%; box-shadow: inset 0 2px 2px -2px rgba(255,255,255,1);}
.sidenav p {margin:0 0 .5em; text-transform:uppercase;}
.sidenav ul {list-style:none;}

.hotspot2 { border: 1px solid #efd4bb; background:#fff; margin-top: 1.5em; text-align: center; text-transform: uppercase;}
.hotspot2 img {  margin: 0 auto; max-width:97%; display:inline;}
.hotspot2 img:hover { opacity:0.8;}
.hotspot2 h2 { font-size: 1.125em; font-family: "Open Sans",sans-serif; line-height:1.75; font-weight: 700; margin: 0; padding: .5em 10% .5em; }
.hotspot2 h2 a:link, .hotspot2 h2 a:visited {color:#f58b28;padding-right: 1em; margin:0 .5em; text-decoration:none; }
.hotspot2 h2 a:hover {color:#f2a966;}

.hotspot3 {float:left; text-align:center; padding: 1em 0; margin: 1em .5em;  font-size: .875em; }
.hotspot3 img {background:#fff; padding: 1em 0; border: 1px solid #efd4bb;}
.hotspot3:hover, .hotspot3:active { }
#product-image { margin-bottom: 2em; text-align:center;}
#product-image img {border: 1px solid #efd4bb; display:inline;}
.small-text {font-size: .7em; color:#4d4c4c;}
#product-specs {}
#product-specs table { background:#fff; max-width: 300px;  font-size: .75em; margin:0 auto;}
#product-specs table th {background:#999; color:#fff; padding: 1em; }
#product-specs table td {background:#efd4bb; padding: .5em 1em;  text-align:center}
.content-text-specs { color:#4d4c4c; font-size: .75em; line-height: 1.6; padding: 1em 0; text-align:center;}
.content-text-specs2 { color:#4d4c4c; font-size: .85em; line-height: 1.6; padding: 1em 0; }

.gallery {text-align:center;}
.gallery img {display:inline;}

.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:#e3e3e3;  }
.footerMiddle {color:#3b3b3b; padding: 4em 0 2em 0;	margin: 0;	position: relative; font-size: .9em; line-height: 1.4;}
footer .large {font-size: 1.25em;}
footer ul {list-style-type: none; padding:0;}
footer li { background: url(../images/arrow.png) no-repeat left 50%; padding: 0 0 0 10px;}
footer a:link, footer a:visited {color:#043c64;}
footer a:hover, footer a:active {color: #032a46;}
footer p {text-transform:uppercase;}

#copyright {margin-top:3em; font-size: .8em; color:#636465;}
#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 a {padding:.5em 2% .25em 2%; }
  nav a span {display:none; } 
	
	.content {-webkit-overflow-scrolling : touch;}	
	header {-webkit-overflow-scrolling : touch;}
	h2.featureTitle, .hotspot2 h2  { font-size: 1em; padding: 0.75em 10% 0.5em;}
	.hotspot3 {width:45%;}
	.footerMiddle ul, .sidenav ul {padding:0;}
}


/* mobile devices */
@media only screen and (max-width: 767px) {
body, body#home {background-image:none;}
#call h1 {font-size:1em;}
.photoSlide  {	background: url(../images/banner2.jpg) center bottom no-repeat; height:280px;}

	nav {
		border-bottom: 0;
	}
	nav ul {
		display: none;
		height: auto;
	}
	nav li {
		display: block;		
		width: 96%;
		
	}
	nav a {
    width: 100%;
		border-bottom: 1px solid #576979;
		text-align: left;
		background:#045489;	
	}
	nav a#pull {
		display: block;
		background-color: #045489;
		width: 96%;
		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: 15px;
		top: 10px;
	}
	
.imageLeft {float: none;	margin: 2% auto; max-width:96%;}
.imageRight {float:none; margin: 2% auto; max-width:96%;}

footer li {background:none;}

}

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

#logo img{margin:0 auto;}
#call {text-align:center; padding:0 0 .5em 0;}
.sidenav li {display:inline; padding-right:.25em; border-right: 1px solid #045489;}
h2.page-title {margin-top: 1em;}
.hotspot3 {width:auto;}
footer p {font-weight:bold;}
.footerMiddle .columns {text-align:center;}
.footerMiddle .columns img {margin:0 auto;}

.call-to-action-button {float:none;}
#copyright {text-align:center;}

#sh .sidenav .se, #sh .sidenav .ta, #sh .sidenav .ot {display:none;}
#se .sidenav .sh, #se .sidenav .ta, #se .sidenav .ot {display:none;}
#ta .sidenav .sh, #ta .sidenav .se, #ta .sidenav .ot {display:none;}
#ot .sidenav .sh, #ot .sidenav .se, #ot .sidenav .ta {display:none;}
#gal .sidenav, #ab .sidenav, #co .sidenav {display:none;}

.content {padding: 1em 0;}

}