#hero {
    position: relative;
    padding: 0;
}

.heropanel {
    position: absolute;
    top: 0;
    @include animation(heroswap 20s ease-in-out infinite);
    opacity: 0;
    z-index: 0;
}

#first {
    @include animation-delay(0s);
}

.nojs {
    #first {
        min-height: 400px;
        position: static;
        opacity: 1;
        z-index: 1;
    }
}

#second {
    @include animation-delay(10s);
}

@include keyframes(heroswap) {
    0%, 45%, 100% { opacity: 1; z-index: 1; }
    50%, 95% { opacity: 0; z-index: 0; }
}