.interactive-wrap.chart-toggle {
  overflow: hidden;
}

.interactive-wrap.chart-toggle .chart-bg {
  background-size: 850px 565px;
  background-repeat: no-repeat;
  background-position: top left;
  width: 850px;
  height: 565px;
}

.interactive-wrap.chart-toggle .data-wrap {
  position: absolute;
  left: 90px;
  top: 25px;
  width: 760px;
  height: 460px;
}

/* scale from centre effect */

.effect-scale-center .data {
  position: absolute;
  left: 0;
  width: 760px;
  height: 460px;
}

.effect-scale-center .data img {
  position: absolute;
  left: 0;
  top: 230px;
  width: 760px;
  height: 0;
}

/* wipe effect */

.effect-wipe .data {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 460px;
  overflow: hidden;
}

.effect-wipe .data img {
  width: 760px;
  height: 460px;
}

/* scale from bottom effect */

.effect-scale-bottom .data {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 760px;
  height: 460px;
}

.effect-scale-bottom .data img {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 760px;
  height: 0;
}

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

/* iPad portrait */
@media screen and (max-width: 768px) {
  .interactive-wrap.chart-toggle .chart-bg {
    background-size: 100% auto;
    width: 100%;
    height: 457px;
  }
  
  .interactive-wrap.chart-toggle .data-wrap {
    left: 73px;
    top: 20px;
    width: 615px;
    height: 372px;
  }
  
  .interactive-wrap.effect-scale-center .data-wrap {
    top: 20px;
  }

  .effect-wipe .data img {
    width: 615px;
    height: 372px;
  }
  
  .effect-scale-center .data {
    width: 615px;
    height: 372px;
  }
  
  .effect-scale-center .data img {
    top: 186px;
    width: 615px;
  }
}

/* iPhone landscape */
@media screen and (max-width: 600px) {
  .interactive-wrap.chart-toggle .chart-bg {
    background-size: 100% auto;
    width: 440px;
    height: 292px;
  }
  
  .interactive-wrap.chart-toggle .data-wrap {
    left: 47px;
    top: 18px;
    width: 393px;
    height: 233px;
  }
  
  .interactive-wrap.effect-scale-center .data-wrap {
    top: 12px;
  }

  .effect-wipe .data img {
    width: 393px;
    height: 233px;
  }
  
  .effect-scale-center .data {
    width: 393px;
    height: 240px;
  }
  
  .effect-scale-center .data img {
    top: 119px;
    width: 393px;
  }
}

/* iPhone portrait */
@media screen and (max-width: 400px) {
  .interactive-wrap.chart-toggle .chart-bg {
    background-size: 100% auto;
    width: 280px;
    height: 185px;
  }
  
  .interactive-wrap.chart-toggle .data-wrap {
    left: 30px;
    top: 8px;
    width: 250px;
    height: 152px;
  }

  .effect-wipe .data {
    height: 152px;
  }

  .effect-wipe .data img {
    width: 250px;
    height: 152px;
  }
  
  .effect-scale-center .data {
    width: 250px;
    height: 152px;
  }
  
  .effect-scale-center .data img {
    top: 76px;
    width: 250px;
  }
}