#example-menu {z-index:1000;}

.padd {padding-top:5rem;}

.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;
}
@keyframes swingInX {
0% {
    transform: perspective(400px) rotateX(-90deg);
}
100% {
    transform: perspective(400px) rotateX(0deg);
}
}
@keyframes swingInX {
0% {
    transform: perspective(400px) rotateX(-90deg);
}
100% {
    transform: perspective(400px) rotateX(0deg);
}
}
@keyframes swingInX {
0% {
    transform: perspective(400px) rotateX(-90deg);
}
100% {
    transform: perspective(400px) rotateX(0deg);
}
}
.animated.swingInX {
    animation-name: swingInX;
    backface-visibility: visible !important;
    transform-origin: center top 0;
}
@keyframes swingOutX {
0% {
    transform: perspective(400px) rotateX(0deg);
}
100% {
    transform: perspective(400px) rotateX(-90deg);
}
}
@keyframes swingOutX {
0% {
    transform: perspective(400px) rotateX(0deg);
}
100% {
    transform: perspective(400px) rotateX(-90deg);
}
}
@keyframes swingOutX {
0% {
    transform: perspective(400px) rotateX(0deg);
}
100% {
    transform: perspective(400px) rotateX(-90deg);
}
}
.animated.swingOutX {
    animation-name: swingOutX;
    backface-visibility: visible !important;
    transform-origin: center top 0;
}
@keyframes flipInX {
0% {
    opacity: 0;
    transform: perspective(400px) rotateX(90deg);
}
100% {
    opacity: 1;
    transform: perspective(400px) rotateX(0deg);
}
}
@keyframes flipInX {
0% {
    opacity: 0;
    transform: perspective(400px) rotateX(90deg);
}
100% {
    opacity: 1;
    transform: perspective(400px) rotateX(0deg);
}
}
@keyframes flipInX {
0% {
    opacity: 0;
    transform: perspective(400px) rotateX(90deg);
}
100% {
    opacity: 1;
    transform: perspective(400px) rotateX(0deg);
}
}
.animated.flipInX {
    animation-name: flipInX;
    backface-visibility: visible !important;
}
@keyframes flipOutX {
0% {
    opacity: 1;
    transform: perspective(400px) rotateX(0deg);
}
100% {
    opacity: 0;
    transform: perspective(400px) rotateX(90deg);
}
}
@keyframes flipOutX {
0% {
    opacity: 1;
    transform: perspective(400px) rotateX(0deg);
}
100% {
    opacity: 0;
    transform: perspective(400px) rotateX(90deg);
}
}
@keyframes flipOutX {
0% {
    opacity: 1;
    transform: perspective(400px) rotateX(0deg);
}
100% {
    opacity: 0;
    transform: perspective(400px) rotateX(90deg);
}
}
.animated.flipOutX {
    animation-name: flipOutX;
    backface-visibility: visible !important;
}
@keyframes bounceInDown {
0% {
    opacity: 0;
    transform: translateY(-200px);
}
60% {
    opacity: 1;
    transform: translateY(30px);
}
80% {
    transform: translateY(-10px);
}
100% {
    transform: translateY(0px);
}
}
@keyframes bounceInDown {
0% {
    opacity: 0;
    transform: translateY(-200px);
}
60% {
    opacity: 1;
    transform: translateY(30px);
}
80% {
    transform: translateY(-10px);
}
100% {
    transform: translateY(0px);
}
}
@keyframes bounceInDown {
0% {
    opacity: 0;
    transform: translateY(-200px);
}
60% {
    opacity: 1;
    transform: translateY(30px);
}
80% {
    transform: translateY(-10px);
}
100% {
    transform: translateY(0px);
}
}
.animated.bounceInDown {
    animation-name: bounceInDown;
}
@keyframes bounceOutUp {
0% {
    transform: translateY(0px);
}
30% {
    opacity: 1;
    transform: translateY(20px);
}
100% {
    opacity: 0;
    transform: translateY(-200px);
}
}
@keyframes bounceOutUp {
0% {
    transform: translateY(0px);
}
30% {
    opacity: 1;
    transform: translateY(20px);
}
100% {
    opacity: 0;
    transform: translateY(-200px);
}
}
@keyframes bounceOutUp {
0% {
    transform: translateY(0px);
}
30% {
    opacity: 1;
    transform: translateY(20px);
}
100% {
    opacity: 0;
    transform: translateY(-200px);
}
}
.animated.bounceOutUp {
    animation-name: bounceOutUp;
}