@charset "UTF-8";

:root {
	--normal-easing:cubic-bezier(0,.41,.58,1);
	--smooth-easing:cubic-bezier(0.075, 0.820, 0.165, 1);
	--rounded:2000px;
}

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

body {
	width:100%;
	height:auto;
	min-height:100vh;
	overflow-x:hidden;
}

* { /* This sets the baseline for all elements */
	font-size: 99%;
	-webkit-font-smoothing: antialiased!important;
	-moz-osx-font-smoothing: grayscale!important;
	text-shadow: 1px 1px 1px rgba(255,255,255,0.004)!important;
	text-rendering: optimizeLegibility;
	box-sizing:border-box;
}

@-ms-viewport { width: device-width; inicial-scale: 1.0; }
@-o-viewport { width: 430px; inicial-scale=1.0; }
@viewport { width: device-width; inicial-scale=1.0; }

/* Normalizer */

html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}
body{margin:0;}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary{display:block;}
audio,
canvas,
progress,
video{display:inline-block;vertical-align:baseline;}
audio:not([controls]){display:none;height:0;}
[hidden],
template{display:none;}
a{background-color:transparent;}
a:active,
a:hover{outline:0;}
abbr[title]{border-bottom:1px dotted;}
b,
strong{font-weight:bold;}
dfn{font-style:italic;}
mark{background:#ff0;color:#000;}
small{font-size:75%;line-height:1;display:inline-block;}
sub,
sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}
sup{top:-0.5em;}
sub{bottom:-0.25em;}
img{border:0;vertical-align:top;}
svg:not(:root){overflow:hidden;}
figure{margin:0;-webkit-margin-before:0;-webkit-margin-after:0;-webkit-margin-start:0;-webkit-margin-end:0;}
hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0;}
pre{overflow:auto;}
code,
kbd,
pre,
samp{font-family:monospace, monospace;font-size:1em;}
button,
optgroup,
select{color:inherit;font:inherit;margin:0;}
button{overflow:visible;-webkit-appearance:none;border:none;background:none;}
button:hover, button:focus {outline:none;}
button,
select{text-transform:none;}
button,
html input[type="button"],
input[type="reset"],
input[type="submit"]{-webkit-appearance:none;cursor:pointer;}
button[disabled],
html input[disabled]{cursor:default;}
button::-moz-focus-inner,
input::-moz-focus-inner{border:0;padding:0;}
input{line-height:normal;}
input[type="checkbox"],
input[type="radio"]{box-sizing:border-box;padding:0;}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button{height:auto;}
input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;}
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration{-webkit-appearance:none;}
fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em;}
legend{border:0;padding:0;}
textarea{overflow:auto;}
optgroup{font-weight:bold;}
table{border-collapse:collapse;border-spacing:0;}
td,
th{padding:0;}
*::-webkit-media-controls-start-playback-button {display: none!important;-webkit-appearance: none;}
ul {list-style:none;padding:0;margin:0;}
nav ul {list-style:none;padding:0;}
nav ul li {padding:0;}
nav a {height:auto;text-align:left;padding:0;}
/* Form style remover */
form {width: auto;padding:0;}
label {display:block;}
input, textarea {-webkit-appearance: none;-webkit-border-radius: 0;width: 100%;display:block;background-image: none;border:none;padding: 1rem;}
textarea {height: 3rem;}
input:focus, textarea:focus {outline:none;}

/* //Normalizer */

/* ///////////////////////// */
/* 
/* 		Fonts
/* 
/* ///////////////////////// */

.material-icons, [class^="icon-"] {
	font-size: 24px!important;
	line-height: 1;
	vertical-align:middle;
	color:inherit;
	margin-top:-1px;
}

.material-icons.bigger, [class^="icon-"].bigger {
	font-size:30px!important;
}

.material-icons.small , [class^="icon-"].small {
	font-size:16px!important;
	vertical-align:middle;
	margin-top:-1px;
}

[class^="icon-"] {
	font-size:16px;
	vertical-align:middle;
	position:relative;
}

