@keyframes a {
	0% {
		opacity: 0;
		transform: translate3d(0, 10rem, 0);
	}
	to {
		opacity: 1;
		transform: translateZ(0);
	}
}

.fadeInUp {
	animation: a 0.4s;
}

@keyframes b {
	0% {
		opacity: 0;
		transform: translate3d(0, -10rem, 0);
	}
	to {
		opacity: 1;
		transform: translateZ(0);
	}
}

.fadeInDown {
	animation: b 0.4s;
}

body {
	overflow-x: hidden;
	font-family: Montserrat, Arial, Helvetica, sans-serif;
	font-size: 16px;
	line-height: 1.4;
	color: #333;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	text-transform: uppercase;
}

h1 {
	font-size: 3.5rem;
}

h2 {
	font-size: 2rem;
}

h3 {
	font-size: 2.2rem;
}

h4 {
	font-size: 1.8rem;
}

h5,
h6 {
	font-size: 1.6rem;
}

p {
	font-size: 1.8rem;
	text-align: justify;
}

h1,
h6,
li,
p {
	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4), 0 1px 0 rgba(0, 0, 0, 0.4),
	-1px 0 0 rgba(0, 0, 0, 0.4), 1px 0 0 rgba(0, 0, 0, 0.4);
	text-align: center
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

html {
	font-size: 62.5%;
}

body,
html {
	width: 100%;
	height: 100%;
}

body {
	min-width: 320px;
	/*min-height: 500px;*/
	background: #fff;
	z-index: 0;
}

ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
}

.clearfix:after {
	content: "";
	display: block;
	clear: both;
}

.btn,
.transition {
	transition: all 0.25s ease;
}

img {
	display: block;
	max-width: 100%;
	height: auto;
}

.main {
	position: relative;
	width: 100%;
	height: 100%;
	z-index: 1;
}

body {
	background-size: cover;
	background-position: 50%;
}

.coub {
	z-index: 2;
	position: absolute;
	text-align: right;
	color: #ffffffc9;
	margin: 0px 85%;
	bottom: 8%;
}

.progress {
	display: block;
	position: fixed;
	bottom: 2rem;
	left: 50%;
	transform: translateX(-50%);
	width: 100%;
	text-align: center;
	z-index: 3;
	width: 90%;
	max-width: 20rem;
	height: 0.5rem;
	border-radius: 5rem;
	overflow: hidden;
	background: #00000038;
}

