.inOverlay {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    bottom: auto;
    right: auto;
    transition: all .7s cubic-bezier(0.645, 0.045, 0.355, 1);
    z-index: 999999;
    text-align: center;
}



    .inOverlay.active {
        left: 101%;
        transition-delay: 0.2s;
    }

.outOverlay {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: -100%;
    bottom: auto;
    right: auto;
    transition: all .5s cubic-bezier(0.645, 0.045, 0.355, 1);
    z-index: 999999;
}

    .outOverlay.active {
        left: 0;
    }

.outOverlay--1 {
    -webkit-animation-name: fadeOut;
    -webkit-animation-duration: 0.1s;
    animation-name: fadeOut;
    animation-duration: 0.1s;
}


    .outOverlay--1.active {
        opacity: 1;
    }



.outOverlay--2 {
    transition-delay: 0.1s;
    z-index: 999999;
    text-align: center;
    margin: auto;
    position: absolute;
    width: 100%;
    height: 100%;
    top: auto;
    bottom: auto;
    right: auto;
}


    .outOverlay--2.active {
        left: 0;
    }


.inOverlay div, .outOverlay div {
    width: 150px;
    text-align: center;
    margin: 20% auto;
    height: 100%;
}

    .inOverlay div *, .outOverlay.active div * {
        font-size: 1.8rem;
        width: 100%;
    }