@charset "utf-8";
/* CSS Document */
*
{
	box-sizing:border-box !important;	
}
img
{
	max-width:100%;
	max-height:100%;	
}
body
{
	overflow-x:hidden;	
}
#container
{
	width:100%;
	float:left;
	background:none;
}
.upper_section
{
	
	width:100%;
	/*float:left;*/
	background:#fff url(../images/bg1.jpg) repeat-x bottom left;
	padding:0 2%;
	display:inline-block;
	position:relative;
	
}
#mainArea, #bottom1, #bottom2, #foot, #signupArea
{
	width:100%;
	float:left;	
}
#signupArea
{
	width:100% !important;
	float:left !important;
	display:block;
	text-align:center;	
	position:relative;
	z-index:9999;
}
#signupArea #step1
{
	display:inline-block;
}
#signupSubline > span
{
	padding: 11px 0;	
}

#signupSubline > span {
    font-size: 20px;
}
#sitelogo
{
	/*width:100%;*/
	/*float:left;*/
	text-align:center;	
}
.btn1
{
	width:auto;	
}
/*Ribon code start here*/
.custom_ribbon
{
	width:100%;
	float:left;	
}
.ribbon-content
{
	letter-spacing:normal !important;
	font-size:24px;
	line-height:1.5;	
}
.ribbon {
 font-size: 25px !important;
 /* This ribbon is based on a 16px font side and a 24px vertical rhythm. I've used em's to position each element for scalability. If you want to use a different font size you may have to play with the position of the ribbon elements */

 width:90%;
    
 position: relative;
 background: #07bc65;
 color: #fff;
 text-align: center;
 padding: 15px 2em; /* Adjust to suit */
 margin: 2em auto 3em; /* Based on 24px vertical rhythm. 48px bottom margin - normally 24 but the ribbon 'graphics' take up 24px themselves so we double it. */
}
.ribbon:before, .ribbon:after {
 content: "";
 position: absolute;
 display: block;
 bottom: -25px;
 border: 1.5em solid #038b4a;
 z-index: -1;
}
.ribbon:before {
 left: -49px;
 border-right-width: 1.5em;
 border-left-color: transparent;
}
.ribbon:after {
 right: -49px;
 border-left-width: 1.5em;
 border-right-color: transparent;
}
.ribbon .ribbon-content:before, .ribbon .ribbon-content:after {
 content: "";
 position: absolute;
 display: block;
 border-style: solid;
 border-color: #024b28 transparent transparent transparent;
 bottom: -1em;
}
.ribbon .ribbon-content:before {
 left: 0;
 border-width: 1em 0 0 1em;
}
.ribbon .ribbon-content:after {
 right: 0;
 border-width: 1em 1em 0 0;
}
/*Ribon code end here*/
#signupArea label > span, #signupArea #step1 select
{
	font-family: 'Open Sans', sans-serif;
	font-weight:300;
	width:100%;
	float:left;	
}
#genderSelf option, #genderLooking option
{
	padding: 5px 10px;
}
#genderSelf, #genderLooking
{
	
	text-indent:0 !important;
	padding-left:10px !important;
}
#signupArea label > span
{
	font-size:22px;	
}
#step1-btn
{
	cursor:pointer;	
}
#signupArea label > span
{
	font-size:12px;	
	color:#F00;
}
#step2, #step3
{
	max-width:540px;
	margin:auto;
	padding:20px;	
}
#step2 span, #step3 span
{
	width:100%;
	float:left;
	padding:10px;
	font-size:18px;
	text-align:center;	
}
#step2 label, #step3 label
{
	width:100%;
	float:left;	
}
#step2 [type="text"], #step2 [type="password"], #step3 [type="text"], #step3 [type="password"]
{
	width:100%;
	float:left;
	padding:7px;
	font-weight: 0;
	font-size:20px;
}
#step2 span, #step3 span
{
	padding:0 !important;
	margin:0 !important;	
	font-size:16px;
}
#signupArea label span:first-child
{
	margin-bottom:15px !important;
	font-size:22px;	
	color:#000;
}
#signupArea [type="submit"]
{
	cursor:pointer;	
}
#bottom2 .centerwrapper
{
	
	
	text-align:center;	
}
#bottom2 .centerwrapper p
{
	width:100%;
	float:left;
	line-height:1.5;
	font-family: 'Open Sans', sans-serif;
	font-size:15px;	
}
.ui-dialog
{
	z-index:99999;	
}
.ui-dialog [type="text"]
{
	width:100%;
	float:left;
	margin-bottom:10px;
	border:1px solid #ccc;
	background:#eee;
	padding:10px;
	font-size:15px;	
	font-family: 'Open Sans', sans-serif;
	text-align:center;
}
#login
{
	height:auto !important;
	display:block;
	text-align:center;
	padding-bottom:15px;
	padding-top:15px;	
}
#signin-btn2
{
	background: #0a7aec none repeat scroll 0 0;
    color: #fff;
    font-size: 18px;
    padding: 10px 15px;
	font-size:15px;
	text-transform:uppercase;
    text-decoration: none;
	display:inline-block !important;
	cursor:pointer;
	outline:none;
	border:none;
}
#login a
{
	width:100%;
	float:left;
	padding-top:10px;
	color:#f7712c;
	text-decoration:none;
	text-align:center;
	font-size:15px;	
}
#step2 span.field-validation-message, #step3 span.field-validation-message, span.field-validation-message
{
	color:#F00;
	width:100% !important;
	float:left !important;
	margin-top:10px !important;	
}
/*for modal box start here*/
.modal-body
{
	padding:15px;
	width:100%;
	float:left;
	text-align:center;	
}
	.modal-body [type="text"], .modal-body [type="password"] 
	{
		font-family: 'Open Sans', sans-serif;
		width:100%;
		float:left;
		background:#eee;
		border:1px solid #ccc;
		font-size:15px;
		padding:10px 15px;
		color:#000;
		outline:none;
		margin-bottom:10px;	
	}
	.modal-body [type="submit"]
	{
		background: #0a7aec none repeat scroll 0 0;
    border: medium none;
    color: #fff;
    cursor: pointer;
    display: inline-block;
    font-size: 15px;
    outline: medium none;
    padding: 10px 15px;
    text-decoration: none;
    text-transform: uppercase;	
	}
	.submit_button
	{
		width:100%;
		float:left;
		text-align:center;
		margin-bottom:10px;	
	}
	#btn-login {margin-top: 10px;}
	.modal-header
	{
		position:relative;	
	}
	.btn_close
	{
		position:absolute;
		top:10px;
		right:10px;
		z-index:9999;	
	}
	h4.js-title-step span
	{
		display:none;
	}
	.modal-header
	{
		padding:8px 15px;
	}
	.modal-open .modal
	{
		z-index:99999;	
	}
