/* ------------------------------------------------------*/
/* ----- VARIABLES ------------------------------------- */
/* ------------------------------------------------------*/

:root {
    --spring-distance: 10px;
    --spring-duration: 0.4s;
}


/* ------------------------------------------------------*/
/* ----- ANIMATION SEQUENCES --------------------------- */
/* ------------------------------------------------------*/


/* --- fade_in ------ */

@keyframes fade_in {
    0%   {opacity: 0;}
    70%  {opacity: 1;}
}

@-webkit-keyframes fade_in-webkit{
    0%   { opacity: 0;}
    70%  { opacity: 1;}
}

@-moz-keyframes fade_in-moz{
    0%   { opacity: 0;}
    70%  { opacity: 1;}
}

/* --- fade_out ------ */
@keyframes fade_out {
    0%   {opacity: 0;}
    70%  {opacity: 1;}
}

@-webkit-keyframes fade_out-webkit {
    0%   {opacity: 0;}
    70%  {opacity: 1;}
}

@-moz-keyframes fade_out-moz {
    0%   {opacity: 0;}
    70%  {opacity: 1;}
}


/* --- spring_up ------ */


@keyframes spring_up {
    0%   {transform: translateY(0);}
    30%  {transform: translateY(calc(var(--spring-distance) * -1));}
    100% {transform: translateY(0);}
}

@-webkit-keyframes spring_up-webkit {
    0%   {-webkit-transform: translateY(0);}
    30%  {-webkit-transform: translateY(calc(var(--spring-distance) * -1));}
    100% { -webkit-transform: translateY(0);}
}

@-moz-keyframes spring_up-moz {
    0%   {-moz-transform: translateY(0);}
    30%  {-moz-transform:  translateY(calc(var(--spring-distance) * -1));}
    100% {-moz-transform:  translateY(0);}
}


/* --- spring_down ------ */

@keyframes spring_down {
    0%   { transform: translateY(0);}
    30%  { transform: translateY(var(--spring-distance));}
    100% { transform: translateY(0);}
}

@-webkit-keyframes spring_down-webkit {
    0%   {-webkit-transform: translateY(0);}
    30%  {-webkit-transform: translateY(var(--spring-distance));}
    100% {-webkit-transform: translateY(0);}
}

@-moz-keyframes spring_down-moz {
    0%   {-moz-transform: translateY(0);}
    30%  {-moz-transform:  translateY(var(--spring-distance));}
    100% {-moz-transform:  translateY(0);}
}


/* --- spring_left ------ */

@keyframes spring_left {
    0%   { transform: translateX(0);}
    30%  { transform: translateX(calc(var(--spring-distance) * -1));}
    100% { transform: translateX(0);}
}

@-webkit-keyframes spring_left-webkit {
    0%   { -webkit-transform: translateX(0);}
    30%  { -webkit-transform: translateX(calc(var(--spring-distance) * -1));}
    100% { -webkit-transform: translateX(0);}
}

@-moz-keyframes spring_right-moz {
    0%   { -moz-transform: translateX(0);}
    30%  { -moz-transform: translateX(calc(var(--spring-distance) * -1));}
    100% { -moz-transform: translateX(0);}
}


/* --- spring_right ------ */

@keyframes spring_right {
    0%   { transform: translateX(0);}
    30%  { transform: translateX(var(--spring-distance));}
    100% { transform: translateX(0);}
}

@-webkit-keyframes spring_right-webkit {
    0%   { -webkit-transform: translateX(0);}
    30%  { -webkit-transform: translateX(var(--spring-distance));}
    100% { -webkit-transform: translateX(0);}
}

@-moz-keyframes spring_right-moz {
    0%   { -moz-transform: translateX(0);}
    30%  { -moz-transform: translateX(var(--spring-distance));}
    100% { -moz-transform: translateX(0);}
}



/* ------------------------------------------------------*/
/* ----- ANIMATE CLASSES ------------------------------- */
/* ------------------------------------------------------*/


/* --- fade ----------- */

.fade_in{
    animation-name: fade_in;
    -webkit-animation: fade_in-webkit;
    -moz-animation: fade_in-moz;

    animation-duration: var(--spring-duration);
    -webkit-animation-duration: var(--spring-duration);
    -moz-animation-duration: var(--spring-duration);
}


.fade_out{
    animation-name: fade_out;
    -webkit-animation: fade_out-webkit;
    -moz-animation: fade_out-moz;

    animation-duration: var(--spring-duration);
    -webkit-animation-duration: var(--spring-duration);
    -moz-animation-duration: var(--spring-duration);
}

/* --- spring ----------- */

.spring_up{
    animation-name: spring_up;
    -webkit-animation: spring_up-webkit;
    -moz-animation: spring_up-moz;

    animation-duration: var(--spring-duration);
    -webkit-animation-duration: var(--spring-duration);
    -moz-animation-duration: var(--spring-duration);
}


.spring_down{
    animation-name: spring_down;
    -webkit-animation: spring_down-webkit;
    -moz-animation: spring_down-moz;

    animation-duration: var(--spring-duration);
    -webkit-animation-duration: var(--spring-duration);
    -moz-animation-duration: var(--spring-duration);
}

.spring_left{
    animation-name: spring_left;
    -webkit-animation: spring_left-webkit;
    -moz-animation: spring_left-moz;

    animation-duration: var(--spring-duration);
    -webkit-animation-duration: var(--spring-duration);
    -moz-animation-duration: var(--spring-duration);
}

.spring_right{
    animation-name: spring_right;
    -webkit-animation: spring_right-webkit;
    -moz-animation: spring_right-moz;

    animation-duration: var(--spring-duration);
    -webkit-animation-duration: var(--spring-duration);
    -moz-animation-duration: var(--spring-duration);
}