/** FONTS **/

/**
@font-face {
    font-family: "RoslindaleCondensedBold";
    src: url("https://ucfonts.s3-us-west-1.amazonaws.com/ucfonts1910/RoslindaleDisplayCondensed-Bold.eot");
    src: url("https://ucfonts.s3-us-west-1.amazonaws.com/ucfonts1910/RoslindaleDisplayCondensed-Bold.woff") format("woff"),
    url("https://ucfonts.s3-us-west-1.amazonaws.com/ucfonts1910/RoslindaleDisplayCondensed-Bold.otf") format("opentype");
}

@font-face {
    font-family: "RoslindaleCondensedRegular";
    src: url("https://ucfonts.s3-us-west-1.amazonaws.com/ucfonts1910/RoslindaleDisplayCondensed-Regular.eot");
    src: url("https://ucfonts.s3-us-west-1.amazonaws.com/ucfonts1910/RoslindaleDisplayCondensed-Regular.woff") format("woff"),
    url("https://ucfonts.s3-us-west-1.amazonaws.com/ucfonts1910/RoslindaleDisplayCondensed-Regular.otf") format("opentype");
}

@font-face {
    font-family: "Roslindale";
    src: url("https://ucfonts.s3-us-west-1.amazonaws.com/ucfonts1910/RoslindaleText-Regular.eot");
    src: url("https://ucfonts.s3-us-west-1.amazonaws.com/ucfonts1910/RoslindaleText-Regular.woff") format("woff"),
    url("https://ucfonts.s3-us-west-1.amazonaws.com/ucfonts1910/RoslindaleText-Regular.otf") format("opentype");
}

@font-face {
    font-family: "Trade";
    src: url("https://ucfonts.s3-us-west-1.amazonaws.com/ucfonts1910/3A7ECF_0_0.eot");
    src: url("https://ucfonts.s3-us-west-1.amazonaws.com/ucfonts1910/3A7ECF_0_0.woff") format("woff"),
    url("https://ucfonts.s3-us-west-1.amazonaws.com/ucfonts1910/TradeGothicLTStd.otf") format("opentype");
}

@font-face {
    font-family: "TradeBold";
    src: url("https://ucfonts.s3-us-west-1.amazonaws.com/ucfonts1910/3A7ECF_1_0.eot");
    src: url("https://ucfonts.s3-us-west-1.amazonaws.com/ucfonts1910/3A7ECF_1_0.woff") format("woff"),
    url("https://ucfonts.s3-us-west-1.amazonaws.com/ucfonts1910/TradeGothicLTStd-Bold.otf") format("opentype");
}

@font-face {
    font-family: "TradeBold2";
    src: url("https://ucfonts.s3-us-west-1.amazonaws.com/ucfonts1910/3A7ECF_2_0.eot");
    src: url("https://ucfonts.s3-us-west-1.amazonaws.com/ucfonts1910/3A7ECF_2_0.woff") format("woff"),
    url("https://ucfonts.s3-us-west-1.amazonaws.com/ucfonts1910/TradeGothicLTStd-Bd2.otf") format("opentype");
}

**/

@font-face {
    font-family: "TradeGothicLTStd";
    src: url("../fonts/TradeGothicLTStd.otf") format("opentype");
    font-display: swap;
}

@font-face {
    font-family: "TradeGothicLTStd-Bold";
    src: url("../fonts/TradeGothicLTStd-Bold.otf") format("opentype");
    font-display: swap;
}

@font-face {
    font-family: "TradeGothicLTStd-Bd2";
    src: url("../fonts/TradeGothicLTStd-Bd2.otf") format("opentype");
    font-display: swap;
}

@font-face {
    font-family: "TradeGothicLTStd-Cn18";
    src: url("../fonts/TradeGothicLTStd-Cn18.otf") format("opentype");
    font-display: swap;
}

@font-face {
    font-family: "TradeGothicLTStd-BdCn20";
    src: url("../fonts/TradeGothicLTStd-BdCn20.otf") format("opentype");
    font-display: swap;
}

@font-face {
    font-family: "Lucida Grande";
    src: url("../fonts/LucidaGrande.ttf");
    font-display: swap;
}

@font-face {
    font-family: "RoslindaleCondensedBold";
    src: url("../fonts/RoslindaleDisplayCondensed-Bold.eot");
    src: url("../fonts/RoslindaleDisplayCondensed-Bold.woff") format("woff");
    font-display: swap;
}