.btn1:hover
{
	text-decoration:none !important;
	color:#FFF !important;	
}
@media screen and (max-width: 1160px) {
	#signInBar
	{
		width:100% !important;
		float:left !important;
		text-align:center !important;
	}
	#signup
	{
		margin:auto;
		display:inline-block;	
	}
	#sitelogo img
	{
		width:auto;	
	}
	.txtSignin
	{
		width:100% !important;
		float:left !important;
		text-align:center;	
	}
	#signup
	{
		display:block;
		text-align:center;	
	}
	#signInBar .btn1
	{
		display:inline-block;
		margin-top:15px;
		float:none;	
	}
	#sitelogo
	{
		width:100%;
		text-align:center;
		margin:auto;
		float:left;	
	}
	
}
@media screen and (max-width: 1024px) {
	#signupArea #step1 label
	{
		width:50%;
		margin:0;
		padding:0 10px;	
		float:left;
	}
	#signupArea .btn2
	{
		margin-top:38px;	
	}
	#signupArea
	{
		margin-bottom:50px;	
	}
}
@media screen and (max-width: 899px) {
	#steps li.step .steptitle
	{
		margin-top:12px;	
	}
	#steplist
	{
		width:100%;
		margin:auto;
		padding:0 15px;	
	}
	#steps li.step:last-child
	{
		background-image:none;	
	}
	.ui-widget-overlay
	{
		background:#000;	
	}
	.ui-dialog
	{
		 position:absolute;
    left: 50%;
    top: 50%;
    -ms-transform: translate(-50%,-50%);
    -moz-transform:translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);
     transform: translate(-50%,-50%);	
	}
	#bottom1
	{
		background-size:cover;	
	}
}	
@media screen and (max-width: 570px) {
	#signupHeader
	{
		width:75%;	
	}
	.ribbon-content
	{
		font-size:20px;	
	}
	.ribbon::before
	{
		left:-54px;	
	}
	.ribbon::after
	{
		right:-54px;	
	}
	#signupArea label span:first-child
	{
		font-size:20px;	
	}
	#signupArea label > span, #signupArea #step1 select
	{
		font-size:17px;	
	}
}
@media screen and (max-width: 380px) {
	.ribbon
	{
		padding:10px;	
	}
	.ribbon-content
	{
		font-size:18px;	
	}
	.ribbon::before
	{
		left:-54px;	
	}
	.ribbon::after
	{
		right:-56px;	
	}
	.js-title-step
	{
		font-size:16px;	
	}
}

@media screen and (max-width: 320px) {
	#step2, #step3
	{
		padding:20px 10px;	
	}
}

#scam_warning { color: #454545; background: rgba(210,233,56,0.8); font-size: 17pt; font-family: "Arial"; margin-top: 43px; margin-bottom: 30px;
	box-sizing: border-box; margin-left: auto; margin-right: auto; width: 60%; padding: 10px; }