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

/*** Pulsating shadow ***/
@keyframes pulseShadow {
    0%, 100% {
        box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.76);
    }
    33% {
        box-shadow: 0 12px 24px 0 rgba(0, 0, 0, 0.9); /* First pulse */
    }
    66% {
        box-shadow: 0 16px 32px 0 rgba(0, 0, 0, 0.6); /* Second pulse */
    }
}

/*** Slide in ***/
.slideIn{
    animation-duration: 600ms;
    animation-name: slidein;
    animation-fill-mode: forwards;
}
@keyframes slidein {
    from {
        left: -100%;
    }

    to {
        left: 0;
    }
}
/*** Slide out ***/
.slideOut{
    animation-duration: 600ms;
    animation-name: slideout;
    animation-fill-mode: forwards;
}
@keyframes slideout {
    from {
        left: 0;
    }

    to {
        left: -100%;
    }
}

/*** Slide down ***/
.slideDown{
    animation-duration: 400ms;
    animation-name: slidedown;
    animation-fill-mode: forwards;
}
@keyframes slidedown {
    from {
        top: -100%;
        -ms-transform: translate(-50%, -100%);
        transform: translate(-50%, -100%);
    }

    to {
        top: 50%;
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    }
}

/*** Slide up ***/
.slideUp{
    animation-duration: 400ms;
    animation-name: slideup;
    animation-fill-mode: forwards;
}
@keyframes slideup {
    from {
        top: 50%;
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    }

    to {
        top: -100%;
        -ms-transform: translate(-50%, -100%);
        transform: translate(-50%, -100%);
    }
}

/***  Blend ***/
.blendIn{
    transition: opacity 600ms;
    visibility: visible;
    /* Fade - takes 1 second to go from 0% to 100% opac: */
    opacity: 1;
}

.blendOut{
    transition: visibility 600ms, opacity 600ms;
    visibility: hidden !important;
    opacity: 0;
}


/* Add Zoom Animation */
.animate {
    -webkit-animation: animatezoom 0.6s;
    animation: animatezoom 0.6s
}

@-webkit-keyframes animatezoom {
    from {-webkit-transform: scale(0)}
    to {-webkit-transform: scale(1)}
}

@keyframes animatezoom {
    from {transform: scale(0)}
    to {transform: scale(1)}
}

/*** Grow vertically ***/
@keyframes growVert {
    from { height: 0; }
    to { height: 100%; }
}

/*** Grow horizontally ***/
@keyframes growHoriz {
    from { width: 0; }
    to { width: 100%; }
}