@charset "UTF-8";

@font-face {
	font-family: 'amcap_eternalregular';
	src: url('../../shared/fonts/amcap_eternal-webfont.woff2') format('woff2'),
		url('../../shared/fonts/amcap_eternal-webfont.woff') format('woff');
	font-weight: normal;
	font-style: normal;
}

#volume {
	position: fixed;
	right: 1em;
	bottom: 1em;
	background-color: rgba(211, 1, 8, 0.7);
	text-align: center;
	cursor: pointer;
	z-index: 100;
	width: 12px;
	height: 12px;
	box-shadow: rgb(0, 0, 0) 0px 0px 3px;
	padding: 10px;
	border-radius: 3px;
	border-width: 1px;
	border-style: solid;
	border-color: rgb(0, 0, 0);
	border-image: initial;
	-moz-box-sizing: content-box;
	-webkit-box-sizing: content-box;
	box-sizing: content-box;
}

#volume img {
	width: 100%;
	-moz-box-sizing: content-box;
	-webkit-box-sizing: content-box;
	box-sizing: content-box;
	line-height: 0;
}

#rating {
	position: fixed;
	left: 1em;
	bottom: 1em;
}

/* Reset */
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
	display: block;
}

body {
	font-family: amcap_eternalregular, serif;
	line-height: 1;
}

ol,
ul {
	list-style: none;
}

