/* HEADROOM */ 
.animated {
    -webkit-animation-duration: .5s;
    -moz-animation-duration: .5s;
    -o-animation-duration: .5s;
    animation-duration: .5s;
    -webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
    -o-animation-fill-mode: both;
    animation-fill-mode: both;
}
 
@-webkit-keyframes slideDown {
    0% {-webkit-transform: translateY(-100%)     } 
    100% {         -webkit-transform: translateY(0)     } 
} 
    
@-moz-keyframes slideDown {
    0% {         -moz-transform: translateY(-100%)     }
    100% {         -moz-transform: translateY(0)     } 
} 

@-o-keyframes slideDown {
    0% {         -o-transform: translateY(-100%)     }
    100% {         -o-transform: translateY(0)     }
} 

@keyframes slideDown {
    0% {         transform: translateY(-100%)     }
    100% {         transform: translateY(0)     }
} 

@-webkit-keyframes slideUp {
    0% {         -webkit-transform: translateY(0)     }
    100% {         -webkit-transform: translateY(-100%)     }
} 
    
@-moz-keyframes slideUp {
    0% {         -moz-transform: translateY(0)     }
    100% {         -moz-transform: translateY(-100%)     }
} 
    
@-o-keyframes slideUp { 
    0% {         -o-transform: translateY(0)     }
    100% {         -o-transform: translateY(-100%)     }
} 
    
@keyframes slideUp { 
    0% {         transform: translateY(0)     } 
    100% {         transform: translateY(-100%)     }
} 
    

.headroom {
    will-change: transform;
    transition: transform 200ms linear;
}

.headroom--pinned {
    top: 0;
    transform: translateY(0%);
       -webkit-animation-name: slideDown;     -moz-animation-name: slideDown;     -o-animation-name: slideDown;     animation-name: slideDown;
}

.headroom--unpinned {
        top: -100px;
    transform: translateY(-100%);
    -webkit-animation-name: slideUp;     -moz-animation-name: slideUp;     -o-animation-name: slideUp;     animation-name: slideUp;
}