/*
|-----------------------------------------------------------------------------------------------------------------------
| HTML response
|-----------------------------------------------------------------------------------------------------------------------
*/

#response > * {
    opacity: 0;
    animation: fadeLeft .15s ease-out forwards;
}

/*
|-----------------------------------------------------------------------------------------------------------------------
| Keyframe
|-----------------------------------------------------------------------------------------------------------------------
*/

[data-fx] {
    will-change: transform, opacity;
    opacity: 0;
    visibility: hidden;
}

[data-fx].fx-active {
    opacity: 1;
    visibility: visible;
}

.fade-in {
    animation: fadeIn .425s ease-in-out forwards;
}

.fade-left {
    animation: fadeLeft .425s ease-in-out forwards;
}

.fade-up {
    animation: fadeUp .425s ease-in-out forwards;
}

.fade-down {
    animation: fadeDown .425s ease-in-out forwards;
}

.grow-in {
    animation: growIn .425s ease-in-out forwards;
}

.shrink-in {
    animation: shrinkIn .425s ease-in-out forwards;
}

.turn-in {
    animation: turnIn .425s ease-in-out forwards;
}

.zoom-in {
    animation: zoomIn infinite ease-in-out forwards;
}

@keyframes fadeIn {
    0% {
        opacity: 0;
        visibility: hidden;
    }
    10% {
        opacity: 0.05;
        visibility: visible;
    }
    25% {
        opacity: 0.15;
    }
    45% {
        opacity: 0.3;
    }
    70% {
        opacity: 0.6;
    }
    90% {
        opacity: 0.85;
    }
    100% {
        opacity: 1;
        visibility: visible;
    }
}

@keyframes fadeLeft {
  from {
    opacity: 0;
    visibility: hidden;
    /*scale: .9;*/
    transform: translateX(3rem);
  }
  to {
    opacity: 1;
    visibility: visible;
    /*scale: 1;*/
    transform: translateX(0);
  }
}

@keyframes fadeUp {
  from {
    opacity: 0;
    visibility: hidden;
    /*scale: .9;*/
    transform: translateY(3rem);
  }
  to {
    opacity: 1;
    visibility: visible;
    /*scale: 1;*/
    transform: translateY(0);
  }
}

@keyframes fadeDown {
  from {
    opacity: 0;
    visibility: hidden;
    /*scale: .9;*/
    transform: translateY(-3rem);
  }
  to {
    opacity: 1;
    visibility: visible;
    /*scale: 1;*/
    transform: translateY(0);
  }
}

@keyframes growIn {
    from {
        scale: .8;
        opacity: 0;
        visibility: hidden;
    }
    to {
        scale: 1;
        opacity: 1;
        visibility: visible;
    }
}

@keyframes shrinkIn {
    from {
        scale: 1.5;
        opacity: 0;
        visibility: hidden;
    }
    to {
        scale: 1;
        opacity: 1;
        visibility: visible;
    }
}

@keyframes turnIn {
    from {
        opacity: 0;
        scale: .1 1.5;
        visibility: hidden;
        transform: translateX(48px);
    }
    to {
        opacity: 1;
        scale: 1;
        visibility: visible;
        transform: translateX(0);
    }
}