/* Variables */
:root {
    --main-accent: #005377;
    --main-accent-active: #0073a5;
    --main-accent-font: #fff;
    --main-font: #000;
    --main-background: #fff;
    --main-background-active: #e8e8e8;

    --secondary-accent: #fdbb39;
    --secondary-accent-active: #d89d27;
    --secondary-accent-font: #3a3a3c;

    --input-background: #e8e8e8;
    --input-border: #8e8e8e;
    --input-font: #000;

    --error-font: #f60707;

    --table-background: #f4f4f4;
    --table-font: #8e8e8e;
    --table-background-hover: #e5e5e5;
    --table-font-hover: #8e8e8e;

    --header-background: #fff;
    --header-font: #000;
    --header-font-active: #005377;

    --footer-background: #3a3a3c;
    --footer-background-lighter: #515152;
    --footer-font: #f3be55;
    --footer-accent: #f3be55;

    --hero-size: 4rem;
    --header-size: 3rem;
    --body-size: 2.5rem;
    --body-mid-size: 2.25rem;
    --body-small-size: 2rem;
    --main-accent-size: 1.75rem;
    --legal-size: 1.5rem;

    --section-padding: 6.5rem;

    --container-max-size: 1236px;
}

@media screen and (max-width: 768px) {
    :root {
        --hero-size: 2.25rem;
        --header-size: 2.5rem;
        --body-size: 2rem;
        --body-mid-size: 2rem;
        --body-small-size: 1.75rem;

        --section-padding: 3rem;
    }
}

/* Basic Styles */
*,
*:before,
*:after {
    box-sizing: inherit;
}

html,
p,
h1,
h2,
h3,
h4 {
    margin: 0;
    padding: 0;
}

html {
    background-color: var(--main-background);
    box-sizing: border-box;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 50%;
    -webkit-font-smoothing: antialiased;
    margin: 0 auto;
    min-height: 100vh;
    min-width: 320px;
    -ms-touch-action: none;
    /* Windows Phone fix */
}

body {
    background-color: var(--main-background);
    color: #000;
    display: flex;
    flex-direction: column;
    font-size: 1em;
    -webkit-font-smoothing: antialiased;
    line-height: 1.5;
    margin: 0 auto;
    min-height: 100vh;
    min-width: 320px;
    overflow-x: hidden;
    padding: 0;
    position: relative;
    zoom: 1;
}

a {
    color: var(--main-accent);
    text-decoration: underline;
}

a:active,
a:focus,
a:hover {
    color: var(--main-accent-active);
    text-decoration: none;
}

body.noscroll {
    overflow: hidden;
}

main {
    display: block;
    flex: 1 1 100%;
}

input,
button,
textarea,
select {
    border: none;
    color: var(--main-font);
    font-family: Helvetica, Arial, sans-serif;
    font-size: 1em;
    padding: 0.5em 1em;
}

img {
    border: 0;
}

sup {
    bottom: 0.5em;
    font-size: 0.5em;
    line-height: 0;
    position: relative;
    vertical-align: middle;
}

/* Generic */
.anchor {
    display: block;
    position: relative;
    visibility: hidden;
}

.center {
    text-align: center;
}

.hidden {
    display: none;
}

.mobile {
    display: none;
}

