html {
	background-color: #1a191d !important;
}

@font-face {
	font-family: Rodger;
	src: url("fonts/Rodger.otf");
}
@font-face {
	font-family: Akzidenz Grotesk Pro;
	src: url('fonts/Akzidenz.otf');
}
body {
	margin: auto;
	height: 768px;
	width: 1024px;
	overflow: hidden;
	font-family: Rodger;
	user-drag: none;
	user-select: none;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	-moz-user-select: none;
	-webkit-user-drag: none;
	-webkit-user-select: none;
	-ms-user-select: none;
}
p {
	margin-top: 30px;
	font-family: Akzidenz Grotesk Pro;
	font-size: 17px;
}
h3 {
	font-size: 20px;
}
/*---------------------- Divs ----------------------*/

.pages {
	width: 1024px;
	height: 768px;
	margin: 0 auto;
	position: relative;
	overflow: hidden;
	background: url("../images/bg.svg");
	background-size: cover;
}
.grass {
	position: absolute;
	bottom: -7px;
}
.back {
	font-size: 32px;
	color: white;
	position: absolute;
	left: 885px;
	top: 25px;
	transition: all 1s;
	z-index: 100;
}
.backbg {
	font-size: 32px;
	position: absolute;
	left: 873px;
	top: 15px;
	transition: all 1s;
	z-index: 100;
}
.back:hover {
	cursor: pointer;
}
.done {
	position: absolute;
	left: 160px;
	bottom: 45px;
	transition: all 1s;
}
.done:hover {
	cursor: pointer;
}
.restart {
	font-size: 32px;
	color: white;
	position: absolute;
	left: 818px;
	top: 25px;
	transition: all 1s;
}
.restartbg {
	font-size: 32px;
	position: absolute;
	left: 803px;
	top: 15px;
	transition: all 1s;
}
.restart:hover {
	cursor: pointer;
}
.cloud {
	opacity: .9;
	-webkit-animation: MoveClouds 35s linear infinite;
	-moz-animation: MoveClouds 35s linear infinite;
	-o-animation: MoveClouds 35s linear infinite;
}
.notdraggable {
	user-drag: none;
	user-select: none;
	-moz-user-select: none;
	-webkit-user-drag: none;
	-webkit-user-select: none;
	-ms-user-select: none;
}
.lefthouse {
	-webkit-animation: SlideInBottomBck 0.7s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	animation: SlideInBottomBck 0.7s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
.games {
	position: absolute;
	left: 490px;
	bottom: 50px;
	-webkit-animation: BounceInBottom 3s;
	animation: BounceInBottom 3s;
}
.animals #lizard {
	position: absolute;
	height: 150px;
	left: 135px;
	top: 215px;
	transition: all 1s;
}
.animals #lizard:hover {
	transition: all 0.3s;
	transform: scale(1.5);
	cursor: pointer;
}
.animals #camel {
	background-size: cover;
	position: absolute;
	height: 150px;
	left: 435px;
	top: 215px;
	transition: all 1s;
}
.animals #camel:hover {
	transition: all 0.3s;
	transform: scale(1.5);
	cursor: pointer;
}
.animals #cactus {
	position: absolute;
	height: 150px;
	left: 735px;
	top: 215px;
	transition: all 1s;
}
.animals #cactus:hover {
	transition: all 0.3s;
	transform: scale(1.5);
	cursor: pointer;
}
.animals #seal {
	position: absolute;
	height: 150px;
	left: 135px;
	top: 435px;
	transition: all 1s;
}
.animals #seal:hover {
	transition: all 0.3s;
	transform: scale(1.5);
	cursor: pointer;
}
.animals #penguin {
	position: absolute;
	height: 150px;
	left: 435px;
	top: 435px;
	transition: all 1s;
}
.animals #penguin:hover {
	transition: all 0.3s;
	transform: scale(1.5);
	cursor: pointer;
}
.animals #polarbear {
	position: absolute;
	height: 150px;
	left: 735px;
	top: 435px;
	transition: all 1s;
}
.animals #polarbear:hover {
	transition: all 0.3s;
	transform: scale(1.5);
	cursor: pointer;
}
.habitats #polar {
	position: absolute;
	height: 140px;
	left: 100px;
	top: 325px;
	transition: all 1s;
}
.habitats #polar:hover {
	transition: all 0.3s;
	transform: scale(1.35);
	cursor: pointer;
}
.habitats #desert {
	background-size: cover;
	position: absolute;
	height: 140px;
	left: 315px;
	top: 325px;
	transition: all 1s;
}
.habitats #desert:hover {
	transition: all 0.3s;
	transform: scale(1.35);
	cursor: pointer;
}
.habitats #woodland {
	position: absolute;
	height: 140px;
	left: 535px;
	top: 325px;
	transition: all 1s;
}
.habitats #woodland:hover {
	transition: all 0.3s;
	transform: scale(1.35);
	cursor: pointer;
}
.habitats #ocean {
	position: absolute;
	height: 140px;
	left: 750px;
	top: 325px;
	transition: all 1s;
}
.habitats #ocean:hover {
	transition: all 0.3s;
	transform: scale(1.35);
	cursor: pointer;
}
mark.highlight1 {
	font-family: Rodger;
	font-size: 24px;
	background: -webkit-linear-gradient(bottom, #ff7e5f, #feb47b);
	background: linear-gradient(bottom, #ff7e5f, #feb47b);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
mark.highlight2 {
	font-family: Rodger;
	font-size: 24px;
	background: -webkit-linear-gradient(to bottom, #E100FF, #7F00FF);
	background: linear-gradient(to bottom, #E100FF, #7F00FF);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
.Info {
	margin-top: 70px;
	height: auto;
	width: 380px;
	white-space: pre-line;
	position: absolute;
}
#polarInfo p {
	color: black;
}
#polarbearInfo {
	color: black;
}
#pages-mainMenu {
	position: absolute;
	top: 0px;
	z-index: 1;
}
#page-Habitats {
	position: absolute;
	width: 0;
	height: 100%;
	right: 0;
	white-space: nowrap;
	overflow: hidden;
	background: #f46b45;
	/* fallback for old browsers */
	background: -webkit-linear-gradient(to top, #eea849, #f46b45);
	/* Chrome 10-25, Safari 5.1-6 */
	background: linear-gradient(to top, #eea849, #f46b45);
	/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
	transition: all 1s;
}
#page-Habitats.close {
	right: 0;
	width: 100%;
}
#page-Habitats h2 {
	color: white;
	position: absolute;
	left: 30px;
}
#page-Habitats p {
	color: white;
	position: absolute;
	top: 50px;
	left: 30px;
}
#page-Habitats h4 {
	font-family: Rodger;
	color: white;
	font-size: 22px;
	margin-top: 670px;
	margin-left: 80px;
}
#page-Adaptation {
	position: absolute;
	width: 0;
	height: 100%;
	right: 0;
	white-space: nowrap;
	overflow: hidden;
	background: rgb(124, 51, 199);
	background: linear-gradient(0deg, rgba(124, 51, 199, 1) 0%, rgba(104, 24, 187, 1) 100%);
	transition: all 1s;
	color: white;
}
#page-Adaptation h4 {
	font-family: Rodger;
	font-size: 22px;
	margin-top: 670px;
	margin-left: 80px;
}
#page-Lizard1 {
	position: absolute;
	width: 0;
	height: 100%;
	right: 0;
	white-space: nowrap;
	overflow: hidden;
	background: -webkit-linear-gradient(to top, #FFFFFF, #6DD5FA, #2980B9);
	background: linear-gradient(to top, #FFFFFF, #6DD5FA, #2980B9);
	transition: all 1s;
}
#page-Lizard2 {
	position: absolute;
	width: 0;
	height: 100%;
	right: 0;
	overflow: hidden;
	background: white;
	transition: all 1s;
	color: black;
	z-index: 10;
}
#page-Lizard1.close {
	right: 0;
	width: 100%;
}
#page-Lizard2.close {
	right: 0;
	width: 40%;
}
#page-Camel1 {
	position: absolute;
	width: 0;
	height: 100%;
	right: 0;
	white-space: nowrap;
	overflow: hidden;
	background: -webkit-linear-gradient(to top, #FFFFFF, #6DD5FA, #2980B9);
	background: linear-gradient(to top, #FFFFFF, #6DD5FA, #2980B9);
	transition: all 1s;
}
#page-Camel2 {
	position: absolute;
	width: 0;
	height: 100%;
	right: 0;
	white-space: nowrap;
	overflow: hidden;
	background: white;
	transition: all 1s;
	color: black;
	z-index: 10;
}
#page-Camel1.close {
	right: 0;
	width: 100%;
}
#page-Camel2.close {
	right: 0;
	width: 40%;
}
#page-Cactus1 {
	position: absolute;
	width: 0;
	height: 100%;
	right: 0;
	white-space: nowrap;
	overflow: hidden;
	background: -webkit-linear-gradient(to top, #FFFFFF, #6DD5FA, #2980B9);
	background: linear-gradient(to top, #FFFFFF, #6DD5FA, #2980B9);
	transition: all 1s;
}
#page-Cactus2 {
	position: absolute;
	width: 0;
	height: 100%;
	right: 0;
	white-space: nowrap;
	overflow: hidden;
	background: white;
	transition: all 1s;
	color: black;
	z-index: 10;
}
#page-Cactus1.close {
	right: 0;
	width: 100%;
}
#page-Cactus2.close {
	right: 0;
	width: 40%;
}
#page-Seal1 {
	position: absolute;
	width: 0;
	height: 100%;
	right: 0;
	white-space: nowrap;
	overflow: hidden;
	background: #1c92d2;
	background: -webkit-linear-gradient(to top, #f2fcfe, #1c92d2);
	background: linear-gradient(to top, #f2fcfe, #1c92d2);
	transition: all 1s;
}
#page-Seal2 {
	position: absolute;
	width: 0;
	height: 100%;
	right: 0;
	white-space: nowrap;
	overflow: hidden;
	background: white;
	transition: all 1s;
	color: black;
	z-index: 10;
}
#page-Seal1.close {
	right: 0;
	width: 100%;
}
#page-Seal2.close {
	right: 0;
	width: 40%;
}
#page-Penguin1 {
	position: absolute;
	width: 0;
	height: 100%;
	right: 0;
	white-space: nowrap;
	overflow: hidden;
	background: #1c92d2;
	background: -webkit-linear-gradient(to top, #f2fcfe, #1c92d2);
	background: linear-gradient(to top, #f2fcfe, #1c92d2);
	transition: all 1s;
}
#page-Penguin2 {
	position: absolute;
	width: 0;
	height: 100%;
	right: 0;
	white-space: nowrap;
	overflow: hidden;
	background: white;
	transition: all 1s;
	color: black;
	z-index: 10;
}
#page-Penguin1.close {
	right: 0;
	width: 100%;
}
#page-Penguin2.close {
	right: 0;
	width: 40%;
}
#page-PolarBear1 {
	position: absolute;
	width: 0;
	height: 100%;
	right: 0;
	white-space: nowrap;
	overflow: hidden;
	background: #1c92d2;
	background: -webkit-linear-gradient(to top, #f2fcfe, #1c92d2);
	background: linear-gradient(to top, #f2fcfe, #1c92d2);
	transition: all 1s;
}
#page-PolarBear2 {
	position: absolute;
	width: 0;
	height: 100%;
	right: 0;
	overflow: hidden;
	background: white;
	transition: all 1s;
	z-index: 10;
}
#page-PolarBear1.close {
	right: 0;
	width: 100%;
}
#page-PolarBear2.close {
	right: 0;
	width: 40%;
}
#page-Polar1 {
	position: absolute;
	width: 0;
	height: 100%;
	right: 0;
	white-space: nowrap;
	overflow: hidden;
	background: #1c92d2;
	background: -webkit-linear-gradient(to top, #f2fcfe, #1c92d2);
	background: linear-gradient(to top, #f2fcfe, #1c92d2);
	transition: all 1s;
}
#page-Polar2 {
	position: absolute;
	width: 0;
	height: 100%;
	right: 0;
	overflow: hidden;
	background: white;
	transition: all 1s;
	z-index: 10;
}
#page-Polar2 h2 {
	color: black;
}
#page-Polar2 p {
	color: black;
}
#page-Polar1.close {
	right: 0;
	width: 100%;
}
#page-Polar2.close {
	right: 0;
	width: 40%;
}
#page-Desert1 {
	position: absolute;
	width: 0;
	height: 100%;
	right: 0;
	white-space: nowrap;
	overflow: hidden;
	background: #2980B9;
	background: -webkit-linear-gradient(to top, #FFFFFF, #6DD5FA, #2980B9);
	background: linear-gradient(to top, #FFFFFF, #6DD5FA, #2980B9);
	transition: all 1s;
}
#page-Desert2 {
	position: absolute;
	width: 0;
	height: 100%;
	right: 0;
	overflow: hidden;
	background: white;
	transition: all 1s;
	z-index: 10;
}
#page-Desert2 h2 {
	color: black;
}
#page-Desert2 p {
	color: black;
}
#page-Desert1.close {
	right: 0;
	width: 100%;
}
#page-Desert2.close {
	right: 0;
	width: 40%;
}
#page-Woodland1 {
	position: absolute;
	width: 0;
	height: 100%;
	right: 0;
	white-space: nowrap;
	overflow: hidden;
	background: #2980B9;
	background: -webkit-linear-gradient(to top, #FFFFFF, #6DD5FA, #2980B9);
	background: linear-gradient(to top, #FFFFFF, #6DD5FA, #2980B9);
	transition: all 1s;
}
#page-Woodland2 {
	position: absolute;
	width: 0;
	height: 100%;
	right: 0;
	overflow: hidden;
	background: white;
	transition: all 1s;
	z-index: 10;
}
#page-Woodland2 h2 {
	color: black;
}
#page-Woodland2 p {
	color: black;
}
#page-Woodland1.close {
	right: 0;
	width: 100%;
}
#page-Woodland2.close {
	right: 0;
	width: 40%;
}
#page-Ocean1 {
	position: absolute;
	width: 0;
	height: 100%;
	right: 0;
	white-space: nowrap;
	overflow: hidden;
	background: #373B44;
	background: -webkit-linear-gradient(to bottom, #4286f4, #373B44);
	background: linear-gradient(to bottom, #4286f4, #373B44);
	transition: all 1s;
}
#page-Ocean2 {
	position: absolute;
	width: 0;
	height: 100%;
	right: 0;
	overflow: hidden;
	background: white;
	transition: all 1s;
	z-index: 10;
}
#page-Ocean2 h2 {
	color: black;
}
#page-Ocean2 p {
	color: black;
}
#page-Ocean1.close {
	right: 0;
	width: 100%;
}
#page-Ocean2.close {
	right: 0;
	width: 40%;
}
.LeftImage {
	transition: all 6s;
	z-index: 4;
	overflow-y: hidden;
	position: absolute;
}
.LeftImageBG {
	transition: all 6s;
	z-index: 4;
	overflow-y: hidden;
	position: absolute;
	left: -40px;
	bottom: -3px;
	height: 300px;
}
.LeftImageBGpolar {
	transition: all 6s;
	z-index: 4;
	overflow-y: hidden;
	position: absolute;
	left: -140px;
	bottom: -3px;
	height: 360px;
}
#polarBig {
	left: -130px;
	bottom: -20px;
	height: 320px;
}
#woodlandBig {
	left: -180px;
	bottom: -20px;
	height: 790px;
}
#desertBig {
	left: -40px;
	bottom: -3px;
	height: 300px;
}
#oceanBig {
	left: -180px;
	bottom: -20px;
	height: 750px;
}
#lizardBig {
	left: 40px;
	bottom: -12px;
	height: 400px;
}
#camelBig {
	left: 70px;
	bottom: -3px;
	height: 600px;
}
#cactusBig {
	left: -60px;
	bottom: -12px;
	height: 600px;
}
#sealBig {
	left: 0px;
	bottom: -100px;
	height: 600px;
	transform: rotate(30deg);
}
#penguinBig {
	left: 50px;
	bottom: -100px;
	height: 600px;
}
#polarbearBig {
	left: -40px;
	bottom: -25px;
	height: 550px;
}
.LeftImage.closed {
	max-height: 0;
}
#page-Adaptation.close {
	right: 0;
	width: 100%;
}
#page-Adaptation h2 {
	position: absolute;
	left: 30px;
}
#page-Adaptation p {
	position: absolute;
	top: 50px;
	left: 30px;
}
#page-Quiz {
	position: absolute;
	width: 0;
	height: 100%;
	right: 0;
	white-space: nowrap;
	overflow: hidden;
	background: #DA22FF;
	background: -webkit-linear-gradient(to bottom, #9733EE, #DA22FF);
	background: linear-gradient(to bottom, #9733EE, #DA22FF);
	transition: all 1s;
}
#page-Quiz.close {
	right: 0;
	width: 100%;
}
#page-Quiz h2 {
	color: white;
	position: absolute;
	left: 30px;
}
#page-Quiz h3 {
	color: white;
	position: absolute;
	top: 40px;
	left: 30px;
}
#page-Quiz p {
	color: white;
	position: absolute;
	top: 90px;
	left: 30px;
	word-break: normal;
	width: 880px;
	margin: auto;
	white-space: normal;
}
#page-DragDrop {
	position: absolute;
	width: 0;
	height: 100%;
	right: 0;
	white-space: nowrap;
	overflow: hidden;
	background: #f2709c;
	background: -webkit-linear-gradient(to top, #ff9472, #f2709c);
	background: linear-gradient(to top, #ff9472, #f2709c);
	transition: all 1s;
}
#page-DragDrop.close {
	right: 0;
	width: 100%;
}
#page-DragDrop h2 {
	color: white;
	position: absolute;
	left: 30px;
}
#page-DragDrop h3 {
	color: white;
	position: absolute;
	top: 40px;
	left: 30px;
}
#page-DragDrop p {
	color: white;
	position: absolute;
	top: 90px;
	left: 30px;
	word-break: normal;
	width: 880px;
	margin: auto;
	white-space: normal;
}
#volume {
	font-size: 32px;
	color: white;
	position: absolute;
	left: 955px;
	top: 25px;
	-moz-transition: all 0.3s ease;
	transition: all 0.3s ease;
	-webkit-animation: SlideInTop 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	animation: SlideInTop 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	z-index: 101;
}
#volumebg {
	font-size: 32px;
	position: absolute;
	left: 943px;
	top: 15px;
	-moz-transition: all 0.3s ease;
	transition: all 0.3s ease;
	-webkit-animation: SlideInTop 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	animation: SlideInTop 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	z-index: 101;
}
#volume:hover {
	cursor: pointer;
}
#home {
	font-size: 32px;
	color: white;
	position: absolute;
	left: 875px;
	top: 25px;
	-moz-transition: all 0.3s ease;
	transition: all 0.3s ease;
	-webkit-animation: SlideInTop 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	animation: SlideInTop 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
