body.hidden-header .header { opacity: 0; background: transparent; box-shadow: 0 0 0 transparent; }
body.hidden-header .header:hover { opacity: 1; }
body.hidden-header .not-in-fullscreen { display: none; }

.logo span:after, .logo:after { display: none; }

.preview-icons { position: absolute; top: 0; right: 2px; }
.icon-button { display: inline-block; width: 50px; height: 60px; position: relative; float: right; user-select: none; cursor: pointer; transition: all 0.3s ease; opacity: 0.5; }
.icon-button.active { opacity: 1 !important; }
.icon-button:hover { opacity: 0.7; }
.icon-button i { position: absolute; top: 50%; left: 50%; margin: -12px 0 0 -12px; }

.outer-wrapper { position: absolute; top: 60px; left: 0; width: 100%; height: calc(100% - 60px); }
.wrapper { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

body.hidden-header .outer-wrapper { top: 0; height: 100%; }
body.hidden-header .logo { display: none; }
body.hidden-header .website-input { display: none; }

iframe { border: 0 none; background: white; }
.frame { position: absolute; }
.browser-dimensions { position: absolute; top: 0; right: 0; line-height: 30px; padding: 0 15px; font-family: sans-serif; font-weight: 300; font-size: 15px; color: rgba(75,89,102,0.3); cursor: default; -webkit-user-select: none; display: none; }
.browser-dimensions div { display: inline; }
.frame.browser { top: 50%; left: 50%; margin: -440px 0 0 calc(-1636px / 2); width: 1360px; height: 880px; max-height: 1200px; box-shadow: 0 0 40px rgba(0, 0, 0, 0.1); background: #D2D2D2; border-radius: 10px; overflow: hidden; z-index: 20; transition: all 0.3s ease; }
.frame.browser .browser-bar { position: absolute; height: 30px; padding: 10px 0 0 10px; box-sizing: border-box; }
.frame.browser .browser-bar span { width: 10px; height: 10px; border-radius: 100px; display: block; float: left; margin: 0 4px; }
.frame.browser .browser-bar span.show-dimensions { cursor: pointer; }
.frame.browser iframe { position: absolute; top: 30px; left: 0; width: 100%; height: calc(100% - 30px); }      
.frame.phone { bottom: 50%; right: 50%; margin: 0 calc(-1636px / 2) -470px 0; border-radius: 20px; background: #383838; box-shadow: 0 0 40px rgba(0, 0, 0, 0.2); z-index: 30; width: 406px; height: 680px; transition: all 0.3s ease; }
.frame.phone .phone-camera { background: rgba(255, 255, 255, 0.1); width: 10px; height: 10px; left: 50%; margin: 27px 0 0 -45px; position: absolute; border-radius: 10px; }
.frame.phone .phone-speaker { background: rgba(255, 255, 255, 0.1); width: 14%; height: 8px; left: 50%; margin: 28px 0 0 -7%; position: absolute; border-radius: 10px; }
.frame.phone iframe { position: absolute; bottom: 30px; left: 13px; width: 380px; height: 590px; background: #383838; }
.frame.phone:before { content: ""; top: -50px; position: absolute; width: 100%; height: 50px; pointer-events: none; }
body.minimized-phone .frame.phone { margin-bottom: -100%; }
body.minimized-phone .frame.browser { top: 30px; left: 30px; margin: 0; width: calc(100% - 60px); height: calc(100% - 30px); border-radius: 10px 10px 0 0; }

@media screen and (max-width: 1679px), screen and (max-height: 1000px) {
  .wrapper.scaled { transform: scale(0.9); }
}
@media screen and (max-width: 1559px), screen and (max-height: 950px) {
  .wrapper.scaled { transform: scale(0.75); }
}
@media screen and (max-width: 1279px), screen and (max-height: 800px) {
  .wrapper.scaled { transform: scale(0.6); }
}
@media screen and (max-width: 1023px), screen and (max-height: 660px) {
  .wrapper.scaled { transform: scale(0.5); }
  body.minimized-phone .frame.phone { margin-bottom: -600%; }
}

@media screen and (max-width: 879px) {
  .wrapper.scaled { transform: scale(0.4); }
}

@media screen and (max-width: 699px) {
  .wrapper.scaled { transform: scale(0.25); }
}

@media screen and (max-width: 459px) {
  .wrapper.scaled { transform: scale(0.2); }
}