@import url('https://fonts.googleapis.com/css?family=Cairo');
@import url('https://fonts.googleapis.com/css2?family=Lato&display=swap');

:root {
    --light-shade: #fafafa;
    --light-accent: #e59e6d;
    --brand: #e40421;
    --brand-02: rgba(228, 4, 33, 0.2);
    --brand-05: rgba(228, 4, 33, 0.5);
    --dark-accent: #998391;
    --dark-shade: #3d3c3c;
    --dark-shade-02: rgba(61, 60, 60, 0.2);
    --dark-shade-05: rgba(61, 60, 60, 0.5);
    --lorem-ipsum: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.";
}

html {
    height: 100%;
    scroll-behavior: smooth;
}

body {
    height: 100%;
    font-family: 'Lato', sans-serif;
    font-size: 16px;
    font-weight: 400;
    background-color: var(--light-shade);
    color: var(--dark-shade);
    margin: 0px;
}

h1, h2, h3, h4, h5, h6 {
    margin-top: 0px;
    margin-bottom: 10px;
    color: var(--dark-shade);
    text-align: center;
}

h1 {
    font-size: 90px;
}

h2 {
    font-size: 55px;
}

h3 {
    font-size: 35px;
}

h4 {
    font-size: 25px;
}

h5 {
    font-size: 20px;
}

a {
    text-decoration: none;
    color: var(--brand);
    transition: color .15s ease-in-out;
    font-weight: 900;
    display: inline-block;
}

a:hover {
    text-decoration: none;
    color: var(--light-accent);
}

td {
    padding: 5px 10px;
    vertical-align: baseline;
}

#full-page-section-container {
    height: 100%;
}

.full-page-section {
    height: 100%;
}

.section {
    width: 100%;
    padding: 100px 0px 100px 0px;
}

.section.brand-02 {
    background-color: var(--brand-02);
}

.section.dark-shade {
    background-color: var(--dark-shade);
}

.section.dark-shade-02 {
    background-color: var(--dark-shade-02);
}

.section.dark-shade h2,
.section.dark-shade h3,
.section.dark-shade h4,
.section.dark-shade p {
    color: var(--light-shade);
}

.section-anchor {
    position: relative;
    top: -150px;
}

.lorem-ipsum::after {
    content: var(--lorem-ipsum);
}

.display-block {
    display: block;
}

.display-inline-block {
    display: inline-block;
}

.display-none {
    display: none;
}

input {
    font-size: inherit;
}

.form-field {
    position: relative;
}

.form-input {
    border: none;
    border-bottom: 1px solid var(--dark-shade);
    outline: none;
    padding: 10px 5px;
    margin: 10px 0;
    background: transparent;
    transition: border-color .15s;
    min-width: 100px;
    width: 100%;
    text-align: center;
}

.form-label {
    position: absolute;
    top: 5px;
    left: 0;
    padding: 10px 0;
    pointer-events: none;
    transition: .5s;
    font-size: inherit;
    width: 100%;
    text-align: center;
}

.form-input:focus ~ label,
.form-input:valid ~ label {
    top: -10px;
    left: 0;
    font-size: 12px;
}

input:focus {
    border-bottom: 1px solid var(--brand);
}

.button {
    background-color: transparent;
    border: 1px solid transparent;
    transition: opacity .15s ease-in-out, color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out, -webkit-box-shadow .15s ease-in-out;
    font-family: 'Lato', sans-serif;
    font-size: 14px;
    color: var(--dark-shade);
    border-color: var(--dark-shade);
    cursor: pointer;
    padding: 10px 12px;
    border-width: 1px;
    border-radius: 5px;
    font-weight: 700;
    -webkit-box-shadow: 0 10px 20px -6px rgb(0 0 0 / 12%);
    -moz-box-shadow: 0 10px 20px -6px rgba(0, 0, 0, .12);
    box-shadow: 0 10px 20px -6px rgb(0 0 0 / 12%);
    display: block;
    text-align: center;
    user-select: none;
    margin: 10px;
    text-decoration: none;
}

.button-red {
    background-color: var(--brand);
    border-color: var(--brand);
    color: var(--light-shade);
}

.button:hover {
    opacity: 0.8;
}

.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--dark-shade);
    opacity: 0;
    z-index: 2;
    transition: 0.3s;
    pointer-events: none;
}

.grid {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: center;
    margin-bottom: 30px;
    gap: 10px;
}

.grid-50 .panel, .grid-50 div {
    flex-basis: 49%;
}

