@font-face {
    font-family: BungeeRegular;
    src: url('../fonts/Bungee-Regular.ttf');
}

@font-face {
    font-family: PoppinsLight;
    src: url('../fonts/Poppins-Light.ttf');
}

@font-face {
    font-family: PoppinsBold;
    src: url('../fonts/Poppins-Bold.ttf');
}

@font-face {
    font-family: PoppinsRegular;
    src: url('../fonts/Poppins-Regular.ttf');
}

h1 {
    font-family: "BungeeRegular";
    text-transform: uppercase;
}

h2 {
    font-family: "PoppinsBold";
    text-transform: uppercase;
}

h3 {
    font-family: "PoppinsBold";
    text-transform: capitalize;
}

.default-color {
    color: #3C3C3C;
}

a, p {
    font-size: 1.1em;
}

a {
    color: #E84E0F;
}

.clickable {
    cursor: pointer;
}

    a.to-link, a.to-link:link, a.to-link:visited, a.to-link:hover, a.to-link:active {
        text-decoration: none;
        color: white;
    }

.button-style {
    font-weight: bold;
    font-family: 'PoppinsBold';
    text-transform: uppercase;
    font-weight: bold;
    border-radius: 20px;
    padding: 10px;
    padding-left: 15px;
    padding-right: 15px;
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
    background-color: white;
    border-color: black;
}

[type="search"] {
    -webkit-appearance: textfield;
}

.button-style:hover {
    background-color: white;
    color: black;
}

.auto-justify {
    text-align: justify;
}

.first-color {
    color: #E84E0F;   
}

.bg-first-color {
    background-color: #E84E0F;
}

.second-color {
    color: #3C3C3C;
}

.bg-second-color {
    background-color: #3C3C3C;
}

.third-color {
    color: #F1EEDD;
}

.bg-third-color {
    background-color: #F1EEDD;
}

.bg-fourth-color {
    background-color: white;
}

.size-h1 {
    font-size: 35px;
}

.size-h2 {
    font-size: 3em;
    font-weight: bold;
    font-family: 'PoppinsBold';
    text-transform: uppercase;
}

.with-chevron h2:before {
    content: '< '
}

.with-chevron h2:after {
    content: ' >'
}

@media (max-width: 576px) {
    .size-h2 {
        font-size: 2em;
    }
}

    .size-h3 {
        font-size: 22px;
    }

    .size-default {
        font-size: 18px;
    }

    .no-padding-hz {
        padding-left: 0px;
        padding-right: 0px;
    }

    html {
        font-size: 14px;
    }

    .default-bg {
        background-color: white;
    }

    .altern-bg {
        background-color: #F1EEDD;
    }

    @media (min-width: 768px) {
        html {
            font-size: 16px;
        }
    }

    .btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
        box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
    }

    html {
        position: relative;
        min-height: 100%;
    }

    body {
        margin-bottom: 60px;
    }

    button.cta, a.cta {
        background-color: rgb(205 77 12);
        color: white;
    }

        button.cta:hover, a.cta:hover, button.cta:active, a.cta:active {
            transition: .3s;
            background-color: #ffc107;
            color: black;
            font-weight: bold;
        }

    .accordion-button:focus {
        background-color: white;
        border-color: white;
        box-shadow: initial
    }

    .accordion-button:not(.collapsed) {
        border-color: white;
        background-color: white;
        color: black;
    }

    a.cta:focus, button.cta:focus {
        box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem black;
    }

    .padding-center {
        padding-top: 70vh;
    }

    .centered {
        position: center;
        top: 50%;
        left: 50%;
    }

    .debug {
        border: 5px solid red;
    }

    .slanted-edge {
        --p: 70px;
        aspect-ratio: 1;
        clip-path: polygon(0 var(--p),100% 0,100% 100%,0 100%);
    }