@font-face {
    font-family: 'apercu-light-pro';
    src: url('/assets/font/apercu-light-pro.eot');
    src: url('/assets/font/apercu-light-pro.eot?#iefix') format('embedded-opentype'),
        url('/assets/font/apercu-light-pro.woff2') format('woff2'),
         url('/assets/font/apercu-light-pro.woff') format('woff'),
         url('/assets/font/apercu-light-pro.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;

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

html {
    background: #171717;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
body {
    width: 100%;
    height: 100%;
    margin: 0 0;
    overflow: hidden;
    position: relative;
}

.unselectable {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.notransition {
    -webkit-transition: none !important;
    -moz-transition: none !important;
    -o-transition: none !important;
    transition: none !important;
}

.transitionTop {
    opacity: 1;
    visibility: visible;
    transition: transform .33s ease, opacity .33s ease;
}

.transitionBottom {
    transition: transform .33s ease, opacity .33s ease;
}

.transitionTop.hide {
    transform: translate(0%, -30px);
    opacity: 0;
    visibility: visible;
}

.transitionBottom.hide {
    transform: translate(0%, 30px);
    opacity: 0;
    visibility: visible;
}

#dots {
    height: 100vh;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%,-50%);
    width: 100vw;
    z-index: -10;
}

#overlay,
#container {
    height: 100%;
    overflow: hidden;
    width: 100%;
}

#overlay.hide {
    display: none;
}

#overlayContentContainer,
#overlayCrios {
    align-items: center;
    display: flex;
    flex-direction: column;
    height: 260px;
    justify-content: space-between;
    left: 50%;
    position: absolute;
    text-align: center;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 250px;
}

#overlayCrios {
    height: 200px;
    width: 200px;
}

#overlayIcons {
    background-image:url(/assets/images/SOUND-ICONS.png);
    background-size: contain;
    background-repeat: no-repeat;
    height: 45px;
    margin: 0 10px;
    width: 77px;
}

#headphonesIcon {
    background-image:url(/assets/images/Speaker.png);
    background-size: contain;
    background-repeat: no-repeat;
    display: inline-block;
    height: 30px;
    margin: 0 10px;
    width: 30px;
}

#microphoneIcon {
    background-image:url(/assets/images/MICROPHONE.png);
    background-size: contain;
    background-repeat: no-repeat;
    display: inline-block;
    height: 30px;
    margin: 0 10px;
    width: 30px;
}

#compassIcon {
    background-image:url(/assets/images/Compass.png);
    background-size: contain;
    background-repeat: no-repeat;
    height: 35px;
    margin: 0 10px;
    width: 35px;
}

#overlayHeader {
    color: #fff;
    font-family: "penumbra-halfserif-std";
    font-size: 19px;
    letter-spacing: 1px;
    font-weight:300;
}


#overlayCrios,
#overlaySubheader {
    color: #fff;
    font-family: "apercu-light-pro";
    font-size: 13px;
    line-height: 17px;
    letter-spacing: 1px;
    margin-bottom: 10px;
}

#overlaySubheader,
#overlaySubheader2 {
    font-size: 14px;
    width: 260px;
}

#overlaySubheader {
    font-size: 14px;
    width: 260px;
}

#continueContainer {
    position: relative;
    height: 42px;
    width: 160px;
}

.buttonCopy {
    color: white;
    font-family: "apercu-light-pro";
    text-transform: uppercase;
    font-size: 11px;
    line-height: 36px;
    justify-content: center;
    width: 160px;
    position: relative;
    top: -100%;
}

.buttonCopy.idle{
    color: white;
    transition: 0.3s;
}
.buttonCopy.active{
    color: black;
    transition: 0.3s;
}

#loading-text {
    top: -210%;
}

#continue {
    cursor: pointer;
    /* display: inline-block; */
    height: 42px;
    width: 160px;
    /* left: 50%; */
    /* position: absolute; */
    /* transform: translate(-50%, -50%); */
    transition: opacity 2s ease 500ms;
    text-align: center;
}

#continue.loading {
    pointer-events: none;
}

button {
    position: absolute;
}

#wave-container {
    display: none;
}

#wave {
    position: absolute;
    left: 0;
    bottom: 0;
    mix-blend-mode: difference;
}
#wave-overlay {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 100px;
    background-color: rgb(8, 144, 207, 0.3);
    pointer-events: none;
    mix-blend-mode: difference;
}

