.lds-roller {
  display: inline-block;
  position: relative;
  width: 80px;
  height: 80px;
}
.lds-roller div {
  animation: lds-roller 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  transform-origin: 40px 40px;
}
.lds-roller div:after {
  content: ' ';
  display: block;
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #000;
  margin: -4px 0 0 -4px;
}
.lds-roller div:nth-child(1) {
  animation-delay: -0.036s;
}
.lds-roller div:nth-child(1):after {
  top: 63px;
  left: 63px;
}
.lds-roller div:nth-child(2) {
  animation-delay: -0.072s;
}
.lds-roller div:nth-child(2):after {
  top: 68px;
  left: 56px;
}
.lds-roller div:nth-child(3) {
  animation-delay: -0.108s;
}
.lds-roller div:nth-child(3):after {
  top: 71px;
  left: 48px;
}
.lds-roller div:nth-child(4) {
  animation-delay: -0.144s;
}
.lds-roller div:nth-child(4):after {
  top: 72px;
  left: 40px;
}
.lds-roller div:nth-child(5) {
  animation-delay: -0.18s;
}
.lds-roller div:nth-child(5):after {
  top: 71px;
  left: 32px;
}
.lds-roller div:nth-child(6) {
  animation-delay: -0.216s;
}
.lds-roller div:nth-child(6):after {
  top: 68px;
  left: 24px;
}
.lds-roller div:nth-child(7) {
  animation-delay: -0.252s;
}
.lds-roller div:nth-child(7):after {
  top: 63px;
  left: 17px;
}
.lds-roller div:nth-child(8) {
  animation-delay: -0.288s;
}
.lds-roller div:nth-child(8):after {
  top: 56px;
  left: 12px;
}
@keyframes lds-roller {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.lds-ellipsis {
  display: inline-block;
  position: relative;
  width: 80px;
  height: 80px;
}
.lds-ellipsis div {
  position: absolute;
  top: 33px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #343a40;
  animation-timing-function: cubic-bezier(0, 1, 1, 0);
}
.lds-ellipsis div:nth-child(1) {
  left: 8px;
  animation: lds-ellipsis1 0.6s infinite;
}
.lds-ellipsis div:nth-child(2) {
  left: 8px;
  animation: lds-ellipsis2 0.6s infinite;
}
.lds-ellipsis div:nth-child(3) {
  left: 32px;
  animation: lds-ellipsis2 0.6s infinite;
}
.lds-ellipsis div:nth-child(4) {
  left: 56px;
  animation: lds-ellipsis3 0.6s infinite;
}
@keyframes lds-ellipsis1 {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes lds-ellipsis3 {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(0);
  }
}
@keyframes lds-ellipsis2 {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(24px, 0);
  }
}

.pretty.p-switch {
	margin-top: 1em;
	margin-bottom: 1em;
}

.pretty.p-switch.p-fill input:checked~.state.p-dark:before {
    background-color: #343a40!important;
}

.pretty.p-switch input:checked~.state.p-dark:before {
    border-color: #343a40;
}

body { 
	background: yellow;
	background: rgba(0, 0, 0, 1) !important;
	background: white !important;
}

body.dark { background: black !important; }

body::before,
body > div[data-page="qrcode"]::before,
body > div[data-page="qrcode_admin"]::before {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: -10;
	content: '';
	padding: 5vh;
	background-color: white;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	background-origin: content-box;
	box-sizing: border-box;
	filter: blur(10px);
	opacity: .15;
}

body > div[data-page="qrcode"]::before,
body > div[data-page="qrcode_admin"]::before {
	opacity: 1;
	filter: none;
	z-index: 1;
}

#action button { margin: .5vh 1vh; }

body.dark::before {
	background-color: black !important;
}

body > div[data-page] {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;

	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-around;
	justify-content: space-evenly;
	transition: opacity .5s ease-in-out;
	background-color: transparent;

	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
}

