@import url("../../css/fonts.css");

html,body{
	width: 100%;
	height: 100%;
	position: relative;
	padding: 0;
	margin: 0;
	font-family: 'Radikal', sans-serif;
	color: #222;
	z-index: 0;
	background: #fff;
	min-width: 1200px;
}

a{ text-decoration: none; color: #222; }
h1{ font-size: 34px; font-family: 'Quadon Medium', serif; letter-spacing: 1px; }
h2{	font-size: 26px; font-family: 'Quadon Medium', serif; letter-spacing: 1px; }
h3{	font-size: 21px; font-family: 'Quadon Medium', serif; letter-spacing: 1px; }

.container{
	width: 100%;
	min-width: 1200px;
	position: relative;
}

#main{
	height: 100%;
	background: url('../img/rbp-bg.png') no-repeat center #f3ede7;
	background-size: auto 100%;
	padding: 75px;
	-webkit-box-sizing: border-box; 
	-moz-box-sizing: border-box; 
	box-sizing: border-box;
	position: relative;
}

#main::after{
	content: "";
	display: block;
	clear: both;
}

#main-disclaimer{
	height: 100%;
	background-color: #f3ede7;
	background-size: 100%;
	padding: 75px;
	-webkit-box-sizing: border-box; 
	-moz-box-sizing: border-box; 
	box-sizing: border-box;
	position: relative;
}

	#header{
		
	}
	
	#header::after{
		content: "";
		display: block;
		clear: both;
	}
	
	#header button{
		background: #3c194b;
		color: #fff;
		width: 90px;
		height: 38px;
		border: 0px;
		float: right;
		font-family: 'Radikal Bold', sans-serif;
		text-transform: uppercase;
		font-size: 11px;
		margin-right: 20px;
		margin-top: 6px;
		cursor: pointer;
	}
	
	#logo{
		float: left;
	}
	
	#info{
		float: right;
	}
	
	#info span{
		display: block;
		text-align: right;
	}
	
		#phone{
			font-family: 'Radikal', sans-serif;
			font-weight: normal;
			font-size: 22px;
			color: #3c194b;
		}
		
		#email{
			font-family: 'Radikal', sans-serif;
			font-weight: normal;
			font-size: 14px;
			color: #3c194b;
		}
	
	#main-content{
		margin-top: 60px;
	}
	
	#main-content h1{
		font-family: 'Radikal Bold', sans-serif;
		font-weight: normal;
		font-size: 12px;
		text-transform: uppercase;
		color: #721c54;
		margin: 0px;
	}
	
	#main-content h2{
		font-family: 'Quadon Medium', sans-serif;
		font-weight: normal;
		font-size: 40px;
		color: #3c194b;
		margin: 10px 0px;
	}
	
	#main-content p{
		font-size: 16px;
	}

	.color-gold a{ color: #b08a68; }

	
/**/

	#main-content-disclaimer{
		margin-top: 60px;
	}
	
	#main-content-disclaimer h1{
		font-family: 'Radikal Bold', sans-serif;
		font-weight: normal;
		font-size: 12px;
		text-transform: uppercase;
		color: #721c54;
		margin: 0px;
	}
	
	#main-content-disclaimer h2{
		font-family: 'Quadon Medium', sans-serif;
		font-weight: normal;
		font-size: 40px;
		color: #3c194b;
		margin: 10px 0px;
	}
	
	#main-content-disclaimer p{
		font-size: 16px;
	}	
/**/	
	#form{
		width: 100%;
		margin-top: 40px;
		padding: 25px 30px 30px 35px;
		background: rgba(255,255,255,.7);
		-webkit-box-sizing: border-box; 
		-moz-box-sizing: border-box; 
		box-sizing: border-box;
		position: relative;
		min-width: 1000px;
	}
	
	.form-field{
		display: inline-block;
		margin-right: 6px;
		vertical-align: middle;
		width: 19%;
		position: relative;
	}
	
	.form-field label{
		font-family: 'Quadon Medium', serif;
		font-size: 20px;
		color: #b08a68;
		display: block;
		margin-bottom: 5px;
	}
	
	.form-field input {
		border: 1px solid #b08a68;
		color: #888;
		font-size: 16px;
		font-family: 'Quadon Medium', serif;
		padding: 0 10px;
		outline: 0;
		height: 55px;
		width: 100%;
		-webkit-box-sizing: border-box; 
		-moz-box-sizing: border-box; 
		box-sizing: border-box;
	}
	
	.form-field input[type=password]{
		font-weight: 300;
		letter-spacing: 5px;
	}
	
	.form-field input:focus{
		border: 1px solid #731d55;
	}
		
	.default-btn{
		background: #721c54;
		color: #fff;
		-moz-box-shadow: inset #501648 0 -3px 0 0;
		-webkit-box-shadow: inset #501648 0 -3px 0 0;
		box-shadow: inset #501648 0 -3px 0 0;
		border: 0;
		border-bottom: 2px solid #731d55;
		width: 100%;
		height: 55px;
		margin: 0;
		text-transform: uppercase;
		font-family: 'Radikal Bold', sans-serif;
		outline: 0;
		cursor: pointer;
	}
	
	#share{
		display: inline-block;
		float: left;
		margin-top: 10px;
	}
	
	#disclaimer{
		font-size: 12px;
		color: #6b6b6b;
		font-style: italic;
		text-align: right;
		display: inline-block;
		float: right;
		margin-top: 10px;
	}
	
	#disclaimer a{
		color: #6b6b6b;
		text-decoration: underline;
	}
	
