#area { 
  width: 420px; 
  height: auto; 
  position: relative; 
  margin: auto; 
  padding-bottom: 8rem;
}

#controlador {
  position: absolute;
  right: 0;
}

.fuente {
  position: absolute;
  z-index: 90;
}

#fuentes-names {
  position: relative;
}

#fuentes-names div {
  text-align: center;
  position: absolute;
}
#fuentes-names div#fuente-hidraulica {
  left: 35px;
}
#fuentes-names div#fuente-eolica {
  left: 175px;
}
#fuentes-names div#fuente-biomasa {
  left: 300px
}
#fuentes-names p { font-size: 12px; }

.drag { width: 60px }

#fuente-eolico-1 { left: 61px; top: 59px }
#fuente-eolico-2 { left: 161px; top: 149px }
#fuente-eolico-3 { left: 251px; top: 237px }

#fuente-hidraulico-1 { left: 34px; top: 102px }
#fuente-hidraulico-2 { left: 116px; top: 221px }
#fuente-hidraulico-3 { left: 150px; top: 206px }

#fuente-biomasa-1 { left: 50px; top: 8px }
#fuente-biomasa-2 { left: 25px; top: 241px }
#fuente-biomasa-3 { left: 145px; top: 361px }

.fuente div { float: left; width: 25px }
.fuente.rio-negro div { float: none }
.respuesta, .resultado { padding-top: 8px; padding-left: 4px; }
.fuente.rio-negro .respuesta, .fuente.rio-negro .resultado { padding-top: 0px; padding-left: 0px; }

.drag { cursor: move; z-index: 100; }
/*#hidraulico-1 { position: absolute; bottom: 0; left: 100px; }
#eolico-1 { position: absolute; bottom: 0; left: 150px; }
#biomasa-1 { position: absolute; bottom: 0; left: 200px; }*/

.drag-container {
  height: 70px;
}

.drag-container div { 
  z-index: 1000;          
  position: absolute;
}

div#btn {
  clear: both;
} 

.resultado, .respuesta { display: none; }

.drag { 
  transition: padding .3s ease-in-out; 
  /*position: absolute; 
  bottom: 0;*/
}

div[data-fuente="biomasa"] {
  left: 72.5%;
}

div[data-fuente="eolico"] {
  left: 42.5%;
}

div[data-fuente="hidraulico"] {
  left: 12.5%;
}

.drag-container {
  /*display: flex;
  justify-content: space-around;*/
}

.any { 
  /*transform: scale(.4, .4);*/
  /*background: blue;*/
  padding: 1rem;
}       

.dropped {
  background: yellow;
  border: 4px solid black;
}

@media screen and (max-width: 800px) {
  #area {
    width: 360px;
    margin-top: 10rem;
  }

  #fuentes-names div#fuente-hidraulica {
    left: 14px;
  }

  #fuentes-names div#fuente-eolica {
    left: 151px;
  }

  #fuentes-names div#fuente-biomasa {
    left: 275px;
  }

  #fuente-biomasa-1 {
    left: 44px;
    top: 0;
  }

  #fuente-biomasa-2 {
    left: 19px;
    top: 201px;
  }

  #fuente-biomasa-3 {
    left: 123px;
    top: 306px;
  }

  #fuente-eolico-1 {
    left: 54px;
    top: 45px;
  }

  #fuente-eolico-2 {
    left: 138px;
    top: 129px;
  }

  #fuente-eolico-3 {
    left: 207px;
    top: 194px;
  }

  #fuente-hidraulico-1 {
    left: 26px;
    top: 87px;
  }

  #fuente-hidraulico-2 {
    left: 99px;
    top: 186px;
  }

  #fuente-hidraulico-3 {
    left: 128px;
    top: 170px;
  }

  div[data-fuente="hidraulico"] {
    left: 8%;
  }

  #fuentes-names div#fuente-biomasa {
    left: 258px;
  }

}