/* ==========================================================================
   Base styles
   ========================================================================== */

html,.list-inline > li {font-size: 12px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);}
body {line-height: 1.4; color: #fff; background-color: #181919; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; font-family: 'Open Sans', sans-serif;}
*, *:before, *:after {-webkit-box-sizing: inherit; -moz-box-sizing: inherit; box-sizing: inherit; }
a {color: inherit; text-decoration: none;}
a:focus, a:hover {text-decoration: underline;}
ul {padding: 0;}
input, button, select, textarea {font-family: inherit; font-size: inherit; line-height: inherit;}
figure {margin: 0;}
p {margin: 0 0 10px;}
small {font-size: 70%;}
input[type="radio"], input[type="checkbox"] {margin: 4px 0 0; margin-top: 1px \9; line-height: normal;}
input[type="file"]:focus, input[type="radio"]:focus, input[type="checkbox"]:focus {outline: 5px auto -webkit-focus-ring-color; outline-offset: -2px; }
/*
 * Remove text-shadow in selection highlight:
 * https://twitter.com/miketaylr/status/12228805301
 *
 * These selection rule sets have to be separate.
 * Customize the background color to match your design.
 */
::-moz-selection {background: #b3d4fc; text-shadow: none; }
::selection {background: #b3d4fc; text-shadow: none; }
/* * A better looking default horizontal rule */
hr {display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }
/* * Remove the gap between audio, canvas, iframes, * images, videos and the bottom of their containers: * https://github.com/h5bp/html5-boilerplate/issues/440 */
audio, canvas, iframe, img, svg, video {vertical-align: middle; }
/* * Remove default fieldset styles. */
fieldset {border: 0; margin: 0; padding: 0; }
/* * Allow only vertical resizing of textareas. */
textarea {resize: vertical; }
/* * Allow images to be responsive. */
img { max-width: 100%; height: auto; vertical-align: top;}

/* ==========================================================================
   Browser Upgrade Prompt
   ========================================================================== */

.browserupgrade {margin: 0.2em 0; background: #ccc; color: #000; padding: 0.2em 0; }

@font-face {
    font-family: 'back_to_black';
    src: url('http://affibe.com/landing/fonts/darkfling/back-to-black-demo.regular-webfont.woff2') format('woff2'),
         url('http://affibe.com/landing/fonts/darkfling/back-to-black-demo.regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

 /*####    ########## ####   #### ####      ##########
####   ### ########## ####   #### ####      ##########
####          ####     #### ####  ####      ####
  ####        ####       #r3d#    ####      ##########
	####      ####        ###     ####      ##########
	  ####    ####        ###     ####      ####
###   ####    ####        ###     ######### ##########
  ######      ####        ###     ######### ########*/

@media only screen and (min-width: 767px) {
	html, body {min-height: 100%; height: 100%;}
	body {
		display: -webkit-flex;
		display: -moz-flex;
		display: -ms-flex;
		display: -o-flex;
		display: flex;
		align-items: center;
		justify-content: center;
		background: url(../bg.jpg) no-repeat center;
		-webkit-background-size: cover;
		-moz-background-size: cover;
		background-size: cover;
		overflow: hidden;
	}
	.section-area {width: 100%;}
}
/*Form*/
.content-area {
	position: relative;
	background-image: linear-gradient(to bottom, rgba(140,109,103,.6),rgba(139,108,102,.6), rgba(48,58,90,.9));
	-webkit-background-size: cover;
	-moz-background-size: cover;
	background-size: cover;
}
@media only screen and (min-width: 767px) {
	.content-area:before {
		content: '';
		display: block;
		position: absolute;
		top: 0;
		right: 0;
		width: 50%;
		height: 100%;
		background: #ecf0f3;
		z-index: 0;
	}
}

.form-block {background: #ecf0f3; position: relative; z-index: 1; height: 100%;}

.form-head {border-bottom: 1px solid #dfe3e6; color: #383838; overflow: hidden;}
.form-head h2 {font-size: 1.5em; line-height: 1.2;}
.form-head h2 span, .form-body > p span {color: #ff3366;}

.form-body {color: #7d7d7d; padding: 2.8125em 3em 4em;}
.form-body > p {}

.radiobox input[type='radio'] {display: none; color: #242424;}
.radiobox input[type='radio'] + .custom-radio {position: relative;font-size: 1.25em;font-weight: 700;padding: 0.4em;line-height: 1;cursor: pointer;background: #fff;/* min-width: 220px; */display: block;-webkit-border-radius: 1em;-moz-border-radius: 1em;border-radius: 1em;-webkit-box-shadow: 0.5em 0.5em 1em rgba(0,0,0,.25);box-shadow: 0.5em 0.5em 1em rgba(0,0,0,.25); color: #fff;}
.radiobox input[type='radio'] + .custom-radio[for^='yes'] {background: #ff3366;}
.radiobox input[type='radio'] + .custom-radio[for^='no'] {background: #0c9bde;}
.form-body form .options li {padding: 5px 20px;vertical-align: middle;width: 50%;}

.question {text-align: center; margin-top: 1.4em; color: #242424; text-transform: uppercase;}
.question h3 {font-size: 1.275em; margin: 0; line-height: 1.2; font-weight: 700; height: 4.8em; }

.form-body .button-set {max-width: 300px; margin: 2.3em auto;}
#abp-questions .button-set {display: none;}
.form-body .button-set .btn {display: block; width: 100%; }
.form-body .button-set .btn:hover {text-decoration: none; }
.form-body .questionnaire {margin: 0;}
.form-body .questionnaire > li:not(.active) {display: none;}
.question-progress-block {margin-top: 2em; padding: 0.5em 4em;}
.question-progress {position: relative;}
.question-list {
	position: relative;
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: 0;
}
#progress-state {
	position: absolute;
	top: 50%;
	left: 0;
	margin-top: -1px;
	display: block;
	content: '';
	height: 1px;
	width: 100%;
	background: #898989;
}
#progress-state i {
	position: absolute;
	top: 0;
	left: 0;
	width: 0%;
	height: 100%;
	background: #ff9b00;
	-webkit-transition: all 0.3s cubic-bezier(.46,.13,.42,.89);
	-moz-transition: all 0.3s cubic-bezier(.46,.13,.42,.89);
	-ms-transition: all 0.3s cubic-bezier(.46,.13,.42,.89);
	-o-transition: all 0.3s cubic-bezier(.46,.13,.42,.89);
	transition: all 0.3s cubic-bezier(.46,.13,.42,.89);
}
.question-list li span {
	position: relative;
	width: 0.6em;
	height: 0.6em;
	display: block;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
	color: #6d6b6b;
	font-weight: 700;
	font-size: 1.25em;
	text-align: center;
	line-height: 1.5em;
	z-index: 1;
	color: transparent;
	background: #ff3366;
}

.question-list li.active span {
	width: 0.6em;
	height: 0.6em;
	font-size: 1.875em;
	-webkit-box-shadow: 0 0 0.7em rgba(255,51,102,0.5);
	box-shadow: 0 0 0.7em rgba(255,51,102,0.5);
	color: #fff;
	line-height: 1.1;
	text-indent: 1px;
}
.question-list li.active ~ li span {
	background: #fff;
	color: #6d6b6b;
	font-size: 1.25em;
	border: 2px solid #898989;
}
.question-list li.active span:before,
.question-list li.active ~ li span:before {
	opacity: 0;
}

@media only screen and (max-width: 767px) {
	.question-progress-block {padding: 0.5em 1em;}
	.header-logo {max-width: 240px; margin: auto;}
}

.form-foot {color: #939393;overflow: hidden; padding: 0 1em;}
@media only screen and (min-width: 768px) {
	.form-foot {font-size: 0.875em; position: absolute; bottom: 0; left: 0; width: 100%;}
}

.form-body.accept {padding: 1.25em 2.5em 4em}
.form-body.accept h2 {color: #474747; margin-bottom: 2em;}
.form-body.accept h2 .fa {color: #ff3366; margin-right: 0.4em; }
.form-body.accept h2 span {color: #ff9000;}
.form-body.accept h3 {color: #303030;}

/*Timer*/
.timer {margin: 1.75em 0 2em; color: #525252;}
.timer > p:first-child {text-transform: uppercase; font-weight: 600;}
.timer > p:first-child {margin-top: 1.5em;}
#timer {font-size: 4.125em; font-weight: 300;
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	justify-content: center;
	line-height: 1;
	align-items: center;
	color: #ffc600;
}
#timer i {font-style: normal; font-weight: 300; border: 1px solid #d7d7d7; min-width: 0.6667em; text-align: center;}
#timer i.mid {font-family: Arial;}
.form-body.accept span.btn {background: #303030;}

/*register*/
.form-body.register {padding: 0 2.5em 3em}
.register h3 {color: #ff3366; font-size: 1.5em; margin: 0.85em 0 0.4em;}
.register p {font-size: 0.9em;}
.form-body.register form {margin-top: 3.5em; padding: 0 1em;}

/*Form*/
form .field {margin-top: 10px;}

/*Left Side*/
.navigation ul {margin-top: 0; margin-bottom: 0;}
@media only screen and (min-width: 768px) {.navigation ul li a {font-size: 0.85em;}
}
.navigation ul li .fa {padding: 0 5px;}
.profile-block {padding: 1em; position: relative; overflow: hidden;}
.profile-block .verify {margin-top: 2em;}
.profile .profile-info {text-align: center; margin: 3em auto 0; max-width: 250px;}
.profile figure img {border: 2px solid #fff; -webkit-border-radius: 7px; -moz-border-radius: 7px; border-radius: 7px;}
.profile .profile-info .info {text-align: left; padding: 0 5px; font-weight: 700;}
.profile .profile-info .info .fa {margin-right: 1em; min-width: 1em; text-align: center;}
.profile .profile-info .info span {color: #ff3366;}

.logo {
	font-family: 'back_to_black';
	-webkit-border-radius: 0.5em;
	-moz-border-radius: 0.5em;
	border-radius: 0.5em;
	background: #ff3366;
	border: 2px solid #fff;
	-webkit-box-shadow: 0.4em 0.3em 2em rgba(0,0,0,.25);
	box-shadow: 0.4em 0.3em 2em rgba(0,0,0,.25);
	/*max-width: 85px;*/
	font-size: 1.875em;
	text-align: center;
}
.logo span {
	display: block;
	line-height: 1.2;
	padding: 0.25em 0.6em 0.15em;
}
@media only screen and (min-width: 767px) {
	.logo {
		position: absolute;
		top: -1%;
		left: 50%;
		-webkit-transform: translate(-50%,-50%);
		-moz-transform: translate(-50%,-50%);
		-ms-transform: translate(-50%,-50%);
		-o-transform: translate(-50%,-50%);
		transform: translate(-50%,-50%);
		z-index: 2;
	}
}

/*verify*/
.verify .form-control {
	border-color: #fff;
	color: #fff;
}
.verify .btn {
	padding: 6px 12px;
	font-size: 14px;
	display: block;
	width: 100%;
}
.profile .verify h2 {
	text-transform: uppercase;
	margin: 0.4em 0 0.3em;
	font-size: 1.625em;
	font-weight: 400;
}
.profile .verify .profile-info {
	max-width: 200px;
	margin-top: 1.5em;
	margin-bottom: 1em;
}
#abp-verify  {
	padding: 0 2em 1em;
}
.no-charge {
	text-transform: uppercase;
	font-weight: 700;
	background: #ff9000;
	padding: 0.75em 5em;
	text-align: center;
	position: absolute;
	top: 2em;
	right: -5em;
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	transform: rotate(45deg);
}
.form-body.verify {
	padding-top: 1em;
	padding-bottom: 0.5em;
}
.form-body.verify h4 {color: #969696; margin: 0; font-size: 1.25em;}
.form-body.verify h3 {color: #ff9000; font-size: 1.75em; text-transform: uppercase; margin: 0.75em 0;}
.verify-block {padding-bottom: 4em}
.verify-block ul {border-top: 1px solid #d7dbde; color: #565656; font-weight: 700; text-transform: uppercase;}
.verify-block .feature-list {border-bottom: 1px solid #d7dbde; margin-bottom: 1.8em;}
.verify-block ul li {width: 40%; text-align: center; font-size: 18px;}
.verify-block ul.dotted-list li {color: #ff3366;}
.verify-block ul.dotted-list li:before {
	content: '';
	display: inline-block;
	width: 5px;
	height: 5px;
	-ms-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
	background: #ff3366;
	vertical-align: middle;
	margin: -2px 0.4em 0 0;
}
.verify-block .notice {
	padding: 0 2em;
	color: #565656;
}
.verify-block .notice p {
	font-size: 0.8em;
}
.verify-block .notice h4 {
	text-transform: uppercase;
	margin-bottom: 0;
}


/*Responsive*/
@media only	screen and (max-width: 1199px) {
	.verify-block ul li {font-size: 16px;}
	.verify-block .notice {padding: 0 4.2em;}
}
@media only	screen and (max-width: 1023px) {
	.verify-block ul li {font-size: 12px;}
	.verify-block .notice {padding: 0 5em;}
}
@media only	screen and (max-width: 767px) {
	body {overflow: auto;}
	.form-head, .form-body.verify h4 {display: none;}
	header {background: #ecf0f3;text-align: center;padding: 1em 0 3em;position: relative;z-index: 1; color: #4a4a4a;}
	header h1 {margin: 0; font-size: 1.6em;}
	header h1 span {color: #ff3366;}
	header h4 {margin: 1em 0 0.5em; border-top: 1px solid #dfe3e6; padding-top: 0.75em;}
	.logo {max-width: 250px; margin: -25px auto 0;position: relative;z-index: 1;}
	.logo span {padding: 0.25em 0.75em  0.15em;}
	.profile-block {margin-top: -3em;}
	.form-body {overflow: hidden;}
	.form-block .form-body {padding-left: 2em; padding-right: 2em;}
	.form-body.register form {margin-top: 2em;}
	.profile .profile-info .info {padding: 0 2em;}
	.profile .profile-info .info li {font-size: 14px;}
	.verify-block ul li {width: 45%;}
	.verify-block .notice {padding: 0 1.5em; }
	.profile .verify h2 {margin: 2.4em 0 0.3em;}
}

@media only screen and (min-width: 768px) {
	header {display: none;}
	.form-head {display: block;}
}

/* ==========================================================================
   Helper classes
   ========================================================================== */
.clearfix:after {visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }
* html .clearfix { height: 1%; }
.clearfix { display: block; }
.block > * {display: block; width: 100%;}
.list-unstyled {padding-left: 0; list-style: none;}
.list-inline {padding-left: 0; list-style: none; font-size: 0;}
.list-inline > li {display: inline-block;}
.img-responsive {display: block; max-width: 100%; height: auto;}
.text-left {text-align: left;}
.text-right {text-align: right;}
.text-center {text-align: center;}
.text-justify {text-align: justify;}
.text-nowrap {white-space: nowrap;}
.text-lowercase {text-transform: lowercase;}
.text-uppercase {text-transform: uppercase;}
.text-capitalize {text-transform: capitalize;}
.form-control {
	display: block;
	width: 100%;
	height: 34px;
	padding: 6px 12px;
	font-size: 14px;
	line-height: 1.42857143;
	color: #a2a2a2;
	background-color: transparent;
	background-image: none;
	border: 1px solid #898989;
	-webkit-border-radius: 5em;
	-moz-border-radius: 5em;
	border-radius: 5em;
	-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
	box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
	-webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
	-o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
	transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}
.form-control:focus {
  border-color: #ff3366;
  outline: 0;
}
.form-control::-moz-placeholder {color: #999; opacity: 1; }
.form-control:-ms-input-placeholder {color: #999; }
.form-control::-webkit-input-placeholder {color: #999; }
.form-control::-ms-expand {border: 0; background-color: transparent; }
.form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control {background-color: #eeeeee; opacity: 1; }
.form-control[disabled], fieldset[disabled] .form-control {cursor: not-allowed; }
textarea.form-control {height: auto;}
input[type="search"] {-webkit-appearance: none; }
.btn {
	display: inline-block;
	margin-bottom: 0;
	font-weight: 700;
	text-align: center;
	vertical-align: middle;
	touch-action: manipulation;
	cursor: pointer;
	border: none;
	white-space: nowrap;
	padding: 0.9em 5em;
	font-size: 1.25em;
	line-height: 1.42857143;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	-webkit-border-radius: 1em;
	-moz-border-radius: 1em;
	border-radius: 1em;
	text-transform: capitalize;
	background: #ff9000;
	color: #fff;
	-webkit-box-shadow: 0.2em 0.2em 0.75em  rgba(0,0,0,.3);
	-moz-box-shadow: 0.2em 0.2em 0.75em  rgba(0,0,0,.3);
	box-shadow: 0.2em 0.2em 0.75em  rgba(0,0,0,.3);
}
.btn:focus, .btn:hover {text-decoration: none; background: #ff7700;}
.btn:focus,
.btn:active:focus,
.btn.active:focus,
.btn.focus,
.btn:active.focus,
.btn.active.focus {
	outline: 5px auto -webkit-focus-ring-color;
	outline-offset: -2px;
}
.nav > li > a {position: relative; display: block; padding: 10px 15px;}
.center-block {display: block; margin-left: auto; margin-right: auto; }
.pull-right {float: right !important; }
.pull-left {float: left !important; }
.hide {display: none !important; }
.show {display: block !important; }
.row.no-gutter > [class^='col-'] {padding: 0;}
/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   These examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */

@media only screen and (min-width: 768px) {
	body,.list-inline > li {font-size: 12px;}
}

@media only screen and (min-width: 1024px) {
	body,.list-inline > li {font-size: 14px;}
}

@media only screen and (min-width: 1200px) {
	body,.list-inline > li {font-size: 16px;}
}