#exeBox
{

	position: relative;
	width: 100%;
	height: 100%;
	font-size: 1.3em;
	overflow: hidden;
}
.allquestion
{
	position: absolute;
	width: 100%;
	height: 100%;
	top:0%;
	left: 0%;


}
.spaceTravelTitleBack
{
	position: relative;
	width: 100%;
	height: 100%;
	background:url("http://gituploads.olenepal.org/epaath_media/activity/grade7/science/sci_earth_universe_01/exercise/images/exe2/craft.png") no-repeat;
	background-size: 100% 100%;
}
.spaceTravelTitleBackInner
{
	position: absolute;
	width: 100%;
	height: 100%;
	top:0;
	left: 0;



}
.spaceTravelTitle
{
	position: relative;
	font-size: 5em;
	color: #baffac;
	font-weight: bold;

	width: 100%;
	text-align: center;
	margin: 22% auto!important;
	background: rgba(0,0,0,0.7);

}

.spaceStory
{
	position: relative;
	display: none;
	background:url("http://gituploads.olenepal.org/epaath_media/activity/grade7/science/sci_earth_universe_01/exercise/images/exe2/craft.png") no-repeat;
	background-size: 100% 100%;
	width: 100%;
	height: 100%;
}

.spaceTextBox
{
	position: relative;
	background: rgba(0,0,0,0.5);

	border-radius: 20px;
	width: 90%;
	height: 90%;

	top:5%;
	left: 5%;
	padding:2%!important;
	color: #81ff67;
	text-shadow: 2px 0px 1.5px #9DFF87;
	border:rgba(255,255,255,0.2) 15px solid;
	letter-spacing: 1;


}
.spaceTextBox div
{
	position: relative;
	margin: 5% auto!important;
	width: 85%;
	text-align: center;
	font-size: 2em;
	letter-spacing: 2;

}


.lastArrow,
.lastArrow2
{
	position: relative;
	width: 8%!important;
	color: red;
	left:35%;
	cursor: pointer;
	text-align: left;
}
.lastArrow2
{
	display: none;
}
.imgSpace
{
	width: 14%;
	position: absolute;
	bottom: 1%;
	right: 4%;

}
.imgSpace img
{
	width: 100%;
}
#space_3,
#space_4,
#space_5
{
	display: none;
}





.blastSpace
{
	width: 100%;
}


.blastSpace img
{
	width: 20%;
}

#mysolarSpace
{
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility:    hidden;
	backface-visibility:     hidden;
	-webkit-transform: translate3d(0, 0, 0);
	-moz-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
}

