*,::after,::before{box-sizing:border-box}
body,html{height:100%}
body{margin:0;overflow:hidden;position:relative;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"}
#header{position:absolute;left:0;right:0;top:0;height:32px;background:#27c67a;display:flex;align-items:center}
.logo{padding-left:10px}
.logo img{height:25px}
.logo a{display:flex}
.logo strong{margin-left:6px;text-transform:uppercase}
.logo strong span{color:#00a6eb}
@media (max-width:768px) {
.logo{display:none}
}
.preview-devices{margin-top:2px}
.preview-devices ul{margin:0 0 0 20px;padding:0;list-style:none;list-style-type:none;display:flex;align-items:center}
.preview-devices a{transition:.3s;color:rgba(255,255,255,.5);display:inline-block;padding:5px}
.preview-devices a .icon{width:22px;height:22px}
.preview-devices a:hover{color:#fff}
.preview-devices .preview-devices-active a{color:#fff}
@media (max-width:1024px) {
.preview-devices{display:none}
}
.navigate{display:flex;margin-left:auto;align-items:center}
.navigate .icon{width:22px;height:22px}
.navigate a{transition:.3s;color:rgba(255,255,255,.6);display:flex;align-items:center;justify-content:center;text-decoration:none}
.navigate a:hover{color:#fff}
.navigate .download{background:#aee8cc;color:#000;font-size:13px;padding:0 16px;height:32px;font-weight:700;text-transform:uppercase;margin-left:15px;white-space:nowrap}
.navigate .download .icon{width:20px;height:20px}
.navigate .download span{padding-left:6px}
.navigate .download:hover{background:#27c67a}
@media (max-width:768px) {
.navigate .download{padding:0 10px;font-size:12px;margin-left:10px}
.navigate .download .icon{display:none}
}
.current-template{margin-top:-2px;display:flex;align-items:center;justify-content:center;padding-left:10px}
@media (min-width:768px) {
.current-template{padding-left:0;margin-left:auto}
}
.current-template .icon{width:24px;height:24px}
.current-template a{transition:.3s;color:rgba(255,255,255,.6);display:flex;align-items:center;justify-content:center;text-decoration:none}
.current-template a:hover{color:#fff}
.current-template .template-home{font-size:16px;padding:0;font-weight:700;color:#fff;margin:1px 10px 0;line-height:0;text-decoration:none}
#preview{position:absolute;left:0;right:0;top:32px;bottom:0;transition:all .2s}
#preview-frame{border:0;position:absolute}
.preview-desktop{left:0;width:100%;height:100%}
.preview-tablet{width:768px;height:100%;left:calc(50% - 384px)}
.preview-mobile{width:380px;height:680px;left:calc(50% - 190px);top:0;margin-top:20px}