#wave-overlay-inner {
    position: absolute;
    width: 4px;
    height: 100%;
    background-color: #f00;
}

/* -------------------------------------------- */

#audioTimestampContainer {
    color: #fff;
    font-family: "apercu-light-pro";
    font-size: 7px;
    left: 7%;
    letter-spacing: 1px;
    position: absolute;
    bottom: 6%;
    width: 200px;
}

#audioTimestampContainer div {
    margin-bottom: 1px;
}

#back {
    visibility: hidden;
}

#backMobile{
    background-image:url(/assets/images/backMobile.svg);
    background-position: top 50% left 0%;
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    cursor: pointer;
    height: 12px;
    left: 7%;
    top: 20px;
    width: 100px;
    visibility: visible;
    transform: translate(0%, -50%);
}

#backMobile.transitionTop.hide {
    transform: translate(0%, -30px);
}

#backMobile .buttonCopy{
    position: absolute;
    line-height: 12px;
    transform: translate(100%, 110%);
    width: 60px;
}
#back .svg{
    position: absolute;
}

#canvas {
    background:transparent;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%,-50%);
    z-index: -10;
    transition: left 1s ease, transform 1s ease ;
    -webkit-transition: left 1s cubic-bezier(0.47, 0.03, 0.51, .96), transform 1s cubic-bezier(0.64, 0.1, 0.35, .9);
    transition:         left 1s cubic-bezier(0.47, 0.03, 0.51, .96), transform 1s cubic-bezier(0.64, 0.1, 0.35, .9);
    height: 100vw;
    width: 100vw;
}

#canvas.kaos {
    left: calc(50% + 45.4px);
    height: 100vw;
    width: 100vw;

}
#canvas.hide {
    transform: translate(calc(-50% + 300px), -50%);
}

#capture {
    cursor: pointer;
    height: 60px;
    margin: 0 auto 15px;
    position: relative;
    width: 60px;
}

#captureInstructions,
#startInstructions {
    color: white;
    font-family: "apercu-light-pro";
    font-size: 14px;
    position: relative;
    text-align: center;
}

#captureInstructions {
    color: white;
    font-family: "apercu-light-pro";
    position: relative;
}

#captureContainer,
#stopContainer {
    bottom: 5%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    left: 50%;
    position: absolute;
    transform: translate(-50%, -50%);
    width: 100px;
}

#captureContainer.transitionTop {
    transition: transform .5s ease, opacity .5s ease;
}
 
#captureMobile {
    cursor: pointer;
    height: 80px;
    margin: 0 auto 15px;
    position: relative;
    width: 80px;
    -webkit-user-select: none;
}

#captureNext {
    background-image:url(/assets/images/nextMobile.svg);
    background-position: top 50% left 50%;
    background-repeat: no-repeat;
    background-size: contain;
    cursor: pointer;
    height: 12px;
    margin: 0 auto 15px;
    position: absolute;
    width: 100px;
    -webkit-user-select: none;
    top: 45%;
    right: -10%;
    transform: translate(0%, -50%);
}

#captureNext .buttonCopy{
    width: 100px;
    line-height: 12px;
    transform: translate(-45%,100%);
}

#captureNext.transitionBottom.hide {
    transform: translate(0%, calc(-50% + 30px));
}

#captureNextDesktop {
    background-image:url(/assets/images/nextMobile.svg);
    background-position: top 50% left 50%;
    background-repeat: no-repeat;
    background-size: contain;
    cursor: pointer;
    height: 13px;
    position: absolute;
    width: 100px;
    -webkit-user-select: none;
    bottom: calc(5% + 116px);
    right: calc(50% - 180px);
    transform: translate(0%, -50%);
}

#captureNextDesktop svg{
    visibility: hidden;
}

#captureNextDesktop.transitionBottom.hide {
    transform: translate(0%, 30px);
}

#captureNextDesktop .buttonCopy{
    position: absolute;
    line-height: 13px;
    transform: translate(-20%, 102%);
    width: 60px;
}

#captureContainerMobile {
    bottom: 4%;
    color: #fff;
    display: flex;
    flex-direction: column;
    font-family: "apercu-light-pro";
    font-size: 8px;
    height: 137px;
    justify-content: center;
    left: 50%;
    letter-spacing: 1px;
    position: absolute;
    text-align: center;
    transform: translate(-50%, 0%);
    width: 86%;
    -webkit-user-select: none;
}

