/* Header */

header {

@include vendor('transition', 'opacity 2s ease-in-out');
position: relative;
margin: 0;
padding: 2em 0 14em 0;
height: 100vh;
color: _palette(fg);
text-shadow: 0 0 0.5px rgba(255, 255, 255, 0.25);
text-align: center;
cursor: default;

header {
    display: inline-block;
    padding: 0 0 4.5em 0;

    h1 {
        font-weight: 600;
        font-size: 2em;
        letter-spacing: 10px;
    }

    p {
        border-top: solid 1px rgba(255, 255, 255, 0.5);
        color: _palette(fg-light);
        text-shadow: 0 0 0.5px rgba(255, 255, 255, 0.1875);
        font-size: 1em;
        text-transform: uppercase;
        letter-spacing: 3px;
        padding: 0;
        margin-top: 0.35em;

        &:before {
            content: '';
            display: block;
            border-top: solid 1px rgba(255, 255, 255, 0.5);
            margin: 4px 0 0.8em 0;
        }
    }
}

footer {
    @include vendor('transition', (
        'opacity 2s ease-in-out',
        'transform 1s ease-in-out'
    ));
    @include vendor('transition-delay', '1.25s');
    position: absolute;
    bottom: 9em;
    margin: 0;
    width: 100%;

    &:after {
        content: '';
        display: block;
        position: absolute;
        bottom: -9em;
        left: 50%;
        height: 9em;
        border-left: solid 1px _palette(accent);
    }

    &:before {
        content: '';
        display: block;
        width: 90px;
        height: 66px;
        position: absolute;
        left: 50%;
        bottom: -4.5em;
        margin-left: -45px;
        margin-bottom: -33px;
        background: url('images/circles.svg') no-repeat;
    }
}

.language {
    position: fixed;
    top: 0;
    right: 0;
    margin: 0;
    margin-right: 1em;
    padding: 0;
    text-align: right;

    li {
        display: inline-block;
        margin: 0;
        padding: 0 1em 0 0;

        &:last-child {
            padding-right: 0;
        }

        .icon {
            color: inherit;

            &:before {
                font-size: 1.25em;
            }
        }
    }

    a {
        border: none;
    }

    .en:lang(en), .fr:lang(fr), .de:lang(de){
        font-weight: bold;
    }
}

body.is-preload & {
    opacity: 0;

    footer {
        @include vendor('transform', 'translateY(1em)');
        opacity: 0;
    }
}

}