/* apply a natural box layout model to all elements */
* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }

img {
	border:0;
	display: block;
}

#accessibility {
	height:0;
	visibility:hidden;
}

span.cleared {
	display:block;
	margin:0;
	padding:0;
	clear:both;
	height:0px;
	width:100%;
}

forms {margin:0; padding:0;}
fieldset {margin:0; padding:0;}
select, option {background-color:#fff; border:none;}
button { padding: 0; border: none; background: none;}
*:focus {outline:0;}

body {
	background-color: #fff;
	font-family: 'Staatliches';
	color: #fff;
}

button, h2, h3, input, .levelFeedbackContainer, #levelObservationQuestionsContainer .questionOptionContainer, .statsPanelElement {
	text-transform: uppercase;
	font-size: 35px;
	/* font-size: 2.2rem; */
	letter-spacing: 1.6px;
	/* letter-spacing: 0.1rem; */
	font-weight: 100;
}

@media screen and (min-height: 768px) and (max-width: 1024px) {
	button, h2, h3, input, .levelFeedbackContainer, #levelObservationQuestionsContainer .questionOptionContainer, .statsPanelElement {
		font-size: 32px;
		letter-spacing: 1px;
	}
}

/* mobile */
@media screen and (max-height: 767px) {
	button, h2, h3, input, .levelFeedbackContainer, #levelObservationQuestionsContainer .questionOptionContainer, .statsPanelElement {
		font-size: 6vh;
	}

	h3 {
		font-size: 6vh;
		line-height: 6vh;
		/* font-size: 30px;
		line-height: 30px; */
		margin-top: 10px;
		margin-bottom: 10px;
	}
}

button {
	cursor: pointer;
	color: #fff;
	background-color: #006168;
}

#guideImg {
	position:absolute;
	left: 0;
	top: 0;
	height:881px;
	width:980px;
	/* background: #ffffff url( '../img/guides/01-intro.jpg' ) no-repeat right top; */
	/* background: #ffffff url( '../img/guides/02-gameintro.jpg' ) no-repeat right top; */
	/* background: #ffffff url( '../img/guides/03-aboutyou.jpg' ) no-repeat right top; */
	/* background: #ffffff url( '../img/guides/04-levelselection.jpg' ) no-repeat right top; */
	/* background: #ffffff url( '../img/guides/05-levelintro.jpg' ) no-repeat right top; */
	/* background: #ffffff url( '../img/guides/06-levelObservation-01.jpg' ) no-repeat right top; */
	/* background: #ffffff url( '../img/guides/06-levelObservation-03.jpg' ) no-repeat right top; */
	background-size: contain;
}

#contentWrapper {
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: #000;
	max-width: 1180px;
	max-height: 768px;
	overflow: hidden;
	left: 50%;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
}

.outOfView {
	display: none;
}

.inView {
	display: block;
}

#mainBackground {
	position: absolute;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.mainBackgroundImage {
	position: absolute;
	height: 80%;
	/* height: 95%; */
	right: 100%;
	top: 50%;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	opacity: .4;
	border-radius: 50px;
	-webkit-transition: all 1.5s; /* Safari */
	transition: all 1.5s;
}

#mainBackground .imageShown {
	right: 0;
}

.levelBackgroundImage {
    position: absolute;
	right: 50%;
	opacity: 0;
    top: 44px;
    height: 250px;
	width: auto;
	-webkit-transition: all 1s; /* Safari */
	transition: all 1s;
}

/* mobile */
@media screen and (max-height: 767px) {
	.levelBackgroundImage {
		top: 94px;
		height: 60%;
		max-height: 250px;
	}
}

.levelBackgroundImageAppear {
    right: 0;
	opacity: 1;
}

.levelInstructionsImage {
    position: absolute;
    left: 100px;
    top: 260px;
    height: 190px;
	width: auto;
	opacity: 0;
	transition: opacity 1s 0s;
}

@media screen and (min-height: 768px) and (max-width: 1024px) {
	.levelInstructionsImage {
		height: 150px;
	}
}

.volumeButtonPlay {
	float: right;
	position: relative;
	top: 25px;
	right: 30px;
}

.playSound {
	width: 50px;
}

.playSound:hover {
	cursor: pointer;
}

.volumeButtonMute {
	float: right;
	position: relative;
    top: 31px;
    right: 30px;
	display: none;
}

.muteSound {
	width: 38px;
}

.muteSound:hover {
	cursor: pointer;
}

.displayMute {
	display: block;
}

.hideVolume {
	display: none;
}

@media only screen and (max-height: 767px) {
	.playSound {
		width: 35px;
	}

	.volumeButtonPlay {
		top: 20px;
		right: 20px;
		z-index: 99999;
	}

	.muteSound {
		width: 28px;
	}

	.volumeButtonMute {
	    top: 25px;
	    right: 30px;
		z-index: 99999;
	}
}

.lineDivider {
	height: 1px;
	background-color: #80715d;
	position: absolute;
	width: 1020px;
	left: -100vw;
	-webkit-transition: left 2.5s; /* Safari */
	transition: left 2.5s;
}

@media only screen and (max-width: 1180px) {
	.lineDivider {
		width: calc(100vw - 160px);
	}
}

#lineDivider1 {
	top: 50px;
}
#lineDivider2 {
	top: 217px;
}
#lineDivider3 {
	top: calc(768px - 217px);
}
#lineDivider4 {
	top: calc(768px - 50px);
}

.lineDividerShown {
	left: 80px;
}

/* mobile */
@media screen and (max-height: 767px) {
	.lineDivider {
		width: calc(100vw - 60px);
	}

	#lineDivider1 {
		top: 3vh;
	}
	#lineDivider2 {
		top: 15vh;
	}
	#lineDivider3 {
		top: auto;
		bottom: 15vh;
	}
	#lineDivider4 {
		top: auto;
		bottom: 3vh;
	}

	.lineDividerShown {
		left: 30px;
	}
}