.sr-only {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    height: 1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

.accent {
    background: var(--main-accent);
    color: var(--main-accent-font);
}

.accent-secondary {
    background: var(--footer-background);
    color: var(--main-accent-font);
}

@media screen and (max-width: 768px) {
    .mobile {
        display: block;
    }
}

/* Gate */
.gate {
    align-content: center;
    align-items: center;
    background-image: url('../images/background_gate.jpg');
    background-size: cover;
    display: flex;
    justify-content: center;
    min-height: 100vh;
    padding: var(--section-padding);
}

.section.gate {
    margin: 0;
}

.gate-main {
    background: var(--main-background);
    border: 2px solid var(--main-accent);
    max-width: 80rem;
    padding: 4rem;
}

.gate-main .hidden {
    visibility: hidden;
}

.gate-main .inset {
    margin-left: 1.6rem;
    margin-right: 1.6rem;
}

.gate-main .logo {
    align-content: center;
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin-bottom: 3rem;
}

.gate-main .logo img {
    width: 19rem;
}

.gate-main .logo a {
    background: var(--main-accent);
    border-radius: 0.5rem;
    color: var(--main-accent-font);
    font-size: var(--main-accent-size);
    padding: 1rem 1.5rem;
    text-decoration: none;
}

.gate-main .logo a:active,
.gate-main .logo a:focus,
.gate-main .logo a:hover {
    background: var(--main-accent-active);
    text-decoration: none;
}

.gate-main h2 {
    font-size: var(--header-size);
    font-weight: normal;
}

.gate-main .subtext {
    font-size: var(--body-small-size);
}

.gate-main .subtext p {
    margin: 0;
}

.gate-main form {
    margin-bottom: 2rem;
    margin-top: 2rem;
}

.gate-main .line {
    margin-bottom: 2rem;
    margin-top: 2rem;
}

.gate-main .error {
    color: var(--error-font);
    font-size: var(--legal-size);
}

.gate-main form .line {
    align-content: center;
    align-items: center;
    display: flex;
    justify-content: space-between;
}

.gate-main form .line label {
    flex: 1 1 33.333333%;
    font-size: var(--body-small-size);
    margin-right: 1rem;
}

.gate-main form .line select,
.gate-main form .line input {
    background: var(--input-background);
    border: 1px solid var(--input-border);
    border-radius: 0.5em;
    color: var(--input-font);
    flex: 1 1 66.666666%;
    font-size: var(--body-small-size);
    padding: 0.5em 1em;
}

.gate-main form button {
    background-color: var(--main-accent);
    border: none;
    border-radius: 0.5em;
    color: #fff;
    cursor: pointer;
    font-size: var(--main-accent-size);
    margin-left: 33.333333%;
    outline: none;
    padding: 0.8em 3em;
    transition: background-color 150ms ease-in-out;
}

.gate-main form button:active,
.gate-main form button:focus,
.gate-main form button:hover {
    background-color: var(--main-accent-active);
}

.gate-main .footer p {
    font-size: var(--legal-size);
    margin-bottom: 2rem;
    margin-top: 2rem;
}

@media screen and (max-width: 768px) {
    .gate-main {
        padding: 3rem 1.5rem;
    }

    .gate-main .logo img {
        width: 13.5rem;
    }

    .gate-main form .line {
        flex-wrap: wrap;
    }

    .gate-main form .line label {
        flex: 1 1 100%;
        margin-bottom: 0.8rem;
    }

    .gate-main form .line select,
    .gate-main form .line input {
        flex: 1 1 100%;
    }

    .gate-main form button {
        margin: auto;
    }
}

/* Conatainer */
.container {
    margin: 0 auto;
    max-width: var(--container-max-size);
}

/* Header */
.mainheader {
    background-color: var(--header-background);
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 30;
}

.mainheader .container {
    align-content: center;
    align-items: stretch;
    display: flex;
}

.mainheader .logo a {
    display: block;
    padding: 1.75rem 3rem;
    width: 25rem;
}

.mainheader .logo img {
    max-width: 100%;
}

.mainheader nav {
    align-content: center;
    align-items: stretch;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    list-style: none;
    margin: 0;
    padding: 0;
    margin-left: auto;
}

.mainheader .lang {
    align-content: center;
    align-items: stretch;
    display: flex;
    flex: 1 1 100%;
    justify-content: flex-end;
    list-style: none;
    margin: 2rem 0;
    padding: 0;
}

.mainheader .lang-toggle {
    padding: 0 3.5rem;
}

.mainheader .lang-toggle a {
    background: var(--main-accent);
    border-radius: 0.5rem;
    color: var(--main-accent-font);
    display: block;
    font-size: var(--main-accent-size);
    padding: 1rem 1.5rem;
    text-decoration: none;
}

.mainheader .lang-toggle a:active,
.mainheader .lang-toggle a:focus,
.mainheader .lang-toggle a:hover {
    background: var(--main-accent-active);
    text-decoration: none;
}

.mainheader .logo {
    align-content: center;
    align-items: center;
    display: flex;
    justify-content: center;
}

.mainheader .navigation {
    align-content: center;
    align-items: stretch;
    display: flex;
    justify-content: center;
    list-style: none;
    margin: 0;
    padding: 0;
    margin-left: auto;
}

.mainheader .navigation li {
    align-content: center;
    align-items: center;
    display: flex;
    justify-content: center;
    text-align: center;
    width: 18rem;
}
.mainheader .navigation li:not(:first-child) {
    border-left: 1px dashed var(--header-font);
}

.mainheader .navigation li a,
.mainheader .navigation li button {
    border: none;
    color: var(--header-font);
    display: block;
    font-size: var(--body-mid-size);
    line-height: 1;
    padding: 0.5rem 1rem;
    text-decoration: none;
}

.mainheader .navigation li a:active,
.mainheader .navigation li a:focus,
.mainheader .navigation li a:hover,
.mainheader .navigation li button:active,
.mainheader .navigation li button:focus,
.mainheader .navigation li button:hover {
    border: none;
    color: var(--header-font-active);
    text-decoration: none;
}

.mainheader .navigation li a.active,
.mainheader .navigation li button.active {
    color: var(--header-font-active);
    font-weight: bold;
}

.mainheader .navigation li a.active:active,
.mainheader .navigation li a.active:focus,
.mainheader .navigation li a.active:hover,
.mainheader .navigation li button.active:active,
.mainheader .navigation li button.active:focus,
.mainheader .navigation li button.active:hover {
    color: var(--header-font);
}

.mainheader .navigation .safety-button {
    display: none;
}

.mainheader div.lang-toggle {
    display: none;
}

.mainheader .mobile-menu {
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: 0 2.5rem;
    width: auto;
}

.mainheader .mobile-menu .toggle {
    display: none;
    flex-direction: column;
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
    top: -5px;
    width: 5rem;
}

.mainheader .mobile-menu .toggle li {
    background: var(--main-accent);
    border-radius: 3px;
    content: '';
    height: 5px;
    position: relative;
    transition: 0.25s ease-in-out;
    width: 25px;
}

.mainheader .mobile-menu .toggle li:nth-child(1) {
    top: 0;
}

.mainheader .mobile-menu .toggle li:nth-child(2) {
    top: 5px;
}

.mainheader .mobile-menu .toggle li:nth-child(3) {
    top: 10px;
}

.mainheader .mobile-menu .toggle li.hidden {
    opacity: 0;
}

.mainheader .mobile-menu .toggle li.rot45deg {
    transform: rotate(45deg);
    top: 10px;
}

.mainheader .mobile-menu .toggle li.rot-45deg {
    transform: rotate(-45deg);
}

@media screen and (max-width: 768px) {
    .mainheader {
        border-bottom-width: 4px;
    }

    .mainheader .logo a {
        padding: 2rem;
        width: 15rem;
    }

    .mainheader .lang {
        display: none;
    }

    .mainheader div.lang-toggle {
        display: flex;
    }

    .mainheader ul li {
        width: 20rem;
    }

    .mainheader ul li:last-child {
        padding: 0 2rem;
    }

    .mainheader .navigation li a,
    .mainheader .navigation li button {
        background-color: var(--main-accent);
        color: var(--main-accent-font);
        padding: 3rem;
        transition: background-color 0.2s ease-in-out;
        text-align: left;
    }

    .mainheader .navigation li a:active,
    .mainheader .navigation li a:focus,
    .mainheader .navigation li a:hover,
    .mainheader .navigation li button:active,
    .mainheader .navigation li button:focus,
    .mainheader .navigation li button:hover {
        background-color: var(--main-accent-active);
        color: var(--main-accent-font);
    }

    .mainheader .navigation li a.active,
    .mainheader .navigation li button.active {
        background-color: var(--main-accent-active);
        color: var(--main-accent-font);
        font-weight: bold;
    }

    .mainheader .navigation li a.active:active,
    .mainheader .navigation li a.active:focus,
    .mainheader .navigation li a.active:hover,
    .mainheader .navigation li button.active:active,
    .mainheader .navigation li button.active:focus,
    .mainheader .navigation li button.active:hover {
        background-color: var(--main-accent);
        color: var(--main-accent-font);
    }

    .mainheader .mobile-menu .toggle {
        display: flex;
    }

    .mainheader .lang-toggle {
        border-left: 1px dashed var(--header-font);
    }

    .mainheader .navigation {
        display: none;
    }

    .mainheader .navigation.active {
        background-color: var(--header-background);
        display: flex;
        flex-direction: column;
        left: 0;
        position: fixed;
        right: 0;
        top: 60px;
    }

    .mainheader .navigation.active li {
        border: none;
        display: block;
        padding: 0 1px 1px;
        width: 100%;
    }
}

/* Anchor Links */
.mainheader .anchorlinks {
    display: none;
    padding: 2rem;
}

.mainheader .anchorlinks ul li {
    width: auto;
}

.mainheader .anchorlinks.show {
    display: flex;
}

.anchorlinks {
    background: var(--main-accent);
    padding: 2rem;
}

.anchorlinks.secondary {
    background: var(--secondary-accent);
}

.anchorlinks ul {
    align-content: center;
    align-items: center;
    display: flex;
    justify-content: center;
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: center;
}

.anchorlinks ul li {
    border-left: 1px solid var(--main-accent-font);
    padding: 0 5rem;
}

.anchorlinks.secondary ul li {
    border-left: 1px solid var(--secondary-accent-font);
}

.anchorlinks ul li:first-child {
    border-left: none;
}

.anchorlinks ul li a {
    color: var(--main-accent-font);
    font-size: var(--body-size);
    text-decoration: underline;
}

.anchorlinks.secondary ul li a {
    color: var(--secondary-accent-font);
}

.anchorlinks ul li a:active,
.anchorlinks ul li a:focus,
.anchorlinks ul li a:hover {
    color: var(--main-accent-font);
    text-decoration: none;
}

.anchorlinks.secondary ul li a:active,
.anchorlinks.secondary ul li a:focus,
.anchorlinks.secondary ul li a:hover {
    color: var(--secondary-accent-font);
}

@media screen and (max-width: 768px) {
    .mainheader .anchorlinks {
        padding: 0;
    }

    .mainheader .anchorlinks ul li:last-child {
        padding: 1rem;
    }

    .anchorlinks {
        padding: 0;
    }

    .anchorlinks .container {
        width: 100%;
    }

    .anchorlinks ul {
        flex-wrap: wrap;
        width: 100%;
    }

    .anchorlinks ul li {
        border-left: none;
        border-top: 1px solid var(--main-accent-font);
        flex: 1 1 100%;
        padding: 1rem;
    }

    .anchorlinks.secondary ul li {
        border-left: none;
        border-top: 1px solid var(--secondary-accent-font);
    }

    .anchorlinks ul li:first-child {
        border-top: none;
    }
}

/* Hero */
.hero {
    background-position: center center;
    background-repeat: no-repeat;
    background-size: var(--container-max-size) auto;
    overflow: hidden;
    position: relative;
}

.hero-home {
    background-image: url('../images/hero_home.jpg');
}

.hero-sine {
    background-image: url('../images/hero_sine.jpg');
}

.hero-videos {
    background-image: url('../images/hero_videos.jpg');
}

.hero-publications {
    background-image: url('../images/hero_publications.jpg');
}

.hero-medical {
    background-image: url('../images/hero_medical.jpg');
}

.hero .container {
    align-items: center;
    display: flex;
    justify-content: center;
    min-height: 35rem;
    padding-bottom: 4rem;
    padding-top: 4rem;
    position: relative;
}

.hero .container::before {
    background: linear-gradient(90deg, var(--main-background) 0%, rgba(0, 0, 0, 0) 100%);
    bottom: 0;
    content: '';
    display: block;
    left: 0;
    position: absolute;
    top: 0;
    width: 15rem;
}

.hero .container::after {
    background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, var(--main-background) 100%);
    bottom: 0;
    content: '';
    display: block;
    position: absolute;
    right: 0;
    top: 0;
    width: 15rem;
}

