/*** text styling ***/

h5{
  font-size:16px;
  margin:0;
}

h4{
  font-size:20px;
  margin:0;
}

/*** drop zones ***/

.dropZone, .correct-drop{
  width:120px;
  height:80px;
  padding:5px;
  margin-bottom:10px;
  border: 2px dotted gray;
}

.dropZone-first, .correct-drop-first{
  margin-top:180px;
}

.correct-drop{
  color:#fff;
  background-color: #219eab;
  display:inline-block;
  font-weight:400;
  font-size:14px;
  line-height:16px;
  padding:5px;
}

.drag-holder{
  margin-bottom:20px;
}

/*** draggables ***/

.draggable{
  color:#fff;
  background-color: #219eab;
  width:100px;
  display:inline-block;
  margin-bottom:10px;
  font-weight:400;
  font-size:14px;
  line-height:16px;
  padding:5px;
  cursor:pointer;
}


.alert-key{
  background-color:rgba(0, 128, 128, 0.1);
}

.fa-long-arrow-right{
  font-size:100px;
  height:40px;
}

.arrow-change{
  cursor:pointer;
}

.arrows-holder{
  margin-bottom:20px;
}

.arrow-default{
  color:gray;
}

.arrow-overland-flow{
  color:#FFFF00;
}

.arrow-groundwater-flow{
  color:#0000FF;
}

.arrow-infiltration{
  color:#AA0078;
}

.arrow-throughflow{
  color:#00FFFF;
}

.hint2{
  display:block;
}

/*** Breakpoints ***/

/* Desktop */
@media(min-width: 992px){

  .dropZone-first, .correct-drop-first{
    margin-top:280px;
  }

  .dropZone, .correct-drop{
    width:140px;
    height:80px;
    padding:5px;
  }

  .draggable{
    width:120px;
    font-size:16px;
    line-height:18px;
    padding:5px;
  }
}

/* Large Desktop */
@media(min-width: 1200px){

  .dropZone-first, .correct-drop-first{
    margin-top:340px;
  }

  .dropZone, .correct-drop{
    width:160px;
    height:100px;
    padding:5px;
  }

  .draggable{
    width:140px;
    font-size:20px;
    line-height:22px;
    padding:5px;
  }

  /*** text styling ***/

  h5{
    font-size:20px;
    margin:0;
  }

  h4{
    font-size:24px;
    margin:0;
  }

}