#captureContainerMobile.transitionBottom.hide {
    transform: translate(-50%, 30px);
}

#captureStartInstructionsMobile {
    bottom: 6%;
    left: 50%;
    position: absolute;
    text-align: center;
    transform: translateX(-50%);
    width: 85px;
}

#captureStartInstructionsMobile.hide {
    /* display: none; */
}

#captureStopInstructionsMobile {
    bottom: calc(6% + 10px);
    left: 50%;
    position: absolute;
    text-align: center;
    transform: translateX(-50%);
    width: 85px;
}

#captureStopInstructionsMobile.hide {
    /* display: none; */
}

#create {
    bottom: 17%;
    /* top: calc(50% + 185px); */
    cursor: pointer;
    height: 42px;
    left: 50%;
    position: absolute;
    transform: translate(-50%, -50%);
    width: 160px;
    text-align: center;
}

#create.transitionBottom.hide {
    transform: translate(-50%, 30px);
}

#instructionsL {
    bottom: 16%;
    color: #fff;
    font-family: "apercu-light-pro";
    font-size: 9px;
    left: 50%;
    letter-spacing: 1px;
    position: absolute;
    text-align: left;
    transform: translate(-50%,-50%);
    transition: transform 2s ease, opacity 2s ease, visibility 2s ease;
    width: 130px;
}

#instructionsL.hide {
    transform: translate(-50%, 300px);
}

#instructionsR {
    bottom: 9%;
    color: #fff;
    font-family: "apercu-light-pro";
    font-size: 9px;
    left: 50%;
    letter-spacing: 1px;
    position: absolute;
    text-align: left;
    transform: translate(-50%,-50%);
    transition: transform 2s ease, opacity 2s ease, visibility 2s ease;
    width: 130px;
}

#instructionsR.hide {
    transform: translate(-50%, 300px);
}

#letterSvg {
    height: 85.5px;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%,-50%);
    width: 570px;
}

#letterA {
    background-image:url(/assets/images/A.png);
    background-position: top 50% left 40%;
    background-repeat: no-repeat;
    background-size: contain;
    height: 95px;
    left: 38%;
    position: absolute;
    top: 50%;
    transform: translate(-50%,-50%);
    transition: transform 2s ease, opacity 2s ease, visibility 2s ease;
    transition-delay: 500ms;
    width: 78.13px;
}

#letterA.hide {
    transform: translate(-300px, -50%);
}

#letterK {
    background-image:url(/assets/images/K.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    height: 95px;
    left: calc(38% - 75px);
    position: absolute;
    top: 50%;
    transform: translate(-50%,-50%);
    transition: transform 2s ease, opacity 2s ease, visibility 2s ease;
    width: 78.13px;
}

#letterK.hide {
    transform: translate(-300px, -48%);
}

#letterS {
    background-image:url(/assets/images/S.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    height: 95px;
    left: calc(38% + 155px);
    position: absolute;
    top: 50%;
    transform: translate(-50%,-50%);
    transition: transform 2s ease, opacity 2s ease, visibility 2s ease;
    transition-delay: 500ms;
    width: 78.13px;
}

#letterS.hide {
    transform: translate(300px, -50%);
}

#loading {
    color: #fff;
    display: flex;
    flex-direction: column;
    font-family: "penumbra-halfserif-std";
    font-size: 20px;
    font-weight:300;
    justify-content: center;
    left: 50%;
    letter-spacing: 1px;
    opacity: 1;
    position: absolute;
    text-align: center;
    top: 50%;
    transform: translate(-50%,-50%);
    width: 170px;
}

#mute {
    background-repeat: no-repeat;
    background-size: contain;
    color: #fff;
    font-family: "apercu-light-pro";
    font-size: 7px;
    bottom: 6%;
    cursor: pointer;
    height: 13px;
    position: absolute;
    right: 18%;
    width: 48px;
    font-size: 11px;
    line-height: 15px;
}

#mute-on {
    position: absolute;
    width: 60px;
    right: 20%;
    transform: translateX(100%);
}

#mute-off {
    position: absolute;
    width: 60px;
    right: 20%;
    transform: translateX(100%);
}

#palms {
    background-image:url(/assets/images/Palms_OriginalLogo_Black-02.svg);
    background-size:cover;
    height: 12px;
    left: 50%;
    position: absolute;
    top: 20px;
    transform: translate(-50%, -50%);
    width: 40px;
}

