*{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(../img/correct.png) no-repeat left 1px;padding:0 0 0 30px;display:none;transition:background .2s ease}
h4.blue{background:url(../img/correct-b.png) no-repeat left 1px}
h4.green{background:url(../img/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
    
}
	.btn {
		background: #9b5cd2;
	}