* {
	margin: 0;
	padding: 0;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	margin-block-start: 0;
	margin-block-end: 0
}

img {
	border: none;
	display: block
}

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

a {
	text-decoration: none;
	cursor: pointer !important;
	color: #fff
}

body,
html {
	height: 100%;
	min-height: 100%
}

body {
	font-family: 'Montserrat', sans-serif;
	font-weight: 400;
	font-style: normal;
	color: #fff;
	background: #000;
	overflow-x: hidden;
	transition: background .5s ease-in-out
}

video {
	position: fixed !important;
	z-index: -2;
	top: 0;
	left: 0;
	min-width: 100%;
	min-height: 100%
}

#particles-js {
	position: fixed;
	width: 100%;
	height: 100%;
	z-index: -1;
	top: 0;
	left: 0
}

input,
select,
textarea,
kbd {
	font-family: 'Montserrat', sans-serif
}

.wrapper {
	display: -ms-grid;
	display: grid;
	-ms-grid-columns: 1fr 1fr;
	grid-template-columns: repeat(2, 1fr);
	-ms-grid-rows: 1fr;
	grid-template-rows: 1fr;
	width: 100%;
	height: auto;
	min-height: 100%
}

.msg {
	margin: 0 auto
}

header {
	width: 100%;
	height: 100%;
	-ms-grid-column: 1;
	grid-column: 1 / 2;
	-ms-grid-row: 1;
	grid-row: 1/ 1;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	padding: 0 50px
}

@media all and (-ms-high-contrast: none),
(-ms-high-contrast: active) {
	.wrapper {
		padding-top: 100px
	}
}

header img {
	width: 90%;
	max-width: 650px;
	flex: 1 1 0;
	margin-top: 0
}

.step-item {
	width: 100%;
	height: 100%;
	-ms-grid-column: 2;
	grid-column: 2 / 2;
	-ms-grid-row: 1;
	grid-row: 1/ 1;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	align-items: center;
	text-align: center;
	padding: 0 50px
}

.container {
	width: 100%;
	max-width: 493px;
	padding: 0;
	background: rgba(0, 0, 0, .7);
	min-height: 600px;
	flex: 1 1 0;
	-webkit-box-shadow: 0 0 18px 1px rgba(0, 0, 0, 0.75);
	-moz-box-shadow: 0 0 18px 1px rgba(0, 0, 0, 0.75);
	box-shadow: 0 0 18px 1px rgba(0, 0, 0, 0.75)
}

.counter {
	background: #000;
	display: flex
}

.counter li {
	width: 20%;
	height: 90px;
	line-height: 90px;
	display: block;
	margin: 0;
	float: left;
	text-align: center;
	position: relative;
	border-top: 4px solid transparent;
	font-size: 1.1875rem;
	font-weight: 700;
	color: #333;
	transition: all .5s ease
}

.counter li.active {
	border-top: 6px solid #FF0000;
	color: #fff
}

h1,
h3 {
	font-size: 1.6875rem;
	font-weight: 800;
	width: 100%;
	margin: 30px auto 0;
	display: inline-block;
	text-transform: uppercase
}

h2 {
	font-size: 1.25rem;
	width: 100%;
	margin: 30px auto 0;
	display: inline-block;
	text-transform: uppercase;
	font-weight: 400;
	padding: 0 10px
}

[step="11"] h4 {
	width: 90%;
	max-width: 420px;
	min-height: 24px;
	text-align: left;
	font-size: 1.125rem;
	font-weight: 300;
	margin: 5px auto;
	text-shadow: 0 1px 14px rgba(0, 0, 0, 0.88);
	background: url(../images/correct.png) no-repeat left 1px;
	padding: 0 0 0 30px;
	display: none;
	transition: background .2s ease
}

h4.blue {
	background: url(../images/correct-b.png) no-repeat left 1px
}

h4.green {
	background: url(../images/correct-g.png) no-repeat left 1px
}

.flow {
	width: 100%;
	min-height: 500px;
	height: auto;
	overflow: hidden;
	position: relative
}

.step {
	width: 100%;
	height: auto;
	position: absolute;
	top: 0;
	left: 100%;
	-webkit-transition: transform .4s ease;
	-moz-transition: transform .4s ease;
	-o-transition: transform .4s ease;
	transition: transform .4s ease;
	display: none;
	padding: 0 15px
}

[step="0"] {
	left: 0;
	display: block
}

.overlay {
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	z-index: -1;
	background: rgba(0, 0, 0, .5)
}