#palms.transitionTop.hide {
    transform: translate(-50%, -30px);
}
#preview {
    height: 300px;
    left: 50%;
    position: absolute;
    top: 45%;
    transform: translate(-50%,-50%);
    width: 300px;
    border: 2px solid white;
}

#previewContainer {
    height: 86vw;
    left: 50%;
    position: absolute;
    top: 6%;
    transform: translate(-50%, 0%);
    width: 86vw;
    border: 2px solid #282828;
}

#previewContainer.transitionTop.hide {
    transform: translate(-50%, -30px);
}

#previewImage {
    width: 100%;
}

#quote2 {
    margin: 15px 0;
}

#quoteContainer2 {
    color: #fff;
    display: flex;
    flex-direction: column;
    font-family: "penumbra-halfserif-std";
    font-size: 11px;
    font-weight:300;
    justify-content: center;
    left: 50%;
    letter-spacing: 1px;
    position: absolute;
    text-align: center;
    top: 20%;
    transform: translate(-50%,-50%);
    width: 220px;

}

#quoteContainer2.transitionTop {
    transition: transform .5s ease, opacity .5s ease;
}

#quoteContainer2.transitionTop.hide {
    transform: translate(-50%, calc(-50% - 30px));
}

#reset {
    bottom: 0px;
    cursor: pointer;
    right: 48%;
    height: 42px;
    position: absolute;
    transform: translate(100%,-50%);
    width: 160px;
    text-align: center;
}

#reset.resetMobile {
    right: 50%;
    transform: translate(50%,-50%);
}

#reset.resetMobile.transitionBottom.hide {
    transform: translate(50%, calc(-50% + 30px));
}

#saveMobile {
    color: #fff;
    display: flex;
    flex-direction: column;
    font-family: "apercu-light-pro";
    font-size: 11.5px;
    height: 32.95px;
    justify-content: center;
    left: 50%;
    letter-spacing: 1px;
    position: absolute;
    text-align: center;
    top: calc(11% + 86vw + 72px);
    transform: translate(-50%,-50%);
    width: 270px;
    -webkit-user-select: none;
}

#saveMobile.transitionBottom.hide {
    transform: translate(-50%, calc(-50% + 30px));
}

#save {
    bottom: 0px;
    cursor: pointer;
    left: 48%;
    height: 42px;
    position: absolute;
    transform: translate(-100%,-50%);
    width: 160px;
    text-align: center;
}

#saveText {
    color: #fff;
    display: flex;
    flex-direction: column;
    font-family: "apercu-light-pro";
    font-size: 14px;
    justify-content: center;
    left: 50%;
    line-height: 18px;
    letter-spacing: 1px;
    position: absolute;
    text-align: center;
    top: calc(6% + 86vw + 18px);
    transform: translate(-50%, 0px);
    width: 265px;
}

#saveText.transitionBottom.hide {
    transform: translate(-50%, 30px);
}

#stop {
    /* background-image:url(/assets/images/Capture-Circle.png); */
    background-repeat: no-repeat;
    background-size: cover;
    cursor: pointer;
    margin: 0 auto 15px;
    height: 60px;
    width: 60px;
}

#topQuote1 {
    background-image:url(/assets/images/QUOTE-MARKS-START.png);
}

#topQuote2 {
    background-image:url(/assets/images/QUOTE-MARKS-START.png);
}

.container {
    position: relative;
}

.hide {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

#rotateContainer {
    align-items: center;
    display: flex;
    flex-direction: column;
    height: 105px;
    justify-content: space-between;
    left: 50%;
    position: absolute;
    text-align: center;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 200px;
}

#phoneIcon {
    background-image:url(/assets/images/PHONE.png);
    background-size: contain;
    background-repeat: no-repeat;
    height: 36px;
    width: 18px;
}

#rotateText {
    color: #fff;
    font-family: "penumbra-halfserif-std";
    font-size: 23px;
    font-weight:300;
}

@media (min-width: 345px ) {
    #letterSvg {
        height: 95px;
        width: 633.33px;
    }
}