.grid-100 .panel, .grid-100 div {
    flex-basis: 99%;
}

.panel {
    border-radius: 5px;
}

.panel.light-shade {
    background-color: var(--light-shade);
}

.panel.light-shade h2,
.panel.light-shade h3,
.panel.light-shade h4,
.panel.light-shade p {
    color: var(--dark-shade);
}

.panel-content {
    margin: 10px;
    height: 100%;
    text-align: center;
}

.panel-title h4 {
    margin-bottom: 0px;
}

.panel-image {
    max-width: 250px;
    max-height: 250px;
    margin: auto;
}

.panel-image img {
    max-width: 250px;
    height: 150px;
    object-fit: cover;
}

.interactive {
    cursor: pointer;
    background-color: transparent;
    transition: background-color 0.2s ease-in-out;
}

.interactive:hover {
    background-color: var(--brand-02);
}

.selected {
    background-color: var(--brand-02);
}

.modal {
    display: none;
    position: fixed;
    top: 100px;
    left: 0;
    right: 0;
    bottom: 40px;
    margin: auto;
    background-color: var(--light-shade);
    border-radius: 10px;
    width: 80%;
    padding: 20px;
    overflow: auto;
    z-index: 2;
}

.close {
    color: var(--dark-shade);
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover, .close:focus {
    color: var(--brand);
    text-decoration: none;
    cursor: pointer;
}

.container {
    overflow-y: hidden;
    margin: auto;
    text-align: center;
}

.reveal {
    position: relative;
    transform: translateY(150px);
    opacity: 0;
    transition: all 1s ease-in-out;
}

.reveal.active {
    transform: translateY(0);
    opacity: 1;
}

.checkbox-container {
    display: block;
    position: relative;
    padding-left: 35px;
    margin-bottom: 12px;
    cursor: pointer;
    user-select: none;
}

.checkbox-container input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    width: 0;
    height: 0;
}

.checkmark {
    position: absolute;
    top: 0;
    left: 0;
    width: 25px;
    height: 25px;
    background-color: var(--brand-02);
}

.checkbox-container:hover input ~ .checkmark {
    background-color: var(--brand-05);
}

.checkbox-container input:checked ~ .checkmark {
    background-color: var(--brand);
}

.checkbox-container input:disabled ~ .checkmark {
    background-color: var(--dark-shade-02);
}

.checkmark::after {
    content: "";
    position: absolute;
    display: none;
}

.checkbox-container input:checked ~ .checkmark:after {
    display: block;
}

.checkbox-container .checkmark:after {
    left: 9px;
    top: 5px;
    width: 5px;
    height: 10px;
    border: solid var(--light-shade);
    border-width: 0 3px 3px 0;
    transform: rotate(45deg);
}

select {
    width: 100%;
    text-align: center;
    padding: 10px;
    margin: 10px 0 10px 0;
    font-family: 'Lato', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: var(--dark-shade);
}

#sponsors-div img {
    height: 80px;
    object-fit: cover;
    /*filter: grayscale(100);*/
}

#sponsors-div img:hover {
    filter: none;
    transition: all 0.2s ease-in-out;
}

@media screen {
    .navbar {
        background-color: transparent;
        font-weight: 700;
        position: fixed;
        top: 0;
        width: 100%;
        z-index: 2;
        transition: .15s ease-in-out;
    }

    .menu-toggle {
        margin: 25px;
    }

    .navbar-logo {
        display: inline-block;
        text-align: center;
        position: fixed;
        width: 100%;
        left: 0;
        pointer-events: none;
        height: 70px;
        transition: .15s ease-in-out;
    }

    .navbar-logo img {
        max-height: 100%;
    }

    .nav-link {
        color: var(--dark-shade);
        padding: 16px 10px;
        font-weight: 700;
        text-align: center;
        text-decoration: none;
        cursor: pointer;
        transition: color .15s ease-in-out;
    }

    .nav-link:hover {
        color: var(--brand);
    }

    .header {
        position: relative;
        background-color: var(--light-shade);
        width: 100%;
    }

    .full-page-header {
        height: 100%;
    }

    .header-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(180deg, var(--light-shade) 0%, var(--light-shade) 20%, transparent 80%, var(--light-shade) 100%);
        opacity: 1;
        z-index: 1;
    }

    .header-background {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        overflow: hidden;
    }
    
    .header-background img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .header-content {
        position: relative;
        text-align: center;
        padding-top: 100px;
        padding-bottom: 100px;
        z-index: 1;
    }

    .content {
        overflow-y: hidden;
        margin: auto;
    }
}