.herobox-wrapper {
    background: var(--main-accent);
    border-radius: 1.7rem;
    color: var(--main-accent-font);
    margin-left: auto;
    position: relative;
    width: 100%;
    z-index: 5;
    transform: translateX(66.667%);
}

.herobox-wrapper.secondary {
    background: var(--secondary-accent);
    color: var(--secondary-accent-font);
}

.herobox {
    border-radius: 1.7rem;
    margin-left: 0;
    padding: 4rem;
    position: relative;
    width: 33.333333%;
    z-index: 5;
}

.herobox h2 {
    font-size: var(--hero-size);
    margin: 1rem 0;
}

@media screen and (max-width: 1236px) {
    .hero .container::before {
        display: none;
    }

    .hero .container::after {
        display: none;
    }
}

@media screen and (max-width: 768px) {
    .herobox-wrapper {
        transform: translateX(50%);
    }

    .herobox {
        padding: 1rem 3rem;
        width: 40%;
    }

    .hero-videos {
        background-position: 70% center;
    }
}

/* Sections */
.section {
    font-size: var(--body-size);
    margin-bottom: var(--section-padding);
    margin-top: var(--section-padding);
    padding-left: var(--section-padding);
    padding-right: var(--section-padding);
}
section.accent {
    background-color: var(--main-accent);
    color: var(--main-accent-font);
}