blockquote,
q {
	quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
	content: '';
	content: none;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

body {
	-webkit-text-size-adjust: none;
}

/* Box Model */

*,
*:before,
*:after {
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

/* Basic */

@media screen and (max-width: 479px) {
	html,
	body {
		min-width: 320px;
	}
}

body.is-loading *,
body.is-loading *:before,
body.is-loading *:after {
	-moz-animation: none !important;
	-webkit-animation: none !important;
	-ms-animation: none !important;
	animation: none !important;
	-moz-transition: none !important;
	-webkit-transition: none !important;
	-ms-transition: none !important;
	transition: none !important;
}

html {
	height: 100%;
}

body {
	height: 100%;
	background-color: #000;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: top center;
	background-attachment: fixed;
}

/*
body:after {
	content: '';
	display: block;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: inherit;
	opacity: 0;
	z-index: 1;
	background-color: #ffffff;
	background-repeat: repeat, no-repeat;
	background-size: 100px 100px, cover;
	background-position: top left, center center;
	-moz-transition: opacity 1.75s ease-out;
	-webkit-transition: opacity 1.75s ease-out;
	-ms-transition: opacity 1.75s ease-out;
	transition: opacity 1.75s ease-out;
}

body.is-loading:after {
	opacity: 1;
}
*/

/* Type */

body,
input,
select,
textarea {
}

@media screen and (max-width: 1679px) {
	body,
	input,
	select,
	textarea {
		font-size: 11pt;
	}
}

@media screen and (max-width: 479px) {
	body,
	input,
	select,
	textarea {
		font-size: 10pt;
	}
}

a {
	-moz-transition: color 0.2s ease, border-color 0.2s ease;
	-webkit-transition: color 0.2s ease, border-color 0.2s ease;
	-ms-transition: color 0.2s ease, border-color 0.2s ease;
	transition: color 0.2s ease, border-color 0.2s ease;
	color: inherit;
	text-decoration: none;
}

a:before {
	-moz-transition: color 0.2s ease, text-shadow 0.2s ease;
	-webkit-transition: color 0.2s ease, text-shadow 0.2s ease;
	-ms-transition: color 0.2s ease, text-shadow 0.2s ease;
	transition: color 0.2s ease, text-shadow 0.2s ease;
}

a:hover {
	color: #f4f1ee;
}

em,
i {
	font-style: italic;
}

p {
	line-height: 1.4;
	margin: 1.5em 0 2.5em;
	font-weight: 400;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	color: #313f47;
	line-height: 1;
	margin: 0 0 0.75em 0;
}

h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a {
	color: inherit;
	text-decoration: none;
}

h1 {
	font-size: 1.85em;
	letter-spacing: 0.22em;
	margin: 0 0 0.525em 0;
	line-height: 1;
}

h2 {
	font-size: 1.25em;
}

h3 {
	font-size: 1em;
}

h4 {
	font-size: 1em;
}

h5 {
	font-size: 1em;
}

h6 {
	font-size: 1em;
}

@media screen and (max-width: 479px) {
	h1 {
		font-size: 1.65em;
	}
}

sub {
	font-size: 0.8em;
	position: relative;
	top: 0.5em;
}

sup {
	font-size: 0.8em;
	position: relative;
	top: -0.5em;
}

hr {
	border: 0;
	border-bottom: solid 1px #c8cccf;
	margin: 3em 0;
}

/* Form */

form {
	margin: 0 0 1.5em 0;
}

form > .field {
	margin: 0 0 1.5em 0;
}

form > .field > :last-child {
	margin-bottom: 0;
}

label {
	color: #313f47;
	display: block;
	font-size: 0.9em;
	margin: 0 0 0.75em 0;
}

input[type='text'],
input[type='password'],
input[type='email'],
input[type='tel'],
select,
textarea {
	-moz-appearance: none;
	-webkit-appearance: none;
	-ms-appearance: none;
	appearance: none;
	border-radius: 4px;
	border: solid 1px #c8cccf;
	color: inherit;
	display: block;
	outline: 0;
	padding: 0 1em;
	text-decoration: none;
	width: 100%;
}

input[type='text']:invalid,
input[type='password']:invalid,
input[type='email']:invalid,
input[type='tel']:invalid,
select:invalid,
textarea:invalid {
	box-shadow: none;
}

input[type='text']:focus,
input[type='password']:focus,
input[type='email']:focus,
input[type='tel']:focus,
select:focus,
textarea:focus {
	border-color: #f4f1ee;
}

.select-wrapper {
	text-decoration: none;
	display: block;
	position: relative;
}

/* .select-wrapper:before { 
			content: "";
			-moz-osx-font-smoothing: grayscale;
			-webkit-font-smoothing: antialiased;
			font-family: FontAwesome;
			font-style: normal;
			font-weight: normal;
			text-transform: none !important;
		} */

.select-wrapper:before {
	display: block;
	height: 2.75em;
	line-height: 2.75em;
	pointer-events: none;
	position: absolute;
	right: 0;
	text-align: center;
	top: 0;
	width: 2.75em;
}

.select-wrapper select::-ms-expand {
	display: none;
}

input[type='text'],
input[type='password'],
input[type='email'],
select {
	height: 2.75em;
}

textarea {
	padding: 0.75em 1em;
}

input[type='checkbox'],
input[type='radio'] {
	-moz-appearance: none;
	-webkit-appearance: none;
	-ms-appearance: none;
	appearance: none;
	display: block;
	float: left;
	margin-right: -2em;
	opacity: 0;
	width: 1em;
	z-index: -1;
}

input[type='checkbox'] + label,
input[type='radio'] + label {
	text-decoration: none;
	color: #414f57;
	cursor: pointer;
	display: inline-block;
	font-size: 1em;
	font-weight: 300;
	padding-left: 2.4em;
	padding-right: 0.75em;
	position: relative;
}

/* input[type="checkbox"] + label:before,
			input[type="radio"] + label:before { 
				-moz-osx-font-smoothing: grayscale;
				-webkit-font-smoothing: antialiased;
				font-family: FontAwesome;
				font-style: normal;
				font-weight: normal;
				text-transform: none !important;
			} */

input[type='checkbox'] + label:before,
input[type='radio'] + label:before {
	border-radius: 4px;
	border: solid 1px #c8cccf;
	content: '';
	display: inline-block;
	height: 1.65em;
	left: 0;
	line-height: 1.58125em;
	position: absolute;
	text-align: center;
	top: 0.15em;
	width: 1.65em;
}

input[type='checkbox']:checked + label:before,
input[type='radio']:checked + label:before {
	color: #f4f1ee;
	content: '\f00c';
}

input[type='checkbox']:focus + label:before,
input[type='radio']:focus + label:before {
	border-color: #f4f1ee;
}

input[type='checkbox'] + label:before {
	border-radius: 4px;
}

input[type='radio'] + label:before {
	border-radius: 100%;
}

::-webkit-input-placeholder {
	color: #616f77 !important;
	opacity: 1;
}

:-moz-placeholder {
	color: #616f77 !important;
	opacity: 1;
}

::-moz-placeholder {
	color: #616f77 !important;
	opacity: 1;
}

:-ms-input-placeholder {
	color: #616f77 !important;
	opacity: 1;
}

.formerize-placeholder {
	color: #616f77 !important;
	opacity: 1;
}

/* Icon */

.icon {
	text-decoration: none;
	position: relative;
	border-bottom: none;
}

/* .icon:before { 
			-moz-osx-font-smoothing: grayscale;
			-webkit-font-smoothing: antialiased;
			font-family: FontAwesome;
			font-style: normal;
			font-weight: normal;
			text-transform: none !important;
		} */

.icon > .label {
	display: none;
}

/* List */

ol {
	list-style: decimal;
	margin: 0 0 1.5em 0;
	padding-left: 1.25em;
}

ol li {
	padding-left: 0.25em;
}

ul {
	list-style: disc;
	margin: 0 0 1.5em 0;
	padding-left: 1em;
}

ul li {
	padding-left: 0.5em;
}

ul.alt {
	list-style: none;
	padding-left: 0;
}

ul.alt li {
	border-top: solid 1px #c8cccf;
	padding: 0.5em 0;
}

ul.alt li:first-child {
	border-top: 0;
	padding-top: 0;
}

ul.icons {
	cursor: default;
	list-style: none;
	padding-left: 0;
	margin-top: -0.675em;
}

ul.icons li {
	display: inline-block;
	padding: 0.675em 0.5em;
}

ul.icons li a {
	text-decoration: none;
	position: relative;
	display: block;
	width: 3.75em;
	height: 3.75em;
	border-radius: 100%;
	border: solid 1px #c8cccf;
	line-height: 3.75em;
	overflow: hidden;
	text-align: center;
	text-indent: 3.75em;
	white-space: nowrap;
}

/* ul.icons li a:before { 
						-moz-osx-font-smoothing: grayscale;
						-webkit-font-smoothing: antialiased;
						font-family: FontAwesome;
						font-style: normal;
						font-weight: normal;
						text-transform: none !important;
					} */

ul.icons li a:before {
	color: #ffffff;
	text-shadow: 1.25px 0px 0px #c8cccf, -1.25px 0px 0px #c8cccf, 0px 1.25px 0px #c8cccf, 0px -1.25px 0px #c8cccf;
}

ul.icons li a:hover:before {
	text-shadow: 1.25px 0px 0px #f4f1ee, -1.25px 0px 0px #f4f1ee, 0px 1.25px 0px #f4f1ee, 0px -1.25px 0px #f4f1ee;
}

ul.icons li a:before {
	position: absolute;
	top: 0;
	left: 0;
	width: inherit;
	height: inherit;
	font-size: 1.85rem;
	line-height: inherit;
	text-align: center;
	text-indent: 0;
}

ul.icons li a:hover {
	border-color: #f4f1ee;
}

@media screen and (max-width: 479px) {
	ul.icons li a:before {
		font-size: 1.5rem;
	}
}

ul.actions {
	cursor: default;
	list-style: none;
	padding-left: 0;
}

ul.actions li {
	display: inline-block;
	padding: 0 0.75em 0 0;
	vertical-align: middle;
}

ul.actions li:last-child {
	padding-right: 0;
}

dl {
	margin: 0 0 1.5em 0;
}

dl dt {
	display: block;
	margin: 0 0 0.75em 0;
}

dl dd {
	margin-left: 1.5em;
}

/* Button */

input[type='submit'],
input[type='reset'],
input[type='button'],
button,
.button {
	-moz-appearance: none;
	-webkit-appearance: none;
	-ms-appearance: none;
	appearance: none;
	-moz-transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.2s ease-in-out;
	-webkit-transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.2s ease-in-out;
	-ms-transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.2s ease-in-out;
	transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.2s ease-in-out;
	display: inline-block;
	height: 4em;
	line-height: 2.75em;
	padding: 0 1.5em;
	background-color: #fefefe;
	border-radius: 4px;
	border: solid 2px #c8cccf;
	color: #414f57 !important;
	cursor: pointer;
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
	text-transform: uppercase !important;
	font-size: 1em;
	font-weight: 800;
	min-width: 25%;
}

input[type='submit_green']:hover,
input[type='reset']:hover,
input[type='button']:hover,
button:hover,
.button:hover {
	border-color: #32332d;
	color: #32332d !important;
	background-color: #b0e201;
}

input[type='submit'].icon,
input[type='reset'].icon,
input[type='button'].icon,
button.icon,
.button.icon {
	padding-left: 1.35em;
}

input[type='submit'].icon:before,
input[type='reset'].icon:before,
input[type='button'].icon:before,
button.icon:before,
.button.icon:before {
	margin-right: 0.5em;
}

input[type='submit'].fit,
input[type='reset'].fit,
input[type='button'].fit,
button.fit,
.button.fit {
	display: block;
	width: 100%;
	margin: 0 0 0.75em 0;
}

input[type='submit'].small,
input[type='reset'].small,
input[type='button'].small,
button.small,
.button.small {
	font-size: 0.8em;
}

input[type='submit'].big,
input[type='reset'].big,
input[type='button'].big,
button.big,
.button.big {
	font-size: 1.35em;
}

input[type='submit'].disabled,
input[type='submit']:disabled,
input[type='reset'].disabled,
input[type='reset']:disabled,
input[type='button'].disabled,
input[type='button']:disabled,
button.disabled,
button:disabled,
.button.disabled,
.button:disabled {
	-moz-pointer-events: none;
	-webkit-pointer-events: none;
	-ms-pointer-events: none;
	pointer-events: none;
	opacity: 0.5;
}

/* Header */
.header {
	display: block;
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	padding: 7px 14px 5px;
	text-align: left;
	z-index: 101;
}
.header img {
	display: block;
	max-width: 100%;
	margin: 0 auto 0 auto;
}

/* Main */

.main {
	max-width: 100%;
	min-width: 27em;
	/* padding: 2.5em 3em 2em 3em ; */
	/* border-radius: 4px; */
	cursor: default;
	text-align: center;
	-moz-transform-origin: 50% 50%;
	-webkit-transform-origin: 50% 50%;
	-ms-transform-origin: 50% 50%;
	transform-origin: 50% 50%;
	-moz-transform: rotateX(0deg);
	-webkit-transform: rotateX(0deg);
	-ms-transform: rotateX(0deg);
	transform: rotateX(0deg);
	-moz-transition: opacity 1s ease, -moz-transform 1s ease;
	-webkit-transition: opacity 1s ease, -webkit-transform 1s ease;
	-ms-transition: opacity 1s ease, -ms-transform 1s ease;
	transition: opacity 1s ease, transform 1s ease;
	font-size: 10px;
}

.main .avatar {
	position: relative;
	display: block;
	margin-bottom: 1.5em;
}

.main .avatar img {
	display: block;
	margin: 0 auto;
	border-radius: 100%;
	width: 25%;
}

.main .avatar:before {
	content: '';
	display: block;
	position: absolute;
	top: 50%;
	left: -3em;
	width: calc(100% + 6em);
	height: 1px;
	z-index: -1;
	background: #c8cccf;
}

@media screen and (max-width: 479px) {
	.main {
		min-width: 0;
		/* width: 100%; */
		/* padding: 4em 2em 2.5em 2em ; */
	}
}

body.is-loading .main {
	opacity: 0;
	-moz-transform: rotateX(15deg);
	-webkit-transform: rotateX(15deg);
	-ms-transform: rotateX(15deg);
	transform: rotateX(15deg);
}

/* Footer */

#footer {
	-moz-align-self: -moz-flex-end;
	-webkit-align-self: -webkit-flex-end;
	-ms-align-self: -ms-flex-end;
	align-self: flex-end;
	width: 100%;
	padding: 1.5em 0 0 0;
	color: rgba(255, 255, 255, 0.75);
	cursor: default;
	text-align: center;
}

#footer .copyright {
	margin: 0;
	padding: 0;
	font-size: 0.9em;
	list-style: none;
}

