@font-face {
    font-family: "Legend-M54";
    src: url(../font/font.ttf)
}

body {
    background: #000;
    color: #fff;
    margin: 0;
    font-size: 24px;
    font-family: "Roboto", sans-serif;
    font-weight: 100
}

@media (min-width:768px) {
    body {
        font-size: calc(20px + 1.2vw);
        font-family: "Oswald", sans-serif
    }
}

@media (min-width:1200px) {
    body {
        font-size: calc(18px + 0.2vw);
        font-family: "Oswald", sans-serif;
        font-weight: 200
    }
}

.hide {
    display: none !important
}

header nav {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    padding: 10px 40px
}

header nav div img {
    width: 100%;
}

@media (min-width:768px) {
    header nav div img {
        width: 100%;
    }
}

@media (min-width:1200px) {
    header nav .nav-links-n-logo {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        width: 100%
    }
}

@media (max-width:1199px) {
    header nav .nav-links-n-logo .nav-links {
        display: none
    }
}

@media (min-width:1200px) {
    header nav .nav-links-n-logo .nav-links {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: space-evenly;
        -ms-flex-pack: space-evenly;
        justify-content: space-evenly;
        width: 100%;
        LIST-STYLE: NONE;
        color: #fff
    }
}

header nav .nav-links-n-logo .nav-links a {
    text-decoration: none;
    font-family: "Legend-M54", sans-serif;
    color: #fff;
    font-size: calc(20px + 1.3vw);
    -webkit-transition: 0.3s ease-in-out all;
    transition: 0.3s ease-in-out all
}

header nav .nav-links-n-logo .nav-links a:hover {
    color: #C09B31
}

header nav .menu-btn {
    display: block;
    height: auto;
    background: transparent;
    border: none;
    outline: none
}

@media (min-width:1200px) {
    header nav .menu-btn {
        display: none
    }
}

header nav .menu-btn .hamburger {
    height: 24px;
    width: 60%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    text-align: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin: 0 auto 3px
}

header nav .menu-btn .hamburger .line {
    height: 4px;
    width: 100%;
    display: block;
    background: #fff
}

header nav .menu-btn .menu-text {
    color: #fff;
    display: block;
    font-size: 14px;
    text-transform: uppercase;
    font-family: "Oswald", sans-serif;
    font-weight: 400;
    letter-spacing: 5px
}

.hero-shot {
    position: relative
}

@media (min-width:787px) {
    .hero-shot {
        height: 76vw
    }
}

.hero-shot img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover
}

.hero-shot .hero-overlay {
    width: 30%;
    position: absolute;
    top: 30%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    -o-object-fit: contain;
    object-fit: contain
}

@media (max-width:767px) {
    .hero-shot .hero-overlay {
        display: none
    }
}

.hero-shot h1 {
    position: absolute;
    bottom: 30px;
    width: 95%;
    margin-left: 5%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    text-transform: uppercase;
    font-size: 33.6px;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    font-family: "Legend-M54", sans-serif;
    font-weight: 100;
    letter-spacing: 11px;
    background: black
}

@media (min-width:768px) {
    .hero-shot h1 {
        position: absolute;
        bottom: 10%;
        font-weight: 100;
        letter-spacing: 11px;
        background: black;
        font-size: 10vw;
        width: 100%;
        margin-left: 0;
        padding: 0px 0 0 15%
    }
}

@media (min-width:1200px) {
    .hero-shot h1 {
        bottom: 200px
    }
}

.hero-shot h1 .last-h1 {
    margin-left: 20px;
    padding: 24px;
    display: block;
    background: #C09B31;
    width: 100%;
    color: #000
}

h2 {
    font-size: 40px;
    margin-bottom: 0;
    text-transform: uppercase;
    font-family: "Legend-M54", sans-serif;
    font-weight: 100
}

@media (min-width:768px) {
    h2 {
        font-family: "Oswald", sans-serif
    }
}

h2 .second {
    display: block;
    font-size: 60px
}

@media (min-width:768px) {
    h2 .second {
        display: inline;
        font-size: 42px
    }
}

.hpt {
    width: 80%;
    margin: auto
}

@media (min-width:768px) {
    .hpt {
        margin-top: -177px;
        z-index: 12;
        position: relative;
        background: #000;
        padding: 30px 10%
    }
}