@font-face {
    font-family: "RoslindaleCondensedRegular";
    src: url("../fonts/RoslindaleDisplayCondensed-Regular.eot");
    src: url("../fonts/RoslindaleDisplayCondensed-Regular.woff") format("woff");
    font-display: swap;
}

@font-face {
    font-family: "Roslindale";
    src: url("../fonts/RoslindaleText-Regular.eot");
    src: url("../fonts/RoslindaleText-Regular.woff") format("woff"),
    url("../fonts/RoslindaleText-Regular.woff2") format("woff2");
    font-display: swap;
}

/** MAIN **/

/** @media only screen and (max-width: 1200px) { */
/** @media only screen and (max-width: 900px) {  */
/** @media only screen and (max-width: 760px) {  */

html {
    background: #fbf7f0;
    margin: 0;
    padding: 0;
    font-family: 'Roslindale', sans-serif;
    font-size: 60%;
}

body {
    padding: 0;
    margin: 0;
}

textarea:focus, input:focus {
    outline: none;
}

/** UTILITIES **/

.mobi {
    display: none;
}

.desk {
    display: block;
}

.play-button {
    height: 100px;
    width: 100px;
    margin-bottom: 2rem;
    cursor: pointer;
}

/** TYPOGRAPHY **/

h1 {
    font-family: 'RoslindaleCondensedBold', sans-serif;
    font-size: 7rem;
    margin: 0;
    padding: 0;
}

h2 {
    font-size: 4.6rem;
    font-family: 'RoslindaleCondensedBold', sans-serif;
    font-weight: 100;
    color: #231f20;
    line-height: 4.5rem;
    margin: 0;
    padding: 0;
}

h2 span {
    font-family: 'Trade', sans-serif;
}

h3 {
    font-size: 3.4rem;
    font-family: 'RoslindaleCondensedBold', sans-serif;
    font-weight: 100;
    color: #231f20;
    line-height: 4.5rem;
    margin: 0;
    padding: 0;
}

p {
    font-family: 'RoslindaleCondensedRegular', sans-serif;
    font-size: 3.2rem;
    line-height: 3.6rem;
    letter-spacing: 0.1rem;
}

a.link--black {
    color: black;
    text-decoration: none;
}

a.link--brown {
    color: #AFA596;
    text-decoration: none;
}

a.link--orange {
    color: #C84228;
    text-decoration: none;
}

a.link--bold {
    font-family: "TradeGothicLTStd-BdCn20", sans-serif;
}

/** FORMS **/

form {
    margin-top: 0;
}

/** HEADER **/

.header {
    box-sizing: border-box;
    position: fixed;
    width: 100%;
    padding: 6rem 10rem;
    display: grid;
    grid-template-columns: min-content 1fr;
    z-index: 1000;
    transition: all .2s ease-in;
}

.header__logo {
    font-size: 2.4rem;
    font-family: "TradeGothicLTStd-Cn18", sans-serif;
    font-stretch: condensed;
    text-transform: uppercase;
    font-weight: 400;
}

.header__nav ul {
    margin: 0;
    text-align: right;
    list-style: none;
}

.header__nav li {
    display: inline;
    font-size: 2.4rem;
    font-family: "TradeGothicLTStd-Cn18", sans-serif;
    font-stretch: condensed;
    text-transform: uppercase;
}

.header__nav li:not(:last-child) {
    margin-right: 3rem;
}

.header__arrow {
    display: inline;
    font-size: 2.4rem;
    font-family: "Lucida Grande", sans-serif;
}

.header--sticky {
    padding: 4rem 10rem;
    background-color: #FBF7F1;
}

/** FOOTER **/

.footer {
    display: grid;
    grid-template-columns: max-content 1fr 1fr 1fr;
    padding: 8rem 10rem;
}

.footer__logo {
    font-size: 4rem;
    font-family: "TradeGothicLTStd-Cn18", sans-serif;
    font-stretch: condensed;
    letter-spacing: 0.1rem;
    text-transform: uppercase;
    margin-bottom: 4rem;
}

.footer p {
    font-size: 2rem;
    line-height: 2.2rem;
    font-family: 'TradeGothicLTStd-Cn18', sans-serif;
    font-stretch: condensed;
}

