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

h3.promocode {color: #FFF; font-size: 1.5em;}
p.main {font-size: 3.75em; line-height: 1.5em;}
p.sub {font-size: 3.95em; font-weight: 700; color: #0190cd; line-height: 1.25em;}
p.subsmall {font-size: 2.5em;}
p.pcode {font-size: 1.2em; font-weight: 700; background-color: #FFF; display: inline-block; padding: 8px 12px; margin-top: 4.5%; text-align: center; box-shadow: 0 0 18px #CCC; opacity: .8;}
p.title {font-weight: 700; color: #004195; font-size: 1.75em;}
.info {font-size: 1.1em; color: #666; line-height: 1.35em;}
.info li {list-style-type: disc; margin-left: 20px;}

.section-inner#blue {background-color: #f8f8f8; padding: 3% 4% 3% 2%; box-sizing: border-box; margin-bottom: none;}

img.checkout {display: block; margin: 18% auto; max-width: 250px; width: 95%;}

.details {max-width: 90%; display: block; margin: 0 auto; box-sizing: border-box; padding-left: 5%;}

.disclaimer {margin: 0 auto; width: 100%; box-sizing: border-box; padding: 2.5%;}

.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;}


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

@media only screen and (max-width: 1024px) {
	/* insert responsive CSS for screens below 1024px */
	p.main {font-size: 2.5em;}
	p.sub {font-size: 2em;}
	p.subsmall {font-size: 1.25em;}
	p.pcode {font-size: 1em;}
}

@media only screen and (max-width: 374px) {
	h3.promocode {position: absolute; top: 51%; margin-left: 50%; font-size: 1.1em;

	}
}

@media only screen and (min-width: 375px) {
	/* insert responsive CSS for screens above 375px */
	.taglines {margin-top: -48%;}
	img.checkout {margin: 1.5% auto;}
	h3.promocode {position: absolute; top: 51%; margin-left: 50%;
	}
}
@media only screen and (min-width: 481px) {
	/* insert responsive CSS for screens above 481px */
	img.checkout {margin: 2.5% auto;}
	.taglines {margin-top: -48%;}
	h3.promocode {position: absolute; top: 51%; margin-left: 50%;

	}
	}
@media only screen and (min-width: 641px) {
	/* insert responsive CSS for screens above 641px */
	.banner-img {
		background-position: 0 100%;
		background-size: 100%;
	}
	.taglines {margin-top: -28%;}
	h3.promocode {position: absolute; top: 61%; margin-left: 56.5%;

		}
	}
@media only screen and (min-width: 769px) {
	/* insert responsive CSS for screens above 769px */
	.taglines {margin-top: -25%;}
	h3.promocode {position: absolute; top: 61%; margin-left: 56.5%;

	}
}
@media only screen and (min-width: 1025px) {
	/* insert responsive CSS for screens above 1025px */
	img.checkout {margin: 25% auto;}
	h3.promocode {position: absolute; top: 61%; margin-left: 56.5%;

	}
}