@font-face {
    font-family: "Poppins";
    src: url("/fonts/Poppins-Regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: "Poppins";
    src: url("/fonts/Poppins-SemiBold.woff2") format("woff2");
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: "Poppins";
    src: url("/fonts/Poppins-Bold.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: "Poppins";
    src: url("/fonts/Poppins-Italic.woff2") format("woff2");
    font-weight: 400;
    font-style: italic;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
a,
q,
cite {
    font-family: "Poppins", sans-serif;
    font-weight: 400;
    font-style: normal;
    overflow-wrap: break-word;
}

img {
    max-width: 100%;
    height: auto;
}

h1 {
    font-size: 3.2rem;
    font-weight: 700;
}

h2 {
    font-size: 2.4rem;
    font-weight: 500;
}

h3 {
    font-size: 1.8rem;
    font-weight: 400;
}

h4 {
    font-size: 1.6rem;
    font-weight: 400;
}

h5 {
    font-size: 1.4rem;
    font-weight: 700;
}

h6 {
    font-size: 0.8rem;
    font-weight: 500;
}

.font-bold { 
    font-weight: 700;
}

.font-semibold {
    font-weight: 500;
}

fieldset,
.row-fluid {
    display: flex;
    gap: 2rem;
    flex: 1;

    .col-md-1  { flex: calc(1 / 12); }
    .col-md-2  { flex: calc(2 / 12); }
    .col-md-3  { flex: 0.25; }
    .col-md-4  { flex: 0.333; }
    .col-md-5  { flex: calc(5 / 12); }
    .col-md-6  { flex: 0.5; }
    .col-md-7  { flex: calc(7 / 12); }
    .col-md-8  { flex: 0.666; }
    .col-md-9  { flex: 0.75; }
    .col-md-10 { flex: calc(10 / 12); }
    .col-md-11 { flex: calc(11 / 12); }
    .col-md-12 { flex: 1; }
}

section {
    position: relative;
}

@media (max-width: 767px) {
    .grid [umbraco-type] {
        grid-column: 1 / -1;
    }

    fieldset,
    .row-fluid {
        flex-direction: column;
        gap: 1rem;
    }
}

@media (max-width: 639px) {
    h1 { font-size: 2.2rem; }
    h2 { font-size: 1.8rem; }
    h3 { font-size: 1.4rem; }
    h4 { font-size: 1.2rem; }
}

.site.vote-company {
}

.site:not(.site-vote-company) {
    --border-radius: 10px;
    
    #main-header {
        background: var(--color-primary) !important;
        color: var(--color-white) !important;
        height: 112px;
    }

    h1, h2, h3 {
        color: var(--color-primary) !important;
    }

    #desktop-nav ul li:last-child > a {
        border: none;
        background: none !important;
    }

    #desktop-nav ul li a,
    a.button {
        font-weight: 500;
        border-radius: var(--border-radius) !important;

        &:hover {
            color: var(--color-white) !important;
            background: color-mix(in srgb, var(--color-primary) 80%, white) !important;
        }
    }

    #desktop-nav ul li.active > a {
        background: color-mix(in srgb, var(--color-primary) 80%, white) !important;
    }

    footer.bg-black {
        background: #E0E0E0 !important;

        .text-white {
            color: #6A6A6A !important;
        }
    }
}