.flex {
	display: flex;
	align-items: center;
	justify-content: space-around;
	justify-content: space-evenly;
}

div[data-page="iframe"] { position: relative; }
div[data-page="iframe"] iframe {
	padding: 0;
	margin: 0;
	border: none;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/*body > div > div { width: 100%; }*/

body[data-page="home"] #nav { display: none; }

body > div[data-page], #nav, #nav #home { z-index: -2; opacity: 0; }
body > div[data-page] { min-height: 100%; }

body > div[data-page="menu"],
body > div[data-page="menu_admin"] {
	overflow-y: auto;
}

body > div[data-page="menu"] i,
body > div[data-page="menu_admin"] i {
	margin-right: .5em;
}

body[data-page="iframe"].connected > #nav,
body[data-page="iframe"].connected > #nav #home,

/*body > div[data-page="loader"], */
body:not(.connected) > div[data-page="network_error"], 
/*body:not(.connected)[data-page="quizz"] > #network_error, */
body[data-page="login"] > div[data-page="login"], 
body:not([data-page]).connected > div[data-page="loader"], 
body[data-page="home"].connected > div[data-page="home"], 
body[data-page="welcome"].connected > div[data-page="welcome"], 
body[data-page="question_album"].connected > div[data-page="question_album"], 
body[data-page="qrcode"].connected > div[data-page="qrcode"], 
body[data-page="qrcode_admin"].connected > div[data-page="qrcode_admin"], 
body[data-page="menu"].connected > div[data-page="menu"], 
body[data-page="menu_admin"].connected > div[data-page="menu_admin"], 
body[data-page="faq"].connected > div[data-page="faq"], 
body[data-page="quizz"].connected > div[data-page="iframe"], 
body[data-page="iframe"].connected > div[data-page="iframe"], 
body[data-page="upload"].connected > div[data-page="upload"],
body[data-page="preview"].connected > div[data-page="preview"],
body[data-page="disclaimer"].connected > div[data-page="disclaimer"] 
{ opacity: 1; z-index: 1; }
/* Surcouche pour éviter les events */
/*body > div.mask { z-index: -1; }*/

#nav { 
	position: fixed;
	top: 0;
	right: 0; 
	display: inline-block;
	margin: 1vh;
	width: auto;
	z-index: 2;
}

#nav > * {
	width: 4vh;
	height: 4vh;
	margin: 1vh;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	filter: grayscale(1) brightness(5) drop-shadow(0 0 2px black);
}

#nav #home { background-image: url(/img/livescreen/home.png); transition: opacity .5s ease-in-out; }
#nav #home.light { opacity: .15 !important; }

div.logo {
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	height: 40%;
	width: 40%;
	max-height: 20vh;
}
#qrcode, 
#karaoke { 
	display: none; 
	background-image: url(/img/livescreen/button_karaoke.png);
	width: 30%; 
	height: 30%;
	max-width: 10vh;
	max-height: 10vh;
	opacity: .75;
	filter: drop-shadow(0 0 5px white);
}
#connection { 
	display: none; 
	background-image: url(/img/heart_pink_low.png);
	/*background-image: url(/img/connection_low.png);*/
	width: 30%; 
	height: 30%;
	max-width: 10vh;
	max-height: 10vh;
	opacity: .75;
	filter: drop-shadow(0 0 5px white);
}
#qrcode {
	background-image: url(/img/livescreen/front-end_qrcode.jpg);
}
#logo_customer { width: 70vw; max-height: 20vh; }
/*div[data-page="home"]:not(.background_white) */
#logo_customer { filter: drop-shadow(0 0 1px rgba(255, 255, 255, 1)) drop-shadow(0 0 1px rgba(255, 255, 255, 1)) drop-shadow(0 0 1px rgba(255, 255, 255, 1)) drop-shadow(0 0 1px rgba(255, 255, 255, 1)) drop-shadow(0 0 1px rgba(255, 255, 255, 1)) drop-shadow(0 0 1px rgba(255, 255, 255, 1)) drop-shadow(0 0 1px rgba(255, 255, 255, 1)) drop-shadow(0 0 1px rgba(255, 255, 255, 1)); }
body.qrcode #qrcode,
body.connection #connection,
body.karaoke #karaoke { display: block; }
body > div[data-page="home"].logo_white #logo_customer { filter: grayscale(1) invert() brightness(5); }