#footer .copyright li {
	display: inline-block;
	margin: 0 0 0 0.45em;
	padding: 0 0 0 0.85em;
	border-left: solid 1px rgba(255, 255, 255, 0.5);
	line-height: 1;
}

#footer .copyright li:first-child {
	border-left: 0;
}

/* Wrapper */

#particles-js {
	position: absolute;
	width: 100%;
	height: 100%;
	/* background-image: url(styles.css); */
	background-repeat: no-repeat;
	background-size: cover;
	background-position: 50% 50%;
}

#wrapper {
	display: -moz-flex;
	display: -webkit-flex;
	display: -ms-flex;
	display: flex;
	-moz-align-items: center;
	-webkit-align-items: center;
	-ms-align-items: center;
	align-items: center;
	-moz-justify-content: space-between;
	-webkit-justify-content: space-between;
	-ms-justify-content: space-between;
	justify-content: space-between;
	-moz-flex-direction: column;
	-webkit-flex-direction: column;
	-ms-flex-direction: column;
	flex-direction: column;
	-moz-perspective: 1000px;
	-webkit-perspective: 1000px;
	-ms-perspective: 1000px;
	perspective: 1000px;
	position: relative;
	min-height: 100%;
	padding: 1.5em;

	top: 100px;

	height: 100%;

	z-index: 2;
}

#wrapper > * {
	z-index: 1;
}

#wrapper:before {
	content: '';
	display: block;
}

body.is-ie #wrapper {
	height: 100%;
}

.bold {
	font-weight: 800;
}
.orange {
	color: #d30000;
}

#step2,
#step2,
#step4 p {
	font-size: 1em;
	font-weight: 400;
	line-height: 2 !important;
	/* margin: 1.5em 0 2.5em; */
}

.btn_wrp {
	width: 100%;
	text-align: center;
}
.inner {
	display: table;
	margin: 0 auto;
}

.btn_full {
	width: 100%;
	text-align: center;
	float: left;
}
.btn_full img {
	width: 75%;
}