.section h3 {
    font-size: var(--header-size);
    margin-bottom: 1em;
}

.section p {
    margin: 3rem 0;
}

.section ol,
.section ul {
    margin: 0;
    padding-left: 1.5em;
}

.section.references {
    font-size: var(--body-small-size);
}

/* Button */
.btn {
    background-color: var(--secondary-accent);
    border: none;
    border-radius: 0.5rem;
    color: var(--secondary-accent-font);
    cursor: pointer;
    display: inline-block;
    outline: none;
    padding: 0.5em 1em;
    text-decoration: none;
}

.btn:active,
.btn:focus,
.btn:hover {
    background-color: var(--secondary-accent-active);
    color: var(--secondary-accent-font);
    text-decoration: none;
}

.btn.simple {
    background-color: var(--main-background);
    border: 1px solid var(--main-font);
    color: var(--main-font);
}

.btn.simple:active,
.btn.simple:focus,
.btn.simple:hover {
    background-color: var(--main-background-active);
    text-decoration: none;
}

.btn.border {
    background-color: var(--main-accent);
    border: 1px solid var(--secondary-accent);
    color: var(--main-accent-font);
}

.btn.border:active,
.btn.border:focus,
.btn.border:hover {
    background-color: var(--main-accent-active);
    color: var(--main-accent-font);
    text-decoration: none;
}

