/* template.css overwrites -- use only when absolutely necessary
================================*/
body {font-family: "Open Sans", Helvetica, Arial, sans-serif!important;}
.banner-img {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	max-height: 2000px;
	background: url(../imgs/hero.png) no-repeat 0 0;
	background-size: 0%;
}


/* custom CSS on a per project basis
================================*/
.hero-img{position: absolute; top: 0; left: 0; right: 0;bottom: 0; max-height: 2000px; background: url(../imgs/hero.png) no-repeat 0 0; background-size: 0%;}

.section-inner{
	background-color:#000000; 
}
.banner-1 {
	position: relative;
	padding-top:110%;
}

.banner-img-1 {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	max-height:2000px;
	background: url(../imgs/hero.png) no-repeat 0 0;
	background-size: 100%;
}


a.brand {position: absolute; top:2%; left: auto; bottom: auto; left: 2%; display: block; z-index: 10; width:25%; height:25%;}

.btn-area1 { text-align: left; }

.video1 {position: absolute; top:37%; left:0; display: block; z-index: 10; margin: 0 auto; 
	width:100%;
	max-width: 320px;
	height:100%;
}
.
video-box {
	margin: 0!important;
}

.blank40 {
}

.blank150 {
    clear: both;
    display: block;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 150px;
    background: none;
}
.m1PrdGrid {
	/* background-color: #f1f1f1;	*/
}
.items-grid {
	padding-top: 4%;
	padding-bottom: 3%;
}

.items-grid:after {
	background-color: #000;
	height: 0px;
}

.page-btn {
	max-width: 23%;
}

.item-cell {
	background-color: #fff;
	border-radius:3% 3% 3% 3%;
}

.item-img > img {
    max-width: 300px!important;
}

.finalPrice {
    font-size: 1.5em;
}

.item-title {
	font-size: 1.1em!important;
}

.item-cell .btn-area {
	margin: 1.5em 10% 1em 10%!important;
}

.m3Text {
    position: relative;
    color: #000;
    z-index: 10;
    text-align: center;
    background-color: #fff;
    padding: 2%;
	text-transform: uppercase;
	line-height: 1.35;
}
.m3Text h2 {
	    font-size: 2.5em;
}

.m3Banner {
    position: relative;
    padding-top: 100%;
}

.m3Banner-img {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url(../imgs/module_02.png) no-repeat top;
    background-size: 100%;
}

.m5Text {
    position: relative;
    color: #000;
    z-index: 10;
    text-align: center;
    background-color: #fff;
    padding: 2%;
	line-height: 1.35;
}
.m5Text h2 {
	    font-size: 2.5em;
		text-transform: uppercase;
}

.m5Text p {
	font-size: 1.2em;
}

.m5Banner {
    position: relative;
    padding-top: 100%;
}

.m5Banner-img {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url(../imgs/module_6.png) no-repeat top;
    background-size: 100%;
}

.m6Text {
    position: relative;
    color: #000;
    z-index: 10;
    text-align: center;
    background-color: #fff;
    padding: 2%;
	line-height: 1.35;
}

.m6Text h2 {
	    font-size: 2.5em;
		text-transform: uppercase;
}

.m6Text p {
	font-size: 1.2em;
}

.m6Banner {
    position: relative;
    padding-top: 100%;
}

.m6Banner-img {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url(../imgs/module_04.png) no-repeat top;
    background-size: 100%;
}

