* {
     margin: 0;
     padding: 0;
     -moz-box-sizing: border-box;
     -ms-box-sizing: border-box;
     -webkit-box-sizing: border-box;
     box-sizing: border-box;
 }

 .btn {
     cursor: pointer;
 }

 .container {
     position: absolute;
     width: 300px;
     height: 600px;
     background: #fff;
     -webkit-touch-callout: none;
     -webkit-user-select: none;
     -khtml-user-select: none;
     -moz-user-select: none;
     -ms-user-select: none;
     user-select: none;
     overflow: hidden;
 }


 .border {
     position: absolute;
     pointer-events: none;
     z-index: 20;
     width: 100%;
     height: 100%;
     top: 0;
     left: 0;
     border: 1px solid #665d5b;
 }

 #exit {
     position: absolute;
     top: 0;
     left: 0;
     cursor: pointer;
     width: 100%;
     height: 100%;
     z-index: 1;
 }

 .main-content {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     display: none;
 }


 .bgContainer {
     position: absolute;
     width: 100%;
     height: 100%;
 }

 .background {
     position: absolute;
     width: 382px;
     height: 600px;
     top: 0;
     left: 0;
     transform: scale(1);
/*     filter: blur(2px);
     will-change: filter;*/
 }

 .copy {
    font-family: 'Noto Sans', sans-serif;
     -webkit-text-size-adjust: 100%;
     color: white;
     width: 255px;
     height: auto;
     position: absolute;
     top: 14px;
     left: 35px;
     line-height: 1.2;
     letter-spacing: 0.015em; 
}

 .copy-one {
    font-size: 23px;
    opacity: 0; 
    position: absolute;
 }

 .copy-two {
    font-size: 23px;
    opacity: 0; 
    position: absolute;
 }

 .cta {
    position: absolute;
    opacity: 0;
    text-align: center;
    font-size: 11px;
    z-index: 6;
    color: #fff;
    border: 1px solid #fff;
    padding: 2px 4px;
    font-family: 'Noto Sans', sans-serif;
    font-weight: 500;
    left: 209px;
    bottom: 72px;
 }

 .cta-copy {
     position: relative;
     left: 0;
 }

 .cta-arrow {
     font-size: 12px;
     margin-left: 0;
     position: absolute;
     margin-top: 0;
 }

 .disclaimer-btn {
    position: absolute;
    z-index: 10;
    font-size: 8px;
    color: #fff;
    bottom: 28px;
    left: 18px;
    font-family: 'Noto Sans', sans-serif;
    font-weight: 400;
    opacity: 0;
    letter-spacing: 0.015em; 
 }

 .disclaimer-btn.active {
     opacity: 0;
 }

 .disclaimer-content {
     position: absolute;
     z-index: 4;
     top: 0;
     width: 100%;
     height: 100%;
     /*min-height: 250px;*/
     background: #000;
     z-index: 10;
     display: none;
     color: #fff;
     font-size: 10px;
     font-family: 'Noto Sans', sans-serif;
     padding: 20px 20px;
     text-align: left;
     letter-spacing: 0.015em; 
 }

 .close-btn {
     font-size: 14px;
     position: absolute;
     right: 9px;
     top: 5px;
     cursor: pointer;
     color: #fff;
 }


 .lockup {
    position: absolute;
    display: flex;
    flex-direction: column;
    left: 19px;
    bottom: 65px;
    z-index: 1;
    opacity: 0;
    width: 118px;
    height: 50px;
 }

 .lockup span {
    font-family: 'Noto Sans', sans-serif;
    font-size: 10.5px;
    position: relative;
    top: 4px;
    left: 0;
    color: #fff;
    letter-spacing: 0.015em; 
 }

 .disclaimer-content.active {
     display: block;
 }

   .motif {
     width: 300px;
     height: 600px;
     position: absolute;
     top: 0;
     left: 0;
 }

/*  motif animation */

.triggerAnimate {
    animation: stroke 1s cubic-bezier(0.65, 0, 0.45, 1) forwards alternate;
}

@keyframes stroke {
    from {
        stroke-dashoffset: 1000;
    }

    to {
        stroke-dashoffset: 0;
    }
}