/* Accordions */
.accordions {
    align-content: flex-start;
    align-items: stretch;
    border: 2px solid var(--main-font);
    border-radius: 1rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    overflow: hidden;
}

.accordions h3 {
    margin: 0;
}

.accordions h3 button {
    background-color: var(--main-accent);
    border: none;
    border-bottom: 2px solid var(--main-font);
    color: var(--main-accent-font);
    cursor: pointer;
    display: block;
    font-size: var(--body-size);
    outline: none;
    padding: 2rem calc(2rem + 1em) 2rem 2rem;
    position: relative;
    text-align: left;
    text-decoration: none;
    width: 100%;
}

.accordions h3:not(:first-child) button {
    border-top: 2px solid var(--main-font);
}

.accordions h3 button[aria-expanded="false"] {
    border-bottom: none;
}

.accordions h3 button:active,
.accordions h3 button:focus,
.accordions h3 button:hover {
    background-color: var(--main-accent-active);
    text-decoration: none;
}

.accordions h3 button::after {
    border: solid var(--main-accent-font);
    border-width: 0 2px 2px 0;
    content: '';
    display: block;
    height: 0.5em;
    pointer-events: none;
    position: absolute;
    right: 1em;
    top: calc(50% - 0.375em);
    transform: rotate(225deg);
    transform-origin: 0.375em 0.375em;
    width: 0.5em;
}

.accordions h3 button[aria-expanded="false"]::after {
    transform: rotate(45deg);
}

.accordions h3.secondary button:active,
.accordions h3.secondary button:focus,
.accordions h3.secondary button:hover {
    background-color: var(--footer-background-lighter);
}

.accordions h3.secondary button {
    background-color: var(--footer-background);
}

.accordions > div article {
    align-items: center;
    display: flex;
    font-size: var(--body-size);
    justify-content: center;
    padding: 3rem;
}

.accordions > div article > p:first-child {
    margin-right: 3rem;
}

.accordions > div article > p:first-child img {
    max-width: 214px;
}

.accordions > div.hidden {
    display: none;
}

@media screen and (max-width: 768px) {
    .accordions > div article {
        flex-direction: column;
    }

    .accordions > div article > p:first-child {
        margin-bottom: 3rem;
        margin-right: 0;
    }
}

