/*css*/

@import "../css/reset.css";

@import "../css/skeleton.css";

@import url(//fonts.googleapis.com/css?family=Open+Sans:400,300,600,700,800);





html, body {

	background: #ffffff url(../images/bg-2.gif) 0 10px repeat-x; 

	font-family: 'Open Sans', sans-serif;

	color: #8f8e8e;

	font-size: 16px;

	line-height: 22px;

}



a[href^="tel:"] {color: inherit; text-decoration:none;}

a {	color: #036; outline:none; text-decoration: none;}

a:hover {text-decoration: none;	}

ul li a {line-height: 30px;}



.bg-1 {

	width: 100%;

	border-top: 9px solid #002e62;

	border-bottom: 1px solid #ffffff;

}



.border-1 {

	border: 7px solid #ffffff;

	-webkit-box-shadow: 0 0 17px 3px #f7f7f7;

	-moz-box-shadow: 0 0 17px 3px #f7f7f7;

	box-shadow: 0 0 17px 3px #f7f7f7;

}

.border-2 {	border-bottom: 1px solid #e5e5e5;} 



.btn {

	display: inline-block;

	background: #002e62;

	line-height: 22px;

	font-size: 16px;

	color: #ffffff;

	padding: 13px 20px;

	margin-top: 18px;

}

.btn:hover {background: #333; text-decoration: none;}

.btn-2 {	text-align: center; padding-top: 25px;}

.btn-2 a {	font-size: 16px; line-height: 22px; text-decoration: underline;}

.btn-2 a:hover {
	text-decoration: none;
	color: #036;
}



/*  Header styles */

h1, h2, h2 a, h3, h4, h5, h6 {	font-family: 'Open Sans', sans-serif;	color: #000000;	font-weight: 400;}

h2 { text-align: center; font-weight: lighter; font-size: 30px; line-height:22px; padding:51px 0 15px; margin-bottom: 27px; border-bottom:1px solid #e5e5e5;}

h2 a {font-weight: lighter; }

h2 a:hover { text-decoration: underline;}

h3 { font-size:16px; margin-bottom:10px; line-height: 22px;	color: #036;}

h3 a:hover {text-decoration: underline;}

.left {text-align: left;}

h2.left {
	padding-top: 43px;
	line-height: 20px;
	vertical-align: baseline;
}

.link-1 {padding: 28px 0 15px; border-bottom: none; margin-bottom: 0px;}

p {padding-bottom: 22px;}



.p1 {padding: 5px 19px 0 0;}

.text-1 {

	color: #000000;

	text-transform: uppercase;

	font-size: 35px;

	line-height: 32px;

}

	.text-1 span {

		font-size: 20px;

		line-height: 22px;

		color: #036;

		display: block;

	}



* {	-webkit-text-size-adjust: none;}

.clearfix {  *zoom: 1;}

.clearfix:before,

.clearfix:after {

  display: table;

  content: "";

  line-height: 0;

}

.clearfix:after {  clear: both;}

.fleft {float:left;}

.fright {float:right;}



.wrapper {width:100%; overflow:hidden;}

.img-wrapper {width: 100%;}

.extra-wrap {overflow:hidden;}



.it {font-style:italic;}





.numbered_list li > div:first-child {

	float: left;

	width: 50px;

	height: 50px;

	background: #036;

	text-align: center;

	color: #ffffff;

	font-size: 29px;

	line-height: 1em;

	font-weight: lighter;

	-webkit-box-sizing: border-box;

	-moz-box-sizing: border-box;

	-ms-box-sizing: border-box;

	-o-box-sizing: border-box;

	box-sizing: border-box;

	padding-top: 9px;

	margin: 5px 16px 0 0;

}



.numbered_list li > div:first-child + div  {overflow: hidden;}

	.numbered_list li a {line-height: 22px;	}

	h2 + .list {margin-top: 30px; margin-bottom: 5px;}

.list  li {

	padding-left: 15px;

	background: url(../images/marker-1.png) 0 5px no-repeat;

	line-height: 30px;

}

	.list  li a {

		font-size: 14px;

		line-height: 14px;

		color: #8f8e8e;

	}

		.list  li a:hover {	text-decoration: underline;	}

/************Header************/

h1 {

	text-align: center;

	padding-top: 29px;

}

h1 span {

	font-size: 41px;

	color: #036;

	line-height: 49px;

	text-align: center;

	font-weight: normal;

	font-family: 'Open Sans', sans-serif;

	text-transform: uppercase;

	font-weight: lighter;

}

	h1 span:first-child {
	font-size:60px;
	color: #036;
	text-transform: capitalize;
	padding-bottom: 20px;
	font-weight: bold;

	}



/*slider*/

.slider {

	position: relative;

	margin-top: 42px;

}

	.camera_wrap {

		margin-bottom: 0 !important;

		max-width: 470px;

		height: 456px;

	}

.camera_pag {

	position: absolute;

	bottom:0px;

	left: 50%;

	margin-left: -43px;

	height: 55px;

}

.slider .camera_wrap .camera_pag .camera_pag_ul li > span {

	background: url(../images/slider_pag.png) right top no-repeat;

	height: 15px;

	width: 15px;

}

.slider .camera_pag li:hover > span,

.slider .camera_wrap .camera_pag .camera_pag_ul li.cameracurrent > span {

	background: url(../images/slider_pag.png) left top no-repeat !important;

	height: 15px;

	width: 15px;

}



.block-1 {
	margin: 42px 0px 0;
	font-size: 24px;
}

	.block-1 .grid_6 {
	position: relative;
	display: block;
	margin-bottom: 10px;
	-webkit-box-shadow: 0px 0px 10px 1px #f7f7f7;
	-moz-box-shadow: 0px 0px 10px 1px #f7f7f7;
	box-shadow: 0px 0px 10px 1px #f7f7f7;
	font-size: 24px;
	color: #036;

	}

	.block-1 .grid_6 .text-1 {
	position: absolute;
	bottom: 7%;
	left: 20px;
	font-size: 18px;
	color: #000;

	}

	.block-1 .grid_6:hover .text-1 {
	color: #000;
	font-size: 80%;
}

	.block-1 .grid_6:hover .text-1 span {
	color: #333;
}









/************Content***********/



.row-1 {

	text-align: center;

	padding-bottom: 16px;

}

	.row-1  h3 {
	padding: 0 4px;
	color: #036;
	font-weight: bold;
}

	.row-1  p  {
	padding-top: 0;
	padding-right: 27px;
	padding-bottom: 20px;
	padding-left: 27px;
}

	.gallery {
	padding-top: 3px;
	padding-bottom: 5px;

	}

	.gallery > div {margin-bottom: 10px;}



.row-2 {
	padding-top: 25px;
}

	.row-2 > div {padding-top: 20px;text-align: center;	}

	.row-2 p { padding: 0 25px;}



.row-3 > .grid_4 {margin-top: 4px;margin-bottom: 10px;}

	.row-3 h3 {	margin-top: 15px;}



/*p-style*/

.block-2 {margin-top: 29px;}

	.block-2:first-child {margin-top: 38px;}

	.info a {color: #8f8e8e;}

		.info a:hover {	text-decoration: underline;	}

/*p-collection*/

.block-3 {margin-top: 5px;}

	.block-3 h3 {margin-top: 15px;}



/*p-privacy*/

.mail {	text-decoration: underline;}

.mail:hover {	text-decoration: none;}

.p-privacy .grid_16 {	float: left;}

.p-privacy .grid_8 {	float: right;}

/************Footer************/

footer .row {

	margin-top: 67px;

	padding: 36px 0 42px;

	border-top: 1px solid #e5e5e5;

	text-align: center;

}



footer a {color: #8f8e8e;}

	footer a:hover {text-decoration: underline;	}

	.wrapper-center {display: inline;}



footer ul {margin-bottom: 6px;}

	footer ul li {	display: inline;}

	footer ul li a {

		padding: 0 8px;

		font-size: 16px;

		line-height: 22px;

		color: #9e9d9d;

	}

	footer ul li a:hover,

	footer ul li.current a {color: #111111;text-decoration: none;}







/*toTop*/

#toTop {

	display:none;

	text-decoration:none;

	position:fixed;

	cursor:pointer;

	overflow:hidden;

	width: 17px;

	height: 17px;

	border:none;

	text-indent:-999px;

	z-index:20;

	background: url(../images/ui.totop.png) no-repeat left 0px;

	margin-right: -670px !important;

	right: 50%;

	bottom: 20px;

}

	#toTop:hover {

		overflow:hidden;

		float:left;

		background: url(../images/ui.totop.png) no-repeat right 0px;

	}

	#toTop:active, #toTop:focus {outline:none;}



/*==================================RESPONSIVE LAYOUTS===============================================*/





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

	.camera_wrap {width: 360px;}



	.row-2 .grid_8 h2 {font-size: 25px;}

	.row-2 .grid_8 h2 span {font-size: 25px;}



	.block-1 .grid_6 .text-1 {	font-size: 75%;}

	.block-1 .grid_6 .text-1 span {	font-size: 120%;}

}

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

	.camera_wrap {width: 406px;}

	.gallery > .grid_4 {width:120px; margin: 10px;}

	

	.row-2 .grid_8 {width: 140px;}

	.row-3 > .grid_4 {width: 190px;margin: 4px 10px 10px;}



	.block-1 .grid_6 {width: 190px; margin: 10px;}

	.block-2 .extra-wrap {overflow: visible;}



	.p1 {padding-bottom: 15px; padding-left: 0; padding-right:0px; margin-left: 0; margin-right: 0; width: 100%;}

}

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

	.camera_wrap {width: 286px;}

	

	.row-2 .grid_8 {width: 100%;}

	.row-3 > .grid_4 {width: 100%; margin: 4px 0px 10px;}

	h2 {font-size: 29px;}



	.block-1 .grid_6 {width: 100%;margin: 10px 0;}



	footer .wrapper-center {

		display: none;

	}

	.ribbon-wrapper-green {display:none;}

}

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

	h2 {font-size: 27px;}
	.ribbon-wrapper-green {display:none;}
	
}

/* sub-nav */

.sub-nav {width:100%; text-align:center; padding-top:25px;}
.atoz {padding-top:0px; padding-bottom:20px;}

.sub-nav ul li {display:inline-block; border-right:1px solid #002e62; padding:1px 10px 1px 10px; margin:0;}
.atoz ul li {border:none; padding:1px 5px 1px 5px;}
.atoz .no-link {line-height:30px; color:#c5c5c5;}

.sub-nav ul li a {text-decoration:underline;}

.last-li {border-right:none !important;}

.return-arrow {width:15px; height:15px; margin-top:7px; margin-left:auto; margin-right:auto;}

h2.with-nav {padding-top:35px !important;}

/* terms clean up */

.termsaz {padding-left:50px; margin-top:-20px;}
.termsaz li {list-style-type:disc;}

/* flute table */

.list-spread li {padding-bottom:10px;}

.flute-table {width:100%;}
.flute-table th {background-color:#002e62; height:30px; vertical-align:middle; text-align:left; padding-left:10px; padding-right:10px;}
.flute-table-top th {text-align:center; padding-left:3px; padding-right:3px;}
.flute-table th strong {color:white;}

.flute-col1 {width:40%;}

.flute-table td {height:31px; vertical-align:middle; text-align:center; border-left:solid 1px #003b7d; background-color:#eeeeee;}

.flute-table .alt th {background-color:#003b7d;}
.flute-table .alt td {background-color:#ffffff;}


.check {width:25px;}

/* term desc calc */

.term-desc-calc {padding-bottom:10px;}
.term-desc {background-color:#003b7d;}

.term {font-weight:bold; font-size:120%; background-color:#002e62; height:100%;}
.term p {color:white; padding:8px 3px 8px 8px;}

.desc {}
.desc p {color:#eeeeee; padding:7px 3px 8px 8px; font-size:100%; line-height:100%;}

.calc {font-weight:bold; background-color:#c3d0dd; text-align:center; padding-top:10px; border:1px solid #002e62; position:relative;}
.calc p {padding-bottom:5px;}



/* speeds feeds table */

.speed-table {width:100%;}
.speed-table th {background-color:#002e62; height:30px; vertical-align:middle; text-align:left; padding-left:10px; padding-right:10px;}

.speed-table-over-top th {text-align:center; padding-left:3px; padding-right:3px; border-bottom:solid 1px white;}
.speed-table-top th {text-align:center; padding-left:3px; padding-right:3px;}
.speed-table th strong {color:white;}

.speed-col1 {width:40%;}

.speed-table td {height:31px; vertical-align:middle; text-align:center; border-left:solid 1px #003b7d; background-color:#eeeeee;}

.speed-table .alt th {background-color:#003b7d;}
.speed-table .alt td {background-color:#ffffff;}


/* products */
.main-image {width:100%;}

h3 {font-weight:bold; padding-top:20px;}

/* made in usa banner */
 
.ribbon-wrapper-green {
  width: 155px;
  height: 200px;
  overflow: hidden;
  position: absolute;
  top: -3px;
  right: -3px;
}

.ribbon-green {
  font: bold 15px Sans-Serif;
  color: green;
  text-align: center;
  text-shadow: rgba(50,50,50,50.5) 0px 1px 0px;
  -webkit-transform: rotate(45deg);
  -moz-transform:    rotate(45deg);
  -ms-transform:     rotate(45deg);
  -o-transform:      rotate(45deg);
  position: relative;
  padding: 7px 0;
  left: 0px;
  top: 40px;
  width: 200px;
  background-color: #b50c1e;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#b50c1e), to(#e0162b)); 
  background-image: -webkit-linear-gradient(top, #b50c1e, #e0162b); 
  background-image:    -moz-linear-gradient(top, #b50c1e, #e0162b); 
  background-image:     -ms-linear-gradient(top, #b50c1e, #e0162b); 
  background-image:      -o-linear-gradient(top, #b50c1e, #e0162b); 
  color: white;
  -webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
  -moz-box-shadow:    0px 0px 3px rgba(0,0,0,0.3);
  box-shadow:         0px 0px 3px rgba(0,0,0,0.3);
}

.ribbon-green:before, .ribbon-green:after {
  content: "";
  border-top:   3px solid #6e8900;   
  border-left:  3px solid transparent;
  border-right: 3px solid transparent;
  position:absolute;
  bottom: -3px;
}

.ribbon-green:before {
  left: 0;
}
.ribbon-green:after {
  right: 0;
}

.product-blocks img {width:100%;}

.product-blocks h3 {padding-top:0; margin-top:-40px; margin-bottom:30px; color:white; text-align:center; font-size:150%;}

.product-blocks p {padding-left:10px;}

.page-products .menu-products > a {
background: url(../images/bg-3-blue.png) center center no-repeat; color:white;
}
.page-tech .menu-tech > a {
background: url(../images/bg-3-blue.png) center center no-repeat; color:white;
}
.page-contact .menu-contact > a {
background: url(../images/bg-3-blue.png) center center no-repeat; color:white;
}
.page-about .menu-about > a {
background: url(../images/bg-3-blue.png) center center no-repeat; color:white;
}
.page-home .menu-home > a {
background: url(../images/bg-3-blue.png) center center no-repeat; color:white;
}

.links a {text-decoration:underline;}

.strike {text-decoration:line-through;}

del {color:red;}
.black {color:black;}

thead th {color:white; font-weight:bold;}
tbody tr td {color:black;}
tbody tr:nth-child(odd) td {background-color:#fff;}
tbody tr:nth-child(even) td {background-color:#eee;}

.mobile-hide {display:none;}

@media only screen and (max-width: 800px) {
	
	#flip-scroll .cf:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }
	#flip-scroll * html .cf { zoom: 1; }
	#flip-scroll *:first-child+html .cf { zoom: 1; }
	
	#flip-scroll table { width: 100%; border-collapse: collapse; border-spacing: 0; }
 
	#flip-scroll th,
	#flip-scroll td { margin: 0; vertical-align: top; }
	#flip-scroll th { text-align: left; }
	
	#flip-scroll table { display: block; position: relative; width: 100%; }
	#flip-scroll thead { display: block; float: left; }
	#flip-scroll tbody { display: block; width: auto; position: relative; overflow-x: auto; white-space: nowrap; }
	#flip-scroll thead tr { display: block; }
	#flip-scroll th { display: block; text-align: right; }
	#flip-scroll tbody tr { display: inline-block; vertical-align: top; }
	#flip-scroll td { display: block; min-height: 1.25em; text-align: left; }
 
 
	/* sort out borders */
 
	#flip-scroll th { border-bottom: 0; border-left: 0; min-height:50px; text-align:center; border-bottom:1px solid white;}
	#flip-scroll td { border-left: 0; border-right: 0; border-bottom: 0; min-height:50px; text-align:center; border-bottom:1px solid black;}
	#flip-scroll tbody tr { border-left: 1px solid #babcbf; }
	#flip-scroll th:last-child,
	#flip-scroll td:last-child { border-bottom: 1px solid #babcbf; }
	.mobile-hide {display:block;}
}

#flip-scroll table td {font-size:75% !important;}
#flip-scroll table th {font-size:75% !important;}

.show-type {text-align:right; font-size:130%;}