.footer__nav {
    justify-self: end;
    font-size: 2.4rem;
    font-family: 'TradeGothicLTStd-Cn18', sans-serif;
    font-stretch: condensed;
    text-transform: uppercase;
}

.footer__nav ul {
    margin: 0;
    list-style: none;
}

.footer__nav li {
    margin-bottom: 20px;
}

.footer__arrow {
    font-family: "Lucida Grande", sans-serif;
}

.footer__icons {
    justify-self: end;
}

.footer__icon {
    cursor: pointer;
}

.footer__icon:not(:first-child) {
    margin-left: 1.5rem;
}

/** MODULES **/

.hero {
    position: relative;
    height: 77.5vh;
    background-color: #FBF7F1;
    overflow: hidden;
}

.hero__video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 10;
    min-height: 77.5vh;
    object-fit: cover;
    object-position: center;
}

.hero__header {
    position: absolute;
    width: max-content;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 100;
}

.cta {
    display: grid;
    grid-template-columns: min-content 4fr 4fr;
    align-items: center;
    height: 22.5vh;
}

.cta__image {
    height: 22.5vh;
}

.cta__text {
    margin-left: 4rem;
}

.cta__text h3 {
    font-family: 'RoslindaleCondensedBold', sans-serif;
    font-weight: 900;
}

.cta__text span {
    font-family: 'RoslindaleCondensedRegular', sans-serif;
    font-size: 2.6rem;
    letter-spacing: 0.1rem;
    font-weight: 600;
}

.cta__input {
    display: flex;
    justify-self: end;
    margin-right: 5rem;
}

.cta__email {
    font-size: 1.8rem;
    font-family: 'TradeGothicLTStd', sans-serif;
    padding: 20px 25px;
    border-radius: 5px 0 0 5px;
    border: 1px #DBDBDB solid;
    width: 250px;
}

.cta__email::placeholder {
    font-size: 1.8rem;
    font-family: 'TradeGothicLTStd-Cn18', sans-serif;
    letter-spacing: 0.1rem;
    color: #A7A5A6;
}

.cta__submit {
    padding: 1.5rem 3rem 1rem 3rem;
    font-size: 1.8rem;
    font-family: 'TradeGothicLTStd-Bold', sans-serif;
    letter-spacing: 0.1rem;
    background-color: #C84228;
    color: white;
    border: 0;
    border-radius: 0 5px 5px 0;
    cursor: pointer;
    transition: all .1s ease-in;
    -webkit-appearance: none;
    -moz-appearance:    none;
    appearance:         none;
}

.cta__submit:hover {
    background-color: #af3927;
}

.section {
    padding: 15rem 0;
}

.information {
    background-color: #FBF7F1;
    padding-left: 10rem;
}

.information p:not(:last-child) {
    margin-bottom: 8rem;
}

.information__alternate {
    background-color: #EFEAE3;
}

.keywords {
    background-image: url(../images/outlaw-gold.svg);
    background-position: right;
    background-repeat: no-repeat;
    margin-top: 5rem;
    padding-left: 10rem;
    height: 550px;
}

.keywords h2 {
    margin-bottom: 5rem;
}

.keywords p {
    margin-bottom: 4.2rem;
    margin-block-start: 0;
}

.keywords__link {
    font-family: "TradeGothicLTStd-BdCn20", sans-serif;
    font-size: 2.2rem;
    font-weight: 600;
    text-transform: uppercase;
}

/** RESPONSIVENESS **/

@media only screen and (max-width: 1200px) {
    html {
        font-size: 55%;
    }

    .hero {
        height: 80vh;
    }

    .hero__video {
        min-height: 80vh;
    }

    .cta {
        height: 20vh;
    }

    .cta__image {
        height: 20vh;
    }

    .cta__text {
        margin-left: 4rem;
    }

    .cta__text h2 {
        font-size: 2rem;
    }

    .cta__text span {
        font-size: 1.8rem;
    }

    .cta__input {
        margin-right: 4rem;
    }

    .cta__email {
        font-size: 1.8rem;
        padding: 1.5rem 2rem;
        width: 225px;
    }

    .cta__submit {
        font-size: 1.8rem;
        padding: 1.5rem 2rem;
    }

    .keywords {
        background-image: none;
        padding-left: 0;
        height: auto;
        text-align: center;
    }

    .keywords p {
        width: 90vw;
        margin: 0 auto;
        text-align: center;
    }

    .keywords .link--orange {
        margin-top: 20px;
    }

    .keywords__image {
        width: 100%;
    }
}