/* Publications Accordion Customizations */
.accordions.publications > div article {
    align-items: flex-start;
    justify-content: flex-start;
    position: relative;
}

.accordions.publications > div article:not(:first-child)::before {
    background: var(--main-font);
    content: '';
    display: block;
    height: 1px;
    inset: 0 3rem auto 3rem;
    position: absolute;
}

@media screen and (max-width: 768px) {
    .accordions.publications > div article > p:first-child {
        display: none;
    }
}

/* Table */
.table {
    column-gap: 1px;
    display: grid;
    text-align: center;
    row-gap: 1px;
}

.table .header {
    background: var(--main-accent);
    color: var(--main-accent-font);
}

.table .header,
.table .data {
    padding: 2rem;
}

.table .full {
    grid-column: 1 / span 3;
}

.table .row {
    cursor: pointer;
    display: contents;
}

.table .row:hover .data {
    background-color: var(--table-background-hover);
    color: var(--table-font-hover);
}

.table .row input[type=checkbox] {
    cursor: pointer;
}

.table .col-1 {
    align-items: center;
    display: flex;
    grid-column-start: 1;
    justify-content: center;
}

.table .col-2 {
    align-items: center;
    display: flex;
    grid-column-start: 2;
    justify-content: flex-start;
}

.table .col-3 {
    align-items: center;
    display: flex;
    grid-column-start: 3;
    justify-content: flex-start;
    text-align: left;
}

.table .data {
    background-color: var(--table-background);
    color: var(--table-font);
}

/* Letters Table Customization */
@media screen and (max-width: 768px) {
    .section.letters .table .full {
        grid-column: 1 / span 2;
    }

    .section.letters .table .col-2 {
        display: none;
    }

    .section.letters .table .col-3 {
        align-items: flex-start;
        flex-direction: column;
        font-style: italic;
        grid-column-start: 1;
    }

    .section.letters .table .col-3 span {
        font-style: normal;
    }

    .section.letters .table .col-3 {
        grid-column-start: 2;
    }
}

/* Filter Customizations */
.filter-form {
    align-items: center;
    display: flex;
    justify-content: center;
}

.filter-form input {
    margin-right: 2rem;
    width: 100%;
}

p.filter-label {
    margin-bottom: 0;
    text-align: left;
}

.filter-buttons {
    align-items: center;
    column-gap: 1rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.filter-buttons label {
    margin-top: 1rem;
}

.filter-buttons input:checked + label {
    background-color: var(--secondary-accent);
    color: var(--secondary-accent-font);
}

.filter-buttons input:checked + label:active,
.filter-buttons input:checked + label:focus,
.filter-buttons input:checked + label:hover {
    background-color: var(--secondary-accent-active);
    border: 1px solid var(--secondary-accent-active);
    color: var(--secondary-accent-font);
}

@media screen and (max-width: 768px) {
    .filter-form {
        flex-direction: column;
    }

    .filter-form input {
        margin-bottom: 1rem;
        margin-right: 0;
    }

    .filter-form label {
        width: 100%;
    }

    .filter-buttons label {
        width: 100%;
    }
}

/* Videos Listing */
.videos-list > div {
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--section-padding);
    position: relative;
}

.videos-list > div:not(:first-child)::before {
    background: var(--main-accent-font);
    content: '';
    display: block;
    height: 1px;
    inset: 0 var(--section-padding) auto var(--section-padding);
    position: absolute;
}

.videos-list > div > button.thumbnail {
    background: none;
    border: none;
    cursor: pointer;
    margin: 0;
    max-width: 50rem;
    outline: none;
    padding: 0;
    position: relative;
}

.videos-list > div > button.thumbnail.large {
    max-width: 100rem;
}

.videos-list > div > button.thumbnail img {
    display: block;
    max-width: 100%;
    pointer-events: none;
}

.videos-list > div > button.thumbnail img.play {
    inset: 50% 0 0 50%;
    max-width: 100%;
    position: absolute;
    transform: translate(-50%, -50%);
    transform-origin: top left;
    transition: transform 150ms ease-in-out;
}

.videos-list > div > button.thumbnail:active img.play,
.videos-list > div > button.thumbnail:focus img.play,
.videos-list > div > button.thumbnail:hover img.play {
    transform: scale(1.1) translate(-50%, -50%);
}