.rocketStand
{
	position: absolute;
	bottom: 0%;
	left: 35%;
	width: 35%;
}
.rocketStand img
{
	width: 100%;
}
.startIt{
	display: none;
	width: 15%;
	text-align: center;
	padding: 1%;
	position: absolute;
	top:20%;
	left: 40%;
	cursor: pointer;

	border:1px solid #72021c;
	-webkit-box-shadow: #B4B5B5 1px 1px 1px  ;
	-moz-box-shadow: #B4B5B5 1px 1px 1px ;
	box-shadow: #B4B5B5 1px 1px 1px  ;
	-webkit-border-radius: 0px;
	-moz-border-radius: 0px;
	border-radius: 0px;

	font-family:arial, helvetica, sans-serif;

	text-decoration:none;

	text-shadow: -1px -1px 0 rgba(0,0,0,0.3);
	font-weight:bold;
	color: #FFFFFF;
 	background-color: #A90329;
 	background-image: -webkit-gradient(linear, left top, left bottom, from(#A90329), to(#6d0019));
 	background-image: -webkit-linear-gradient(top, #A90329, #6d0019);
 	background-image: -moz-linear-gradient(top, #A90329, #6d0019);
 	background-image: -ms-linear-gradient(top, #A90329, #6d0019);
 	background-image: -o-linear-gradient(top, #A90329, #6d0019);
 	background-image: linear-gradient(to bottom, #A90329, #6d0019);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#A90329, endColorstr=#6d0019);
}

.startIt:hover{
 	border:0px solid #450111;
 	background-color: #77021d;
 	background-image: -webkit-gradient(linear, left top, left bottom, from(#77021d), to(#3a000d));
 	background-image: -webkit-linear-gradient(top, #77021d, #3a000d);
 	background-image: -moz-linear-gradient(top, #77021d, #3a000d);
 	background-image: -ms-linear-gradient(top, #77021d, #3a000d);
 	background-image: -o-linear-gradient(top, #77021d, #3a000d);
 	background-image: linear-gradient(to bottom, #77021d, #3a000d);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#77021d, endColorstr=#3a000d);
}
.timer
{
	position: absolute;
	width:6em;

	height:6em;
	border-radius: 100%;
	background:rgba(255,255,255,0.5);
	font-size: 4em;
	top:20%;
	left: 30%;
	display: none;
	z-index: 20;

}
.percent
{
	width:4em;
	height:4em;
	background:rgba(255,255,255,1);
	border-radius: 100%;
	position: absolute;
	top:1em;
	left: 1em;
	text-align: center;
	padding-top: 1.2em;
	color: red;

}
#pr2,
#pr3,
#pr4
{
	display: none;
}

.space{

	width:100%;
	height:100%;
	overflow:hidden;
	background-image: url("http://gituploads.olenepal.org/epaath_media/activity/grade7/science/sci_earth_universe_01/exercise/images/exe2/back.png");
	background-size: 100%;
	background-repeat: no-repeat;
	background-position: 100% 100%;
}


#mysolarSpace2{

	width:100%;
	height:100%;
	overflow:hidden;
	background-image: url("http://gituploads.olenepal.org/epaath_media/activity/grade7/science/sci_earth_universe_01/exercise/images/exe2/backgnd.png");

	background-repeat: no-repeat;
	background-size: 100% 100%;
	display: none;
}
#mysolarSpace2a
{
	width:100%;
	height:100%;
	overflow:hidden;
	background-image: url("http://gituploads.olenepal.org/epaath_media/activity/grade7/science/sci_earth_universe_01/exercise/images/exe2/backslant.png");

	background-repeat: no-repeat;
	background-position: 0% 100%;
	display: none;
}
#mysolarSpace3
{
	width:100%;
	height:100%;
	overflow:hidden;
	background-size: 100% 100%;
	background-repeat: no-repeat;
	display: none;
}

.launchShake
{

	-webkit-animation-name: spaceboots;
	-webkit-animation-duration: 0.5s;
	-webkit-transform-origin:50% 50%;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-timing-function: linear;

	-moz-animation-name: spaceboots;
	-moz-animation-duration: 0.5s;
	-moz-transform-origin:50% 50%;
	-moz-animation-iteration-count: infinite;
	-moz-animation-timing-function: linear;


	animation-name: spaceboots;
	animation-duration: 0.5s;
	transform-origin:50% 50%;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}
@-webkit-keyframes spaceboots {
	0% 	{ -webkit-transform: translate(5px, 0px);}
	25% { -webkit-transform: translate(0px, 0px);}
	50% { -webkit-transform: translate(5px, 0px);}
	75% { -webkit-transform: translate(0px, 0px);}
	100%{ -webkit-transform: translate(5px, 0px);}
}

@-moz-keyframes spaceboots {
	0% 	{ -moz-transform: translate(5px, 0px);}
	25% { -moz-transform: translate(0px, 0px);}
	50% { -moz-transform: translate(5px, 0px);}
	75% { -moz-transform: translate(0px, 0px);}
	100%{ -moz-transform: translate(5px, 0px);}
}

@-keyframes spaceboots {
	0% 	{ transform: translate(5px, 0px);}
	25% { transform: translate(0px, 0px);}
	50% { transform: translate(5px, 0px);}
	75% { transform: translate(0px, 0px);}
	100%{ transform: translate(5px, 0px);}
}
.moveBackground
{
	-webkit-animation-name: MOVE-BGS;
	-webkit-animation-duration: 5s;
	-webkit-animation-timing-function: easeout;
	-webkit-animation-iteration-count: 1;


    -moz-animation-name: MOVE-BGS;
	-moz-animation-duration: 5s;
	-moz-animation-timing-function: easeout;
	-moz-animation-iteration-count: 1;

	animation-name: MOVE-BGS;
	animation-duration: 5s;
	animation-timing-function: easeout;
	animation-iteration-count: 1;
}

@-webkit-keyframes MOVE-BGS {
    from { background-position:  100% 100%;  }
    to { background-position: 0% 0%; }
}
@-moz-keyframes MOVE-BGS {
    from { background-position:  100% 100%;  }
    to { background-position: 0% 0%; }
}
@-keyframes MOVE-BGS {
    from { background-position:  100% 100%;  }
    to { background-position: 0% 0%; }
}

.moveBackground2
{
	-webkit-animation-name: MOVE-BGSS;
	-webkit-animation-duration: 10s;
	-webkit-animation-timing-function: easeout;
	-webkit-animation-iteration-count: 1;


    -moz-animation-name: MOVE-BGSS;
	-moz-animation-duration: 10s;
	-moz-animation-timing-function: easeout;
	-moz-animation-iteration-count: 1;

	animation-name: MOVE-BGSS;
	animation-duration: 10s;
	animation-timing-function: easeout;
	animation-iteration-count: 1;
}

@-webkit-keyframes MOVE-BGSS {
    from { background-position:  0% 100%; }
    to { background-position: 100% 0%; }
}
@-moz-keyframes MOVE-BGSS {
    from { background-position:  0% 100%; }
    to { background-position: 100% 0%; }
}
@-keyframes MOVE-BGSS {
    from { background-position:  0% 100%; }
    to { background-position: 100% 0%; }
}

.moveBackground3
{
	-webkit-animation-name: MOVE-BG;
	-webkit-animation-duration: 20s;
	-webkit-animation-timing-function: easeout;
	-webkit-animation-iteration-count: infinite;


    -moz-animation-name: MOVE-BG;
	-moz-animation-duration: 20s;
	-moz-animation-timing-function: easeout;
	-moz-animation-iteration-count: infinite;

	animation-name: MOVE-BG;
	animation-duration: 20s;
	animation-timing-function: easeout;
	animation-iteration-count: infinite;
}

@-webkit-keyframes MOVE-BG {
    from { background-position:  0% 100%; }
    to { background-position: 100% 0%; }
}
@-moz-keyframes MOVE-BG {
    from { background-position:  0% 100%; }
    to { background-position: 100% 0%; }
}
@-keyframes MOVE-BG {
    from { background-position:  0% 100%; }
    to { background-position: 100% 0%; }
}


.space2{

	width:100%;
	height:100%;
	margin: auto;

	overflow:auto;



}

.preImage1
{
	background: url("http://gituploads.olenepal.org/epaath_media/activity/grade7/science/sci_earth_universe_01/exercise/images/exe2/surface1.jpg") no-repeat;
	background-size: 100% 100%;
}
.preImage2
{
	background: url("http://gituploads.olenepal.org/epaath_media/activity/grade7/science/sci_earth_universe_01/exercise/images/exe2/surface2.jpg") no-repeat;
	background-size: 100% 100%;
}
.preImage3
{
	background: url("http://gituploads.olenepal.org/epaath_media/activity/grade7/science/sci_earth_universe_01/exercise/images/exe2/surface3.jpg") no-repeat;
	background-size: 100% 100%;
}
.preImage4
{
	background: url("http://gituploads.olenepal.org/epaath_media/activity/grade7/science/sci_earth_universe_01/exercise/images/exe2/surface4.jpg") no-repeat;
	background-size: 100% 100%;
}
.preImage5
{
	background: url("http://gituploads.olenepal.org/epaath_media/activity/grade7/science/sci_earth_universe_01/exercise/images/exe2/surface5.jpg") no-repeat;
	background-size: 100% 100%;
}
.preImage6
{
	background: url("http://gituploads.olenepal.org/epaath_media/activity/grade7/science/sci_earth_universe_01/exercise/images/exe2/surface6.jpg") no-repeat;
	background-size: 100% 100%;
}

.preImage7
{
	background: url("http://gituploads.olenepal.org/epaath_media/activity/grade7/science/sci_earth_universe_01/exercise/images/exe2/surface7.jpg") no-repeat;
	background-size: 100% 100%;
}
.rocketsrc,
.rocketsrc1{
	position: absolute;
	bottom: 9%;
	left: 39%;
}


.rocketsrc2
{
	position: absolute;
	bottom: 0%;
	left: 0%;
}

.rocketsrc3
{
	position: absolute;
	bottom: 0%;
	left: 39%;
	display: none;
}
.rocketsrc4
{
	position: absolute;
	bottom: 0%;
	left: 0%;
	display: none;
}
.rocketsrc
{
	display: none;
}
.onGround
{
	width: 18%;
}
.upinAir
{
	width: 10%;
}
#goingrocketsrc
{
	width: 10%;
	position: absolute;
	bottom: 7%;
	left: 3%;
	 -webkit-transform: rotate(45deg);
   -moz-transform: rotate(45deg);
   transform: rotate(45deg);
}

#goingrocketsrc img,
.rocketsrc img,
.burningfire img,
.rocketsrc1 img,
.rocketsrc2 img,
.rocketsrc3 img,
.rocketsrc4 img
{
	width: 100%;

}
.burningfire
{
	width: 80%;
	position: absolute;
	top:84%;
	left: 11%;
	display: none;

}
.clouds
{
	position: absolute;

	width: 45%;

	display: none;

}
.clouds img
{
	width: 100%;
}
#cloud1,
#cloud2
{
	bottom: -10%;
}

#cloud7,
#cloud8
{
	bottom: -5%;

}

#cloud1,
#cloud7
{
	left: 20%;

}

#cloud3
{
	left: 30%;
	bottom: -3%;

}

#cloud4
{
	left: 45%;
	bottom: 1%;

}
#cloud5
{
	bottom: 0%;
	opacity: 0.5;
	left: 40%;

}
#cloud6
{
	bottom: 0%;
	opacity: 0.5;
	left: 25%;

}
#cloud2,
#cloud8
{
	left: 40%;


}

.rocketText,
.solarQuestion
{
	width: 80%;
	position: relative;
	margin: 2% auto;

	text-align: center;
	font-size: 1.1em;
	color: black;
	padding:1%;
	border: 2px solid #03254F;
	color: #fff;

}
.rocketText
{
	background: rgba(0,0,0,0.1);
}
.solarQuestion
{
	margin: 4% auto 1%;
	background: rgba(0,0,0,0.4);

}
#myatm
{
	color: red;
	margin-right: 5%;


}
.rotateRocket {
   -webkit-transform: rotate(45deg);
   -moz-transform: rotate(45deg);
   transform: rotate(45deg);


   -webkit-transition: -webkit-transform 0.1s linear 0.2s;
   -moz-transition: -moz-transform 0.1s linear 0.2s;
   transition: transform 0.1s linear 0.2s;

}

.landAstroGirl,
.questAstroGirl
{

	position: absolute;

	width: 10%;
	bottom: 4%;


}
.questAstroGirl
{

	left:10%;

}
.landAstroGirl
{
	display: none;
	left:15%;
}
.landAstroGirl img,
.questAstroGirl img
{
	width: 100%;
}


.astrospeech
{

	width: 40%;

	padding: 1.5%;
	text-align: center;
	background-color: #fff;
	border: 1px solid #666;
	-webkit-border-radius: 30px;
	-moz-border-radius: 30px;
	border-radius: 15px;
	-webkit-box-shadow: 2px 2px 4px #888;
	-moz-box-shadow: 2px 2px 4px #888;
	box-shadow: 2px 2px 4px #888;
	position: absolute;

	bottom:45%;

	left: 16%;
	display: none;
	font-size: 0.9em;
	color: black;
}



.astrospeech:after
{
	content: ' ';
	position: absolute;
	width: 0;
	height: 0;

	left: 10%;
	top: 100%;
	border: 15px solid;
	border-color: #fff transparent transparent #fff;
}
.landRocket
{
	position: absolute;
	bottom:3%;
	left: -10%;
	width: 45%;
	display: none;

}
.landRocket img
{
	width: 100%;
}
.rocketLife
{
	width: 95%;
	text-align: right;

	position: absolute;
	top:1%;
	right: 2%;
	display: none;


}
.rocketLife img
{
	margin-right: 0.25%;
}

.rocketLife img:last-child
{
	margin-right: 0.2%;
}

.rocketLife img,
.fallRocket img
{
	width: 1.5%;

}
.fallRocket img
{
	margin-right: 0.2%;
}
.fallRocket
{
	width: 95%;
	text-align: right;

	position: absolute;
	top:80%;
	right: 3%;
	display: none;


}
#secondsolarSpace
{
	width: 100%;
	height: 100%;
	position: relative;
	overflow: auto;
}
.solarLinker
{
	width: 100%;
	position: relative;
	text-align: center;
}
.solarLinker div
{
	display: inline-block;
	margin: auto 2%;
	padding: 1%;
	color: #fff;
	text-align: center;
	cursor: pointer;
}
.moreSolarHints
{
	background: #8064A2;
	width: 18%;

	-webkit-box-shadow:#8064A2  0px 2px 7px 0px;
	-moz-box-shadow:#8064A2  0px 2px 7px 0px;
	box-shadow:#8064A2    0px 2px 7px 0px;
}
.iknowans
{
	background: #77933C;
	width: 25%;

	-webkit-box-shadow:#77933C  0px 2px 7px 0px;
	-moz-box-shadow:#77933C  0px 2px 7px 0px;
	box-shadow:#77933C    0px 2px 7px 0px;
}
#whatOptionBoxex
{

}
.solarOptionBox
{
	width: 60%;
	height: 50%;
	display: none;
	position: absolute;
	left: 25%;

	top:40%;
	/*background: rgba(0,255,0,0.5);*/
	border-radius: 20px;
	text-align: center;
	overflow: hidden;

	-moz-transition: all 2.5s ease-in-out;
  -webkit-transition: all 2.5s ease-in-out;

  transition: all 2.5s ease-in-out;

}
.solaroptions
{
	width: 15%;
	position: absolute;

	color: #ccc;
	font-size: 1.2em;
	text-shadow: 2px 2px  #000;
	-moz-text-shadow: 2px 2px #000;
	-webkit-text-shadow: 2px 2px #000;

	-moz-transition: all 1s ease-in-out;
	-webkit-transition: all 1s ease-in-out;

	transition: all 1s ease-in-out;
}
#mercury_ids
{
left: 5%;
top:5%;
}
#venus_ids
{
	left:30%;
	top:5%;
}
#mars_ids
{
	left:50%;
	top:5%;
}
#jupiter_ids
{
	left:75%;
	top:5%;
}
#saturn_ids
{
	left:17%;
	top:47%;
}
#uranus_ids
{
	left:40%;
	top:47%;
}
#neptune_ids
{
	left:63%;
	top:47%;
}
.clickable
{
	cursor: pointer;
}
.enlargeOption
{
	width: 25%;
	font-size: 1.5em;
	top:10%!important;
	left: 35%!important;
}

@-webkit-keyframes animateWidthImg {
    0% { width:20%;}
    50% { width:10%; }
    100% {  width:0%; }
}
@-moz-keyframes animateWidthImg{
    0% { width:20%;}
    50% { width:10%; }
    100% {  width:0%; }
}
@-keyframes animateWidthImg {
 0% { width:20%;}
    50% { width:10%; }
    100% {  width:0%; }
}

.solarOptionBox img
{
	width: 100%;
}
.letterbx li
{
	text-align: left;
	-webkit-transition: -webkit-transform 1s linear 0.2s;
   -moz-transition: -moz-transform 1s linear 0.2s;
   transition: transform 1s linear 0.2s;
}
.letterbx li:nth-child(2)
{
	display: none;
}
.letterbx li:nth-child(3)
{
	display: none;
}

.gameover
{
	width: 60%;
	color: black;
	display: none;
	background: rgba(124,199,226,0.8);
	position: absolute;
	top:30%;
	left: 20%;
	text-align: center;
	padding: 5%;
	font-size: 2em;
	border-radius: 15px;

}

.gameComment
{
	width: 60%;
	color: black;
	display: none;
	background: rgba(124,199,226,0.8);
	position: absolute;
	bottom:3%;
	left: 25%;
	text-align: center;
	padding:2%;
	font-size: 1.2em;
	border-radius: 10px;

}

.myNewSolarBck
{
	width: 100%;
	height: 100%;
	position: relative;

}

.solarTravelBckgnd
{
	width: 100%;
	height: 100%;
	position: absolute;
	background-image: url("http://gituploads.olenepal.org/epaath_media/activity/science/sci_earth_universe_01/exercise/images/exe2/backtravel.png");
	background-size: 100% 100%;
	top:0%;
	left: 0%;

}

.goingToEarthClass{

	background-size: 100% 100%;

	background:url("http://gituploads.olenepal.org/epaath_media/activity/science/sci_earth_universe_01/exercise/images/exe2/goinghome.png") no-repeat;
	background-position: 0% 0%;
	background-size: 100% 100%;
	overflow:hidden;

}
.goToMyEarth
{
	display: none;
	width: 15%;
	position:absolute;
	right: -5%;
}
.thankyouNote
{
	width: 60%;
	color: black;

	background: rgba(124,199,226,0.8);
	position: absolute;
	top:25%;
	left: 20%;
	text-align: center;
	padding: 5%;
	font-size: 1.5em;
	border-radius: 15px;
}


#nextBtnId
{
	width: 8%;
	text-align: right;
	position: absolute;
	right: 0%;
	bottom: 1%;

	display: none;
	cursor: pointer;
	color:black;
	font-size:2em;
}

#nextBtnId:hover #activityNextHoverBtn
{
	display: block;
}

#nextBtnId:hover #activityNextBtn
{
	display: none;
}
.finalArrow
{
	width: 8%;
	text-align: right;
	position: absolute;
	right: 0%;
	bottom: 1%;
	height: 10%;

	display: none;
	cursor: pointer;
	color:black;
	font-size:2em;
}
.replyMeBtn{
	position: absolute;
	top: 53%;
	left: 20%;
	height: 10%;
	width: 16%;
	background: #fff;
	border: 4px solid gray;
	border-radius: .4em;
	text-align: center;
	align-content: center;
	padding: 1%;
	font-size: 4vh;
	animation: scaleAnim 1s linear infinite;
	cursor: pointer;
}
@keyframes scaleAnim {
	50%{transform: scale(1.1, 1.1);}
}
/*.replyMeBtn
{
	display: none;

    text-align: center;

    background: #1c5426;
   background: -webkit-gradient(linear, left top, left bottom, from(#5fd972), to(#1c5426));
   background: -webkit-linear-gradient(top, #5fd972, #1c5426);
   background: -moz-linear-gradient(top, #5fd972, #1c5426);
   background: -ms-linear-gradient(top, #5fd972, #1c5426);
   background: -o-linear-gradient(top, #5fd972, #1c5426);

   -webkit-border-radius: 15px;
   -moz-border-radius: 15px;
   border-radius: 15px;
   -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
   -moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
   box-shadow: rgba(0,0,0,1) 0 1px 0;
   text-shadow: rgba(0,0,0,.4) 0 1px 0;
   color: #f2f2f2;

   text-decoration: none;
   vertical-align: middle;
   font-size: 1em;
   cursor: pointer;
   width: 30%;
   margin: auto;
}

.replyMeBtn:hover {
    border-top-color: #45d15a;
   background: #247a0c;
   color: #000000;
 }*/