.heroWrapper {position:relative; overflow:hidden;}
.start-hero {background:var(--gray); overflow:hidden;}
.start-hero .heroItem {display:flex; justify-content:flex-end;align-items:center; overflow:hidden; padding: 90px 2.5% 75px 2.5%; box-sizing:border-box;}
.start-hero .heroItem .slideImage,
.start-hero .heroItem .videoDiv {width: 60%; float:right; }
    .start-hero .heroItem video { width: 100%; height: 100%; object-fit: cover; }
    .start-hero .heroItem .heroImage { max-width: 100%; max-height: 100%; object-fit:cover; }
    .start-hero .heroItem .heroText {position:absolute; left: 2.5%; bottom:0; height:100%; display:flex; align-items:flex-start; flex-direction:column; justify-content:center; width:calc(100% - 59px); z-index:3;}
        .start-hero .heroItem .heroText h1,
        .start-hero .heroItem .heroText h2,
        .start-hero .heroItem .heroText h3 { font-size: 5.4rem; font-weight: 400; margin: 0 0 20px 0; line-height: 1em; color:#fff; width:100%; text-transform:uppercase; }
        .start-hero .heroItem .heroText p {color:#fff; margin: 0 0 20px 0; width:100%; font-weight:300;}
        .start-hero .heroItem h4 {width:100%;}
        .start-hero .heroItem .heroText p:last-child { margin: 0; }
        .start-hero .heroItem .heroText a {background:var(--beige); border-radius:100px; color:#000; padding: 10px 35px; display:inline-block; margin: 0 5px 0 0; font-weight:normal;}
        .start-hero .heroItem .heroText a:hover { text-decoration:none; background:#fff; }

    .start-hero .heroItem .heroText .countdown {margin: 35px 0 0 0 ;}
        .start-hero .heroItem .heroText .countdown p { font-size: 2rem; margin: 0 0 10px 0; font-weight: 400; text-transform: uppercase; font-family: "Oswald", Arial, Sans-serif; }
        .start-hero .heroItem .heroText .countdown p:last-child { margin: 0; }

    .start-hero .heroItem .heroText h2:last-of-type { margin-bottom: 0.5em; }

.heroWrapper .gfx { position: absolute; width: 1500px; pointer-events: none; }
    .heroWrapper .gfx.left { top: -954px; left: -758px; width: 1610px; }
    .heroWrapper .gfx.right { top: 0; right: -1187px; }

    #usps {position:absolute; bottom: 20px; width:100%;}
    #usps p {display:flex; justify-content:center; align-items:center; gap: 100px; color:#fff; font-size: 0.825rem; font-weight:300;}
    #usps p span {display:inline-flex; align-items:center; gap: 10px;}
        
        .startBanner {position:relative; display:none;}
            .startBanner p { text-align: center; margin: 0; padding: 0.8em 0; }
        .startBanner p a {border-radius: 100px; padding: 7px 25px; margin: 0 0 0 15px; display:inline-block;}
        .startBanner p a:hover {text-decoration:none;}
            .startBanner #closeStartBanner { position: absolute; top: 23%; right: 20px; cursor: pointer; display: inline-block; }

        .start-text {text-align:center; margin: 50px 0 50px 0;}
        .start-text h1,
        .start-text h2 {margin: 0 0 25px 0;}
            .start-text h3 { margin: 0 0 25px 0; font-weight:lighter; font-size: 1.75rem; display:flex; justify-content:center; align-items:center;}
        .start-text p {font-size: 22px;}
            .start-text a { background: var(--beige); font-size: 1rem; border-radius: 100px; padding: 10px 25px; display: inline-block; color:#000; font-weight:400;}
            .start-text a:hover {opacity:0.9; text-decoration:none;}
                .start-text a::after { background: url(/gfx/arrow-right-short.svg) no-repeat; content: ""; width: 14px; height: 12px; display: inline-block; }

        .categoryList { width:95%; margin: auto;}
            .categoryList .categoryListInner { display: flex; justify-content: flex-start; gap: 2.5%; width:100%;}
        .categoryList .category:hover {text-decoration:none;}
            .categoryList .category { width: 18%; position:relative; }
            .categoryList .image { display: block; padding: 100% 0 0 0; overflow: hidden; position: relative; }
                .categoryList .image::after { display: block; width: 100%; height: 100%; background: #3B3B3A30; position: absolute; top: 0; right: 0; left: 0; bottom: 0; content: ""; z-index:2; }
            .categoryList .image img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
            .categoryList .name {display:flex; justify-content:space-between; align-items:center; position:absolute; bottom:0; width: 100%; box-sizing: border-box; text-align: left; font-size: 1.375rem; color:#fff; padding: 0 5% 12px; font-weight:400; text-transform:uppercase; z-index:3; }
                .categoryList .name::after { background: url(/gfx/arrow-left-short.svg) no-repeat; content: ""; width: 17px; height: 15px; display: inline-block; }

            .puffList a:hover {text-decoration:none;}
.puffList .puffitem a.puffLink:hover .image img { transform: scale(1.1); }
.puffList .puffitem .linkText { background: var(--beige); color: #000; padding: 12px 25px; border-radius: 100px; display: inline-block; margin: 10px 0 0 0; }

.puffList.two-column,
.puffList.three-column { display: flex; justify-content: flex-start; width: 95%; flex-wrap: wrap; margin: auto;}
.puffList.three-column { margin: 75px auto 60px auto; }
    .puffList.two-column .puffitem .image,
    .puffList.three-column .puffitem .image { display: block; width: 100%; padding: 75% 0 0 0; overflow: hidden; position: relative; }
        .puffList.two-column .puffitem .image img,
        .puffList.three-column .image img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.8s ease; }

.puffList.three-column {  gap: 35px 2%;  }
            .puffList.three-column .puffitem {width:32%; position:relative;}
            .puffList.three-column .puffitem .filter {position:absolute; top: 0; width:100%; height:100%; background:#00000020; z-index:2;}
                .puffList.three-column .puffitem .puffLink { display: block; position: relative; overflow: hidden; }
                .puffList.three-column .puffitem .puffText {position:absolute; top: 0; padding: 0 10%; z-index:3; box-sizing:border-box; width:100%; height:100%; display:flex; justify-content:center; align-items:center; flex-direction:column; text-align:center;}
                    .puffList.three-column .puffitem .puffText .title { color: #fff; line-height: 1em; margin: 0 0 20px 0;}
                .puffList.three-column .puffitem .puffText .text {color:#fff; font-weight:400;}

                .puffList.two-column {gap: 35px 2%; }
    .puffList.two-column .puffitem { width: 49%; position: relative; }
        .puffList.two-column .puffitem .filter { position: absolute; top: 0; width: 100%; height: 100%; background: #00000020; z-index: 2; }
    .puffList.two-column .puffitem .puffLink { display: block; position: relative; overflow: hidden; }
    .puffList.two-column .puffitem .puffText { position: absolute; bottom: 5%; padding: 0 5%; z-index: 3; box-sizing: border-box; width: 50%; display: flex; justify-content: flex-start; align-items:flex-start; flex-direction: column; }
        .puffList.two-column .puffitem .puffText .title { color: #fff; line-height:1em; }
        .puffList.two-column .puffitem .puffText .text { color: #fff; font-weight: 300; font-family: "Montserrat", sans-serif; }

.puffList.full { width: 95%; margin: 60px auto; }
    .puffList.full .puffitem .filter {display:none;}
        .puffList.full .puffitem .puffLink { display: flex; justify-content:center; }
        .puffList.full .puffitem .image {width:50%; overflow:hidden;}
.puffList.full .image img {width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.8s ease; }
        .puffList.full .puffitem .puffText {width:50%; background:var(--gray); display:flex; justify-content:center; align-items:center; flex-direction:column; padding: 5%; box-sizing:border-box; overflow:hidden; position:relative;}
            .puffList.full .puffitem .puffText .title { color: #fff; line-height: 1em; width: 65%; font-size: 2.6875rem; position: relative; z-index: 2; }
.puffList.full .puffitem .puffText .text { color: #fff; width:65%; font-weight: 300; position:relative; z-index:2; }
    .puffList.full .puffitem .linkTextWrapper { width: 65%; display: block; position: relative; z-index: 2; }
.puffList.full .puffitem .puffText .gfx {position:absolute; width: 1500px; pointer-events:none; }
    .puffList.full .puffitem .puffText .gfx.left { bottom: -850px; left: -828px; }
    .puffList.full .puffitem .puffText .gfx.right { top: -962px; right: -408px; rotate: 230deg; }

            .puffList.three-column .puffitem .puffText .title,
            .start-text h1, .start-text h2 { font-size: 1.75rem; font-weight: 400 !important; }

.puffList.two-column .puffitem .puffText .title { font-size: 2.625rem; font-weight: 400 !important; margin: 0 0 20px 0; }
.puffList.two-column .puffitem .puffText .text { display:inline-block; margin: 0 0 20px 0; }
.puffList.two-column .puffitem .puffText .text p:last-child { margin: 0; }

.supplierList .supplier .text { font-size: 1.125rem; font-weight: 400; text-transform: uppercase; }

.startBanner p,
.startBanner #closeStartBanner { font-size: 1em; line-height: 1.4; }

.supplierList {width:95%; margin: auto; display:flex; justify-content:flex-start; gap: 20px 1%; flex-wrap:wrap;}
.supplierList .supplier {width: 19.2%; }
.supplierList .supplier a {position:relative; display:block;}
    .supplierList .supplier .image { width: 100%; padding: 100% 0 0 0; position: relative; overflow: hidden; }
    .supplierList .supplier .image::after {background:#00000020; width:100%; height: 100%; position: absolute; top: 0; left: 0; right: 0; bottom: 0; content: '';}
.supplierList .supplier .image img {position:absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.8s ease;}
    .supplierList .supplier:hover .image img { transform: scale(1.1); }
    .supplierList .supplier .text {position:absolute; top: 0; left:0; width: 100%; height:100%; display:flex; justify-content:center; align-items:center; color:#fff;}

#text { color: #f00; }

#usps { display: flex; overflow: hidden; white-space: nowrap; }
#usps { width: 95%; left: 2.5%; bottom: 25px; }
    #usps p { gap: 25px; margin: 0 15px 0 0; }
#usps { overflow: hidden }
    #usps .marquee-track { display: flex; white-space: nowrap; gap: 0; will-change: transform; animation: marquee var(--dur) linear infinite }
    #usps .marquee-item { flex: 0 0 auto; display: inline-block }
@keyframes marquee {
    from { transform: translateX(0) }
    to { transform: translateX(calc(-1 * var(--shift))) }
}


@media screen and (max-width: 1500px){
    .start-hero .heroItem .heroText h1,
    .start-hero .heroItem .heroText h2,
    .start-hero .heroItem .heroText h3 { font-size: 4rem; }
    .puffList.full .puffitem .puffText .gfx.left { bottom: -842px; left: -1044px; }
    .puffList.full .puffitem .puffText .gfx.right { top: -678px; right: -727px; rotate: 230deg; }
}

@media screen and (max-width: 1250px) {
    .start-hero .heroItem { height: 550px; }

}

    @media screen and (max-width: 1250px) {
        .start-hero .heroItem { height: 480px; }
    }

    @media screen and (max-width: 1200px) {
        .supplierList .supplier .text { font-size: 22px; }
    }

    @media screen and (max-width: 1000px) {
        .start-hero .heroItem .heroText h1,
        .start-hero .heroItem .heroText h2,
        .start-hero .heroItem .heroText h3 { font-size: 3rem; }
        .startBanner p { font-size: 14px; padding: 5px 5px; }
            .startBanner p a { padding: 4px 15px; margin: 5px 0; }

        .categoryList { max-width: none; gap: 17px; overflow-x: scroll; }
            .categoryList .categoryListInner { width: 1533px; gap: 12px; }
            .categoryList .category { width: 240px; }
            .categoryList .name {  }
        .puffList.three-column { margin: 50px auto 30px; }
            .puffList.three-column .puffitem .puffText .title { font-size: 18px; }
            .puffList.three-column .puffitem .puffText .text { font-size: 14px; }

        .puffList.full .puffitem .puffText .title,
        .puffList.full .puffitem .puffText .text,
        .puffList.full .puffitem .linkTextWrapper { width: 100%; }
            .puffList.full .puffitem .puffText .title {font-size: 1.5rem;}

            .supplierList .supplier { width: 32%; }
        .puffList.two-column .puffitem .filter { display: none; }
        .puffList.two-column .puffitem .puffText { position: relative; bottom: 0; padding: 0; width: 100%; margin: 25px 0 0 0; }
            .puffList.two-column .puffitem .puffText .title,
            .puffList.two-column .puffitem .puffText .text { color: #000; }
            .puffList.two-column .puffitem .puffText .title{font-size: 1.3rem;}
    }

    @media screen and (max-width: 800px) {
        .start-hero .heroItem .heroText h1,
        .start-hero .heroItem .heroText h2,
        .start-hero .heroItem .heroText h3 { font-size: 2.5rem; }
        .puffList.full .puffitem .puffLink { flex-wrap: wrap; }
        .puffList.full .puffitem .image,
        .puffList.full .puffitem .puffText { width: 100%; }
            .puffList.full .puffitem .puffText .title { font-size: 34px; }
        .puffList.full .puffitem .puffText { padding: 50px 5%; }
    }

    @media screen and (max-width: 680px) {
        .start-hero .heroItem { height: auto; }
            .start-hero .heroItem .slideImage, .start-hero .heroItem .videoDiv {width:100%; float:none;}
                .start-hero .heroItem .slideImage {height: 600px; width: auto; object-fit:cover;}
                .start-hero .heroItem .heroText { left: 0; width: 100%; align-items: center; gap: 20px; }
                    .start-hero .heroItem .heroText h1, .start-hero .heroItem .heroText h2, .start-hero .heroItem .heroText h3 {font-weight: 600;}
                    .start-hero .heroItem .heroText h1, .start-hero .heroItem .heroText h2, .start-hero .heroItem .heroText h3 { text-align: center; max-width: 50%; margin: 0 auto; }
                    .start-hero .heroItem .heroText p { text-align: center; max-width: 75%; margin: 0 auto; }
                .start-hero .heroItem .heroText a { display: inline-block; margin: 0 0 10px 0; }
                .start-hero .heroItem .heroText .countdown{margin: 15px 0 0 0;}
                .start-hero .heroItem .heroText .countdown p { font-size: 1.125rem; width: 100%; max-width: none; }
                .start-hero .heroItem .heroText a:last-child { margin: 0; }
        .start-text h1, .start-text h2 { font-size: 26px; }
        .categoryList .categoryListInner { width: 1121px; gap: 12px; }
        .categoryList .category { width: 172px; }
        .categoryList .name { font-size: 1rem; }
        .heroWrapper .gfx.right { top: 0; right: -1334px; }
        .heroWrapper .gfx.left { top: -457px; left: -1271px; width: 1610px; }

        .puffList.three-column .puffitem { width: 100%; }
            .puffList.three-column .puffitem .image { padding: 0 0 100% 0; }
            .puffList.three-column .puffitem .puffText .title { font-size: 28px; }
            .puffList.three-column .puffitem .puffText .text { font-size: 16px; }

        .start-text { margin: 30px 0; }
            .start-text h3 {flex-direction:column; gap: 30px;}

            .supplierList { gap: 20px 4%; }
            .supplierList .supplier { width: 48%; }

        .puffList.two-column .puffitem { width: 100%; }
    }

@media screen and (max-width: 380px) {
    .start-hero .heroItem .heroText h1, .start-hero .heroItem .heroText h2, .start-hero .heroItem .heroText h3 {max-width: 85%;}
    .start-hero .heroItem .heroText p { max-width: 90%; }
    .start-hero .heroItem .heroText a{padding: 10px 15px;}
}