/* ================================================== */
/* Global styles                                      */
/* ================================================== */
:root {
    --gray: #505152;
	--black: #050505;
	--white: #fafafa;

    --logo-red: #e31f25;
    --logo-gray: #2b2b2a;

    --blue: #1a1a2e;
    --beige: #eae2d8;
    --brown: #60452D;
    --purple: #8167a9;
    --orange: #f44336;
    --burgundy: #8b3835;

    --dark-brown: #493b3b;
    --dark-burgundy: #371818;
    --light-beige: #f9f6f3;
	--light-gray: #eeeef0;
    
    --brown-from-beige: hsl(from var(--beige) calc(h - 5) calc(s * 1.2) calc(l * 0.4));

	--bg: light-dark(var(--beige), var(--brown));
	--fg: light-dark(var(--black), var(--white));
	--bg: var(--white);
	--fg: var(--black);

	color-scheme: only light;
}

html {
    box-sizing: border-box;
    /*font-size: 62.5%;*/
    /*font-size: 85%;*/
}

*,
*:before,
*:after {
    box-sizing: inherit;
}

a {
    color: var(--burgundy);
    text-decoration: none;
}

a:hover {
    color: var(--dark-burgundy);
}

body {
    margin: 0;
    background-color: var(--bg);
}

body,
input,
textarea {
    /*font-size: 1.4rem;*/
    font-family: "Helvetica Neue", Helvetica,
        Arial, sans-serif;
    color: var(--fg);
}

img {
    border: none;
}

figure {
    margin: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin-top: 0;
    margin-bottom: .5rem;
    font-weight: normal;
    font-family: 'Tangerine';
    line-height: 1.2;
    color: var(--bs-heading-color);
}

h1 {
    font-size: calc(1.375rem + 1.5vw);
}

h2 {
    font-size: calc(1.325rem + .9vw);
    font-weight: bold;
}

p {
    line-height: 2rem;
}

ul {
    padding: 0;
}

hr:not([size]) {
    border: 0;
    height: 3px;
    background: #787878;
}

dt {
    font-weight: initial;
}

button {
    background-color: initial;
}

/* -------------------------------------------------- */
/* TEMP                                               */
/* -------------------------------------------------- */
h1 {
    font-family: 'Tangerine', serif;
    font-size: calc(1.875rem + 3.5vw);
    font-weight: 600;
    color: rgba(5, 5, 5, 0.75);
}

h2 {
    font-size: 60px;
}

h3 {
    font-size: 40px;
    font-weight: bold;
}

.hero__image-container {
    position: relative;
    padding: 351px 0;
    background-size: cover;
    background-position: 45%;
}

.divider {
    background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDBweCIgdmlld0JveD0iMCAwIDEyODAgMTQwIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxnIGZpbGw9IiNmY2ZjZmMiPjxwYXRoIGQ9Ik0zMjAgMjhDMTYwIDI4IDgwIDQ5IDAgNzBWMGgxMjgwdjcwYy04MCAyMS0xNjAgNDItMzIwIDQyLTMyMCAwLTMyMC04NC02NDAtODR6Ii8+PC9nPjwvc3ZnPg==);
    background-size: 100% 100px;
    top: 0;
    height: 100px;

    position: absolute;
    pointer-events: none;
    width: 100%;
    left: 0;
    right: 0;
}
.divider2 {
    background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwJSIgaGVpZ2h0PSI2MHB4IiB2aWV3Qm94PSIwIDAgMTI4MCAxNDAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGcgZmlsbD0iI2ZjZmNmYyI+PHBhdGggZD0iTTMyMCAyOGMzMjAgMCAzMjAgODQgNjQwIDg0IDE2MCAwIDI0MC0yMSAzMjAtNDJ2NzBIMFY3MGM4MC0yMSAxNjAtNDIgMzIwLTQyeiIvPjwvZz48L3N2Zz4=);
    background-size: 100% 60px;
    bottom: 0;
    height: 60px;
    z-index: 1;
    position: absolute;
    pointer-events: none;
    width: 100%;
    left: 0;
    right: 0;
}


.d-inline-flex {
    display: inline-flex !important;
}
.align-items-center {
    align-items: center !important;
}

[type=button]:not(:disabled), [type=reset]:not(:disabled), [type=submit]:not(:disabled), button:not(:disabled) {
    cursor: pointer;
}

button.btn.btn-primary {
    padding: 10px 20px;
    margin-bottom: 1rem;
    font-size: 1.1rem;
    font-weight: bold;
    color: #fafafa;
    fill: #fafafa;
    background-color: #371818;
    border: 1px solid #371818;
    border-radius: 5px;
}

a>button.btn.btn-primary {
    margin-top: 1rem;
    background-color: #8b3835;
    border: 1px solid #8b3835;
}
a>button.btn.btn-primary:hover {
    background-color: #fafafa;
    color: #8b3835;
    fill: #8b3835;
}

button.btn.btn-primary>span {
    margin: .3rem .3rem auto;
    font-size: 0.8rem;
    font-family: 'Untitled1';
}

/* -------------------------------------------------- */
/* MAIN                                               */
/* -------------------------------------------------- */
main>section {
    padding: 100px 0 50px 0;
    /* background-color: var(--bg);
    color: var(--fg); */
}

/* -------------------------------------------------- */
/* UTILITIES                                          */
/* -------------------------------------------------- */
.section-header,
.section-line,
.header-line {
    text-align: center;
    margin: 20px auto;
    text-transform: uppercase;
    letter-spacing: 6px;
}

.section-line,
.header-line {
    width: 170px;
    height: 2px;
    background: var(--fg);
    margin-bottom: 50px;
}

.section-line {
    width: 80dvw;
}

.featurette-divider {
    margin: 5rem 2rem;
}

.rounded-circle {
    border-radius: 50%;
}

.mx-auto {
    margin-right: auto !important;
    margin-left: auto !important;
}

.video, .img {
    position: relative;
    display: block;
    --w: 1;
    --h: 1;
    aspect-ratio: var(--w) / var(--h);
    border-radius: var(--rounded);
}

.img img, .video iframe {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: 0;
    border-radius: var(--rounded);
}

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

/* -------------------------------------------------- */
/* DARK                                               */
/* -------------------------------------------------- */
.dark {
    background-color: var(--brown);
    color: var(--white);
    

    strong {
        color: var(--light-beige);
    }

    .header-line {
        background: var(--white);
    }

    h1 {
        color: var(--white);
    }

    a {
        color: var(--orange);
    }

    a:hover {
        color: var(--burgundy);
    }

    button:hover {
        color: var(--beige) !important;
        fill: var(--beige) !important;
        background-color: var(--dark-burgundy) !important;
        border: 1px solid var(--beige) !important;
    }
}