.girl {
	height: 95%;
	max-height: 1000px;
	pointer-events: none;
	position: absolute;
	bottom: 0;
	right: 14%;
	-webkit-animation: girl-in 2s ease-out;
	animation: girl-in 2s ease-out;
}
@-webkit-keyframes girl-in {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
@keyframes girl-in {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
.girl_all {
	height: 100%;
	max-height: 1000px;
	pointer-events: none;
	position: absolute;
	bottom: 0;
	right: 0;
	-webkit-animation: girl-in 2s ease-out;
	animation: girl-in 2s ease-out;
}
@-webkit-keyframes girl-in {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
@keyframes girl-in {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
.girl_right {
	height: 95%;
	max-height: 1000px;
	pointer-events: none;
	position: absolute;
	bottom: 0;
	right: 0;
	-webkit-animation: girl-in 2s ease-out;
	animation: girl-in 2s ease-out;
}
@-webkit-keyframes girl-in {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
@keyframes girl-in {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

.gender > img {
	width: 95%;
}

.logo2 {
	z-index: 999;
	right: 3%;
	top: 3%;
}

.logo2 > img {
	width: 50%;
}

iframe {
	min-height: 410px;
	max-width: 100%;
}
#bg {
	position: fixed;
	left: 0;
	top: 0;
	z-index: -1;
}

video {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	height: 940px;
	width: auto;
}

/*  ==========================================================================
	CUSTOM 
	========================================================================== */

.blockItem:before,
.blockItem:after,
.block:before,
.block:after,
.cf:before,
.cf:after {
	display: table;
	content: ' ';
}
.blockItem:after,
.block:after,
.cf:after {
	clear: both;
}

.box-bg {
	position: absolute;
	top: 0;
	left: 0;
	object-fit: fill;
	width: 100%;
	height: 100%;
	z-index: -1;
}

.step > * {
	z-index: 10;
}

.step > .box-bg {
	z-index: -1;
}

.step {
	/* background: #fff; */
	background: no-repeat center center transparent;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	/* -webkit-box-shadow: 0 1px 150px 19px #000;
	box-shadow: 0 1px 150px 19px #000; */
	color: #fefefe;
	clear: both;
	display: block;
	padding: 0;
}
/* .step.stepRound { 
	height: 0;
	overflow: hidden;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
	padding: 0 0 100%;
}
 */
/* .step .gender { 
		padding: 4em;
	} */
/* .step.stepRound .gender { 
		margin-top: 15%;
	} */
/* #step3.step .gender { 
		margin-top: 8%;
		padding: 6em;
	} */

.btnGreen,
.btn {
	background: no-repeat center center transparent;
	-webkit-background-size: 100% 100%;
	-moz-background-size: 100% 100%;
	-o-background-size: 100% 100%;
	background-size: 100% 100%;
}
.btnGreen,
.btnRed {
	-webkit-transition: -webkit-transform 0.15s ease-out;
	-moz-transition: -moz-transform 0.15s ease-out;
	-ms-transition: -ms-transform 0.15s ease-out;
	-o-transition: -o-transform 0.15s ease-out;
	transition: transform 0.15s ease-out;
}
.btnGreen:hover,
.btnRed:hover {
	-webkit-transform: scale(1.066);
	-moz-transform: scale(1.066);
	-ms-transform: scale(1.066);
	-o-transform: scale(1.066);
	transform: scale(1.066);
}
.btn {
	color: #fefefe;
	font: bold 5em/1 'amcap_eternalregular', sans-serif;
	height: auto;
	letter-spacing: -0.25px;
	letter-spacing: -0.025em;
	display: inline-block;
	text-transform: uppercase;
	text-shadow: 0 0 7px #000, 0 0 20px #000, 1px 1px 1px #000, -1px -1px 1px #000, -1px 1px 1px #000, 1px -1px 1px #000,
		2px 2px 1px #000, -2px -2px 1px #000, -2px 2px 1px #000, 2px -2px 1px #000;
}
.stepTitle.stepQuestion + .btn_wrp > .btn {
	height: auto;
}
.btn_wrp .btn:first-child {
	margin-right: 0.25em;
}
.btn_wrp .btn + .btn {
	margin-left: 0.25em;
	text-align: right;
}
.btn img,
.btn span {
	display: inline-block;
	vertical-align: middle;
}

/* .btn.btnBx { 
		background: #fefefe;
		border: 4px solid #000;
		color: #000;
		font-size: 48px;
		height: 1.25em;
		line-height: 1.1em;
		overflow: hidden;
		text-align: center;
		padding: 0 0.25em;
		min-width: 77%;
	} */
/* .active .btn.btnBx { 
		background: #000;
		color: #cacaca;
	} */

.btn,
.btn.btnDef {
	font-size: 3em;
	line-height: 1;
	height: auto;
	padding: 0.5em 1.2em 0.5em;
}
.btn.btnDef.btnSm {
	font-size: 3.7em;
}
.btn.btnDef.btnLg {
	font-size: 4.2em;
}
.btn.btnBx {
	font-size: 4em;
}
.btn.btnBx.btnBxSm {
	font-size: 2.3em;
	padding: 0.95em 1.2em 0.8em;
}
.btn.btnSelect {
	font-size: 1em;
}
.btn.btnDef.btnLg > strong,
.btn.btnDef.btnLg > span {
	display: block;
	text-align: center;
}
.btn.btnDef.btnLg > strong {
	font-size: 1.48em;
}

.stepTitle {
	color: #fefefe;
	font: bold 3em/1.25 'amcap_eternalregular', sans-serif;
	letter-spacing: -0.25px;
	letter-spacing: -0.025em;
	margin: 0.2em auto;
	text-align: center;
	text-transform: uppercase;
	text-shadow: 0 0 7px #000, 0 0 20px #000, 1px 1px 1px #000, -1px -1px 1px #000, -1px 1px 1px #000, 1px -1px 1px #000,
		2px 2px 1px #000, -2px -2px 1px #000, -2px 2px 1px #000, 2px -2px 1px #000;
}
.stepTitle.stepTitleAlt {
	font-size: 5em;
}

.stepTitle.stepQuestion {
	font-size: 3em;
	margin-bottom: 0.52em;
}

.step-4 .stepTitle.stepQuestion,
.step-5 .stepTitle.stepQuestion {
	font-size: 2em;
}

.stepTitle.stepQuestion.mbHalf {
	margin-bottom: 0.26em;
}
.stepTitle.stepQuestion .fzLg {
	font-size: 1.29em;
}

.stepTitle small {
	display: block;
	font-size: 0.75em;
}
.stepTitle.stepQuestion small {
	font-size: 0.83em;
}
.stepTitle strong {
	color: inherit;
	display: block;
}
.cCyan {
	color: #0cf;
}
.cCream {
	color: #d00a38;
}
.cPink {
	color: #ff0096;
}
.cGreen {
	color: #37b605;
}
.cYellow {
	color: #ffe400;
}
.cWhite {
	color: #fff;
}
.btnBox {
	display: inline-block;
	padding: 0.3em 0.25em 0.4em;
}
#step2 .btnBox {
	font-size: 49px;
	line-height: 0.9;
	text-align: center;
}
#step2 .btnBox strong {
	font-size: 66px;
}
.cRed {
	color: #f00;
}
.cBlue {
	color: #005aff;
}
.bgRed {
	background: #f00 !important;
}
.bgGreen {
	background: #00b22a;
}
.bgBlue {
	background: #0058b2;
}
.bgBlack {
	background: #000;
}
.btn.bgBlue,
.btn.bgGreen,
a.bgBlack {
	color: #fefefe;
}
.hi {
	opacity: 1;
	filter: alpha(opacity=100);
	-webkit-transition: opacity 0.15s ease-out;
	-moz-transition: opacity 0.15s ease-out;
	-ms-transition: opacity 0.15s ease-out;
	-o-transition: opacity 0.15s ease-out;
	transition: opacity 0.15s ease-out;
}
.hi:hover {
	opacity: 0.7;
	filter: alpha(opacity=70);
}
.active .curp.hi {
	opacity: 0.8;
	filter: alpha(opacity=80);
}
.bdrs {
	-webkit-border-radius: 12px;
	-moz-border-radius: 12px;
	border-radius: 12px;
}
.tdu {
	text-decoration: underline;
}
.mb1e {
	margin-bottom: 1em;
}
.mb1he {
	margin-bottom: 1.5em;
}
.mb2e {
	margin-bottom: 2em;
}
.mb2he {
	margin-bottom: 2.5em;
}
.mb3e {
	margin-bottom: 3em;
}
.mb3he {
	margin-bottom: 3.5em;
}

#confirmAge a span,
#confirmAge a strong {
	display: block;
}

.block {
	clear: both;
}
.blockItem {
	display: inline-block;
	margin: auto;
	padding: 0;
	text-align: center;
}

.blockItem .btn {
	padding-left: 0;
	padding-right: 0;
	width: 100%;
}
.blockItem img,
.blockItem figure {
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px;
}
.blockItem img {
	display: block;
	height: auto;
	margin: auto;
	padding: 0;
	width: 100%;
}

figure.curp {
	cursor: pointer;
}

.block.block2 {
	margin: 0 -5px;
}
.block.block2 .blockItem {
	padding: 0 5px 10px;
	width: 50%;
}
.block.block2.block2Btns {
	margin: 0 -5px;
}
.block.block2.block2Btns .blockItem {
	padding: 0 5px 10px;
}
.block.block3 {
	margin: 0 -20px;
}
.block.block3 .blockItem {
	padding: 0 20px;
	width: 30%;
}
.block.block4 .blockItem {
	padding: 0 10px;
	width: 23%;
}

.block.block4.mb2e,
.block.block3.mb2e {
	margin-bottom: 2em;
}

.progress {
	height: 20px;
	margin-bottom: 20px;
	overflow: hidden;
	background-color: #f5f5f5;
	border-radius: 4px;
	-webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
	box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
	margin-left: auto;
	margin-right: auto;
	max-width: 90%;
}
.progress-bar {
	float: left;
	width: 0;
	height: 100%;
	font-size: 12px;
	line-height: 20px;
	color: #fefefe;
	text-align: center;
	background-color: #d00a38;
	-webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
	box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
	-webkit-transition: width 0.6s ease;
	-o-transition: width 0.6s ease;
	transition: width 0.6s ease;
}
.progress-bar-striped,
.progress-striped .progress-bar {
	background-image: -webkit-linear-gradient(
		45deg,
		rgba(255, 255, 255, 0.15) 25%,
		transparent 25%,
		transparent 50%,
		rgba(255, 255, 255, 0.15) 50%,
		rgba(255, 255, 255, 0.15) 75%,
		transparent 75%,
		transparent
	);
	background-image: -o-linear-gradient(
		45deg,
		rgba(255, 255, 255, 0.15) 25%,
		transparent 25%,
		transparent 50%,
		rgba(255, 255, 255, 0.15) 50%,
		rgba(255, 255, 255, 0.15) 75%,
		transparent 75%,
		transparent
	);
	background-image: linear-gradient(
		45deg,
		rgba(255, 255, 255, 0.15) 25%,
		transparent 25%,
		transparent 50%,
		rgba(255, 255, 255, 0.15) 50%,
		rgba(255, 255, 255, 0.15) 75%,
		transparent 75%,
		transparent
	);
	-webkit-background-size: 40px 40px;
	background-size: 40px 40px;
	-webkit-animation: progress-bar-stripes 2s linear infinite;
	-o-animation: progress-bar-stripes 2s linear infinite;
	animation: progress-bar-stripes 2s linear infinite;
}

.featureList {
	margin: 0 auto;
	max-width: 90%;
	padding: 0;
}
.featureList li {
	list-style: none;
	display: none;
	font-size: 2em;
	margin: 0 auto 0.5em;
	text-align: left;
	letter-spacing: 0.5px;
	letter-spacing: 0.05em;
}
.featureList.withTicks li {
	background: url('../images/icon-tick.png') no-repeat left top transparent;
	min-height: 30px;
	padding-left: 30px;
	text-shadow: 0 0 7px #000, 0 0 20px #000, 1px 1px 1px #000, -1px -1px 1px #000, -1px 1px 1px #000, 1px -1px 1px #000,
		2px 2px 1px #000, -2px -2px 1px #000, -2px 2px 1px #000, 2px -2px 1px #000;
}

.note {
	font-size: 2em;
	text-transform: uppercase;
}

.tryAnotherGame small {
	font-size: 0.52em;
}

.step.queueOptions .stepTitle.stepQuestion {
	font-size: 38px;
}
.step.queueOptions .btn.btnDef.btnLg {
	font-size: 30px;
}
.step.queueOptions .note {
	margin-bottom: 10px;
}
.step.queueOptions .block.block2.block2Btns {
	margin-bottom: 10px;
}
.step.queueOptions .block.block2.block2Btns .blockItem {
	padding-bottom: 0;
}
.queueOptionsDone {
	margin-bottom: 10px;
}

.loader {
	max-width: 100%;
}
div.loader img {
	display: block;
	height: auto;
	margin: auto;
	padding: 0;
	width: 100%;
}

/*  ==========================================================================
	MEDIA QUERIES 
	========================================================================== */
@media only screen and (max-width: 1079px) {
	.stepTitle.stepTitleAlt {
		font-size: 4em;
	}
	#step2 .stepTitle {
		font-size: 2em;
	}
}
@media only screen and (min-width: 992px) and (max-width: 1079px) and (max-height: 699px) {
	.block.block4,
	.block.block3 {
		max-width: 600px;
		margin-left: auto;
		margin-right: auto;
	}
	#step6 .block.block4,
	#step6 .block.block3 {
		max-width: none;
	}
	.block.block4 figure.mb3e,
	.block.block3 figure.mb3e {
		margin-bottom: 1em;
	}
	.block .btn.btnSelect {
		font-size: 3em;
	}
	#step6 .block .btnSelect,
	#step6 .block .btnSelect {
		font-size: 2.6em;
	}
}
@media only screen and (max-width: 991px) {
	.header img {
		display: block;
		margin: auto;
		max-width: 500px;
	}

	#wrapper {
		top: 60px;
	}
	.step {
		padding: 4.5em 4.5em 2em;
	}
	.stepTitle {
		font-size: 1.5em;
	}
	.stepTitle.stepTitleAlt {
		font-size: 5em;
	}
	#step2 .stepTitle {
		font-size: 3em;
	}
	#step2 .btnBox {
		font-size: 24px;
	}
	#step2 .btnBox strong {
		font-size: 33px;
	}
	.stepTitle.stepQuestion {
		font-size: 1.5em;
		letter-spacing: -0.1px;
		letter-spacing: -0.01em;
	}
	.btn {
		font-size: 3.3em;
	}
	.btn.btnBx {
		font-size: 2.4em;
	}
	.btn.btnDef {
		font-size: 2em;
	}
	.btn.btnDef.btnSm {
		font-size: 1.9em;
	}
	.featureList li {
		font-size: 1.4em;
	}

	.block.block2 {
		margin: 0 -8px;
	}
	.block.block2 .blockItem {
		padding: 0 8px 16px;
	}
	.block.block2.block2Btns {
		margin: 0 auto;
	}
	.block.block2.block2Btns .blockItem {
		margin: 0 auto 1em;
		padding: 0;
		width: 100%;
	}
	.block.block3 {
		margin: 0 -10px;
	}
	.block.block3 .blockItem {
		padding: 0 10px;
	}
	.block.block4 {
		margin: 0 -5px;
	}
	.block.block4 .blockItem {
		padding: 0 5px 10px;
		width: 25%;
	}
	figure.mb3e {
		margin-bottom: 0.75em;
	}
	.stepTitle.stepQuestion .fzLg {
		font-size: 1em;
	}
	.note {
		font-size: 1.4em;
	}
	.btn.btnDef.btnLg {
		font-size: 30px;
	}
	.tryAnotherGame small {
		font-size: 0.7em;
		letter-spacing: 0;
	}

	.step.queueOptions .stepTitle.stepQuestion {
		font-size: 26px;
	}
	.step.queueOptions .btn.btnDef.btnLg {
		font-size: 23px;
	}
	.step.queueOptions .note {
		font-size: 1.3em;
	}
	.step.queueOptions .block.block2 {
		margin: 0 -5px;
	}
	.step.queueOptions .block.block2 .blockItem {
		padding: 0 5px 10px;
	}
	.step.queueOptions .block.block2.block2Btns {
		margin-bottom: 0;
	}
	.step.queueOptions .block.block2.block2Btns .blockItem {
		padding-bottom: 0;
	}
	.queueOptionsDone {
		margin-bottom: 10px;
	}
}
@media only screen and (max-width: 479px) {
	.block.block4 .blockItem {
		padding: 0 5px 10px;
		width: 40%;
	}
	.header {
		padding: 3px 1em;
		text-align: center;
	}
	.header img {
		display: block;
		margin: auto;
		max-width: 310px;
	}
	.step {
		padding: 3.5em 2.5em 1.5em;
	}
	.stepTitle.stepTitleAlt {
		font-size: 2em;
	}
	.step-4 .stepTitle.stepQuestion,
	.step-5 .stepTitle.stepQuestion {
		font-size: 1.5em;
	}
	.btn.btnDef {
		font-size: 2em;
	}
	.btn.btnSelect {
		font-size: 1em;
	}
	.btn.btnBx {
		font-size: 2em;
	}
	#step7 .blockItem {
		padding: 0;
		margin: 0 auto;
		width: 100%;
	}
	.btn.btnBx.btnBxSm {
		font-size: 2em;
	}
	.block.block2 {
		margin: 0 -2px;
	}
	.block.block2 .blockItem {
		padding: 0 2px 4px;
	}
	.block.block3 {
		margin: 0 -3px;
	}
	.block.block3 .blockItem {
		padding: 0 3px;
	}
	.block.block4 {
		margin: 0 -2px;
	}
	.block.block4 .blockItem {
		padding: 0 2px 3px;
	}
	.block.block4.mb2e,
	.block.block3.mb2e {
		margin-bottom: 1em;
	}
	.btn.btnBx {
		font-size: 2em;
	}
	.featureList li {
		font-size: 1em;
	}
	.queueOptions .stepTitle.stepQuestion {
		font-size: 2.3em;
	}
	.note {
		font-size: 1.3em;
	}
	.btn.btnDef.btnLg {
		font-size: 2.5em;
	}
	.tryAnotherGame small {
		font-size: 0.6em;
	}
	.btn.btnDef.btnAnotherGame {
		font-size: 3.2em;
		height: auto;
		line-height: 0.9;
		padding: 0.3em 0.5em 0.25em;
	}
	#wrapper {
		padding: 1.5em 0.5em;
		top: 40px;
	}

	.firstPartner figure {
		background: url('../images/partner-1-mobile.jpg') no-repeat center top transparent;
		-webkit-background-size: 100% auto;
		-moz-background-size: 100% auto;
		-o-background-size: 100% auto;
		background-size: 100% auto;
		height: 0;
		overflow: hidden;
		padding: 0 0 69.44%;
	}
	.firstPartner figure.firstPartner2 {
		background-image: url('../images/partner-2-mobile.jpg');
	}
	.firstPartner figure.firstPartner3 {
		background-image: url('../images/partner-3-mobile.jpg');
	}
	.firstPartner figure.firstPartner4 {
		background-image: url('../images/partner-4-mobile.jpg');
	}
	.firstPartner figure img {
		display: none;
	}

	.firstTool figure {
		background: url('../images/bat-mobile.jpg') no-repeat center top transparent;
		-webkit-background-size: 100% auto;
		-moz-background-size: 100% auto;
		-o-background-size: 100% auto;
		background-size: 100% auto;
		height: 0;
		overflow: hidden;
		padding: 0 0 69.44%;
	}
	.firstTool figure.firstTool2 {
		background-image: url('../images/knife-mobile.jpg');
	}
	.firstTool figure.firstTool3 {
		background-image: url('../images/torch-mobile.jpg');
	}
	.firstTool figure.firstTool4 {
		background-image: url('../images/taser-mobile.jpg');
	}
	.firstTool figure img {
		display: none;
	}
	.stepTitle.stepQuestion small {
		font-size: 0.77em;
	}
	#step2 .btnBox {
		font-size: 2em;
	}
	.featureList.withTicks li {
		line-height: 1.1;
	}
}

