/*keep this same for all*/
/*the main div container parallel to and above mainBox div*/
#SoundLab5
{
	position: relative;
	width:100%;
	height:100%;

	top:0%;
	left:0%;	

	/*background-color: #37C2DA;*/

	overflow: hidden;
	background-image: url("../../bg.png");
}

#SoundLab5 *{
	margin:0;
	padding:0;
}

/*****************************************************************************
******************************************************************************
********************************************************************/
/*space div*/
#space{
	/*display: none;*/
	position:absolute;
	top:0%;
	left:0%;
	width:100%;
	height:100%;
	/*border:1px solid green;*/

	-webkit-transition: left 0.5s linear 0.3s; /* For Safari 3.1 to 6.0 */
    transition: left 0.5s linear 0.3s;
}

#spacequestion{
	/*display: none;*/
	position:relative;
	margin-top: 2%;
	width: 100%;
	padding:0% 2%;
	text-align: center;	
	font-size: 1.3em;
	color:#F53357;
}

#medium{
	/*display: none;*/
	position:relative;
	margin-top:3%;	
	width:100%;
	height:40%;
	/*border:1px solid green;*/	
}

#medium > figure{
	display: none;
	position: absolute;
	top:0%;
	left:5%;
	width:40%;
	height:100%;
	cursor: pointer;
	/*border:1px solid red;*/
}

#medium > figure:nth-of-type(2){	
	left:55%;	
}

#medium > figure > img{
	/*display: none;*/
	position: absolute;
	top:0%;
	left:0%;
	width:100%;
	height:100%;
	/*border:1px solid red;*/
}

#medium > figure > figcaption{
	position: absolute;
	top:100%;
	width: 100%;
	text-align: center;
	font-size: 1.4em;
	/*border:1px solid red;*/
}


#medium > figure:nth-of-type(1) > figcaption > span:nth-of-type(2){
	display: none;
	position: relative;
	top:20%;
	left:2%;
	font-size: 1.4em;
	color:green;
}

#medium > figure:nth-of-type(2) > figcaption > span:nth-of-type(2){
	display: none;
	position: relative;
	top:20%;
	left:2%;
	font-size: 1.4em;
	/*border:1px solid red;*/
	color:darkred;
}

#result{
	display: none;
	position:relative;
	margin-top: 5%;
	width: 100%;
	padding:0% 2%;
	text-align: center;
	font-size: 1.3em;
}

#explanation{
	/*display: none;*/
	position:relative;
	margin-top: 2%;
	width: 100%;
	padding:0% 2%;
	text-align: center;
	font-size: 1.3em;
	color:#D73117;
}

#next{
	display: none;
	position: absolute;
	bottom:1%;
	right:1%;
	font-size: 3em;
	cursor: pointer;
	color:green;
	width: 7%;
}

/*temperature div*/
#temperature{
	position:absolute;
	top:0%;
	left:100%;
	width:100%;
	height:100%;
	/*background: green;*/
	-webkit-transition: left 0.5s linear 0.3s; /* For Safari 3.1 to 6.0 */
    transition: left 0.5s linear 0.3s;
}

#temptext,#temptext2,#temptext3,#tempexplain{
	position:relative;
	margin-top: 5%;
	width: 100%;
	padding:0% 2%;
	text-align: center;	
	font-size: 1.3em;
	color:#F53357;
}

#temptext2{
	color:#F51357;
}

#temptext3{
	color:#Ff1fa7;
}

#tempexplain{
	color:darkgreen;
	text-shadow:-1px -1px 0 #aaa,1px -1px 0 #aaa,-1px 1px 0 #aaa,1px 1px 0 #aaa;
}

#airmolecules{
	display: none;
	position: relative;
	margin-top:2%;
	left:0%;
	width:100%;
	height:30%;
	/*border:1px solid red;*/
}

#degreetext{
	position:absolute;
	top:0%;
	left:45%;
	
	padding:0% 2%;
	border-radius:0 15px 15px 15px;
	background: rgb(63, 154, 130);
	border: 0.2em solid #3B596A;
	text-align:center;	
	font-size: 1.3em;
	color:#ECDB60;
	cursor:pointer;
}

#molecules{
	position: absolute;
	top:30%;
	left:35%;
	width:30%;
	height:60%;
	/*border:1px solid red;*/
	cursor: none;
}

#molecules > div.col{
	position: relative;
	width:100%;
	height:18%;
	/*border:1px solid blue;*/
}

#molecules > div.col:nth-of-type(n+2){
	margin-top:1%;
}

#molecules > div.col > div{
	position: relative;
	top:0%;
	left:0%;
	float: left;
	width:6%;
	height:90%;
	border-radius:50%;
	background-color: rgba(235, 55, 36,0.5);
	border:0.2em solid rgba(235, 55, 36,0.1);
}

#molecules > div.col > div:nth-of-type(n+2){
	margin-left: 4%;
}

/*temperature buttons*/
#cool{
	position: absolute;
	top:50%;
	right:80%;
	padding:0.5%;
	font-size: 1.1em;
}

#heat{
	display: none;
	position: absolute;
	top:50%;
	left:80%;
	padding:0.5%;
	font-size: 1.1em;
}


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

#next:hover  #activityNextBtn{
	display:none;
}