html,body{
	color:#333333;
	margin:0;
	background: url(../images/bg.png) repeat #2969b0;
}

img{border:0px;}
form{margin:0px; padding:0px;}
p{margin:0px; padding:0px;}
.clear{clear:both; margin:0px; padding:0px;}
h1,h2,h3,h4,h5,h6{ padding:0px; margin:0px; font-weight:normal;}
*, *:before, *:after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }

.wrapper{ width:100%; max-width:880px; margin:auto; text-align:center}
.wrapper .text1{ padding:5px 0 0; width:100%; max-width:300px; margin:auto;}
.wrapper .text1 img{ width:100%;}
.wrapper .text2{ padding:0px 0 10px; font-size:30px; line-height:40px; font-weight:700; color:#fff; text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.5);}
.wrapper .text2 span{ color:#fac51c;}
.wrapper .text3{ padding:10px 0; font-size:18px; line-height:40px; font-weight:600; color:#fff; text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.5);}
.wrapper .text3 a{ text-decoration:underline; color:#fff;}
.wrapper .text3 i{ display:inline-block; margin-right:6px;}

.logo{ text-align:center; margin:20px 0 50px}
.logo img{ max-width: 100%}

.con-box{ background:rgba(0, 0, 0, 0.5); border-radius: 10px; padding:20px;}
.con-box h1{ font-size:22px; line-height:34px; font-weight:700; color:#fff; text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.5); margin-bottom:20px; 
background:rgba(0, 0, 0, 0.5); border-radius: 10px 10px 0 0; margin:-20px -20px 10px; padding:12px 10px;}
.con-box h1 span{ display:block; color:#fac51c; font-size:30px; font-style:italic;}
.con-box h3 span{ display:block; color:#fac51c; font-size:20px; margin-top:20px }
.con-box .book{ float:left; width:100%; max-width:300px; text-align:center;}
.con-box .book img{ width:100%;}
.con-box .optin-box{ float:right; width:100%; max-width:500px; margin-right:20px;}
.con-box .optin-box h2{ font-size:18px; line-height:30px; font-weight:400; color:#fff; padding:50px 0 20px;}

#inputstyle input {
	width: 80%;
	height: 80px;
	border: 5px solid #000;
	text-align: center;
	font-size:30px;
	background:#faffd7;
	margin:10px 0; border-radius: 60px; font-weight:300;
}

input[type="submit"] {
	height:90px; width:auto; cursor:pointer; font-size:36px; font-weight:800;
	text-align: center; color:#a81201; text-transform:uppercase; text-shadow:#fff 1px 2px 0px; padding:0 40px;
	border: solid 4px #fff; outline:none; vertical-align:top; box-shadow: 0 16px 13px -6px #000;
	border-radius: 60px;
	background: -webkit-linear-gradient(#fffa00, #ffb801); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(#fffa00, #ffb801); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(#fffa00, #ffb801); /* For Firefox 3.6 to 15 */
    background: linear-gradient(#fffa00, #ffb801); /* Standard syntax */
	
}

.footer { }
.footer a { color:#878787; text-decoration:none;}
.footer p span { display: inline-block; padding:0 4px;}

@media(max-width:768px){ 
.con-box{ width:90%; margin:auto; padding: 20px 20px 40px;}
.con-box .book{ float:none; margin:0 auto 10px;}
.con-box .optin-box{ float:none; max-width: none; margin-right: 0;}
.con-box .optin-box h2{ padding: 0 0 10px;}
}

@media(max-width:700px){ /*600*/
.con-box{ width: 94%;}
}

@media(max-width:500px){ /*480*/
.wrapper{ width:90%;}
.wrapper .text2{ font-size:27px; line-height:36px;}
.con-box h1{ font-size: 18px; line-height: 23px;} 
.con-box h1 span{ font-size: 24px; line-height: 30px;}
#inputstyle input{ width: 100%;}
input[type="submit"]{ font-size: 18px; height: 70px;}
}
@media(max-width:400px){ /*360*/
.wrapper .text1 img{ width:100%;}
.wrapper .text2{ font-size:20px; line-height:26px;}
.wrapper{ width:100%;}
#inputstyle input{ font-size: 24px; height: 70px;}
input[type="submit"]{ font-size: 18px;  padding: 0 16px;}
}