.signup-wrapper 
{
    width: 100%;
    min-height: 850px;
    background-image: url('../img/signup-bg.jpg');
    position: relative;
    
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.signup-wrapper.step2
{
    height: 1000px;
}

.school-input > span{
    border:1px solid transparent;
}
select.school{
    margin-bottom:10px;
}
/* ========= School user related ========= */

.signup-school-user-form label{
    line-height:2em;
}

/* ---------------------------------------- */


.signup-step-status-wrapper {
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 8px;
    height: 40px;
    margin: 10px auto;
    width: 495px;
    padding: 6px;
}

.status-step {
    float: left;
    height: 26px;
    font-family: GillSans;
    font-size: 15px;
    padding: 2px 3px 3px 2px;
    color: white;
}
.step-marker {
    font-family: GillSans-Light;
}

.status-step.step1 {
    padding-left: 3%;
    width: 37%;
}

.status-step.step2 {
    width: 27%;
	padding-left: 2%;	
	margin-left:2%;
}

.status-step.step3 {
    width: 30%;
	padding-left: 2%;
	margin-left:2%;
}

.status-step.active {
    background-color: #C61754;
    border-bottom-left-radius: 6px;
    border-top-left-radius: 6px;
    left: 0;
    position: relative;
    top: 0;
}

.status-step.active:after {
    border-bottom: 13px solid rgba(0, 0, 0, 0);
    border-left: 9px solid #c61754;
    border-top: 13px solid rgba(0, 0, 0, 0);
    content: "";
    left: 100%;
    position: absolute;
    top: 0;
}

.signup-title {
    /*margin: 14px 313px 0px;*/
    margin: 14px auto 0px;
    color: #C61754;
    font-family: GillSans; 
    text-align: center;
    font-size: 32px;
}
.signup-subtitle {
    /*margin: 0px 313px;*/ 
	max-width:500px;
	padding:0 20px;
    margin: 0 auto;
    color: white;
    font-family: GillSans-Light;
    text-align: center;
    font-size: 22px;
}

.signup-subtitle-step3 {
	max-width:640px;
	padding:0 20px;
    margin: 0 auto;
    color: white;
    font-family: GillSans-Light;
    text-align: center;
    font-size: 20px;
    line-height: 30px;
}
.signup-title-step3 {
    margin: 14px auto 0px;
    color: white;
    font-family: GillSans-Light;
    font-size: 50px;
    text-align: center;
}

.signup-form-wrapper {
    margin: 39px auto 180px auto;
    width: 500px;
    background-color: rgba(211, 214, 220, 0.85);
    border-radius: 10px;
    padding: 39px 33px 35px 35px;
}

.signup-form-wrapper.first-step {
    width: 100%;
    max-width: 480px;
    margin:49px auto 180px auto;
    padding: 0;
}


.membership-panels-holder {
    width: 100%;
    margin-left: 0; 
    margin-right: 0;
    position: relative;
    height: 460px;
}

.membership-panel {
    position: absolute;
    top: 0;
    height: 460px;
}

.membership-panel.active, .membership-panel:hover {
    height: 490px;
    top: -15px;
    z-index: 500000;
}
.membership-panel .top-triangles {
    position: absolute;
    width: 251px;
    height: 0;
    border-bottom: 15px solid rgba(196, 14, 75, 0.5);
    border-right: 13px solid transparent;
    border-left: 13px solid transparent;
    top: 0;
    left: -13px;
/*    display: block; */
	opacity:0;
}
.membership-panel .bottom-triangles {
    position: absolute;
    width: 251px;
    height: 0;
    border-top: 15px solid rgba(196, 14, 75, 0.5);
    border-right: 13px solid transparent;
    border-left: 13px solid transparent;
    bottom: 0;
    left: -13px;
/*    display: block; */
	opacity:0;
}

.membership-panel.active .top-triangles, 
.membership-panel.active .bottom-triangles,
.membership-panel:hover .top-triangles, 
.membership-panel:hover .bottom-triangles {
/*    display: block; */
	opacity:1;
}

.membership-panel-content {
    position: absolute; 
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; 
}

.membership-panel .icon-holder {
    height: 28%;
    
    background-position: center 25%;
    background-repeat: no-repeat;
    background-color: transparent;
    background-size: auto;
    text-align: center;
    padding-top: 35%;
}

.membership-panel .icon-description-block {
    font-size: 15px;
    font-family: GillSans;
    color: #817e7f;
    text-align: center;
    padding-top: 10%;
    height: 57%;
}

.membership-panel.active .description-extra, .membership-panel:hover .description-extra {
    color: #c61754;
}

.membership-panel .icon-description-block .description-item {
    line-height: 26px;
	padding:14px;
}

.membership-panel .choose-type-button-holder {
    text-align: center;
    /*margin-top:24%;*/
}
.membership-panel.active .choose-type-button-holder, .membership-panel:hover .choose-type-button-holder {
    padding-top: 10%;
}

.membership-panel .choose-type-button {
    background-color: #C61754;
    border: medium none;
    border-radius: 6px;
    color: #FFFFFF;
    font-family: GilLSans-Light;
    font-size: 19px;
    padding: 7px 50px;
    text-align: center;
}
.membership-panel.active .choose-type-button, .membership-panel:hover .choose-type-button {
    background-color: #8fc540;
}

.membership-panel .icon-holder .icon-title {
    font-family: GillSans;
    color: #c61754;
    font-size: 28px;
}
.membership-panel .icon-holder .icon-subtitle {
    font-family: GillSans;
    color: #817e7f;
    font-size: 12px;
}

.membership-panel.writer .icon-holder {
    background-image: url('../img/member-writer.png');
}
.membership-panel.reader-limited .icon-holder {
    background-image: url('../img/member-reader-limited.png');
}
.membership-panel.reader-under-18 .icon-holder {
    background-image: url('../img/member-reader-under-18.png');
}
.membership-panel.reader-over-18 .icon-holder {
    background-image: url('../img/member-reader-over-18.png');
}

.membership-panel.active .membership-panel-content, .membership-panel:hover .membership-panel-content {
    background-color: rgba(255, 255, 255, 0.9);
    padding-bottom: 15px;
    padding-top: 15px;
}

.signup-form-wrapper .name, .signup-form-wrapper .address {
    float: left;
    font-family: GillSans-Light;
    font-size: 18px;
    height: 39px;
    margin-right: 2%;
    padding-left: 15px;
    width: 67%;
    border: medium none;
    border-radius: 5px;
}

.address_wrapper
{
	overflow:hidden;
}

.address_wrapper .ui-selectmenu-button
{
	float:right;
}

.signup-form-wrapper .name {
    width: 100%;
}

.signup-form-wrapper input:focus, .signup-form-wrapper .ui-selectmenu-button.ui-state-focus
{
    border: 1px solid #c61754 !important;
}

.signup-form-wrapper input.error {
    background-color: rgba(255, 187, 187, 1);
    color: #dc5157;
    border: 1px solid #ff6363;
}

.signup-form-wrapper .country_error .ui-selectmenu-button {
    background-color: #FFBBBB !important;
    border: 1px solid #FF6363 !important;
}
.signup-form-wrapper .country_error .ui-selectmenu-button .ui-selectmenu-text {
    color: #EC828B !important;
}

.signup-form-wrapper .billing-city {
    float: right;
    font-family: GillSans-Light;
    font-size: 18px;
    height: 39px;
    padding-left: 15px;
    width: 68%;
    border: medium none;
    border-radius: 5px;
}
.signup-form-wrapper .credit-card-name {
    float: right;
    font-family: GillSans-Light;
    font-size: 18px;
    height: 39px;
    padding-left: 15px;
    width: 100%;
    border: medium none;
    border-radius: 5px;
    margin-top: 24px;
}
.signup-form-wrapper .state-postal-block .ui-selectmenu-button {
    width: 47% !important;
}
.signup-form-wrapper .postal-code {
    float: right;
    font-family: GillSans-Light;
    font-size: 18px;
    height: 39px;
    padding-left: 15px;
    width: 50%;
    border: medium none;
    border-radius: 5px;
}

.signup-form-wrapper .email, .signup-form-wrapper .g_name, .signup-form-wrapper .g_email, .signup-form-wrapper .password {
    height: 39px;
    width: 100%;
    font-family: GillSans-Light;
    font-size: 18px;
    padding-left: 15px;
    border: medium none;
    border-radius: 5px;
}

.input-error-popup {
    background-color: #EEEEEE;
    border: 1px solid #AAAAAA;
    left: 0;
    padding: 10px 20px;
    position: absolute;
    top: 44px;
    display: none;
}

.signup-form-wrapper .billing-address {
    height: 39px;
    width: 100%;
    font-family: GillSans-Light;
    font-size: 18px;
    padding-left: 15px;
    border: medium none;
    border-radius: 5px;
}

.guardian-block {
    margin-top: 30px;
}

.guargian-input-wrapper {
    position: relative;
    top: 0;
    left: 0;
}

.guargian-hint-square {
    position: absolute;
    right: 12px;
    top: 10px;
    width: 20px;
    height: 20px;
    background-color: transparent;
}

.guargian-hint-square:hover + .guargian-hint {
    display: block;
}

.guargian-hint {
    background-color: rgba(196, 14, 75, 0.75);
    border-radius: 10px;
    color: #FFFFFF;
    display: none;
    height: 40px;
    padding: 9px;
    position: absolute;
    right: 0;
    text-align: center;
    top: -35px;
    width: 260px;
}

.signup-form-wrapper .g_name {
    height: 39px;
    margin-bottom: 10px;
    background-image: url('../img/guardian-icon.png'), url('../img/question-icon.png');
    background-repeat: no-repeat, no-repeat;
    background-position: 3%, 97%;
    padding-left: 9%;
}

.signup-form-wrapper .g_email {
    height: 39px;
    margin-bottom: 10px;
    background-image: url('../img/guardian-icon.png');
    background-repeat: no-repeat;
    background-position: 3%;
    padding-left: 9%;
}

.signup-submit-button-holder {
    text-align: center;
}

.signup-submit-button-holder .submit {
    border: none;
    background-color: #C61754;
    color: white;
    font-family: GillSans;
    border-radius: 6px;
    font-size: 20px;
    height: 46px;
    width: 250px;
    margin: 25px 0 0 0;
}

.signup-form-wrapper .chb-wrapper {
    display: inline-block;
    float: right;
    width: 92%;
    font-family: GillSans-Light;
    font-size: 15px;
    margin-bottom: 14px;
}

.signup-form-wrapper .checkbox-block {
    margin-top: 19px;
}

.signup-form-wrapper .checkbox {
    display: inline;
    font-size: 10px;
    font-weight: 400;
    margin-left: -2px;
    margin-top: 0px;
    margin-botton: 0px;
}
input[type="checkbox"]{
    display: none;
}
input[type="checkbox"] + span:before {
    background: none repeat scroll 0 0 #FFFFFF;
    border: 1px solid #CDCDCD;
    border-radius: 3px;
    color: white;
    content: "\e013";
    cursor: pointer;
    display: inline-block;
    font-family: 'Glyphicons Halflings';
    height: 15px;
    margin-right: 5px;
    padding-left: 1px;
    padding-top: 0;
    width: 15px;
    line-height: 12px;
}
input[type="checkbox"] + span.error:before {
    background: none repeat scroll 0 0 #FFBBBB;
    border: 1px solid #FF6363;
    color: #FFBBBB;
}
input[type="checkbox"]:checked + span:before{
    content: "\e013";
    background: #99999E;
    color: #fff;
    cursor: pointer;
    margin-right: 5px;
    border: 1px solid #99999E;
}
input[type="checkbox"]+span{
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: pointer;
}
input[type="checkbox"]:checked+span{
    color: #43bb6a;
}

.signup-footer .footer-copyright {
    color: #A0A0A0;
}

.signup-footer .terms-menu-holder a {
    color: #A0A0A0;
}

.card-data-block {
    clear: both;
    margin-top: 77px;
}

.card-data-block .card-number {
    height: 39px;
    width: 59%;
    font-family: GillSans-Light;
    font-size: 18px;
    padding-left: 15px;
    border: medium none;
    border-radius: 5px;
}

.card-data-block .payment-icons {
    float: right;
    margin: 7px 12px;
}

.card-data-block label {
    font-family: GillSans;
    font-weight: 400;
    font-size: 15px;
    display: block;
}

.card-exp-block .ui-selectmenu-button {
    width: 50% !important;
    height: 30px;
}
.card-exp-block .ui-selectmenu-button:last-child {
    width: 47% !important;
}
.card-exp-block .ui-selectmenu-button span.ui-selectmenu-text {
    font-size: 15px;
    padding: 0.3em 2.1em 0.4em 0.8em;
}
.card-data-block .security-code {
    height: 39px;
    width: 70%;
    font-family: GillSans-Light;
    font-size: 18px;
    padding-left: 15px;
    border: medium none;
    border-radius: 5px;
}

.user-avatar-block  
{
    margin-top: 48px;
    margin-bottom: 180px;
}

.user-avatar-block .photo {
    margin-top: 48px;
    text-align: center;
}

.user-avatar-block .description {
    color: #C61754;
    font-family: GillSans-Light;
    font-size: 18px;
    line-height: 23px;
    margin-top: 20px;
    text-align: center;
}

.user-avatar-block .upload-button-holder {
    text-align: center;
    margin-top: 18px;
}
.user-avatar-block .upload-button-holder button {
    background: none repeat scroll 0 0 rgba(131, 191, 44, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    font-size: 32px;
    font-family: GillSans-Light;
    color: white;
    padding-left: 64px;
    height: 90px;
    left: 0;
    position: relative;
    top: 0;
    width: 405px;
}
.user-avatar-block .upload-button-holder button:before {
    border: 2px dashed #FFFFFF;
    border-radius: 6px;
    content: "";
    display: block;
    height: 59px;
    left: 23px;
    position: absolute;
    top: 14px;
    width: 59px;
}

.skip-text {
    text-align: center;
    color: white;
    font-family: GillSans-Light;
    font-size: 24px;
    margin-top: 21px;
}

.skip-text a {
    cursor: pointer;
}

.login-links-holder {
    text-align: center;
    margin-top: 10px;
}
.login-links-holder a:nth-of-type(2) {
  font-size: 1.4em;
    margin-top: 8px;
    display: block;
}
    
    
    
.login-links-holder a {
    color: #C61754;
    font-family: GillSans;
}

a.facebook {
	display: inline-block;
	background: #3B5998;
	color: #ffffff;
	border: none;
	font-family: GillSans;
	border-radius: 6px;
	font-size: 20px;
	width: 250px;
	margin: 0px 0px 25px 0px;
	padding: 9px 0px;
}
a.facebook:before {
	content: " ";
	display: inline-block;
	width: 15px;
	height: 15px;
	background: url("../img/facebook-icon-white.png");
	background-size: 100% 100%;
}

@media screen and (max-width: 640px) 
{
	.signup-step-status-wrapper {
		border: 1px solid rgba(255, 255, 255, 0.6);
		border-radius: 8px;
		height: 40px;
		margin: 10px auto;
		width: 440px;
		padding: 6px;
	}

	.status-step {
		width: 24%;
		float: left;
		margin-right: 4%;
		height: 26px;
		font-family: GillSans;
		font-size: 15px;
		padding: 2px 3px 3px 3px;
		color: white;
	}
	.step-marker {
		display:none;
	}

	.status-step.step1 {
		padding-left: 3%;
		width: 32%;
	}	
	
	.status-step.step2 {
		width: 25%;
	}

	.status-step.step3 {
		margin-right: 0px;
		width: 27%;
	}
	
	.status-step.step2.active {
		margin-left: -1%;
		width: 30%;
		margin-right: 2%;
	}

	.status-step.step2, .status-step.step3 {
		padding-left: 2%;
	}

	.signup-form-wrapper 
	{
		width: 460px;
	}
	
	.signup-form-wrapper .address 
	{
		width: 63%;
	}
	
}