[class^="icon-"]:before, [class*=" icon-"]:before {
	vertical-align:middle;
}

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


/* latin */
@font-face {
  font-family: 'Ubuntu';
  font-style: normal;
  font-weight: 300;
  src: local('Ubuntu Light'), local('Ubuntu-Light'), url(fonts/ubuntu-light.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin */
@font-face {
  font-family: 'Ubuntu';
  font-style: normal;
  font-weight: 400;
  src: local('Ubuntu Regular'), local('Ubuntu-Regular'), url(fonts/ubuntu-regular.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin */
@font-face {
  font-family: 'Ubuntu';
  font-style: normal;
  font-weight: 700;
  src: local('Ubuntu Bold'), local('Ubuntu-Bold'), url(fonts/ubuntu-bold.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ///////////////////////// */
/* 
/* 		//Fonts
/* 
/* ///////////////////////// */

/* ///////////////////////// */
/* 
/* 		Form Structure
/* 
/* ///////////////////////// */

label {
	font-size: 100%;
	vertical-align:middle;
}

input, textarea, .custom-select {
	border:1px solid rgba(255,255,255,0);
	padding:0;
	font-size: 100%;
	background-color: transparent;
	vertical-align:middle;
	padding-top:2px!important;
	margin-top:-1px!important;
	max-width:100%;
	transition: all .2s ease;
        -webkit-transition: all .2s ease;
        -moz-transition: all .2s ease;
        -ms-transition: all .2s ease;
        -o-transition: all .2s ease;
}

input:hover, input:focus, textarea:hover, textarea:focus, .custom-select:hover, .custom-select:focus {
	transition: all .2s ease;
        -webkit-transition: all .2s ease;
        -moz-transition: all .2s ease;
        -ms-transition: all .2s ease;
        -o-transition: all .2s ease;
}

input:focus, textarea:focus {
	background-color: transparent;
}

/* ///////////////////////// */
/* 
/* 		//Form Structure
/* 
/* ///////////////////////// */

a {
	text-decoration:none;
	color:inherit;
	cursor:pointer;
	transition:all 0.15s ease;
		-webkit-transition:all 0.15s ease;
		-moz-transition:all 0.15s ease;
		-ms-transition:all 0.15s ease;
		-o-transition:all 0.15s ease;
}

a:hover {
	transition:all 0.15s ease;
		-webkit-transition:all 0.15s ease;
		-moz-transition:all 0.15s ease;
		-ms-transition:all 0.15s ease;
		-o-transition:all 0.15s ease;
}

hr {
	border: 0;
	height: 0;
}

.button, button {
	position:relative;
	display:inline-block;
	width:auto;
	margin:0 1px 0 1px;
	border:1px solid rgba(0,0,0,0);
	vertical-align:middle;
		transition:all 0.15s ease;
		-webkit-transition:all 0.15s ease;
		-moz-transition:all 0.15s ease;
		-ms-transition:all 0.15s ease;
		-o-transition:all 0.15s ease;
}

button:hover, .button:hover {
	transition:all 0.15s ease;
	-webkit-transition:all 0.15s ease;
	-moz-transition:all 0.15s ease;
	-ms-transition:all 0.15s ease;
	-o-transition:all 0.15s ease;
}

/* ///////////////////////// */
/* 
/* 		Overall Customizable UI Styles
/* 
/* ///////////////////////// */

* { /* This sets the baseline for all elements */
	font-family: 'Ubuntu', sans-serif;
}

html {
	background-color:#f8f8f8;
}

a.link {
	color:#2da4ff;
}

a.link:hover {
	color:#000000;
}

::selection {
	background-color:#2da4ff;
	color:#ffffff;
}

::-moz-selection {
	background-color:#2da4ff;
	color:#ffffff;
}

hr {
	border: 0;
	height: 0;
	margin:10px 0 10px 0;
}

hr.gray-line {
	border: 0;
	height: 0;
	border-bottom: 1px solid #dddddd;
}

.button, button {
	position:relative;
	display:inline-block;
	width:auto;
	padding:0 15px 0 15px;
	margin:0 1px 0 1px;
	line-height:30px;
	border:1px solid rgba(0,0,0,0);
	vertical-align:middle;
		transition:all 0.15s ease;
		-webkit-transition:all 0.15s ease;
		-moz-transition:all 0.15s ease;
		-ms-transition:all 0.15s ease;
		-o-transition:all 0.15s ease;
}

button.wider, .button.wider {
	padding:0 30px 0 30px;
}

input, textarea, .custom-select {
		padding-left:15px;
		padding-right:15px;
		color:#808080;
		background-color:#ffffff;
}

input, .custom-select {
	line-height:30px;
}

input, textarea {
	border:1px solid #dddddd;
}

select {
	padding:0 30px 0 15px;
}

input:hover, input:focus, textarea:hover, textarea:focus {
    border-color:rgba(200,200,200,1);
}

textarea {
	padding:15px;
	height:300px;
}

input:focus, textarea:focus {
	background-color: transparent;
}

input.error, textarea.error, .custom-select.error, .errorhighlight {
	box-shadow: 0px 0px 5px rgba(255,0,50,0.5)!important;
	border: 1px solid rgba(255,0,50,1)!important;
}

input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
  -webkit-appearance: none; 
  margin: 0; 
}

/* ///////////////////////// */
/* 
/* 		// Overall Customizable UI Styles
/* 
/* ///////////////////////// */

/* ///////////////////////// */
/* 
/* 		Button Styles
/* 
/* ///////////////////////// */

.btn-primary-cta, .btn-secondary-cta, .btn-terciary-cta {
	position:relative;
	z-index:1;
	overflow:hidden;
}

.btn-primary-cta {
	color:#ffffff;
	border:1px solid #2da4ff;
	background-color:#2da4ff;
}

.btn-primary-cta:before, .btn-secondary-cta:before, .btn-terciary-cta:before {
	content:'';
	position:absolute;
	z-index:-1;
	top:0;right:0;bottom:0;left:0;
	width:100%;height:100%;
	background-color:rgba(0,0,0,0);
}

.btn-primary-cta:after, .btn-secondary-cta:after, .btn-terciary-cta:after {
	content:'';
	position:absolute;
	z-index:-1;
	top:50%;left:50%;
	width:0px;height:0px;
	background-color:rgba(0,0,0,0.15);
	border-radius:0px;
	transform:translate(-50%,-50%);
	-webkit-transform:translate(-50%,-50%);
	-moz-transform:translate(-50%,-50%);
	-ms-transform:translate(-50%,-50%);
	-o-transform:translate(-50%,-50%);
}

.btn-primary-cta:hover:before, .btn-secondary-cta:hover:before, .btn-terciary-cta:hover:before {
	background-color:rgba(0,0,0,0.15);
	transition:all 0.15s ease;
	-webkit-transition:all 0.15s ease;
	-moz-transition:all 0.15s ease;
	-ms-transition:all 0.15s ease;
	-o-transition:all 0.15s ease;
}

.btn-primary-cta.clicked:after, .btn-secondary-cta.clicked:after, .btn-terciary-cta.clicked:after {
	-moz-animation: buttonfeedback 0.3s linear 1;
	-ms-animation: buttonfeedback 0.3s linear 1;
	-o-animation: buttonfeedback 0.3s linear 1;
	-webkit-animation: buttonfeedback 0.3s linear 1;
	animation: buttonfeedback 0.3s linear 1;
}


@keyframes buttonfeedback {
    0% { width:0;height:0;border-radius:0; }
    50% { width:100px;height:100px;border-radius:100px; }
    99% { width:200px;height:200px;border-radius:200px;background-color:rgba(0,0,0,0); }
    100% { width:0;height:0;border-radius:0;background-color:rgba(0,0,0,0.15); }
}
@-webkit-keyframes buttonfeedback {
    0% { width:0;height:0;border-radius:0; }
    50% { width:100px;height:100px;border-radius:100px; }
    99% { width:200px;height:200px;border-radius:200px;background-color:rgba(0,0,0,0); }
    100% { width:0;height:0;border-radius:0;background-color:rgba(0,0,0,0.15); }
}
@-moz-keyframes buttonfeedback {
    0% { width:0;height:0;border-radius:0; }
    50% { width:100px;height:100px;border-radius:100px; }
    99% { width:200px;height:200px;border-radius:200px;background-color:rgba(0,0,0,0); }
    100% { width:0;height:0;border-radius:0;background-color:rgba(0,0,0,0.15); }
}

.btn-secondary-cta {
	color:#2da4ff;
	border:1px solid #2da4ff;
}

.btn-secondary-cta:hover, .btn-secondary-cta.active {
	background-color:#2da4ff;
	text-shadow:1px 1px 3px rgba(0,0,0,0.25);
	color:#ffffff!important;
}

.btn-terciary-cta {
	color:#999999;
	background-color:#eeeeee;
}

button.btn-terciary-cta:hover, button.btn-terciary-cta.active, .button.btn-terciary-cta:hover, .button.btn-terciary-cta.active {
	background-color:#2da4ff;
	color:#f8f8f8;
}

.btn-simple-underline {
	color:#2da4ff;
}

.btn-simple-underline:hover {
	color:#2da4ff;
	text-decoration:underline!important;
}

.btn-simple-underline.underlined {
	text-decoration:underline!important;
}

.btn-simple-underline.underlined:hover {
	color:#222222;
	text-decoration:underline!important;
}

button[disabled], button.inactive, .button.inactive, .inactive {
	/*filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
	/*filter: gray;
	/*-webkit-filter: grayscale(100%); */
	opacity:0.25;
	cursor:pointer;
}

button[disabled] {
	pointer-events:none;
}

[class^="btn-"], button, .button {
	cursor:pointer;
}

/* ///////////////////////// */
/* 
/* 		//Button Styles
/* 
/* ///////////////////////// */

/* ///////////////////////// */
/* 
/* 		Basic styles
/* 
/* ///////////////////////// */

p {
	font-size:100%;
	line-height:1.45;
	margin:0;
	padding:0;
	color:#222222;
}

h1, h2, h3, h4, h5, h6 {
	margin:0;
	padding:0;
	font-family: inherit;
	font-weight: normal;
    	font-style: normal;
    	line-height:1;
}

.no-pointer {
	cursor:default;
}

/* ///////////////////////// */
/* 
/* 		Page Structure Styles
/* 
/* ///////////////////////// */

.fullheight {
	position:relative;
	width:100%;
	height:auto;
	min-height:100vh;
	padding:0;
}

/* ///////////////////////// */
/* 
/* 		end of /Page Structure Styles
/* 
/* ///////////////////////// */

/* ///////////////////////// */
/* 
/* 		Content Stuff
/* 
/* ///////////////////////// */

body {
	width:100vw;
	height:100vh;
	overflow:hidden;
}

#page-wrapper {
	position:relative;
	max-width:1080px;
	margin:0 auto;
}

.wrapper {
	position:relative;
	height:0;
	padding-bottom:177.78%;
	width:100%;
	max-height:100%;
	overflow:hidden;
}

#screensaver, #content, .fullscreen, .step, .footer-content {
	position:absolute;
	z-index:99;
	transition:all 0.2s var(--normal-easing);
	-webkit-transition:all 0.2s var(--normal-easing);
	-moz-transition:all 0.2s var(--normal-easing);
	-ms-transition:all 0.2s var(--normal-easing);
	-o-transition:all 0.2s var(--normal-easing);
}

#screensaver, #screensaver video, #content, .fullscreen, .step, .footer-content {
	width:100%;
	height:100%;
	object-fit:cover;
	object-position:center;
}

#screensaver video {
	position:absolute;
	left:50%;
	top:50%;
	transform:translate(-50%,-50%);
	-webkit-transform:translate(-50%,-50%);
	-moz-transform:translate(-50%,-50%);
	-ms-transform:translate(-50%,-50%);
	-o-transform:translate(-50%,-50%);
}

.fullscreen {
	z-index:-1;
}

#content {
	position:absolute;
	z-index:1;
	top:0;right:0;bottom:0;left:0;
	width:100%;
	height:100%;
	display:grid;
	grid-gap:15px;
		transition:all 0.2s var(--normal-easing);
		-webkit-transition:all 0.2s var(--normal-easing);
		-moz-transition:all 0.2s var(--normal-easing);
		-ms-transition:all 0.2s var(--normal-easing);
		-o-transition:all 0.2s var(--normal-easing);
}

