@keyframes fadein {
    to   { opacity: 1; }
}
.fade-in {
    opacity: 0;
    animation: fadein 1s forwards;
}
.fade-in.fast {
    animation-duration: 0.5s;
}
.fade-in.very-fast {
    animation-duration: 0.2s;
}

$delays: ('01': 0.1s, '02': 0.2s, '03': 0.3s, '04': 0.4s, '05': 0.5s, '06': 0.6s, '07': 0.7s , '08': 0.8s , '09': 0.9s , '1': 1s , '11': 1.1s );
@each $delay,
$Value in $delays {
    .delay-#{$delay} {
        animation-delay: $Value;
    }
}


//--------------------------------------------
//              States handler and animations
//--------------------------------------------
.hide-by-height {
    max-height: 0px;
    overflow: hidden;
    opacity: 0;
    transition: opacity 0.4s, max-height 0.4s cubic-bezier(1,0,.2,1);
}
.hide-by-height.active {
    max-height: 5000px;
    opacity: 1;
}