#introLogo {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 240px;
	height: auto;
	opacity: 0;
	-webkit-transform: translate(-50%,-50%) scale(.5);
	transform: translate(-50%,-50%) scale(.5);
}

.introLogoAppear {
	opacity: 0;
	-webkit-transform: translate(-50%,-50%) scale(0);
	transform: translate(-50%,-50%) scale(0);
	animation-fill-mode: forwards;
	animation-name: introLogoAppearAnimation;
	animation-duration: 4s;
}

@keyframes introLogoAppearAnimation {
	0%   {opacity:0; -webkit-transform: translate(-50%,-50%) scale(.5); transform: translate(-50%,-50%) scale(.5);}
	25%  {opacity:1; -webkit-transform: translate(-50%,-50%) scale(.5); transform: translate(-50%,-50%) scale(.5);}
	80%  {opacity:1; -webkit-transform: translate(-50%,-50%) scale(1); transform: translate(-50%,-50%) scale(1);}
	100% {opacity:0; -webkit-transform: translate(-50%,-50%) scale(1.2); transform: translate(-50%,-50%) scale(1.2);}
}

#headerContainer {
	position: relative;
	width: 100%;
	height: 167px;
	margin-top: 50px;
	/* background-color: rgba(255,255,0,.5); */
	padding: 0 80px;
}

/* mobile */
@media screen and (max-height: 767px) {
	#headerContainer {
		height: 10vh;
		/* height: 60px; */
		margin-top: 5vh;
		/* margin-top: 30px; */
		padding: 0 46px;
	}
}

h1 {
  margin: 0;
  padding: 0;
}

#pagesContainer {
  position: relative;
  width: 100%;
	height: auto;
}

.pageWrapper {
	position: relative;
	min-height: 505px;
	left: 0px;
	overflow: hidden;
	-webkit-transform: translateX(0);
	transform: translateX(0%);
}

/* mobile */
@media screen and (max-height: 767px) {
	.pageWrapper {
		height: 82vh;
		/* height: calc(100vh - 90px); */
		min-height: 0;
	}
}

.pageWrapperHidden {
	-webkit-transform: translateX(-100%);
	transform: translateX(-100%);
}

.pageWrapperSlideIn {
	-webkit-animation: slideIn 400ms ease-in-out;
	-webkit-animation-fill-mode: forwards;
	-webkit-transform: translateX(0);
}

.pageWrapperSlideOut {
	-webkit-animation: slideOut 400ms ease-in-out;
	-webkit-animation-fill-mode: forwards;
	-webkit-transform: translateX(0);
}

.pageWrapperSlideOutLeft {
	-webkit-animation: slideOutLeft 400ms ease-in-out;
	-webkit-animation-fill-mode: forwards;
	-webkit-transform: translateX(0);
}

.pageWrapperSlideFromRight {
	-webkit-transform: translateX(100%);
	transform: translateX(100%);
}

.pageWrapperSlideFromLeft {
	-webkit-transform: translateX(-100%);
	transform: translateX(-100%);
}

@-webkit-keyframes slideIn {
	to {
		-webkit-transform: translateX(0%);
	}
}
@keyframes slideIn {
	to {
		transform: translateX(0%);
	}
}

@-webkit-keyframes slideOut {
	to {
		-webkit-transform: translateX(-100%);
	}
}
@keyframes slideOut {
	to {
		transform: translateX(-100%);
	}
}

@-webkit-keyframes slideOutLeft {
	to {
		-webkit-transform: translateX(100%);
	}
}
@keyframes slideOutLeft {
	to {
		transform: translateX(100%);
	}
}

h1, h2, h6, p {
	padding: 10px 0px 10px 0px;
	text-align: left;
}

p {
	font-family: 'Signika', sans-serif;
	font-weight: 400;
	font-style: normal;
    font-size: 18px;
    line-height: 24px;
	font-weight: 300;
	/* font-size: 1.0rem;
	line-height: 1.5rem;
	font-weight: 100; */
	color: #006168;
	/* margin-bottom: 20px; */
}

@media screen and (min-height: 768px) and (max-width: 1024px) {
	p {
		font-size: 16px;
		line-height: 20px;
	}
}

/* mobile */
@media screen and (max-height: 767px) {
	p {
		font-size: 4vh;
		line-height: 5.5vh;
		/* font-size: 1.3rem;
		line-height: 1.5rem; */
		padding: 0;
		margin: 15px 0;
	}
}

h1 {
	font-size: 3.0rem;
	letter-spacing: 0.075rem;
	color: #fff;
	padding: 20px 0 0 0;
	text-align: left;
}

/* mobile */
@media screen and (max-height: 767px) {
	h1 {
		font-size: 6vh;
		/* font-size: 34px; */
		padding: 1vh 0 0 0;
		/* padding: 12px 0 0 0; */
		letter-spacing: 1px;
	}
}

h2 {
	color: #fff;
	background-color: #0076b1;
	/* background-color: #0086be; */
	text-align: left;
	margin: 0;
	padding: 0 16px 0 16px;
	width: fit-content;
	-webkit-transition: color 1s; /* Safari */
		transition: color 1s;
}

h3 {
	text-align: left;
	color: #0076b1;
	padding: 0;
	margin: 16px 0;
	-webkit-transition: color 1s; /* Safari */
		transition: color 1s;
}

h4 {
	font-size: 22px;
	/* font-size: 1.4rem; */
	letter-spacing: 1.6px;
	/* letter-spacing: 0.1rem; */
	font-weight: 100;
	text-align: left;
	color: #80715e;
}

@media screen and (min-height: 768px) and (max-width: 1024px) {
	h4 {
		font-size: 20px;
	}
}

h6 {
	font-size: 17.0rem;
	font-size: 170px;
	font-weight: 900;
	color: #006168;
}

img {
	padding: 0;
}

.tiledBG {
	position: absolute;
	top: 0;
	left: 0;
	background-image: url("../img/tiled-bg.png");
	background-repeat: repeat;
	width: 100%;
	height: 100%;
	opacity: .5;
}

