.slide_in_left{
    animation-name: slide_in_left;
    animation-duration: 1.5s;
    animation-timing-function: ease-in;
    animation-delay: 0.2s;
    animation-iteration-count: 1;
    animation-fill-mode: both;
    transition: 0.7s;
}

@keyframes slide_in_left{
    from{
        opacity: 0;
        transform: translateX(-150px);
    }

    to{
        opacity: 1;
        transform: translateX(0px);
    }
}

.slide_in_right{
    animation-name: slide_in_right;
    animation-duration: 1.5s;
    animation-timing-function: ease-in;
    animation-delay: 0.2s;
    animation-iteration-count: 1;
    animation-fill-mode: both;
    transition: 0.7s;
}

@keyframes slide_in_right{
    from{
        opacity: 0;
        transform: translateX(150px);
    }

    to{
        opacity: 1;
        transform: translateX(0px);
    }
}

@keyframes slide_in_up {
    from{
        opacity: 0;
        transform: translateY(150px);
    }

    to{
        opacity: 1;
        transform: translateY(0px);
    }
}

@keyframes slide_in_down {
    from{
        opacity: 0;
        transform: translateY(-150px);
    }

    to{
        opacity: 1;
        transform: translateY(0px);
    }
}

.slide_in_down{
    animation-name: slide_in_down;
    animation-duration: 1.5s;
    animation-timing-function: ease-in;
    animation-delay: 0.2s;
    animation-iteration-count: 1;
    animation-fill-mode: both;
    transition: 0.2s;
}

.slide_in_up{
    animation-name: slide_in_up;
    animation-duration: 1.5s;
    animation-timing-function: ease-in;
    animation-delay: 0.2s;
    animation-iteration-count: 1;
    animation-fill-mode: both;
    transition: 0.7s;
}

.hidden{
    opacity: 0;
    filter: blur(5px);
    transform: translateX(-100%);
    transition: all 1s;
}

.show{
    opacity: 1;
    filter: blur(0);
    transform: translateX(0);
}