/* bg.dark = #365052 */
/* text.dark = #f2f2f2  */

/* bg.lite = #f2f2f2 */
/* text.lite = #365052  */

/* bg button = #E9C46A */

main {
    background-color: #365052 !important
}

section.hero {
    box-shadow: none;
    margin-top: 40px;
    margin-bottom: 40px;

    @media (max-width: 767px) {
        margin-top: 0;
        margin-bottom: 0;
    }
}

section.hero .background-media {
    padding: 40px;

    @media (max-width: 767px) {
        padding: 10px;
    }
}

section.hero .background-media>img {
    object-fit: contain;
}

section.dark {
    background-color: #365052 !important;
    color: #f2f2f2 !important;
}

section.dark.layouts h1 {
    color: #f2f2f2 !important;
}
section.dark.layouts h2 {
    color: #f2f2f2 !important;
}

.layouts .text blockquote {
    color: #F4A261 !important;
}

.layouts .text a {
    color: #E76F51;
}

.layouts .text a:hover {
    color: #F4A261;
}

section.light {
    background-color: #f2f2f2 !important;
    color: #365052 !important;

}

section.light.layouts h1, section.light.layouts h2 {
    color: #365052 !important;
}

.layouts .buttons {
    a {
        background-color: #E76F51 !important;
        color: #f2f2f2 !important;
        border-color: transparent;

        &:hover {
            background-color: #F4A261 !important;
            color: #222 !important;
        }
    }
}

.signup-module {
    background-color: #365052 !important;
    color: #f2f2f2 !important;

    padding-top: 64px;
    padding-bottom: 64px;

    h2 {
        font-family: "Trade Gothic Bold";
        font-size: 45px;
        font-style: normal;
        font-weight: 700;
        line-height: 48px;
        letter-spacing: 0;
        text-transform: uppercase;
        color: inherit !important;
        margin-bottom: 32px;
    }

    .text {
        p {
            font-family: "Verdana", "sans-serif";
            font-size: 16px;
            font-style: normal;
            font-weight: 400;
            line-height: 22px;
            letter-spacing: 0;
            margin-bottom: 32px;
        }
    }

    form {
        display: flex;
        flex-wrap: wrap;

        label, input {
            width: 100%;
        }

        label {
            margin-bottom: 8px;
        }

        input {
            margin-bottom: 16px;
        }

        input[type="submit"] {
            margin-top: 16px;

            background-color: #E76F51;
            color: #f2f2f2;
            width: auto;
            align-self: le;
            border: 0;
            padding-top: 12px;
            padding-bottom: 12px;
            padding-left: 24px;
            padding-right: 24px;

            &:hover {
                cursor: pointer;
                background-color: #F4A261;
                color: #222;
            }
        }

    }

}

.signup-list {

    .signup-entry {
        display: flex;
        flex: 1;
        flex-wrap: nowrap;
        margin-bottom: 8px;

        span:nth-child(1) {
            width: 10%;
        }

        span:nth-child(2) {
            width: 40%;
        }

        span:nth-child(3) {
            width: 25%;
        }

        span:nth-child(4) {
            width: 25%;
        }


        @media (max-width: 767px) {
            span:nth-child(2) {
                width: 90%;
            }

            span:nth-child(3), span:nth-child(4) {
                display: none;
            }
        }


        &.top {
            font-weight: bold;
        }

        &:nth-child(odd) {
            background-color: #f2f2f2;
            color: #365052;
        }
    }

    @media (max-width: 767px) {
        margin-bottom: 64px;
    }
}

.timetable {

    padding: 64px;
    background-color: #365052;
    color: #f2f2f2;

    @media (max-width: 767px) {
        padding: 0;
        padding-top: 64px;
        padding-bottom: 64px;
    }

     h2 {
        font-family: "Trade Gothic Bold";
        font-size: 45px;
        font-style: normal;
        font-weight: 700;
        line-height: 48px;
        letter-spacing: 0;
        text-transform: uppercase;
        color: inherit !important;
        margin-bottom: 32px;
    }

    .text {
        p {
            font-family: "Verdana", "sans-serif";
            font-size: 16px;
            font-style: normal;
            font-weight: 400;
            line-height: 22px;
            letter-spacing: 0;
            margin-bottom: 32px;
        }
    }

    .timetable-table {
        display: flex;
        flex-wrap: nowrap;
        flex-direction: row;
        width: 100%;

        @media (max-width: 767px) {
            flex-wrap: wrap;
        }

        .timetable-column {
            width: 100%;

            @media (max-width: 767px) {
                margin-bottom: 32px;
            }

            .timetable-row {
                &.title {
                    font-weight: bold;
                    margin-bottom: 8px;

                    background-color:  #365052 !important;
                    color: #f2f2f2 !important;
                }

                margin-right: 24px;
                padding: 4px;

                display: flex;
                flex-wrap: nowrap;

                span {
                    width: 80%;

                    &:nth-child(1) {
                        width: 20%;
                    }
                }

                &:nth-child(odd) {
                    background-color: #f2f2f2;
                    color: #365052;
                }
            }
        }
    }
}

footer {
    margin-top: 0px;
}

footer .footer-links a {
    &:hover {
        color: #f2f2f2;
    }
}

header nav a {

    color: #f2f2f2;
    background-color: #E76F51;
    border-color: #E76F51;

    &:hover {
        background-color: #F4A261 !important;
        color: #222 !important;
        border-color: transparent;
    }
}

footer h2 {
    color: #E76F51;

    &:hover {
        color: #F4A261;
    }
}

.search-header h1 {
    color: #E76F51;
}

.no-search-results p a {
    color: #E76F51;

    &:hover {
        color: #F4A261;
    }
}

.search-results .search-result h3 {
    color: #E76F51;
}

header nav .search input:focus {
    color: #E76F51;
    outline-color: #E76F51;
}

header nav .search.active svg path {
    fill: #E76F51;
}