body {
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}
.page__wrap {
	width: 1080px;
}

.animating {
	animation: bounce;
	animation-duration: 2s;
}

@keyframes bounce {
	8% {
		transform: translateY(-10px);
	}
	10% {
		transform: translateY(0px);
	}
	15% {
		transform: translateY(-8px);
	}
	19% {
		transform: translateY(0px);
	}
	21% {
		transform: translateY(-4px);
	}
	24% {
		transform: translateY(0px);
	}
	26% {
		transform: translateY(-1px);
	}
	27% {
		transform: translateY(0px);
	}
}

@keyframes rotate {
	0% {
		transform: rotateY(0deg);
	}
	50% {
		transform: rotateY(360deg);
	}
	100% {
		transform: rotateY(0deg);
	}
}

@keyframes scale_circle_1 {
	0% {
		transform: scale(0.1);
	}
	2% {
		opacity: 1;
	}
	5% {
		transform: scale(1);
		opacity: 0.8;
	}
	6% {
		opacity: 0;
	}
	9% {
		opacity: 0;
	}
	10% {
		transform: scale(1);
		opacity: 0;
	}
	90% {
		transform: scale(0.1);
	}
	92% {
		opacity: 1;
	}
	95% {
		transform: scale(1);
		opacity: 0.8;
	}
	96% {
		opacity: 0;
	}
	99% {
		opacity: 0;
	}
	100% {
		transform: scale(1);
		opacity: 0;
	}
}