.step {
		transition:all 0.5s var(--normal-easing);
		-webkit-transition:all 0.5s var(--normal-easing);
		-moz-transition:all 0.5s var(--normal-easing);
		-ms-transition:all 0.5s var(--normal-easing);
		-o-transition:all 0.5s var(--normal-easing);
}

#content[data-step="1"] {grid-template-rows:2fr 4fr 3fr;}
#content[data-step="2"] {grid-template-rows:2fr 4fr 2fr;}
#content[data-step="3"] {grid-template-rows:2fr 4fr 2fr;}

#screensaver.hide, #content.hide, .step.hide, .title.hide, .footer-content.hide {opacity:0;}
#screensaver, #content, .step, .title, .footer-content {opacity:1;}

.step[data-step="1"] {z-index:999;}

header, footer {position:relative;}

.title {
	text-align:center;
	position:absolute;
	top:50%;left:0;right:0;
	transform:translate(0,-50%);
	-webkit-transform:translate(0,-50%);
	-moz-transform:translate(0,-50%);
	-ms-transform:translate(0,-50%);
	-o-transform:translate(0,-50%);
}

h1 {
	display:inline-block;
	color:black;
	font-weight:800;
	text-transform:uppercase;		
}

h2 {
	font-weight:100;
	text-transform:uppercase;
}