#homebg {
	font-size: 32px;
	position: absolute;
	left: 863px;
	top: 15px;
	-moz-transition: all 0.3s ease;
	transition: all 0.3s ease;
	-webkit-animation: SlideInTop 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	animation: SlideInTop 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
#home:hover {
	cursor: pointer;
}
#bluehouse {
	position: absolute;
	height: 500px;
	left: 875px;
	bottom: -5px;
	-webkit-animation: SlideInBottomBck 0.7s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	animation: SlideInBottomBck 0.7s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
#redhouse {
	height: 200px;
	position: absolute;
	left: 0;
	top: 150px;
}
#monkey {
	position: absolute;
	left: 60px;
	top: 310px;
	margin: auto;
	-webkit-transform-origin: 50% 0;
	transform-origin: 50% 0;
	-webkit-animation: swingingMonkey 3.5s ease-in-out forwards infinite;
	animation: swingingMonkey 3.5s ease-in-out forwards infinite;
}
#logo {
	position: absolute;
	left: 250px;
	top: 100px;
	text-align: center;
	margin: auto;
	color: white;
	-webkit-animation: SlideInTopFwd 0.7s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	animation: SlideInTopFwd 0.7s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	animation-delay: 1.5s;
}
#game1 {
	position: absolute;
	left: 505px;
	bottom: 100px;
	-moz-transition: all 0.3s ease;
	transition: all 0.3s ease;
	-webkit-animation: BounceInBottom 3s;
	animation: BounceInBottom 3s;
}
#game2 {
	position: absolute;
	left: 710px;
	bottom: 100px;
	-moz-transition: all 0.3s ease;
	transition: all 0.3s ease;
	-webkit-animation: BounceInBottom 3s;
	animation: BounceInBottom 3s;
}
#game1:hover {
	transform: scale(1.25);
	cursor: pointer;
}
#game2:hover {
	transform: scale(1.25);
	cursor: pointer;
}
#learn1 {
	position: absolute;
	left: 90px;
	bottom: 100px;
	-moz-transition: all 0.3s ease;
	transition: all 0.3s ease;
	-webkit-animation: BounceInBottom 3s;
	animation: BounceInBottom 3s;
}
#learn2 {
	position: absolute;
	left: 295px;
	bottom: 100px;
	-moz-transition: all 0.3s ease;
	transition: all 0.3s ease;
	-webkit-animation: BounceInBottom 3s;
	animation: BounceInBottom 3s;
}
#learn1:hover {
	transform: scale(1.25);
	cursor: pointer;
}
#learn2:hover {
	transform: scale(1.25);
	cursor: pointer;
}
#base1 {
	position: absolute;
	left: 115px;
	bottom: 65px;
	-webkit-animation: BounceInBottom 3s;
	animation: BounceInBottom 3s;
}
#base2 {
	position: absolute;
	left: 320px;
	bottom: 65px;
	-webkit-animation: BounceInBottom 3s;
	animation: BounceInBottom 3s;
}
#learntext {
	position: absolute;
	left: 180px;
	bottom: 270px;
	color: white;
	-webkit-animation: BounceInBottom 3s;
	animation: BounceInBottom 3s;
}
#gamesheader {
	position: absolute;
	left: 665px;
	bottom: 270px;
	color: white;
	-webkit-animation: BounceInBottom 3s;
	animation: BounceInBottom 3s;
}
#cloud1 {
	position: absolute;
	left: 0px;
	top: 100px;
}
#cloud2 {
	position: absolute;
	left: 500px;
	top: 80px;
}
#cloud3 {
	position: absolute;
	left: 250px;
	top: 30px;
}
#cloud4 {
	position: absolute;
	left: 750px;
	top: 10px;
}
#wrapper {
	margin: 0 auto;
	width: 1024px;
	height: 768px;
	background-color: black;
	position: absolute;
}
#question {
	position: absolute;
	top: 150px;
	left: 100px;
	width: 750px;
	color: white;
	font-size: 1.8em;
	margin: auto;
	white-space: normal;
}
#finalscore {
	position: absolute;
	left: 300px;
	top: 375px;
	text-align: center;
	color: white;
	font-size: 26px;
	white-space: nowrap;
}
#answersAndFeedback {
	position: absolute;
	left: 100px;
	top: 240px;
}
#feedback {
	font-family: Akzidenz Grotesk Pro;
	color: white;
	position: absolute;
	bottom: -105px;
	word-break: normal;
	width: 650px;
	margin: auto;
	white-space: normal;
	font-size: 1.6em;
}
#quizstrt-btn {
	background-color: rgba(47, 43, 43, 0.65);
	position: absolute;
	width: 300px;
	top: 650px;
	left: 320px;
	padding: 20px;
	cursor: pointer;
	-webkit-border-radius: 20px;
	border-radius: 20px;
	font-size: 1.7em;
	text-align: center;
	color: white;
}
#next-btn {
	background-color: rgba(47, 43, 43, 0.65);
	position: absolute;
	top: 630px;
	left: 770px;
	width: 80px;
	padding: 20px;
	text-align: center;
	cursor: pointer;
	-webkit-border-radius: 20px;
	border-radius: 20px;
	font-size: 1.7em;
	color: white;
}
#restartQuiz-btn {
	background-color: rgba(47, 43, 43, 0.65);
	position: absolute;
	width: 300px;
	top: 450px;
	left: 320px;
	padding: 20px;
	cursor: pointer;
	-webkit-border-radius: 20px;
	border-radius: 20px;
	font-size: 1.7em;
	text-align: center;
	color: white;
}
.score {
	position: absolute;
	bottom: 20px;
	left: 950px;
	font-size: 3em;
	color: white;
}
.move-score {
	top: 300px;
	right: 450px;
}
.answer-box {
	font-family: Akzidenz Grotesk Pro;
	width: 750px;
	background-color: white;
	padding: 20px;
	color: #666;
	margin: 10px 0;
	font-size: 1.5em;
	-webkit-border-radius: 20px;
	border-radius: 20px;
	cursor: pointer;
}
.hidden {
	display: none;
}
.selected {
	background-color: #666;
	color: white;
}
.correct, .correctDragDrop {
	background: #1D976C;
	background: -webkit-linear-gradient(90deg, rgba(0, 255, 139, 1) 0%, rgba(76, 255, 128, 1) 100%);
	background: linear-gradient(90deg, rgba(0, 255, 139, 1) 0%, rgba(76, 255, 128, 1) 100%);
	color: white;
}
.incorrect, .incorrectDragDrop {
	background: #FF416C;
	background: -webkit-linear-gradient(to top, #FF4B2B, #FF416C);
	background: linear-gradient(to top, #FF4B2B, #FF416C);
	color: white;
}
#dragDropcontainer {
	padding-top: 165px;
	padding-left: 165px;
	padding-right: 165px;
}
#dragContainer, #dropContainer, #scoreContainer {
	width: 650px;
	margin-left: 20px;
	margin-bottom: 20px;
}
#dragContainer {
	background-color: rgba(47, 43, 43, 0.3);
	height: 200px;
	-webkit-border-radius: 20px;
	border-radius: 20px;
}
#dropContainer {
	background-color: rgba(47, 43, 43, 0.3);
	height: 260px;
	-webkit-border-radius: 20px;
	border-radius: 20px;
	overflow: hidden;
}
.dragthis, .dropped, .correctDragDrop, .incorrectDragDrop {
	text-align: center;
	line-height: 50px;
	font-family: Akzidenz Grotesk Pro;
	font-size: 20px;
	cursor: move;
	color: white;
	width: 200px;
	height: 50px;
	padding: 5px;
	float: left;
	margin: 5px 0 0 5px;
	-webkit-border-radius: 20px;
	border-radius: 20px;
}
.dropped, .correctDragDrop, .incorrectDragDrop {
	width: 188px;
	margin: 5px 0 0 0;
	font-weight: normal;
	text-align: center;
}
.subcontainer {
	line-height: 40px;
	text-align: center;
	font-size: 23px;
	width: 200px;
	height: 240px;
	color: white;
	background-color: rgba(47, 43, 43, 0.5);
	padding: 5px;
	margin: 5px 0 0 5px;
	float: left;
	-webkit-border-radius: 20px;
	border-radius: 20px;
}
#buttonContainer {
	position: absolute;
	bottom: 35px;
	left: 465px;
	cursor: pointer;
	text-align: center;
}
#scoreContainer, #message {
	position: absolute;
	left: 140px;
	text-align: center;
	white-space: pre-line;
	color: black;
	font-size: 18px;
	line-height: 20px;
}
#scoreText {
	font-size: 32px;
	color: white;
}
#scoreContainer {
	bottom: 450px;
}
#message {
	margin-top: 180px;
	padding: 20px;
	margin-left: 50px;
	font-family: Rodger;
	position: absolute;
	width: 600px;
	height: 120px;
	font-size: 22px;
	background-color: white;
	-moz-border-radius: 20px;
	-webkit-border-radius: 20px;
	border-radius: 20px;
}
#incompleteText {
	padding-bottom: 80px;
}
#scoreText {
	margin-left: 50px;
}
#okButton {
	margin-top: 20px;
	cursor: pointer;
}
/*---------------------- ANIMATIONS ----------------------*/

