/* --- ARROWS --- */

.region {
  background-repeat: no-repeat;
  background-size: 100% auto;
  position: absolute;
  left: 0;
  top: 0;
  width: 850px;
  height: 550px;
  display: none;
  z-index: 2;
}

/* --- OVERLAYS --- */

.interactive-wrap.map-and-charts .overlay.arrow-left:before,
.interactive-wrap.map-and-charts .overlay.arrow-right:before {
  top: 50%;
  margin-top: -15px;
}

/* --- TYPE 1: BLANK MAP --- */

/* regions */

.map-type-1 .region.alaska {
  background-image: url(../../interactive/map-and-charts/img/regions/type1/alaska_on.png);
}

.map-type-1 .region.northwest {
  background-image: url(../../interactive/map-and-charts/img/regions/type1/northwest_on.png);
}

.map-type-1 .region.southwest {
  background-image: url(../../interactive/map-and-charts/img/regions/type1/southwest_on.png);
}

.map-type-1 .region.hawaii {
  background-image: url(../../interactive/map-and-charts/img/regions/type1/hawaii_on.png);
}

.map-type-1 .region.great-plains-north {
  background-image: url(../../interactive/map-and-charts/img/regions/type1/greatplainsnorth_on.png);
}

.map-type-1 .region.great-plains-south {
  background-image: url(../../interactive/map-and-charts/img/regions/type1/greatplainssouth_on.png);
}

.map-type-1 .region.midwest {
  background-image: url(../../interactive/map-and-charts/img/regions/type1/midwest_on.png);
}

.map-type-1 .region.northeast {
  background-image: url(../../interactive/map-and-charts/img/regions/type1/northeast_on.png);
}

.map-type-1 .region.southeast {
  background-image: url(../../interactive/map-and-charts/img/regions/type1/southeast_on.png);
}

/* overlay positioning */

.overlay.northwest {
  top: 6%;
  left: 28%;
}

.overlay.southwest {
  top: 21%;
  left: 42%;
}

.overlay.great-plains-north {
  top: 5%;
  left: 51%;
}

.overlay.great-plains-south {
  top: 31%;
  left: 54%;
}

.overlay.midwest {
  top: 4%;
  left: 11%;
}

.overlay.northeast {
  top: 23%;
  left: 33%;
}

.overlay.southeast {
  top: 30%;
  left: 14%;
}

.overlay.alaska {
  top: 52%;
  left: 28%;
}

.overlay.hawaii {
  top: 62%;
  left: 50%;
}

/* --- TYPE 2: BLANK MAP WITH NO ALASKA OR HAWAII --- */

/* regions */

.map-type-2 .region.alaska {
  background-image: url(../../interactive/map-and-charts/img/regions/type1/alaska_on.png);
}

.map-type-2 .region.northwest {
  background-image: url(../../interactive/map-and-charts/img/regions/type1/northwest_on.png);
}

.map-type-2 .region.southwest {
  background-image: url(../../interactive/map-and-charts/img/regions/type1/southwest_on.png);
}

.map-type-2 .region.hawaii {
  background-image: url(../../interactive/map-and-charts/img/regions/type1/hawaii_on.png);
}

.map-type-2 .region.great-plains {
  background-image: url(../../interactive/map-and-charts/img/regions/type2/greatplains_on.png);
}

.map-type-2 .region.midwest {
  background-image: url(../../interactive/map-and-charts/img/regions/type1/midwest_on.png);
}

.map-type-2 .region.northeast {
  background-image: url(../../interactive/map-and-charts/img/regions/type1/northeast_on.png);
}

.map-type-2 .region.southeast {
  background-image: url(../../interactive/map-and-charts/img/regions/type1/southeast_on.png);
}

/* overlay positioning */

.map-type-2 .overlay.great-plains {
  top: 12%;
  left: 51%;
}

.map-type-2 .overlay.northeast {
  top: 26%;
}

.map-type-2 .overlay.southeast {
  top: 36%;
}

/* --- TYPE 3: MAP WITH DATA --- */

/* regions */

.map-type-3 .region.northwest {
  background-image: url(../../interactive/map-and-charts/img/regions/type3/northwest_on.png);
}

.map-type-3 .region.southwest {
  background-image: url(../../interactive/map-and-charts/img/regions/type3/southwest_on.png);
}

.map-type-3 .region.great-plains-north {
  background-image: url(../../interactive/map-and-charts/img/regions/type3/greatplainsnorth_on.png);
}

.map-type-3 .region.great-plains-south {
  background-image: url(../../interactive/map-and-charts/img/regions/type3/greatplainssouth_on.png);
}

.map-type-3 .region.midwest {
  background-image: url(../../interactive/map-and-charts/img/regions/type3/midwest_on.png);
}

.map-type-3 .region.northeast {
  background-image: url(../../interactive/map-and-charts/img/regions/type3/northeast_on.png);
}

.map-type-3 .region.southeast {
  background-image: url(../../interactive/map-and-charts/img/regions/type3/southeast_on.png);
}

.map-type-3 .region.alaska {
  background-image: url(../../interactive/map-and-charts/img/regions/type3/alaska_on.png);
}

.map-type-3 .region.hawaii {
  background-image: url(../../interactive/map-and-charts/img/regions/type3/hawaii_on.png);
}

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

/* iPad portrait */
@media screen and (max-width: 768px) {
  /* map regions */
  .region {
    width: 720px;
    height: 466px;
  }
  
  /* overlay positioning */
  
  .overlay.northwest {
    top: 1%;
    left: 28%;
  }
  
  .overlay.southwest {
    top: 17%;
    left: 42%;
  }
  
  .overlay.great-plains-north {
    top: 5%;
    left: 51%;
  }
  
  .overlay.great-plains-south {
    top: 31%;
    left: 54%;
  }
  
  .overlay.midwest {
    top: 4%;
    left: 11%;
  }
  
  .overlay.northeast,
  .map-type-2 .overlay.northeast {
    top: 20%;
    left: 24%;
  }
  
  .overlay.southeast {
    top: 30%;
    left: 10%;
  }
  
  .overlay.alaska {
    top: 52%;
    left: 28%;
  }
  
  .overlay.hawaii {
    top: 62%;
    left: 50%;
  }
}

/* iPhone landscape */
@media screen and (max-width: 600px) {
  /* map regions */
  .region {
    width: 440px;
    height: 285px;
  }
  
  /* overlays */
  .overlay:before {
    display: none!important;
  }
  
  .overlay {
    left: 50%!important;
    top: 50%!important;
    margin: -150px 0 0 -160px;
  }
}

/* iPhone portrait */
@media screen and (max-width: 400px) {
  /* map regions */
  .region {
    width: 280px;
    height 181px;
  }
  
  
}