span {display:inline-block;}
span.light {font-weight:100;}

.title[data-step="1"] h1 {font-size:100px;}
.title[data-step="1"] h2 {font-size:100px;}

.title[data-step="2"] h1 {font-size:130px;}

.title[data-step="2"] h2 {
	font-size:36px;
	letter-spacing:6px;
	transform:translateX(7px);
	-webkit-transform:translateX(7px);
	-moz-transform:translateX(7px);
	-ms-transform:translateX(7px);
	-o-transform:translateX(7px);
}

.footer {
	position:absolute;
	width:100%;
	height:100%;
	top:0;right:0;bottom:0;left:0;
	object-fit:cover;
	object-position:top center;
}





/* Step 1- Login */

.login-bg {
	position:absolute;
	z-index:1;
	width:100%;
	height:100%;
	top:0;right:0;bottom:0;left:0;
}

.login-box {
	position:absolute;
	z-index:2;
	top:50%;
	left:50%;
		transform:translate(-50%,-50%);
		-webkit-transform:translate(-50%,-50%);
		-moz-transform:translate(-50%,-50%);
		-ms-transform:translate(-50%,-50%);
		-o-transform:translate(-50%,-50%);
	width:80%;
	height:auto;
	padding:0;
}

.login-text {
	position:relative;
	font-size:14px;
	text-transform:uppercase;
	text-align:center;
	display:block;
	margin:0 auto;
}