#easy-earn-exp{
	text-align: center;
	background: #fdf9f4;
	padding: 20px 0px;
}

.disclaimer li{
	list-style-type: decimal;
	font-size: 16px;
	line-height: 30px;
}

.disclaimer a{
	text-decoration: underline;
}

	#easy-earn-exp > div{
		display: inline-block;
		width: 22%;
		margin: 10px 30px;
		vertical-align: top;
	}
	
	#easy-earn-exp h3{
		font-family: 'Quadon Medium', sans-serif;
		font-weight: normal;
		font-size: 22px;
		color: #3c194b;
		margin: 0;
	}
	
	#easy-earn-exp p{
		margin-top: 12px;
		font-size: 15px;
		color: #9c7048;
	}
	
#how-it-works{
	text-align: center;
	padding: 90px 0px;
	width: 70%;
	margin: 0 auto;
}

	#how-it-works h2{
		text-transform: lowercase;
		font-family: 'Quadon Medium', serif;
		font-weight: normal;
		font-size: 30px;
		text-transform: lowercase;
		color: #721c54;
		margin: 0px;
	}
	
	#how-it-works p{
		margin-top: 12px;
		font-size: 15px;
		color: #9c7048;
	}
	
	.steps{
		margin: 100px 0px 0px 0px;
	}
	
	.step{
		margin: 20px 0px;
	}
	
	.step-data{
		display: inline-block;
	}
	
		.step-img{
			vertical-align: top;
		}
		
		.step-text{
			width: 400px;
			text-align: left;
			vertical-align: top;
			margin-top: 40px;
			margin-left: 40px;
		}
			.step-text span{ display: block; margin: 10px 0px; }
			.step-no{ font-family: 'Quadon Medium', serif; font-size: 25px; color: #721c54; }
			.step-desc{ font-family: 'Quadon Medium', serif; font-size: 16px; color: #9c7048; text-transform: uppercase; }
			.step-text p{ margin-top: 20px; display: block; font-size: 14px; }
			
			.step-text._left{
				text-align: right;
				margin-right: 40px;
			}
			
	.line{ 
		border-top: 1px solid #eddfd2; 
		height: 1px;
		margin: 80px auto; 
		width: 100%; 		
	}
	
#testimonials{
	margin-top: 40px;
}
	
	.testimonial-img{
		display: inline-block;
		vertical-align: middle;
		margin-top: -15px;
	}
	
	.testimonial-text{
		display: inline-block;
		vertical-align: middle;
		text-align: left;
		margin-left: 20px;
	}
	
	.testimonial-box{
		height: 111px;
		width: 609px; 
		background: url('../../img/testimonial-box.png') no-repeat left center;
		-webkit-box-sizing: border-box; 
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		font-size: 18px;
		color: #9c7048;
		padding-top: 25px;
		padding-left: 45px;
	}
	
	.testimonial-author{
		font-family: 'Quadon Medium', sans-serif;
		font-weight: normal;
		font-size: 15px;
		color: #21082c;
		margin-left: 25px;
		margin-top: 10px;
	}
	
	.testimonial-title{
		font-size: 13px;
		color: #21082c;
		font-style: italic;
		margin-left: 25px;
		margin-top: 5px;
	}
	
#register-now{
	background: #fdf9f4;
	height: 250px;
	width: 100%;
	text-align: center;
	position: relative;
	padding: 50px;
	-webkit-box-sizing: border-box; 
	-moz-box-sizing: border-box; 
	box-sizing: border-box;
}
	
	#register-now h2{
		font-family: 'Quadon Medium', sans-serif;
		font-weight: normal;
		font-size: 25px;
		color: #3c194b;
	}
	
	#register-now h4{
		font-weight: normal;
		font-size: 15px;
		color: #21082c;
	}
	
	#register-now-content{
		display: inline-block;
		vertical-align: middle;
		text-align: left;
		width: 50%;
	}
	
	#register-now-button{
		display: inline-block;
		vertical-align: middle;
		margin-left: 30px;
		width: 17%;
	}
	
