@charset "UTF-8";
/* CSS Document */
html{
}
*{
	margin: 0px;
	padding: 0px;
	}
body{
	font-family: "Paytone One";
	font-weight: 100;
	font-size: 18px;
	margin-top: 0px;
	background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
	background-size: 400% 400%;
	animation: gradient 15s ease infinite;
	color: #000000;
	opacity: 1;
	-webkit-transition: opacity 0.5s ease-in;
    -moz-transition: opacity 0.5s ease-in;
    -o-transition: opacity 0.5s ease-in;
    -ms-transition: opacity 0.5s ease-in;
    transition: opacity 0.5s ease-in;
	}

body.photobooth{
	height: 1920px;
	width: 1080px;
}
body.app{
	width: 100vw;
	height: 100vh;
}
@keyframes gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}

p.text{
	font-family: "Nunito";
	font-weight: 100;
}

#fullscreen-bg-video{
	position: fixed;
	top: 0px;
	left: 0px;
	bottom: 0px;
	right: 0px;
	background: transparent;
}
.overlay{
	position: absolute;
	top: 0px;
	left: 0px;
	right: 0px;
	bottom: 0px;
	background-color: rgba(0,0,0,0.6);
}
#screen1{
	position: fixed;
	top: 0px;
	left: 0px;
	right: 0px;
	bottom: 540px;
}
#screen1 .text{
	position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 800px;
}
#screen1 .text h1{
	font-family: "Paytone One";
	font-size: 120px;
	line-height: 140px;
	color: #fff;
	text-align: center;
}
#screen2{
	position: fixed;
	top: 540px;
	left: 0px;
	right: 0px;
	bottom: 0px;
}
#qrcode{
	position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 400px;
  height: 400px;
}

#photobooth{
	position: absolute;
	top: 0px;
	left: 0px;
	right: 0px;
	bottom: 0px;
	background: transparent;
	color: #fff;
	display: none;
}
.countdown{
	position: absolute;
	top: 0px;
	left: 0px;
	right: 0px;
	bottom: 0px;
	color: #fff;
	line-height: 1920px;
	text-align: center;
	font-size: 1200px;
}
#liveview{
	position: absolute;
	top: calc(540px + 90px);
	left: 360px;
	right:360px;
	bottom: 90px;
	background: #fff;
}

#quizQuestion{
	position: absolute;
	top: 0px;
	left: 0px;
	right: 0px;
	bottom: 0px;
	padding: 15px 15px 10px 15px;
	background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
	background-size: 400% 400%;
	animation: gradient 15s ease infinite;
	color: #fff !important;
	display: none;
}

#flash{
	position: absolute;
	top: 0px;
	left: 0px;
	right: 0px;
	bottom: 0px;
	background: #ffffff;
	display: none;
}
#showPhoto{
	position: absolute;
	top: 0px;
	left: 0px;
	right: 0px;
	bottom: 0px;
	background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
	background-size: 400% 400%;
	animation: gradient 15s ease infinite;
	display: none;
}
#showPhoto_text{
	position: absolute;
	top: 400px;
	left: 0px;
	right: 0px;
	height: 260px;
	font-size: 100px;
	text-align: center;
	line-height: 260px;
	padding: 0px;
	margin: 0px;
	color: #fff;
}
#showPhoto_photo{
	position: absolute;
	top: 660px;
	left: 50px;
	right: 50px;
	bottom: 50px;
	background-size: contain;
	background-position: top center !important;
}

.flash_top{
	position: absolute;
	top: 0px;
	left: 0px;
	right: 0px;
	bottom: 1080px;
	line-height: 1080px;
	font-size: 130px;
	color: #000;
	text-align: center;
}
.flash_bottom{
	position: absolute;
	top: 1080px;
	left: 0px;
	right: 0px;
	bottom: 0px;
	line-height: 1080px;
	font-size: 130px;
	text-align: center;
	color: #000;
	
}
.flash_bottom span, .flash_top span{
	background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
	background-size: 400% 400%;
	animation: gradient 15s ease infinite;
	background-clip: text;
  	text-fill-color: transparent;
  	-webkit-background-clip: text;
  	-webkit-text-fill-color: transparent;
}