.standardButton {
	position: absolute;
	right: 100%;
	bottom: 58px;
	height: 50px;
  	color: #e59001;
	background-color: #e59001;
	width: 100%;
	min-width: 220px;
	text-align: left;
	text-transform: uppercase;
	padding: 5px 20px;
	-webkit-transition: right 1.25s 0s, width 1.75s 0s, color 1s 0.5s, background-color .5s; /* Safari */
	transition: right 1.25s 0s, width 1.75s 0s, color 1s 0.5s, background-color .5s;
}

@media screen and (min-height: 768px) and (max-width: 1024px) {
	.standardButton {
		height: 45px;
		bottom: 62px;
	}
}

/* mobile */
@media screen and (max-height: 767px) {
	.standardButton {
		height: 8vh;
		bottom: 4vh;
		/* height: 40px;
		bottom: 41px; */
		padding: 1px 10px;
		min-width: 50%;
		text-align: right;
		padding-right: 46px;
	}
}

.standardButton:hover {
	background-color: #0076b1;
}

.standardButton:focus {
	background-color: #0076b1;
}

.standardDoubleButtonTip {
	position: absolute;
	top: 452px;
	font-size: 16px;
	text-align: right;
	color: #fff;
	font-family: 'Signika', sans-serif;
	opacity: 0;
	-webkit-transition: opacity 1s; /* Safari */
	transition: opacity 1s;
}

@media screen and (min-height: 768px) and (max-width: 1024px) {
	.standardDoubleButtonTip {
		font-size: 13px;
	}
}

.standardDoubleButtonLeft {
    text-align: right;
}

.standardDoubleButtonLeftTip {
	width: 70%;
    padding-right: 20px;
}

.standardDoubleButtonRight {
	color: #80715e;
	background-color: #80715e;
    text-align: right;
	padding-right: 80px;
}

/* mobile */
@media screen and (max-height: 767px) {
	.standardDoubleButtonRight {
		padding-right: 46px;
	}
}

.standardDoubleButtonRightTip {
	width: 30%;
	padding-right: 115px;
    padding-left: 20px;
    right: 0;
}

#introStartButton {
    -webkit-transition: right 1.25s 0s, width 1.75s 0s, color 1s 1.5s, background-color .5s; /* Safari */
    transition: right 1.25s 0s, width 1.75s 0s, color 1s 1.5s, background-color .5s;
}

.standardButtonAppear {
	right: 0%;
	width: 25.6%;
	color: #fff;
}

.standardDoubleButtonLeftAppear {
	right: 30%;
	width: 70%;
	color: #fff;
}

.standardDoubleButtonRightAppear {
	right: 0%;
	width: 30%;
	color: #fff;
}

/* mobile */
@media screen and (max-height: 767px) {
	.standardDoubleButtonLeftAppear {
		right: 0%;
		width: 50%;
	}

	.standardDoubleButtonRightAppear {
		right: 50%;
		width: 50%;
	}
}

.buttonDisabled {
  opacity: .2;
  pointer-events : none;
}

#mainTitleLine2 {
	display: block;
}

/* mobile */
@media screen and (max-height: 767px) {
	#mainTitleLine2 {
		display: inline-block;
		margin-left: 1.5vh;
	}
}

.mainTitleBrown {
	color: #80715d;
}

.subtitleContainer {
	position: absolute;
	top: 26px;
	left: 64px;
}

.subtitleContainer :first-child {
	padding: 0 16px 0 80px;
	margin-left: -64px;
}

.subtitleContainer span {
	padding: 0 !important;
	margin-left: 0px !important;
}

/* mobile */
@media screen and (max-height: 767px) {
	.subtitleContainer {
		top: 3vh;
		left: 30px;
	}
}

.nameText {
	margin: 0;
	padding: 0;
}

.subtitleLine {
	color: #0076b1;
	-webkit-transform: translateX(-120%);
	transform: translateX(-120%);
	transition: transform 1s 0s, color 1s 1s;
}

.subtitleLineTimer {
	color: #0076b1;
	-webkit-transform: translateX(-320%);
	transform: translateX(-320%);
	transition: transform 1s 0s, color 1s 1s;
}

.mainCopyContainer {
	position: absolute;
	background-color: #0076b1;
	width: 400px;
	padding: 0 20px;
    left: 80px;
	top: 23px;
	overflow: hidden;
    transform-origin: top;
	-webkit-transform: scaleY(0);
	transform: scaleY(0);
	transition: transform 1s 0s, opacity 1s 0s;
}

.mainCopyContainer p {
	color: #0076b1;
	transition: color 1s 1s;
}

/* mobile */
@media screen and (max-height: 767px) {
	.mainCopyContainer {
		width: calc(100% - 92px);
		left: 46px;
	}
}

.mainCopyInstructions {
	background-color: #0076b1;
}

/* .mainCopyContainer p {
	color: white;
} */

.mainContentArea {
	position: absolute;
}

/* INTRO PAGE ================================================== */

.subtitleAppearFromLeft {
	-webkit-transform: translateX(0%);
	transform: translateX(0%);
	color: #fff;
}

#introInstruction {
	position: absolute;
	top: 260px;
	left: 80px;
	opacity: 0;
	transition: opacity 1s 0s;
}

/* mobile */
@media screen and (max-height: 767px) {
	#introInstruction {
		top: 58vh;
		/* top: 180px; */
		left: 46px;
	}
}

/* END INTRO PAGE ================================================== */

/* GAME INTRO PAGE ================================================== */
#gameIntroMainCopy2 {
	width: 300px;
    left: 480px;
	top: 168px;
}

/* mobile */
@media screen and (max-height: 767px) {
	#gameIntroMainCopy2 {
		width: calc(100% - 92px);
    	left: 46px;
		top: 40vh;
	}
}

#gameIntroSubtitle {
	position: absolute;
	top: 210px;
	left: 80px;
	width: 25%;
	opacity: 0;
	transition: opacity 1s;
}

