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

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

p {
    font-size: 1.3em;
    line-height: 1.8em;
}

a,
a:hover {
    color: #de370e;
}

.errorlist {
    background-color: #de370e;
    list-style: none;
    padding: 0.5em;
}

.errorlist li {
    color: white;
}

.coming-soon p {
    text-align: center;
}

.center {
    text-align: center;
}

.no-bullets {
    padding-left: 0;
}

.no-bullets li {
    list-style-type: none;
}

.map-container {
    margin: 3em auto;
}

table {
    border: 1px solid #202020;
}

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

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

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

.pdf-viewer-full {
    width: 95%;
    height: calc(100vh - 4em);
    display: block;
    margin: 1em auto;
}

/* ---------- Forms ---------- */

form label {
    display: block;
    margin-top: 2em;
    font-weight: bold;
}

form input,
form textarea {
    padding: 0.4em;
    width: calc(100% - 0.8em);
    border: 1px solid #AAA;
}

form textarea {
    min-height: 10em;
}

form input[type=checkbox],
form input[type=file] {
    width: auto;
    border: none;
}

.helptext {
    display: block;
    color: #646464;
    font-size: 0.9em;
}

.errorlist {
    color: green;
}

button {
    display: block;
    background: black;
    color: white;
    padding: 0.3em 1em;
    font-size: 1.3em;
    border: 0 solid black;
    cursor: pointer;
    margin: 3em auto;
    text-transform: uppercase;
}

button:hover {
    background-color: #de370e;
}

.rc-anchor {
    display: none;
}

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

/* Header background */
#header-welcome {
    background: url("../images/backgrounds/welcome.99b17bc671e6.jpg");
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    background-color: white;
}

/* Header content */
#header-content {
    min-height: calc(100vh - 2.7em);
    padding: 3em;
    position: relative;
}

/*
    The opacity of the content background should be adjusted depending on how light the header background image is.
    For light images, increase opacity below (as high as 0.5).
    For dark images, decrease opacity below (as low as 0.1).
*/
#header-welcome #header-content {
    background: rgba(255, 255, 255, 0.5);
}

#header-about #header-content {
    background: rgba(255, 255, 255, 0.4);
}

#header-testimonies #header-content {
    background: rgba(255, 255, 255, 0.5);
}

#header-theatre #header-content {
    background: rgba(255, 255, 255, 0.5);
}

#header-workshops #header-content {
    background: rgba(255, 255, 255, 0.55);
}

#header-sounds #header-content {
    background: rgba(255, 255, 255, 0.6);
}

/* 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;
}

/* Text */
h1,
h2 {
    max-width: 100%;
    text-transform: uppercase;
    text-align: center;
    overflow: hidden;
}

h1 {
    color: #de370e;
    text-align: center;
    font-weight: 400;
}

#header-to-main {
    font-size: 3em;
    position: absolute;
    bottom: 2em;
    left: calc(50% - 1.5em);
    width: 3em;
    text-align: center;
    padding: 0;
    cursor: pointer;
}

#header-to-main:hover {
    background-color: #de370e;
    color: white;
}

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

main {
    min-height: 100vh;
}

section {
    margin: 1em auto 4em auto;
}

label.detail {
    margin-right: 0.5em;
    font-weight: bold;
}

/* Text */
h3 {
    text-align: center;
    margin-bottom: 0.8em;
    margin-top: 2em;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

#main-content p {
    font-size: 1em;
}

/* ---------- Home ---------- */

#twitter-feed {
    margin: 0 auto;
    width: 30em;
    max-width: 80vw;
    height: 30em;
    max-height: 80vh;
    overflow: auto;
    border: 1px solid #DDD;
    padding: 1em;
}

/* ---------- Home ---------- */

.about-team-person-title,
.about-partners-partner-title {
    text-align: center;
    font-size: 1.4em;
    font-weight: bold;
    margin: 1.7em auto 0.2em;
}