#card-number {
	display:block;
	width:100%;
	height:160px;
	font-size:90px;
	font-weight:100;
	letter-spacing:-4px;
	padding-left:30px;
	padding-right:30px;
	text-align:center;
	color:black;
		background:transparent;
		border:none;
}

.card-number-wrapper {position:relative;}

.card-number-wrapper:after {
	content:"";
	position:absolute;
	bottom:0;left:50%;
	transform:translateX(-50%);
	-webkit-transform:translateX(-50%);
	-moz-transform:translateX(-50%);
	-ms-transform:translateX(-50%);
	-o-transform:translateX(-50%);
	width:85%;
	height:1px;
	background: rgb(251,48,153);background: -moz-linear-gradient(left, rgba(251,48,153,1) 0%, rgba(206,84,169,1) 10%, rgba(157,115,185,1) 20%, rgba(104,141,202,1) 30%, rgba(46,163,219,1) 40%, rgba(0,180,236,1) 50%, rgba(12,191,219,1) 60%, rgba(80,201,183,1) 70%, rgba(146,211,145,1) 80%, rgba(209,222,105,1) 90%, rgba(255,234,61,1) 100%);background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(251,48,153,1)), color-stop(10%,rgba(206,84,169,1)), color-stop(20%,rgba(157,115,185,1)), color-stop(30%,rgba(104,141,202,1)), color-stop(40%,rgba(46,163,219,1)), color-stop(50%,rgba(0,180,236,1)), color-stop(60%,rgba(12,191,219,1)), color-stop(70%,rgba(80,201,183,1)), color-stop(80%,rgba(146,211,145,1)), color-stop(90%,rgba(209,222,105,1)), color-stop(100%,rgba(255,234,61,1)));background: -webkit-linear-gradient(left, rgba(251,48,153,1) 0%,rgba(206,84,169,1) 10%,rgba(157,115,185,1) 20%,rgba(104,141,202,1) 30%,rgba(46,163,219,1) 40%,rgba(0,180,236,1) 50%,rgba(12,191,219,1) 60%,rgba(80,201,183,1) 70%,rgba(146,211,145,1) 80%,rgba(209,222,105,1) 90%,rgba(255,234,61,1) 100%);background: -o-linear-gradient(left, rgba(251,48,153,1) 0%,rgba(206,84,169,1) 10%,rgba(157,115,185,1) 20%,rgba(104,141,202,1) 30%,rgba(46,163,219,1) 40%,rgba(0,180,236,1) 50%,rgba(12,191,219,1) 60%,rgba(80,201,183,1) 70%,rgba(146,211,145,1) 80%,rgba(209,222,105,1) 90%,rgba(255,234,61,1) 100%);background: -ms-linear-gradient(left, rgba(251,48,153,1) 0%,rgba(206,84,169,1) 10%,rgba(157,115,185,1) 20%,rgba(104,141,202,1) 30%,rgba(46,163,219,1) 40%,rgba(0,180,236,1) 50%,rgba(12,191,219,1) 60%,rgba(80,201,183,1) 70%,rgba(146,211,145,1) 80%,rgba(209,222,105,1) 90%,rgba(255,234,61,1) 100%);background: linear-gradient(to right, rgba(251,48,153,1) 0%,rgba(206,84,169,1) 10%,rgba(157,115,185,1) 20%,rgba(104,141,202,1) 30%,rgba(46,163,219,1) 40%,rgba(0,180,236,1) 50%,rgba(12,191,219,1) 60%,rgba(80,201,183,1) 70%,rgba(146,211,145,1) 80%,rgba(209,222,105,1) 90%,rgba(255,234,61,1) 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fb3099', endColorstr='#ffea3d',GradientType=1 );
}

