img {
    max-width: 100%;
}

@keyframes fade-in {
    from {opacity: 0;}
    to {opacity: 1;}
}
@keyframes slide-from-left {
    from{left: -999px; opacity: 0}
    to {left: 0; opacity: 1}
}
@keyframes slide-from-right {
    from{left: 100%; opacity: 0}
    to {left: 0; opacity: 1}
}

@keyframes slide-from-bottom {
    from{bottom: -99px; opacity: 0}
    to {bottom: 0; opacity: 1}
}

.slide-from-bottom {
    animation-name: slide-from-bottom;
    animation-timing-function: ease-in-out;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}

.slide-from-left {
    animation-name: slide-from-left;
    animation-timing-function: ease-in-out;
    
    animation-duration: 1s;
    animation-fill-mode: forwards;
}

.slide-from-right {
    animation-name: slide-from-right;
    animation-timing-function: ease-in-out;
    
    animation-duration: 1s;
    animation-fill-mode: forwards;
}

.fade-in {
    animation-name: fade-in;
    animation-timing-function: ease-in-out;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}

.pre-animate {
    opacity: 0;
}