#gameIntroInstruction {
	position: absolute;
	top: 275px;
	left: 80px;
	padding: 0;
	color: #fff;
	opacity: 0;
	transition: opacity 1s;
}
/* END GAME INTRO PAGE ================================================== */

/* GAME FORM PAGE ================================================== */
#gameFormPage form {
    position: absolute;
	left: 0px;
    top: 0;
}

form h3 {
	margin-left: 80px;
}

/* mobile */
@media screen and (max-height: 767px) {
	#gameFormPage form {
		top: 3vh;
		/* top: 20px; */
	}

	form h3 {
		margin: 0 0 10px 46px;
	}
}

input {
    border: none;
	height: 50px;
	width: 730px;
	background-color: #80715e;
	color: #fff;
	margin-bottom: 5px;
	padding-left: 80px;
}

@media screen and (min-height: 768px) and (max-width: 1024px) {
	input {
		height: 45px;
		padding-left: 46px;
	}
}

/* mobile */
@media screen and (max-height: 767px) {
	input {
		height: 9vh;
		line-height: 9vh;
		font-size: 6vh;
		/* height: 40px;
		line-height: 40px;
		font-size: 30px; */
		width: 80%;
		padding-left: 46px;
		margin-bottom: 5px;
	}
}


/* input[type="text"] {
} */

input:focus {
	background-color: #80715e;
}

/* input hint text (placeholder) */
input:-ms-input-placeholder {
	color: #fff;
}
::-webkit-input-placeholder { /* Chrome/Opera/Safari */
	color: #fff;
}
::-moz-placeholder { /* Firefox 19+ */
	color: #fff;
}
:-ms-input-placeholder { /* IE 10+ */
	color: #fff;
}
:-moz-placeholder { /* Firefox 18- */
	color: #fff;
}
::placeholder { /* might become the standard */
	color: #fff;
}
:placeholder-shown {
	color: #fff;
}

/* END GAME FORM PAGE ================================================== */

/* LEVEL SELECTION PAGE ================================================== */
#levelSelectionInstruction {
	position: absolute;
	top: 0;
	left: 80px;
	padding: 0;
	color: #0076b1;
	/* opacity: 0; */
	/* transition: opacity .5s 5.25s; */
}

.levelSelectionButton {
	background-color: #80715e;
	color: #fff;
	width: 40px;
	height: 40px;
	position: absolute;
}

.levelSelectionButton:hover {
	background-color: #e59001;
}

.levelSelectionButtonDisabled {
	color: #ccc;
	cursor: auto;
}

.levelSelectionButtonDisabled:hover {
	background-color: #80715e;
}

#levelSelectionObservationButton {
	left: 590px;
	top: 38px;
}

#levelSelectionPackageButton {
	left: 754px;
    top: 148px;
}

#levelSelectionDecryptionButton {
	left: 764px;
    top: 272px;
}
/* END LEVEL SELECTION PAGE ================================================== */

.levelFeedbackContainer {
	position: absolute;
	width: 315px;
	left: 50%;
	top: 420px;
	-webkit-transform: translateX(-50%) scale(0.5);
	transform: translateX(-50%) scale(0.5);
	height: 50px;
	padding: 5px 20px;
	opacity: 0;
	-webkit-transition: opacity .2s, transform .3s ease-out; /* Safari */
	transition: opacity .2s, transform .3s ease-out;
}

@media screen and (min-height: 768px) and (max-width: 1024px) {
	.levelFeedbackContainer {
		height: 45px;
		min-width: 200px;
		width: 28%;
	}
}

/* mobile */
@media screen and (max-height: 767px) {
	.levelFeedbackContainer {
		max-width: 250px;
		left: 50%;
		height: 7vh;
		top: 73vh;
		padding: 0.5vh 20px;
		/* height: 40px;
		padding: 1px 20px;
		left: 730px;
		top: 285px;		 */
	}
}

.feedbackSymbol {
	float: right;
	width: 20px;
	height: 20px;
	margin-top: 10px;
	background-repeat: no-repeat;
	background-position: center center;
}

/* mobile */
@media screen and (max-height: 767px) {
	.feedbackSymbol {
		margin-top: 1.0vh;
		height: 4vh
	}
}

.levelFeedbackCorrect {
	background-color: #86a315;
}

.levelFeedbackCorrect .feedbackSymbol {
	background-image: url("../img/icon-tick.svg");
}

.levelFeedbackWrong {
	background-color: #e63b31;
}

.levelFeedbackWrong .feedbackSymbol {
	background-image: url("../img/icon-wrong.svg");
}

.levelFeedbackAppear {
	opacity: 1;
	-webkit-transform: translateX(-50%) scale(1);
	transform: translateX(-50%) scale(1);
}

.questionOptionContainer {
	-webkit-transition: right 1.25s 1s, width 1.75s 1s, color 1s 1.5s, background-color .3s; /* Safari */
	transition: right 1.25s 1s, width 1.75s 1s, color 1s 1.5s, background-color .3s;
}

.questionOptionContainer:hover {
	background-color: #0076b1;
}

.questionOptionContainer:focus {
	background-color: #0076b1 !important;
}

/* DECRYPTION LEVEL PAGE ================================================== */
#levelDecryptionIntroMainCopy {
	top: 146px;
    left: 10%;
    width: 470px;
}

#levelDecryptionIntroInstructionsCopy {
    top: 170px;
    left: calc(10% + 500px);
	width: 460px;
}

@media screen and (min-height: 768px) and (max-width: 1024px) {
	#levelDecryptionIntroInstructionsCopy {
		width: 290px;
    	top: 155px;
	}
}

.levelDecryptionTimerContainer {
	position: absolute;
	top: 26px;
	right: 0;
}

.levelDecryptionAnswerRow {
	position: absolute;
    bottom: 130px;
    left: 90px;
}

.levelDecryptionAnswerRowMobile {
	display: none;
}