.progress .bar {
	width: 0;
	height: 100%;
	border-radius: 5rem;
	background-image: linear-gradient(90deg,#20ffe3, #095a4d);
}

.videobgbox {
	width: 100%;
	height: 100%;
	position: fixed;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
}
.videobgbox:after {
	content: "";
	display: block;
	background: #0006;
	background-size: 2px 2px;
	z-index: 0;
	width: 100%;
	height: 100%;
	position: fixed;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
}

.video {
	height: 100%;
	width: 100%;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	transition-duration: 0ms;
	object-fit: cover;
}

.btnbox {
	display: -ms-flexbox;
	display: flex;
	-ms-flex-pack: end;
	justify-content: flex-end;
}

.btn,
.btnbox {
	-ms-flex-align: center;
	align-items: center;
}

.btn {
	width: 100%;
	height: 6rem;
	line-height: 6rem;
	padding: 0 2rem;
	position: relative;
	display: inline-block;
	color: #000;
	font-size: 1.6rem;
	text-decoration: none;
	text-transform: uppercase;
	text-align: center;
	letter-spacing: 0.1rem;
	border-radius: 5rem;
	cursor: pointer;
	margin-bottom: 1rem;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-pack: center;
	justify-content: center;
	border: 0;
}

.btn--primary {
	margin-left: 2rem;
	background-color: #00000091;
	color: #fff;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4), inset 0 2px 2px hsl(0deg, 0%, 100%, 0.2);
	box-shadow: 0 0 5px #fff, 0 0 10px #00ffd8, 0 0 11px #00ffc0, 0 0 0px #00ffe2, 0 0 2px #00f6ff, 0 0 0px #00ffc6, 0 0 21px #7dffde, 0 0 22px #c8ffee;
}

.btn--primary:hover {
	color: #66f9dd;
	font-weight: 700;
}

.btn--primary:active {
	color: #66f9dd;
	font-weight: 700;
}

.btn--accent {
	color: #fff;
	background-color: #c154c1;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

.btn--accent:hover {
	background: #c050c0;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.btn--accent:active {
	background-color: #c154c1;
	box-shadow: none;
}

.btn--round {
	min-width: 8.6rem;
	height: 8.6rem;
	background: #fff;
	border-radius: 6rem;
	padding: 0;
	text-align: center;
	color: #fff;
	font-size: 1.4rem;
	width: auto;
	padding: 0 15px;
}

.btn--round.btn--primary {
	background-color: #00000075;
}

.btn--round.btn--accent {
	background: #7c7c7c70;
}

.btn-jelly:hover {
	-webkit-animation: jelly 0.5s;
	animation: jelly 0.5s;
}

@-webkit-keyframes jelly {
	25% {
		transform: scale(0.9, 1.1);
	}
	50% {
		transform: scale(1.1, 0.9);
	}
	75% {
		transform: scale(0.95, 1.05);
	}
}
@keyframes jelly {
	25% {
		transform: scale(0.9, 1.1);
	}
	50% {
		transform: scale(1.1, 0.9);
	}
	75% {
		transform: scale(0.95, 1.05);
	}
}

.title-desc {
	font-size: 17px;
	font-weight: 500;
	letter-spacing: 0;
	color: #fff;
}
.choice-list {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}
.choice-list li {
	width: 48%;
	height: 65px;
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-size: 1.6rem;
	background: #7c7c7c70;
	color: #fff;
	border-radius: 40px;
	margin-bottom: 15px;
	padding: 0 10px;
	cursor: pointer;
}
.choice-list li {
	text-align: center;
	line-height: 1.2;
}
.choice-list li.active {
	color: #66f9dd;
	background: #00000075;
	box-shadow: 0 0 5px #fff, 0 0 10px #00ffd8, 0 0 11px #00ffc0, 0 0 0px #00ffe2, 0 0 2px #00f6ff, 0 0 0px #00ffc6, 0 0 21px #7dffde, 0 0 22px #c8ffee;
}
.choice-list li.full-width {
	width: 100%;
}

.stepbox {
	left: 0;
	top: 0;
	z-index: 2;
}

.step,
.stepbox {
	width: 100%;
	height: 100%;
	position: relative;
}

.step {
	max-width: 40rem;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	display: none;
	padding: 2rem;
	color: #fff;
}

.step.current {
	display: block;
}

.step .btnbox.btnSinglbox {
	-ms-flex-pack: center;
	justify-content: center;
	width: 100%;
}
.step .btnbox.btnSinglbox .btn {
	margin-left: 0;
	width: 100%;
}

.step .btnbox.btnSinglbox .btn--primary {
	margin: 0;
}

.step__inner {
	width: 100%;
	height: 100%;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-direction: column;
	flex-direction: column;
	-ms-flex-pack: center;
	justify-content: center;
}

.step__header {
	margin-bottom: 1rem;
}

.step__body,
.step__footer {
	margin-bottom: 2rem;
}

.field-box {
	position: relative;
	margin-top: 12px;
	min-height: 60px;
}

.input-text {
	display: block;
	width: 100%;
	max-width: 320px;
	padding: 10px 15px;
	border: none;
	border-radius: 5px;
	box-sizing: border-box;
}

.input-text:focus {
	outline: 0;
}

label.error {
	position: absolute;
	left: 0;
	top: 40px;
	color: #fd4444;
	font-size: 12px;
}

/* Unsubscribe */
.unsubscribe {
	width: 100%;
	height: auto;
	position: fixed;
	right: 0;
	bottom: 5px;
	left: 0;
	text-align: center;
	z-index: 100;
}

.unsubscribe a {
	font-size: 12px;
	font-weight: normal;
	color: #fff;
	text-decoration: none;
}

.unsubscribe a:hover {
	text-decoration: underline;
}

/* Style Alt & 22 */
.style_alt .btn--primary,
.style_alt .choice-list li.active,
.style_alt24 .btn--primary,
.style_alt24 .choice-list li.active {
	box-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 20px #fff, 0 0 0px #0ff, 0 0 14px #0ff, 0 0 0px #0ff, 0 0 41px #0ff, 0 0 22px #0ff;
}
.style_alt24 .choice-list li.active,
.style_alt24 .btn--primary:hover {
	color: #64f8ff;
}
.style_alt .progress .bar,
.style_alt24 .progress .bar {
	background-image: linear-gradient(90deg, #20ffea, #2ebfff);
}

/* Style Alt2 & 24 */
.style_alt2 .btn--primary,
.style_alt2 .choice-list li.active {
	box-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 20px #fff, 0 0 0px #ff76c8, 0 0 14px #ff7676, 0 0 0px #ff7676, 0 0 41px #ff7676, 0 0 22px #ff76c8;
}
.style_alt2 .choice-list li.active,
.style_alt2 .btn--primary:hover {
	color: #ffa0bf;
}
.style_alt2 .progress .bar {
	background-image: linear-gradient(90deg, #ff7fb9, #fff)
}

/* Style Alt4 */
.style_alt4 .btn--primary,
.style_alt4 .choice-list li.active {
	box-shadow: 0 0 5px #fff, 0 0 10px #ff002f, 0 0 11px #ff002f, 0 0 0px #ff002f, 0 0 2px #ff002f, 0 0 0px #ff002f, 0 0 21px #ff7d95, 0 0 22px #ffc8d2;
}
.style_alt4 .choice-list li.active,
.style_alt4 .btn--primary:hover {
	color: #ff002f;
	font-weight: 700;
}
.style_alt4 .progress .bar {
	background-image: linear-gradient(90deg,#ff2020, #ff7c82);
}

/* Style Alt8 */
.style_alt8 .btn--primary,
.style_alt8 .choice-list li.active {
	box-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 20px #fff, 0 0 0px #ffce00, 0 0 14px #ffce00, 0 0 0px #ffce00, 0 0 41px #ffce00, 0 0 22px #ffce00;
}
.style_alt8 .choice-list li.active,
.style_alt8 .btn--primary:hover {
	color: #ffd764;
	font-weight: 700;
}
.style_alt8 .progress .bar {
	background-image: linear-gradient(90deg, #ffc520, #000000);
}

/* Style Alt10 */
body.style_alt3 {
	font-family: 'Poppins', sans-serif;
}
.style_alt10 h1 {
	font-family: 'Luckiest Guy', cursive;
	color:#9a34f6;
	text-shadow:none;
}
.style_alt10 p {
	text-shadow:none;
	font-weight:normal;
}
.style_alt10 .btn--primary,
.style_alt10 .choice-list li.active {
	background: linear-gradient(90deg, rgba(160,83,215, 0.8) 0%, rgba(187,125,141,0.8) 35%, rgba(219,186,70, 0.8) 100%);
	border:1px solid #fff;
	font-family: 'Luckiest Guy', cursive;
	color:#fff;
	box-shadow: 0 0 5px #fff, 0 0 10px #b99560, 0 0 11px #b69063, 0 0 0px #b28d63, 0 0 2px #b28d63, 0 0 0px #b28d63, 0 0 21px #ac8761, 0 0 22px #ac8761;
	text-shadow: none;
}
.style_alt10 .btn--primary:hover {
	color:#fff;
}

/* Style Alt21 & 22 */
.style_alt21 .btn--primary,
.style_alt21 .choice-list li.active,
.style_alt22 .btn--primary,
.style_alt22 .choice-list li.active {
	box-shadow: 0 0 5px #fff, 0 0 10px #ffa200, 0 0 11px #ff5200, 0 0 0px #ff002f, 0 0 2px #ff002f, 0 0 0px #ff002f, 0 0 21px #ff7d95, 0 0 22px #ffc8d2;
}
.style_alt21 .choice-list li.active,
.style_alt21 .btn--primary:hover,
.style_alt22 .choice-list li.active,
.style_alt22 .btn--primary:hover {
	color: #f9b066;
}
.style_alt21 .progress .bar,
.style_alt22 .progress .bar {
	background-image: linear-gradient(90deg,#ffae20, #ff7c82);
}

/* Style Alt23 */
.style_alt23 .btn--primary,
.style_alt23 .choice-list li.active {
	box-shadow: 0 0 5px #fff, 0 0 10px #0083ff, 0 0 11px #008bff, 0 0 0px #00cfff, 0 0 2px #00b5ff, 0 0 0px #00e1ff, 0 0 21px #95d5ff, 0 0 22px #c8f3ff;
}
.style_alt23 .choice-list li.active,
.style_alt23 .btn--primary:hover {
	color: #86c3fd;
}
.style_alt23 .progress .bar {
	background-image: linear-gradient(90deg,#20a6ff, #000000);
}

/* Style Alt30 */
.style_alt30 h1,
.style_alt30 h6 {
	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4), 0 1px 0 rgba(0, 0, 0, 0.4), -1px 0 0 rgba(0, 0, 0, 0.5), 1px 0 0 rgba(0, 0, 0, 0.4);
	color:#ffe400;
}
.style_alt30 p {
	text-shadow:none;
	font-weight:normal;
}
.style_alt30 .btn--primary,
.style_alt30 .choice-list li.active {
	background: #41116e;
	border:1px solid #ffe400;
	color:#ffe400;
	box-shadow: 0 0 24px #ffe400;
	text-shadow: none;
	font-weight: bold;
}
.style_alt30 .btn--primary:hover {
	color:#fff;
	background: #894ec0;
	box-shadow: none;
	border-color: transparent;
}
.style_alt30 .btn--round.btn--accent {
	background: #000;
	color: #4f4956;
	border: 1px solid #4f4956;
	box-shadow: 0 0 24px #fff;
}
.style_alt30 .btn--round.btn--accent:hover {
	background: transparent;
	box-shadow: none;
}

@media (min-width: 375px) {
	html {
		font-size: 75%;
	}
}

@media (max-width: 768px) {
	.coub {
		margin-left: 57%;
	}
}

@media (min-width: 768px) {
	html {
		font-size: 87.5%;
	}

	.coub {
		margin-left: 75%;
	}
}

@media (min-width: 992px) {
	.btnbox .btn {
		max-width: 26rem;
	}

	.btnbox .btn--round {
		width: 1rem;
		height: 3rem;
	}

	.btnbox.btnSinglbox .btn {
		max-width: 100%;
		width: 100%;
		margin-left: 0;
	}

	.step {
		max-width: 60rem;
		padding-left: 10rem;
	}
}

@media (min-width: 1200px) {
	.coub {
		margin-left: 82%;
	}
}

/* Screen 568px */
@media (max-width: 600px) {
	h5, h6 {
		font-size: 22px;
	}
}
/* Large height mobile size: Iphone XS/8 Plus/7 Plus/6s Plus, Gallaxy S8/S9 */
@media (max-width: 479px) and (max-height: 650px) {
	.title-desc {
		font-size: 15px;
	}
}
/* Iphone 8/7/6S, Galaxy S5/S6/S7 */
@media (max-width: 400px) and (max-height: 570px) {
	.step__header {
		margin-bottom: 1.5rem;
	}
	.step-final .step__header {
		margin-bottom: 1rem;
	}
}
/* Iphone SE */
@media (max-width: 400px) and (max-height: 460px) {
	h1 {
		font-size: 3rem;
	}

	p {
		font-size: 1.6rem;
	}
	.choice-list li {
		font-size: 1.4rem;
		height: 55px;
	}
	h5, h6 {
		font-size: 19px;
	}
}