:root {
    --primary-color: #bba259;
    --secondary-color: #0450a2;
    --secondary-color-light: #69bcc4;
    --tertiary-color: #e7e1d5;

    --dark-color: #343434;
    --light-color: #fffefc;
    --white-color: #ffffff;
    --black-color: #000000;

    --letter-spacing: calc(200 * 0.001em);
    --expo-smoothing: cubic-bezier(0.16, 1, 0.3, 1);
}
/* CSS RESET START */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
/* CSS RESET END */

body {
    font-family: 'ITC-Avantgarde-Pro';
    font-size: 1rem;
    font-weight: 500;
    background-color: var(--white-color);
    color: var(--dark-color);
    margin: 0;
    padding: 0;
    scroll-behavior: smooth;
}




/* MAIN */

section{
    box-sizing: border-box;
}

a {
    font-family: inherit;
    color: inherit;
}

.overflow-hidden {
    overflow-x: hidden;
}
.container {
    --container-size: 1400px;
    --padding: 1.25rem;
    max-width: var(--container-size);
    margin-inline: auto;
    padding-inline: var(--padding);
}

.stacked {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
}
.stacked > * {
    grid-column: 1/2;
    grid-row: 1/2;
    z-index: 2;
}
.stacked > .bg-image {
    z-index: 1;
    grid-row: 1/2;
}
.bg-image {
    width: 100%;
    height: 100%;
}
.bg-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.hero-container {
    color: var(--white-color);
    background-color: var(--primary-color);
    text-align: center;
    font-size: 26px;
    line-height: 1.25;
    width: 100%;
    max-width: 560px;
    height: fit-content;
    padding-block: 14px;
    padding-inline: 18px;
    align-self: self-end;
    justify-self: center;
    margin-block: 0 7%;
}
.bolder {
    font-weight: 700;
}
section.content {
    background: url(../images/main-bg.jpg) top / cover no-repeat;
    margin-top: -2px;
    padding-block: 0 2rem;
}
.main-headline-holder {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-block: 0;
    width: 100%;
    max-width: fit-content;
    background-color: var(--white-color);
    color: var(--secondary-color);
    margin-inline: auto;
}
.main-headline {
    font-size: 2rem;
    font-weight: 600;
    line-height: 0.9;
    letter-spacing: calc(100 * 0.001em);
    text-transform: uppercase;
    display: block;
    padding-block: 1rem 0.5rem;
}
.info-holder{
    margin-block: 60px 80px;
}
.fancy-headline {
    font-size: 2rem;
    letter-spacing: calc(100 * 0.001em);
    text-transform: uppercase;
    font-weight: 500;
    color: var(--primary-color);
    position: relative;
    text-align: center;
    width: 100%;
}
.fancy-headline::before,
.fancy-headline::after {
    content: "";
    width: 30%;
    height: 2px;
    background-color: var(--primary-color);
    position: absolute;
    top: calc((100% - 10px) / 2);
}
.fancy-headline::before {

    left: 0;
}
.fancy-headline::after {
    right: 0;
}

.schedule {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    width: 100%;
}
.schedule-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    width: 100%;
}
.schedule-title {
    background-color: var(--primary-color);
    color: var(--white-color);
    border: 2px solid var(--white-color);
    line-height: 1;
    text-align: center;
    font-size: 28px;
    font-weight: 700;
    display: block;
    margin-block: 2rem 0;
    padding-block: 1rem 0.5rem;
    letter-spacing: calc(138 * 0.001em);
    width: 100%;
}

