/* ---------- Generic ---------- */

body,
html {
    margin: 0;
    height: 100%;
    font-family: 'Roboto Condensed', sans-serif;
}

button,
input[type="submit"] {
    display: block;
    background: black;
    color: white;
    padding: 0.3em 1em;
    font-size: 1.3em;
    border: 0 solid black;
    cursor: pointer;
    margin-top: 1em;
    text-transform: uppercase;
}

a,
a:hover {
    color: white;
}

.errorlist {
    color: red;
}

p img {
    display: block;
    margin: 0 auto;
}

img {
    max-width: 100%;
}

.attention {
    text-align: center;
    font-weight: bold;
}

table {
    border: 1px solid #202020;
}

td,
th {
    border: 1px solid #202020;
    padding: 0.3em;
}

/* ---------- Header ---------- */

/* Header bar */
#header-bar-background {
    background-color: #574b90;
    height: 6em;
    z-index: 1000;
    top: -1em;
    left: 0;
    width: 100%;
}

#header-bar-content {
    z-index: 10001;
    top: 0.5em;
    left: 10%;
    width: 80%;
}

#header-bar-content-logo {
    display: inline-block;
    width: 100%;
    margin-top: 0.25em;
    vertical-align: top;
    text-align: center;
}

#header-bar-content-logo img {
    height: 3.5em;
}

/* Header background */
#header-welcome { background: url("../images/backgrounds/welcome.61ef2e821743.jpg"); }
#header-team { background: url("../images/backgrounds/team.8e746e90e878.jpg"); }
#header-partners { background: url("../images/backgrounds/partners.2ed753c58182.jpg"); }
#header-activity { background: url("../images/backgrounds/activity.9b6bddbfdc5a.jpg"); }
#header-resources { background: url("../images/backgrounds/resources.e5c987d0fe4d.jpg"); }
#header-getinvolved { background: url("../images/backgrounds/getinvolved.82b45d0b71d0.jpg"); }
#header-news { background: url("../images/backgrounds/news.95d747a185a8.jpg"); }

#header-welcome,
#header-team,
#header-partners,
#header-activity,
#header-resources,
#header-getinvolved,
#header-news {
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    background-color: white;
}

/* Nav */
nav {
    font-size: 1.3em;
}

nav ul {
    padding: 0;
}

nav ul li {
    list-style-type: none;
    text-transform: uppercase;
}

nav ul li a {
    text-decoration: none;
}

/* Header content */
#header-content {
    min-height: 100vh;
    padding: 3em;
    position: relative;
    font-family: 'Roboto Condensed', sans-serif;
}

/* Taglines */
#header-content-tagline {
    font-weight: bold;
    text-transform: uppercase;
    position: absolute;
    color: white;
}

#header-content-tagline-primary {
    background-color: #574b90;
}

#header-content-tagline-secondary {
    background-color: #786fa6;
}

/* Header base */
#header-base-background {
    background-color: #574b90;
    height: 9em;
    width: 100%;
    margin-top: 0;
}

#header-base-content {
    width: 100%;
    z-index: 999;
    position: relative;
    text-align: center;
    color: white;
    text-transform: uppercase;
    font-weight: bold;
}

/* ---------- Main ---------- */

main {
    min-height: 100vh;
}

#main-content {
    padding-top: 8em;
}

h3 {
    text-align: center;
    margin-top: 2em;
    margin-bottom: 1em;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: bold;
    color: #574b90;
    font-size: 2.3em;
}

h4 {
    text-align: left;
    margin-top: 1.7em;
    margin-bottom: 0.7em;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: bold;
    color: #574b90;
    font-size: 1.7em;
}

#main-content a {
    color: #786fa6;
    font-weight: bold;
}

#main-content p,
#main-content ul {
    font-size: 1.2em;
    line-height: 1.3em;
}

#main-content .quote {
    background-color: #574b90;
    color: white;
    padding: 5em 1em 1em 1em;
    margin-top: -4em;
    margin-bottom: 4em;
    font-size: 1.1em;
    width: 100%;
    display: inline-block;
    vertical-align: top;
}

#main-content .quote .source {
    font-size: 1em;
    opacity: 0.7;
    font-weight: bold;
    margin-top: 1.5em;
}

.quote-img {
    display: block;
    vertical-align: top;
    width: 13em;
    height: 13em;
    border: 8px solid white;
    background-color: #574b90;
    text-align: center;
    vertical-align: middle;
    color: white;
    line-height: 13em;
    border-radius: 8em;
    margin: 0 auto 0;
    z-index: 500;
    position: relative;
}

.youtube {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    padding-top: 0;
    height: 0;
    margin: 3em auto;
}

.youtube iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* ---------- Team ---------- */

#team-getintouch {
    text-align: center;
}

.team-name,
.team-role {
    text-align: center;
    font-weight: bold;
    text-transform: uppercase;
}

.team-name {
    font-size: 2em;
    margin-top: 2em;
    color: #574b90;
}

.team-role {
    font-size: 1.3em;
    color: #786fa6;
    margin-bottom: 1em;
}

.team-photo {
    text-align: center;
    padding: 0.5em 0;
    margin-bottom: 1em;
}

.team-photo img {
    width: 17em;
    max-width: 100%;
    border-radius: 17em;
}

.team-projectsupporter {
    display: inline-block;
    padding: 2em;
}

.team-projectsupporter-primary {
    color: #786fa6;
    font-weight: bold;
    font-size: 1.5em;
}

.team-projectsupporter-secondary {
    color: black;
}

/* ---------- Collection ---------- */

#collection-images img {
    margin: 2em auto;
}

/* ---------- Resources ---------- */

.resources-list {
    padding-left: 0;
    list-style-type: none;
}

.resources-list li {
    padding: 0;
    border-bottom: 1px solid #DDD;
}

.resources-list li:first-child {
    border-top: 1px solid #DDD;
}

.resources-list li a {
    padding: 1em;
    width: 100%;
    display: inline-block;
}

.resources-list li a:hover {
    background: #e4e0f8;
    text-decoration: none;
}

/* ---------- Footer ---------- */

footer {
    margin-top: 5em;
    text-align: center;
    background: #EEE;
}

footer a {
    color: #574b90;
    font-weight: bold;
}

footer a:hover {
    color: #786fa6;
    text-decoration: none;
}

#footer-content-logos img {
    height: 3.6em;
    max-width: 100%;
}

#footer-content-text {
    margin-top: 2em;
}

/* ---------- Error Pages ---------- */

.errorpage-title {
    font-size: 3.3em;
    font-weight: bold;
    margin: 0.5em 0 1em 0;
}

.errorpage-path {
    font-weight: bold;
}

.errorpage-code {
    margin-top: 3em;
    font-size: 0.8em;
}