.videos-list > div h3,
.videos-list > div p {
    align-self: flex-start;
}

/* Dialog Box */
.dialog {
    align-content: center;
    align-items: center;
    background: rgba(0, 0, 0, 0.8);
    bottom: 0;
    display: flex;
    justify-content: center;
    left: 0;
    opacity: 0;
    overflow: auto;
    padding: 10rem 14rem;
    position: fixed;
    right: 0;
    top: 0;
    transition: opacity 250ms ease-in-out, visibility 0ms step-start 250ms;
    visibility: hidden;
    z-index: 50;
}

.dialog[aria-hidden='false'] {
    opacity: 1;
    transition: opacity 250ms ease-in-out;
    visibility: visible;
}

.dialog-box {
    background: var(--main-background);
    border-radius: 3rem;
    box-shadow: 0px 3px 3px 0 rgba(0, 0, 0, 0.5);
    margin: auto;
    max-height: 100%;
    max-width: 900px;
    min-height: 50rem;
    overflow-y: auto;
    position: relative;
    width: 100%;
}

.dialog-box .dialog-close-button {
    align-content: center;
    align-items: center;
    background-color: #fff;
    border-bottom: 3px solid var(--secondary-accent);
    display: flex;
    inset: 0 0 auto;
    justify-content: flex-end;
    padding: 2rem;
    position: sticky;
    z-index: 1;
}

.dialog-box .dialog-close-button .dialog-close {
    align-content: center;
    align-items: center;
    background: none;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    justify-content: center;
    outline: none;
    padding: 0;
    transition: background-color 150ms ease-in-out;
    width: 4rem;
}

.dialog-box .dialog-close-button .dialog-close:active,
.dialog-box .dialog-close-button .dialog-close:focus,
.dialog-box .dialog-close-button .dialog-close:hover {
    background-color: rgba(0, 0, 0, 0.1);
}

.dialog-box .dialog-close-button .dialog-close img {
    max-width: 100%;
}

.dialog-box .dialog-header {
    background-color: var(--secondary-accent);
    color: var(--secondary-accent-font);
    font-size: var(--header-size);
    font-weight: bold;
    padding: 1.5rem 3rem;
    text-transform: uppercase;
}

.dialog-box .dialog-info {
    font-size: var(--body-size);
    line-height: 1.5;
    padding: 3rem;
}

@media screen and (max-width: 768px) {
    .dialog {
        padding: 3rem;
    }
}

/* Request Form Custonmizations */
.dialog-box .dialog-info .requestform {
    align-content: center;
    align-items: flex-end;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-bottom: 3rem;
    margin-top: 2rem;
}

.dialog-box .dialog-info .request-form .request-form-info {
    flex: 1 1 60%;
    padding-right: 3rem;
}

.dialog-box .dialog-info .request-form .line {
    align-content: center;
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-bottom: 2rem;
    margin-top: 2rem;
}

.dialog-box .dialog-info .request-form .line:last-child {
    margin-bottom: 0;
}

.dialog-box .dialog-info .request-form .error {
    color: var(--error-font);
}

.dialog-box .dialog-info .request-form .hidden {
    display: none;
}

.dialog-box .dialog-info .request-form .line label {
    flex: 1 1 100%;
}

.dialog-box .dialog-info .request-form .line input {
    border: 1px solid var(--main-font);
    flex: 1 1 100%;
    padding: 0.5em 1em;
}

.dialog-box .dialog-info .request-form .line textarea {
    border: 1px solid var(--main-font);
    height: 15rem;
    resize: none;
    width: 100%;
}

.dialog-box .dialog-info .request-form .line button {
    background-color: var(--secondary-accent);
    border: none;
    border-radius: 0.5em;
    color: var(--secondary-accent-font);
    cursor: pointer;
    outline: none;
    padding: 1.5rem 13rem;
    transition: background-color 150ms ease-in-out;
}

.dialog-box .dialog-info .request-form .line button:active,
.dialog-box .dialog-info .request-form .line button:focus,
.dialog-box .dialog-info .request-form .line button:hover {
    background-color: var(--secondary-accent-active);
}

.dialog-box .request-thankyou {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 5rem;
}

.dialog-box .request-thankyou.hidden {
    display: none;
}

.dialog-box .request-thankyou h3 {
    font-size: var(--body-size);
    font-weight: bold;
    margin-bottom: 1.5rem;
}

