.membership-options label[for="signup_optionid__5"] {
	background-color: rgba(255,215,0,0.2);
}
.membership-options label.selected[for="signup_optionid__5"] {
	background-color: #f2382d;
	border-color: rgba(255,215,0,0.6);
	transition:all 0.1s;
}

/* new */
body {
	background-color: #282a2c;
    color: #ffffff;
    font-family: 'Roboto', sans-serif;
    margin: 0;
    background: #000;
}
h2, h3 {
    text-transform: uppercase;
    font-weight: 300;
    padding-bottom: 20px;
    padding-top: 0;
    margin: 0;
}
h4{
	font-weight: 300;
	padding-top: 30px;
}

p {
    line-height: 1.6em;
}

img {
  	display: block;
  	border: none;
	-ms-interpolation-mode: bicubic;
}

a{
	color: #43bcff;
	text-decoration: none;
}

/*
 * -- Helpers --
 */

.pull-left {
  float: left !important;
}
.pull-right {
  float: right !important;
}

.center-block {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.left-space {
    padding-left: 10px;
}
/** 
 * Clear Fix
 */
.cf:before,
.cf:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.cf:after {
    clear: both;
}

/**
 * Clear Fix for IE 6/7 only
 */
.cf {
    *zoom: 1;
}

/** 
 * Layouts
 */

.content{
	
	max-width: 1625px;
	margin: 0 auto;
	position: relative;
}


/** 
 * Header
 */

.header{
	width: 100%;
	/* min-width: 768px; */
	z-index: 1000;
	box-shadow: 0 1px 1px rgba(0,0,0, 0.10);
	background-color: #000000;
	height: 75px;
	border-bottom: 1px solid #333;

}

	.header .logo{
		margin: 0 auto;
		padding: 0;
		width: 315px;
		position: relative;
		top: 15px;
		text-align: center;
		margin-bottom: 10px;
	}
	.header .header-links{
		position: absolute;
		top: 25px;
		right: 34px;
	}
	
	.member-login{
		font-size: 16px;
		line-height: 30px;		
		text-decoration: none;
		display: block;
		text-align: center;
		color: #fff;
		padding-right: 20px;
		padding-left: 20px;
		background: #f2382d;
		font-weight: 300;
		border: 1px solid #f2382d;
	}


.main.fullscreen-bg{
	background-position: center top;
	background-attachment: scroll;
	background-repeat: no-repeat;
	background-size: auto 100%; /* css3 */
}

.main{
	position: relative;
	padding-bottom: 40px;
	padding-top: 20px;
}

/** 
 * Signup Form
 */
 
.signup-form-wrapper {
	width: 50%;
	max-width: 550px;
	background-color: rgba(28, 28, 28, 0.86);
	margin: 0 auto;
}
.signup-form-wrapper form{
	padding: 30px;
}

.form-group{
	padding-bottom: 20px;
}
.form-group h3{
	font-size: 1.4em;
	text-transform: uppercase;
	letter-spacing: 0.1em;
}

.form-control-group{
	padding-bottom: 10px;
}
.form-control-group label{
	width: 20%;
	text-align: right;
	display: inline-block;
	padding-right: 2%;
}

.form-control-group label.error, .join_error {width: 100%; text-align: center; font-size: 14px; color: red}

.form-control-group input{
	width: 77%;
	text-align: left;
	display: inline-block;
	color: #3d3d3d;
	font-weight: 700;
}
.join-error{
	color: red;
	font-weight: 300;
	padding-left: 23%;
}

/** 
 * Membership Options
 */

ul.payment-methods,
ul.membership-options {
	list-style: none;
	padding: 0;
	margin: 0;	
}

ul.payment-methods li{
	line-height: 28px;
}
ul.payments { 
	list-style-type: none; 
	margin: 0px auto;
	padding: 0; 
/*	width: 225px; */
    height: 100px; }

ul.payments label { 
	position: relative; 
	float: left;
	margin: 0px auto; 
	width: 95%; 
	transition: all 0.1s; 
/*	padding-left: 23px;  */
	}

.membership-options label{
	border:  1px solid #E1E1E1;
	display:block;
	border-radius: 5px;
	position: relative;
	margin: 0 auto 6px;
	width: 95%;
	transition:all 0.1s;
}
.membership-options label.selected{
	border:  1px solid #c4851a;
	background-color: #ffaf2621;
/*	border-radius: 5px; */
	width: 100%;
	transition:all 0.1s;
	
}
.option-container{
	padding: 0;
	display: block;
	line-height: 1.4;
	padding: 3% 3% 3% 3%;
		
}
 */
/** 
 * Payment Options
 */

.payment-options{
	padding-bottom:20px;
}
.payment-options label input{
	margin-right: 20px;	
	margin-left: 20px;
}


/**
 * Font Awesome Radio Buttons 
 */
 
.radio-wrapper input[type=radio] {
  opacity: 0;
}


.radio-wrapper{
	position: relative;
	display: inline-block;
	vertical-align: middle;
	padding-right: 0.5em;

}

.radio-wrapper:before {
	    content: "\f1db";
	    font-family: FontAwesome;
	    font-style: normal;
	    font-weight: normal;
	    text-decoration: inherit;
	    color: #fff;
	    font-size: 18px;
	    position: absolute;
	    top: 0;
	    left: 0;
	    -webkit-font-smoothing: antialiased;
	    -moz-osx-font-smoothing: grayscale;
}

.selected .radio-wrapper:before {
	content: "\f192";
}


/**
 * membership title
 */

.membership-title-group{

	display: inline-block;
	vertical-align: middle;
	width: 60%;

}
	.membership-title{
		display: inline-block;
		font-size: 14px;
		line-height: 16px;
		font-weight: 700;
	}
	.membership-period{
		font-size: 16px;
	}
	.membership-type{
		
		font-size: 16px;
		line-height: 22px;
		font-weight: 300;
	}
	.membership-billing-details{
		font-size: 11px;
		color: #909090;
		line-height: 11px;
	}
	.selected .membership-billing-details{ 
		color: #fff;
	}

/**
 * membership price
 */
 
.price-box{
	display: inline-block;
	position: relative;
	vertical-align: middle;
	text-align: right;
	float: right;
}
.price{
	text-align: right;
	float: right;
}

.price-currency{
	font-size: 30px;
	line-height: 34px;
	vertical-align: middle;	
}
.price-whole{
	font-size: 34px;
	line-height: 30px;
	font-weight: 700;
	vertical-align: middle;	
}
.price-col{
	display:  inline-block;
	vertical-align: middle;	
}
.price-decimal{
	font-size: 14px;
	line-height: 14px;
	display: block!important;
	text-align: left;
}
.price-decimal::before{
	content:  ".";
}
.price-period{
	font-size: 11px;
	line-height: 15px;
	_margin-left: -16px;
	text-transform: capitalize;
	_position: relative;
	_top: 18px;
	display: block!important;
	text-align: left;
}

.submit-button{
	width: 100%;
	display: inline-block;
	text-transform: uppercase;
	background-color: #f2382d;
	border-radius: 5px;
	border: 1px solid #f2382d;
	font-weight: 800;
	font-size: 30px;
	vertical-align: middle;
	padding-top: 10px;
	padding-bottom: 10px; /*
	border-top: 1px solid #ffffff;
	border-left: 1px solid #ffffff; */
	border-bottom: 1px solid #000000;
	border-right: 1px solid #000000;
}
.submit-button i{
	font-size: 1.1em;
}
.promoSticker{
	opacity: 1;	
}

/** 
 * footer
 */
.footer {
	vertical-align: top;
    color: #888;
    text-align: center;
/*	padding-top: 50px;
	padding-left: 20px;
	padding-right: 20px; */
	font-weight:  300;
}
	.footer p{
		padding-top: 0;
		margin-top: 2px;
		margin-bottom: 2px;
		font-size: 13px;
	}
    .footer a {
        color: #ddd;
    }
    
    .footer-links{
    	display: inline-block;
    	font-size: 0.6rem;
    	list-style: none;
    	margin: 0px 0 10px;
    	padding: 0;
		text-transform: uppercase;
	}
    .footer-links li{
    	display: inline-block;
    	zoom: 1;
    	vertical-align: middle;
    	padding: 0;
    	margin: 20px 0 0;
    	height: 100%;
		border-right: 1px solid #8ba8b7;
	}
	.footer-links li:last-child{
		border-right: none;
	}
    .footer-links li a{
    	display: block;
    	white-space: nowrap;
    	text-align: center;
		padding: 1px 6px;
		text-decoration: none;
		color: #43bcff;
		color: #ffffff;
	}
	.footer-links li a:hover{
		color: #ffffff;
	}
	
	.fineprint{
		font-size: 11px;
		color: #888;
	}
.social {
	margin: 20px 10px 10px;
}

.social a {
	color: #fff;
	width: 32px;
	height: 32px;
	line-height: 30px;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
	border: 1.5px solid #fff;
	display: inline-block;
	text-align: center;
	margin-left: 6px;
}

.social a:first-child {
	margin-left: 0;
}

.social a:hover {
	border-color: #f2382d;
	background: #f2382d;
}
/*
 * -- TABLET/DESKTOP MEDIA QUERIES --
 */
@media (max-width: 1024px) {

	.signup-form-wrapper {
		width: 100%;
		max-width: 600px;
		background-color: rgba(0, 0, 0, 0.85);
		margin-right: auto;
		margin-left: auto;
	}
	.main.fullscreen-bg{
		background-image: none !important;
	}
	.main{
		padding-top: 20px;
		padding-bottom: 20px;	
	}
	.footer-links li{
		border-right: none;
		display: block;
	}
	.membership-options label{
		width:  100%;
	}
}
			
/*
 * -- Large PHONEs MEDIA QUERIES --
 */
@media (max-width: 786px) {
	.main{
		padding-top: 0px;
		padding-bottom: 0px;
		border-bottom: 1px solid #333;	
	}
	.main.fullscreen-bg{
		background-image: url(#);
		background-image: none;
		background-color: #000000;
	}
	
	.content{
		min-width: inherit;
	}
	
	.header{
		height: 64px;
	}

	.header .logo{
		width: 252px; /* height 44px*/
		top: 4px;
		left: 10px;
	}
	.header .header-links{
		position: absolute;
		top: 18px;
		right: 20px;
	}
	.member-login{
		font-size: 14px;
		line-height: 28px;	
		display: block;
	}
	 
	.submit-button{
		font-size: 20px;
	}
	 
	
}	
/*

 * -- SMALL PHONE MEDIA QUERIES --
 * small phones
 */
@media (max-width: 600px) {
	

	.membership-title-group {width: 60%}
	.promoSticker{
		opacity: 0;	
	}
	body{
		
	}
	.content{
		min-width: inherit;
	}
	
	.header{
		height: 54px;
	}
	.header .logo{
		width: 200px; /* height 33 */
		top: 8px;
		left: 10px;
	}  
	.header .header-links{
		position: absolute;
		top: 19px;	
	}
	.member-login{
		font-size: 14px;
		line-height: 28px;	
		display: block;
	}
	.member-login span{
		display: none;
	}
	
	.signup-form-wrapper form{
		padding: 20px 20px 0;
	}
	
	.form-group h3{
		font-size: 1.2em;
	}
	
	.form-control-group{
		padding-bottom: 10px;
	}
	.form-control-group label{
		width: inherit;
		display: none;
		text-align: left;
		padding: none;
	}
	.form-control-group input{
		width: 100%;
	} 
	.join-error{
		padding-left: 0;
	}
	
	.price{
		font-family: 'Open Sans Condensed', sans-serif;
	}
	.membership-title{
		font-size: 14px;
		line-height: 16px;
		font-weight: 700;
	}
	.membership-period{
		font-size: 16px;
	}
	.membership-type{
		/*display: block; */
		font-size: 16px;
		line-height: 22px;
		font-weight: 300;
	}
	.membership-billing-details{
		font-size: 10px;
		line-height: 10px;
		
	}

@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css);

$accent: #369; $speed: .3s; $ease: ease-in-out;

form {
  width: 100vw; height: 100vh;
  display: flex;
  flex-flow: column wrap;
  justify-content: center;
  align-items: center;
  .frame {
    display: flex;
    flex-flow: row nowrap;
    input { display: none; }
    label {
      cursor: pointer;
      position: relative;
      width: 30px; height: 30px;
      margin: 10px;
      background: $accent;
      transition: all $speed $ease;
      font-size: 12pt;
      color: #FFF;
      font-smoothing: antialiased;
      &.radio { border-radius: 100%; }
      &.check { border-radius: 5px; }
      .fa {
        position: absolute;
        top: 0; left: 0; right: 0; bottom: 0;
        opacity: 0;
        transform: scale(0);
        transition: all $speed $ease;
        line-height: 30px;
        text-align: center;
      }
    }
    input:checked + label { background: shade($accent,15%);
      .fa { opacity: 1; transform: scale(1); }
    }
  }
}
}	
@media (max-width: 380px) {
	.price-whole {
		font-size: 29px;
		line-height: 30px;
		font-weight: 700;
		vertical-align: middle;
	}
	.price-currency {
		font-size: 24px;
		line-height: 34px;
		vertical-align: middle;
 	}
	.price-decimal {
		font-size: 10px;
		line-height: 14px;
		display: block !important;
		text-align: left;
  	}
	.price-period {
		font-size: 8px;
		line-height: 15px;
		_margin-left: -16px;
		text-transform: capitalize;
		_position: relative;
		_top: 18px;
		display: block !important;
		text-align: left;
  	}
	.membership-period {
	  font-size: 15px;
  	}
	.membership-billing-details {
		font-size: 10px;
		line-height: 11px;
  	}
}