.headroom {
    transition: transform 0.25s ease-in-out 0s;
    will-change: transform;
}
.headroom--pinned {
    transform: translateY(0px);
}
.headroom--unpinned {
    transform: translateY(-100%);
}

.animated {
    animation-duration: 0.5s;
    animation-fill-mode: both;
    will-change: transform, opacity;
}
@keyframes slideDown {
0% {
    transform: translateY(-100%);
}
100% {
    transform: translateY(0px);
}
}
@keyframes slideDown {
0% {
    transform: translateY(-100%);
}
100% {
    transform: translateY(0px);
}
}
@keyframes slideDown {
0% {
    transform: translateY(-100%);
}
100% {
    transform: translateY(0px);
}
}
.animated.slideDown {
    animation-name: slideDown;
}
@keyframes slideUp {
0% {
    transform: translateY(0px);
}
100% {
    transform: translateY(-100%);
}
}
@keyframes slideUp {
0% {
    transform: translateY(0px);
}
100% {
    transform: translateY(-100%);
}
}
@keyframes slideUp {
0% {
    transform: translateY(0px);
}
100% {
    transform: translateY(-100%);
}
}
.animated.slideUp {
    animation-name: slideUp;
}