.btn {
	display: inline-block;
	width: 92%;
	max-width: 404px;
	font-size: 1.1875rem;
	color: #fff;
	padding: 25px 0;
	margin: 25px 0 0;
	text-align: center;
	border-radius: 5px;
	cursor: pointer;
	position: relative;
	font-weight: 700;
	text-transform: uppercase;
	background: #FF0000;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	transition: all .4s
}

.btn:active,
.btn:hover {
	background: #fff;
	color: #000
}

iframe {
	height: 50vh;
	width: 100%;
	margin-top: 25px
}

.mute-button {
	width: 40px;
	height: 40px;
	text-align: center;
	border: 1px solid #000;
	cursor: pointer;
	box-shadow: 0 1px 2px #000;
	z-index: 9999;
	border-radius: 50%;
	background: #000;
	position: fixed;
	top: 20px;
	right: 20px;
	display: none
}

.mute-button:hover {
	background: #000
}

.mute-button img {
	width: 60%;
	position: relative;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	display: none
}

.active #icon-not-muted {
	display: block !important
}

.inactive #icon-muted {
	display: block !important
}

footer {
	text-align: center;
	font-size: 10px;
	padding: 10px
}

@media only screen and (max-width:1024px) and (orientation: portrait) {
	video {
		left: -15%;
		width: 130%;
		min-width: unset;
		min-height: unset;
		height: auto;
		max-height: 50%;
		object-fit: cover
	}

	.wrapper {
		grid-template-columns: 1fr;
		grid-template-rows: minmax(10%, auto) minmax(100%, auto);
		width: 100%;
		height: auto;
		min-height: 100%
	}

	header {
		grid-column: 1 / 1;
		grid-row: 1/ 2;
		padding: 0
	}

	.step-item {
		grid-column: 1 / 1;
		grid-row: 2/ 2;
		padding: 0
	}

	.container {
		background: rgba(0, 0, 0, 1);
		max-width: unset
	}
}

@media only screen and (max-width:768px),
(min-device-width : 320px) and (max-device-width : 812px) and (orientation : landscape) {

	html,
	body {
		font-size: 14px
	}

	video {
		position: fixed !important;
		top: 0;
		left: 0;
		width: 100%;
		min-width: unset;
		min-height: unset;
		height: auto;
		max-height: 50%
	}

	.wrapper {
		grid-template-columns: 1fr;
		grid-template-rows: 1fr 2fr;
		width: 100%;
		height: auto;
		min-height: 50%
	}

	header {
		grid-column: 1 / 1;
		grid-row: 1/ 2;
		padding: 0;
		align-items: flex-start;
		justify-content: center
	}

	header img {
		max-width: 240px;
		margin-top: 10px
	}

	.step-item {
		grid-column: 1 / 1;
		grid-row: 2/ 2;
		padding: 0
	}

	.flow {
		min-height: 500px;
		background: #000
	}

	.counter {
		position: static
	}

	.counter li {
		height: 55px;
		line-height: 55px;
		color: #fff
	}

	.content {
		bottom: 5px;
		right: 10px;
		height: 60px;
		font-size: 20px
	}

	.counter,
	.container {
		background: transparent;
		max-width: unset;
		-webkit-box-shadow: unset;
		-moz-box-shadow: unset;
		box-shadow: unset
	}
}

@media only screen and (max-width: 640px) {

	h1,
	h3 {
		font-size: 1.25rem;
		margin: 20px auto 0
	}

	h2 {
		font-size: 1rem;
		margin: 20px auto 0
	}

	.mmfg {
		left: 0
	}

	.item span {
		display: none
	}

	.mute-button {
		top: 5px;
		right: 5px
	}

	iframe {
		height: 60vh
	}
}

@media (max-width:420px) {
	.wrapper {
		grid-template-columns: 1fr;
		grid-template-rows: 1fr 3fr
	}

	video {
		left: -20%;
		width: 140%;
		max-height: 60%
	}

	.content {
		font-size: 16px
	}
}

@media (max-width:360px) {
	header img {
		max-width: 140px;
		margin-left: 10px
	}

	.copy {
		padding: 0 20px
	}
}

@media only screen and (min-device-width : 812px) and (max-device-width : 1250px) and (orientation : landscape) {
	.content {
		bottom: 120px;
		left: 15px !important
	}

	.item span {
		display: none
	}

	.mute-button {
		right: unset;
		left: 10px
	}

	iframe {
		height: 90vh
	}
}

