/* template.css overwrites -- use only when absolutely necessary
================================*/
.banner-img {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	max-height: 450px;
	background: url(../images/hero.jpg) no-repeat 0 0;
	background-size: 189.72%;
}

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

.hero {
	width: 100%;
	margin: 0;
	max-height: 575px;
	background: url(../images/hero.jpg) no-repeat;
	background-size: contain;
	padding-top: 42.0937%;
}

.overlay {
	display: block;
	position: absolute;
	top: 0;
	width: 100%;
}

h2 {
	font-family: 'Open Sans', sans-serif;
	font-weight: 300;
	color: #FFF;
}

h1 {
	font-family: 'Open Sans', sans-serif;
	font-weight: 700;margin-bottom: 3%; color: #f8971d; font-size: 1.7em;
}

h4 {
	font-family: 'Open Sans', sans-serif;
	font-weight: 300;
	color: #000000;
}

h3 {
	font-family: 'Open Sans', sans-serif;
	font-weight: 700;
	color: #000000;
}

h5 {
	font-family: 'Open Sans', sans-serif;
	font-weight: 500;
	color: #FFF;
}

h9 {
	font-family: 'Open Sans', sans-serif;
	font-weight: 500;
	color: #000;
}
.feature {
	margin: 0;
	background-color: #fff;
}

.benefits {
	margin: 0;
	background-color: #fff;
	color: #000;
}

.offers {
	width: 100%;
	margin: 0;
	background: url(../images/content_bg.jpg) no-repeat;
	background-size: cover;
	padding-top: 64.0556%;
}

header.title {
	background-color: #002d6a;
	padding: 5%;
	color: #FFF;
	text-align: left;
	box-sizing: border-box;
}

.col-promos {
	display: inline-block;
	background-color: rgba(255, 255, 255, 0.7);
	box-shadow:  0 0 24px #BBB;
	box-sizing: border-box;
}

.details {
	width: 100%;
	height: 100%;
	padding: 7%;
	box-sizing:  border-box;
}

.rates {text-transform: uppercase;}
.rates1 {text-transform: uppercase;}

.btn-area-all {
	margin: 3% auto;
	text-align: center;
}