.decryptionAnswerHere {
	margin: 0;
	opacity: 0;
	transition: opacity 1s;
}

/* mobile */
@media screen and (max-height: 768px) {
	#levelDecryptionIntroMainCopy {
		width: 43%;
		left: 46px;
		top: 20vh;
		/* top: 120px; */
	}

	#levelDecryptionIntroInstructionsCopy {
		width: 44%;
		left: 50%;
		/* left: calc(43% + 82px); */
		top: 20vh;
		/* top: 121px;		 */
	}

	.levelDecryptionTimerContainer {
		display: none;
	}

	.levelDecryptionAnswerRow {
		display: none;
	}

	.levelDecryptionAnswerRowMobile {
		position: absolute;
		bottom: -10px;
		display: block;
		left: 50%;
		-webkit-transform: translateX(-50%);
		transform: translateX(-50%);
	}

	.decryptionAnswerHereMobile {
		font-size: 16px;
	}

	.decryptionAnswerHere {
		font-size: 16px;
	}
}

#levelDecryptionResultsMainCopy {
	top: 96px;
    left: 10%;
    width: 370px;
}

#levelDecryptionResultsMainCopy2 {
	top: 180px;
    left: calc(10% + 400px);
    width: 420px;
}

@media screen and (min-height: 768px) and (max-width: 1024px) {
	#levelDecryptionResultsMainCopy2 {
		width: 280px;
	}
}

/* mobile */
@media screen and (max-height: 767px) {
	#levelDecryptionResultsMainCopy {
		top: 20vh;
		/* top: 96px; */
		width: calc(100% - 92px);
		left: 46px;
	}

	#levelDecryptionResultsMainCopy2 {
		top: 45vh;
		/* top: 180px; */
		width: calc(100% - 92px);
		left: 46px;
	}
}

#levelDecryptionQuestionsContainer {
	top: 130px;
	width: 700px;
	left: 50%;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
}

/* mobile */
@media screen and (max-height: 767px) {
	#levelDecryptionQuestionsContainer {
		top: 20vh;
		width: 131vh;
		/* width: 500px; */
		/* left: 46px;
		-webkit-transform: translateX(0);
		transform: translateX(0); */
	}
}

#levelDecryptionQuestionsContainer .levelQuestion {
	position: absolute;
}

#levelDecryptionQuestionsContainer .levelQuestionImage {
	width: 700px;
	margin-bottom: 25px;
}

/* mobile */
@media screen and (max-height: 767px) {
	#levelDecryptionQuestionsContainer .levelQuestionImage {
		width: 131vh;
		/* width: 500px; */
		margin-bottom: 4vh;
		/* margin-bottom: 20px; */
	}
}

#levelDecryptionQuestionsContainer .questionOptionContainer {
	width: 120px;
	margin: 0 25px 0 0;
	background-color: #80715e;
}

/* mobile */
@media screen and (max-height: 767px) {
	#levelDecryptionQuestionsContainer .questionOptionContainer {
		width: 23vh;
		/* width: 88px; */
		margin: 0 4vh 0 0;
		/* margin: 0 15px 0 0; */
	}
}

#levelDecryptionQuestionsContainer .questionOptionContainer:hover {
	background-color: #0076b1;
}

#levelDecryptionQuestionsContainer .levelFeedbackCorrect {
	background-color: #86a315;
}

#levelDecryptionQuestionsContainer .levelFeedbackWrong {
	background-color: #e63b31;
}

#levelDecryptionQuestionsContainer .questionOptionContainer:last-child {
	margin: 0;
}

/* END DECRYPTION LEVEL PAGE ================================================== */

/* OBSERVATION LEVEL INTRO PAGE ================================================== */
#levelObservationIntroMainCopy {
	top: 146px;
    left: 10%;
    width: 370px;
}

#levelObservationIntroIntrsuctionsCopy {
	top: 180px;
    left: calc(10% + 400px);
    width: 430px;
}

@media screen and (min-height: 768px) and (max-width: 1024px) {
	#levelObservationIntroIntrsuctionsCopy {
		width: 280px;
    	top: 160px;
	}
}

@media screen and (max-height: 767px) {
	#levelObservationIntroMainCopy {
		top: 20vh;
		/* top: 116px; */
		width: calc(100% - 92px);
		left: 46px;
	}

	#levelObservationIntroIntrsuctionsCopy {
		top: 45vh;
		width: calc(100% - 92px);
		left: 46px;
	}
}
/* END OBSERVATION LEVEL INTRO PAGE ================================================== */

/* OBSERVATION LEVEL PAGE ================================================== */
.initialQuestionOption {
	width: 0;
	opacity: 0;
	-webkit-transform: translateX(-100%) scaleX(0);
	transform: translateX(-100%) scaleX(0);
	-webkit-transition: all .5s; /* Safari */
	transition: all .5s;
	display: none;
}

.shownQuestionOption {
	opacity: 1;
	width: 100%;
	-webkit-transform: translateX(0%) scaleX(1);
	transform: translateX(0%) scaleX(1);
	display: block;
}

#levelObservationPage .levelFeedbackContainer {
	left: 80px;
	-webkit-transform: translateX(0) scale(0.5);
	transform: translateX(0) scale(0.5);
	top: 258px;
}

#levelObservationPage .levelFeedbackAppear {
	-webkit-transform: translateX(0) scale(1);
	transform: translateX(0) scale(1);
}

/* mobile */
@media screen and (max-height: 767px) {
	#levelObservationPage .levelFeedbackContainer {
		left: 46px;
		top: 45vh;
		/* top: 208px; */
	}
}

#levelObservationQuestionsContainer {
	width: 100%;
}

#levelObservationQuestionsContainer .questionOptionsContainer {
	position: absolute;
    top: 180px;
    left: 80px;
	width: 100%;
	-webkit-transform: translateX(-100%);
	transform: translateX(-100%);
	-webkit-transition: all 1s; /* Safari */
	transition: all 1s;
}

