@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);
}

#page1_inst {
  position: absolute;
  top: 38px;
  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: 15px;
  left: 80px;
  color: black;
  font-family: sans-serif;
  font-size: 13px;
}

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

#man {
  position: absolute;
  top: 52px;
  left: -6px;
  width: 400px;
  height: 361px;
  background-image: url('../img/man.png');
  background-repeat: no-repeat;
}

#drag_2 {
  position: absolute;
  top: 182px;
  left: 332px;
  width: 85px;
  height: 35px;
  background-image: url('../img/drag_img.png');
  background-repeat: no-repeat;
  cursor: pointer;
}

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

#drag_3 {
  position: absolute;
  top: 182px;
  left: 195px;
  width: 85px;
  height: 35px;
  background-image: url('../img/drag_img.png');
  background-repeat: no-repeat;
  cursor: pointer;
}

#drag_3 p {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
  color: #000;
  width: 85px;
  height: 35px;
  margin-top: -1px;
  margin-left: 30px;
}

#drag_1 {
  position: absolute;
  top: 182px;
  left: 45px;
  width: 85px;
  height: 35px;
  background-image: url('../img/drag_img.png');
  background-repeat: no-repeat;
  cursor: pointer;
}

#drag_1 p {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
  color: #000;
  width: 85px;
  height: 35px;
  margin-top: -1px;
  margin-left: 30px;
}

#drop_1 {
  position: absolute;
  top: 29px;
  left: 205px;
  width: 85px;
  height: 35px;
  background-image: url('../img/drag_img.png');
  background-repeat: no-repeat;
}

#drop_2 {
  position: absolute;
  top: 69px;
  left: 135px;
  width: 85px;
  height: 35px;
  background-image: url('../img/drag_img.png');
  background-repeat: no-repeat;
}

#drop_3 {
  position: absolute;
  top: 105px;
  left: 0px;
  width: 85px;
  height: 35px;
  background-image: url('../img/drag_img.png');
  background-repeat: no-repeat;

}

.txt_head {
  position: absolute;
  top: 180px;
  left: 387px;
  font-size: 14px;
  color: #333;
  line-height: 36px;
}

.text_align1 {
  margin-left: 100px;
}

.text_align2 {
  margin-top: 4px;
}

.text_align3 {
  margin-top: -35px;
  margin-left: 230px;
  width: 210px;
}

.text_align4 {
  margin-top: -3px;
  margin-left: 95px;
}

.number {
  position: absolute;
  top: 71px;
  left: 209px;
}

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

.titulo{
  position: absolute;
  left: 110px;
  top: -15px;
  font-size: 22px;
  font-family: sans-serif;
}