@media (min-width:1200px) {
    .hpt {
        width: 60%;
        margin-top: -200px
    }
}

@media (min-width:768px) {
    .hpt h2 {
        margin-top: 0
    }
}

.hpt p {
    font-size: 20px;
    line-height: 1.5;
    font-weight: 300;
    margin-top: 1px;
    padding-bottom: 16px
}

.featured-product {
    width: 80%;
    margin: auto
}

.featured-product h2 {
    text-align: center
}

@media (min-width:768px) {
    .featured-product h2 {
        text-align: right
    }
}

@media (max-width:767px) {
    .featured-product div {
        display: -ms-grid;
        display: grid;
        grid-gap: 30px;
        grid-template-areas: "a" "b" "c" "d" "e" "f"
    }
}

@media (min-width:768px) {
    .featured-product div {
        display: -ms-grid;
        display: grid;
        grid-gap: 30px;
        grid-template-areas: "a b" "c d" "e e" "f f"
    }
}

@media (min-width:1200px) {
    .featured-product div {
        grid-template-areas: "a b c d" "e e e e" "f f f f"
    }
}

.featured-product div .tincture-link {
    grid-area: a
}

@media (max-width:767px) {
    .featured-product div .tincture-link {
        height: 56vw
    }
}

.featured-product div .preroll-link {
    grid-area: b
}

@media (max-width:767px) {
    .featured-product div .preroll-link {
        height: 56vw
    }
}

.featured-product div .edible-link {
    grid-area: c
}

@media (max-width:767px) {
    .featured-product div .edible-link {
        height: 56vw
    }
}

.featured-product div .extracts-link {
    grid-area: d
}

@media (max-width:767px) {
    .featured-product div .extracts-link {
        height: 56vw
    }
}

.featured-product div .pick-up-link {
    grid-area: e
}

@media (max-width:767px) {
    .featured-product div .pick-up-link {
        height: 56vw
    }
}

.featured-product div .our-grow-link {
    grid-area: f
}

@media (max-width:767px) {
    .featured-product div .our-grow-link {
        height: 56vw
    }
}

.featured-product div a {
    position: relative;
    background-color: transparent;
    border: none;
    outline: none;
    margin: 20px 0 0;
    text-decoration: none
}

.featured-product div a img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover
}

.featured-product div a span {
    position: absolute;
    bottom: 20px;
    right: -6px;
    font-size: 26px;
    padding: 11px;
    display: block;
    width: 80%;
    text-align: center;
    background-color: #fff;
    text-transform: uppercase;
    font-weight: 100;
    font-family: "Oswald", sans-serif;
    letter-spacing: 10px;
    color: #000
}

@media (min-width:1200px) {
    .featured-product div a span {
        font-size: calc(16px + 0.3vw)
    }
}

.featured-product div a.top-right.pick-up-link {
    height: 21vw
}

@media (max-width:767px) {
    .featured-product div a.top-right.pick-up-link {
        height: 56vw
    }
}

.featured-product div a.top-right.our-grow-link {
    height: 41vw
}

@media (max-width:767px) {
    .featured-product div a.top-right.our-grow-link {
        height: 56vw
    }
}

.featured-product div a.top-right span {
    top: 20px;
    bottom: initial;
    left: -6px;
    right: initial
}

@media (min-width:768px) {
    .featured-product div a.top-right span {
        width: auto;
        padding: 11px 50px
    }
}

@media (min-width:768px) {
    .featured-product div a.top-right {
        height: 30vw
    }
}

@media (min-width:768px) {
    .featured-product div a.top-right img {
        width: 100%;
        height: 100%;
        -o-object-fit: cover;
        object-fit: cover
    }
}

@media (min-width:768px) {
    .featured-product h2 {
        margin-top: 0
    }
}

.featured-product>p {
    font-family: "Oswald", sans-serif;
    font-weight: 100;
    text-transform: capitalize;
    font-size: 29px;
    margin: 36px 0 92px
}

@media (min-width:1200px) {
    .featured-product>p {
        text-align: center;
        font-size: calc(18px + 1.6vw)
    }
}

@media only screen and (max-width:767px) {
    .aparrel {
        margin-top: 30px;
        margin-bottom: 60px
    }
}

@media (min-width:768px) {
    .aparrel {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: reverse;
        -ms-flex-direction: row-reverse;
        flex-direction: row-reverse;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center
    }
}

