.display {
  position: relative;
  height: 600px;
  width: 100%;
}

div {
  background-repeat: no-repeat;
  background-size: 100%;
}

iframe {
  transform: scale(0.219);
  transform-origin: top left;
  margin: 0;
  padding: 0;
  position: relative;
  background-color: #fff;
  border-color: #000;
}

.mobile {
  background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/24650/iphone-optimised.png");
  position: absolute;
  width: 95px;
  height: 196px;
  top: 375px;
  left: 300px;
  z-index: 5;
}

.mobile iframe {
  width: 320px;
  height: 480px;
  top: 32px;
  left: 11px;
  overflow-y: hidden;
}

.tablet {
  background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/24650/ipad-optimised.png");
  width: 246px;
  height: 400px;
  z-index: 3;
  position: absolute;
  left: 120px;
  top: 230px;
}

.tablet iframe {
  width: 768px;
  height: 1024px;
  top: 35px;
  left: 38px;
  overflow-y: hidden;
}

.laptop {
  background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/24650/laptop-screen-optimised.png");
  width: 477px;
  height: 307px;
  top: 264px;
  left: 560px;
  position: absolute;
  z-index: 2;
}

.laptop iframe {
  width: 1280px;
  height: 802px;
  top: 26px;
  left: 60px;
  transform: scale(0.277);
  -webkit-transform: scale(0.277);
  -o-transform: scale(0.277);
  -ms-transform: scale(0.277);
  -moz-transform: scale(0.277);
  transform-origin: top left;
  -webkit-transform-origin: top left;
  -o-transform-origin: top left;
  -ms-transform-origin: top left;
  -moz-transform-origin: top left;
}

.desktop {
  position: absolute;
  width: 566px;
  height: 538px;
  background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/24650/large-screen-optimised.png");
  top: 0px;
  left: 220px;
  z-index: 1;
}

.desktop iframe {
  left: 28px;
  top: 38px;
  width: 1600px;
  height: 992px;
  transform: scale(0.3181);
  -webkit-transform: scale(0.3181);
  -o-transform: scale(0.3181);
  -ms-transform: scale(0.3181);
  -moz-transform: scale(0.3181);
  transform-origin: top left;
  -webkit-transform-origin: top left;
  -o-transform-origin: top left;
  -ms-transform-origin: top left;
  -moz-transform-origin: top left;
}


@media (max-width: 1160px) {
  .display {
    width: 95%;
    height: 550px;
    transform: scale(0.81);
    -webkit-transform: scale(0.81);
    -o-transform: scale(0.81);
    -ms-transform: scale(0.81);
    -moz-transform: scale(0.81);
}


@media (max-width: 1000px) {
  .display {
    height: 500px;
    transform: scale(0.71);
    -webkit-transform: scale(0.71);
    -o-transform: scale(0.71);
    -ms-transform: scale(0.71);
    -moz-transform: scale(0.71);
    top: -40px;
}

.desktop {
    left: 140px;
}

.laptop {
    left: 480px;
}

.tablet {
    left: 40px;
}

.mobile {
    left: 220px;
}
}
@media (max-width: 850px) {
  .display {
    height: 500px;
    transform: scale(0.65);
    -webkit-transform: scale(0.65);
    -o-transform: scale(0.65);
    -ms-transform: scale(0.65);
    -moz-transform: scale(0.65);
}

.desktop {
    left: 100px;
}

.laptop {
    left: 440px;
}

.tablet {
    left: 0px;
}

.mobile {
    left: 180px;
}
}
@media (max-width: 768px) {
  .display {
    height: 450px;
    transform: scale(0.55);
    -webkit-transform: scale(0.55);
    -o-transform: scale(0.55);
    -ms-transform: scale(0.55);
    -moz-transform: scale(0.55);
}
}
@media (max-width: 670px) {
  .display {
    height: 400px;
    left: -70px;
    transform: scale(0.45);
    -webkit-transform: scale(0.45);
    -o-transform: scale(0.45);
    -ms-transform: scale(0.45);
    -moz-transform: scale(0.45);
}
}
@media (max-width: 560px) {
  .display {
    height: 270px;
    top: -65px;
    transform: scale(0.37);
    -webkit-transform: scale(0.37);
    -o-transform: scale(0.37);
    -ms-transform: scale(0.37);
    -moz-transform: scale(0.37);
}
}
@media (max-width: 440px) {
  .display {
    left: -17px;
    top: -65px;
    width: 70px;
    transform: scale(0.35);
    -webkit-transform: scale(0.35);
    -o-transform: scale(0.35);
    -ms-transform: scale(0.35);
    -moz-transform: scale(0.35);
}
}
@media (max-width: 380px) {
  .display {
    height: 235px;
    left: -17px;
    top: -65px;
    transform: scale(0.27);
    -webkit-transform: scale(0.27);
    -o-transform: scale(0.27);
    -ms-transform: scale(0.27);
    -moz-transform: scale(0.27);
}

.desktop {
    left: 100px;
}

.laptop {
    left: 515px;
}

.tablet {
    left: 0px;
}

.mobile {
    left: 100px;
}