.wrapper{width:90%;max-width:1200px;margin:0 auto}
.display{position:relative;left:0px;height:600px}
div.mobile,
div.tablet,
div.laptop,
div.desktop
{background-repeat:no-repeat;background-size:100%;overflow:hidden}
div.mobile iframe,
div.tablet iframe,
div.laptop iframe,
div.desktop iframe{
transform-origin:top left;
-webkit-transform-origin:top left;
-o-transform-origin:top left;
-ms-transform-origin:top left;
-moz-transform-origin:top left;
margin:0;
padding:0;
position:relative;
background-color:#fff
}
div.mobile iframe,
div.tablet iframe{
transform:scale(0.219);
-webkit-transform:scale(0.219);
-o-transform:scale(0.219);
-ms-transform:scale(0.219);
-moz-transform:scale(0.219);
}
.mobile{
background-image:url("https://www.adminof.ru/img/iphone.png");
position:
absolute;
width:95px;
height:196px;
top:375px;
left:300px;
z-index:5}
.mobile iframe{
width:320px;
height:480px;
top:33px;
left:11px;
overflow-y:hidden
}
.tablet{
background-image:url("https://www.adminof.ru/img/ipad.png");
width:246px;
height:400px;
z-index:3;
position:absolute;
left:120px;
top:230px
}
.tablet iframe{
width:768px;
height:1024px;
top:36px;
left:39px;
overflow-y:hidden
}
.laptop{
background-image:url("https://www.adminof.ru/img/laptop-screen.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://www.adminof.ru/img/large-screen.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)}.desktop{left:180px}.laptop{left:520px}.tablet{left:80px}.mobile{left:260px}}
@media (max-width: 1070px){.display{left:-50px}}
@media (max-width: 1000px){.display{height:590px;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:540px;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:480px;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:430px;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:280px;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: 480px){.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:245px;left:-17px;top:-65px;width:70px;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:180px}}
@media (max-width: 270px){.display{height:215px;left:-17px;top:-65px;width:70px;transform:scale(0.25);-webkit-transform:scale(0.25);-o-transform:scale(0.25);-ms-transform:scale(0.25);-moz-transform:scale(0.25)}.desktop{left:50px}.laptop{left:250px}.tablet{left:0px}.mobile{left:150px}}