@font-face {
  font-family: Jacoby;
  src: url('../fonts/Jacoby_ICG_Black.eot'), url('../fonts/Jacoby_ICG_Black.ttf'),  url('../fonts/jacoby_icg_black.otf');
}

@font-face {
  font-family: Trebuchet MS; src: url('../fonts/TREBUC.eot'), url('../fonts/TREBUC.ttf'),  url('../fonts/TREBUC.otf');
}

body,html{
    overflow:none !important;
    background-color:  rgb(204, 204, 204);
}
#unit{
	font-size:22px;
	font-family:Arial, Helvetica, sans-serif;
	position:absolute;
	top:-52px;
	left:15px;
	color:white;
	z-index:1000;
}

#page1_inst {
  position: absolute;
  top: 55px;
  left: 30px;
  font-family: Trebuchet MS;
  width: 880px;
  font-size: 22px;
  text-align: left;
}

#page2_inst {
  position: absolute;
  top: 18px;
  left: 30px;
  font-family: Trebuchet MS;
  width: 880px;
  font-size: 22px;
  text-align: left;
}

#page1 {
  height: 505px;
  left: 0px;
  position: absolute;
  text-align: center;
  top: 0px;
  width: 910px;
}

/*.cream_bg {
  position: absolute;
  top: -12px;
  left: -12px;
  width: 879px;
  height: 45px;
  background-image: url('../img/cream_bg.png');
  background-repeat: no-repeat;
}*/

.txt_1 {
  position: absolute;
  top: 8px;
  left: 50px;
  color: #333333;
}

.arrow_img {
  position: absolute;
  top: 0px;
  left: -6px;
  width: 46px;
  height: 45px;
  background-image: url('../img/arrow.png');
  background-repeat: no-repeat;
}

#group_1 {
  position: absolute;
  top: 43px;
  left: 84px;
  width: 240px;
  height: 340px;
  background-image: url('../img/img1.png');
  background-repeat: no-repeat;
}

#group_2 {
  position: absolute;
  top: 43px;
  left: 324px;
  width: 230px;
  height: 340px;
  background-image: url('../img/img2.png');
  background-repeat: no-repeat;
}

#group_3 {
  position: absolute;
  top: 43px;
  left: 566px;
  width: 240px;
  height: 340px;
  background-image: url('../img/img3.png');
  background-repeat: no-repeat;
}

#drop_1 {
  position: absolute;
  top: 307px;
  left: 107px;
  width: 185px;
  height: 65px;
  background-image: url('../img/drop_area.png');
  background-repeat: no-repeat;
}

#drop_2 {
  position: absolute;
  top: 307px;
  left: 346px;
  width: 185px;
  height: 65px;
  background-image: url('../img/drop_area.png');
  background-repeat: no-repeat;
}

#drop_3 {
  position: absolute;
  top: 307px;
  left: 589px;
  width: 185px;
  height: 65px;
  background-image: url('../img/drop_area.png');
  background-repeat: no-repeat;
}

#drag_3 {
  position: absolute;
  top: 400px;
  left: 107px;
  width: 185px;
  height: 65px;
  background-image: url('../img/drag_area.png');
  background-repeat: no-repeat;
  cursor: pointer;
}

#drag_3 p {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
  color: #000;
  width: 185px;
  height: 20px;
  margin-top: 5px;
  margin-left: 21px;
}

#drag_2 {
  position: absolute;
  top: 400px;
  left: 346px;
  width: 185px;
  height: 65px;
  background-image: url('../img/drag_area.png');
  background-repeat: no-repeat;
  cursor: pointer;
}

#drag_2 p {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
  color: #000;
  width: 185px;
  height: 20px;
  margin-top: 5px;
  margin-left: 21px;
}

#drag_1 {
  position: absolute;
  top: 400px;
  left: 586px;
  width: 185px;
  height: 65px;
  background-image: url('../img/drag_area.png');
  background-repeat: no-repeat;
  cursor: pointer;
}

#drag_1 p {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
  color: #000;
  width: 185px;
  height: 20px;
  margin-top: 5px;
  margin-left: 21px;
}

#page2 {
  height: 505px;
  left: 0px;
  position: absolute;
  text-align: center;
  top: 0px;
  width: 910px;
  display: none;
}

#bien {
  position: absolute;
  background-repeat: no-repeat;
  width: 484px;
  left: 102px;
  top: 268px;
  display: none;
}

.head_1 {
  margin-top: 4px;
  margin-left: 40px;
}

.head_2 {
  margin-top: 4px;
  margin-left: 40px;
}

.head_3 {
  margin-top: 4px;
  margin-left: 40px;
}