.mockframe{display:inline-block;position:relative;box-sizing:content-box!important}.mockframe .screen{z-index:3;background:#fff;border-radius:1px;width:100%;height:100%;display:block;position:relative;overflow:hidden;box-shadow:0 0 0 3px #111}.mockframe .top-bar,.mockframe .bottom-bar{background:#000;width:100%;height:3px;display:block}.mockframe .middle-bar{background:#000;width:3px;height:4px;position:absolute;top:0;left:90px}.mockframe.ipad{background:#242324;border-radius:44px;width:576px;height:768px;padding:90px 25px}.mockframe.ipad:before{content:"";background:#1e1e1e;border-radius:40px;width:calc(100% - 8px);height:calc(100% - 8px);display:block;position:absolute;top:4px;left:4px}.mockframe.ipad .camera{background:#3c3d3d;border-radius:100%;width:10px;height:10px;margin-left:-5px;position:absolute;top:44px;left:50%}.mockframe.ipad .top-bar,.mockframe.ipad .bottom-bar{display:none}.mockframe.ipad .home{background:#242324;border-radius:36px;width:50px;height:50px;margin-left:-25px;position:absolute;bottom:22px;left:50%}.mockframe.ipad .home:after{content:"";border:1px solid #ffffff1a;border-radius:4px;width:15px;height:15px;margin-top:-8px;margin-left:-8px;display:block;position:absolute;top:50%;left:50%}.mockframe.ipad.landscape{width:768px;height:576px;padding:25px 90px}.mockframe.ipad.landscape .camera{margin-top:-5px;margin-left:0;top:50%;left:calc(100% - 44px)}.mockframe.ipad.landscape .home{margin-top:-25px;margin-left:0;top:50%;left:22px}.mockframe.ipad.silver{background:#bcbcbc}.mockframe.ipad.silver:before{background:#fcfcfc}.mockframe.ipad.silver .home{background:#fcfcfc;box-shadow:inset 0 0 0 1px #bcbcbc}.mockframe.ipad.silver .home:after{border:1px solid #0003}.mockframe.ipad-pro{width:512px;height:683px;box-shadow:inset 0 0 0 .5px var(--mf-b1),inset 0 0 0 1px var(--mf-b2),inset 0 0 0 1.75px var(--mf-b3),inset 0 0 0 2.5px var(--mf-b4),inset 0 0 1px 3px var(--mf-glass);--mf-b1:#4a484c;--mf-b2:#736e71;--mf-b3:#3b3739;--mf-b4:#2d2b2e;--mf-glass:#1d1d1d;--mf-btn:linear-gradient(to right,#413e40 0%,#2f2d30 15%,#555358 35%,#77767d 55%,#979397 78%,#333134 100%);background:#000;border-radius:37.25px;padding:22.33px}.mockframe.ipad-pro .screen{box-shadow:none;border-radius:14.4px}.mockframe.ipad-pro .camera{z-index:10;background:radial-gradient(circle at 50% 45%,#2b2d63 0%,#141433 40%,#0b0d12 70%,#08090b 100%);border-radius:50%;width:5px;height:5px;margin-top:-2.5px;position:absolute;top:47%;right:9.4px}.mockframe.ipad-pro .sensor{z-index:10;background:#0e0f12;border-radius:50%;width:1.5px;height:1.5px;position:absolute;top:53%;right:11.4px}.mockframe.ipad-pro .sleep{background:linear-gradient(#333134 0%,#979397 25%,#555358 70%,#413e40 100%);border-radius:1px 1px 0 0;width:30.8px;height:1.5px;position:absolute;top:-1.5px;right:36px}.mockframe.ipad-pro .volume-up,.mockframe.ipad-pro .volume-down{background:var(--mf-btn);border-radius:0 1px 1px 0;width:1.5px;height:25.8px;position:absolute;right:-1.5px}.mockframe.ipad-pro .volume-up{top:50.1px}.mockframe.ipad-pro .volume-down{top:81.4px}.mockframe.ipad-pro.silver{--mf-b1:#9e9fa0;--mf-b2:#cccdce;--mf-b3:#959697;--mf-b4:#818283;--mf-glass:#2e2e2e;--mf-btn:linear-gradient(to right,#8d8e8f 0%,#818283 15%,#b1b2b3 35%,#c0c1c2 55%,#c3c4c5 78%,#646566 100%)}.mockframe.ipad-pro.silver .sleep{background:linear-gradient(#646566 0%,#c3c4c5 25%,#b1b2b3 70%,#8d8e8f 100%)}.mockframe.ipad-pro.landscape{width:683px;height:512px}.mockframe.ipad-pro.landscape .camera{margin:0 0 0 -2.5px;top:9.4px;left:47%;right:auto}.mockframe.ipad-pro.landscape .sensor{top:11.4px;left:53%;right:auto}.mockframe.ipad-pro.landscape .sleep{background:linear-gradient(270deg,#413e40 0%,#555358 30%,#979397 75%,#333134 100%);border-radius:1px 0 0 1px;width:1.5px;height:30.8px;top:36px;left:-1.5px;right:auto}.mockframe.ipad-pro.landscape .volume-up,.mockframe.ipad-pro.landscape .volume-down{background:linear-gradient(#333134 0%,#979397 22%,#77767d 45%,#555358 65%,#2f2d30 85%,#413e40 100%);border-radius:1px 1px 0 0;width:25.8px;height:1.5px;top:-1.5px;right:auto}.mockframe.ipad-pro.landscape .volume-up{left:50.1px}.mockframe.ipad-pro.landscape .volume-down{left:81.4px}.mockframe.ipad-pro.landscape.silver .sleep{background:linear-gradient(270deg,#8d8e8f 0%,#b1b2b3 30%,#c3c4c5 75%,#646566 100%)}.mockframe.ipad-pro.landscape.silver .volume-up,.mockframe.ipad-pro.landscape.silver .volume-down{background:linear-gradient(#646566 0%,#c3c4c5 22%,#c0c1c2 45%,#b1b2b3 65%,#818283 85%,#8d8e8f 100%)}.mockframe.ipad-pro .top-bar,.mockframe.ipad-pro .bottom-bar,.mockframe.ipad-pro .home,.mockframe.ipad-pro .speaker,.mockframe.ipad-pro .sensors,.mockframe.ipad-pro .more-sensors,.mockframe.ipad-pro .inner,.mockframe.ipad-pro .inner-shadow,.mockframe.ipad-pro .volume{display:none}