@import url("S_G06_U03_L02_03.css");
.tarea {
    background-image: url(../img/S_G06_U02_L01_05/tarea-01.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    width: 1216.84px;
    height: 657.52px;
    position: absolute;
    top:0%;
    left: 1%;
}
.tarea2 {
    background-image: url(../img/S_G06_U02_L01_05/tarea-02-01.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    width: 1216.84px;
    height: 657.52px;
    position: absolute;
    top:0%;
    left: 1%;
}
.flechaAtras {
     width: 65px;
  height: 65px;
    top: 7.2%;
  left: 93.8%;
    position: absolute;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
}
.flechaSiguiente {
      width: 161px;
  height: 150px;
  top: 84.2%;
  left: 89.4%;
    position: absolute;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
}

.clickeable1{
      width: 157px;
  height: 97px;
  position: absolute;
  top: 20%;
  left: 40.9%;
  background-color: #fff;
}
.clickeable2{
     width: 138px;
  height: 97px;
  position: absolute;
  top: 20%;
  left: 53.9%;
  background-color: #fff;
}
.clickeable3{
     width: 155px;
  height: 97px;
  position: absolute;
  top: 20%;
  left: 65.4%;
  background-color: #fff;
}
.clickeable4{
     width: 180px;
  height: 97px;
  position: absolute;
  top: 20%;
  left: 78.2%;
  background-color: #fff;
}
.clickeable5{
     width: 157px;
  height: 94px;
  position: absolute;
  top: 35%;
  left: 40.9%;
  background-color: #fff;
}
.clickeable6{
     width: 138px;
  height: 94px;
  position: absolute;
  top: 35%;
 left: 53.9%;
  background-color: #fff;
}
.clickeable7{
     width: 155px;
  height: 94px;
  position: absolute;
  top: 35%;
 left: 65.4%;
  background-color: #fff;
}
.clickeable8{
      width: 180px;
  height: 94px;
  position: absolute;
  top: 35%;
 left: 78.2%;
  background-color: #fff;
}
.clickeable9{
     width: 157px;
  height: 96px;
  position: absolute;
  top: 49.7%;
  left: 40.9%;
  background-color: #fff;
}
.clickeable10{
     width: 138px;
  height: 96px;
  position: absolute;
  top: 49.7%;
 left: 53.9%;
  background-color: #fff;
}
.clickeable11{
     width: 155px;
  height: 96px;
  position: absolute;
  top: 49.7%;
 left: 65.4%;
  background-color: #fff;
}
.clickeable12{
      width: 180px;
  height: 96px;
  position: absolute;
  top: 49.7%;
 left: 78.2%;
  background-color: #fff;
}
.clickeable13{
     width: 157px;
  height: 96px;
  position: absolute;
  top: 64.6%;
  left: 40.9%;
  background-color: #fff;
}
.clickeable14{
     width: 138px;
  height: 96px;
  position: absolute;
  top: 64.6%;
 left: 53.9%;
  background-color: #fff;
}
.clickeable15{
     width: 155px;
  height: 96px;
  position: absolute;
  top: 64.6%;
 left: 65.4%;
  background-color: #fff;
}
.clickeable16{
      width: 180px;
  height: 96px;
  position: absolute;
  top: 64.6%;
 left: 78.2%;
  background-color: #fff;
}
.clickeable17{
     width: 157px;
  height: 96px;
  position: absolute;
  top: 79.5%;
  left: 40.9%;
  background-color: #fff;
}
.clickeable18{
     width: 138px;
  height: 96px;
  position: absolute;
  top: 79.5%;
 left: 53.9%;
  background-color: #fff;
}
.clickeable19{
     width: 155px;
  height: 96px;
  position: absolute;
  top: 79.5%;
 left: 65.4%;
  background-color: #fff;
}
.clickeable20{
      width: 180px;
  height: 96px;
  position: absolute;
  top: 79.5%;
 left: 78.2%;
  background-color: #fff;
}

.mouse{
    background-image: url(../img/S_G06_U02_L01_05/imgTclick-01.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    width: 40px;
    height: 44px;
    position: relative;
    top:30%;
    left: 40%;
}
#puzzle {
    position: absolute;
    border-right: solid #000000 1px;
    border-bottom: solid #000000 1px;
    left: 37%;
    top: 109px;
    background-color: transparent;
}

#puzzle .hover {
    background-color: #98BE13;
}

#puzzle .complete,
#wordList .complete {
    background-color: #98BE13;
}

#puzzle .active,
#wordList .active {
    background-color: #39F;
}

#puzzle .alphabet {
    font-family: 'cabinmedium';
    font-size: 24px;
    letter-spacing: 0;
    text-align: center;
    border-left: solid black 1px;
    border-top: solid black 1px;
    line-height: 29px;
    color: #000;
}