#lab1
{
	position: relative;
	top:0%;
	left:0%;
	width:100%;
	height:100%;
	/*border:1px solid red;*/
	/*background-color: #50C0A0;*/
	background-image: url("../../bg.png");
}

/* front page css starts */
.coverimg {

    position: absolute;
    z-index: 999;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
}
.titlefront {

	position: absolute;
	z-index: 1000;
	font-family: sniglet;
	font-size: 6vw;
	transform: translateX(-50%);
	left: 50%;
	top: 15%;
}
/* front page css ends */

/*goto imageSelect division*/
#imageSelect{
	/*display: none;*/
	position: absolute;
	top:30%;
	left:10%;
	width:80%;
	height: 30%;

	background-color: #B4CCB9;
    -moz-box-shadow: 0px 0px 3px 3px #557779;
    -webkit-box-shadow: 0px 0px 3px 3px #557779;
    box-shadow: 0px 0px 3px 3px #557779;
    z-index: 100;
}

#imageSelect > p:nth-of-type(1)
{
	position: absolute;
	top:0%;
	left:30%;
	font-size: 130%;
	color:#E84D5B;

}

#imageSelect > img
{
	 position:absolute;
	top:25%;
	left:0%;
	/*border:2px solid red;*/
	width:20%;
	cursor: pointer;
}

#imageSelect > img:nth-of-type(1)
{
	left:3%;

}

#imageSelect > img:nth-of-type(2)
{

	left:27%;
}

#imageSelect > img:nth-of-type(3)
{
	left:52%;
}

#imageSelect > img:nth-of-type(4)
{
	left:76%;
}

/*circleEffect inside imageSelect*/
#round1, #round2
{
	display: none;
	position:absolute;
	box-shadow:inset 0px 0px 3px 2px skyblue;
	border:1px solid blue;
	border-radius: 50%; /*makes a circular div*/
	opacity: 0;
}

#round1{
	top:45%;
	left:12%;
	height:22%;
	width:5%;
}

#round2{
	top:49.5%;
	left:12.9%;
	height:13%;
	width:3%;
}

/*query part*/
/*the paragraph*/
#query
{
	position:absolute;
	font-size: 1.5em;
	top:45%;
	left:25%;
	width:50%;
	height: 8%;
	/*padding:0.5%;*/
	/* box-shadow: 0px 0px 3px 2px skyblue; */
	color:#571942;
	/*border:1px solid red ;*/
	display:none;
}

/*playAnim button*/

#playAnim {

	position:relative;
	top:0%;
	left:3%;
	cursor: pointer;
	background-color: transparent;
	border: none;
	width: 15%;
	height: 100%;
	display: none;

}

 /*the wave division*/
 #wave
 {
 	display: none;
 	position:absolute;
 	top:45%;
 	left:10%;
 	width:90%;
 	height:30%;
 	/*border:1px solid red;*/
 }

 #instrument
 {
	position:absolute;
	top:20%;
	left:5%;
	width:15%;
	z-index: 10; /* for particles to be behind image */
 }

 #molecules{
	position: absolute;
	top:10%;
	left:20%;
	width:40%;
	height:80%;
	/*border:1px solid red;*/
	cursor: none;

}

div.col{
	width:100%;
	height:17%;
	/*border:1px solid blue;*/
}

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

div.col > div{
	position: relative;
	/*display: inline-block;*/
	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.6);
}

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


.prow{
	position:absolute;
	width:5%;
	height:10%;
	top:25%;
	left:5%;
	/*border:1px solid blue;*/
	display: inline-block;
}

.prow > div{
	position:relative;
	height:60%;
	width:40%;
	border-radius:50%;
	margin-bottom:20%;
	background-color: #2C3034;
	white-space: nowrap;
}

.prow:nth-of-type(1)
{
	left:10%;
}

.prow:nth-of-type(2)
{
	left:20%;
}

.prow:nth-of-type(3)
{
	left:30%;
}

.prow:nth-of-type(4)
{
	left:40%;
}

.prow:nth-of-type(5)
{
	left:50%;
}

.prow:nth-of-type(6)
{
	left:60%;
}

.prow:nth-of-type(7)
{
	left:70%;
}

.prow:nth-of-type(8)
{
	left:80%;
}

.prow:nth-of-type(9)
{
	left:90%;
}




/*the cat animation div*/

#myCat
{
	position:absolute;
	top:15%;
	left:62%;
	width:18%;
}

#myCat > img
{
	position: absolute;
	top:0%;
	left: 0%;
	width: 100%;
}


#myCat > img:nth-of-type(n+2)
{
	display: none;
}


/*the last coming information*/
#lastInfo
{
	position: absolute;
	width:80%;
	top:50%;
	left:10%;
	padding:0.5%;
	font-size:1.5em;
	color:#F53357;

}