#footer{
	height: 65px;
	background: #eee8e3;
	-webkit-box-sizing: border-box; 
	-moz-box-sizing: border-box; 
	box-sizing: border-box;
	padding: 25px 75px;
}

	#copyright{
		float: left;
		font-family: 'Quadon Medium', sans-serif;
		font-weight: normal;
		font-size: 14px;
		color: #a47a55;
	}
	
	#social, #links{
		float: right;
		font-weight: normal;
		font-size: 12px;
		color: #a47a55;
	}
	
	#social{
		margin-top: -5px;
	}
	
		#social img{
			margin-left: 15px;
		}
	
	#links a{
		color: #a47a55;
	}
	
.overlay{
	width: 100%;
	height: 100%;
	position: fixed;
	background: rgba(0,0,0,.8);
	z-index: 1;
	display: none;
}

#message-box{
	width: 30%;
	height: auto;
	margin: -100px auto;
	background: #f8f8f8;
	font-size: 15px;
	color: #9c7048;
	padding: 10px 20px;
	text-align: center;
	-webkit-transition: all .5s;
	-moz-transition: all .5s;
	-o-transition: all .5s;
	transition: all .5s;
}

#message-box.on{
	margin: 50px auto;
}

#message-box a{
	font-family: 'Radikal', sans-serif;
	font-size: 12px;
	color: #721c54;
	text-decoration: underline;
}

#login-box{
	width: 30%;
	height: auto;
	margin: -100px auto;
	background: #f3ede7;
	font-size: 15px;
	color: #9c7048;
	padding: 40px 20px;
	text-align: center;
	-webkit-transition: all .5s;
	-moz-transition: all .5s;
	-o-transition: all .5s;
	transition: all .5s;
}
	
	#login-box img{
		width: 150px;
	}

	#login-box h2{
		font-family: 'Quadon Medium', sans-serif;
		font-weight: normal;
		font-size: 30px;
		color: #3c194b;
		margin: 30px 0 5px 0px;
	}

	#login-box span{
		font-family: 'Radikal Bold', sans-serif;
		font-weight: normal;
		font-size: 12px;
		text-transform: uppercase;
		color: #721c54;
		margin: 0px;	
	}

	#login-box form{
		margin-top: 30px;
	}

	#login-box label{
		font-size: 14px;
	}

	#login-box .form-field{
		display: block;
		width: 80%;
		text-align: left;
		margin: 0 auto;
		margin-bottom: 20px;
	}

#message-box.on{
	margin: 50px auto;
}

#login-box.on{
	margin: 50px auto;
}

.hide-desktop{ display: none; }
.hide-mobile{ display: inherit; }

@media only screen and (max-width: 600px){
	.hide-mobile{ display: none !important; }
	.hide-desktop{ display: inherit; }

	html,body, .container{
		min-width: 0px;
		width: 100%;
	}
	
	#phone{ font-size: 16px; }
	#email{ font-size: 12px; }
	#header button{
		width: 70px;
		height: 30px;
		font-size: 10px;
		margin-right: 10px;
		margin-top: 3px;
	}
	
	#main-content h2{ font-size: 26px; }
	#main-content p{ font-size: 13px; }
	#main{
		height: auto;
		padding: 10px;
		width: 100%;
	}
	
	#form{
		min-width: 0px;
		padding: 10px;
	}

	.form-field{
		display: block;
		margin: 10px 0px;
		width: 100%;
	}
	
	#disclaimer{ float: none; text-align: center; }
	
	.testimonial-box{
		width: 90%;
		font-size: 14px;
		padding-right: 20px;
	}
	
	#how-it-works{
		width: 90%;
		padding: 50px 0px;
	}
	
	.steps{
		margin: 50px 0px 0px 0px;
	}
	
	.step{
		margin: 0 auto;
		width: 80%;
		margin-bottom: 45px;
		padding-bottom: 40px;
		border-bottom: 1px solid #ccc;
	}
	
	.step img{
		width: 200px;
	}
	
	.step._last{
		border-bottom: none;
		margin-bottom: 0px;
	}
	
	.step-data{
		display: block;
		margin-bottom: 20px;
		margin: 0 auto;
		width: 100%;
	}
	
	.step-text{
		text-align: center !important;
	}
	
	.arrow{ display: none; }

	#easy-earn-exp{ width: 100%; }
	#easy-earn-exp > div { display: block; width: 90%; margin: 0 auto; margin: 15px auto 20px auto; }
	
	#login-box{
		width: 90%;
		height: auto;
		font-size: 14px;
		padding: 20px 10px;
	}
	
	#login-box .form-field{ width: 95%; margin: 10px auto; }
	#login-box img {  }
	#login-box h2{ margin: 10px auto; font-size: 22px; }
	#login-box form{ margin: 10px auto; }
	
	#login-box.on{
		margin: 20px auto;
	}
}