* { transition:1s;}
body {/*background-color:lime;*/ margin:0;}
div.container {width:275px; height:100%; position:absolute; left:50%; transform:translateX(-50%); padding:60px 0;}
div.container div.chassis {border:3px solid #555; border-radius:36px; /*border-width:0 4px 0;*/}
div.container div.device {background-color:#FFF; border:24px solid #000; border-radius:32px; border-width:64px 10px; 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:''; background-color:#444; position:absolute; left:50%; transition:1s;}
div.container div.device:before {top:-32px; transform:translate(-50%,-50%); width:45px; height:4px; border-radius:500px;}
div.container div.device:after {bottom:-32px; transform:translate(-50%,50%); width:40px; height:40px; border-radius:50%; border:2px solid #333; box-sizing:border-box;}

div.container div.device div.bezelBox {overflow:hidden; border:2px solid #000; background-color:#FFF;}
div.container div.device div.bezel {width:100%; padding-top:177.7777%; /*position:relative;*/ box-sizing:content-box; border:2px solid #000; border-width:0px; transition:1s;}
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; 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.chassis {border-color:#C0C0C0;}
div.container.light div.device {background-color:#EFEFEF; border-color:#EFEFEF;}
div.container.light div.device:after {background-color:#E4E4E4; border-color:#DEDEDE;}

/* Rotated Theme */
div.container.rotated div.chassis {transform:rotate(90deg);}
div.container.rotated div.device div.bezel {width:177.7777%; transform:rotate(-90deg);}
div.container.rotated div.device div.screen {height:56.25%;}

div.container div.device div.bezel {transition:.5s; transition-delay:.5s;}

#rotateBtn {position:fixed; top:24px; right:24px;}