/* template.css overrides -- use only when absolutely necessary
================================*/
.banner {padding-top:41.667%;}
.banner-img {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
max-height: 300px;
background: url("../imgs/hero.jpg") no-repeat 0 0;
background-size:289.722222%;
}
.price{margin:0 0 0.825em 0;}
.price-save-dollar,.price-save-label,.price-save-percent{position:relative;background:#cc4e00;color:#fff;font-weight:700;font-size:13px;}
.price-save-percent:after{left: 100%;border-bottom:19px solid #cc4e00;border-right: 10px solid transparent;margin-bottom:0;}
.price-save-label{padding:0 0 1px 6px}
.price-save-dollar{padding:0 0 1px 2px}
.price-save-percent{padding:0 6px 1px 2px}
.price-save-label:before,.price-save-percent:after{content:'';position:absolute;bottom:0;width:0;height:0;}
.item-cell{border-bottom:none;}
.item-promo{margin-top:1em;}
.item-promo-code{border-color:#888;}
.item-promo-title span{color:#333;}
.item-promo-info{color:#cc4e00;}
.item-promo-code{padding:1.5em 5px 1em 5px;height:auto;color:#cc4e00;}
.item-promo-code-save{display:inline;}
.item-promo-code-savetxt{display:inline;color:#cc4e00;font-weight:bold;}
li.mir{display:none;}
.instantSavings, .mir{display:block;}
.finalPrice{font-size:1.6em;}
.instantSavings{font-size:0.925em}
/*.instantSavings{font-size:0.925em; color:#ccc;}*/
.shipping{visibility:hidden;}
.mir{font-size:1em;margin:0;color:#016B04}
.btn-mini{border-color:#E68626;font-family:'Open Sans Condensed','Arial Narrow','Helvetica Narrow',arial,helvetica,sans-serif;letter-spacing:1px}

/* No Orange Bar for Custom LPs with Black Background
.price-save-dollar,.price-save-label,.price-save-percent{position:relative;background:none;color:#fff;font-weight:700;font-size:13px;}
.price-save-percent:after{left: 100%;border-bottom:none;border-right: 10px solid transparent;margin-bottom:0;}
================================*/

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


/*.mont {font-family: 'Montserrat', sans-serif;}*/


/* 按钮要长的跟US一样
================================*/
.btn-primary,
.button.button-primary {
	border-color: #c60;
	background: #ffa33a;
}
.btn-primary:hover, 
.btn-primary:active,
.button.button-primary:hover,
.button.button-primary:active {
	background: #F39834;
	color: #222;
}
.btn {
	display: inline-block;
	position: relative;
	margin: 0;
	padding: 0.45em 1em;
	outline: none;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	border-radius: 0.2em;
	color: #222222;
	font: bold 1.2em/1 'Open Sans Condensed','Arial Narrow','Helvetica Narrow', arial, helvetica, sans-serif;
	font-stretch: condensed;
	text-align: center;
	text-decoration: none;
	vertical-align: middle;
	cursor: pointer;
}
.btn-mini {
	padding: 0.5em 0.8em;
	outline: none;
	font-size: 0.875em;
}
.page-btn {
	width: 80%;
	max-width: 400px;
	font-size: 1.3em;
	letter-spacing:1px;
}

.social-contain {
    margin: 0 auto;
    display: block;
    text-align: center;
    padding
}

.social-contain h3{
  margin-bottom: 30px;
}

.social-contain p{
  margin-bottom:  30px;
}

.socials {
    margin-right: 2px;
}

.rules{
  color:#FF9500;
}

.prize-info{
  width:100%;

}



.prize-info{
  width:100%;
  float: left;
  height: 100%;
}

.prize-info{
  width:100%;
  float: left;
}
.prizes{
	width:100%;
    position: relative;
}

.prize-tip{
	position: absolute;
	height: 12%;
	padding-top: 6px;
}

#Desktop1{
	    top: 2%;
    width:33%;
    left: 3%;

}



#Monitor{
	    top: 2%;
    width: 40%;
    left: 48%;
}

#Headset{
	    top: 70%;
    width: 30%;
    left: 30%;
}

#Stand{
	top: 80%;
    width: 30%;
    right: 1%;
}

.social-contain h1{
font-size:1.9em; line-height:1.3; font-weight:bold;  color:#fff; text-align:center; padding-bottom:20px;
}

.banner-hot-spot-01 {position: absolute; top: 25%; right: auto; bottom: auto; left: 4%; width: 27%; height: 22%; display: block; z-index: 10;}
.f-l{float:none;padding:0 5%; width:90%;}
.f-l2{float:none;padding:0 5%; width:90%;}


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(../imgs/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;}*/






/* IMAGE + TEXT CONTENT */
.contentwrap p{ padding:10px 0; color:#fff; font-size:1.2em;}
.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;position:relative;line-height:1.4;}
.contentwrap .alltext{width:90%;padding:0 5%;display:block;}
.contentwrap ul{display:block;list-style:disc;padding:10px 0 10px 20px;}
.contentwrap h1{ font-size:2.2em; line-height:1.3; font-weight:bold;  color:#fff; text-align:center;}
.contentwrap h2{ font-size:1.4em; line-height:1.3; color:#fff; text-align:center;font-weight:400;}
.contentwrap h3{font-size:1.4em;line-height:1;color:#000;font-weight:400;margin:10px 0;}


.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/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(../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:100px;background:none;}
.line_spacer{clear:both;display:block;margin:0 auto;padding:0;width:100%;height:52px;background:url(../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 */
}

@media only screen and (min-width: 375px) {
	/* insert responsive CSS for screens above 375px */
}
@media only screen and (min-width: 481px) {
	/* insert responsive CSS for screens above 481px */
}
@media only screen and (min-width: 641px) {
	/* insert responsive CSS for screens above 641px */
	.banner { padding-top: 21.96%; }
	.banner-img {
		background-position:100% 0;
		background-size: 152.7086383601757%;
	}	
	
.socials {
    margin-right: 7px;
}
.banner-hot-spot-01 {top: 23%; right: auto; bottom: auto; left: 14%; width: 14%; height: 20%;}
.f-l{float:left;padding:0 3%; width:27%;}
.f-l2{float:left;padding:0 2%; width:20%;}

}
@media only screen and (min-width: 769px) {
	/* insert responsive CSS for screens above 769px */
	.items-grid .item-cell { width: 22%; }
	
.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 3%; width:27%;}
.f-l2{float:left;padding:0 2%; width:20%;}
.f-r{float:right;padding:0 5% 0 0;}

}
@media only screen and (min-width: 1025px) {
	/* insert responsive CSS for screens above 1025px */

	
}