@media only screen and (max-width:767px) {
    .aparrel .apparel-header {
        text-align: center
    }
}

@media (min-width:768px) {
    .aparrel .apparel-header {
        width: 60%;
        margin-left: 3%
    }
}

.aparrel h2 {
    margin-bottom: 0;
    line-height: 1;
    color: #C09B31;
    font-size: 56px;
    width: 80%;
    margin: 0 auto 0
}

@media only screen and (min-width:768px) {
    .aparrel h2 {
        font-family: "Legend-M54";
        width: 100%;
        font-size: 80px
    }
}

@media (min-width:1200px) {
    .aparrel h2 {
        font-size: calc(36px + 8.2vw)
    }
}

.aparrel h3 {
    font-family: "Oswald", sans-serif;
    font-size: 19px;
    font-weight: 100;
    margin: 0 0 44px;
    width: 80%;
    margin: 0 auto 3%;
    text-transform: uppercase;
    letter-spacing: 6px
}

@media only screen and (min-width:768px) {
    .aparrel h3 {
        width: 100%;
        font-size: 14.2px
    }
}

@media (min-width:1200px) {
    .aparrel h3 {
        font-size: 25.2px
    }
}

.aparrel img {
    margin-bottom: 30px;
    width: 100%
}

@media only screen and (max-width:767px) {
    .aparrel img {
        width: 50%;
        margin: 40px auto 40px;
        display: block
    }
}

@media only screen and (min-width:768px) {
    .aparrel img {
        width: 15%;
        -webkit-box-ordinal-group: 4;
        -ms-flex-order: 3;
        order: 3
    }
}

@media (min-width:1200px) {
    .aparrel img {
        width: 18%
    }
}

.divider-img {
    width: 100%
}

@media (min-width:1200px) {
    .img-dividers {
        width: 90%;
        display: -ms-grid;
        display: grid;
        margin: a;
        grid-template-areas: "a a a a a a a b b b" "a a a a a a a b b b" "a a a a a a a b b b" "a a a a a a a c c c" "a a a a a a a c c c" "a a a a a a a c c c";
        grid-gap: 2vw;
        margin: 40px auto
    }

    .img-dividers>.tincture-link {
        -ms-grid-row: 1;
        -ms-grid-row-span: 11;
        -ms-grid-column: 1;
        -ms-grid-column-span: 13
    }

    .img-dividers>.preroll-link {
        -ms-grid-row: 1;
        -ms-grid-row-span: 5;
        -ms-grid-column: 15;
        -ms-grid-column-span: 5
    }

    .img-dividers>.edible-link {
        -ms-grid-row: 7;
        -ms-grid-row-span: 5;
        -ms-grid-column: 15;
        -ms-grid-column-span: 5
    }
}

@media (min-width:768px) {
    .img-dividers img {
        -o-object-fit: cover;
        object-fit: cover
    }
}

.img-dividers .img-divider-1 {
    grid-area: a;
    width: 100%;
    height: auto
}

@media (min-width:768px) {
    .img-dividers .img-divider-1 {
        height: 70vw;
        -o-object-fit: cover;
        object-fit: cover
    }
}

.img-dividers .img-divider-2 {
    grid-area: b;
    width: 100%;
    height: 56vw;
    -o-object-fit: cover;
    object-fit: cover
}

@media (min-width:768px) {
    .img-dividers .img-divider-2 {
        height: 34vw
    }
}

.img-dividers .img-divider-3 {
    grid-area: c;
    width: 100%;
    height: 31vw;
    display: none
}

@media (max-width:767px) {
    .featured-product div .tincture-link {
        -ms-grid-row: 1;
        -ms-grid-column: 1
    }

    .featured-product div .preroll-link {
        -ms-grid-row: 3;
        -ms-grid-column: 1
    }

    .featured-product div .edible-link {
        -ms-grid-row: 5;
        -ms-grid-column: 1
    }

    .featured-product div .extracts-link {
        -ms-grid-row: 7;
        -ms-grid-column: 1
    }

    .featured-product div .pick-up-link {
        -ms-grid-row: 9;
        -ms-grid-column: 1
    }

    .featured-product div .our-grow-link {
        -ms-grid-row: 11;
        -ms-grid-column: 1
    }

    .img-dividers .img-divider-1 {
        -ms-grid-row: 1;
        -ms-grid-column: 1
    }

    .img-dividers .img-divider-2 {
        -ms-grid-row: 3;
        -ms-grid-column: 1
    }

    .img-dividers .img-divider-3 {
        -ms-grid-row: 5;
        -ms-grid-column: 1
    }
}

