@media (min-width: 768px) {
    .animate {
        animation-duration: .3s;
        -webkit-animation-duration: .3s;
        animation-fill-mode: both;
        -webkit-animation-fill-mode: both;
    }
}

@keyframes obeh-slide-in {
    0% {
        transform: translateY(1rem);
        opacity: 0;
    }
}

@-webkit-keyframes obeh-slide-in {
    0% {
        -webkit-transform: translateY(1rem);
        -webkit-opacity: 0;
    }
}

@keyframes obeh-slide-in-left {
    0% {
        transform: translateX(-100%);
        opacity: 0;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

@-webkit-keyframes obeh-slide-in-left {
    0% {
        -webkit-transform: translateX(-100%);
        opacity: 0;
    }
    100% {
        -webkit-transform: translateX(0);
        opacity: 1;
    }
}

@keyframes obeh-slide-in-right {
    0% {
        transform: translateX(100%);
        opacity: 0;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

@-webkit-keyframes obeh-slide-in-right {
    0% {
        -webkit-transform: translateX(100%);
        opacity: 0;
    }
    100% {
        -webkit-transform: translateX(0);
        opacity: 1;
    }
}

@keyframes obeh-slide-out {
    0% {
        transform: translateY(50%);
        opacity: 1;
    }

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

@-webkit-keyframes obeh-slide-out {
    0% {
        -webkit-transform: translateY(1rem);
        -webkit-opacity: 1;
    }

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

@keyframes obeh-fade-in {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@-webkit-keyframes obeh-fade-in {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes obeh-fade-out {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@-webkit-keyframes obeh-fade-out {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.obeh-slide-in {
    -webkit-animation-name: obeh-slide-in;
    animation-name: obeh-slide-in;
}

.obeh-slide-in-right {
    -webkit-animation-name: obeh-slide-in-right;
    animation-name: obeh-slide-in-right;
}

.obeh-slide-in-left {
    -webkit-animation-name: obeh-slide-in-left;
    animation-name: obeh-slide-in-left;
}

.obeh-slide-out {
    -webkit-animation-name: obeh-slide-out;
    animation-name: obeh-slide-out;
}

.obeh-fade-in {
    -webkit-animation-name: obeh-fade-in;
    animation-name: obeh-fade-in;
}

.obeh-fade-out {
    -webkit-animation-name: obeh-fade-out;
    animation-name: obeh-fade-out;
}