/* html seo banner
================================*/
.html-banner-wrap {margin: 0 auto; font-size: 1.1em; /* max-width: 1000px; */ color:#fff;}
.html-banner {padding: 1em 5%;}
.html-banner h1 {font-size: 2.2em; line-height: 1.35; margin: 1em 0 0.25em 0; color:#fff;}
.html-banner h2 {font-size: 2em; line-height: 1.35; margin:0 00 0; color:#fff;}
.html-banner h3 {font-size: 1.75em; line-height: 1.35; margin: 0 0 0.25em 0; color:#fff;}
.html-banner h4 {font-size: 1.25em; line-height: 1.35; margin: 1em 0 0.25em 0; color:#fff;}
.html-banner h5{font-size: 0.8em; line-height: 1.35; margin: 0 0 0.25em 0; color:#fff;}
.html-banner h6 {font-weight: bold; font-size: 1.1em; line-height: 1.35; margin: 1.75em 0 0.25em 0; color:#fff;}
.html-banner p {font-size: 1em; line-height: 1.35; margin: 0 0; color:#fff;}
.html-banner ul, 
.html-banner ol,
.html-banner dl {font-size: 1.1em; line-height: 1.35;margin: 0.75em 0;}
.html-banner dt,
.html-banner dd,
.html-banner li {margin: 0.5em 0; list-style-type:disc;font-size: 1em; color:#fff;}

.html-banner .pull-right {float: none;}
.html-banner .pull-left {float: none;}

.html-banner .img-wrap {display: block;}
.html-banner .img-wrap img {width: 100%; height: auto;}
.html-banner .inline-img-33 {width: 75%; height: auto;}
.html-banner .inline-img-50 {width: 75%; height: auto;}
.html-banner .inline-img-66 {width: 75%; height: auto;}
.html-banner .inline-img-100 {width: 100%; height: auto;}
.html-banner .inline-img-33.pull-right, 
.html-banner .inline-img-50.pull-right, 
.html-banner .inline-img-66.pull-right {margin: 0 12.5%;}
.html-banner .inline-img-33.pull-left, 
.html-banner .inline-img-50.pull-left, 
.html-banner .inline-img-66.pull-left {margin: 0 12.5%;}
.img-wrap>.img-wrap {width: 100%; margin: 0 !important;}


.divider-wrap {display: block; clear: both; max-height:77px; }
.divider-img-100 {width: 100%; max-width: 1366px; }
.divider-img-100 img {width: 100%;  }

.html-banner .text-wrap {display: block;}
.html-banner .inline-text-25 {width: 100%; height: auto;}
.html-banner .inline-text-33 {width: 100%; height: auto;}
.html-banner .inline-text-50 {width: 100%; height: auto;}
.html-banner .inline-text-66 {width: 100%; height: auto;}
.html-banner .inline-text-100 {width: 100%; height: auto; clear: both;}
.html-banner .inline-text-25.pull-right, 
.html-banner .inline-text-33.pull-right, 
.html-banner .inline-text-50.pull-right, 
.html-banner .inline-text-66.pull-right {margin: 0;}
.html-banner .inline-text-25.pull-left, 
.html-banner .inline-text-33.pull-left, 
.html-banner .inline-text-50.pull-left, 
.html-banner .inline-text-66.pull-left {margin: 0;}

.html-banner .video-box-wrap {display: block;}
.html-banner .inline-video-33 {width: 100%; height: auto;}
.html-banner .inline-video-50 {width: 100%; height: auto;}
.html-banner .inline-video-66 {width: 100%; height: auto;}
.html-banner .inline-video-33.pull-right, 
.html-banner .inline-video-50.pull-right, 
.html-banner .inline-video-66.pull-right {margin: 0;}
.html-banner .inline-video-33.pull-left, 
.html-banner .inline-video-50.pull-left, 
.html-banner .inline-video-66.pull-left {margin: 0;}


sub{text-align:inherit;vertical-align:baseline;font-size:.825em;}
sup{vertical-align: baseline;font-size: 0.8em;position: relative;top: -0.4em;}
.special{list-style:none;line-height:16px;text-align:left;font-size:.85em;color:#ff0000; font-style:italic; font-weight:bold;}
.color2 li.finalPrice{color:#fff;}
.color2 li.originalPrice{color:#ccc;}
.color2 li.originalPriceLine{color:#ccc;}
.color3 li.finalPrice{ margin-top:15px;text-decoration:line-through; width:200px;background:url('http://promotions.newegg.com/images/free.gif') no-repeat; background-position:right bottom;}

/*.color3 li.finalPrice{ margin-top:0px;text-decoration:line-through; width:200px;background:url('../imgs/ico_free.gif') no-repeat; background-position:right bottom;}*/

.color3 li.originalPrice{ display:none;}


/* CHANGE TITLE COLOR */
/*.item-title a {color: #FFF;text-decoration: none;}*/


/* ---- Typography (pricing) ---- */
/*.originalPrice{font-size:1.0em;color:#999;}
.originalPriceLine{font-size:.75em;color:#999;}
.finalPrice{font-size:1.75em;font-weight:bold;color:#000;}
.soldOut{font-size:.75em;font-weight:bold;text-transform:uppercase;color:#d00;}
.soldout{font-size:.75em;font-weight:bold;text-transform:uppercase;color:#d00;}
.promo_text{font-size:.75em;color:#5f9000;}
.mapPricing{clear:both;float:left;margin:4px 0;padding:4px 8px;width:auto;height:auto;text-align:center;line-height:normal;background-color:#f7f7f7;border:1px solid #ddd;}
.freeShipping{font-size:.75em;color:#06F;}



.product_image{float:left;display:block;margin:0 0 4px 0;padding:0;width:180px;height:135px;}
.product_image_right{float:right;display:block;margin:0 0 4px 0;padding:0;width:180px;height:135px;}
a.ProductTitle, a.ProductTitle:link, a.ProductTitle:active, a.ProductTitle:visited{font-size:1.0em;font-weight:normal;color:#000;text-wrap:normal;}
a.ProductTitle:hover{font-size:1.0em;font-weight:normal;color:#244e6d;text-wrap:normal;}

.cntr_ProductTitle_3{clear:both;margin:5px 0;padding:0;height:6em;width:auto;line-height:1.4em;overflow:hidden;}
.cntr_ProductTitle_4{clear:both;margin:5px 0;padding:0;height:6em;width:auto;line-height:1.4em;overflow:hidden;}

.combo-items li { white-space: normal;}


*/

/* SHOP ALL BUTTON */
.shopAllbtn .page-btn {width: 30%}




/* IMAGE + TEXT CONTENT */
.contentwrap p{ padding:10px 0;}
.contentwrap .l-left{float:none; padding:0;}
.contentwrap .l-right{float:none; padding:0;}
.contentwrap .l-clear {width:100%; clear:both; }



/* ALL TEXT CONTENT */
.contentwrap{width:100%;padding:20px 0;font-size:.8em;position:relative;display:table;line-height:1.4;}
.contentwrap .alltext{width:90%;padding:0 5%;display:block;}
.contentwrap h2{text-transform:uppercase; font-size:1.9em; line-height:1; font-weight:bold; display:table; color:#000}
.contentwrap h3{font-size:1.4em;line-height:1;color:#000;font-weight:normal;margin:10px 0;}
.contentwrap ul{display:block;list-style:disc;padding:10px 0 10px 20px;}
.contentwrap ol{display:block;list-style:decimal;padding:10px 0 10px 20px; }

.contentwrap .l-grid {text-align:left; color:#000 }
.contentwrap .l-grid .features-box_l {display:inline-block; width:46%; margin:0; padding:2%; vertical-align:middle; float:left; }
.contentwrap .l-grid .features-box_r {display:inline-block; width:46%; margin:0; padding:2%; vertical-align:middle; float:right;  }


/* IMAGE */
.contentwrap .features-image {width:100%; margin:0 auto; display:block; max-width:500px; }
.contentwrap img{width:100%;max-width:500px;margin:0 auto;display:block;}
.contentwrap span{width:90%;padding:0 5%;display:block;}

/* TABLE */
.contentwrap table.specs { width:100%; margin:0 auto; font-size:1.1em}
.contentwrap table.specs td{padding:5px;}


/* blank classes for assigning content background and defining hot spot dimensions */
#content-section-ZZ.banner-XXX .banner-hot-spot-01 {top: auto; right: auto; bottom: auto; left: auto; width: auto; height: auto;}
#content-section-ZZ.banner-XXX .banner-hot-spot-02 {top: auto; right: auto; bottom: auto; left: auto; width: auto; height: auto;}
#content-section-ZZ .banner-img-XXX {background-image: url(../images/content-XXX-ZZ.jpg);}


/* custom CSS examples on a per project basis
================================*/

#content-section-ZZ.banner-XXX .banner-hot-spot-01 {top: 2%; right: auto; bottom: auto; left: 4%; width: 25%; height: 10%;}
#content-section-ZZ .banner-img-XXX {background-image: url(../images/imgs/content-650-01.jpg);}




/* ---- Custom Bullet List ---- */
ul.list_features_custom{margin:3px 0;padding:0;height:4em;width:auto;font-size:.75em;color:#777;list-style:none;overflow:hidden;}
ul.list_features_custom li{margin:0;padding:0 14px;text-wrap:normal;background:url(http://promotions.newegg.com/template/us/imgs/listStyle.gif) no-repeat;background-position:0 4px;}

/* ---- Spacer(s) ---- */
.blank5{clear:both;display:block;margin:0;padding:0;width:100%;height:5px;background:none;}
.blank10{clear:both;display:block;margin:0;padding:0;width:100%;height:10px;background:none;}
.blank20{clear:both;display:block;margin:0;padding:0;width:100%;height:20px;background:none;}
.blank30{clear:both;display:block;margin:0;padding:0;width:100%;height:30px;background:none;}
.blank40{clear:both;display:block;margin:0;padding:0;width:100%;height:40px;background:none;}
.blank50{clear:both;display:block;margin:0;padding:0;width:100%;height:50px;background:none;}
.blank60{clear:both;display:block;margin:0;padding:0;width:100%;height:60px;background:none;}
.blank70{clear:both;display:block;margin:0;padding:0;width:100%;height:70px;background:none;}
.blank80{clear:both;display:block;margin:0;padding:0;width:100%;height:80px;background:none;}
.blank90{clear:both;display:block;margin:0;padding:0;width:100%;height:90px;background:none;}
.blank100{clear:both;display:block;margin:0;padding:0;width:100%;height:180px;background:none;}
.line_spacer{clear:both;display:block;margin:0 auto;padding:0;width:100%;height:52px;background:url(http://promotions.newegg.com/template/us/imgs/line_spacer.png) no-repeat center;}


/* responsive CSS on a per project basis
================================*/

@media only screen and (max-width: 1024px) {
	/* insert responsive CSS for screens below 1024px */
	
	.video1 {position: absolute; top:37%; left:28%; display: block; z-index: 10; margin: 0 auto; 
	width:100%;
	max-width: 400px;
	height:100%;}


}

@media only screen and (min-width: 375px) {
	/* insert responsive CSS for screens above 375px */
	.video1 {position: absolute; top:37%; left:0%; display: block; z-index: 10; margin: 0 auto; 
	width:100%;
	max-width: 375px;
	height:100%;}

}

@media only screen and (min-width: 420px) {
/* insert responsive CSS for screens above 420px */	
.video1 {position: absolute; top:37%; left:0; display: block; z-index: 10; margin: 0 auto; 
	width:100%;
	max-width: 420px;
	height:100%;}

}

@media only screen and (min-width: 481px) {
	/* insert responsive CSS for screens above 481px */
	.video1 {position: absolute; top:37%; left:0%; display: block; z-index: 10; margin: 0 auto; 
	width:100%;
	max-width: 480px;
	height:100%;}

}
@media only screen and (min-width: 641px) {
	/* insert responsive CSS for screens above 641px */
.contentwrap{font-size:.9em;}	
.banner-img {
	background-position: 0 100%;
	background-size: 100%;
	}

	

.video1 {position: absolute; top:37%; left:10%; display: block; z-index: 10; margin: 0 auto; 
	width:100%;
	max-width: 640px;
	height:100%;}

	
	/* html seo banner
	================================*/
	
	.html-banner .pull-right {float: right;}
	.html-banner .pull-left {float: left;}

.html-banner .inline-img-25,
	.html-banner .inline-text-25,
	.html-banner .inline-video-25 {width: 22.5%; height: auto;}
	
	
	.html-banner .inline-img-33,
	.html-banner .inline-text-33,
	.html-banner .inline-video-33 {width: 30.5%; height: auto;}
	
	.html-banner .inline-img-50, 
	.html-banner .inline-text-50,
	.html-banner .inline-video-50 {width: 47.5%; height: auto;}
	
	.html-banner .inline-img-66, 
	.html-banner .inline-text-66, 
	.html-banner .inline-video-66 {width: 63.5%; height: auto;}
	
	.html-banner .inline-img-33.pull-right, 
	.html-banner .inline-img-50.pull-right{margin: 2% 0 0 0;} 
	.html-banner .inline-img-66.pull-right, 
	.html-banner .inline-text-25.pull-right, 
	.html-banner .inline-text-33.pull-right, 
	.html-banner .inline-text-50.pull-right {margin: 2% 0 0 2.5%;} 
	.html-banner .inline-text-66.pull-right, 
	.html-banner .inline-video-33.pull-right, 
	.html-banner .inline-video-50.pull-right, 
	.html-banner .inline-video-66.pull-right {margin: 0 0 0 2.5%;}
	
	.html-banner .inline-img-33.pull-left, 
	.html-banner .inline-img-50.pull-left, 
	.html-banner .inline-img-66.pull-left, 
	.html-banner .inline-text-25.pull-left, 
	.html-banner .inline-text-33.pull-left, 
	.html-banner .inline-text-50.pull-left {margin: 2% 2.5% 0 0 ;} 
	.html-banner .inline-text-66.pull-left
	.html-banner .inline-video-33.pull-left, 
	.html-banner .inline-video-50.pull-left, 
	.html-banner .inline-video-66.pull-left {margin: 0 2.5% 0 0 ;}
	
	.html-banner .img-wrap>.img-wrap {margin: 1% 1.25% !important;}
	

.html-banner h1 {font-size: 3em; line-height: 1.35; margin: 1em 0 0.25em 0; color:#fff;}
.html-banner h2 {font-size:2.5em; line-height: 1.35; margin:0 0 0 0; color:#fff;}
.html-banner h3 {font-size:2em; line-height: 1.35; margin: 0 0 0.25em 0; color:#fff;}
.html-banner h4 {font-size:1.35em; line-height: 1.35; margin: 1em 0 0.25em 0; color:#fff;}
.html-banner h5 {font-size:1em; line-height: 1.35; margin: 0 0 0.25em 0; color:#fff;}
.html-banner li {margin: 0.5em 0; list-style-type:disc;font-size: 1.2em; color:#fff; }
.html-banner h6 {font-weight: bold; font-size: 1.1em; line-height: 1.35; margin: 1.75em 0 0.25em 0; color:#fff;}
.html-banner p {font-size: 1.2em; line-height: 1.35; margin:  0; color:#fff;}		

	
}
@media only screen and (min-width: 769px) {
	/* insert responsive CSS for screens above 769px */
	
.contentwrap .l-left{float:left; padding:0 1% 0 0;}
.contentwrap .l-right{float:right; padding:0 0 0 1%;}		
.contentwrap img{width:42.5%;display:inline-block;}
.contentwrap span{width:42.5%;display:inline-block}
.f-l{float:left;padding:0 0 0 5%;}
.f-r{float:right;padding:0 5% 0 0;}
	
.video1 {position: absolute; top:37%; left:20%; display: block; z-index: 10; margin: 0 auto; 
	width:100%;
	max-width: 640px;
	height:100%;}

	
}

@media only screen and (max-width: 769px) {
	.m1PrdGrid {margin-top: 10%}
	.shopAllbtn .page-btn {width: 70%}
}

@media only screen and (max-width: 425px) {
	.m1PrdGrid {margin-top: 25%}
}

@media only screen and (min-width: 1025px) {
	/* insert responsive CSS for screens above 1025px */
	
	.video1 {position: absolute; top:37%; left:28%; display: block; z-index: 10; margin: 0 auto; 
	width:100%;
	max-width: 640px;
	height:75%;}

	.items-grid .item-cell {
	width: 25%;}
.contentwrap{font-size:1.25em;}	
	
}

/* Data Tables
================================== */
.Rtable {
  display: flex;
  flex-wrap: wrap;
  margin: 0 0 3em 0;
  padding: 0;
}
.Rtable-cell {
  box-sizing: border-box;
  flex-grow: 1;
  width: 100%;
  padding: 0.8em 1.2em;
  overflow: hidden;
  list-style: none;
  border: solid 1px #;
  background: #fff;
}
.Rtable-cell > h1,
.Rtable-cell > h2,
.Rtable-cell > h3,
.Rtable-cell > h4,
.Rtable-cell > h5,
.Rtable-cell > h6 {
  margin: 0;
}
/* Table column sizing
================================== */
.Rtable--2cols > .Rtable-cell {
  width: 50%;
}
.Rtable--3cols > .Rtable-cell {
  width: 33.33%;
}
.Rtable--4cols > .Rtable-cell {
  width: 25%;
}
.Rtable--5cols > .Rtable-cell {
  width: 20%;
}
.Rtable--6cols > .Rtable-cell {
  width: 16.6%;
}
/* Table Cell styles
================================== */
.Rtable-cell--head {
  background-color: #fff;/* Table head background color*/
  border: solid 1px #000000;
  color: #000;
}
.Rtable-cell--head > h1,
.Rtable-cell--head > h2,
.Rtable-cell--head > h3,
.Rtable-cell--head > h4,
.Rtable-cell--head > h5,
.Rtable-cell--head > h6 {
  color: #000;
}
.Rtable-cell--foot {
  background-color: #fff;
}
/* Table Responsive
==================================== */
@media all and (max-width: 500px) {
  .Rtable--collapse {
    display: block;
  }
  .Rtable--collapse > .Rtable-cell {
    width: 100% !important;
  }
  .Rtable--collapse > .Rtable-cell--foot {
    margin-bottom: 1em;
  }
}
.no-flexbox .Rtable {
  display: block;
}
.no-flexbox .Rtable > .Rtable-cell {
  width: 100%;
}
.no-flexbox .Rtable > .Rtable-cell--foot {
  margin-bottom: 1em;
}