@-webkit-keyframes MoveClouds {
	0% {
		margin-left: 1000px;
	}
	100% {
		margin-left: -1000px;
	}
}
@-moz-keyframes MoveClouds {
	0% {
		margin-left: 1000px;
	}
	100% {
		margin-left: -1000px;
	}
}
@-o-keyframes MoveClouds {
	0% {
		margin-left: 1000px;
	}
	100% {
		margin-left: -1000px;
	}
}
@-webkit-keyframes BounceInBottom {
	0% {
		-webkit-transform: translateY(500px);
		transform: translateY(500px);
		-webkit-animation-timing-function: ease-in;
		animation-timing-function: ease-in;
		opacity: 0;
	}
	100% {
		-webkit-transform: translateY(0);
		transform: translateY(0);
		-webkit-animation-timing-function: ease-out;
		animation-timing-function: ease-out;
	}
}
@keyframes BounceInBottom {
	0% {
		-webkit-transform: translateY(500px);
		transform: translateY(500px);
		-webkit-animation-timing-function: ease-in;
		animation-timing-function: ease-in;
		opacity: 0;
	}
	100% {
		-webkit-transform: translateY(0);
		transform: translateY(0);
		-webkit-animation-timing-function: ease-out;
		animation-timing-function: ease-out;
	}
}
@-webkit-keyframes BounceInTop {
	0% {
		-webkit-transform: translateY(-500px);
		transform: translateY(-500px);
		-webkit-animation-timing-function: ease-in;
		animation-timing-function: ease-in;
		opacity: 0;
	}
	38% {
		-webkit-transform: translateY(0);
		transform: translateY(0);
		-webkit-animation-timing-function: ease-out;
		animation-timing-function: ease-out;
		opacity: 1;
	}
	55% {
		-webkit-transform: translateY(-65px);
		transform: translateY(-65px);
		-webkit-animation-timing-function: ease-in;
		animation-timing-function: ease-in;
	}
	72% {
		-webkit-transform: translateY(0);
		transform: translateY(0);
		-webkit-animation-timing-function: ease-out;
		animation-timing-function: ease-out;
	}
	81% {
		-webkit-transform: translateY(-28px);
		transform: translateY(-28px);
		-webkit-animation-timing-function: ease-in;
		animation-timing-function: ease-in;
	}
	90% {
		-webkit-transform: translateY(0);
		transform: translateY(0);
		-webkit-animation-timing-function: ease-out;
		animation-timing-function: ease-out;
	}
	95% {
		-webkit-transform: translateY(-8px);
		transform: translateY(-8px);
		-webkit-animation-timing-function: ease-in;
		animation-timing-function: ease-in;
	}
	100% {
		-webkit-transform: translateY(0);
		transform: translateY(0);
		-webkit-animation-timing-function: ease-out;
		animation-timing-function: ease-out;
	}
}
@keyframes BounceInTop {
	0% {
		-webkit-transform: translateY(-500px);
		transform: translateY(-500px);
		-webkit-animation-timing-function: ease-in;
		animation-timing-function: ease-in;
		opacity: 0;
	}
	38% {
		-webkit-transform: translateY(0);
		transform: translateY(0);
		-webkit-animation-timing-function: ease-out;
		animation-timing-function: ease-out;
		opacity: 1;
	}
	55% {
		-webkit-transform: translateY(-65px);
		transform: translateY(-65px);
		-webkit-animation-timing-function: ease-in;
		animation-timing-function: ease-in;
	}
	72% {
		-webkit-transform: translateY(0);
		transform: translateY(0);
		-webkit-animation-timing-function: ease-out;
		animation-timing-function: ease-out;
	}
	81% {
		-webkit-transform: translateY(-28px);
		transform: translateY(-28px);
		-webkit-animation-timing-function: ease-in;
		animation-timing-function: ease-in;
	}
	90% {
		-webkit-transform: translateY(0);
		transform: translateY(0);
		-webkit-animation-timing-function: ease-out;
		animation-timing-function: ease-out;
	}
	95% {
		-webkit-transform: translateY(-8px);
		transform: translateY(-8px);
		-webkit-animation-timing-function: ease-in;
		animation-timing-function: ease-in;
	}
	100% {
		-webkit-transform: translateY(0);
		transform: translateY(0);
		-webkit-animation-timing-function: ease-out;
		animation-timing-function: ease-out;
	}
}
@-webkit-keyframes SlideInTop {
	0% {
		-webkit-transform: translateY(-1000px);
		transform: translateY(-1000px);
		opacity: 0;
	}
	100% {
		-webkit-transform: translateY(0);
		transform: translateY(0);
		opacity: 1;
	}
}
@keyframes SlideInTop {
	0% {
		-webkit-transform: translateY(-1000px);
		transform: translateY(-1000px);
		opacity: 0;
	}
	100% {
		-webkit-transform: translateY(0);
		transform: translateY(0);
		opacity: 1;
	}
}
@-webkit-keyframes SlideInBottomBck {
	0% {
		-webkit-transform: translateY(600px) rotateX(-30deg) scale(6.5);
		transform: translateY(600px) rotateX(-30deg) scale(6.5);
		-webkit-transform-origin: 50% -100%;
		transform-origin: 50% -100%;
		opacity: 0;
	}
	100% {
		-webkit-transform: translateY(0) rotateX(0) scale(1);
		transform: translateY(0) rotateX(0) scale(1);
		-webkit-transform-origin: 50% 500px;
		transform-origin: 50% 500px;
		opacity: 1;
	}
}
@keyframes SlideInBottomBck {
	0% {
		-webkit-transform: translateY(600px) rotateX(-30deg) scale(6.5);
		transform: translateY(600px) rotateX(-30deg) scale(6.5);
		-webkit-transform-origin: 50% -100%;
		transform-origin: 50% -100%;
		opacity: 0;
	}
	100% {
		-webkit-transform: translateY(0) rotateX(0) scale(1);
		transform: translateY(0) rotateX(0) scale(1);
		-webkit-transform-origin: 50% 500px;
		transform-origin: 50% 500px;
		opacity: 1;
	}
}
@-webkit-keyframes SlideInTopFwd {
	0% {
		-webkit-transform: translateY(-600px) rotateX(-30deg) scale(0);
		transform: translateY(-600px) rotateX(-30deg) scale(0);
		-webkit-transform-origin: 50% 100%;
		transform-origin: 50% 100%;
		opacity: 0;
	}
	100% {
		-webkit-transform: translateY(0) rotateX(0) scale(1);
		transform: translateY(0) rotateX(0) scale(1);
		-webkit-transform-origin: 50% 1400px;
		transform-origin: 50% 1400px;
		opacity: 1;
	}
}
@keyframes SlideInTopFwd {
	0% {
		-webkit-transform: translateY(-600px) rotateX(-30deg) scale(0);
		transform: translateY(-600px) rotateX(-30deg) scale(0);
		-webkit-transform-origin: 50% 100%;
		transform-origin: 50% 100%;
		opacity: 0;
	}
	100% {
		-webkit-transform: translateY(0) rotateX(0) scale(1);
		transform: translateY(0) rotateX(0) scale(1);
		-webkit-transform-origin: 50% 1400px;
		transform-origin: 50% 1400px;
		opacity: 1;
	}
}
@-webkit-keyframes swingingMonkey {
	0% {
		-webkit-transform: rotate(10deg);
		transform: rotate(10deg);
	}
	50% {
		-webkit-transform: rotate(-5deg);
		transform: rotate(-5deg);
	}
	100% {
		-webkit-transform: rotate(10deg);
		transform: rotate(10deg);
	}
}
@keyframes swingingMonkey {
	0% {
		transform: rotate(10deg);
	}
	50% {
		transform: rotate(-5deg)
	}
	100% {
		transform: rotate(10deg);
	}
}
@keyframes blink {
	0% {
		opacity: 1;
	}
	50% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}