.rev-block {
    position: relative;
    z-index: 9999;
}

    .rev-block span {
        opacity: 0;
        -webkit-animation: appear-text 0.0001s linear forwards;
        animation: appear-text 0.0001s linear forwards;
        -webkit-animation-delay: 1s;
        animation-delay: 1s;
    }

    .rev-block::before {
        content: '';
        top: 0;
        left: 0;
        position: absolute;
        width: 0%;
        display: block;
        height: 120%;
        background: #fff;
        -webkit-animation:;
        animation: rev-block 2.5s cubic-bezier(0.19, 1, 0.22, 1) forwards;
        -webkit-animation-delay: 0.5s;
        animation-delay: 0.5s;
        z-index: 9999;
    }

    .rev-block::after {
        content: '';
        top: 0;
        left: 0;
        position: absolute;
        width: 0%;
        display: block;
        height: 120%;
        background: #ff0045;
        -webkit-animation:;
        animation: rev-block 1.9s cubic-bezier(0.19, 1, 0.22, 1) forwards;
        -webkit-animation-delay: 0.5s;
        animation-delay: 0.5s;
        z-index: 9999;
    }


@-webkit-keyframes rev-block {

    0% {
        left: 0;
        width: 0%;
    }

    50% {
        left: 0;
        width: 100%;
    }

    100% {
        left: 100%;
        width: 0%;
    }
}


@keyframes rev-block {

    0% {
        left: 0;
        width: 0%;
    }

    50% {
        left: 0;
        width: 100%;
    }

    100% {
        left: 100%;
        width: 0%;
    }
}

@-webkit-keyframes appear-text {

    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes appear-text {

    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}


/************************ reveal block 2 ************************/

.rev-block-2 {
    position: relative;
    z-index: 9999;
}

    .rev-block-2 span {
        opacity: 0;
        -webkit-animation: appear-text 0.0001s linear forwards;
        animation: appear-text 0.0001s linear forwards;
        -webkit-animation-delay: 0;
        animation-delay: 0;
    }

    .rev-block-2::before {
        content: '';
        top: 0;
        left: 0;
        position: absolute;
        width: 0%;
        display: block;
        height: 100%;
        background: #fff;
        -webkit-animation:;
        animation: rev-block 2.5s cubic-bezier(0.19, 1, 0.22, 1) forwards;
        -webkit-animation-delay: 0.5s;
        animation-delay: 0.5s;
        z-index: 9999;
    }

    .rev-block-2::after {
        content: '';
        top: 0;
        left: 0;
        position: absolute;
        width: 0%;
        display: block;
        height: 120%;
        background: #ff0045;
        -webkit-animation:;
        animation: rev-block 1.9s cubic-bezier(0.19, 1, 0.22, 1) forwards;
        -webkit-animation-delay: 0;
        animation-delay: 0;
        z-index: 9999;
    }

@-webkit-keyframes rev-block-2 {

    0% {
        left: 0;
        width: 0%;
    }

    50% {
        left: 0;
        width: 100%;
    }

    100% {
        left: 100%;
        width: 0%;
    }
}


@keyframes rev-block-2 {

    0% {
        left: 0;
        width: 0%;
    }

    50% {
        left: 0;
        width: 100%;
    }

    100% {
        left: 100%;
        width: 0%;
    }
}

/************************ page reveal for brillaint digital content ************************/

rev-block-hero {
    position: relative;
    z-index: 1000;
}

.rev-block-hero span {
    opacity: 0;
    -webkit-animation: appear-text 0.0001s linear forwards;
    animation: appear-text 0.0001s linear forwards;
    -webkit-animation-delay: 1.7;
    animation-delay: 1.7;
}

.rev-block-hero::before {
    content: '';
    top: 0;
    left: 0;
    position: absolute;
    width: 0%;
    display: block;
    height: 110%;
    background: #fff;
    -webkit-animation:;
    animation: rev-block 2.5s cubic-bezier(0.19, 1, 0.22, 1) forwards;
    -webkit-animation-delay: 1.7s;
    animation-delay: 1.7s;
    z-index: 1000;
}

.rev-block-hero::after {
    content: '';
    top: 0;
    left: 0;
    position: absolute;
    width: 0%;
    display: block;
    height: 110%;
    background: #ff0045;
    -webkit-animation:;
    animation: rev-block 1.9s cubic-bezier(0.19, 1, 0.22, 1) forwards;
    -webkit-animation-delay: 1.2s;
    animation-delay: 1.2s;
    z-index: 1000;
}

@-webkit-keyframes rev-block-hero {

    0% {
        left: 0;
        width: 0%;
    }

    50% {
        left: 0;
        width: 100%;
    }

    100% {
        left: 100%;
        width: 0%;
    }
}


@keyframes rev-block-hero {

    0% {
        left: 0;
        width: 0%;
    }

    50% {
        left: 0;
        width: 100%;
    }

    100% {
        left: 100%;
        width: 0%;
    }
}

/************************ page reveal for page transition ************************/

rev-block-page {
    position: fixed;
    z-index: 9999;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
}

.rev-block-page span {
    opacity: 0;
    -webkit-animation: appear-text 0.0001s linear forwards;
    animation: appear-text 0.0001s linear forwards;
    -webkit-animation-delay: 0;
    animation-delay: 0;
}

.rev-block-page::before {
    content: '';
    top: 0;
    left: 0;
    position: fixed;
    width: 0%;
    display: block;
    height: 100%;
    background: #fff;
    -webkit-animation:;
    animation: rev-block 2.0s cubic-bezier(0.19, 1, 0.22, 1) forwards;
    -webkit-animation-delay: 0s;
    animation-delay: 0s;
    z-index: 9999;
}

.rev-block-page::after {
    content: '';
    top: 0;
    left: 0;
    position: fixed;
    width: 0%;
    display: block;
    height: 100%;
    background: #ff0045;
    -webkit-animation:;
    animation: rev-block 1.2s cubic-bezier(0.19, 1, 0.22, 1) forwards;
    -webkit-animation-delay: 0;
    animation-delay: 0;
    z-index: 9999;
}

@-webkit-keyframes rev-block-page {

    0% {
        left: 0;
        width: 0%;
    }

    50% {
        left: 0;
        width: 100%;
    }

    100% {
        left: 100%;
        width: 0%;
    }
}

@keyframes rev-block-page {

    0% {
        left: 0;
        width: 0%;
    }

    50% {
        left: 0;
        width: 100%;
    }

    100% {
        left: 100%;
        width: 0%;
    }
}