.linear-wipe {
  text-align: center;
  
  background: linear-gradient(to right, #FFF 20%, #FF0 40%, #FF0 60%, #FFF 80%);
  background-size: 200% auto;
  
  color: #000;
  background-clip: text;
  text-fill-color: transparent;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  
  animation: shine 1s linear infinite;
  @keyframes shine {
    to {
      background-position: 200% center;
    }
  }
}

/*///////////////////////////////////////////APP///////////////////////////////////////////////*/

.wrapper{
	position: absolute;
	top: 0px;
	right: 0px;
	left: 0px;
	min-height: 500px;
	padding: 30px;	
}



/*SNOWFLAKES*/
.snowflake {
  color: #fff;
  font-size: 60px;
  font-family: Arial;
  text-shadow: 0 0 1px #000;
}

@-webkit-keyframes snowflakes-fall{0%{top:-10%}100%{top:100%}}@-webkit-keyframes snowflakes-shake{0%{-webkit-transform:translateX(0px);transform:translateX(0px)}50%{-webkit-transform:translateX(80px);transform:translateX(80px)}100%{-webkit-transform:translateX(0px);transform:translateX(0px)}}@keyframes snowflakes-fall{0%{top:-10%}100%{top:100%}}@keyframes snowflakes-shake{0%{transform:translateX(0px)}50%{transform:translateX(80px)}100%{transform:translateX(0px)}}.snowflake{position:fixed;top:-10%;z-index:9999;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:default;-webkit-animation-name:snowflakes-fall,snowflakes-shake;-webkit-animation-duration:10s,3s;-webkit-animation-timing-function:linear,ease-in-out;-webkit-animation-iteration-count:infinite,infinite;-webkit-animation-play-state:running,running;animation-name:snowflakes-fall,snowflakes-shake;animation-duration:10s,3s;animation-timing-function:linear,ease-in-out;animation-iteration-count:infinite,infinite;animation-play-state:running,running}.snowflake:nth-of-type(0){left:1%;-webkit-animation-delay:0s,0s;animation-delay:0s,0s}.snowflake:nth-of-type(1){left:10%;-webkit-animation-delay:1s,1s;animation-delay:1s,1s}.snowflake:nth-of-type(2){left:20%;-webkit-animation-delay:6s,.5s;animation-delay:6s,.5s}.snowflake:nth-of-type(3){left:30%;-webkit-animation-delay:4s,2s;animation-delay:4s,2s}.snowflake:nth-of-type(4){left:40%;-webkit-animation-delay:2s,2s;animation-delay:2s,2s}.snowflake:nth-of-type(5){left:50%;-webkit-animation-delay:8s,3s;animation-delay:8s,3s}.snowflake:nth-of-type(6){left:60%;-webkit-animation-delay:6s,2s;animation-delay:6s,2s}.snowflake:nth-of-type(7){left:70%;-webkit-animation-delay:https://proxy.everskies.com/a/https://proxy.everskies.com/a/2.5s,1s;animation-delay:https://proxy.everskies.com/a/https://proxy.everskies.com/a/2.5s,1s}.snowflake:nth-of-type(8){left:80%;-webkit-animation-delay:1s,0s;animation-delay:1s,0s}.snowflake:nth-of-type(9){left:90%;-webkit-animation-delay:3s,https://proxy.everskies.com/a/https://proxy.everskies.com/a/1.5s;animation-delay:3s,https://proxy.everskies.com/a/https://proxy.everskies.com/a/1.5s}

////////////////////////////////////////////*APP*///////////////////////////////////////////////

.wrapper{
	position: absolute;
	top: 0px;
	right: 0px;
	left: 0px;
	min-height: 500px;
	padding: 30px;
}

.marginbottom30{
	margin-bottom: 30px;
}

.app_button{
	height: 160px;
	background: rgba(255,255,255,.1);
	border: solid 3px #fff;
	color: #fff;
	text-align: center;
	font-size: 18px;
	text-transform: uppercase;
	margin-bottom: 30px;
}

.app_button i{
	margin-top: 10px;
	font-size: 80px;
	line-height: 100px;
	color: #fff;
	display: block;
}

#loader{
	position: fixed;
	top: 0px;
	left: 0px;
	right: 0px;
	bottom: 0px;
	overflow: hidden;
	background: rgba(0,0,0,.8);
	font-size: 20px;
	display: none;
  align-items: center;
  justify-content: center;
  color: #fff;
  text-align: center;
  padding-top: 200px;
}

#showImage{
	display: none;
}

.btn-default{
	background: rgba(255,255,255,.1);
	border: solid 3px #fff;
	color: #fff;
	text-align: center;
	font-size: 16px;
	line-height: 26px;
	text-transform: uppercase;
	margin-bottom: 30px;
}

.margintop30{
	margin-top: 30px;
}