/* ==========================================================================
   HTML5 Boilerplate styles - h5bp.com (generated via initializr.com)
   ========================================================================== */

html, button, input, select, textarea { color: #222; }
body { font-size: 1em; line-height: 1.4; }

::-moz-selection { background: #b3d4fc; text-shadow: none; }
::selection { background: #b3d4fc; text-shadow: none; }
.chromeframe { margin: 0.2em 0; background: #ccc; color: #000; padding: 0.2em 0;}
hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }
img { vertical-align: middle; }
a{ text-decoration: none; }
ol, ul{ margin: 0; padding: 0; }
body { -webkit-font-smoothing: antialiased; font-smooth: always; text-shadow: 1px 1px 1px rgba(0,0,0,0.004);}
.wrapper { width: 92%; margin: 0 4%; }
h1, h2, h3, h4, h5, h6{ font-weight: normal; }
em{ color: #bec5c8; font-weight: 300; }


/* ==========================================================================
   Main Theme Styles
   ========================================================================== */


.header-container {
    background: #ffffff; /* Adjust Background colour of header */
    color: #707b82;  /* Adjust colour of header text */
	text-shadow: 1px 1px 0 #ffffff;
	padding-top: 0px;
}
.header-container .wrapper { width: 100%; margin: 0%;  }
.header-container h2{ color: #202d33; font-weight: normal; font-size: 1.6em; line-height: 1.2; text-transform: uppercase;}
.header-container h5{ color: #bec5c8; font-size: .9em; margin-bottom: 10px; margin-top: 2.2em;	 }
 h3{ color: #46575e; font-size: 1em; line-height: 1.2; margin-top: 2.6em; text-transform: uppercase;}

/* ==========================================================================
   HEADER STYLES
   ========================================================================== */ 
#sequence { display: block; height: 100%; margin: 0; position: absolute; max-width: 1140px; width: 100%;
	/*backface-visibility prevents graphical glitches when frames are animating*/
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	-ms-backface-visibility: hidden;
	-o-backface-visibility: hidden;
	backface-visibility: hidden;
        top:21px;
}
#header.internal { height: 165px;  }

#sequence ul{ margin: 0; padding: 0; }
#sequence ul li{ height: 100%; position: absolute; top: -50%; width: 100%; z-index: 50; }
#sequence ul li.current-frame{ z-index: 55!important; }
#sequence ul li .slide, #sequence ul li .title, #sequence ul li .subtitle { position: absolute; }
#sequence ul li ol li{ display: inline-block; position: static; width: 35px; margin-right: 15px; position: relative; }
#sequence ul li ol li a{ opacity: .35;
	-webkit-transition: all 250ms ease-in-out;
	-moz-transition: all 250ms ease-in-out;
	-ms-transition: all 250ms ease-in-out;
	-o-transition: all 250ms ease-in-out;
	transition: all 250ms ease-in-out;
}
#sequence ul li ol li a:hover{ opacity: 1; }
#sequence ul li ol li img{ width: 35px; }

.slide{ bottom: -50%; opacity: 0; position: relative; height: auto !important; max-height: 900px !important; }
.title, .subtitle{ opacity: 0; z-index: 50; }



/*  SLIDER NAV DOTS */
#nav { display: none; text-align: center; position: relative; top: 570px; margin: 0; padding: 0;z-index: 1000;
	-webkit-transition-duration: .5s; -moz-transition-duration: .5s; -o-transition-duration: .5s; -ms-transition-duration: .5s; transition-duration: .5s;
}
#nav li { display: inline-block; }
#nav li span{ display: block; cursor: pointer; opacity: 0.5; background-color: #333; height: 12px; width: 12px; text-indent: -10000em; border-radius: 20px;
	-webkit-transition-duration: 1s; -moz-transition-duration: 1s; -o-transition-duration: 1s; -ms-transition-duration: 1s; transition-duration: 1s;
}
#nav li span.active { opacity: 1; background-color: #26a3ea; }
#nav li span:hover{ opacity: 1; }

/* ==========================================================================
   Media Queries
   ========================================================================== */
@media only screen and (min-width: 320px){
	.main-container section img{ width: 100%; float: none; padding: 30px 0 0; }
}
@media only screen and (min-width: 480px) { 
	.main-container section img{ width: 100%; float: left; max-width: 200px; padding: 40px 20px 40px 0; }	
}
@media only screen and (min-width: 680px) {
	.wrapper { width: 90%; margin: 0 5%; }
	.header-container .wrapper { width: 100%; margin: 0%;  }
}
@media only screen and (min-width: 760px) {
	.logo{ position: absolute; top: 60px; left: 5%; z-index: 1000; }
	ul.menu{ position: absolute; right: 5%; top: 70px; z-index: 1000; }
    .main-container section{ width: 25%; float: left; margin-right: 12%; clear: none; padding-top: 2.2em; }
    .main-container section.last{ margin-right: 0px; }
    .main-container section img{ width: 100%; float: none; max-width: 350px; padding: 0; }
    .main-container.internal aside{ float: right; width: 35%; }
    .main-container.internal section{ float: left; width: 50%; }
    .footer-container h1{ float: left; }
    .footer-container ul{ float: right; }
    .flexslider2 { margin: 30px 0 90px; padding-top: 80px; }
	
}
@media only screen and (min-width: 870px) { }
@media only screen and (min-width: 1140px) {
    .wrapper { width: 1040px; /* 1140px - 10% for margins */ margin: 0 auto; }
    .header-container .wrapper { width: 1140px; /* 1140px - 10% for margins */ margin: 0 auto; }
}

/* ==========================================================================
   Helper classes
   ========================================================================== */

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



/* ==========================================================================
   Print styles
   ========================================================================== */

@media print {
* { background: transparent !important; color: #000 !important; box-shadow:none !important; text-shadow: none !important;}
a, a:visited { text-decoration: underline; }
a[href]:after { content: " (" attr(href) ")";}
abbr[title]:after { content: " (" attr(title) ")"; }
.ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; }
img { max-width: 100% !important; page-break-inside: avoid; }

@page { margin: 0.5cm; }
p, h2, h3 { orphans: 3; widows: 3; }
h2, h3 { page-break-after: avoid; }
}
#slider-holder{
    overflow: hidden;
    width: 100%;
    position: absolute;
    background: #FFF;
    top: 86px;
    bottom: 43px;
}
div.slide-panel{
    position: absolute;
    width: 100%;
    height: 100%;
    left: 100%;
    top: 0px;
}
div.slide-panel.on-focus{
    height: auto;
    left: 0px;
    min-height: 100%;
}
#footer{
    position: fixed;
    bottom: 0px;
    left: 0px;
    right: 0px;
    z-index: 3;
    border-top: 1px solid #444;
}
#header{
    position: fixed;
    top: 0px;
    left: 0px;
    right: 0px;
    z-index: 3;
    border-bottom: 1px solid #CCC;
}
#slide-panel-1{
    background: #FFF;
}
select[name=module]{
    width: 100%;
    padding: 3px 5px;
    border: 1px solid #999;
    margin-bottom: 10px;
}
select[name=module], select[name=module] option{
    font-size: 11px;
}
#product-features{
    border: 0px;
}