/* =========================================
   GLOBAL
========================================= */

:root {
    --primary: #8b3a24;
    --secondary: #d99a3d;
    --dark: #222222;
    --light: #f8f5ef;
    --white: #ffffff;
    --border: #e5e5e5;

    --container: 1200px;
}


body {
    background: var(--white);
    color: var(--dark);
    font-family: Arial, Helvetica, sans-serif;
}


.container {
    width: min(
        var(--container),
        calc(100% - 40px)
    );

    margin-left: auto;
    margin-right: auto;
}


.site-main {
    min-height: 500px;
}


/* =========================================
   BUTTON
========================================= */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 13px 26px;

    border-radius: 30px;

    font-size: 15px;
    font-weight: 600;

    transition: all .25s ease;
}


.btn-primary {
    background: var(--primary);
    color: var(--white);
}


.btn-primary:hover {
    background: var(--dark);
}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 767px) {

    .container {
        width: calc(100% - 30px);
    }

}