*,::after,::before{box-sizing:border-box}body,html{height:100%}body{margin:0;overflow:hidden;background:#000 url(../images/demo-bg.jpg) 0 0 repeat;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:#023b6d;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 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:#00a6eb;color:#fff;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:#00b4ff}@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:-2px 10px 0 10px;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}.popup {
  position: fixed;
  top: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.3);
  display: grid;
  place-content: center;
  opacity: 0;
  pointer-events: none;
  transition: 200ms ease-in-out opacity;
}
.popup-content {
  width: clamp(300px, 90vw, 500px);
  background-color: #fff;
  padding: clamp(1.5rem, 100vw, 3rem);
  box-shadow: 0 0 0.5em rgba(0, 0, 0, 0.5);
  border-radius: 0.5em;
  opacity: 0;
  transform: translateY(20%);
  transition: 200ms ease-in-out opacity, 200ms ease-in-out transform;
  position: relative;
}
.popup h1 {
  position: absolute;
  top: 2rem;
  right: 2rem;
  line-height: 1;
  cursor: pointer;
  user-select: none;
}
.popup h1:active {
  transform: scale(0.9);
}

.showPopup {
  opacity: 1;
  transform: translateY(0);
  pointer-events: all;
}