* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; width: 100%; }
body {
	color: #000;
	font-family: Montserrat, sans-serif;
	font-size: 10pt; 
	font-weight: 400; 
	background: #522a73; background-image: url(/assets/background.jpg); background-repeat: no-repeat; background-attachment: fixed;	background-size: cover;
	
  user-select: none; /* supported by Chrome and Opera */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none;	
	
}
input, button { -webkit-appearance: none; -moz-appearance: none; appearance: none; font-family: Montserrat, sans-serif; }
input[type="submit"]:disabled, button:disabled { color: #9f74c3; }
input[type="text"] { font-size: 11pt; }
input:focus, select:focus, textarea:focus, button:focus { outline: none; }


/* page structure */		
.page { height: 100%; display: flex; flex-direction: column; }		
header { box-shadow: 0px 2px 5px rgba(0,0,0,0.25); padding: 8px 15px; flex-shrink: 0; }
footer { background: #2dc1dd; padding: 15px; flex-shrink: 0; }
nav { font-size: 1.5em; letter-spacing: 2px; display: flex; justify-content: space-between; align-items: center; }
nav img { height: 40px; }
.content { flex: 1; overflow-y: scroll; OFF-webkit-overflow-scrolling: touch; position: relative; color: #fff; font-size: 11pt; }
.content h3 { text-align: center; margin: 0px 0 10px 0; font-weight: 300; letter-spacing: 1px; }
.content a { color: #fcde31; text-decoration: none; }
.content a:hover { color: #d7bd29; text-decoration: none; }
.content-header { background: #73548d; color: #fff; font-size: 2.4em; font-weight: 600; text-align: center; padding: 10px 0; letter-spacing: 1px; }
.progress-wrapper { background: #e80a89; min-height: 4px; width: 100%; }
.progress { background: #25c0dd; height: 4px; width: 50%; }

/* modal dialog */
.remove-scroll-bars { overflow: hidden; }
.modal-dialog-overlay { display: flex; justify-content: center; align-items: center; height: 100%; width: 100%; position: fixed; top: 0; background: #000; opacity: 0; transition: opacity 0.75s, visibility 0.75s; visibility: hidden; }
.modal-dialog-overlay-open { visibility: visible; opacity: 0.8; }
.modal-dialog { height: 100%; width: 100%; position: fixed; top: -100%; display: flex; justify-content: center; align-items: center; transition: top 0.5s; }
.modal-dialog-open { top: 0; }
.modal-content { background: #522a73; border-radius: 5px; width: 80%; padding: 20px; margin: auto; color: #fff; font-size: 1.25em; line-height: 1.3em; }
.modal-dialog .modal-buttons { margin-top: 20px; text-align: center; display: flex; flex-direction: row; justify-content: center; align-items: center; }
.modal-dialog .modal-buttons button { margin-left: 15px; margin-right: 15px; }
		
/* buttons */		
.k-button { border: none; border-radius: 5px; font-size: 11pt; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; padding: 7px 15px; display: flex; flex-direction: row; align-items: center; margin: auto; }
.k-button > img { height: 20px; margin-right: 5px; border: none !important; }
.k-button-primary { background: #ffdb32; color: #522a73; }
.k-button-primary:active { background: #dac12a; }
.k-button-secondary { background: #73548d; background: rgba(115, 84, 141, 0.75); color: #ffdb32; }
.k-button-secondary:active { background: rgba(115, 84, 141, 0.5); }
.k-button-refresh { background: #e71389; border: none; border-radius: 5px; width: 30px; height: 30px; display: flex; justify-content: center; align-items: center; color: #fff; }
.k-button-refresh img { height: 18px; }
.k-button-refresh:active { background: #c30f73; }

/* input */
.k-input { border: none; border-radius: 5px; background: #fff; color: #522a73; padding: 7px 15px; }

/* welcome */
.welcome { padding: 20px 30px; line-height: 1.25em; font-size: 1.1em; font-weight: 400; }
.welcome h2 { font-weight: 600; text-align: center; margin-top: 20px; margin-bottom: 5px; font-size: 1.2em; letter-spacing: 1px; }

/* transit */
.transit { padding: 20px 30px; line-height: 1.3em; font-size: 1.25em; font-weight: 400; }
.transit .warning { border-radius: 5px; background: #fff; padding: 20px; color: #000; text-align: center; font-style: italic; margin-top: 20px; font-size: 0.8em; }
.transit .warning h3 { color: #522a73; text-align: center; font-weight: 600; font-style: normal; font-size: 1.2em; }

/* question */
.question { padding: 20px 30px; line-height: 1.3em; font-size: 1.25em; font-weight: 400; }
.question > img { display: block; max-width: 100%; height: auto; margin-bottom: 10px; margin-left: auto; margin-right: auto; border: solid 4px #fff; }
.question .transit-info { margin-top: 40px; font-size: 0.7em; line-height: 1.25em; }
.question .transit-info h2 { font-size: 1em; font-weight: 600; margin-bottom: 0px; }
.question h2 { font-weight: 600; text-align: center; margin-top: 20px; margin-bottom: 5px; font-size: 1.2em; letter-spacing: 1px; }

/* question info */
.question-info { padding: 20px 30px; line-height: 1.3em; font-size: 1.25em; }
.question-info h2 { font-size: 1.2em; text-align: center; margin-bottom: 0px; font-weight: 400; }
.question-info img { display: block; max-width: 100%; height: auto; margin-bottom: 10px; margin-left: auto; margin-right: auto; border: solid 4px #fff; }		

/* finished */
.finished { padding: 20px 30px; line-height: 1.3em; font-size: 1.25em; }

/* answer checking */
.result-check { height: 100%; width: 100%; position: absolute; top: 0; background: #512a73; opacity: 0; transition: opacity 0.75s, visibility 0.75s; visibility: hidden; }
.result-check-show { visibility: visible; opacity: 1; }
.result-check-logo { display: none; width: 100%; padding: 25%; }
/*OLD.result-check-logo img {
	width: 100%;
	height: auto;
	animation: rotate 2s;
  animation-iteration-count: infinite;
  OFFanimation-direction: alternate;
  animation-timing-function: linear;
	transform-origin: center center;
	} */
.result-check-logo-show { display: block; }				

.result-wrapper { display: none; }
.result {	display: none; height: 100%; font-size: 0pt; line-height: 40pt; animation-name: zoom-in; animation-duration: 0.6s; animation-delay: 0.25s;
	animation-fill-mode: forwards; text-align: center; color: #fff; letter-spacing: 3px; text-transform: uppercase; }
.result-show { display: block; }

/*@keyframes rotate {
  from {
    transform: rotateY(0);
  }
  to {
    transform: rotateY(359deg);
  }
	} */
@keyframes zoom-in {
  0%   { font-size: 0pt; }
  75%  { font-size: 52pt; }
	100% { font-size: 32pt; }
}

.result-check-logo-img {
	width: 100%;
	padding: 0 25%;
	height: auto;
	 transform-origin: center center; -webkit-animation: clockwise 0.75s infinite linear; -moz-animation: clockwise 0.75s infinite linear; animation: clockwise 0.75s infinite linear; animation-delay: 0.25s; animation-fill-mode: forwards; }
@-moz-keyframes clockwise {
  0% { -moz-transform: rotate(0deg); }
  100% { -moz-transform: rotate(360deg); }
}
@keyframes clockwise {
  0% { transform: rotatey(0deg); }
  100% { transform: rotatey(360deg); }
}