* { transition:1s;}
ßbody {/*background-color:lime;*/ margin:0;}
div.container {width:800px; height:100%; position:absolute; left:50%; transform:translateX(-50%); padding:60px 0;}
div.container div.device {background-color:#FFF; border:24px solid #383838; border-radius:16px; border-bottom-width:32px; cursor:pointer; width:100%; position:relative; /*transform-origin:0 0;*/ box-sizing:border-box; /*overflow:hidden;*/}

div.container div.device:before, 
div.container div.device:after {content:''; position:absolute; left:50%; bottom:-32px; transition:1s;}
div.container div.device:before {background-color:#383838; width:120%; height:24px; border-radius:2px 2px 4px 4px; border-top:.5px solid rgba(255,255,255,.25); transform:translate(-50%,50%);}
div.container div.device:after {background-color:#666; width:120px; height:12px; border-radius:0 0 4px 4px; transform:translateX(-50%);}

div.container div.device div.bezel {width:100%; padding-top:58.565%; box-sizing:content-box; border:2px solid #000; border-width:0px;}
div.container div.device div.screen {width:100%; height:100%; position:absolute; top:0; right:0; bottom:0; left:0; box-sizing:border-box; border-radius:3px; border:2px solid #000; background-color:#FFF; overflow:auto; -webkit-overflow-scrolling:touch; opacity:.5;}
div.container div.device div.screen iframe.content {border:0; width:100%; height:100%; position:absolute; top:0; right:0; bottom:0; left:0; overflow:auto;}

/* Light Theme */
div.container.light div.device:before, 
div.container.light div.device {background-color:#C0C0C0; border-color:#C0C0C0;}
div.container.light div.device:after {background-color:#CCC;}
div.container.light div.device:before {border-top-color:rgba(0,0,0,.1);}