body[data-page="login"] #nav { display: none; } 


/*body > div[data-page="menu_admin"] {
	background-position: center;
	background-repeat: repeat;
	background-image: url(/img/livescreen/background_admin_button.png);
}*/

body > div[data-page="login"],
body > div[data-page="network_error"],
body > div[data-page="menu"], 
body > div[data-page="menu_admin"] {
	justify-content: center !important;
}
body > div[data-page="menu_admin"] > button.canva,
body > div[data-page="menu"] > button.canva { display: none; }
body > div[data-page="menu_admin"] > button,
body > div[data-page="menu"] > button {
	width: 100%;
	max-width: 70vw;
	margin: 1.75vh 0;
	margin: .5vh 0;
	padding: 1vh 5vw;
}
body > div[data-page="menu_admin"] > button {
	text-align: left;
}
body > div[data-page="home"] {
	position: relative;
}
body > div[data-page="home"] .icon {
	width: 3vh;
	height: 3vh;
	opacity: .1;
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	position: absolute;
	bottom: 0;
	margin: .75em;
}
#action_exit { left: 0; background-image: url(/img/exit_low.png); }
#action_admin { right: 0; background-image: url(/img/key_low.png); }

body > div[data-page="menu"] > button.admin {
	/*margin-top: 4em;*/
}
body > div[data-page="menu_admin"] > button.btn,
body > div[data-page="menu"] > button.btn {
	background-color: rgba(255, 255, 255, .75);
}
body > div[data-page="menu_admin"] > button.btn-outline-success,
body > div[data-page="menu"] > button.btn-outline-success {
	color: green;
}
body > div[data-page="menu_admin"] > button img,
body > div[data-page="menu"] > button img {
	height: 1em;
	margin-right: .5em;
	vertical-align: middle;	
}

body > div[data-page="faq"] {
	overflow-y: auto;
	flex-flow: wrap;
	padding: 5vh 0 7vw;
	flex-direction: column;
	justify-content: flex-start !important;
	flex-flow: column;
}
body > div[data-page="faq"], div[data-page="faq"] h1 { font-size: 1em; }
body > div[data-page="faq"] h1 { font-size: .95em; /*font-weight: bold;*/ margin-bottom: 0; padding: .5em; }
body > div[data-page="faq"] > div {
	width: calc(90vw - 2em);
	position: relative;
	margin-left: 2em;
	background: rgb(0, 0, 0, .05);
	margin-bottom: .5em;
	padding: .25em .5em;
	border-radius: .25em;
	border: solid .1em rgb(0, 0, 0, .25); 
}
body > div[data-page="faq"] > img { 
	filter: grayscale(1);
	height: 5em;
	margin: 0 auto 2em;
	display: block;
}
body > div[data-page="faq"] > div > img {
	position: absolute; 
	width: 1.5em; 
	left: -1.5em; 
	filter: grayscale(1);
	transform: translateX(-50%) translateY(-50%);
  top: 50%;
}
body > div[data-page="faq"] ul { display: none; list-style: none; margin-left: 0; padding-left: 0; margin-bottom: 0; padding: .5em; }
body > div[data-page="faq"] ul > li { padding-left: .75em; margin: 0; border-left: solid .25em rgba(0, 0, 0, .5); font-size: .9em; }
body > div[data-page="faq"] ul > li:not(:first-child) { margin-top: 1em; }
body > div[data-page="faq"] ul > li:last-child { margin-bottom: .125em; }
body > div[data-page="faq"] a { color: inherit; font-weight: bold; text-decoration: none; }