@media (min-width:768px) {
    .featured-product div .tincture-link {
        -ms-grid-row: 1;
        -ms-grid-column: 1
    }

    .featured-product div .preroll-link {
        -ms-grid-row: 1;
        -ms-grid-column: 3
    }

    .featured-product div .edible-link {
        -ms-grid-row: 3;
        -ms-grid-column: 1
    }

    .featured-product div .extracts-link {
        -ms-grid-row: 3;
        -ms-grid-column: 3
    }

    .featured-product div .pick-up-link {
        -ms-grid-row: 5;
        -ms-grid-column: 1;
        -ms-grid-column-span: 3
    }

    .featured-product div .our-grow-link {
        -ms-grid-row: 7;
        -ms-grid-column: 1;
        -ms-grid-column-span: 3
    }

    .img-dividers .img-divider-1 {
        -ms-grid-row: 1;
        -ms-grid-column: 1
    }

    .img-dividers .img-divider-2 {
        -ms-grid-row: 1;
        -ms-grid-column: 3
    }

    .img-dividers .img-divider-3 {
        -ms-grid-row: 3;
        -ms-grid-column: 1
    }
}

@media (min-width:1200px) {
    .featured-product div .tincture-link {
        -ms-grid-row: 1;
        -ms-grid-column: 1
    }

    .featured-product div .preroll-link {
        -ms-grid-row: 1;
        -ms-grid-column: 3
    }

    .featured-product div .edible-link {
        -ms-grid-row: 1;
        -ms-grid-column: 5
    }

    .featured-product div .extracts-link {
        -ms-grid-row: 1;
        -ms-grid-column: 7
    }

    .featured-product div .pick-up-link {
        -ms-grid-row: 3;
        -ms-grid-column: 1;
        -ms-grid-column-span: 7
    }

    .featured-product div .our-grow-link {
        -ms-grid-row: 5;
        -ms-grid-column: 1;
        -ms-grid-column-span: 7
    }

    .img-dividers .img-divider-1 {
        -ms-grid-row: 1;
        -ms-grid-column: 1
    }

    .img-dividers>.img-divider-1 {
        -ms-grid-row: 1;
        -ms-grid-row-span: 11;
        -ms-grid-column: 1;
        -ms-grid-column-span: 13
    }

    .img-dividers .img-divider-2 {
        -ms-grid-row: 1;
        -ms-grid-column: 3
    }

    .img-dividers>.img-divider-2 {
        -ms-grid-row: 1;
        -ms-grid-row-span: 5;
        -ms-grid-column: 15;
        -ms-grid-column-span: 5
    }

    .img-dividers .img-divider-3 {
        -ms-grid-row: 1;
        -ms-grid-column: 5
    }

    .img-dividers>.img-divider-3 {
        -ms-grid-row: 7;
        -ms-grid-row-span: 5;
        -ms-grid-column: 15;
        -ms-grid-column-span: 5
    }
}

@media (min-width:768px) {
    .img-dividers .img-divider-3 {
        display: block;
        height: 34vw;
        -o-object-fit: cover;
        object-fit: cover
    }
}

.nav-menu-btn {
    position: absolute;
    top: 20px;
    right: 20px;
    border: none;
    background: transparent;
    color: #fff;
    font-size: 40px
}

menu {
    list-style: none;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    width: 100%;
    max-width: 480px;
    position: fixed;
    top: 0;
    right: 0;
    -webkit-transform: translateX(105%);
    transform: translateX(105%);
    -webkit-transition: all 0.8s cubic-bezier(0.075, 0.82, 0.165, 1);
    transition: all 0.8s cubic-bezier(0.075, 0.82, 0.165, 1);
    z-index: 30;
    background: #000;
    margin: 0
}

menu.active {
    -webkit-transform: translate(0);
    transform: translate(0)
}

menu .menu-logo {
    width: 60%
}

menu li {
    padding: 30px
}

menu li a {
    color: #fff;
    text-decoration: none;
    font-family: "Legend-M54";
    font-size: 38px;
    padding: 60px 20px
}

.exclusives {
    width: 80%;
    margin: auto
}

