/* banner copy */
.bannerBox .TxtBox h3,
.bannerBox .TxtBox p span {
    opacity: 0;
    transform: translateY(16px);
    will-change: opacity, transform;
}

.bannerBox.show .TxtBox h3 {
    animation: banner-copy-in .8s .35s both;
}

.bannerBox.show .TxtBox p span {
    display: block;
    animation: banner-copy-in .8s both;
}

.bannerBox.show .TxtBox p span:nth-child(1) {
    animation-delay: .8s;
}

.bannerBox.show .TxtBox p span:nth-child(2) {
    animation-delay: 1s;
}

.bannerBox.show .TxtBox p span:nth-child(3) {
    animation-delay: 1.2s;
}

@keyframes banner-copy-in {
    0% {
        opacity: 0;
        transform: translateY(16px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}





body .reveal-block {
    position: relative;
    white-space: nowrap;
    cursor: default;
    opacity: 1;
}

body.show .reveal-block {
    -webkit-animation-name: clip-block;
    animation-name: clip-block;

}

body .reveal-block::after {
    content: "";
    position: absolute;
    z-index: 999;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #fff;
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transform-origin: 0 50%;
    transform-origin: 0 50%;
    pointer-events: none;
}
body.show .reveal-block::after {
    -webkit-animation-name: block-revealer;
    animation-name: block-revealer;
    animation-delay: 1.3s;
    animation-duration: 0.5s;

}
.reveal-block,
.reveal-block::after {
    -webkit-animation-delay: 0s;
    animation-delay: 0s;

    -webkit-animation-iteration-count:1;
    animation-iteration-count:1;

    -webkit-animation-duration: 800ms;
    animation-duration: 800ms;

    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-timing-function: cubic-bezier(0.0, 0.0, 0.2, 1);
    animation-timing-function: cubic-bezier(0.0, 0.0, 0.2, 1);
}

@-webkit-keyframes clip-block {
    from {
        -webkit-clip-path: inset(0 100% 0 0);
        clip-path: inset(0 100% 0 0);
    }

    to {
        -webkit-clip-path: inset(0 0 0 0);
        clip-path: inset(0 0 0 0);
    }
}


@keyframes clip-block {
    from {
        -webkit-clip-path: inset(0 100% 0 0);
        clip-path: inset(0 100% 0 0);
    }

    to {
        -webkit-clip-path: inset(0 0 0 0);
        clip-path: inset(0 0 0 0);
    }
}


@-webkit-keyframes block-revealer {

    0%,
    50% {
        -webkit-transform-origin: 0 50%;
        transform-origin: 0 50%;
    }

    60%,
    100% {
        -webkit-transform-origin: 100% 50%;
        transform-origin: 100% 50%;
    }


    60% {
        -webkit-transform: scaleX(1);
        transform: scaleX(1);
    }

    100% {
        -webkit-transform: scaleX(0);
        transform: scaleX(0);
    }
}


@keyframes block-revealer {

    0%,
    50% {
        -webkit-transform-origin: 0 50%;
        transform-origin: 0 50%;
    }

    60%,
    100% {
        -webkit-transform-origin: 100% 50%;
        transform-origin: 100% 50%;
    }


    60% {
        -webkit-transform: scaleX(1);
        transform: scaleX(1);
    }

    100% {
        -webkit-transform: scaleX(0);
        transform: scaleX(0);
    }
}