@import url("S_G06_U02_L03_03.css");
.observaAnimacion {
    background-image: url(../img/S_G06_U02_L03_03_01/observaAnimacion.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    width: 1247px;
    height: 690px;
}

.vueloMosca {
    background-image: url(../img/S_G06_U02_L03_03_01/vueloMosca.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    width: 1247px;
    height: 678px;
}

#tabla1 {
    width: 500px;
    height: 450px;
    background-color: transparent;
    position: absolute;
    top: 30.5%;
    left: 3%;
}

#tabla2 {
    width: 478px;
    height: 450px;
    background-color: transparent;
    position: absolute;
    top: 30.5%;
    left: 58.7%;
}

.flechaAtras {
     width: 65px;
  height: 65px;
  top: 53.2%;
  left: 4.8%;
    position: absolute;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
}

.flechaSiguiente {
      width: 65px;
  height: 65px;
  top: 53.2%;
  left: 95.4%;
    position: absolute;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
}
.area1{
      background-image: url(../img/S_G06_U03_L01_03_01/imgAct1-01.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    width: 1247px;
    height: 679px;
    position: absolute;
      top: 0%;
   left: 0%;
}
.area2{
      background-image: url(../img/S_G06_U03_L01_03_01/imgAct2-01.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    width: 1247px;
    height: 679px;
    position: absolute;
      top: 0%;
   left: 0%;
}
/*DRAGS*/



.cntMovimientos {
      width: 809px;
  height: 76px;
  background-color: transparent;
  position: absolute;
  top: 79%;
  left: 21%;
}

.movimientoDrag {
    width: 227px;
    height: 74px;
    position: relative;
    background-color: #FF263C;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}



.movimientoDrag .textoCentrado {
    font-family: 'cabinregular';
    font-size: 30px;
    color: #fff;
    text-align: center;
}

.movimientoDrop {
    width: 227px;
    height: 74px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    margin-top: 0px;
}


#lstDrags {
    margin: 0;
    padding: 0;
    position: absolute;
    
}
#lstDrags li{
    float: left;
    
    margin-right: 10px;
    margin-bottom: 5px;
}


#lstDrops {
    margin: 0;
  padding: 0;
  position: absolute;
  top: -442%;
  left: 66.3%;
  width: 315px;
  height: 318px;
}
.textoCentrado {
    white-space: nowrap;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    font-size: 35px;
    color: #003F84;
    
}