@keyframes from_right {
    0% {
        left: 100%;

    }

    100% {
        left: 0%;

    }

}

@keyframes from_left {
    0% {
        right: 100%;

    }

    100% {
        right: 0%;

    }

}

@keyframes from_bottom {
    0% {
        top: 100%;
    }

    100% {
        top: 0%;
    }

}

@keyframes from_top{
    0% {
        bottom: 100%;
    }

    100% {
        bottom: 0%;
    }

}

@keyframes bouncy {
    0% {
        top:0em
    }
    40% {
        top:0em
    }
    43% {
        top:-0.9em
    }
    46% {
        top:0em
    }
    48% {
        top:-0.4em
    }
    50% {
        top:0em
    }
    100% {
        top:0em
    }
}

.bouncy {
    animation: 6s linear;
    position:relative;
    animation-name: bouncy;
    animation-fill-mode: forwards;
}

.bouncy2 {
    animation: 7s linear;
    position:relative;
    animation-name: bouncy;
    animation-fill-mode: forwards;
}

.bouncy3 {
    animation: 8s linear;
    position:relative;
    animation-name: bouncy;
    animation-fill-mode: forwards;
}

.bouncy4 {
    animation: 9s linear;
    position:relative;
    animation-name: bouncy;
    animation-fill-mode: forwards;
}

.in-from-right {
    position: relative;
    animation-name: from_right;
    animation-duration: 2s;
    animation-fill-mode: forwards;
}

.in-from-left {
    position: relative;
    animation-name: from_left;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}

.in-from-bottom{
    position: relative;
    animation-name: from_bottom;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}

.in-from-top{
    position: relative;
    animation-name: from_top;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}

.fa-search-plus {
    color: black;
}