.exclusives .img {
    width: 80%;
    margin: 40px auto;
    display: block
}

.exclusives .icon {
    width: 25%;
    margin: 40px auto;
    display: block;
}

@media (min-width:768px) {
    .exclusives .icon {
        width: 15vw;
    }
}

.exclusives h2 {
    text-align: center
}

@media (min-width:768px) {
    .exclusives h2 {
        font-family: "Legend-M54", sans-serif;
        font-size: calc(20px + 4.5vw)
    }
}

@media (min-width:768px) {
    .exclusives h2 .second {
        font-family: "Legend-M54", sans-serif;
        font-size: calc(20px + 4.5vw)
    }
}

.exclusives h3 {
    font-size: 50px;
    text-align: center;
    margin: 0;
    font-family: "Oswald", sans-serif;
    font-weight: 100;
    line-height: 1.2;
    margin-bottom: 80px
}

.exclusives-2 {
    margin: 20px 0
}

@media (min-width:768px) {
    .exclusives-2 .exclusive-wrapper {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        width: 90%;
        margin: 30px auto;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center
    }
}

.exclusives-2 .exclusive-img-cont {
    position: relative
}

@media (min-width:768px) {
    .exclusives-2 .exclusive-img-cont {
        width: 30%
    }
}

.exclusives-2 .exclusive-img-cont:before {
    background: #fff;
    width: 90%;
    height: 87%;
    display: block;
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: -1;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%)
}

@media (min-width:768px) {
    .exclusives-2 .exclusive-text-cont {
        width: 70%
    }
}

.exclusives-2 img {
    width: 100%
}

.exclusives-2 h4 {
    font-size: 46px;
    margin-bottom: 0;
    width: 80%;
    font-family: "Oswald", sans-serif;
    font-weight: 100;
    text-transform: uppercase;
    line-height: 1;
    letter-spacing: 15px;
    margin: 45px auto 20px
}

@media (min-width:768px) {
    .exclusives-2 h4 {
        margin: 20px 40px
    }
}

.exclusives-2 h4 .second {
    display: block;
    font-size: 68px
}

.exclusives-2 p {
    width: 80%;
    margin: 0 auto 30px;
    font-size: 20px;
    font-weight: 300;
    line-height: 1.4
}

@media (min-width:768px) {
    .exclusives-2 p {
        margin: 20px 40px
    }
}

footer {
    width: 80%;
    margin: 0 auto 80px;
    text-align: center
}

@media (min-width:768px) {
    footer {
        width: 98%
    }
}

footer img {
    width: 74%;
    display: block;
    margin: 40px auto
}

@media (min-width:768px) {
    footer img {
        width: 14%;
        display: block;
        margin: 40px 0
    }
}

footer .copyright {
    font-size: 35px;
    font-family: "Oswald", sans-serif
}

footer .trademark {
    font-size: 20px;
    font-weight: 300;
    line-height: 1.5
}

footer .link-n-logo {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between
}

footer .link-n-logo .footer-links {
    width: 42%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-evenly;
    list-style: none;
    padding-left: 0
}

@media (max-width:767px) {
    footer .link-n-logo .footer-links {
        display: none
    }
}

footer .link-n-logo .footer-links li {
    padding: 0 30px
}

footer .link-n-logo .footer-links li a {
    color: #fff;
    font-family: "Legend-M54", sans-serif;
    font-size: calc(19px + 0.8vw);
    text-decoration: none
}

.top-image img {
    width: 100%
}

.int-main-section {
    position: relative
}

.int-main-section h1 {
    position: absolute;
    top: 60px;
    background: #fff;
    color: #000;
    padding: 8px 100px;
    font-size: calc(16px + 1.2vw);
    font-family: "Oswald", sans-serif;
    font-size: calc(16px + 1vw);
    text-transform: uppercase;
    font-weight: 100;
    letter-spacing: 7px
}

@media (max-width:767px) {
    .int-main-section h1 {
        display: none
    }
}

.int-main-section>div {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    align-items: flex-start;
    width: 80%;
    margin: auto;
    padding: 60px
}

.int-main-section>div img {
    padding: 11.5vw 89px 0 0;
    width: 31%
}

@media (max-width:767px) {
    .int-main-section>div img {
        display: none
    }
}

html {
    overflow-x: hidden;
}

@media (min-width:768px) {
    html {
        overflow-x: hidden;
    }
}