#levelObservationQuestionsContainer .optionsAppearFromLeft {
	-webkit-transform: translateX(0%);
	transform: translateX(0%);
}

/* mobile */
@media screen and (max-height: 767px) {
	#levelObservationQuestionsContainer .questionOptionsContainer {
		top: 30vh;
		/* top: 140px; */
		left: 46px;
	}
}

#levelObservationQuestionsContainer .questionOptionContainer {
	display: inline-block;
	width: auto;
	margin: 0 25px 0 0px;
	background-color: #80715e;
	height: 50px;
	text-align: left;
	padding: 0 35px;
}

@media screen and (min-height: 768px) and (max-width: 1024px) {
	#levelObservationQuestionsContainer .questionOptionContainer {
		height: 45px;
	}
}

/* mobile */
/*@media screen and (max-height: 767px) {*/
/*	#levelObservationQuestionsContainer .questionOptionContainer {*/
/*		height: 40px;*/
/*	}*/
/*}*/

#levelObservationQuestionsContainer .questionOptionContainer:hover {
	background-color: #0076b1;
}

#levelObservationQuestionsContainer .questionOptionContainer:last-child {
	margin: 0;
}

#levelObservationQuestionsContainer .levelFeedbackCorrect {
	background-color: #86a315;
}

#levelObservationQuestionsContainer .levelFeedbackWrong {
	background-color: #e63b31;
}

#levelObservationResultsMainCopy1 {
	top: 136px;
    left: 10%;
    width: 370px;
}

#levelObservationResultsMainCopy2 {
	top: 180px;
    left: calc(10% + 400px);
    width: 420px;
}

@media screen and (min-height: 768px) and (max-width: 1024px) {
	#levelObservationResultsMainCopy2 {
		width: 270px;
	}
}

/* mobile */
@media screen and (max-height: 767px) {
	#levelObservationResultsMainCopy1 {
		width: calc(100% - 92px);
		left: 46px;
		top: 20vh;
		/* top: 120px; */
	}

	#levelObservationResultsMainCopy2 {
		width: calc(100% - 92px);
		top: 45vh;
		left: 46px;
	}
}

/* END OBSERVATION LEVEL PAGE ================================================== */

/* SHAPES LEVEL INTRO PAGE ================================================== */
#levelShapesIntroMainCopy {
	top: 106px;
    left: 10%;
    width: 370px;
}

#levelShapesIntroInstructionsCopy {
    top: 108px;
    left: calc(10% + 400px);
	width: 520px;
}

#levelShapesIntroInstructionsCopy2 {
	top: 250px;
    left: 657px;
	width: 400px;
}

@media screen and (min-height: 768px) and (max-width: 1024px) {
	#levelShapesIntroInstructionsCopy {
		width: 370px;
	}

	#levelShapesIntroInstructionsCopy2 {
		left: 540px;
		width: 260px;
	}
}

/* mobile */
@media screen and (max-height: 767px) {
	#levelShapesIntroMainCopy {
		top: 20vh;
		/* top: 106px; */
		left: 46px;
	}

	#levelShapesIntroInstructionsCopyPaged1 {
		top: 20vh;
		/* top: 94px; */
		width: 45vw;
		max-width: 470px;
		left: 46px;
	}

	#levelShapesIntroInstructionsCopyPaged2 {
		top: 30vh;
		/* top: 168px; */
		left: 53%;
		width: 44%;
		/* left: 513px;
		width: 421px; */
	}

	.levelInstructionsImage {
		left: 50%;
		height: 45vh;
		top: 15vh;
		-webkit-transform: translateX(-50%);
		transform: translateX(-50%);
	}
}

/* END SHAPES LEVEL INTRO PAGE ================================================== */

/* SHAPES LEVEL PAGE ================================================== */
#levelPackageResultsMainCopy {
	top: 136px;
    left: 10%;
	width: 370px;
}

/* mobile */
@media screen and (max-height: 767px) {
	#levelPackageResultsMainCopy {
		top: 30vh;
		left: 5%;
		width: 410px;
	}
}

#levelPackageQuestionsContainer {
	width: 100%;
}

#levelPackageQuestionsContainer .levelQuestionContainer {
	position: absolute;
	top: 100px;
	left: 50%;
	-webkit-transform: translateX(-50%);
    transform: translateX(-50%);
	width: 315px;
}

/* mobile */
@media screen and (max-height: 767px) {
	#levelPackageQuestionsContainer .levelQuestionContainer {
		top: 20vh;
		/* top: 30px; */
		width: 46vh;
		max-width: 250px;
	}
}

#levelPackageQuestionsContainer .levelQuestionImage {
	width: 100%;
	margin-bottom: 25px;
	max-height: 236px;
}

@media screen and (max-height: 767px) {
	#levelPackageQuestionsContainer .levelQuestionImage {
		margin-bottom: 4vh;
	}
}

#levelPackageQuestionsContainer .questionOptionsContainer {
	width: 100%;
}

#levelPackageQuestionsContainer .questionOptionContainer {
	width: 40%;
	height: 50px;
	margin: 0;
}

@media screen and (min-height: 768px) and (max-width: 1024px) {
	#levelPackageQuestionsContainer .questionOptionContainer {
		height: 10vh;
		/* height: 45px; */
	}
}

/* mobile */
/*@media screen and (max-height: 767px) {*/
/*	#levelPackageQuestionsContainer .questionOptionContainer {*/
/*		height: 40px;*/
/*	}*/
/*}*/

#levelPackageQuestionsContainer .questionOptionContainer:hover {
	background-color: #0076b1;
}

#levelPackageQuestionsContainer .questionOptionContainer:last-child {
	float: right;
}

#levelPackageQuestionsContainer .levelFeedbackCorrect {
	background-color: #86a315;
}

#levelPackageQuestionsContainer .levelFeedbackWrong {
	background-color: #e63b31;
}

#levelPackagePage .levelFeedbackContainer {
	top: 430px;
	left: 50%;
}

