html, body {
	height: 100%;
	width: 100%;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
	flex: 1 0 100%;
	/*font-family: 'Didact Gothic', sans-serif;*/
}

.hidden {
	display: none !important;
}

#debug {
	position: fixed;
	bottom: 0;
	right: 0;
	opacity: 0.7;
	color: #888;
	font-size: 14px;
	text-transform: uppercase;
	font-family: "Lucida Console", Monaco, monospace;
	padding: 20px;
}

#debug table tr td:first-child {
	text-align: right;
	padding-right: 10px;
}

#debug table tr td:last-child {
	text-align: left;
	min-width: 40px;
}

div#contentBackground {
	top: 0;
}

div#testContainer {
	position: relative;
	flex: 0;
}

div#toplevel {
	transform-origin: center center;
	position: relative;
	flex: 0;
}

div#header {
	width: 100%;
	position: absolute;
}

div#studentName {
	position: fixed;
	top: 10px;
	left: 50%;
	width: 1170px;
	margin-left: -585px;
	color: #AAA;
	font-size: 30px;
}

div#footer, div#copyright, div#copyright p {
	line-height: normal;
}

div#footer {
	position: absolute;
	bottom: 0;
	top: auto;
	left: 0;
	right: 0;
	flex: 0;
	width: 100%;
	text-align: left;
	padding-left: 50px;
	border: none;
	background-color: #777;
	font-size: 14px;
	margin: 0;
	padding: 0;
	height: auto;
}

.shadow-box {
	box-shadow: 0px 0px 23px -1px rgba(0,0,0,0.13);
}

div#copyright {
	color: white;
	margin-top: 10px;
	text-align: left;
	padding-left: 10px;
}

div#contentArea {
	border: 1px solid #DDD;
}

div#contentFooter {
	border-top: 1px solid #DDD;
	background-color: transparent;
}

div#progressBar {
	border-radius: 5px;
	border: none;
	background: #CCC;
	background-color: #CCC;
	height: 50px;
	top: 15px;
	position: relative;
}

div#progressBar::after {
	content: "Progress bar";
	color: white;
	position: absolute;
	top: 10px;
	left: 10px;
	font-family: 'Didact Gothic', sans-serif;
	font-weight: bold;
	font-size: 22px;
}

div#progressBar div.ui-progressbar-value {
	background-image: none !important;
	background-color: #1bb3e6;
	background: #1bb3e6;
	border: none;
}

button.nextButton, button.continueButton {
	position: absolute;
	font-weight: bold;
	padding: 6px 10px;
	font-size: 26px;
	font-weight: bold;
	font-family: 'Didact Gothic', sans-serif;
	letter-spacing: 1.5px;
}

button.nextButton {
	bottom: 10px;
	right: 5px;
}

button.continueButton {
	top: 0;
	left: 54px;
}

.ProximaNovaSoft-Bold {
	/*font-family: 'Didact Gothic', sans-serif;*/
	/*font-weight: 700;*/
}

div.clickableChoiceUnselected,
div.clickableChoiceSelected,
div.draggableChoiceSelected,
div.draggableChoiceUnselected {
	/*line-height: 10px !important;
	width: auto !important;
	height: auto !important;*/
}

div.clickableChoiceSelected,
div.draggableChoiceSelected {
	color: #0047ba;
	/*font-weight: bold !important;*/
}

div.clickableChoiceUnselected,
div.draggableChoiceUnselected {
	color: #BBB;
	/*font-weight: normal !important;*/
}


div.clickableChoiceSelected:hover,
div.draggableChoiceSelected:hover,
div.clickableChoiceUnselected:hover,
div.draggableChoiceUnselected:hover {
	filter: brightness(0.85);
}

div.words2SentenceChoice, div.wordSelectChoice {
	/*font-size: 60px !important;*/
	/*font-weight: bold;*/
}

div.volumeFrame {
	height: 55px;
	top: 15px;
	background-color: white;
	border: 1px solid #DDD;
}

div.volumeIcon {
	top: 10px;
}

slider#volumeSlider {
	top: 17px;
	height: 18px;
	background: #999 none repeat scroll center
}

.ui-slider span.ui-slider-handle {
	width: 18px !important;
	height: 18px !important;
	cursor: -moz-grab; cursor: -webkit-grab; cursor: grab;
}

.ui-slider span.ui-slider-handle.ui-state-active{
	cursor: -moz-grabbing; cursor: -webkit-grabbing; cursor: grabbing;
}

button#startButton {
	font-size: 36px;
	padding: 18px;
	margin: 30px;
	font-family: 'Varela Round', sans-serif;
}

div#splashScreenWelcomeText {
	font-size: 48px;
	position: relative;
	height: auto;
	line-height: 48px;
	color: #444;
	font-family: 'Varela Round', sans-serif;
}

div#splashScreen {
	font-family: 'Varela Round', sans-serif;
	transform-origin: center top;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	position: relative;
	width: 100%;
	height: auto;
	margin: 0 auto;
	top: auto;
	left: auto;
	margin-top: 150px;
}