body > div[data-page="home"] #user_name {
	position: fixed;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	margin: 0;
	opacity: .5;
	background: linear-gradient(to top, black, transparent);
	width: 100%;
	text-align: center;
	padding: 1.5em 0 .5em;
	color: white;
	font-size: .8em;
	text-shadow: 0 0 0.25em black, 0 0 1em black, 0 0 1em black;
	letter-spacing: .075em;
}


body > div[data-page="welcome"],
body > div[data-page="home"] { background: transparent; }
body > div[data-page="home"]::after,
body > div[data-page="home"]::before,
body > div[data-page="welcome"]::after,
body > div[data-page="welcome"]::before {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: -2;
	content: '';
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	
	transition: background 1s;
	/*transition: background-color .5s;*/
}
/*div[data-page="home"]::before {
	transition: none;
}*/
body > div[data-page="home"]::before {
}
body > div[data-page="home"]::after {
	z-index: -1;
	/*background: rgba(0, 0, 0, .25);*/
}
body:not(.info):not(.info_share) > div[data-page="home"].background_white::after {
	background: rgba(255, 255, 255, .75);
}
/*div[data-page="upload"] { background: transparent; }*/

div[data-page="welcome"] {
	color:  white;
	font-size: 1.5em;
	text-align: center;
	font-weight: lighter;
	font-style: italic;
}
div[data-page="welcome"] .container {
	padding: 0 10vw;
}
div[data-page="welcome"] img {
	max-width: 70vw;
	margin: auto;
	display: block;
	margin-bottom: 10vh;	
}
div[data-page="welcome"] button {
	margin-top: 1em;
}
div[data-page="welcome"]::after { background: rgba(0, 0, 0, .75); }

body > div[data-page="login"] {
	justify-content: center;
}
body > div[data-page="login"]::before {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	content: '';
	z-index: -1;
	filter: brightness(.5);
	
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	background-image: url(/img/livescreen/webapp_background3.jpg);
}
body > div[data-page="login"] .logo {
	width: 100%;
	height: 100%;
	max-width: 80vw;
	max-height: 15vh;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	background-image: url(/cache/files/112a0503afc9520166e866266721d1e8_low_transparent.png);
	/*background-image: url(/img/livescreen2.png); */
	margin-bottom: 3em;
}
body > div[data-page="login"] input {
	width: 70vw;
	padding: 1em;
	font-size: 1.25em;
	text-align: center;
	letter-spacing: .5em;
	padding: 0 0 0 .5em;
	caret-color: transparent;
	text-transform: uppercase;
	text-decoration: none;
}
body > div[data-page="login"] input:not(:focus-within):not(.btn-success):not(.btn-danger) {
	background: rgba(255, 255, 255, .85);
}

#action { 
	margin: 1em auto 0; 
	text-align: center; 
	display: flex; 
	align-items: center; 
	justify-content: flex-start; 
	flex-direction: column;
	max-width: 80vw;
}

#buttons {
	margin: 1.5em auto .5em;
	min-width: 50vw;
	max-width: 80%;
}
/* Désactivé */
body:not(.admin) #autoshoot_box { display: none; }
#autoshoot_box p { margin-top: 0; font-size: .8em; font-style: italic; }
#buttons button {
    width: 100%;
    margin: .25em 0;
}

.back_to_init { margin-top: 1em; margin-bottom: 0; }

#album_email[data-defined="0"] [data-defined="1"],
#album_email[data-defined="1"] [data-defined="0"] { display: none; }

#album_email[data-defined="1"] input {
	background-color: transparent;
	color: white;
	text-align: center;

	font-size: .9em;
	/* font-weight: bold; */
	width: auto !important;
	margin: .5em auto 1em;
	padding: 0;	
}

