body {
	background-color:black;
}
.col {
	width:5%; 
	height: 300px;
	z-index: 100;
	position: absolute;
	cursor: grab;
}

#zoe{
	top:0.5%;
	left: 0.2%;
	color: pink;
	border: 2px solid;
	
}
#pao{
	top: 0.5%;
	left:17%;
	border: 2px solid;
	color: ();
	
}
#ang{
	top:0.5%;
	left: 32.8%;
	color: green;
	border: 2px solid;
	
}
#leo{
	top:0.5%;
	left: 61%;
	color: grey;
	border: 2px solid;
	
}
#rob{
	top:39.5%;
	left: 94.5%;
	color: #FF1493;
	border: 2px solid;
}
#hug1{
	top:39.5%;
	left: 66.5%;
	color: #2F4F4F;
	border: 2px solid;
}
#jul1{
	top:39.5%;
	left: 51.8%;
	color: #00BFFF;
	border: 2px solid;
}
#alex{
	top:39.5%;
	left: 27.3%;
	color: red;
	border: 2px solid;
}
#ant{
	top:78.5%;
	left: 0.2%;
	color: #20B2AA;
	border: 2px solid;
}
#col{
	top:78.5%;
	left: 12.2%;
	color: #DAA520;
	border: 2px solid;
}
#joa{
	top:78.5%;
	left: 40.2%;
	color: #DCDCDC;
	border: 2px solid;
}
#jul2{
	top:78.5%;
	left: 52.7%;
	color: #FFD700;
	border: 2px solid;
}
#zoe2{
	top:78.5%;
	left: 76.5%;
	color: #FF8C00;
	border: 2px solid;
}
#fan{
	top:117.5%;
	left: 94.5%;
	color: #FF8C00;
	border: 2px solid;
}
#cla{
	top:117.5%;
	left: 78.5%;
	color: #98FB98;
	border: 2px solid;
}
#geo{
	top:117.5%;
	left: 67.5%;
	color: blue;
	border: 2px solid;
}
#do{
	top:117.5%;
	left: 49.5%;
	color: purple;
	border: 2px solid;
}
#tran{
	top:117.5%;
	left: 25.5%;
	color: white;
	border: 2px solid;
}



.photo{cursor: default;}

#photo{
	position: absolute;
	opacity: 0;
	width: 28.2%;
	top:0.5%;
	left: 32.9%;
	z-index: 100;
}
#photo2{
	position: absolute;
	opacity: 0;
	width: 16.9%;
	top:0.5%;
	left: 0.2%;
	z-index: 100;
}
#photo3{
	position: absolute;
	opacity: 0;
	width: 15.8%;
	top:0.5%;
	left: 17%;
	z-index: 100;
}
#photo4{
	position: absolute;
	opacity: 0;
	width: 28%;
	top:0.5%;
	left: 61%;
	z-index: 100;
}
#photo5{
	position: absolute;
	opacity: 0;
	width: 28%;
	top:39.5%;
	left: 71.7%;
	z-index: 100;
}
#photo6{
	position: absolute;
	opacity: 0;
	width: 14.7%;
	top:39.5%;
	left: 57%;
	z-index: 100;
}
#photo7{
	position: absolute;
	opacity: 0;
	width: 24.6%;
	top:39.5%;
	left: 32.4%;
	z-index: 100;
}
#photo8{
	position: absolute;
	opacity: 0;
	width: 22.2%;
	top:39.5%;
	left: 10.3%;
	z-index: 100;
}
#photo9{
	position: absolute;
	opacity: 0;
	width: 12%;
	top:78.5%;
	left: 0.2%;
	z-index: 100;
}
#photo10{
	position: absolute;
	opacity: 0;
	width: 28%;
	top:78.5%;
	left: 12.3%;
	z-index: 100;
}
#photo11{
	position: absolute;
	opacity: 0;
	width: 12.4%;
	top:78.5%;
	left: 40.3%;
	z-index: 100;
}
#photo12{
	position: absolute;
	opacity: 0;
	width: 23.9%;
	top:78.5%;
	left: 52.7%;
	z-index: 100;
}
#photo13{
	position: absolute;
	opacity: 0;
	width: 23%;
	top:78.5%;
	left: 76.5%;
	z-index: 100;
}
#photo14{
	position: absolute;
	opacity: 0;
	width: 16%;
	top:117.5%;
	left: 83.6%;
	z-index: 100;
}
#photo15{
	position: absolute;
	opacity: 0;
	width: 10.9%;
	top:117.5%;
	left: 72.7%;
	z-index: 100;
}
#photo16{
	position: absolute;
	opacity: 0;
	width: 10.9%;
	top:137.5%;
	left: 55.7%;
	z-index: 100;
}
#photo17{
	position: absolute;
	opacity: 0;
	width: 24%;
	top:117.5%;
	left: 30.6%;
	z-index: 100;
}
#photo18{
	position: absolute;
	opacity: 0;
	width: 16.5%;
	top:117.5%;
	left: 14.4%;
	z-index: 100;
}