a.seeall:hover, a.seeall:active {color: #06F;}
*[role=button] {text-align: left; font-weight: 700;}
*[role=button]:hover {color: #06F;}
*[role=button]:active {color: #06F;}


.panel-heading .accordion-toggle:after {
    font-family: 'FontAwesome';
    content: "\f0d7";
}

.panel-heading .accordion-toggle.collapsed:after {    
    content: "\f0d8";
}

.column-left{ float: left; width: 100%; height: 130px; padding: 15px; margin-right: 10px; margin-bottom:10px; text-align:center; font-size: 21px; background-color: #f4f4f4; background: url(../images/button_bg.jpg) no-repeat;}
.column-right{ float: left; width: 100%; height: 130px; padding: 15px; margin: 10px; text-align:center; font-size: 21px; background-color: #f4f4f4; background: url(../images/button_bg.jpg) no-repeat;}
.column-center{ float:left; width: 100%; height: 130px; padding: 15px; margin: 10px; text-align:center; font-size: 21px; background-color: #f4f4f4; background: url(../images/button_bg.jpg) no-repeat;}



/* FAQ Section */

p.quest {color: #333; font-weight: 700; line-height: 3em;}
p.ans {color: #333; line-height: 1.5em;}
p.ans a {text-decoration: underline;}
.faq a {text-decoration: underline;}
.faq {margin-left: 5%; margin-right: 5%;}
.faq li {line-height: 1.85em;}
p.disclaimer {text-align: justify; margin: 1.5% 0 3.5% 0;}
sup {font-size: .6em; padding-left: 3px;}


/* Spacers */

.blank50 {display: block; width: 100%; min-height: 50px; clear: both;}
.blank25 {display: block; width: 100%; min-height: 25px; clear: both;}

	


@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 */
	
	h2 {font-size: 2em; padding-left: 7%; padding-top: 7%; line-height: 1.25em;}
	sup.main {padding-left: 7%; font-size: 1.1em; line-height: 4em;}
	img.card {display: block; max-width: 90%; margin: 0 auto;}
	h4 {text-align: center; font-size: 1.5em; line-height: 1.5em;}
	h3 {text-align: center; font-size: 2em;}
	.feature {height: 100%;vertical-align: top; padding: 5% 5% 1% 5%; box-sizing: border-box;}
	.btn-area {margin: 5%;}
	
	.offers {width: 100%; margin: 0; background: url(../images/content_bg.jpg) no-repeat; background-size: cover; padding: 2.5%; min-height: 775px;}
	.benefits {padding: 5%; box-sizing: border-box;}
	.col p {font-weight: 700; line-height: 2em; text-align: center;}
	.col ul li {font-weight: 300; line-height: 2em; text-align: center;}
	
	
	.col-promos {display: block; width: 95%; margin: 2.5% 2.5% 5% 2.5%;}
	header.title {font-weight: 700; font-size: 1.25em;}
	p.hdr {font-weight: 700; margin-bottom: 3%; color: #f8971d; font-size: 1.1em;}
	p.info {line-height: 1.5em; margin-bottom: 5%; color: #2d2D2C;}
	
	.rates {display: block; border: 1px #f8971D solid; border-radius: 6px; padding: 2%; color: #f8971D; font-weight: 700; font-size: 1.1em; margin-bottom: 3%;}
	.rates1 {display: block; border: 1px #f8971D solid; border-radius: 6px; padding: 2%; color: #f8971D; font-weight: 700; font-size: 1.1em; margin-bottom: 3%;}
	.terms {display: block; color: #2d2d2c; margin-bottom: 3%;}
	.seeall {font-weight: 700; text-decoration: underline; margin-bottom: 5%; display: inline-block;}
	.extra {margin: 10% 0 0 0; display: inline-block; line-height: .5em;}
	
	#accordion {width: 90%; margin: 0 auto;}
	p.disclaimer {width: 90%; margin: 5% auto;}
	
	.column-left{ float: left; width: 100%; height: 130px; padding: 15px; margin-right: 10px; margin-bottom:10px; text-align:center; font-size: 21px; background-color: #f4f4f4; background: url(../images/button_bg_long.jpg) no-repeat;}
.column-right{ float: left; width: 100%; height: 130px; padding: 15px; margin: 10px; text-align:center; font-size: 21px; background-color: #f4f4f4; background: url(../images/button_bg_long.jpg) no-repeat;}
.column-center{ float:left; width: 100%; height: 130px; padding: 15px; margin: 10px; text-align:center; font-size: 21px; background-color: #f4f4f4; background: url(../images/button_bg_long.jpg) no-repeat;}
	
}
@media only screen and (min-width: 481px) {
	/* insert responsive CSS for screens above 481px */
	
	sup.main {padding-left: 7%; font-size: 1.1em; line-height: 4em;}
	
	.offers {width: 100%; margin: 0; background: url(../images/content_bg.jpg) no-repeat; background-size: cover; padding: 2.5%; min-height: 775px;}
	
	.col p {font-weight: 700; line-height: 2em; text-align: center; font-size: 1.2em;}
	.col ul li {font-weight: 300; line-height: 2em; text-align: center; font-size: 1.2em;}
	
	.rates {display: block; border: 1px #f8971D solid; border-radius: 6px; padding: 2%; color: #f8971D; font-weight: 700; font-size: 1.25em; margin-bottom: 3%;}
	.rates1 {display: block; border: 1px #f8971D solid; border-radius: 6px; padding: 2%; color: #f8971D; font-weight: 700; font-size: 1.25em; margin-bottom: 3%;}
	
	.extra {margin: 10% 0 0 0; display: inline-block;}
	
}
@media only screen and (min-width: 641px) {
	/* insert responsive CSS for screens above 641px */
	.banner-img {
		background-position: 0 100%;
		background-size: 100%;
	}
	
	h2 {font-size: 2.25em; padding-left: 7%; padding-top: 7%; line-height: 1.25em;}

	sup.main {padding-left: 7%; font-size: 1.1em; line-height: 4em;}
	img.card {display: block; max-width: 80%; margin: 0 auto;}
	h4 {text-align: center; font-size: 2.25em; line-height: 1.5em;}
	h3 {text-align: center; font-size: 3em;}
	
	.offers {width: 100%; margin: 0; background: url(../images/content_bg.jpg) no-repeat; background-size: cover; padding: 2.5%; min-height: 775px;}
	.col p {font-weight: 700; line-height: 2.5em; text-align: center; font-size: 1.25em;}
	.col ul li {font-weight: 300; line-height: 2.5em; text-align: center; font-size: 1.25em;}
	
	header.title {font-weight: 700; font-size: 1.5em;}
	p.hdr {font-weight: 700; margin-bottom: 3%; color: #f8971d; font-size: 1.35em;}
	
	.rates {display: block; border: 1px #f8971D solid; border-radius: 6px; padding: 2%; color: #f8971D; font-weight: 700; font-size: 1.5em; margin-bottom: 3%;}
	.rates1 {display: block; border: 1px #f8971D solid; border-radius: 6px; padding: 2%; color: #f8971D; font-weight: 700; font-size: 1.5em; margin-bottom: 3%;}
	
	.extra {margin: 10% 0 0 0; display: inline-block;}
	
}
@media only screen and (min-width: 769px) {
	/* insert responsive CSS for screens above 769px */
	
	h2 {font-size: 2.75em; padding-left: 6%; padding-top: 6%; line-height: 1.25em;}

	sup.main {padding-left: 6%; font-size: 1.1em; line-height: 4em;}
	img.card {display: block; max-width: 55%; margin: 0 auto; float: left; margin-top: -15%}
	.btn-area {margin: 2% 5% 5% 50%; width: 50%;}
	
	.col {max-width: 33%; display: inline-block; vertical-align: top; padding: 2%; box-sizing: border-box;}
	.col p {font-weight: 700; line-height: 1.5em; text-align: left; font-size: 1.2em;}
	.col ul li {font-weight: 300; line-height: 1.65em; text-align: left; font-size: 1.2em; list-style-type: disc; margin-left: 10%;}
	
	.offers {width: 100%; margin: 0; background: url(../images/content_bg.jpg) no-repeat; background-size: cover; padding: 2.5%; min-height: 775px;}
	header.title {font-weight: 700; font-size: 1.75em;}
	.rates {display: block; border: 2px #f8971D solid; border-radius: 8px; padding: 6% 2% 3% 2%; color: #f8971D; font-weight: 700; font-size: 1em; margin-bottom: 3%; max-width: 25%; text-align: center; line-height: 1.25em; float: left; clear: left;}
	.rates1 {display: block; border: 2px #f8971D solid; border-radius: 8px; padding: 4% 2% 4% 2%; color: #f8971D; font-weight: 700; font-size: 1em; margin-bottom: 3%; max-width: 25%; text-align: center; line-height: 1.25em; float: left; clear: left;}
	span.zero {font-size: 4em;}
	span.zero1 {font-size: 1.85em; line-height:1.1; font-weight:bold;}
	.details {padding: 5% 5% 2% 5%;}
	.info {font-size: 1.1em;}
	.terms {font-size: 1.1em; display: inline-block; float: right; clear: right; width: 70%;}
	
	.extra {margin: 5% 0 0 0; display: inline-block;}
	
}
@media only screen and (min-width: 1025px) {
	/* insert responsive CSS for screens above 1025px */
	
	h2 {font-size: 3.25em; padding-left: 6%; padding-top: 6%; line-height: 1.1em;}

	sup.main {padding-left: 6%; font-size: 1.1em; line-height: 4em;}
	img.card {display: block; max-width: 55%; margin: 0 auto; float: left; margin-top: -17%}
	.feature {height: 100%;vertical-align: top; padding: 2% 5% 1% 5%; box-sizing: border-box;}
	
	.benefits {padding: 2.5%; box-sizing: border-box;}
	.col {max-width: 33.33%; display: inline-block; vertical-align: top; box-sizing: border-box; margin-left: 3%;}
	.col p {font-weight: 700; line-height: 1.5em; text-align: left; font-size: 1.2em;}
	.col ul li {font-weight: 300; line-height: 1.65em; text-align: left; font-size: 1.2em; list-style-type: disc; margin-left: 12%;}
	
	.offers {width: 100%; margin: 0; background: url(../images/content_bg.jpg) no-repeat; background-size: cover; padding: 5%; min-height: 775px;}
	.col-promos {display: block; max-width: 48%; box-sizing: border-box; margin: 0 1%; float: left; padding-bottom: 3%;}
	
	header.title {font-weight: 700; font-size: 1.5em;}
	.rates {display: block; border: 2px #f8971D solid; border-radius: 8px; padding: 6% 2% 3% 2%; color: #f8971D; font-weight: 700; font-size: 1em; margin-bottom: 5%; max-width: 25%; text-align: center; line-height: 1.25em; float: left; clear: left;}
	.rates1 {display: block; border: 2px #f8971D solid; border-radius: 8px; padding: 4% 0.5% 4% 0.5%; color: #f8971D; font-weight: 700; font-size: 1em; margin-bottom: 5%; max-width: 25%; text-align: center; line-height: 1.25em; float: left; clear: left;}
	
	p.hdr {text-align: center; font-size: 1.75em; line-height: 1.25em; margin-top: 12%;}
	.info {font-size: 1.1em; text-align: center;}
	
	.terms {font-size: .9em;}
	
	.extra {margin: 1.7% 0 0 0; display: inline-block;}
	
}

@media only screen and (min-width: 1366px) {
	/* insert responsive CSS for screens above 1366px */
	
	h2 {font-size: 3.75em; padding-left: 8%; padding-top: 8%; line-height: 1.1em;}
	
	.btn-area {margin: 2% 5% 3% 50%; width: 50%;}
	
	.col {width: 31%; display: inline-block; vertical-align: top; box-sizing: border-box; padding: 0%; margin: 0;}
	.col p {font-weight: 700; line-height: 1.75em; text-align: left; font-size: 1.3em; padding-left: 13%;}
	.col ul li {font-weight: 300; line-height: 1.75em; text-align: left; font-size: 1.25em; list-style-type: disc;}
	
	p.hdr {margin: 12% 10% 2.75% 10%}
	
	.extra {margin: 4.25% 0 0 0; display: inline-block; font-size: .9em;}
}

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

#heroimg { background: url(../images/heroimg.jpg); height: 575px;color: #fff;background-size: cover; }
#heroimg .tagline { margin-top: 10%; }
#heroimg .tagline h1 { text-transform: uppercase; font-weight: bold;font-size: 50px;}
#heroimg .tagline h2 { font-weight: 100; font-size: 28px;}
#heroimg .tagline p { font-size: 25px; font-weight: 100;}

#box {  width: 100%;
		height: 275px;
		-webkit-border-radius: 28px 20px 20px 20px;
		-moz-border-radius: 28px 20px 20px 20px;
		border-radius: 28px 20px 20px 20px;
		background:rgb(255, 255, 255);
		-webkit-box-shadow: #BAB5B5 3px 3px 3px;
		-moz-box-shadow: #BAB5B5 3px 3px 3px;
		box-shadow: #4e4e4e 0px 2px 7px 1px;
		margin-top: -155px;
	}
#box .logo { text-align: center; margin-top: 5%;color: #5b5b5b}
#box .logo img { width: 50%; padding: 10px; margin-left: auto; margin-right: auto; }
#box .copy { text-align: left; padding: 20px; width: 40%;}
#box .title { font-weight: bold; font-size: 25px; letter-spacing: .02em;padding-top: 20px}
#box .txt { font-size: 16px; font-weight: 100; letter-spacing: 0.05em; line-height: 30px;}


.pad {padding: 50px 0 0 0;}
.pad .redbox { width: 100%; height: 25px; -webkit-border-radius: 28px 20px 20px 20px; -moz-border-radius: 28px 20px 20px 20px; border-radius: 28px 20px 20px 20px; background: #ff5f00; }

.threepointstop { text-align: center; padding:20px; font-size: 10px; height: 100px;}
.threepointstop p { margin-right: auto; margin-left: auto; width: 80%; font-size: 20px; line-height: 30px; letter-spacing: 0.03em;}
.threepoints { text-align: center; padding:20px; font-size: 10px; height: 100px;}
.threepoints p {padding: 20px 0; margin-right: auto; margin-left: auto; width: 80%; font-weight: 300; line-height: 30px; letter-spacing: 0.03em;}
.circles{ width: 50px; height: 50px; border-radius: 50%; font-size: 20px; color: #fff; line-height: 50px; background: #002d6a; text-align: center; margin-right: auto; margin-left: auto; margin-bottom: 20px; font-weight: bold; }

.shopnow { text-align: center;color: #5b5b5b}
.shopnow h2 { color: #f26122;padding: 5px 0 5px 0;text-transform: uppercase;font-weight: bold;}
.shopnow a { text-decoration: none;}
.shopnow img { margin-left: auto; margin-right: auto; padding: 30px 20px;}

#how { text-align: center; padding: 10px 0; font-size: 28px; font-weight: 200;}

#deserve { text-align: center; padding: 60px 0 100px 0; }
#deserve p { font-size: 30px; color: #ff5f00; font-weight: bolder; }


/* make keyframes that tell the start state and the end state of our object */
@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }

.fade-in {
  opacity:0;  /* make things invisible upon start */
  -webkit-animation:fadeIn ease-in 1;  /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
  -moz-animation:fadeIn ease-in 1;
  animation:fadeIn ease-in 1;

  -webkit-animation-fill-mode:forwards;  /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
  -moz-animation-fill-mode:forwards;
  animation-fill-mode:forwards;

  -webkit-animation-duration:1s;
  -moz-animation-duration:1s;
  animation-duration:1s;
}

.fade-in.one {
  -webkit-animation-delay: 0.7s;
  -moz-animation-delay: 0.7s;
  animation-delay: 0.7s;
}

.fade-in.two {
  -webkit-animation-delay: 1.2s;
  -moz-animation-delay:1.2s;
  animation-delay: 1.2s;
}

.fade-in.three {
  -webkit-animation-delay: 1.6s;
  -moz-animation-delay: 1.6s;
  animation-delay: 1.6s;
}

.fade-in.four {
  -webkit-animation-delay: 1.8s;
  -moz-animation-delay: 1.8s;
  animation-delay: 1.8s;
}

.fade-in.five {
  -webkit-animation-delay: 2s;
  -moz-animation-delay:2s;
  animation-delay: 2s;
}

.fade-in.six {
  -webkit-animation-delay: 2.2s;
  -moz-animation-delay:2.2s;
  animation-delay: 2.2s;
}


/* 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: 320px) {
	/* insert responsive CSS for screens above 375px */
	#heroimg { height: 400px; background-size: cover; background-position-x: 30%;  }

	#heroimg .tagline h1 { font-size: 30px; }
	#heroimg .tagline p { font-size: 18px; }

	#box { height: 100%;}
	#box .copy { width: 100%; }
	#box .txt { line-height: inherit; }
	#box .logo img {  max-width: 300px; padding: 40px 0 0 0;}

	.threepointstop { height: auto; background-color: #fff;}
	.threepoints { height: auto; background-color: #fff;}

}
@media only screen and (min-width: 481px) {
	/* insert responsive CSS for screens above 481px */
	#heroimg .tagline h1 { font-size: 50px; }
	#heroimg .tagline p { font-size: 25px; }
	
	.threepointstop { height: auto; background-color: #fff;}
	.threepoints { height: auto; background-color: #fff;}

}
@media only screen and (min-width: 641px) {
	/* insert responsive CSS for screens above 641px */
	#heroimg { height: 500px;}
	.banner-img {
		background-position: 0 100%;
		background-size: 100%;
	}
	
	.threepointstop { height: auto; background-color: #fff;}
	.threepoints { height: auto; background-color: #fff;}
}
@media only screen and (min-width: 768px) {
	/* insert responsive CSS for screens above 769px */


	#box { height: 300px;}	
	#box .copy { width: 40%; }	
	#box .title { padding-top: 0; }
	
	.threepointstop { height: 110px; background-color: #fff;}
	.threepoints { height: auto; background-color: #fff;}
}
@media only screen and (min-width: 1025px) {
	/* insert responsive CSS for screens above 1025px */
	#heroimg { background: url(../images/heroimg.jpg); height: 575px; color: #fff; background-size: cover; }

	#box { height: 275px;}	
	#box .logo img { max-width: 300px;  padding: 10px; }
	#box .copy { width: 40%; }	
	#box .txt { line-height: 30px; }
	#box .title { padding-top: 20px; }	

	.threepointstop { height: 200px; background-color: #fff;}
	
	.threepoints { height: 180px; background-color: #fff;}

}

/* 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(../images/hero.jpg) no-repeat 0 0; background-size: 189.72%;}


p{font-size:15px;}	


.text {width:90%;margin:0 auto; text-align:center;padding:2%;}
.text_white {width:90%;margin:0 auto; text-align:center;color:#fff;padding:2%;}


 
.hero1{ position:relative; padding-top:50%}
.hero1-img{position: absolute; top: 0; left: 0; right: 0;bottom: 0; background: url(../images/image1.jpg); background-size: 100%;}

.text1{position:relative; display:block;top:0; left:0;  width:90%; color:#fff; z-index:10; margin:0 auto;background: none; padding:2% 5%;  text-align:center;}

.hero2{ position:relative; padding-top:50%}
.hero2-img{position: absolute; top: 0; left: 0; right: 0;bottom: 0; background: url(../images/image6.jpg); background-size: 100%;}

.text2{position:relative; display:block;top:0; left:0;  width:90%; z-index:10; margin:0 auto;background: none; padding:2% 5%;  text-align:center;}
.text2_white{position:relative; display:block;top:0; left:0;  width:90%; z-index:10; margin:0 auto;background: none; padding:2% 5%;  text-align:center;color:#fff;}

.hero3{ position:relative; padding-top:50%}
.hero3-img{position: absolute; top: 0; left: 0; right: 0;bottom: 0; background: url(../images/image7.jpg) no-repeat top #000; background-size: 100%;}

.text3{position:relative; display:block;top:0; left:0;  width:90%; z-index:10; margin:0 auto;background: none; padding:2% 5%;  text-align:center; color:#fff;}

.text4{position:relative; display:block;top:0; left:0;  width:90%; z-index:10; margin:0 auto;background: #CCC; padding:2% 5%;  text-align:center; }


.hero4{ position:relative; padding-top:50%}
.hero4-img{position: absolute; top: 0; left: 0; right: 0;bottom: 0; background: url(../images/image8.jpg) no-repeat top #000; background-size: 100%;}

.hero5{ position:relative; padding-top:50%}
.hero5-img{position: absolute; top: 0; left: 0; right: 0;bottom: 0; background: url(../images/image10.jpg) no-repeat top #000; background-size: 100%;}
.hero6{ position:relative; padding-top:50%}
.hero6-img{position: absolute; top: 0; left: 0; right: 0;bottom: 0; background: url(../images/image9.jpg) no-repeat top #000; background-size: 100%;}



 h5{font-size:30px;color:#fff;font-weight:bold;padding-bottom:10px;padding-left:10px;}	
 h6{margin-left: 40px; font-size:20px; color:#000; font-weight:bold; padding-bottom:10px; padding-left:10px; line-height:1.5em}
 h7{font-size:30px;color:#fff;font-weight:bold;padding:2% 0;}
.f-l_half_1{width:95%; float:left; text-align:center; padding:0 2%;}
.f-r_half_1{width:95%; float:right; text-align:left; padding:0 2%;}

.fa-check{ display: block; }
.fa-ul{align: left;}
.fa-ul li {margin-bottom:20px}


ul{margin-left: 0; font-size: 15px; padding-left: 0; text-align: left;}


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







/* IMAGE + TEXT CONTENT */
p{font-size:15px;}	
.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;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 .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:858px; }
.contentwrap .features-image2 {width:100%; margin:0 auto; display:block; max-width:1366px; }

.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 ---- */


/* ---- 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(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 */

h5{font-size:30px;color:#fff;font-weight:bold;padding-bottom:10px;padding-left:10px;}	
h6{font-size:20px;color:#000;font-weight:bold;padding-bottom:10px;padding-left:10px;}
h7{font-size:30px;color:#fff;font-weight:bold;padding-bottom:10px;padding-left:10px;}	
	
.f-l_half_1{width:90%; float:left; text-align:center; padding-top:35px;}
.f-r_half_1{width:90%; float:right; text-align:left; padding-left:0px;}
}

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

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



}

@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 */
.contentwrap{font-size:.9em;}	
.banner-img {
	background-position: 0 100%;
	background-size: 100%;
}	

.text1{position:relative; display:block;top:0; left:0;  width:90%; color:#fff; z-index:10; margin:0 auto;background: none; padding:2% 5%; text-align:center;}

.hero2{ position:relative; padding-top:50%}
.hero2-img{position: absolute; top: 0; left: 0; right: 0;bottom: 0; background: url(../images/image6.jpg) no-repeat top #000; background-size: 100%;}

.text2{position:relative; display:block;top:0; left:0;  width:90%; z-index:10; margin:0 auto;background: none; padding:2% 5%;  text-align:center;color:#fff;}

.text2_white{position:relative; display:block;top:0; left:0;  width:90%; z-index:10; margin:0 auto;background: none; padding:2% 5%; text-align:center;color:#fff;}



.hero3{ position:relative; padding-top:50%}
.hero3-img{position: absolute; top: 0; left: 0; right: 0;bottom: 0; background: url(../images/image7.jpg) no-repeat top #000; background-size: 100%;}

.text3{position:relative; display:block;top:0; left:0;  width:90%; z-index:10; margin:0 auto;background: none; padding:2% 5%;   text-align:center; color:#fff;}

.hero4{ position:relative; padding-top:50%}
.hero4-img{position: absolute; top: 0; left: 0; right: 0;bottom: 0; background: url(../images/image8.jpg) no-repeat top #000; background-size: 100%;}

.hero5{ position:relative; padding-top:50%}
.hero5-img{position: absolute; top: 0; left: 0; right: 0;bottom: 0; background: url(../images/image10.jpg) no-repeat top #000; background-size: 100%;}

.hero6{ position:relative; padding-top:50%}
.hero6-img{position: absolute; top: 0; left: 0; right: 0;bottom: 0; background: url(../images/image9.jpg) no-repeat top #000; background-size: 100%;}



 h5{font-size:30px;color:#fff;font-weight:bold;padding-bottom:10px;padding-left:10px;}	
 h6{font-size:20px;color:#000;font-weight:bold;padding-bottom:10px;padding-left:10px;}
 h7{font-size:30px;color:#fff;font-weight:bold;padding-bottom:10px;padding-left:10px;}


.f-l_half_1{width:90%; float:left; text-align:center; padding-top:35px;}
.f-r_half_1{width:90%; float:right; text-align:left; padding-left:0px;}

.text {width:90%;margin:0 auto; text-align:center;padding:2%;}
.text_white {width:90%;margin:0 auto; text-align:center;color:#fff;padding:2%;}

	
}
@media only screen and (min-width: 769px) {
	/* insert responsive CSS for screens above 769px */
p{font-size:15px;}	
.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 2%;}
.f-r{float:right;padding:0 5% 0 0;}
 h5{font-size:30px;color:#fff;font-weight:bold;padding:2% 0;}	
 h6{font-size:20px;color:#000;font-weight:bold;padding:2% 0;}
 h7{font-size:30px;color:#000;font-weight:bold;padding:2% 0;}

.text {width:90%;margin:0 auto; text-align:center;padding:2%;}
.text_white {width:90%;margin:0 auto; text-align:center;color:#fff;padding:2%;}
 
.hero1{ position:relative; padding-top:50%}
.hero1-img{position: absolute; top: 0; left: 0; right: 0;bottom: 0; background: url(../images/image1.jpg) no-repeat top #000; background-size: 100%;}

.text1{position:absolute; display:block;top:5%; left:15%;  width:60%; color:#fff; z-index:10; margin:0 auto;background: none; padding:2% 5%;   text-align:center;}

.hero2{ position:relative; padding-top:50%}
.hero2-img{position: absolute; top: 0; left: 0; right: 0;bottom: 0; background: url(../images/image6.jpg) no-repeat top #000; background-size: 100%;}

.text2{position:absolute; display:block;top:3%; left:15%;  width:60%; z-index:10; margin:0 auto;background: none; padding:2% 5%;   text-align:center;}
.text2_white{position:absolute; display:block;top:3%; left:15%;  width:60%; z-index:10; margin:0 auto;background: none; padding:2% 5%;   text-align:center;color:#000;}



.hero3{ position:relative; padding-top:50%}
.hero3-img{position: absolute; top: 0; left: 0; right: 0;bottom: 0; background: url(../images/image7.jpg) no-repeat top #000; background-size: 100%;}

.text3{position:absolute; display:block;top:3%; left:15%;  width:60%; z-index:10; margin:0 auto;background: none; padding:2% 5%;   text-align:center; color:#fff;}

.text4{position:absolute; display:block;top:3%; left:15%;  width:60%; z-index:10; margin:0 auto;background: none; padding:2% 5%;   text-align:center; color:#000;}



.hero4{ position:relative; padding-top:50%}
.hero4-img{position: absolute; top: 0; left: 0; right: 0;bottom: 0; background: url(../images/image8.jpg) no-repeat top #000; background-size: 100%;}

.hero5{ position:relative; padding-top:50%}
.hero5-img{position: absolute; top: 0; left: 0; right: 0;bottom: 0; background: url(../images/image10.jpg) no-repeat top #000; background-size: 100%;}

.hero6{ position:relative; padding-top:50%}
.hero6-img{position: absolute; top: 0; left: 0; right: 0;bottom: 0; background: url(../images/image9.jpg) no-repeat top #000; background-size: 100%;}


.f-l_half_1{width:56%; float:left; text-align:left;}
.f-r_half_1{width:35%; float:right; text-align:left;padding:5% 2%;}





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