#album_email p[data-defined] {
	display: flex;
	align-items: center;
	justify-content: center;
	/*justify-content: space-between;*/
}
#album_email p[data-defined] span {
	padding: 0.25em 0.75em;
	border: solid 1px;
	border-radius: .5em;
	margin: 0 0.25em;
}
#album_email p[data-defined] span img {
	height: 1em;
	filter: brightness(1.25);
}

/*#action > * { height: 100%; }*/

body:not([data-status="init"]) #buttons,
body:not([data-status="init"]):not([data-status="uploading"]) #autoshoot_box .pretty,
body:not([data-status="init"]) #autoshoot_box p,
body:not([data-status="init"]) #message,
body:not([data-status="uploading"]) #progressbar,
body:not([data-status="done"]) #thanks { display: none; }

#logo_livescreen {
	width: 30%; 
	height: 30%;
	max-width: 7.5rem;
	max-height: 20vh;
	background-image: url(/img/livescreen2.png);
}
body.christmas #logo_livescreen {
	width: 60%; 
	max-width: 15rem;
	background-image: url(/img/livescreen/logo_christmas.png);
	max-height: 30vh;
}

#logo_livescreen.disabled { opacity: .5; }

#filters {
	/*background: rgba(0, 0, 0, .05);*/
	/*border: solid 2px rgba(0, 0, 0, .1);*/
	/*padding: .75vh 1vh;	*/
	padding: .75vh 0;	
	max-width: 80vw;
	display: none;
}

/*#filters > * { width: 100%; }*/

#filters button {
	padding: .0125rem .25rem;
	margin: .125rem;		
}

#image { max-width: 80vw; }

#preview {
	max-width: 80vw;
	max-height: 50vh;
	/*background: red;*/
	height: 80vw;
	width: 80vw;
}

canvas {
	max-width: 100%;
	max-height: 100%;
}

#progressbar { text-align: left; width: 100%; }

#thanks { color: white; padding: 1em 2em; border-radius: .5em; }
#thanks[data-error="0"] { background: green; }
#thanks[data-error="1"] { background: red; }

#thanks[data-error="1"] #album_email { display: none; }
#thanks big { font-family: Segoe UI Symbol; display: block; font-size:1.25em; }
#thanks #text { margin-bottom: 0; }
#album_email { margin-top: 1em; }

#album_email input { text-align: center; margin-top: .25em; font-size: .9em; }


@media (orientation: portrait) {
	div.logo { width: 60%; width: 60vw; height: 30%; height: 30vh; }  
}

body > div[data-page="network_error"] img {
	max-width: 20vw;
	max-height: 25vh;
}
body > div[data-page="network_error"] div {
	transform: scale(.75);
}

#image_upload {
	position: absolute; 
	left: -1000px;
	top: 0;
}

div.cropper-modal {
	opacity: .75;
}

/* A RETRAVAILLER POUR SUPPRIMER LES BORDS HORIZONTAUX */
/* $('.cropper-container, #preview').height($('.cropper-crop-box').height()); $('.cropper-crop-box').css('transform', 'none'); */
/*.cropper-crop-box,
.cropper-canvas {
	transform:  none !important;
}*/

.btn-outline-dark:hover { color: inherit !important; background-color: inherit !important; border-color: inherit !important; }

