div.loader-spinner {
    border: 0.2em solid #ddd; /* Light grey */
    border-top: 0.2em solid #3498db; /* Blue */
    border-radius: 50%;
    width: 1em;
    height: 1em;
    -webkit-animation: spin 2s linear infinite, fadein 1s;
    animation: spin 2s linear infinite, fadein 1s;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.fadeIn {
    -webkit-animation: fadein 1s;
    animation: fadein 1s;
}

@keyframes fadein {
    from { opacity: 0 }
    to{ opacity: 1 }
}

.animate-slide-bottom, .animate-slide-top, .animate-slide-right, .animate-slide-left {
    position: relative;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: backwards;
    animation-fill-mode: backwards;
}

.animate-slide-bottom {
    -webkit-animation-name: animatebottom;
    animation-name: animatebottom;
}

@keyframes animatebottom {
    from { bottom: -3rem; opacity: 0 } 
    to { bottom: 0; opacity: 1 }
}

.animate-slide-top {
    -webkit-animation-name: animatetop;
    animation-name: animatetop;
}

@keyframes animatetop {
    from { bottom: 3rem; opacity: 0 } 
    to { bottom: 0; opacity: 1 }
}

.animate-slide-left {
    -webkit-animation-name: animateleft;
    animation-name: animateleft;
}

@keyframes animateleft {
    from { left: -3rem; opacity: 0 } 
    to { left: 0; opacity: 1 }
}

.animate-slide-right {
    -webkit-animation-name: animateright;
    animation-name: animateright;
}

@keyframes animateright {
    from { left: 3rem; opacity: 0 }
    to { left: 0;  opacity: 1 }
}