@media only screen and (max-width: 1024px) {
    a.link--orange, a.link--black, a.link--brown {
        font-size: 1.8rem;
    }

    .header__logo {
        font-size: 1.8rem;
    }

    .header__nav {
        font-size: 1.6rem;
    }

    .cta__text h3 {
        font-size: 2.8rem;
    }

    .cta__text span {
        font-size: 1.4rem;
    }
}

@media only screen and (max-width: 900px) {
    html {
        font-size: 50%;
    }

    .header {
        padding: 3rem 4rem;
    }

    .cta__email {
        font-size: 1.8rem;
        padding: 1.5rem 2rem;
        width: 150px;
    }

    .cta__submit {
        font-size: 1.8rem;
        padding: 1.5rem 2rem;
    }
}

@media only screen and (max-width: 760px) {
    html {
        font-size: 60%;
    }

    .desk {
        display: none;
    }

    .mobi {
        display: block;
    }

    h2 {
        font-size: 2.6rem;
    }

    p {
        font-size: 2rem;
        line-height: 2rem;
    }

    .header {
        padding: 6rem 4rem;
        grid-template-columns: min-content 1fr;
    }

    .header__mobile {
        position: relative;
        width: 30px;
        height: 5px;
        background-color: black;
        margin: .5rem 0 0 0;
    }

    .header__mobile::after {
        content: '';
        position: absolute;
        top: 10px;
        left: 0;
        background-color: black;
        width: 15px;
        height: 5px;
    }

    .header__logo {
        text-align: right;
        font-size: 2.2rem;
    }

    .header--sticky {
        padding: 4rem;
    }

    .footer {
        width: 100%;
        grid-template-columns: 1fr;
        text-align: center;
        padding: 5rem 0;
    }

    .footer__logo {
        font-size: 2.4rem;
        margin-bottom: 0;
    }

    .footer__info p {
        margin-top: 0;
        margin-bottom: 4rem;
        font-size: 1.6rem;
    }

    .footer__icons {
        justify-self: center;
    }

    .footer__icon {
        width: 50px;
    }

    .footer__icon:not(:first-child) {
        margin-left: 5rem;
    }

    .hero {
        height: 60vh;
    }

    .hero__header {
        font-size: 6rem;
        line-height: 5rem;
        text-align: right;
    }

    .cta {
        display: block;
        height: 40vh;
        padding: 0 4rem;
    }

    .cta__text {
        margin-top: 4rem;
        margin-bottom: 4rem;
        justify-self: center;
        margin-left: 0;
    }

    .cta__text h3 {
        font-size: 2.8rem;
    }

    .cta__text span {
        font-size: 2.2rem;
    }

    .cta__input {
        display: block;
        justify-self: normal;
        text-align: center;
        margin-right: 0;
    }

    .cta__email {
        display: block;
        width: 100%;
        border-radius: 5px;
        margin: 0 auto;
        box-sizing: border-box;
    }

    .cta__submit {
        width: 100%;
        border-radius: 5px;
        margin: 2rem auto;
    }

    .section {
        padding: 0;
    }

    .information {
        padding: 10rem 4rem;
        text-align: center;
    }

    .information p:not(:last-child) {
        margin-bottom: 6rem;
    }

    .keywords {
        background-image: none;
        padding-left: 0;
        height: auto;
        text-align: center;
        margin: 10rem 0 5rem 0;
    }

    .keywords h2 {
        font-size: 3rem;
        margin-top: 5rem;
    }

    .keywords p {
        width: 90vw;
        margin: 3rem auto;
        text-align: center;
        font-size: 2.6rem;
        line-height: 3rem;
    }

    .keywords .link--orange {
        margin-top: 5rem;
    }

    .keywords__image {
        width: 100%;
    }
}

@media only screen and (max-width: 500px) {
    html {
        font-size: 50%;
    }

    .footer__icon:not(:first-child) {
        margin-left: 2.5rem;
    }

    .keywords p {
        font-size: 2.2rem;
        line-height: 2.6rem;
    }
}

@media only screen and (max-width: 400px) {
    html {
        font-size: 50%;
    }

    .footer__icon:not(:first-child) {
        margin-left: 2.5rem;
    }
}