body > div[data-page="disclaimer"] .container { max-width: 90%; border: solid 1px #eee; background: #f5f5f5; padding: .5em 1em; font-size: 2vh; }
body > div[data-page="disclaimer"] .buttons { width: 100%; display: flex; align-items: center; justify-content: space-around; justify-content: space-evenly; margin-top: 1em; }
body > div[data-page="disclaimer"] .buttons button { width: 40%; }

.cropper-bg {
	background: black !important;
}

div[data-page="faq"] li.share div.logo { margin: .5em 0 0; }

/* Message explicatif d'accueil */
div[data-page="home"]::before {
	/*transition: all 1s ease-in-out;*/
}
body.info > div[data-page="home"]::before,
body.info_share > div[data-page="home"]::before {
	filter: brightness(0.25);
	/*background: rgba(0, 0, 0, .75) !important;*/
}
body.info_share #user_name,
body.info_share #logo_customer,
body.info #user_name { display: none; }

body.info_share #qrcode,
body.info_share #karaoke,
body.info_share #connection,
body.info_share #album,
body.info_share #logo_customer,
body.info #qrcode_share,
body.info #qrcode,
body.info #connection,
body.info #album,
body.info #karaoke {
	opacity: 0;
}
body.info_share #logo_livescreen,
body.info #logo_livescreen {
	color: white;
	background: transparent;
	width: 80vw;
	/*transition: background 1s ease-in-out;*/
	max-width: none;
	margin: 0 auto;
	text-align: center;
}
body.info_share #qrcode_share,
body.info #logo_customer {
	filter: drop-shadow(0 0 3px white) drop-shadow(0 0 1em white); 
	filter:  drop-shadow(0 0 1px rgba(255, 255, 255, 1)) drop-shadow(0 0 1px rgba(255, 255, 255, 1)) drop-shadow(0 0 1px rgba(255, 255, 255, 1)) drop-shadow(0 0 1px rgba(255, 255, 255, 1)) drop-shadow(0 0 1px rgba(255, 255, 255, 1)) drop-shadow(0 0 1px rgba(255, 255, 255, 1)) drop-shadow(0 0 1px rgba(255, 255, 255, 1)) drop-shadow(0 0 1px rgba(255, 255, 255, 1)) drop-shadow(0 0 1em rgba(255, 255, 255, 1));
}

#goto_qrcode {
	position: absolute;
	/*top: 0;*/
	right: .25em;
	margin: .5em;
	width: 12.5vw;
	height: 12.5vw; 
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	background-image: url(/img/livescreen/front-end_qrcode.jpg);

	margin: 0;
	height: calc(1.5em + .75rem);
	width: calc(1.5em + .75rem);
	filter: invert(1);
	border-radius: .35em;
}

#navigation {
	width: 80vw;
	/*height: 9rem;*/
	/*height: 5rem;*/
	border: none;
}

#question_album {
	justify-content: center;
}
#question_album > * {
	margin: 1rem;
	width: 90vw;
}
#question_album input {
	margin-bottom: .5em;
}
#question_album .buttons {
	flex-direction: row;
}
#question_album .buttons button {
	width: 40vw;
}
#question_album .legend {
	font-size: .8em;
	font-style: italic;
	margin: 0;
	opacity: .5;
}
#question_album .label {
	margin-bottom: .5em;
}
#question_album .legend,
#question_album .label,
#question_album input {
	text-align: center;
}

#question_album[data-type="question"] input,
#question_album[data-type="question"] p.legend,
#question_album[data-type="question"] button[data-answer="2"] { display: none; }

#question_album[data-type="answer"] p.label,
#question_album[data-type="answer"] button:not([data-answer="2"]) { display: none; }

@media (orientation: landscape) {
	body > div[data-page="home"] { flex-direction: row; }
	div.logo { height: 60%; height: 60vh; width: 30%; width: 30vw; max-width: 7.5rem; }
	body.info_share #logo_livescreen,
	body.info #logo_livescreen { display: flex; align-items: center; justify-content: center; margin: 0; width: auto; }

	body[data-page="upload"] div[data-page="upload"] { 
		background-image: url(/img/iphone_horizontal_to_vertical.png);
		background-position: center;
		background-size: auto 30vh;
		background-repeat: no-repeat;
	}
	body[data-page="upload"] div[data-page="upload"] * { display: none; }
}

