/*====================================== reset.css is here ========================================*/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { margin:0; padding:0;}
table {	border-collapse:collapse; border-spacing:0;}
fieldset,img { border:0; }
address,caption,cite,code,dfn,em,strong,th,var {font-style:normal; font-weight:normal;}
ol,ul { list-style:none;}
caption,th {text-align:left;}
h1,h2,h3,h4,h5,h6 {	font-size:100%;	font-weight:bold;}
q:before,q:after {content:'';}
abbr,acronym { border:0;}
.clear{clear:both; font-size:1px;line-height:1px; display:block; height:0;}
.clrflt{clear:both;}
.last	{margin:0 !important;}
.pad_last{padding:0 !important;}
.no_bg {background:none !important;}
input 	{ -webkit-appearance: none; -moz-appearance: none; -ms-appearance: none;-o-appearance: none; appearance: none; border-radius:0; }
/**************************************************************************************/
a											{color:#000; text-decoration:none; outline:0 none;}
a:hover										{color:#000;  text-decoration:none;}
h1											{font-size:24px;}
h2											{font-size:22px;}
h3											{font-size:18px;}
h4											{font-size:16px;}
h5											{font-size:14px;}
h6											{font-size:12px;}
/*----------------------------------------------------------------------------------*/
html 										{}
body										{color:#b1b1b1; font-family:"Arial", Verdana, Tahoma; font-size:12px; background:#f6f7f9;}
.flt_lt										{float:left; display:inline;}
.flt_rt										{float:right; display:inline;}
/* ---------------------------------------------------------------------------------*/
/* ----------------------- layout ----------*/
.wrapper									{margin:0 auto;}
.container									{width:640px; margin:0 auto; background:#f6f7f9; position:relative;}
.main_content								{}
header										{width:520px; display:block; padding:14px 0 0 0; margin:0 auto;}
/*-------------------------------------------*/
/* ------------------ HEADER HERE -------------------*/
.logo										{display:block; padding:0 0 43px 44px;}
.logo a img									{display:block;}
/* ---------------------------------------------------------*/
/* ------------------------ MIAN CONTENT HERE --------------*/
.login_cont									{width:520px; display:block; margin:0 auto; }
.login_cont p								{font-family:Arial, Helvetica, sans-serif; font-size:26px; line-height:36px; color:#003263; text-align:center; font-style:italic; padding:0 0 57px 0;}
.login_cont ul								{display:block; padding:0px;}
.login_cont ul li 							{display:block; padding:0 0 11px; text-align:center;}
.login_cont ul li input						{width:100%; display:block; background:#ffffff; padding:0px; border:1px solid #d1d0d0; border-radius:5px; outline:none; box-sizing:border-box; font-family:Arial, Helvetica, sans-serif; font-size:14px; height:49px; color:#000000; text-align:center;}
.login_cont ul li input.name				{text-transform:none;}
.login_cont ul li input.join				{background:#f9aa5c; border:none; color:#ffffff; border-bottom:2px solid #e68e38; font-weight:bold; cursor:pointer; width:100%; height:49px; padding:0px;}
.login_cont ul li input.join:hover			{background:#e68e38; border-bottom:2px solid #f9aa5c;}
.login_cont ul li a							{font-family:Arial, Helvetica, sans-serif; font-size:28px; line-height:33px; color:#4882cc; font-weight:normal; display:inline-block; margin:14px 0 0 0;}
.login_cont ul li a.join					{float:left; display:inline-block;}
.login_cont ul li a.forget					{float:right; display:inline-block;}
/* ---------------------------------------------------------*/
/* ------------------ FOOTER HERE --------------------------*/
footer										{width:100%; display:block; margin:0 auto; background:#66676b; padding:21px 0 41px 0;}
.footer_in									{width:285px; display:block; margin:0 auto;}
.view										{font-family:Arial, Helvetica, sans-serif;   text-shadow: 2px 0 0 #2c2d31, -2px 0 0 #2c2d31, 0 2px 0 #2c2d31, 0 -2px 0 #2c2d31, 1px 1px #2c2d31, -1px -1px 0 #2c2d31, 1px -1px 0 #2c2d31, -1px 1px 0 #2c2d31;
 font-size:14px; height:49px; color:#ffffff; font-weight:bold; display:block; background:#4e4f52; border-bottom:2px solid #343539; border-radius:5px; box-sizing:border-box; text-align:center; padding: 16px 0; margin:0 0 9px 0	;}
.view:hover									{color:#ffffff; background:#343539; border-bottom:2px solid #4e4f52;}
.copy										{display:block; margin:27px 0 0;}
.copy p										{font-family:Arial, Helvetica, sans-serif; font-size:9px; color:#cccccc; font-weight:normal; text-align:center;}
.copy p span								{display:block; margin:5px 0 0;}
.copy ul									{display:block; float:left; padding:10px 0 0px 20px; margin:0 0 3px; text-align:center;}
.copy ul li									{display:inline-block; float:none; padding:0 4px 0 0;}
.copy ul li a								{display:block; font-family:Arial, Helvetica, sans-serif; font-size:12px; line-height:17px; color:#cccccc; text-transform:capitalize; text-decoration:underline;}
.copy ul li a:hover							{text-decoration:none;}
/* ---------------------------------------------------------*/

/* ------------------ VarA_Betty HERE --------------------------*/
.var_head									{width:100%; display:block; background:#eceef2; padding:10px 0 22px 0;}
.logo_small									{padding:0 0 0 23px; width:600px; display:block; margin:0 auto;}
.var_cont									{padding:33px 0 0 0; width:310px; min-height:355px;}
.var_cont p									{font-family:Arial, Helvetica, sans-serif; font-size:26px; line-height:36px; color:#003263; font-style:italic; padding:0 0 57px 0; text-align:left;}
.cartton_img								{display:block; position:absolute; top:-74px; right:0;}
/* ---------------------------------------------------------*/

/* ------------------ Mobile Content HERE --------------------------*/
.short_description{ position:relative;}
.short_description > .cartton_img + div{ position:relative; top:20px;}
.short_description > .cartton_img + div h1{ font-family:Arial, Helvetica, sans-serif; font-size:24px; color:#fc8501; font-weight:normal; line-height:18px; }
.description_bg{ background:rgba(255,255,255,.8); text-align:left; display: inline-block; width: 90%; margin-top:41px; min-height:100px;}
.description_bg p{ font-family:Arial, Helvetica, sans-serif; font-size:18px; padding:0 10px; margin-top:18px; width:89%; font-style:normal; color:#003263; line-height:22px; text-align:left; font-weight:bold;}
.join_btn { text-align:center;}
.join_btn a{ background:#f9aa5c; display:inline-block; border-radius:5px; box-shadow:0 2px 0 #e48c35; margin-top: 24px; font-weight:bold; text-decoration:none; padding: 15px 0; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; font-size:18px; color:#fff; width:290px; height:50px;}
.join_btn a:hover{ background:#e68e38; box-shadow:0 2px 0 #f9aa5c;}
.partners_bg{ background:#005c97; margin:54px 0 0 0; text-align:center; }
.partners_bg p{ font-family:Arial, Helvetica, sans-serif; display:inline-block; font-size:24px; padding:0 51px; margin-top:30px; margin-bottom:30px; font-style:normal; color:#fff; line-height:28px;}
.steps h2{ font-family:Arial, Helvetica, sans-serif; font-size:24px; font-weight:normal; color:#fc8501; margin:0px 0 28px; text-align:center; line-height:24px;}
.steps ol{ padding:0 50px; font-family:Arial, Helvetica, sans-serif; font-size:18px; color:#003263;}
.steps ol li{ list-style-type:decimal; display:list-item; text-align:left; padding:0px; margin-bottom:7px; }
.form_container{ width:285px; margin:0px auto;}
.join_info{ margin-top:30px;}
.join_info h3{ font-family:Arial, Helvetica, sans-serif; font-size:24px; color:#fc8501; line-height:24px; margin-bottom:10px; font-weight:normal; text-align:center;}
.join_info a img{ max-width:100%;}
.join_info span{ display:block; text-align:center; font-size:24px; color:#fc8501; line-height:24px; margin:15px 0 12px;}
.join_info b{font-family:Arial, Helvetica, sans-serif; font-size:18px; color:#003263; display:block; text-align:center; margin: 0 0 30px;}
.form_container strong{ display:block; text-align:center; font-size:18px; color:#003263; font-family:Arial, Helvetica, sans-serif; font-weight:bold; margin:11px 0 0;}
.form_container p{ text-align:center; font-size:12px; color:#003263; font-family:Arial, Helvetica, sans-serif; font-style:normal; line-height:12px; padding:0px; margin:15px 0 20px 0;}
.form_container p a{ text-decoration:underline; color:#003263; margin:7px 0 0 0; display:inline-block;}
.steps{ background:#fff; padding-top:26px; padding-bottom:20px;}
.loginLink{color:#0000ff; font-size:20px; position:relative; z-index:9;  font-weight:bold; margin:0px; font-size:15px; background:#f9aa5c; padding: 4px 10px; border-radius: 4px;}
.loginLink:hover{ background:#e68e38; color:#fff;} 
.logo a{ display:inline-block; vertical-align:top; } 
.logo_small div{float:right; margin-right: 185px; margin-top: 25px;}
/* ---------------------------------------------------------*/

.registration h1{font-family:Arial, Helvetica, sans-serif; font-size:24px; color:#fc8501; font-weight:normal; text-align:center; line-height:24px; margin-top:20px;  margin-bottom: 23px;}
.registration p{ font-family:Arial, Helvetica, sans-serif; font-size:18px; color:#003263; line-height:24px; text-align:center; margin-bottom: 40px;}
.play_store_icon{ text-align:center; margin:0 0 26px;}
.play_store_icon a{ display:inline-block;}
.friends_info{ background:#005c97; text-align:center;}
.friends_info p{ font-size:24px; font-family:Arial, Helvetica, sans-serif; line-height:28px; color:#fff; padding-top:30px;}
.friends_info .container{ background:none;}
.friends_info a { font-family: Arial, Helvetica, sans-serif; font-size: 18px; height: 49px; color: #ffffff; font-weight: bold; width:285px; display: inline-block; background: #faab53;  border-radius: 5px; box-sizing: border-box; text-align: center; padding: 16px 0; margin:33px 0 30px 0; box-shadow:0 3px 0 #de8b39;}
.friends_info a:hover{ background:#fc8501; box-shadow:0 3px 0 #c76607;}

@media screen and (max-width:1024px){
	.logo_small div{float:right;margin-right:170px;}
}
@media screen and (max-width:640px){
	.logo_small div{float:right;margin-right:120px;}
	.logo_small, .container, .login_cont{ width:100%; box-sizing:border-box;  -webkit-box-sizing:border-box; -moz-box-sizing:border-box;}
	.short_description{ padding-left:30px; padding-right:30px;}
}
@media screen and (max-width:452px){
	.logo a img{ max-width:220px;}
}
@media screen and (max-width:435px){
	.short_description > .cartton_img + div h1{ font-size:20px; line-height:24px; width:70%;}
	#jcl-demo{padding:0px;}
	.description_bg{ margin-top: 26px; min-height: 87px;}
	.description_bg p{ font-size:14px; line-height:18px; margin-top:12px;  width:100%; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -o-box-sizing:border-box;}
	.partners_bg p{ font-size:20px; line-height:24px;}
	.steps h2, .join_info h3, .join_info span{ font-size:20px;}
	.steps ol li, .join_info b{ font-size:14px;}
	.form_container, .footer_in{ padding:0 30px; width:100%; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -o-box-sizing:border-box;}
	.steps ol{ padding:0 40px;}
	.join_btn a{ width:100%; font-size:14px; }
	.description_bg{ width:100%;}
	.partners_bg{ margin-top:56px;}
	.cartton_img{ top:-58px;}
	.login_cont ul li input{ height:45px;}
	.join_info{ text-align:center;}
	.form_container strong{ font-size:14px;}
	#jcl-demo .carousel>ul>li{ margin:0 8px;}
	#jcl-demo .carousel{ padding:0px;}
	.short_description > .cartton_img + div{ padding-top:16px;}
	.join_btn a{ height:46px;}
	.var_head{ padding-bottom:18px;}
	.friends_info a{ width:100%;}
	.friends_info{ padding:0 30px;}
	.friends_info p br{ display:none;}
	.friends_info p, .registration h1{ font-size:20px;  line-height:24px;}
	.friends_info a{ margin:28px 0 25px 0;}
	.registration p{ font-size:14px; line-height:18px; margin-bottom: 30px;}
}
@media screen and (max-width:421px){
	.logo a img {
		max-width: 200px;
	}
	.loginLink{ font-size:13px;}
	.logo_small div{ margin-top:0px;}
}
@media screen and (max-width:395px){
	.short_description > .cartton_img + div h1{ width:48%;}
	.loginLink{  margin-top:0px;}
	.logo div{ margin-top: -39px;}

}
@media screen and (max-width:370px){
	.loginLink{font-size:13px;}
	.logo div{ margin-top:0px;}
	.logo a img{ max-width:160px;}
}
@media screen and (max-width:360px){
	.copy ul{ padding-left:0px;}
	.logo div a{ font-size: 12px;}
}

@media screen and (max-width:355px){
	.logo div { margin-top: -36px;}
}