input {font-family: 'quirohthin';}
input[placeholder] {color:rgb(235,235,235);}
input::-webkit-input-placeholder {color:rgb(235,235,235);}
input:-moz-placeholder {color:rgb(235,235,235);}
input:-ms-input-placeholder {color:rgb(235,235,235);}

#submit-login {
	display:block;
	margin:70px auto 0 auto;
	width:200px;
	height:70px;
	border-radius:var(--rounded);
	font-size:22px;
	text-transform:uppercase;
	font-weight:100;
	padding-left:60px;
	padding-right:60px;
	background:white;
	box-shadow:0px 2px 20px rgba(0,0,0,0.1);
}

#submit-login[disabled] {
	opacity:1;
	background:#f9f9f9;
	color:#cccccc;
	box-shadow:none;
}

.footer-card-bg {
	position:absolute;
	z-index:-1;
	width:100%;
	height:50%;
	left:0;right:0;
	bottom:0;
	background:#e5f5f1;
}

.footer-card-bg-border {
	position:absolute;
	z-index:-2;
	width:100%;
	height:22px;
	left:0;right:0;top:0;
	background:url("images/border.png");
	background-repeat:no-repeat;
	background-size:auto 100%;
	background-position:center;
	transform:translateY(-50%);
	-webkit-transform:translateY(-50%);
	-moz-transform:translateY(-50%);
	-ms-transform:translateY(-50%);
	-o-transform:translateY(-50%);
}

