.animsition, .animsition-overlay {
    position: relative;
    width: 100%;
    height: 100vh;
    min-height: 650px;
    opacity: 0;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    position: relative;
}

.animsition-overlay-slide {
    position: fixed;
    z-index: 1000;
    width: 100%;
    height: 100%;
    z-index: 100000;
}

@-webkit-keyframes overlay-slide-in-left {
    0% {
        width: 100%;
    }
    to {
        width: 0;
    }
}

@keyframes overlay-slide-in-left {
    0% {
        width: 100%;
    }
    to {
        width: 0;
    }
}

.overlay-slide-in-left {
    width: 0;
    -webkit-animation-name: overlay-slide-in-left;
    animation-name: overlay-slide-in-left;
}

@-webkit-keyframes overlay-slide-out-left {
    0% {
        width: 0;
    }
    to {
        width: 100%;
    }
}

@keyframes overlay-slide-out-left {
    0% {
        width: 0;
    }
    to {
        width: 100%;
    }
}

.overlay-slide-out-left {
    left: 0;
    width: 100%;
    -webkit-animation-name: overlay-slide-out-left;
    animation-name: overlay-slide-out-left;
}

@-webkit-keyframes overlay-slide-in-right {
    0% {
        width: 100%;
    }
    to {
        width: 0;
    }
}

@keyframes overlay-slide-in-right {
    0% {
        width: 100%;
    }
    to {
        width: 0;
    }
}

.overlay-slide-in-right {
    right: 0;
    width: 0;
    -webkit-animation-name: overlay-slide-in-right;
    animation-name: overlay-slide-in-right;
}

@-webkit-keyframes overlay-slide-out-right {
    0% {
        width: 0;
    }
    to {
        width: 100%;
    }
}

@keyframes overlay-slide-out-right {
    0% {
        width: 0;
    }
    to {
        width: 100%;
    }
}

.overlay-slide-out-right {
    right: 0;
    width: 100%;
    -webkit-animation-name: overlay-slide-out-right;
    animation-name: overlay-slide-out-right;
}