@media (min-width: 700px) {

    #backMobile{
        visibility: hidden;
    }
    
    #overlayContentContainer {
        height: 275px;
        width: 410px;
    }
    
    #headphonesIcon {
        height: 28px;
        margin: 0 20px;
        width: 28px;
    }
    
    #microphoneIcon {
        height: 30px;
        margin: 0 20px;
        width: 30px;
    }
    
    #overlayHeader {
        font-size: 22px;
    }
    
    #overlaySubheader {
        font-size: 15px;
        width: 280px;
    }
    
    #time {
        color: #fff;
        font-family: "apercu-light-pro";
        font-size: 14px;
        left: 50%;
        position: absolute;
        top: 50%;
        transform: translate(-50%,-50%);
    }
    
    #letterK {
        background-image:url(/assets/images/K.png);
        background-repeat: no-repeat;
        background-size: contain;
        height: 180px;
        left: calc(43.5% - 150px);
        position: absolute;
        top: 50%;
        transform: translate(-50%,-50%);
        transition: transform 2s ease, opacity 2s ease, visibility 2s ease;
        width: 154px;
    }
    
    #letterK.hide {
        transform: translate(-50vw, -50%);
    }
    
    #letterA {
        background-image:url(/assets/images/A.png);
        background-repeat: no-repeat;
        background-size: contain;
        height: 180px;
        left: 43.5%;
        position: absolute;
        top: 50%;
        transform: translate(-50%,-50%);
        transition: transform 2s ease, opacity 2s ease, visibility 2s ease;
        transition-delay: 500ms;
        width: 154px;
    }
    
    #letterA.hide {
        /* opacity: 1; */
        transform: translate(-50vw, -50%);
        /* visibility: visible; */
    }
    
    #canvas {
        background:transparent;
        left: 50%;
        position: absolute;
        top: 50%;
        transform: translate(-50%,-50%) scale(1);
        z-index: -10;
    }
    
    #canvas.kaos {
        left: calc(50% + 86px);
        transform: translate(-50%,-50%) scale(1);
    }

    #canvas.hide {
        transform: translate(calc(-50% + 150px), -50%);
    }

    #letterSvg {
        height: 180px;
        left: 50%;
        position: absolute;
        top: 50%;
        transform: translate(-50%,-50%);
        width: 1200px;
    }
    
    #letterS {
        background-image:url(/assets/images/S.png);
        background-repeat: no-repeat;
        background-size: contain;
        height: 180px;
        left: calc(43.5% + 310px);
        position: absolute;
        top: 50%;
        transform: translate(-50%,-50%);
        transition: transform 2s ease, opacity 2s ease, visibility 2s ease;
        transition-delay: 500ms;
        width: 154px;
    }
    
    #letterS.hide {
        /* opacity: 1; */
        transform: translate(50vw, -50%);
        /* visibility: visible; */
    }
    
    #audioTimestampContainer {
        color: #fff;
        display: flex;
        font-family: "apercu-light-pro";
        font-size: 8px;
        height: 12px;
        left: 50%;
        letter-spacing: 1px;
        margin: 0;
        position: absolute;
        bottom: 4%;
        transform: translate(-50%, -75%);
        width: auto;
    }

    #audioTimestampContainer.transitionBottom.hide {
        transform: translate(-50%, 30px);
    }
       
    #audioTitle {
        padding-left: 5px;
    }
    
    #mute {
        background-repeat: no-repeat;
        background-size: contain;
        left: 50%;
        bottom: 7%;
        height: 14px;
        position: absolute;
        transform: translate(-100%, -50%);
        width: 48px;
        font-size: 11px;
        line-height: 15px;
    }
    
    #mute-on {
        position: absolute;
        width: 60px;
        right: 0%;
        transform: translateX(100%);

    }
    
    #mute-off {
        position: absolute;
        width: 60px;
        right: 0%;
        transform: translateX(100%);

    }
  
    #mute.transitionBottom.hide {
        transform: translate(-100%, 30px);
    }

    #create {
        bottom: 22%;
        cursor: pointer;
        height: 42px;
        left: 50%;
        transform: translate(-50%, -75%);
        width: 161px;
    }

    #create.transitionBottom.hide {
        transform: translate(-50%, 30px);
    }

    #saveText {
        bottom: 21%;
        font-size: 15px;
        line-height: 20px;
        top: auto;
        width: 300px;
    }
    
    #instructionsL {
        bottom: 6%;
        height: 60px;
        left: calc(43.5% - 166px);
        padding: 10px 5px;
        transform: translate(-50%,-50%);
        width: 121px;
    }
    #instructionsR {
        bottom: 6%;
        height: 60px;
        left: calc(43.5% - 22px);
        padding: 10px 5px;
        transform: translate(-50%,-50%);
        width: 121px;
    }

    #captureNextDesktop {
        background-image: none;
        cursor: pointer;
        height: 26px;
        position: absolute;
        width: 164px;
        -webkit-user-select: none;
        bottom: calc(5% + 106px);
        right: calc(50% - 350px);
        transform: translate(0%, -50%);
    }
    
    #captureNextDesktop.transitionBottom.hide {
        transform: translate(0%, 30px);
    }
    
    #captureNextDesktop .buttonCopy{
        position: absolute;
        line-height: 26px;
        transform: translate(0%, 102%);
        width: 164px;
    }

    #captureNextDesktop svg{
        visibility: visible;
    }
    
    #capture {
        cursor: pointer; 
        margin: 0 20px 15px;
        height: 60px;
        width: 60px;
    }
    
    #captureContainer,
    #stopContainer {
        bottom: 5%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        left: 50%;
        position: absolute;
        transform: translate(-50%, -50%);
        width: 100px;
    } 

    #captureContainer.transitionBottom.hide {
        transform: translate(-50%, -30px);
    }
   
    #quoteContainer2 {
        display: flex;
        flex-direction: column;
        justify-content: center;
        left: 50%;
        position: absolute;
        top: 10%;
        transform: translate(-50%, 50%);
        width: auto;
    }

    #quoteContainer2.transitionTop.hide {
        transform: translate(-50%, 30px);
    }
    
    #preview {
        /* height: 500px;
        left: 50%;
        position: absolute;
        top: 45%;
        transform: translate(-50%,-50%);
        width: 500px;
        border: 2px solid white; */
    }

    #previewContainer {
        height: 56vh;
        left: 50%;
        position: absolute;
        top: 41%;
        transform: translate(-50%,-50%);
        width: 56vh;
        border: 2px solid #282828;
    }

    #previewContainer.transitionTop.hide {
        transform: translate(-50%, calc(-50% - 30px));
    }
    
        
    #stop {
        cursor: pointer;
        margin: 0 20px 15px;
        height: 60px;
        width: 60px;
    }
    
    #save {
        bottom: 8.5%;
        cursor: pointer;
        left: calc(50% - 100px);
        height: 42px;
        transform: translate(-50%,-50%);
        width: 160px;
    }
       
    #reset {
        bottom: 8.5%;
        cursor: pointer;
        left: calc(50% + 100px);
        height: 42px;
        top: auto;
        transform: translate(-50%,-50%);
        width: 160px;
    }
    #reset.transitionBottom.hide,
    #save.transitionBottom.hide {
        transform: translate(-50%, calc(-50% + 30px));
    }
      
    #palms {
        background-image:url(/assets/images/Palms_OriginalLogo_Black-02.svg);
        background-size:cover;
        height: 15px;
        left: 50%;
        position: absolute;
        top: 30px;
        /* margin: 30px; */
        transform: translate(-50%, -50%);
        width: 51px;
    }

    #palms.transitionTop.hide {
        transform: translate(-50%, -30px);
    }
    
    #dummyPreview {
        background-image:url(/assets/images/PULSE-SNAPSHOT-NEW.png);
        background-size:cover;
        height: 600px;
        left: 50%;
        position: absolute;
        top: 45%;
        transform: translate(-50%,-50%);
        width: 600px;
    }
    
    #back {
        visibility: visible;
        position: absolute;
        top: 30px;
        height: 26px;
        left: calc(50% - 350px);
        width: 164px;
        pointer-events: all;
        cursor: pointer;
        transform: translate(0%, -50%);
    }

    #back.transitionTop.hide {
        transform: translate(0%, -30px);
    }

    #back .buttonCopy{
        position: absolute;
        line-height: 26px;
        transform: translate(85%, 102%);
    }
    
    #overlayIcons {
        height: 50px;
        width: 89px;
    }
    
    #quote1 {
        font-family: "penumbra-halfserif-std";
        font-size: 30px;
        font-weight:300;
        margin: 0 auto;
        width: 420px;
    }
    #quote2 {
        font-family: "penumbra-halfserif-std";
        font-size: 20px;
        font-weight:300;
        margin: 15px 0;
        width: 420px;
    }
       
    .qMark {
        background-size:cover;
        height: 10px;
        margin: 0 auto;
        width: 12px;
    }

    .container {
        position: relative;
    }
}

@media (min-width: 1160px & max-height: 800px) {

}