body{height:100vh;margin:0;padding:0;display:flex;align-items:center;justify-content:center;font-family:Open Sans,sans-serif;background:#f2f2f2 linear-gradient(180deg,#fff 0,#f2f2f2)}.device,body{overflow:hidden}.device{width:320px;height:568px;border-radius:5px;box-shadow:0 .3em .5em -.2em #646464,0 1em 2em -.75em hsla(0,0%,39.2%,.75),0 1em 3em -.5em hsla(0,0%,39.2%,.5),0 3em 3em -.25em hsla(0,0%,39.2%,.2);display:-ms-grid;display:grid;-ms-grid-columns:1fr 80px 1fr;grid-template-columns:1fr 80px 1fr;-ms-grid-rows:80px auto 80px;grid-template-rows:80px auto 80px}.device .item{z-index:1}.device .item.rec{-ms-grid-column:1;-ms-grid-column-span:1;grid-column:1/2;-ms-grid-row:1;-ms-grid-row-span:1;grid-row:1/2;-ms-grid-column-align:start;justify-self:start}.device .item.time{-ms-grid-column:3;-ms-grid-column-span:1;grid-column:3/4;-ms-grid-row:1;-ms-grid-row-span:1;grid-row:1/2;-ms-grid-column-align:end;justify-self:end}.device .item.camera{-ms-grid-column:1;-ms-grid-column-span:3;grid-column:1/4;-ms-grid-row:1;-ms-grid-row-span:3;grid-row:1/4;background:#000;overflow:hidden}.device .item.camera video{position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%) rotateY(180deg);transform:translate(-50%,-50%) rotateY(180deg);z-index:-1}.device .item.home{-ms-grid-column:2;-ms-grid-column-span:1;grid-column:2/3;-ms-grid-row:3;-ms-grid-row-span:1;grid-row:3/4;-ms-grid-column-align:center;justify-self:center;-ms-grid-row-align:center;align-self:center}.device .item.preview{-ms-grid-column:3;-ms-grid-column-span:1;grid-column:3/4;-ms-grid-row:3;-ms-grid-row-span:1;grid-row:3/4;-ms-grid-column-align:end;justify-self:end;-ms-grid-row-align:center;align-self:center;padding-right:8px}.home-button{border-radius:50%;border:20px solid #fff;width:16px;height:16px;display:block;background:#f66;box-shadow:1px 1px 5px #333;cursor:pointer}.home-button.active,.home-button:active{background:red}.time-text{color:#fff;font-size:12px;padding:4px 8px;font-weight:700;text-shadow:1px 1px 5px #333}.preview-img{-webkit-animation:bounce 2s infinite;animation:bounce 2s infinite;width:40px}.preview-loader.active{display:inline-block;color:#fff;vertical-align:middle;pointer-events:none}.preview-loader.active .loader{width:32px;height:32px;position:relative}.preview-loader.active .loader:after,.preview-loader.active .loader:before{content:"";display:block;position:absolute;background-color:#fff;left:50%;right:0;top:0;bottom:50%;box-shadow:-16px 0 0 #fff;-webkit-animation:loader 1s linear infinite;animation:loader 1s linear infinite}.preview-loader.active .loader:after{top:50%;bottom:0;-webkit-animation-delay:.25s;animation-delay:.25s}.rec-text{display:none;background:red;color:#fff;font-weight:700;font-size:12px;margin:3px;padding:1px 8px;border-radius:2px}.rec-text.active{display:inline-block}@-webkit-keyframes loader{0%,to{box-shadow:-16px 0 0 transparent;background-color:#fff}50%{box-shadow:-16px 0 0 #fff;background-color:transparent}}@keyframes loader{0%,to{box-shadow:-16px 0 0 transparent;background-color:#fff}50%{box-shadow:-16px 0 0 #fff;background-color:transparent}}@-webkit-keyframes bounce{0%,20%,50%,80%,to{-webkit-transform:translateY(0)}40%{-webkit-transform:translateY(-20px)}60%{-webkit-transform:translateY(0)}}@keyframes bounce{0%,20%,50%,80%,to{-webkit-transform:translateY(0)}40%{-webkit-transform:translateY(-20px)}60%{-webkit-transform:translateY(0)}}