.device-view { display: block; position: relative; }

.device-view .container { height: 100%; width: 100%; overflow: hidden; }

.device-view.phone { width: 360px; height: 600px; margin: 60px 0 96px; }

.device-view.phone.landscape { width: 600px; height: 360px; margin: 0; }

.device-view.tablet { width: 720px; height: 1024px; margin: 60px 0 96px; }

.device-view.tablet.landscape { width: 1024px; height: 720px; margin: 0; }

.device-view.laptop { width: 1366px; height: 800px; }

.device-view.phone:before, .device-view.tablet:before { display: block; content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: -60px -16px -96px; border-radius: 32px; background: #666; }

.device-view.phone.landscape:before, .device-view.tablet.landscape:before { margin: -16px -96px -16px -60px; }

.device-view.phone:after, .device-view.tablet:after { display: block; content: ""; position: absolute; bottom: -76px; left: 50%; width: 56px; height: 56px; margin-left: -28px; border-radius: 28px; background: #fff; }

.device-view.phone.landscape:after, .device-view.tablet.landscape:after { top: 50%; right: -76px; bottom: auto; left: auto; margin-top: -28px; }

.device-view.laptop:before { display: block; content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: -24px; border-radius: 12px; background: #666; }

.device-view.laptop:after { display: block; content: ""; position: absolute; right: 0; bottom: -56px; left: -140px; height: 56px; margin: -24px; border-bottom-right-radius: 12px; border-bottom-left-radius: 12px; background: #777; }

.device-view .device-view-content, .device-view iframe { position: relative; width: 100%; height: 100%; background-color: #fff; border: 0; }