/* mobile */
@media screen and (max-height: 767px) {
	#levelPackagePage .levelFeedbackContainer {
		top: 73vh;
		/* top: 305px; */
		width: 56vh;
		max-width: 250px;
		/* width: 250px; */
		left: 50%;
	}
}

/* END SHAPES LEVEL PAGE ================================================== */

/* FINAL RESULTS PAGE ================================================== */
#finalResultsInstruction {
	position: absolute;
	top: 220px;
	left: 80px;
	padding: 0;
	color: #0076b1;
	width: 80%;
	max-width: 760px;
	opacity: 0;
	transition: opacity 1s 0s;
}

/* mobile */
@media screen and (max-height: 767px) {
	#finalResultsInstruction {
		top: 30vh;
		/* top: 160px; */
		left: 46px;
		width: 60%;
	}
}

.socialPlatformContainer {
	position: absolute;
	bottom: 50px;
	left: 80px;
	background-color: #0076b1;
	width: auto;
	opacity: 0;
	transition: opacity 1s 0s;
}

.socialPlatformLink {
	float: left;
	cursor: pointer;
	padding: 15px;
}

.socialMediaTwitter {
	padding: 18px 15px;
}

@media screen and (max-height: 767px) {
	.socialPlatformContainer {
		bottom: 115px;
		left: 45px;
		z-index: 9999999;
	}

	.socialPlatformLink {
		width: auto;
	}
}

@media screen and (max-height: 600px) {
	.socialPlatformContainer {
		bottom: 85px;
		position: absolute;
		display: table;
	}
}

@media screen and (max-height: 500px) {
	.socialPlatformContainer {
		bottom: 60px;
		position: absolute;
		display: table;
	}

	.facebook {
		width: 25px !important;
	}

	.mediaLinks {
		display: table-cell;
		vertical-align: middle;
	}

	.socialPlatformLink {
		padding: 6px;
		width: 40px;
	}

	.socialMediaTwitter {
		padding: 10px 7px;
	}
}

@media screen and (max-height: 365px) {
	.socialPlatformContainer {
		bottom: 45px;
	}

	.mediaLinks {
		display: table-cell;
		vertical-align: middle;
	}

	.socialPlatformLink {
		padding: 5px;
	}

	.facebook {
		width: 20px !important;
	}

	.email {
		width: 30px !important;
	}

	.socialMediaTwitter {
		padding: 5px 12px;
	}
}

.crownImage {
	position: absolute;
	right: 0;
	width: 35%;
	top: 40px;
	opacity: 0;
	transition: opacity 1s 0s;
}

@media screen and (max-height: 767px) {
	.crownImage {
		right: -15px;
		top: 50px;
	}
}

#recruitPage form {
	position: absolute;
	top: 120px;
    left: 0px;
}

/* mobile */
@media screen and (max-height: 767px) {
	#recruitPage form {
		top: 20vh;
	}
}

.formMessage {
	margin: 0;
    padding: 0;
	width: calc(100% - 80px);
	margin-left: 80px;
	color: #0076b1;
	opacity: 0;
	-webkit-transition: all 1s; /* Safari */
	transition: all 1s;
}

.formErrorMessage {
    color: #e63b31;
}

/* mobile */
@media screen and (max-height: 767px) {
	.formMessage {
		width: calc(100% - 92px);
		margin-left: 46px;
		margin-bottom: 10px;
	}
}

#recruitFormEmail {
	margin-bottom: 0;
}

#recruitFinalMessage1 {
	position: absolute;
	top: 120px;
    left: 80px;
    padding: 0;
    color: #0076b1;
    width: 80%;
	max-width: 760px;
	opacity: 0;
	transition: opacity 1s 0s;
}

#recruitFinalMessage2 {
	position: absolute;
	top: 220px;
	left: 80px;
	padding: 0;
	color: #0076b1;
	width: 80%;
    max-width: 760px;
	opacity: 0;
	transition: opacity 1s 0s;
}

/* mobile */
@media screen and (max-height: 767px) {
	#recruitFormEmailTitle {
		width: calc(100% - 96px);
	}

	#recruitFinalMessage1 {
		top: 20vh;
		/* top: 100px; */
		left: 48px;
	}
	#recruitFinalMessage2 {
		top: 40vh;
		/* top: 190px; */
		left: 48px;
	}
}

#emailSubmitButton {
	/* top: 260px; */
}


/* END FINAL RESULTS PAGE ================================================== */

.questionOptionContainer {
	width: 120px;
	margin: 0 25px 0 0px;
	background-color: #80715e;
}

.questionOptionContainer * {
	pointer-events: none;
}

.levelQuestion {
	-webkit-transition: opacity .5s; /* Safari */
		transition: opacity .5s;
	overflow: hidden;
}

#levelObservationImageContainer {
	height: 505px;
	text-align: center;
	width: 100%;
	-webkit-transition: opacity .5s; /* Safari */
		transition: opacity .5s;
}

/* mobile */
@media screen and (max-height: 767px) {
	#levelObservationImageContainer {
		height: calc(100vh - 90px);
	}
}

#levelObservationImageContainer img {
	height: 80%;
	left: 50%;
	top: 10%;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
	position: relative;
	text-align: center;
}

/* mobile */
@media screen and (max-height: 767px) {
	#levelObservationImageContainer img {
		height: 74vh;
		/* height: 82%; */
		top: 5%;
	}
}

#statsPanel {
	position: absolute;
	right: 0;
	top: 73px;
	width: 250px;
	height: 120px;
	color: #fff;
	overflow: hidden;
	z-index: 9999;
}

/* mobile */
@media screen and (max-height: 767px) {
	#statsPanel {
		width: 41vh;
		/* width: 38vh; */
		min-width: 200px;
		top: 3vh;
		/* top: 30px; */
		height: 27vh;
		/* height: 142px; */
	}
}

