/* CSS Document */
@media screen and (max-width: 1440px) {
	#banner .caption{right: 145px; top: 12%;}
	#banner .caption h2{font-size: 60px; max-width: 450px; width: 100%;}
	#banner .bn2{top: -12px;}
	#banner dl{margin-top:-210px;}
	#content .cont-left {left:87px;}
	#content .cont-left dl{padding: 50px 40px 50px 30px;}
	#content-bottom .cont-left{right: 87px;}
	#content-bottom .cont-left dl{padding: 15px 40px 15px 30px;}

}
@media screen and (max-width: 1200px) {
	.row{padding-left: 15px !important; padding-right: 15px !important; box-sizing: border-box !important;}
	header nav ul li{padding: 0;}
	header nav ul li a{font-size: 13px; padding: 12px 8px;}
	header .email{right: 15px;}
	#banner .caption{max-width: 680px; padding: 30px 10px 30px 100px; right: 130px}
	#banner dl{margin-top: -100px;}
	#content .cont-left{width: 37.5%; left:0;}
	#content-bottom .cont-left{width: 37.5%; right: 0;}
	#reward .right p{margin: 30px auto 0;}
	#contact{background:url(../images/contact2.jpg) no-repeat center top / 100% 100%;}
	#contact .row{max-width: 1200px;}
	#contact section{padding: 35px 0;}
	#footer{padding: 0 0 40px;}
}
@media screen and (max-width: 1068px) {
	header nav ul li a{font-size: 12px;}
	#banner{padding:0 0 20px;}
	#banner dl{margin-top: -50px;}
	#banner .bn1, #banner .bn2{display: none;}
	#banner .bn3{display: block;}
	#banner .caption{right: 116px; top:5%;}
	#banner dd{font-size: 15px;}
	#content .cont-left dd p, #content-bottom .cont-left dd p{font-size: 15px;}
	#reward .right ul li{margin:5px;}
}
@media screen and (max-width: 980px) {
	header .logo{width: 23%;}
	header nav{width: 76%; padding:0;}
	header nav ul li a{ padding:12px 5px;}
	#content{background: url(../images/cont1.jpg) no-repeat center top / 100% 100%; padding:40px 0;}
	#content .cont-left, #content .cont-right, #content-bottom .cont-left, #content-bottom  .cont-right{display: block; width: auto;}
	#content .cont-left, #content-bottom .cont-left{position: static; margin:10px auto 0;}
	#content .cont-left dl, #content-bottom .cont-left dl{padding: 20px; box-sizing: border-box;}
	#content .cont-left dt, #content-bottom .cont-left dt{text-align: center;}
	#content .cont-left dd p, #content-bottom .cont-left dd p{font-size: 17px;}
	#content-bottom{background: url(../images/cont2.jpg) no-repeat center top / 100% 100%; padding:40px 0;}
	#content-bottom .cont-left dt{float: none; padding:0; text-align: center;}
	#content-bottom .cont-left dt img{display: block;}
	#reward .left, #reward .right{display: block; width: auto;}
	#reward .left p{padding:25px 0; text-shadow: 1px 1px 0px #fff;}
	#reward .right ul{text-align: center;}
	#reward .right p{float: none; max-width: 100%; color: #606157; text-shadow: 1px 1px 0px #fff;}
	#wwd dl, #content.inner .wwd dl{width:32%; padding:15px;}
	#about{padding:40px 0;}
}
@media screen and (max-width: 880px) {
	header nav ul li a{font-size: 11px; padding:12px 3px;}
	#banner .caption{right: 95px; top: 2%;}
	#banner dl{width: 25%;}
	#content h1, #content-bottom h2, #about .ab-right h2, #reward .left h2, #wwd h2, #contact h2{font-size: 40px;}
	#reward .right ul li{width: 24%; margin:0 auto; padding:5px; box-sizing: border-box;}
	#contact section{padding:35px 15px; box-sizing: border-box;}
	#footer nav ul li a{font-size: 13px; padding:12px 8px;}
}
/*Styles for screen 800px and lower*/
@media screen and (max-width: 800px) {
	header{padding:20px 0;}
	/*header, #banner, #content, #content-bottom, #about, #reward, #footer{background-size: cover !important;}*/
	header nav{display: block; width: auto;}
	header .logo, header .email{display: inline-block; vertical-align: middle; width: 49%; padding:0 0 15px;}
	header .row{padding:0 !important;}
	header .email{position: static; text-align: right;}
	header nav {  height: auto; padding:0; background:#404041; border-left: 0;}
  	header nav ul li { width: 100%;  position: relative; display: block; padding:0; background:#fff; border-bottom: 1px solid #ccc;}
  	header nav ul { width: 100%; display: none; height: auto;}
  	header nav ul li a {display: block; text-align: center; font-size: 14px; box-sizing: border-box;}
  	header nav a { 	text-align: left; width: 100%;}
	header nav a#pull {	display: block;	width: 100%;position: relative; height: 45px; color:#fff; 
	text-indent: 25px; 	font-size:25px; color:#fff; display:block; text-decoration: none;}
	header nav a#pull:after {	content:"";	background: url('../images/nav-icon.png') no-repeat;width: 30px;height: 30px;display: inline-block;
		position: absolute;	right: 15px;top: 12px;	}
	header nav a#pull strong{ line-height: 45px;}
	#banner .caption{position: static; max-width: 100%; margin:20px auto 0;}
	#banner .caption h2{margin:0 auto; font-size: 50px; max-width: 380px;}
	#banner .caption h2 span{font-size: 30px;}
	#banner dl{width:31%; box-shadow: 0 0 10px #000; margin:20px 3px !important;}
	#banner dt img{min-height: 108px;}
	#content h1, #content-bottom h2, #about .ab-right h2, #reward .left h2, #wwd h2, #contact h2{font-size: 35px;}
	#about{background: none; padding:0;}
	#about .ab-right, #about .ab-left{display: block; width: auto; padding:40px 15px; box-sizing: border-box;}
	#about .ab-right{background: url(../images/about2.jpg) no-repeat center top / cover;}
	#about .ab-left{background: url(../images/about1.jpg) no-repeat center top / cover;}
	#about .ab-right .btn{margin:20px 0 0;}
	#reward{padding:30px 0;}
	#reward, #wwd, #contact{background-size: cover;}
	#contact{padding:0 0 20px;}
	#footer p{padding:15px 0 0;}
	#footer nav ul li{padding:0;}
}
@media screen and (max-width : 680px) {
	#banner dd{font-size: 14px;}
	#wwd dl, #content.inner .wwd dl{width: 48%;}
	#footer nav {background-size: 100% 100%;}
	#footer nav ul li{display: block; border-bottom: 1px dotted #fff;}
	#footer nav ul li:last-child{border-bottom: 0;}
	#footer nav ul li a{font-size: 14px; padding:8px; box-sizing: border-box;}
	#q-section .half {width: 100%;margin: 25px auto}
}
@media screen and (max-width : 530px) {
	#banner .caption{padding:30px 10px 30px 60px;}
	#banner .caption h2{font-size: 40px; max-width: 100%}
	#banner .caption h2 span{font-size: 26px;}
	#banner .caption p{line-height: 18px;}
	#banner dl{width: 49%; display: block; margin:20px auto !important; padding:20px 0;}
	#banner dt img{min-height: auto;}
	#content .cont-left dt, #content .cont-left dd, #content .cont-left dt, #content-bottom .cont-left dt, #content-bottom .cont-left dd{display: block; width: auto !important}
	#content .cont-left dl, #content-bottom .cont-left dl{background-size: auto 100%;}
	#content .cont-left dl{padding:20px 20px 20px 40px;}
	#content-bottom .cont-left dl{padding:20px 40px 20px 20px;}
	#reward .right ul li{width: 49%;}
}

/*Styles for screen 515px and lower*/
@media screen and (max-width : 480px) {
	header .logo, header .email{display: block; width: auto;}
	header .logo{padding:0 15px; box-sizing: border-box;}
	header .email{text-align: center; padding:10px 0;}
	#banner .caption h2{font-size: 28px;}
	#banner .caption h2 span{font-size: 20px;}
	#banner dl{width: auto;}
	#banner dd{font-size: 18px;}
	#content h1, #content-bottom h2, #about .ab-right h2, #reward .left h2, #wwd h2, #contact h2{font-size: 30px;}
	#content-bottom .cont-left dl{padding:20px 60px 20px 20px;}
	#wwd dl, #content.inner .wwd dl{display: block; width: auto;}
	#wwd dt, #content.inner .wwd dt{min-height: auto;}
	/* contact form */
	.contactBox { width:90% !important; text-align:center; padding:0;}
	.contactBox-left,.contactBox-right { float:none !important; width:100%; padding:15px 0 0 0;}
	.contactForm { width:90%;}
	.contactForm label { padding-left:15px;}
	.contactForm input[type=text] { width:90%;}
	.contactForm textarea { width:90%;}
}