/* 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(../imgs/hero.jpg) no-repeat 0 0;
	background-size: 189.72%;
}


/* custom CSS on a per project basis
================================*/

#grad {
  background: #e9e9e9; /* For browsers that do not support gradients */
  background: -webkit-linear-gradient(top, #e9e9e9, white); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(bottom, #e9e9e9, white); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(bottom, #e9e9e9, white); /* For Firefox 3.6 to 15 */
  background: linear-gradient(to bottom, #e9e9e9 , white); /* Standard syntax */
}

.main-item {
    margin: 0 10% 3em 10%;
}

.item-container {
    padding: 1.5em 0 0 0;
}

.promo-code-cntr {width: 43%;margin: 21% 0 0 12%;line-height: 1.75em;font-size: .95em;}
.banner-img h1{color:#ffffff;text-transform: uppercase;position: relative;}
.banner-img h1 span{color:#ffdb00; font-size: 1.2em; font-weight:bold;}


/* responsive CSS on a per project basis
================================*/

@media only screen and (max-width: 1024px) {
	.promo-code-cntr {width: 40%;margin: 17% 0 0 11%; font-size:.8em;}
}

@media only screen and (max-width: 641px) {
	
	.promo-code-cntr {width: 40%;margin: 26% 0 0 6%; font-size:.8em;line-height: 1.5em;}
}

@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-img {
		background-position: 0 100%;
		background-size: 100%;
	}	
}
@media only screen and (min-width: 769px) {
	/* insert responsive CSS for screens above 769px */
}
@media only screen and (min-width: 1025px) {
	/* insert responsive CSS for screens above 1025px */
}