.footer {
    @include width-full-viewport;
    @include drop-shadow(
        $offset-x:  -0.1rem,
        $offset-y:  -0.1rem,
        $color:     rgba(black, 0.25)
    );

    .transition {
        position:       relative;
        z-index:        0;
        color:          $color-helmholtz-blue;
        margin-bottom:  -1px; /* Drag in a bit to avoid rendering artifacts */

        .fill_slider {
            fill:       $color-helmholtz-green; 
        }
    }

    #footer-content-container {
        @include width-full-content;

        position:           relative;
        z-index:            100;

        background-color:   $color-helmholtz-blue;
        color:              white;

        padding-top:        $document-bottom-margin;
        padding-left:       $document-side-margin;
        padding-right:      $document-side-margin;
        padding-bottom:     $document-bottom-margin;

        display:            flex;
        justify-content:    space-between;
        align-items:        center;

        /*
            Instead of ugly broken navigation on the right, allow the flexbox
            to put it beneath the logo on smaller screens.
        */
        @include medium-is-tablet-minus {
            flex-direction: column;
        }

        nav {
            display: flex;
            flex-flow: row wrap;
            justify-content: center;

            @include medium-is-tablet-minus {
                margin-top: 0.5rem;
            }
        }
    }
}