#backToStartButton {
	position: relative;
	width: 100%;
	background-color: #000;
	font-size: 1.1rem;
	height: 24px;
	color: #fff;
	text-align: left;
	padding-left: 20px;
	line-height: 1.1rem;
	vertical-align: middle;
	letter-spacing: 0.05rem;
}

/* mobile */
@media screen and (max-height: 767px) {
	#backToStartButton {
		height: 9vh;
		font-size: 5vh;
		/* height: 62px;
		font-size: 34px; */
		background-color: transparent;
		color: #80715d;

		text-align: right;
		padding-right: 46px;
		top: 1.5vh;
		padding-top: .5vh;
	}
}

.statsPanelElement {
	position: relative;
	width: 100%;
	height: 50px;
	color: #fff;
}

@media screen and (min-height: 768px) and (max-width: 1024px) {
	.statsPanelElement {
		height: 45px;
	}
}

/* mobile */
@media screen and (max-height: 767px) {
	.statsPanelElement {
		height: 7.5vh;
		/* height: 40px; */
	}
}

#scoreContainer {
	background-color: #0083bb;
	padding: 5px 50px 5px 20px;
}

/* mobile */
@media screen and (max-height: 767px) {
	#scoreContainer {
		margin-top: 12vh;
		padding: .6vh 46px .6vh 20px;
		/* padding: 1px 46px 1px 20px; */
	}
}

#scoreCurrent {
	float: right;
}

#currentLevelContainer {
	position: relative;
	float: left;
	width: 40%;
	height: 100%;
	background-color: #000;
	padding: 5px 20px;
}

#currentLevelContainer img {
	float: left;
	height: 27px;
	margin-top: 5px;
}

/* mobile */
@media screen and (max-height: 767px) {
	#currentLevelContainer {
		padding: 0.6vh 20px;
		/* padding: 1px 20px; */
	}

	#currentLevelContainer img {
		height: 5.0vh;
		margin-top: 0.7vh;
		/* height: 25px;
		margin-top: 6px; */
	}
}


#currentLevelContainer span {
	float: right;
}

#countdownClockContainer {
	position: relative;
	float: right;
	width: 60%;
	height: 100%;
	background-color: #80715e;
	padding: 5px 50px 5px 0px;
	text-align: right;
	-webkit-transition: right .5s; /* Safari */
		transition: right .5s;
}

/* mobile */
@media screen and (max-height: 767px) {
	#countdownClockContainer {
		padding: 0.6vh 46px 0.6vh 0px;
		/* padding: 1px 46px 1px 0px; */
	}
}

.countdownClockAppear {
	right: 0;
}

.hiddenOnRight {
	-webkit-transform: translateX(100%);
	transform: translateX(100%);
	transition: transform .5s ease-out;
}

.appearFromRight {
	-webkit-transform: translateX(0%);
	transform: translateX(0%);
}

.hiddenOnLeft {
	-webkit-transform: translateX(-120%);
	transform: translateX(-120%);
	transition: transform 1s ease-out;
}

.appearFromLeft {
	-webkit-transform: translateX(0%);
	transform: translateX(0%);
}

/* special case for the input field, iOS devices text is misplaced if making it come from the left */
.inputFieldHidden {
	opacity: 0;
	transition: opacity 1s ease-out;
}

.inputFieldAppear {
	opacity: 1;
}

@media screen and (min-height: 767px) {
	.inputFieldHidden {
		-webkit-transform: translateX(-120%);
		transform: translateX(-120%);
		transition: transform 1s ease-out;
		opacity: 1;
	}

	.inputFieldAppear {
		-webkit-transform: translateX(0%);
		transform: translateX(0%);
	}
}

.hideClock {
	-webkit-transform: translateX(60%);
	transform: translateX(60%);
}

.questionDisappear {
	/* height: 0; */
	opacity: 0;
}

.questionAppear {
	/* height: 500px; */
	opacity: 1;
}

.fadeOut {
	opacity: 0 !important;
}

.fadeIn {
	opacity: 1 !important;
}

.appearRollFromTop {
	-webkit-transform: scaleY(1);
	transform: scaleY(1);
}

.appearRollFromTopCentered {
	-webkit-transform: translateX(-50%) scaleY(1);
	transform: translateX(-50%) scaleY(1);
}

.appearRollFromTop p {
	color: #fff;
}

.blueBackground {
	background-color: #0076b1;
}

.darkBlueBackground {
	background-color: #006fa7;
}

/* .darkerBlueBackground {
	background-color: #2d6987;
} */

.yellowBackground {
	background-color: #e59001;
	/* background-color: #ffb151; */
}

.darkYellowBackground {
	background-color: #b37222;
}

.brownBackground {
	background-color: #80715e;
}

.disabledElement {
	pointer-events : none;
}

/* @media screen and (min-width: 320px) and (max-width: 640px) {
    .header-text {
       background-color: blue;
    }
} */

@media screen and (min-height: 768px) and (max-width: 1024px) {
	/* medium desktop, adjust some font sizes and blocks positions */
}

/* mobile */
@media screen and (max-height: 767px) {
	.onlyDesktop {
		display: none !important;
	}
}

@media screen and (min-height: 768px) {
	.onlyMobile {
		display: none !important;
	}
}

#portraitCover {
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: #000;
	display: none;
}

#portraitCover img {
	top: 50%;
	left: 50%;
	width: 40%;
	position: absolute;
	-webkit-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%);
}

#portraitCover h2 {
	font-size: 5vw;
}

@media only screen and (orientation: portrait) {
	/* any portrait show the 'rotate' sign */
	#portraitCover {
		display: block;
	}

	#portraitCover .subtitleContainer {
		top: 10%;
	}
}

.portraitCoverCTA :first-child {
	padding: 0 16px 0 16px;
	margin-left: 0;
}

#portraitCover .portraitCoverCTA {
    bottom: 10%;
    position: absolute;
	top: auto;
}

@media (hover:none), (hover:on-demand) {
	/* .standardButton:hover {
		background-color: clear;
	} */
}