@keyframes circle_grow_move {
	1% {
		opacity: 0;
		transform: scale(0.1);
	}
	4% {
		transform: scale(1.1);
	}
	5% {
		transform: scale(1);
		opacity: 1;
	}
	11% {
		transform: translate(0);
		background-color: #39960c;
	}
	24% {
		transform: translateX(-130%);
		background-color: #42ae0e;
	}
	85% {
		transform: translateX(-130%);
		background-color: #42ae0e;
	}
	89% {
		transform: translateX(0);
		background-color: #39960c;
	}
	94% {
		transform: scale(1);
	}
	96% {
		transform: scale(1.1);
	}
	98% {
		transform: scale(0.1);
		opacity: 1;
	}
	99% {
		opacity: 0;
	}
	100% {
		transform: scale(0.1);
	}
}

@keyframes trophy_animate_opacity {
	0% {
		opacity: 0;
	}
	20% {
		opacity: 0;
	}
	24% {
		opacity: 1;
	}
	90% {
		opacity: 1;
	}
	95% {
		opacity: 0;
	}
	100% {
		opacity: 0;
	}
}

@keyframes xbox_animate_opacity {
	0% {
		opacity: 1;
	}
	19% {
		opacity: 1;
	}
	23% {
		opacity: 0;
	}
	90% {
		opacity: 0;
	}
	95% {
		opacity: 1;
	}
	100% {
		opacity: 1;
	}
}

@keyframes banner-animate {
	0% {
		width: 100px;
		opacity: 0;
	}
	2% {
		opacity: 0;
	}
	4% {
		opacity: 1;
	}
	11% {
		width: 100px;
	}
	24% {
		width: 355px;
	}
	85% {
		width: 355px;
	}
	89% {
		width: 100px;
		opacity: 1;
	}
	90% {
		opacity: 0;
	}
}

@keyframes textSlide {
	0% {
		transform: translateY(0px);
		opacity: 0;
	}
	20% {
		transform: translateY(0px);
		opacity: 0;
	}
	25% {
		transform: translateY(-85px);
		opacity: 1;
	}
	79% {
		transform: translateY(-85px);
		opacity: 1;
	}
	84% {
		transform: translateY(-200px);
		opacity: 0;
	}
	100% {
		opacity: 0;
	}
}

.animation {
	width: 25%;
	height: 110px;
	padding: 5px 0px 5px 0px;
	margin-top: 80px;

	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	-ms-flex-align: center;
	align-items: center;
	-ms-flex-pack: center;
	justify-content: center;
	font-family: 'open sans', sans-serif;
	color: white;

	margin: auto auto 0 auto;
	position: absolute;
	top: 0;
	left: 0;
	bottom: 1em;
	right: 0;
	box-sizing: content-box;
}

.circle.circle_animate {
	animation: circle_grow_move;
	animation-duration: 10s;
	transform-origin: center;
}
.circle.circle_animate::before {
	animation: scale_circle_1;
	animation-duration: 10s;
	transform-origin: center;
	animation-iteration-count: 2;
}
.circle.circle_animate::after {
	animation: scale_circle_1;
	animation-duration: 10s;
	animation-delay: 0.1s;
	transform-origin: center;
}
.circle.circle_animate .trophy_animate {
	animation: trophy_animate_opacity;
	animation-duration: 10s;
}
.circle.circle_animate .xbox_img {
	animation: xbox_animate_opacity;
	animation-duration: 10s;
}

