#layout {
    @media screen and (min-width: $screen-sm-min) {
        flex-grow: 1;
    }
}

@media print {
    .container {
        width: 100%;
    }
}

.homepage-main-box {
    min-height: 400px;
    background: url('/static/img/encode-bg-gray.png') no-repeat center;
}

.project-info {
    h1, h2, h3, h4 {
        text-shadow: rgba(255, 255, 255, 1) 1px 1px 0;
    }

    margin-bottom: 20px;
    display: block;
    font-size: 1.3rem;
}

.text-panel {
    margin-top: 20px;
}

/**
 * Common page elements.
 */
.container {
    margin-left: auto;
    margin-right: auto;

    @media screen and (min-width: $screen-sm-min) {
        width: $screen-sm-min;
    }

    @media screen and (min-width: $screen-md-min) {
        width: $screen-md-min;
    }

    @media screen and (min-width: $screen-lg-min) {
        width: $screen-lg-min;
    }

    @media screen and (min-width: $screen-xl-min) {
        width: $screen-xl-min;
    }
}

// Main page content panel.
#content {
    margin: 20px 10px;

    @media screen and (min-width: $screen-sm-min) {
        margin: 40px auto;
    }

    @media screen and (min-width: $screen-md-min) {
        margin-top: 80px;
    }
}

/* *********************************************************
		FOOTER
********************************************************** */

.page-footer {
    color: rgb(255, 255, 255);
    background-color: $footerBackground; // overwrite previous line for CSS3 browsers
    text-shadow: 0 1px rgba(0, 0, 0, 0.3);
    text-align: center;
    overflow: hidden;

    a {
        color: rgb(255, 255, 255);
        font-weight: bold;
    }

    ul {
        list-style: none;
        list-style-position: outside;
        padding: 0;
    }
}

.footer-links {
    margin: 5px 0;
    text-align: center;

    @media (min-width: $screen-sm-min) {
        text-align: right;

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

    a {
        display: block;
        margin: 0 0 8px;
        padding: 10px 15px;
        background-color: darken($footerBackground, 0.1%);
        border-radius: 3px;
    }

    a:hover {
        text-decoration: none;
        background-color: darken($footerBackground, 6%);
    }

    a:active {
        background-color: darken($footerBackground, 15%);
    }
}

.footer-logos {
    text-align: center;

    @media (min-width: $screen-sm-min) {
        text-align: left;
    }

    li {
        margin: 0 0 15px;
    }
}

.copy-notice {
    text-align: center;
}

// Privacy notice in auth0 login box.
.auth0__privacy-notice {
    margin: 10px 0 0 0;
    text-align: center;
}

// Styles for the top of the page with breadcrumbs.
.top-accessories {
    padding-bottom: 5px;
    border-bottom: 1px solid #c0c0c0;

    @media screen and (min-width: $screen-sm-min) {
        display: flex;
        justify-content: space-between;
    }
}
