/* Banner */

@include keyframes('reveal-banner') {

0% { opacity: 0; }
100% { opacity: 1; }

}

banner {

background-attachment: scroll, scroll, scroll, fixed;
background-color: _palette(three, bg);
background-image: url('images/light-bl.svg'), url('images/light-br.svg'), url('images/overlay.png'), url('../images/banner.jpg');
background-position: bottom left, bottom right, top left, top center;
background-repeat: no-repeat, no-repeat, repeat, no-repeat;
background-size: $pattern-background-size, $pattern-background-size, auto, cover;
color: _palette(banner, fg);
cursor: default;
padding: 6em 0;
text-align: center;

.inner {
    @include vendor('animation', 'reveal-banner 1s 0.25s ease-in-out');
    @include vendor('animation-fill-mode', 'forwards');
    background: transparentize(_palette(banner, inner-bg), 0.5);
    color: _palette(banner, inner-fg);
    display: inline-block;
    opacity: 0;
    padding: 3em;
    text-align: center;

    header {
        display: inline-block;
        border-bottom: solid 2px;
        border-top: solid 2px;
        margin: 0 0 2em 0;
        padding: 3px 0 3px 0;

        h2 {
            border-bottom: solid 2px;
            border-top: solid 2px;
            font-size: 2.5em;
            font-weight: 900;
            letter-spacing: 0.2em;
            margin: 0;
            padding-left: 0.05em;
            position: relative;
            text-transform: uppercase;
        }
    }

    p {
        letter-spacing: 0.1em;
        margin: 0;
        text-transform: uppercase;

        a {
            color: inherit;
            font-weight: 400;
            text-decoration: none;
        }
    }

    footer {
        margin: 2em 0 0 0;
    }
}

}