@media only screen and (min-device-width : 320px) and (max-device-width : 812px) and (orientation : landscape) {
	.wrapper {
		grid-template-columns: 1fr;
		grid-template-rows: 50vh max-content
	}

	video {
		object-fit: cover
	}
}

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {

	input,
	select,
	textarea {
		width: 92%;
		max-width: 404px;
		display: block;
		margin: 25px auto 0
	}
}

.loader {
	color: #fff;
	font-size: 40px;
	text-indent: -9999em;
	overflow: hidden;
	width: 1em;
	height: 1em;
	border-radius: 50%;
	margin: 70px auto 30px;
	position: relative;
	-webkit-transform: translateZ(0);
	-ms-transform: translateZ(0);
	transform: translateZ(0);
	-webkit-animation: load6 1.7s infinite ease, round 1.7s infinite ease;
	animation: load6 1.7s infinite ease, round 1.7s infinite ease
}

@-webkit-keyframes load6 {
	0% {
		box-shadow: 0 -.83em 0 -0.4em, 0 -.83em 0 -0.42em, 0 -.83em 0 -0.44em, 0 -.83em 0 -0.46em, 0 -.83em 0 -.477em
	}

	5%,
	95% {
		box-shadow: 0 -.83em 0 -0.4em, 0 -.83em 0 -0.42em, 0 -.83em 0 -0.44em, 0 -.83em 0 -0.46em, 0 -.83em 0 -.477em
	}

	10%,
	59% {
		box-shadow: 0 -.83em 0 -0.4em, -.087em -.825em 0 -0.42em, -.173em -.812em 0 -0.44em, -.256em -.789em 0 -0.46em, -.297em -.775em 0 -.477em
	}

	20% {
		box-shadow: 0 -.83em 0 -0.4em, -.338em -.758em 0 -0.42em, -.555em -.617em 0 -0.44em, -.671em -.488em 0 -0.46em, -.749em -.34em 0 -.477em
	}

	38% {
		box-shadow: 0 -.83em 0 -0.4em, -.377em -.74em 0 -0.42em, -.645em -.522em 0 -0.44em, -.775em -.297em 0 -0.46em, -.82em -.09em 0 -.477em
	}

	100% {
		box-shadow: 0 -.83em 0 -0.4em, 0 -.83em 0 -0.42em, 0 -.83em 0 -0.44em, 0 -.83em 0 -0.46em, 0 -.83em 0 -.477em
	}
}

@keyframes load6 {
	0% {
		box-shadow: 0 -.83em 0 -0.4em, 0 -.83em 0 -0.42em, 0 -.83em 0 -0.44em, 0 -.83em 0 -0.46em, 0 -.83em 0 -.477em
	}

	5%,
	95% {
		box-shadow: 0 -.83em 0 -0.4em, 0 -.83em 0 -0.42em, 0 -.83em 0 -0.44em, 0 -.83em 0 -0.46em, 0 -.83em 0 -.477em
	}

	10%,
	59% {
		box-shadow: 0 -.83em 0 -0.4em, -.087em -.825em 0 -0.42em, -.173em -.812em 0 -0.44em, -.256em -.789em 0 -0.46em, -.297em -.775em 0 -.477em
	}

	20% {
		box-shadow: 0 -.83em 0 -0.4em, -.338em -.758em 0 -0.42em, -.555em -.617em 0 -0.44em, -.671em -.488em 0 -0.46em, -.749em -.34em 0 -.477em
	}

	38% {
		box-shadow: 0 -.83em 0 -0.4em, -.377em -.74em 0 -0.42em, -.645em -.522em 0 -0.44em, -.775em -.297em 0 -0.46em, -.82em -.09em 0 -.477em
	}

	100% {
		box-shadow: 0 -.83em 0 -0.4em, 0 -.83em 0 -0.42em, 0 -.83em 0 -0.44em, 0 -.83em 0 -0.46em, 0 -.83em 0 -.477em
	}
}

@-webkit-keyframes round {
	0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg)
	}

	100% {
		-webkit-transform: rotate(360deg);
		transform: rotate(360deg)
	}
}

@keyframes round {
	0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg)
	}

	100% {
		-webkit-transform: rotate(360deg);
		transform: rotate(360deg)
	}
}

/* logo/branding additions */
.logo {
	background: #000;
}

.logo img {
	margin: 0 auto;
	margin-top: -15px;
	max-width: 175px;
	padding-bottom: 20px;
}

.xcg-border {
	border-top-color: #face03 !important
}