.about-team-person-role {
    font-size: 0.9em;
    text-align: center;
    color: #505050;
}

.about-team-person-image,
.about-partners-partner-image {
    text-align: center;
    margin: 1em auto;
}

.about-team-person-image img {
    width: 13em;
    max-width: 100%;
    border-radius: 13em;
}

.about-partners-partner-image img {
    width: 13em;
    max-width: 100%;
}

.about-team-person-text,
.about-partners-partner-text {
    margin: 1em auto 5em auto;
}

/* ---------- Testimonies ---------- */

/* List */
#testimonies-list-filter {
    margin: 2em auto;
}

#testimonies-list-filter-input {
    padding: 0.5em;
    width: 30em;
    max-width: 100%;
}

#testimonies-list {
    text-align: center;
}

.testimonies-list-item {
    display: inline-block;
    width: 100%;
    border-bottom: 1px solid #DDD;
    text-align: left;
    padding: 0.5em;
    color: black;
    font-size: 1.2em;
    vertical-align: top;
}

.testimonies-list-item:hover {
    background-color: #de370e;
    border-bottom: 1px solid #de370e;
    color: white;
    text-decoration: none;
}

.testimonies-list-item-title {
    font-weight: bold;
}

.testimonies-list-item-keywords {
    font-size: 0.7em;
    margin-bottom: 0.4em;
}

#testimonies-create-link {
    text-align: center;
}

/* Detail */
.testimonies-postcard {
    border: 2px solid black;
    padding: 2em;
    height: 40em;
    margin-top: 1.5em;
}

.testimonies-postcard-content {
    display: inline-block;
    padding: 1em 2em 1em 0;
    border-right: 1px solid black;
    width: 70%;
    overflow-y: auto;
    height: 100%;
}

.testimonies-postcard-content-keywords {
    font-size: 0.85em;
    text-align: center;
    margin: 2em auto;
    color: #646464;
}

.testimonies-postcard-content-image img {
    max-width: 100%;
}

.testimonies-postcard-content-image,
.testimonies-postcard-content-video,
.testimonies-postcard-content-audio {
    max-width: 100%;
    text-align: center;
    margin: 3em 0;
}

.testimonies-postcard-content-video iframe {
    max-width: 100%;
}

.testimonies-postcard-content-audio iframe {
    max-width: 100%;
}

.testimonies-postcard-address {
    display: inline-block;
    width: calc(30% - 1em);
    padding-left: 1em;
    vertical-align: top;
    text-align: right;
}

.testimonies-postcard-address-stamp {
    border: 1px solid black;
    width: 6em;
    height: 8em;
    padding: 1.5em 0.5em;
    text-align: center;
    display: inline-block;
    margin-bottom: 3em;
}

.testimonies-postcard-address p {
    border-bottom: 1px solid black;
    height: 2em;
    text-align: left;
}

/* ---------- Theatre ---------- */

#map1 {
    z-index: 10;
}

.leaflet-popup-content {
    width: 27em;
}

.leaflet-popup-content img {
    width: 100%;
}

/* ---------- Workshops ---------- */

.workshop-mainimage {
    width: 40em;
    max-width: 90%;
    margin: 2em auto;
    display: block;
    border: 1px solid #000;
}

/* ---------- Sounds ---------- */

.sounds-mainimage {
    width: 50em;
    max-width: 90%;
    margin: 2em auto;
    display: block;
    border: 1px solid #000;
}

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

footer {
    border-top: 1px solid #E4E4E4;
    margin-top: 2em;
    padding-top: 2em;
    text-align: center;
    background: #FFF;
    color: #202020;
    font-size: 0.7em;
}

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

footer a:hover {
    color: #de370e;
    opacity: 0.75;
    text-decoration: none;
}

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

#footer-content img {
    width: 20em;
    max-width: 100%;
    margin: 0;
    display: inline-block;
}

/* ---------- 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;
}