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

#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: 25px 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; }

.threepoints { text-align: center; padding: 40px 0; font-size: 18px;height: 280px;}
.threepoints p { padding: 10px 0; margin-right: auto; margin-left: auto; width: 80%; font-weight: 100; line-height: 30px; letter-spacing: 0.03em; }
.circles{ width: 50px; height: 50px; border-radius: 50%; font-size: 20px; color: #fff; line-height: 50px; background: #e97601; text-align: center; margin-right: auto; margin-left: auto; 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: 30px 0; font-size: 27px; font-weight: 100;}

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

	.threepoints { height: auto; }

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

}
@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%;
	}	
}
@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; }
}
@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; }	

	.threepoints { height: 280px; }	

}