@charset "UTF-8";
/* CSS Document */

body {
	background-color: #000;
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0;
	margin-bottom: 0;
	text-size-adjust: none;
}

.theHolder {
	position:relative;
	left:0px;
	top:0px;
	width: calc(100% - 200px);
	height:auto;
	display:none;
	box-sizing:border-box;
	overflow:hidden;
	text-align:center;
	/*
	-webkit-user-select:none;
	-ms-user-select:none;
	user-select:none;
	*/
	font-size:1px;
	line-height:0px;
	margin-left:200px;
}

.theHolder .gameHolder div:focus, .theHolder .gameHolder img:focus, .theHolder .gameHolder span:focus, .theHolder .gameHolder h1:focus, .theHolder .gameHolder h2:focus, .theHolder .gameHolder h3:focus, .theHolder .gameHolder h4:focus, .theHolder .gameHolder p:focus, .theHolder .gameHolder a:focus {
	outline: none;
}

.loaderHolder {
	position:relative;
	left:0px;
	top:0px;
	width: 100%;
	height:100vh;
	display:inline-block;
}

.loader {
	position:absolute;
	left:50%;
	top:50%;
  border: 16px solid #f3f3f3; /* Light grey */
  border-top: 16px solid #3498db; /* Blue */
  border-radius: 50%;
  width: 120px;
  height: 120px;
  animation: spin 2s linear infinite;
  margin-left:-60px;
  margin-top:-60px;
}

.loaderHolder p {
	margin:0px;
	padding:0px;
	font-family: Helvetica, Arial, sans-serif;
	font-size:35px;
	line-height:35px;
	text-align:center;
	color:#FFF;
	position:absolute;
	left:50%;
	top:50%;
	width:120px;
	margin-left:-40px;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.gameHolder {
	position:absolute;
	left:0px;
	top:0px;
	width:1080px;
	height:758px;
	box-sizing:border-box;
	display:inline-block;
	background-color:#bad1d6;
	background-image:url(images/background_pattern.jpg);
	background-size:100% 100%;
	background-position:50% 50%;
	background-repeat:no-repeat;
}

.innerHolder {
	position:absolute;
	left:0px;
	top:0px;
	width:1080px;
	height:758px;
	box-sizing:border-box;
	display:inline-block;
	background-image:url(images/screen_corners.png);
	background-position:50% 50%;
	background-size:100% 100%;
	background-repeat:no-repeat;
	z-index:100;
}

.vapePen {
	position:absolute;
	left:0px;
	top:0px;
	width:1080px;
	height:720px;
	box-sizing:border-box;
	display:inline-block;
}

#theStart h1  {
	margin:0px;
	padding:0px;
	position:absolute;
	left:260px;
	top:172px;
	width: 615px;
	height:auto;
	display:inline-block;
	color:#FFF;
	font-size:81px;
	line-height:90px;
	font-family:MuseoSans-900;
	font-weight:normal;
	-webkit-text-stroke: 2px #f05223;
   text-shadow:
       1px 1px 0 #f05223,
     -1px -1px 0 #f05223,  
      1px -1px 0 #f05223,
      -1px 1px 0 #f05223,
       1px 1px 0 #f05223;
}

#theStart .startButton {
	position:absolute;
	left:519px;
	top:377px;
	display:inline-block;
	font-family:MuseoSans-900;
	font-weight:normal;
	font-size:22px;
	line-height:22px;
	padding:10px;
	background-color:#FFF;
	text-decoration:none;
	box-sizing:border-box;
	border:solid;
	border-width:2px;
	border-color:#f05223;
	text-align:center;
	color:#25408e;
	border-radius:5px;
	cursor:pointer;
}

#theStart .part {
	position:absolute;
	left:0px;
	top:0px;
	width:76px;
	height:54px;
	display:inline-block;
	pointer-events:none;
}

#theStart .logo {
	position:absolute;
	left:886px;
	top:676px;
	width:160px;
	height:50px;
	display:inline-block;
}

#theStart canvas {
	position:absolute;
	left:0px;
	top:0px;
	display:inline-block;
	z-index:50;
}

#theGame .element {
	position:absolute;
	display:inline-block;
}

#theGame .element.brain {
	left:43px;
	top:77px;
	width:187px;
	height:146px;
}

#theGame .element.bio {
	left:248px;
	top:14px;
	width:181px;
	height:161px;
}

#theGame .element.chemical {
	left:3px;
	top:534px;
	width:167px;
	height:154px;
}

#theGame .element.attention {
	left:575px;
	top:551px;
	width:107px;
	height:104px;
}

#theGame .element.smell {
	left:513px;
	top:391px;
	width:234px;
	height:166px;
}

#theGame .element.pack {
	left:872px;
	top:504px;
	width:181px;
	height:184px;
}

#theGame .element.forest {
	left:741px;
	top:161px;
	width:339px;
	height:348px;
}

#theGame .element.distance {
	left:3px;
	top:210px;
	width:284px;
	height:277px;
}

#theGame .element.warning {
	left:367px;
	top:660px;
	width:170px;
	height:59px;
}

