#start-top-content {display:flex; justify-content:space-between; align-items:stretch; gap: 20px; margin: 0 0 40px 0;}

#start-slideshow { flex-basis: 100%; max-width: 100%; max-height:500px; }
.flexslider                 {overflow:hidden; width:100%; margin:0 auto !important;}
    .flexslider .slides li { box-sizing: border-box; height: 100%; }
.flexslider .slides li a    {display:block; height:100%; width:100%;position:relative; z-index: 2;}
        .flexslider .slides li .heroItemInner { display: flex; justify-content: flex-start; align-items: center; gap: 20px; height: 100%; }
    .flexslider .heroText { position:absolute; top: 0; left: 0; right:0; bottom:0; width:100%; height: 100%; z-index:3; display: flex; justify-content: center; align-items: center; }
        .flexslider .heroText h1,
        .flexslider .heroText h2,
        .flexslider .heroText h3 { font-size: 24px; font-weight: 600; color: #353535; line-height: 2em; margin: 0 0 20px 0; text-align:center; }
        .flexslider .heroText p { font-size: 18px; color: #000; font-weight:500; text-align:center; }
    .flexslider .slides li .heroText a { color: #353535; font-size: 12px; font-weight: 600; line-height:1em; padding: 12px 20px; border: 1px solid #353535; text-decoration:none; display: inline-block; width: auto; }
        .flexslider .slides li .heroText a:hover { color: #d7d7d7; background: #353535; }

#start-text { flex-basis: 321px; max-width: 26.6%; background: transparent linear-gradient(109deg, #353535 0%, #5B6B76 100%) 0% 0% no-repeat padding-box; padding: 36px 34px; box-sizing:border-box; display:flex; justify-content:space-between; flex-direction:column;}
#start-text h1,
#start-text h2,
#start-text h3 {color:#fff; font-size:24px; font-weight:600;}
#start-text p {font-size: 14px; color:#fff; line-height:2em; margin: 0 0 20px 0;}
#start-text p:last-child {margin: 0;}
#start-text p a {border: 1px solid #fff; color: #fff; padding: 12px 20px; text-decoration:none; font-size: 12px; font-weight: 600; display:inline-block;}
    #start-text p a:hover {color: #353535; background:#fff; }

.category-menu {display:flex; justify-content:flex-start; gap: 20px 1.5%; flex-wrap:wrap; margin: 0 0 45px 0; }
.category-menu .item {width: 23.85%;}
    .category-menu .item a { border: 1px solid rgba(38,36,76,.2); border-radius: 4px; color: #000; color: #000; font-weight: 600; display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; text-decoration: none; text-transform: uppercase; }
.category-menu .item a:hover {background:#000; color:#fff;}
    .category-menu .item a::after { content: url(/gfx/icons/arrow-right-short-black.svg); display: inline-block; position:relative; top: 2px; }
    .category-menu .item a:hover::after { filter: invert(100%); }

#start-puffs { overflow: hidden; display:flex; justify-content:space-between; gap: 2%; margin: 0 0 65px 0;}
#start-puffs .puffitem				{ width:32%; height:100%; background:#eee; padding:0; text-align:left; overflow:hidden; position:relative;}
#start-puffs .puffitem.last			{margin-right:0;}

#start-puffs .puffitem a                                                {display:block; width:100%; height:100%; text-decoration:none; position:relative;}
    #start-puffs .puffitem .puffTextContent { padding: 15px; box-sizing:border-box; display:flex; justify-content:space-between; flex-direction:column; align-items:flex-start;}
    #start-puffs .puffitem .rub, #start-puffs .puffitem a .rub { display: block; font-size: 24px; font-weight: 600; color: #000; margin: 0 0 20px 0; text-align: left; }
#start-puffs .puffitem .image      {width:100%; display:block; overflow:hidden; margin: 0 0 15px 0;}
    #start-puffs .puffitem .image img { width: 100%; display: block; max-height: 250px; mix-blend-mode: darken; object-fit: contain; }
#start-puffs .puffitem p  {font-size:12px; color:#000; margin: 0; font-weight:600;}

    #start-puffs .puffitem .link { border: 1px solid #e1e1e1; box-sizing: border-box; border-radius: 4px; color: #000; background: #fff; padding: 5px 10px; text-decoration: none; font-size: 12px; font-weight: 600; display: flex; justify-content: space-between; align-items: center; width: 100%; }
        #start-puffs .puffitem .link:hover { background:#000; color: #fff; }
        #start-puffs .puffitem .link::after { content: url(/gfx/icons/arrow-right-short-black.svg); display: inline-block; position: relative; top: 2px; }
        #start-puffs .puffitem .link:hover::after { filter:invert(100%); }
@media screen and (max-width: 1210px) {
}

@media screen and (max-width: 1000px) {
    #start-top-content {flex-direction:column; margin: 0 0 20px 0;}
    #start-slideshow,
    #start-text { max-width: 100%; flex-basis: 100%; }
    .category-menu  {margin: 0 0 20px 0;}
    .category-menu .item { width: 32.3%; }
    #start-puffs { flex-wrap: wrap; justify-content:flex-start; gap: 15px 2%; margin: 0 0 40px 0;} 
    #start-puffs .puffitem { width: 49%; }
}

@media screen and (max-width: 700px) {
    .category-menu .item { width: 49.2%; }

}

    @media screen and (max-width: 600px) {
        .flexslider .slides li .heroItemInner { flex-direction: column; }
        .flexslider .slides img,
        .flexslider .heroText { width: 100%; max-width: 100%; }
            .flexslider .heroText h2, .flexslider .heroText h3 { font-size: 18px; }
        #start-text { padding: 20px; }
        #start-puffs .puffitem { width: 100%; }
 
    }