.footer-card-wrapper {
	position:absolute;
	width:100%;
	height:100%;
	-webkit-transform-style: preserve-3d;
	-webkit-transform:perspective(1500px);
}

.footer-card {
	width:80%;
	height:auto;
	position:absolute;
	z-index:3;
	left:50%;
	-webkit-transform-style: preserve-3d;
	transform:translate(-50%,0);
	-webkit-transform:translate(-50%,0);
	-moz-transform:translate(-50%,0);
	-ms-transform:translate(-50%,0);
	-o-transform:translate(-50%,0);
	bottom:10%;
	backface-visibility:visible;
}

/* Card thickness */
.footer-card:after {
	content: '';
	background-color: #cccccc;
	background-image: -webkit-linear-gradient(hsla(0,0%,100%,.25), hsla(0,0%,0%,.25));
	left: 4.5%;
	position: absolute;
	top: 2.9%;
	width: 5px;
	border-radius:2px;
	height:90%;
	z-index:1;
	-webkit-transform: rotateY(-90deg);
	-webkit-transform-origin: 100% 50%;
	backface-visibility:visible;
}

/* Card verse */
.footer-card:before {
	content: '';
	background-color: #cccccc;
	background-image: -webkit-linear-gradient(hsla(0,0%,100%,.25), hsla(0,0%,0%,.25));
	background-size: 100% 100%;
	position: absolute;
	z-index:1;
	top:0;
	width: 93.9%;
	height: 90.9%;
	left: 50%;
	border-radius:3%;
	-webkit-transform:translate3d(-49.9%,2.1%,-5px) rotate(-0.15deg);
	backface-visibility:visible;
}

.footer-card-img {
	width:100%;
	height:auto;
}





.login-box.anim-OUT {
	opacity:0;
	transform:translate(-50%,-50%) scale(0.8);
	-webkit-transform:translate(-50%,-50%) scale(0.8);
	-moz-transform:translate(-50%,-50%) scale(0.8);
	-ms-transform:translate(-50%,-50%) scale(0.8);
	-o-transform:translate(-50%,-50%) scale(0.8);
	transition:all 0.25s var(--normal-easing) 0s;
}


.footer-card-bg.anim-OUT {
	animation: cardBGanimOUT 1.5s ease 1;
	-webkit-animation: cardBGanimOUT 1.5s ease 1;
	-moz-animation: cardBGanimOUT 1.5s ease 1;
	-ms-animation: cardBGanimOUT 1.5s ease 1;
	-o-animation: cardBGanimOUT 1.5s ease 1;
	animation-delay:0.05s;
	animation-iteration-count: 1;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
}

.footer-card-wrapper.anim-OUT .footer-card {
	-webkit-transform:translate(-50%,0) rotateY(450deg);
	transition:all 0.6s cubic-bezier(0.3,0.9,0.8,1);
}
/*
.footer-card-wrapper.anim-OUT .footer-card .footer-card-img {
	animation: cardBLURanimOUT 0.6s var(--smooth-easing) 1;
	-webkit-animation: cardBLURanimOUT 0.6s var(--smooth-easing) 1;
	-moz-animation: cardBLURanimOUT 0.6s var(--smooth-easing) 1;
	-ms-animation: cardBLURanimOUT 0.6s var(--smooth-easing) 1;
	-o-animation: cardBLURanimOUT 0.6s var(--smooth-easing) 1;
	animation-iteration-count: 1;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
}*/

