/* --- MAP --- */

#agricultural-distribution .map {
  background-image: url(../../../interactive/map-chooser/agricultural-distribution/img/map.png);
  width: 850px;
  height: 550px;
}

#agricultural-distribution .map .img-placeholder {
  background-size: 100% auto;
  width: 850px;
  height: 550px;
}

/* --- TEXT --- */

#agricultural-distribution .legend-placeholder {
  display: inline-block;
  margin: 0 20px;
  color: #096ba3;
}

#agricultural-distribution .legend-placeholder .dot {
  background: #096ba3;
  display: inline-block;
  width: 8px;
  height: 8px;
  margin: 10px 5px 0 0;
  vertical-align: top;
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  border-radius: 50px;
}

#agricultural-distribution .us-total-placeholder {
  display: inline-block;
  margin: 0 20px;
}

/* --- LAYERS --- */

#agricultural-distribution .layers {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

#agricultural-distribution .layer {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

#agricultural-distribution .layer-map {
  background-repeat: no-repeat;
  background-size: 100% auto;
  width: 850px;
  height: 550px;
}

/* market value */

#agricultural-distribution .layer.market-value .layer-map {
  background-image: url(img/market-value.png);
}

/* ------ MEDIA QUERIES ------ */

/* iPad portrait */
@media screen and (max-width: 768px) {
  #agricultural-distribution .map {
    width: 688px;
    height: 457px;
  }
  
  #agricultural-distribution .map .img-placeholder {
    width: 688px;
    height: 457px;
  }
}

/* iPhone landscape */
@media screen and (max-width: 600px) {
  #agricultural-distribution .map {
    width: 440px;
    height: 285px;
  }
  
  #agricultural-distribution .map .img-placeholder {
    width: 440px;
    height: 285px;
  }
}

/* iPhone portrait */
@media screen and (max-width: 400px) {
  #agricultural-distribution .map {
    width: 280px;
    height: 181px;
  }
  
  #agricultural-distribution .map .img-placeholder {
    width: 280px;
    height: 181px;
  }
}