.dialog-box .request-thankyou p {
    font-size: var(--body-size);
}

@media screen and (max-width: 768px) {
    .dialog-box .dialog-info .request-form .request-form-info {
        padding-right: 0;
    }

    .dialog-box .dialog-info .request-form .line.submit {
        align-content: center;
        align-items: center;
        display: flex;
        flex: 1 1 100%;
        justify-content: center;
    }

    .dialog-box .dialog-info .request-form .line button {
        padding: 1.5rem 10rem;
    }
}

/* Letter Request Section */
.stopper {
    position: relative;
}

.stopper .request {
    align-content: center;
    align-items: flex-end;
    background-color: var(--main-background);
    bottom: 0;
    display: flex;
    justify-content: space-between;
    left: 0;
    margin: 0 auto;
    max-width: calc(var(--container-max-size) + var(--section-padding) + var(--section-padding));
    padding-bottom: 2rem;
    padding-left: var(--section-padding);
    padding-right: var(--section-padding);
    padding-top: 2rem;
    position: absolute;
    right: 0;
    width: 100%;
    z-index: 25;
}

.stopper .request.fixed {
    position: fixed;
}

.stopper .request h3,
.stopper .request p {
    margin-bottom: 0;
    margin-top: 0;
}

@media screen and (max-width: 768px) {
    .stopper .request { 
        flex-wrap: wrap;
    }

    .stopper .request button {
        width: 100%;
    }
}

/* Intersticial Customizations */
.intersticial-dialog .dialog-box .dialog-close-button {
    border-bottom: none;
}

.intersticial-dialog .dialog-box .dialog-header {
    display: none;
}

.intersticial-dialog .dialog-box .dialog-info {
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 5rem 3rem;
    text-align: center;
}

.intersticial-dialog .dialog-box .dialog-info .buttons {
    margin-top: 5rem;
}

.intersticial-dialog .dialog-box .dialog-info .buttons button {
    margin: 1rem 3rem;
}

@media screen and (max-width: 768px) {
    .intersticial-dialog .dialog-box .dialog-info .buttons {
        display: flex;
        flex-direction: column;
    }
}

/* Video Player Customizations */
.video-player-dialog .dialog-box .dialog-close-button {
    border-bottom: none;
}

.video-player-dialog .dialog-box .dialog-header {
    display: none;
}

.video-player-dialog video {
    width: 100%;
}

.video-player-dialog .dialog-info p {
    margin-top: 3rem;
}

.video-player-dialog .dialog-info p.description {
    margin-bottom: 3rem;
}

/* Footer */
.mainfooter {
    background: var(--footer-background);
    border-top: 3px solid var(--footer-accent);
    color: var(--footer-accent);
    padding: 3rem;
}

.mainfooter ul {
    align-content: center;
    align-items: stretch;
    display: flex;
    justify-content: center;
    list-style: none;
    margin: 0;
    padding: 0;
}

.mainfooter ul li {
    align-items: center;
    border-left: 1px dashed var(--footer-accent);
    display: flex;
    justify-content: center;
    padding: 1rem 3rem;
    text-align: center;
}

.mainfooter ul li:first-child {
    border-left: none;
}

.mainfooter ul li a,
.mainfooter ul li button {
    background: none;
    border: none;
    color: var(--footer-accent);
    cursor: pointer;
    font-size: var(--body-size);
    margin: 0;
    outline: none;
    padding: 0;
    text-decoration: none;
}

.mainfooter ul li a:active,
.mainfooter ul li a:focus,
.mainfooter ul li a:hover,
.mainfooter ul li button:active,
.mainfooter ul li button:focus,
.mainfooter ul li button:hover {
    text-decoration: underline;
}

.mainfooter .legal {
    margin-top: 3rem;
    text-align: center;
}

.mainfooter .legal p {
    font-size: var(--legal-size);
}

@media screen and (max-width: 768px) {
    .mainfooter ul {
        flex-wrap: wrap;
    }

    .mainfooter ul li {
        border: none;
        flex: 1 1 100%;
        padding-left: 0;
        padding-right: 0;
    }

    .mainfooter ul li:first-child {
        padding-left: 0;
    }

    .mainfooter ul li:last-child {
        padding-right: 0;
    }
}