div#splashScreen.hidden {
	display: none;
}

button, button.btn, #replayButton {
	font-family: 'Didact Gothic', sans-serif;
}

button.replayButton {
	margin: 10px;
	padding-left: 30px;
}

button.replayButton::after {
	content: url('../images/play_icon.png');
	position: absolute;
	left: 10px;
	top: 13px;
}

button.replayButton.disabled {
	filter: grayscale(100%);
	color: #BBB;
}


div#letterSelectAnswerArea div.clickableChoiceUnselected,
div#letterSelectAnswerArea div.clickableChoiceSelected {
	/*top: -26px !important;*/
	font-weight: bold !important;
	/*font-size: 70px !important;*/
}

div.letters2WordChoice {
	/*font-size: 70px !important;*/
	font-weight: bold !important;
}

div#letters2WordAnswerArea div.letters2WordChoice {
	/*top: 115px !important;*/
}

div.answerAreaMidline {
	opacity: 0.3;
}

div#continueFrame {
	top: 15px;
	left: 930px;
}

.instruction-videos {
	border-radius: 15px;
	background-color: #f2f2f2;
	margin-top: 40px;
	padding: 40px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
}

.instruction-videos p {
	font-size: 18px;
}

.instruction-videos .videos-row {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
}

.instruction-video {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	margin: 10px;
}

.instruction-video button {
	margin-top: -20px;
	z-index: 10;
	font-size: 19px;
	padding: 6px 24px;
	border-radius: 10px;
}

.instruction-video .video-thumbnail {
	width: 330px;
  height: auto;
  border: 1px solid #ccc;
}

.video-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 330px;
	height: 187px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	background-color: rgba(0,0,0,0.02);
	backdrop-filter: blur(1px);
}

.video-overlay:hover {
	background-color: rgba(0,0,0,0.04);
}

.video-overlay img.play-button {
	width: 70px;
	height: auto;
	margin-top: 50px;
}


.remodal-close, .remodal-close:before {
	left: auto;
	right: 0;
}

.modal {
	border-radius: 5px;
	box-shadow: 0 5px 15px rgba(0,0,0,.5);
	font-family: 'Varela Round', sans-serif;
}

.remodal-overlay {
	background: rgba(0,0,0,0.5);
}

.video-modal video {
	width: 100%;
}

.modal h2 {
	text-align: center;
	font-size: 28px;
	width: 100%;
	margin: 20px 0 10px;
}

.logout-button {
	font-family: 'Varela Round', sans-serif;
  position: fixed;
  top: 10px;
  right: 15px;
  color: #777;
  z-index: 11;
  cursor: pointer;
  font-size: 14px;
  background-color: #fff;
  padding: 5px;
  border-radius: 4px;
  border: 1px solid transparent;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

.logout-button span.times-icon {
  color: #bbb;
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 3px;
}

.logout-button:hover {
	border: 1px solid #888;
}

.logout-button .logout-tooltip-container {
  position: relative;
  margin-right: 7px;
}

.logout-button .logout-tooltip-container .logout-tooltip {
  display: none;
}

.logout-button:hover span.times-icon {
  color: #800;
}

.logout-button:hover .logout-tooltip {
  display: block;
}

.fancy-button {
	padding: 10px 16px;
  font-size: 18px;
  line-height: 1.3333333;
  border-radius: 6px;
  color: #333;
  background-color: #fff;
  border-color: #ccc;
  display: inline-block;
  margin-bottom: 0;
  font-weight: 400;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  touch-action: manipulation;
  cursor: pointer;
  user-select: none;
  background-image: none;
  border: 1px solid #ccc;
}

.fancy-button:hover {
	color: #333;
  background-color: #e6e6e6;
  border-color: #adadad;
}

.fancy-button.danger-button {
	color: #fff;
  background-color: #d9534f;
  border-color: #d43f3a;
}

.fancy-button.danger-button:hover {
	color: #fff;
  background-color: #c9302c;
  border-color: #ac2925;
}

@media(max-width: 1200px) {
	div#splashScreen {
		width: 100vw;
		font-family: 'Varela Round', sans-serif;
		color: #444;
	}

	div.instruction-videos {
		margin-top: 0;
	}

	div#splashScreen {
		margin-top: 50px;
	}
}

@media(max-width: 570px) {
	div#splashScreenWelcomeText {
		font-size: 10vw;
		line-height: 12vw;
		color: #444;
	}
}

@media(max-width: 500px) {
	#loading-screen #loading-screen-content h1 {
		font-size: 11vw;
	}

	#loading-screen #loading-screen-content h2 {
		font-size: 9vw;
	}
}

@media(max-width: 430px) {
	.video-overlay img.play-button {
		width: 15vw;
		margin-top: 10vw;
	}
}

@media(max-width: 420px) {
	button#startButton {
		font-size: 8vw;
		padding: 20px;
		margin: 30px 15px;
	}
}

@media(max-width: 390px) {
	.instruction-video .video-thumbnail, .instruction-video .video-overlay {
		width: 80vw;
		height: 45vw;
	}
}