.rubberBand {
	-webkit-animation-name: rubberBand;
	animation-name: rubberBand;
	-webkit-animation-duration: 1s;
	animation-duration: 1s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
}
	@-webkit-keyframes rubberBand {
		0% {
			-webkit-transform: scale3d(1, 1, 1);
			transform: scale3d(1, 1, 1);
		}
		30% {
			-webkit-transform: scale3d(1.25, 0.75, 1);
			transform: scale3d(1.25, 0.75, 1);
		}
		40% {
			-webkit-transform: scale3d(0.75, 1.25, 1);
			transform: scale3d(0.75, 1.25, 1);
		}
		50% {
			-webkit-transform: scale3d(1.15, 0.85, 1);
			transform: scale3d(1.15, 0.85, 1);
		}
		65% {
			-webkit-transform: scale3d(.95, 1.05, 1);
			transform: scale3d(.95, 1.05, 1);
		}
		75% {
			-webkit-transform: scale3d(1.05, .95, 1);
			transform: scale3d(1.05, .95, 1);
		}
		100% {
			-webkit-transform: scale3d(1, 1, 1);
			transform: scale3d(1, 1, 1);
		}
	}
	@keyframes rubberBand {
		0% {
			-webkit-transform: scale3d(1, 1, 1);
			transform: scale3d(1, 1, 1);
		}
		30% {
			-webkit-transform: scale3d(1.25, 0.75, 1);
			transform: scale3d(1.25, 0.75, 1);
		}
		40% {
			-webkit-transform: scale3d(0.75, 1.25, 1);
			transform: scale3d(0.75, 1.25, 1);
		}
		50% {
			-webkit-transform: scale3d(1.15, 0.85, 1);
			transform: scale3d(1.15, 0.85, 1);
		}
		65% {
			-webkit-transform: scale3d(.95, 1.05, 1);
			transform: scale3d(.95, 1.05, 1);
		}
		75% {
			-webkit-transform: scale3d(1.05, .95, 1);
			transform: scale3d(1.05, .95, 1);
		}
		100% {
			-webkit-transform: scale3d(1, 1, 1);
			transform: scale3d(1, 1, 1);
		}
	}

	div[data-page="home"] div.fb-like {
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		bottom: .5em;
	}

	#direct_action {
		position: absolute;
		top: .5em;
		right: .5em;
		top: 1vh;
		right: .5vh;
		display: flex;
	}

	#direct_action > * {
		width: 10%;
		width: 5vh;
		height: 5vh;
		display: flex;
		text-align: center;
		justify-content: center;
		margin: 0 .5vh;
		font-size: 3vh;
		line-height: 5vh;
	}
	
	#win {
		/*background: white;
		border-radius: 10em;
		border: solid 1px rgb(0 0 48 / 50%);*/

		font-size: 1.5em;
		text-shadow: 0 0 .1em white, 0 0 .1em white, 0 0 .1em white, 0 0 .1em white, 0 0 .1em white, 0 0 .1em white, 0 0 .1em white, 0 0 .1em white, 0 0 .1em white, 0 0 .1em white, 0 0 .1em white, 0 0 .1em white, 0 0 .1em white, 0 0 .1em white, 0 0 .1em white, 0 0 .1em white, 0 0 .1em white;
		text-shadow: 0 0 1px black, 0 0 1px black, 0 0 1px black, 0 0 1px black, 0 0 .1em white, 0 0 .1em white, 0 0 .1em white, 0 0 .1em white, 0 0 .1em white, 0 0 .1em white, 0 0 .1em white, 0 0 .1em white, 0 0 .1em white, 0 0 .1em white, 0 0 .1em white, 0 0 .1em white, 0 0 .1em white, 0 0 .1em white, 0 0 .1em white, 0 0 .1em white, 0 0 .1em white;
		text-shadow: 0 0 1px black, 0 0 1px black, 0 0 1px black, 0 0 1px black, 0 0 .1em white, 0 0 .1em white, 0 0 .1em white, 0 0 .1em white, 0 0 .1em white, 0 0 .1em white, 0 0 .1em white, 0 0 .1em white, 0 0 .1em white, 0 0 .1em white, 0 0 .1em white, 0 0 .1em white, 0 0 .1em white, 0 0 .1em white, 0 0 .1em white, 0 0 .1em white, 0 0 .25em white, 0 0 .25em white, 0 0 .25em white, 0 0 .25em white;
	}

	#qrcode_share {
		border: solid 1px rgb(0 0 48 / 50%);
	}

