body, html {
    width: 300px;
    height: 250px;
    margin: 0;
    font-family: "Roboto", sans-serif;
    cursor: pointer;
}


/* After effects CTA Layer */
#ctawrapMe {
    cursor: pointer;
}

#clickable {
    border: solid 1px lightgray;
    box-sizing: border-box;
    cursor: pointer;
}

.clickClass {
    display: block;
    height: 20px;
    width: 65px;
}

/* After effects CTA Call out type layer */
.callOut {
    pointer-events: none;
}

/* Lottie animation container */
#anim {
    background-color: white;
    position: relative;
    width: 300px;
    height: 250px;
    margin: 0 auto;
    overflow-y: hidden;
}

/* Legal container */
#legal-container {
    z-index: 102;
    position: absolute;
    width: 57%;
    text-align: justify;
    cursor: pointer;
    max-height: 55px;
}

.hide-legal{
    bottom: -22px;
}

.reveal-legal {
    bottom: 0px;
    transition-property: all;
    transition-duration: 0.5s;
    transition-timing-function: cubic-bezier(.58,.82,.66,.9);
}

.reveal-replay {
    bottom: 4px;
    transition-property: all;
    transition-duration: 0.5s;
    transition-timing-function: cubic-bezier(.58,.82,.66,.9);
}


/* Toggle button */
#toggle-legal-btn {
    font-family: "Roboto", sans-serif;
    width: auto;
    max-height: 45px;
    border: none;
    color: white;
    background-color: black;
    padding: 5px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 9px;
    pointer-events: none;
}

/* The legal copy */
.popup-legal {
    font-family: "Roboto", sans-serif;
    height: auto;
    color: white;
    background-color: black;
    text-align: Left;
    text-decoration: none;
    display: block;
    font-size: 8px;
    line-height: 1.25;
    overflow-y: hidden;
    max-height: 0px; /* approximate max height */
    transition-property: all;
    transition-duration: 1s;
    transition-timing-function: cubic-bezier(0, 0.71, 0.28, 0.99);
}

    .popup-legal p {
        padding: 1px 10px 1px 10px;
    }

/* hide and show the popup */

    .popup-legal.show {
     
        max-height: 150px; /* approximate max height */
        transition-property: all;
        transition-duration: 3s;
        transition-timing-function: cubic-bezier(0, .71, 0.28, 0.99);
        
    }

.replay {
    margin: 0;
    width: 12px;
    height: 12px;
    position: absolute;
    left: 13%;
    z-index: 103;
    pointer-events:none;
    
}

#replay-btn-wrap {
    margin: 0;
    width: 20px;
    height: 20px;
    position: absolute;
    bottom: 0px;
    left: 12%;
    z-index: 200;
}

.replayindex {z-index: 2;}

.spin {
    animation-name: spin;
    animation-iteration-count: 2;
    animation-duration: 500ms;
    animation-timing-function: linear;
}


@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    50% {
        transform: rotate(-100deg);
    }
    to {
        transform: rotate(-360deg);
    }
}


/* LEGAL TYPE SHUTTER ANIMATION */

#legal-close {
    padding-left: 1px;
    padding-right: 1px;
}


.legalanim {
    animation-name: shutter;
    animation-duration: 1s;
    clip-path: polygon(50% 0, 50% 0, 50% 100%, 50% 100%);
    transition-timing-function: linear;
}

@keyframes shutter {
    0% {
        clip-path: polygon(100% 0, 0 0, 0 50%, 0 100%, 100% 100%, 100% 50%);
    }

   

    100% {
        clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%);
    }
}

/* REVERSE */

.rev-legalanim {
    animation-name: rev-shutter;
    animation-duration: 0.75s;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    transition-timing-function: linear;
}

@keyframes rev-shutter {
    0% {
        clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%);
    }

    50% {
        clip-path: polygon(67% 0, 33% 0, 50% 50%, 33% 100%, 67% 100%, 50% 50%);
    }

    100% {
        clip-path: polygon(100% 0, 0 0, 0 50%, 0 100%, 100% 100%, 100% 50%);
    }
}


/* CLOSE ICON ANIMATION */

    #close {
    position: absolute;
    height: 8px;
    width: 8px;
    top: 8px;
    left: 13.333px;
}

.close {
    animation-name: closeStart;
    animation-duration: 1.5s;
    opacity: 0;
    transition-timing-function: cubic-bezier(.42,0,.58,1);
}

@keyframes closeStart {
    0% {
        opacity: 1;
    }


    100% {
        opacity: 0;
    }
}

.closeanim {
    animation-name: closeEnd;
    animation-duration: 1s;
    opacity: 1;
    transition-timing-function: cubic-bezier(.42,0,.58,1);
}

@keyframes closeEnd {
    0% {
        opacity: 0;
    }


    100% {
        opacity: 1;
    }
}