#theGame .clouds {
	position:absolute;
	width:146px;
	height:70px;
	display:inline-block;
	pointer-events:none;
}

#theGame .clouds.clouds1 {
	left:407px;
	top:11px;
}

#theGame .clouds.clouds2 {
	left:776px;
	top:64px;
}

#theGame .clouds.clouds3 {
	left:673px;
	top:307px;
}

#theGame .clouds.clouds4 {
	left:0px;
	top:446px;
}

#theGame .clouds.clouds5 {
	left:127px;
	top:489px;
}

#theGame .clouds.clouds6 {
	left:776px;
	top:523px;
}

#theGame .clouds.clouds7 {
	left:145px;
	top:651px;
}

#gameInner h2 {
	margin:0px;
	padding:0px;
	position:absolute;
	left:369px;
	top:203px;
	width:363px;
	height:auto;
	display:inline-block;
	text-align:center;
	font-family:MuseoSans-900;
	font-weight:normal;
	font-size:20px;
	line-height:24px;
	color:#f05223;
}

#gameInner h2.corner {
	font-size:15px;
	line-height:19px;
	color:#14084e;
	left:554px;
	top:13px;
	width:336px;
}

#gameInner h2.corner br {
	display:none !important;
}


#linebrain {
	position:absolute;
	left:159px;
	top:105px;
	width:183px;
	overflow:visible;
	pointer-events:none;
}

#linechemical {
	position:absolute;
	left:153px;
	top:327px;
	width:283px;
	overflow:visible;
	pointer-events:none;
}

#linedistance {
	position:absolute;
	left:159px;
	top:212px;
	width:185px;
	overflow:visible;
	pointer-events:none;
}

#linebio {
	position:absolute;
	left:407px;
	top:132px;
	width:65px;
	overflow:visible;
	pointer-events:none;
}

#lineforest {
	position:absolute;
	left:677px;
	top:206px;
	width:199px;
	overflow:visible;
	pointer-events:none;
}

#linesmell {
	position:absolute;
	left:587px;
	top:357px;
	width:55px;
	overflow:visible;
	pointer-events:none;
}

#linepack {
	position:absolute;
	left:650px;
	top:285px;
	width:271px;
	overflow:visible;
	pointer-events:none;
}

#lineattention {
	position:absolute;
	left:407px;
	top:333px;
	width:184px;
	overflow:visible;
	pointer-events:none;
}

#linewarning {
	position:absolute;
	left:442px;
	top:312px;
	width:66px;
	overflow:visible;
	pointer-events:none;
}

.dot {
	position:absolute;
	width:12px;
	height:12px;
	background-color:#f05223;
	border-radius:50%;
	margin-left:-6px;
	margin-top:-6px;
	pointer-events:none;
}


.dot.dotbrain {
	left:159px;
	top:105px;
}

.dot.dotchemical {
	left:153px;
	top:608px;
}

.dot.dotdistance {
	left:159px;
	top:265px;
}

.dot.dotbio {
	left:407px;
	top:132px;
}

.dot.dotforest {
	left:876px;
	top:206px;
}

.dot.dotsmell {
	left:642px;
	top:411px;
}

.dot.dotpack {
	left:921px;
	top:555px;
}

.dot.dotattention {
	left:591px;
	top:598px;
}

.dot.dotwarning {
	left:509px;
	top:681px;
}

.infoHolder {
	position:absolute;
	left:381px;
	top:190px;
	width:420px;
	height:auto;
	display:inline-block;
	text-align:left;
}

.infoHolder .closeButtonImage {
	position:absolute;
	left:-33px;
	top:-2px;
	width:24px;
	height:24px;
	display:block;
}

.infoHolder h3 {
	margin:0px;
	padding:0px;
	position:relative;
	left:0px;
	top:0px;
	width:100%;
	height:auto;
	display:inline-block;
	font-family:MuseoSans-900;
	font-weight:normal;
	font-size:20px;
	line-height:20px;
	color:#f05223;
	text-transform:uppercase;
	padding-bottom:10px;
	display:inline-block;
}

.infoHolder p {
	margin:0px;
	padding:0px;
	position:relative;
	left:0px;
	top:0px;
	width:100%;
	height:auto;
	display:inline-block;
	font-family:MuseoSans-900;
	font-weight:normal;
	font-size:13px;
	line-height:19px;
	color:#000;
	display:inline-block;
	/*
	text-shadow:2px 2px 0 #eae8f6,
     -2px -2px 0 #eae8f6,  
      2px -2px 0 #eae8f6,
      -2px 2px 0 #eae8f6,
       2px 2px 0 #eae8f6;
	   */
}

.infoHolderbio h3 {
	margin-top:9px;
}

.infoHolderattention h3 {
	margin-top:12px;
}

.infoHolderattention h3 {
	margin-top:9px;
}

.infoHolderpack h3 {
	margin-top:25px;
}

.infoHoldersmell h3 {
	margin-top:0px;
}

.infoHolderwarning h3 {
	margin-top:12px;
}

