/* Tofino Regular */
@font-face {
    font-family: "Tofino";
    src: url('../fonts/Tofino/OTF/Tofino-Regular.otf');
    src: url('../fonts/Tofino/OTF/Tofino-Regular.otf') format('opentype'),
        url('../fonts/Tofino/WOFF2/Tofino-Regular.woff2') format('woff2'),
        url('../fonts/Tofino/WOFF/Tofino-Regular.woff') format('woff'),
        url('../fonts/Tofino/TTF/Tofino-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

/* Tofino Bold */
@font-face {
    font-family: "Tofino";
    src: url('../fonts/Tofino/OTF/Tofino-Bold.otf');
    src: url('../fonts/Tofino/OTF/Tofino-Bold.otf') format('opentype'),
        url('../fonts/Tofino/WOFF2/Tofino-Bold.woff2') format('woff2'),
        url('../fonts/Tofino/WOFF/Tofino-Bold.woff') format('woff'),
        url('../fonts/Tofino/TTF/Tofino-Bold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
}

/* Tofino Book */
@font-face {
    font-family: "Tofino";
    src: url('../fonts/Tofino/OTF/Tofino-Book.otf');
    src: url('../fonts/Tofino/OTF/Tofino-Book.otf') format('opentype'),
        url('../fonts/Tofino/WOFF2/Tofino-Book.woff2') format('woff2'),
        url('../fonts/Tofino/WOFF/Tofino-Book.woff') format('woff'),
        url('../fonts/Tofino/TTF/Tofino-Book.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
}

/* Tofino Light */
@font-face {
    font-family: "Tofino";
    src: url('../fonts/Tofino/OTF/Tofino-Light.otf');
    src: url('../fonts/Tofino/OTF/Tofino-Light.otf') format('opentype'),
        url('../fonts/Tofino/WOFF2/Tofino-Light.woff2') format('woff2'),
        url('../fonts/Tofino/WOFF/Tofino-Light.woff') format('woff'),
        url('../fonts/Tofino/TTF/Tofino-Light.ttf') format('truetype');
    font-weight: 200;
    font-style: normal;
}

:root {
    --black: #000;
    --white: #fff;
    --tofino: "Tofino", sans-serif;
    --head-font: var(--tofino);
    --text-font: var(--tofino);
}

* {
    box-sizing: border-box;
}

html {
    font-size: 62.5%;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    width: 100%;
    background-color: var(--black);
    color: var(--white);
    font-family: var(--text-font);
    font-size: 1.6rem;
    margin: 0;
}

main,
footer {
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 65px;
}

h1 {
    left: -99999px;
    position: relative;
    margin: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-size: 1.8rem;
    text-transform: uppercase;
    letter-spacing: 0.3em;
    font-weight: 600;
    padding: 0 0 60px;
    margin-bottom: 0;
}

p {
    font-size: 2.2rem;
    font-weight: 200;
    letter-spacing: .5px;
    line-height: 60px;
    margin: 0;
}

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

a:hover {
    border-bottom: 1px solid var(--white);
}

.hero,
.hero img {
    width: 100%;
    max-width: unset;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

.hero img {
    width: 120%;
    position: relative;
    left: calc(((100vw - 1050px) * .5) - (120vw * .23));
}

.logo {
    width: 139px;
    height: 38px;
    margin-bottom: 80px;
}

main section {
    margin: 100px 0;
}

.columns {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
}

.contact p {
    text-transform: uppercase;
    letter-spacing: 4px;
    font-size: 1.8rem;
}

.contact a.phone:hover {
    border: none;
    cursor: default;
}

.brands a:hover {
    border: none;
}

footer .brands,
footer h3,
footer a {
    font-size: .8rem;
    color: var(--white);
    letter-spacing: 2px;
    text-transform: uppercase;
}

footer h3 {
    margin: 1.2rem 0 1.6rem;
    padding: 0;
}

footer .column div,
footer h3 {
    margin-bottom: 1.6em;
}

footer .brands {
    padding: 80px 0;
    border-width: 2px 0;
    border-color: var(--white);
    border-style: solid;
}

footer .post-footer {
    font-size: 1.8rem;
    padding: 80px 0;
    align-items: baseline;
}

@media only screen and (max-device-width: 1240px) {
    .hero img {
        width: 125%;
        position: relative;
        left: calc(65px - (125vw * .23));
    }
}

@media only screen and (max-device-width: 767px) {

    h1,
    h2 {
        padding: 0 0 43px;
        font-size: 10px;
    }

    p {
        line-height: 2.5;
        font-size: 10px;
        font-weight: 300;
    }

    main section {
        margin: 60px 0;
    }

    .hero {
        overflow: hidden;
    }

    .columns {
        flex-wrap: wrap;
        align-items: flex-start;
    }

    .brands {
        margin-bottom: 0;
    }

    .brands .column {
        width: 50%;
    }

    .brands .column img {
        width: 70%;
        margin-bottom: 60px;
    }

    .column.stori,
    .column.mallin {
        text-align: right;
    }

    .contact {
        margin-top: 0;
    }

    .contact p {
        font-size: 10px;
        letter-spacing: 1.5px;
    }

    footer .brands {
        padding: 40px 0;
        display: block;
    }

    footer .brands,
    footer h3,
    footer .column div,
    footer a {
        font-size: 8px;
        line-height: 2.5em;
        margin: 0;
    }

    footer h3 {
        line-height: 4em;
    }

    footer .brands .column {
        width: 100%;
        padding: 20px 0;
    }

    .copyright {
        font-size: 8px;
    }

    footer .post-footer {
        padding: 40px 0;
    }

    .social img {
        width: 16px;
        position: relative;
        top: 3px;
    }
}

@media only screen and (max-device-width: 455px) {
    .contact p span.divider {
        display: none;
    }
}