body.info #logo_livescreen::after,
body.info_share #logo_livescreen::after {
	font-size: 1.5em;
	font-style: italic;

	position: absolute;
	top: 0;
	left: 50%;
	width: 90%;
	transform: translateX(-50%);
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;	
}

div.album {
	position: fixed;
	top: 1vh;
	left: 1vh;
	text-shadow: 0 0 2px white;
	max-width: 30vw;
	color: black;
	font-size: .6em;
	font-style: italic;
	text-align: center;

	background: rgb(255 255 255 / 25%);
	padding: 1em 1em 0.25em;
	border-radius: 0.5em;	
}
div.album div[data-album-picture] {
	display: inline-block;
}
div.album::after {
/*	margin-left: .5em; */
}
div.album img {
	width: auto;
	height: 10%;
	height: 5vh;
	display: block;
	margin: auto;
	margin-bottom: 1em;
}
body[data-album-picture="-1"] div.album,
body[data-album-picture="0"] div[data-album-picture]:not([data-album-picture="0"]),
body[data-album-picture="1"] div[data-album-picture]:not([data-album-picture="1"]),
body[data-album-picture="2"] div[data-album-picture]:not([data-album-picture="2"]) { display: none; }

body[data-album-picture="0"] div.album img { filter: drop-shadow(0 0 1px red) drop-shadow(0 0 1px red) drop-shadow(0 0 1px red) drop-shadow(0 0 .5em red); }
body[data-album-picture="1"] div.album img { filter: drop-shadow(0 0 1px orange) drop-shadow(0 0 1px orange) drop-shadow(0 0 1px orange) drop-shadow(0 0 .5em orange); }
body[data-album-picture="2"] div.album img { filter: drop-shadow(0 0 1px green) drop-shadow(0 0 1px green) drop-shadow(0 0 1px green) drop-shadow(0 0 .5em green); }

#no_touch {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: transparent;
	z-index: 99999999999999999;
}

div[data-page="preview"], div[data-page="preview"] * { text-align: center; }
div[data-page="preview"] p { max-width: 90vw; }
div[data-page="preview"] img { max-width: 90vw; margin: 1em auto 1.5em; border: solid 2px; max-height: 335vh; }
div[data-page="preview"] div.buttons { display: flex; align-items:: center; justify-content: space-around; }
div[data-page="preview"] #confirm_text { font-weight: bold; margin: 0 auto; }
div[data-page="preview"] #h_vs_v { 
	display: flex;
	align-items: center;
	justify-content: space-around;
	width: 100%;
	margin: 1.25em auto .75em;
}
div[data-page="preview"] #h_vs_v > div {
	width: 45%; height: 15vh;
	background-repeat:no-repeat;
	background-size: contain;
	background-position: center;
	filter: drop-shadow(0 0 1px white) drop-shadow(0 0 1px white) drop-shadow(0 0 1px white) drop-shadow(0 0 1px white) drop-shadow(0 0 1px white) drop-shadow(0 0 1px white) drop-shadow(0 0 1px white);
}
div[data-page="preview"] #photo_horizontal {
	background: hsl(0deg 100% 38%);
	color: white;
	padding: 1em;
	border-radius: 0.5em;
	font-style: italic;
	max-width: 90%;
	margin: 0 auto 1em;	
}
div[data-page="preview"]:not(.zoom_centered) #confirm_text { font-weight: normal; }
div[data-page="preview"]:not(.zoom_centered) #h_vs_v,
div[data-page="preview"]:not(.zoom_centered) #photo_horizontal { display: none; }

::scrollbar,
::-webkit-scrollbar {
    width: 0;
    background: transparent;
}

div[data-page="menu"] button[data-href="mosaic_question"] {
	margin-bottom: 2em;
}