.infoHoldersmell p {
	width:449px;
	text-align:right;
	margin-left:-56px;
	margin-top:-5px;
}

.infoHoldersmell .span1 {
	padding-right:28px;
	display:inline-block;
}

.infoHoldersmell .span2 {
	padding-right:110px;
	display:inline-block;
}

.infoHoldersmell .span3 {
	padding-right:120px;
	display:inline-block;
}

.infoHoldersmell .span4 {
	padding-right:149px;
	display:inline-block;
}

.infoHoldersmell .span5 {
	padding-right:138px;
	display:inline-block;
}

.infoHoldersmell .span6 {
	padding-right:158px;
	display:inline-block;
}

.infoHoldersmell .span7 {
	padding-right:203px;
	display:inline-block;
}

.infoHoldersmell .span8 {
	padding-right:290px;
	display:inline-block;
}

.infoHoldersmell .span9 {
	padding-right:309px;
	display:inline-block;
}

.infoHoldersmell .span10 {
	padding-right:341px;
	display:inline-block;
}

.infoHoldersmell .span11 {
	padding-right:364px;
	display:inline-block;
}

.infoHoldersmell .span12 {
	padding-right:371px;
	display:inline-block;
}

.bottomInfo {
	margin:0px;
	padding:0px;
	position:absolute;
	left:0px;
	bottom:0px;
	width:100%;
	height:auto;
	box-sizing:border-box;
	font-family:MuseoSans-500;
	font-weight:normal;
	font-size:11px;
	line-height:14px;
	color:#000;
	text-align:left;
	padding-left:30px;
	padding-right:30px;
	padding-top:10px;
	padding-bottom:10px;
	background-color:#FFF;
}

#theEnd h4  {
	margin:0px;
	padding:0px;
	position:relative;
	left:0px;
	top:0px;
	width: 100%;
	height:auto;
	display:inline-block;
	color:#FFF;
	font-size:81px;
	line-height:81px;
	font-family:MuseoSans-900;
	font-weight:normal;
	-webkit-text-stroke: 2px #f05223;
	text-shadow:
	1px 1px 0 #f05223,
	-1px -1px 0 #f05223,  
	1px -1px 0 #f05223,
	-1px 1px 0 #f05223,
	1px 1px 0 #f05223;
	text-transform:uppercase;
	margin-top:85px;
}

#theEnd .splitSection {
	position:relative;
	left:0px;
	top:0px;
	width:413px;
	height:auto;
	display:inline-block;
	text-align:center;
	margin-top:30px;
	vertical-align:top;
}

#theEnd .splitSection p {
	margin:0px;
	padding:0px;
	position:relative;
	left:0px;
	top:0px;
	width:100%;
	height:auto;
	font-family:MuseoSans-700;
	font-size:22px;
	line-height:33px;
	color:#25408f;
	display:inline-block;
}

#theEnd .splitSection .endButton {
	position:relative;
	left:0px;
	top:0px;
	display:inline-block;
	font-family:MuseoSans-900;
	font-weight:normal;
	font-size:22px;
	line-height:22px;
	padding:8px;
	background-color:#FFF;
	text-decoration:none;
	box-sizing:border-box;
	border:solid;
	border-width:2px;
	border-color:#f05223;
	text-align:center;
	color:#25408e;
	border-radius:5px;
	cursor:pointer;
	margin-top:20px;
}

#theEnd .endStudents {
	position:absolute;
	left:50%;
	top:400px;
	width:317px;
	height:auto;
	margin-left:-158px;
}

#theEnd .endTrees {
	margin-top:44px;
	width:373px;
	height:auto;
}

.soundButton {
	position:absolute;
	left:967px;
	top:70px;
	width:67px;
	height:auto;
	display:inline-block;
	text-align:center;
	font-family:MuseoSans-700;
	font-size:19px;
	line-height:21px;
	color:#14084e;
	text-decoration:none;
}

.soundImage {
	width:100%;
	height:auto;
}

#footer-wrapper-4o {
	padding-left:200px;
	box-sizing:border-box;
}

@media only screen and (max-width:1280px){

div.menu-links {
		display:none;
	}
	div#aem-kids-menu {
		width:100% !important;
		height:50px !important;
		min-height:50px !important;
		max-width:none;
		position:absolute;
		padding:0px !important;
	}
	div#logo-box {
		width:100% !important;
		max-width:none;
		background-color:#e20c32;
		display:inline-block;
		text-align:center;
	}
	div#logo-box img {
		position:relative;
		display:inline-block;
		height:50px;
	}
	aside.main-sidebar {
		width:100% !important;
		max-width:none;
		text-align:center;
		display:inline-block;
	}
	section.sidebar {
		width:100% !important;
		max-width:none;
		text-align:center;
		display:inline-block;
	}
	div.sidebar-header {
		width:100% !important;
		max-width:none;
		text-align:center;
		display:inline-block;
	}
	
	.theHolder {
		margin-top:50px;
		width: 100%;
		margin-left:0px;
	}
	
	#footer-wrapper-4o {
		margin-top:-4px;
		padding-left:0px;
	}
	
}