.circle {
	width: 100px;
	height: 100px;
	top: 0;
	opacity: 0;
	margin: 0 auto;
	border-radius: 100%;
	background: #39960c;
	position: relative;
	display: -ms-flexbox;
	display: flex;
	overflow: hidden;
	z-index: 4;
}
.circle::before {
	content: '';
	opacity: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	background-color: #40a90e;
	position: absolute;
	margin: 0 auto;
	top: 0;
	left: 0;
	border-radius: 100%;
	display: block;
}
.circle::after {
	content: '';
	opacity: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	background-color: #32830a;
	position: absolute;
	margin: 0 auto;
	top: 0;
	left: 0;
	border-radius: 100%;
	display: block;
}
.circle .img {
	height: 50%;
	left: 25%;
	top: 25%;
	position: absolute;
	z-index: 100;
}
.circle .img img {
	height: 100%;
	position: absolute;
}
.circle .trophy_1 {
	animation: rotate;
	animation-duration: 6s;
	animation-iteration-count: infinite;
}

.achieve_disp_animate {
	animation: textSlide;
	animation-duration: 10s;
}

.banner {
	width: 300px;
	height: 100px;
	position: relative;
	left: 0;
	opacity: 0;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-direction: column;
	flex-direction: column;
	-ms-flex-align: center;
	align-items: center;
	-ms-flex-pack: center;
	justify-content: center;
	right: 0;
	margin: 0 auto;
	background: #39960c;
	top: 10px;
	overflow: hidden;
	border-radius: 100px;
}

.banner-outer {
	display: -ms-flexbox;
	display: flex;
	-ms-flex-align: center;
	align-items: center;
	-ms-flex-line-pack: center;
	align-content: center;
	width: 100%;
	top: -100%;
	position: relative;
}

.banner.banner-animate {
	animation: banner-animate;
	animation-duration: 10s;
}

.achieve_name::before,
.achieve_score::before {
	display: none !important;
	opacity: 0;
	content: '';
}

.achieve_name::after,
.achieve_score::after {
	display: none;
	content: '';
}

.achieve_disp {
	display: -ms-flexbox;
	display: flex;
	-ms-flex-direction: column;
	flex-direction: column;
	width: 60%;
	-ms-flex-pack: center;
	justify-content: center;
	margin-left: 25%;
	height: 100%;
	margin-top: 150px;
}
.achieve_disp * {
	margin-bottom: 5px;
}
.achieve_disp input {
	opacity: 1 !important;
}
.achieve_disp .score_disp {
	width: 100%;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-direction: row;
	flex-direction: row;
	-ms-flex-align: start;
	align-items: flex-start;
}
.achieve_disp .achiev_name {
	border: none;
	outline: none;
	background: none;
	font-family: 'open sans', sans-serif;
	font-size: 13pt;
	color: white;
}

.unlocked {
	width: 100%;
	font-family: 'open sans', sans-serif;
	color: white;
	font-weight: 400;
}

.gamerscore {
	display: -ms-flexbox;
	display: flex;
	-ms-flex-direction: row;
	flex-direction: row;
	-ms-flex-align: center;
	align-items: center;
}
.gamerscore input {
	margin-left: 5px;
	width: 30px;
	margin-right: 5px;
	background: none;
	outline: none;
	border: none;
	color: white;
	overflow: visible;
	font-family: 'open sans', sans-serif;
	font-weight: bold;
	font-size: 13pt;
}

.hyphen_sep {
	margin-right: 5px;
	color: white;
	font-size: 15pt;
	font-weight: bold;
}

/* Tablet Screen Query */
@media only screen and (min-width: 768px) and (max-width: 1024px) {
	.title {
		font-size: 30pt;
	}
	.content {
		width: 70%;
	}
	.inputs {
		-ms-flex-direction: column;
		flex-direction: column;
		-ms-flex-align: center;
		-ms-grid-row-align: center;
		align-items: center;
	}
	.inputs .input {
		width: 100%;
		padding-top: 10px;
		padding-bottom: 10px;
	}
	.inputs .input::after {
		width: 100%;
	}
	.inputs .input input {
		padding-bottom: 2px;
		width: 100%;
	}
	.input-complete::before {
		width: 100% !important;
	}
	.input-focussed::before {
		width: 100% !important;
	}
	.pop {
		margin-top: 30px;
	}
	.animation {
		width: 70%;
	}
	.unlocked {
		margin-bottom: 20px;
	}
	.acheive_score {
		width: 80px !important;
	}
}

/* Mobile Screen Query */
@media only screen and (max-width: 767px) {
	.title {
		font-size: 25pt;
	}
	.content {
		width: 70%;
	}
	.inputs {
		-ms-flex-direction: column;
		flex-direction: column;
		-ms-flex-align: center;
		-ms-grid-row-align: center;
		align-items: center;
	}
	.inputs .input {
		width: 100%;
		padding-top: 10px;
		padding-bottom: 10px;
	}
	.inputs .input::after {
		width: 100%;
	}
	.inputs .input input {
		padding-bottom: 2px;
		width: 100%;
		font-size: 12pt;
	}
	.inputs .input input::-webkit-input-placeholder {
		font-size: 12pt;
	}
	.inputs .input input::-moz-placeholder {
		font-size: 12pt;
	}
	.inputs .input input:-ms-input-placeholder {
		font-size: 12pt;
	}
	.inputs .input input::placeholder {
		font-size: 12pt;
	}
	.input-complete::before {
		width: 100% !important;
	}
	.input-focussed::before {
		width: 100% !important;
	}
	.pop {
		margin-top: 30px;
	}
	.animation {
		width: 100%;
	}
	.unlocked {
		margin-bottom: 20px;
	}
	.acheive_score {
		width: 80px !important;
	}
}

/* Laptop Screen Query */
@media only screen and (min-width: 1030px) and (max-width: 1600px) {
	.title {
		font-size: 50pt;
	}
	.content {
		width: 70%;
	}
	.inputs {
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
		-ms-flex-pack: center;
		justify-content: center;
	}
	.inputs .input {
		width: 45%;
		padding-top: 10px;
		padding-bottom: 10px;
		margin: none;
	}
	.inputs .input::after {
		width: 80%;
	}
	.inputs .input input {
		padding-bottom: 2px;
		width: 100%;
		font-size: 20pt;
	}
	.inputs .input input::-webkit-input-placeholder {
		font-size: 20pt;
	}
	.inputs .input input::-moz-placeholder {
		font-size: 20pt;
	}
	.inputs .input input:-ms-input-placeholder {
		font-size: 20pt;
	}
	.inputs .input input::placeholder {
		font-size: 20pt;
	}
	.input-complete::before {
		width: 80% !important;
	}
	.input-focussed::before {
		width: 80% !important;
	}
	.pop {
		margin-top: 30px;
	}
	.animation {
		width: 40%;
	}
}

.step {
	transition: opacity 1s ease-out;
	opacity: 0;
	height: 0;
	overflow: hidden;
	padding: 0;
	position: absolute;
	font-size: 16px;
	width: 100%;
	left: -9999em;
	top: -9999em;
}

body.step-1 .step.step-1,
body.step-2 .step.step-2,
body.step-3 .step.step-3,
body.step-4 .step.step-4,
body.step-5 .step.step-5,
body.step-6 .step.step-6,
body.step-7 .step.step-7,
body.step-8 .step.step-8,
body.step-9 .step.step-9,
body.step-10 .step.step-10,
body.step-11 .step.step-11,
body.step-12 .step.step-12,
body.step-join .step.step-join {
	opacity: 1;
	height: auto;
	padding: 3em;
	transform: translateY(-50%) translateX(-50%);
	-webkit-transform: translateY(-50%) translateX(-50%);
	-moz-transform: translateY(-50%) translateX(-50%);
	-ms-transform: translateY(-50%) translateX(-50%);
	-o-transform: translateY(-50%) translateX(-50%);
	left: 50%;
	top: 50%;
	max-width: 50%;
	text-align: center;
	z-index: 100;
}