.schedule-cell {
    border: 2px solid var(--white-color);
    background-color: transparent;
    color: var(--primary-color);
    font-size: 28px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: calc(138 * 0.001em);
    text-align: center;
    text-transform: uppercase;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-block: 1rem 0.5rem;
    width: 100%;
}
.header-cell {
    background-color: var(--white-color);
    color: var(--primary-color);
    font-weight: 500;
    margin-right: 1rem;
    max-width: 252px;
}
.route-image {
    width: 100%;
    max-width: 100%;
    margin-block: 2.5rem 0;
}
.route-image-smaller {
    max-width: 80%;
    margin-inline: auto;
    display: block;
}
.info-holder:nth-of-type(3) {
    margin-block: 0 80px;
}
.info-holder:nth-of-type(3) .fancy-headline::before,
.info-holder:nth-of-type(3) .fancy-headline::after {
    width: 42%;
}
.divider {
    width: 100%;
    height: 2px;
    background-color: var(--white-color);

}
.cta-headline {
    font-size: 40px;
    font-weight: 700;
    color: var(--white-color);
    text-align: center;
    line-height: 1.25;
    letter-spacing: calc(100 * 0.001em);
    max-width: 48ch;
    margin-inline: auto;

    padding-block: 1.5rem;
}
#main-slider li {
    display: flex;
    justify-content: center;
}
#thumbnail-slider {
    max-width: 50vw;
    margin-inline: auto;
    margin-block: 1rem;
}
.video {
    height: 100%;
    max-height: 720px;
}
.video video {
    margin-inline: auto;
    display: block;
    height: 100%;
    max-height: 720px;
    object-fit: cover;
}
/* FOOTER */
footer {
    background: url(../images/footer-bg.jpg) center / cover no-repeat;
    padding-block: 2.5rem;
    border-top: 2px solid var(--white-color);
}
.footer-headline {
    font-size: 38px;
    font-weight: 900;
    font-style: italic;
    color: var(--secondary-color);
    text-align: center;
}
@media screen and (min-width: 1920px) {

}
@media screen and (max-width: 1440px) {
    .container {
        --padding: 2rem;
    }
    .fancy-headline::before, .fancy-headline::after {
        width: 20%;
    }
}
@media screen and (max-width: 980px) {
    .hero-container {
        margin-block: 0 5%;
    }
    .fancy-headline::before,
    .fancy-headline::after {
        width: 10%;
    }
    .info-holder:nth-of-type(3) .fancy-headline::before,
    .info-holder:nth-of-type(3) .fancy-headline::after {
        width: 35%;
    }
    .header-cell {
        max-width: 210px;
        min-width: 210px;
    }
    .cta-headline {
        font-size: 1.75rem;
    }
    footer {
        background-size: 900px 100%;
    }
}
@media screen and (max-width: 500px) {
    .hero-container {
        font-size: 1rem;
        width: 100%;
        max-width: 340px;
        height: fit-content;
        margin-block: 0;
        padding-block: 14px;
        padding-inline: 10px;
    }
    .container {
        --padding: 1.25rem;
    }
    .main-headline {
        font-size: 1.25rem;
    }
    section.content {
        padding-block: 2rem 1rem;
    }
    .schedule-row {
        gap: 0.75rem;
    }
    .schedule-cell {
        font-size: 1rem;
        min-width: 40px;
        height: 40px;
        padding-block: 0.75rem 0.5rem;
    }

    .header-cell {
        max-width: 123px;
        min-width: 123px;
        font-size: 1rem;
        height: 40px;
        margin-right: 0;
        padding-block: 0.75rem 0.5rem;
    }
    .route-image-smaller {
        max-width: 100%;
    }
    .fancy-headline {
        font-size: 1.5rem;
        line-height: 1.4;
        max-width: 28ch;
        margin-inline: auto;
    }
    .fancy-headline::before, .fancy-headline::after {
        width: 20%;
    }
    .info-holder:nth-of-type(3) .fancy-headline::before, .info-holder:nth-of-type(3) .fancy-headline::after {
        width: 20%;
    }
    .schedule-title {
        font-size: 1.25rem;
        padding-block: 0.75rem 0.5rem;
    }
    .info-holder {
        margin-block: 60px;
    }
    .cta-headline {
        font-size: 1rem;
        padding-block: 1rem;
    }
    .footer-headline {
        font-size: 1.75rem;
    }
    .video video {
        max-height: 420px;
    }
    #main-slider li {
        height: 502px !important;
        width: 100% !important;
    }
    #thumbnail-slider {
        max-width: 100%;
    }
    #thumbnail-slider li {
        width: 120px !important;
        height: 72px !important;
    }
    footer {
        background-size: 509px 100%;
    }
}