.footer-card-wrapper.anim-OUT {
	animation: cardanimOUT 3s var(--smooth-easing) 1;
	-webkit-animation: cardanimOUT 3s var(--smooth-easing) 1;
	-moz-animation: cardanimOUT 3s var(--smooth-easing) 1;
	-ms-animation: cardanimOUT 3s var(--smooth-easing) 1;
	-o-animation: cardanimOUT 3s var(--smooth-easing) 1;
	animation-iteration-count: 1;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
}

@keyframes cardBGanimOUT {
	0% { transform:translateY(0) scaleY(1); bottom:0; }
	60% { transform:translateY(20%) scaleY(1); bottom:0; }
	90% { transform:translateY(20%) scaleY(20); bottom:0; }
	100% { transform:translateY(20%) scaleY(20); bottom:0; }
	/*100% { transform:translateY(20%) scaleY(0); bottom:150vh; }*/
}

@keyframes cardanimOUT {
	0% { transform:translateY(0);}
	30% { transform:translateY(-35%);}
	100% { transform:translateY(200%);}
}

@keyframes cardBLURanimOUT {
	0% {}
	30% {}
	100% {}
}
/*@-webkit-keyframes cardanimOUT {
    0% { width:0;height:0;border-radius:0; }
    50% { width:100px;height:100px;border-radius:100px; }
    99% { width:200px;height:200px;border-radius:200px;background-color:rgba(0,0,0,0); }
    100% { width:0;height:0;border-radius:0;background-color:rgba(0,0,0,0.15); }
}
@-moz-keyframes cardanimOUT {
    0% { width:0;height:0;border-radius:0; }
    50% { width:100px;height:100px;border-radius:100px; }
    99% { width:200px;height:200px;border-radius:200px;background-color:rgba(0,0,0,0); }
    100% { width:0;height:0;border-radius:0;background-color:rgba(0,0,0,0.15); }
}*/


/* // Step 1- Login */



content.main-content {
	position:relative;
	width:100%;
	height:auto;
}

.curtain {
	display:none;
	position:absolute;
	z-index:999;
	background:#e5f5f1;
	width:100%;
	height:100%;
	transform:translateY(0);
	-webkit-transform:translateY(0);
	-moz-transform:translateY(0);
	-ms-transform:translateY(0);
	-o-transform:translateY(0);
	transition:all 0.75s var(--smooth-easing);
	-webkit-transition:all 0.75s var(--smooth-easing);
	-moz-transition:all 0.75s var(--smooth-easing);
	-ms-transition:all 0.75s var(--smooth-easing);
	-o-transition:all 0.75s var(--smooth-easing);
}

.curtain.anim-OUT {
	transform:translateY(-100%);
	-webkit-transform:translateY(-100%);
	-moz-transform:translateY(-100%);
	-ms-transform:translateY(-100%);
	-o-transform:translateY(-100%);
}


.close-award, .close-complete {
	position:absolute;
	top:20px;
	right:20px;
	width:40px;
	height:40px;
	border-radius:var(--rounded);
	background:white;
}

.close-award span, .close-complete span {
	width:50%;
	height:2px;
	background:black;
		position:absolute;
		top:50%;
		left:50%;
}

.close-award span:nth-of-type(1), .close-complete span:nth-of-type(1) {
	transform:translate(-50%,-50%) rotate(-45deg);
	-webkit-transform:translate(-50%,-50%) rotate(-45deg);
	-moz-transform:translate(-50%,-50%) rotate(-45deg);
	-ms-transform:translate(-50%,-50%) rotate(-45deg);
	-o-transform:translate(-50%,-50%) rotate(-45deg);
}

.close-award span:nth-of-type(2), .close-complete span:nth-of-type(2) {
	transform:translate(-50%,-50%) rotate(45deg);
	-webkit-transform:translate(-50%,-50%) rotate(45deg);
	-moz-transform:translate(-50%,-50%) rotate(45deg);
	-ms-transform:translate(-50%,-50%) rotate(45deg);
	-o-transform:translate(-50%,-50%) rotate(45deg);
}




#gameCanvas {
	position:relative;
}



/* ///////////////////////// */
/* 
/* 		//Content Stuff
/* 
/* ///////////////////////// */