@media screen and (max-width: 767px) {
	body.step-1 .step.step-1,
	body.step-2 .step.step-2,
	body.step-3 .step.step-3,
	body.step-4 .step.step-4,
	body.step-5 .step.step-5,
	body.step-6 .step.step-6,
	body.step-7 .step.step-7,
	body.step-8 .step.step-8,
	body.step-9 .step.step-9,
	body.step-10 .step.step-10,
	body.step-11 .step.step-11,
	body.step-12 .step.step-12,
	body.step-join .step.step-join {
		width: 100%;
		max-width: 100%;
		padding: 2em 0em !important;
	}

	.step h2.stepTitle.stepQuestion{
		font-size: 1em !important;
		margin-top: 0em;
		max-width: 90%;
	}
}

@media screen and (max-width: 991px){
	header img {
		max-width: 200px !important;
	}
}

@media screen and (min-width: 992px) {
	body.step-3 .step.step-3 .stepTitle,
	body.step-7 .step.step-7 .stepTitle {
		font-size: 2.5em;
	}

	body.step-6 .step.step-6 .stepTitle.stepQuestion,
	body.step-9 .step.step-9 .stepTitle.stepQuestion,
	body.step-10 .step.step-10 .stepTitle.stepQuestion,
	body.step-3 .step.step-3 .btn.btnSelect,
	body.step-5 .step.step-5 .btn.btnBx,
	body.step-5 .step.step-5 .btn,
	body.step-5 .step.step-5 .btn.btnDef {
		font-size: 2em;
	}

	body.step-7 .step.step-7 .stepTitle,
	body.step-8 .step.step-8 .stepTitle {
		font-size: 3em;
	}
}

@media screen and (min-width: 992px) and (max-width: 1199px) {
	body.step-1 .step.step-1,
	body.step-2 .step.step-2,
	body.step-3 .step.step-3,
	body.step-4 .step.step-4,
	body.step-5 .step.step-5,
	body.step-6 .step.step-6,
	body.step-7 .step.step-7,
	body.step-8 .step.step-8,
	body.step-9 .step.step-9,
	body.step-10 .step.step-10,
	body.step-11 .step.step-11,
	body.step-12 .step.step-12,
	body.step-join .step.step-join {
		max-width: 60%;
	}
}

@media screen and (max-width: 991px) and (orientation: landscape){
	body.step-1 .step.step-1,
	body.step-2 .step.step-2,
	body.step-3 .step.step-3,
	body.step-4 .step.step-4,
	body.step-5 .step.step-5,
	body.step-6 .step.step-6,
	body.step-7 .step.step-7,
	body.step-8 .step.step-8,
	body.step-9 .step.step-9,
	body.step-10 .step.step-10,
	body.step-11 .step.step-11,
	body.step-12 .step.step-12,
	body.step-join .step.step-join {
		width: 100%;
		max-width: 100%;
	}

	body.step-join .step.step-join {
		margin-top: 5em;
	}
}

@media screen and (max-width: 767px) and (orientation: landscape){
	header{
		display: none !important;
	}
}

@media screen and (min-width: 768px) and (max-aspect-ratio: 1/1){
	body.step-6 .step.step-6 .stepTitle.stepQuestion,
       	body.step-9 .step.step-9 .stepTitle.stepQuestion, 
	body.step-10 .step.step-10 .stepTitle.stepQuestion, 
	body.step-3 .step.step-3 .btn.btnSelect,
       	body.step-5 .step.step-5 .btn.btnBx,
       	body.step-5 .step.step-5 .btn, 
	body.step-5 .step.step-5 .btn.btnDef{
		font-size: 1.5em;
	}

	@media screen and (max-width: 991px){
		body.step-3 .step.step-3,
		body.step-5 .step.step-5{
			padding: 1.5em;
		}

		body.step-3 .step.step-3 .btn.btnSelect,
		body.step-5 .step.step-5 .btn.btnBx,
		body.step-5 .step.step-5 .btn, 
		body.step-5 .step.step-5 .btn.btnDef{
			font-size: 1em;
		}
	}

	body.step-1{
		background-position: left;
	}

	body.step-2,
	body.step-3{
		background-position: 80%;
	}
}

button#mute{
	color: #fff !important;
	padding: 0;
	margin: 0;
	position: absolute;
	top: 0.5em;
	right: 0.5em;
	font-size: 2.5em;
	min-width: 2em;
	min-height: 2em;
	height: auto !important;
	line-height: 2em;
	background-color: rgb(253,4,0.9);
	text-shadow: 2px 2px 2px rgba(0,0,0,0.25);
	cursor: pointer;
	border-radius: 1em;
	border: none;
	outline: none;
}

button#mute i.fa-volume-off{
	display: none;
}

body.app-audio-mute button#mute i.fa-volume-off{
	display: inline-block;
}

body.app-audio-mute button#mute i.fa-volume-up{
	display: none;
}

div.step.step-8 h2.stepTitle.stepQuestion em{
	font-style: normal;
	color: red;
}

div.step.step-1 h2.stepTitle.stepTitleAlt,
div.step.step-2 h2.stepTitle.stepTitleAlt,
div.step.step-6 h2.stepTitle.stepQuestion{
	color: white;
}
div.step.step-1 h2.stepTitle.stepTitleAlt strong,
div.step.step-2 h2.stepTitle.stepTitleAlt strong,
div.step.step-6 h2.stepTitle.stepQuestion strong{
	display: block;
	font-style: normal;
	color: red;
}

body.step-6 div.step.step-6 h2.stepTitle.stepQuestion{
	font-size: 2.5em;
}

@media screen and (max-width: 767px){
	body.step-6 div.step.step-6 h2.stepTitle.stepQuestion{
		font-size: 2.5em !important;;
	}
}

body.step-7 div.step.step-7 h2.stepTitle.stepQuestion strong{
	color: red;
	display: inline;
}

div.step.step-8 h2.stepTitle.stepQuestion {
	font-size: 2.25em;
}

div.step.step-8 h2.stepTitle.stepQuestion em {
	font-size: 1.5em;
	color: red;
	display: block;
}

@media screen and (max-width: 767px){
	button#mute{
		font-size: 1.5em;
		top: 0.25em;
		right: 0.25em;
	}
}

div.step.substeps .substep{
	display: none;
}

div.step.substeps .substep.active{
	display: block;
}

div.step input{
	font-size: 2.5em;
	opacity: 1;
	line-height: 2.5em;
	height: 2.5em;
	color: #000;
	text-align: center;
}

@media screen and (max-width: 767px){
	div.step input{
		font-size: 1.5em;
		line-height: 1.5em;
		height: 1.5em;
		max-width: 90%;
		margin-left: auto;
		margin-right: auto;
	}
}

div.step nav.substep{
	position: absolute;
	top: 2.25em;
	right: 2.5em;
	font-size: 2em;
}

h2.stepTitle.stepQuestion.smaller{
	font-size: 2em;
}

h2.stepTitle.stepQuestion.smaller strong{
	display: inline;
	color: red !important;
	font-style: normal;
}