.animated
{
    position: relative;
    opacity: 0;
}

.animated.active
{
    opacity: 1;
}

.active.fade-bottom 
{
  animation: fade-bottom .6s ease-in;
}

.active.fade-left 
{
  animation: fade-left .6s ease-in;
}

.active.fade-right 
{
  animation: fade-right .6s ease-in;
}

.active.fade-top
{
  animation: fade-top .6s ease-in;
}

@keyframes fade-bottom 
{
    0% {transform: translateY(3.125rem); opacity: 0;}
    100% {transform: translateY(0); opacity: 1;}
}

@keyframes fade-top
{
    0% {transform: translateY(-3.125rem); opacity: 0;}
    100% {transform: translateY(0); opacity: 1;}
}

@keyframes fade-left 
{
    0% {transform: translateX(-6.25rem); opacity: 0;}
    100% {transform: translateX(0); opacity: 1;}
}

@keyframes fade-right 
{
    0% {transform: translateX(6.25rem); opacity: 0;}
    100% { transform: translateX(0); opacity: 1;}
}

@keyframes hide-scroll 
{
    from, to { overflow: hidden; } 
}