﻿
/*---------------------
General
---------------------*/
a { font-weight: normal; color: #333; text-decoration: underline; }
    a:hover { text-decoration: none; }

h1, h2, h3, h4 { color: #562931; }
h1 { font-size: 34px; padding: 0; margin: 0 0 30px 0; font-weight: 500; font-family: 'Portrait',Arial, Sans-serif; line-height: 1em; }
h2 { font-size: 24px; padding: 0; margin: 25px 0 15px 0; font-family: 'Portrait',Arial, Sans-serif; font-weight:normal;}
h3 { font-size: 20px; padding: 0; margin: 25px 0; font-weight: normal; font-family: 'Portrait',Arial, Sans-serif; }
h4 { padding: 0; margin: 25px 0 5px 0; font-weight: bold; line-height: 1.5; }
p { margin: 0 0 10px 0; }
input { border-radius: 0; }

::selection { background: #d0e8ff; }
::-moz-selection { background: #d0e8ff; }

img, table { border: 0; }
html { margin: 0; padding: 0; }
body { margin: 0; padding: 0; COLOR: #4f2117; font: normal 16px/1.5 "National 2", Arial, Sans-serif; /*background-color:#999;*/ background: #fff; }

.pinkLink { background: #f7e7e4; color: #4f2117; padding: 15px 25px; border-radius: 5px; display: inline-block; text-decoration: none; }
.pinkLinkSmall { background: #f7e7e4; color: #4f2117; padding: 5px 10px; border-radius: 5px; display: inline-block; text-decoration: none; margin: 0 0 5px 0; }

.pinkBtn { text-align: center; background: #F4C7BE; color: #562931; font-size: 20px; display: inline-block; padding: 5px 15px; border-radius: 100px; margin: 0; cursor: pointer; text-decoration: none; }

.darkBrownBtn { background: #4E1B10; color: #fff; font-size: 16px; padding: 17px 37px 15px; display: inline-block; text-decoration: none; font-weight: 500; transition: all 0.7s cubic-bezier(0.4, 0, 0.2, 1); border: none; cursor: pointer; border-radius:100px; }
.lightBrownBtn { background: #905d40; color: #fff; font-size: 16px; padding: 17px 37px 15px; display: inline-block; text-decoration: none; font-weight: 500; cursor: pointer; transition: all 0.7s cubic-bezier(0.4, 0, 0.2, 1); border-radius: 100px; }
    .darkBrownBtn:hover,
    .lightBrownBtn:hover { background: #F4C7BE; }

.borderImg { border: 5px solid #F4C7BE; border-radius: 50%; }
.topImage { max-width: 100%; height: auto; }
input[type=submit] { -webkit-appearance: none; }
input[type=text]:focus,
input[type=password]:focus { outline: 2px solid #F4C7BE; }
/*---------------------
Body layout
---------------------*/
#wrapper { width: 100%; margin: 0 auto; text-align: left; position: relative; }
.wrapperFilter,
#contentFilter { position: absolute; top: 0; right: 0; left: 0; bottom: 0; background: rgba(0, 0, 0, 0.70); height: 100%; width: 100%; z-index: 4; display: none; }
.inner { width: 1400px; margin: 0 auto; padding: 0; }

#logo { height: 58px; position:absolute; left: 0;}
    #logo img { height: 100%; }
#logo-dark { display: block; }
#logo-white { display: none; }
.headerstart #logo-white { display: block; }
.headerstart #logo-dark { display: none; }

.header { width: 100%; height: 116px; margin: 0; padding: 0; display: flex; align-items: center; background: #fff; border-bottom: solid 1px #e3e3e3; position:sticky; top:0; z-index:999; }
    .header.headerstart { background: none; position: absolute; top: 0; width: 100%; z-index: 5; border-bottom: solid 1px #ffffff30; }
    .header.startpage { transition: all 0.3s ease-in-out; }

.headerstart { position: relative; background: transparent; /* Ursprunglig stil */ }

.header.startpage:not(.headerstart) { position: fixed; top: 0; width: 100%; background: rgba(255, 255, 255, 0.95); /* Anpassa efter behov */ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); }

    .header .inner { text-align: left; position: relative; display: flex; justify-content: center; align-items: center; }
.header.sticky { position: fixed; top: 0; width: 100%;  transition: all 0.3s ease-in-out; }

    .header #contact { position: absolute; right: 20px; top: 10px; }

    .header .inner #shopping-cart p { padding: 0; margin: 0; }
    .header .inner #shopping-cart a { text-transform: uppercase; text-decoration: none; color: #562931; }

.topmenu { }
.header #responsive-menu-btn { display: none; }
.header #responsive-menu-btn .white { display: none; }
    .headerstart #responsive-menu-btn .white { display: block; }
.headerstart #responsive-menu-btn .black { display: none; }

.topmenu ul { list-style: none; margin: 0; padding: 0; width: 100%; overflow: hidden; display: flex; justify-content: space-between; align-items: center; width: 100%; gap: 20px; }
    .topmenu ul li { float: left; display: inline; overflow: hidden; }
        .topmenu ul li a { font-size: 18px; line-height: 1.2em; color: #4a1b18; font-weight: 600; text-decoration: none; display: block; }
.headerstart .topmenu ul li a { color: #fff; }
.topmenu ul li:last-child a { margin: 0; }

.topmenu ul li.on a,
.topmenu ul li:hover a { color: #f8a392; }
.topmenu ul li a:hover { cursor: pointer; text-decoration: none; }
.topmenu ul li a.haschild { display: none; }
.topmenu ul li ul { display: none; }


.webshopTopMenu { list-style: none; /* margin: 0 240px 0 0; */ padding: 0; display: flex; z-index:1000; justify-content: center; align-items: center; width: auto; gap: 30px; margin: 0 140px 0 0;}
    .webshopTopMenu .topMenuItem { float: left; display: inline; }
        .webshopTopMenu .topMenuItem a,
        .webshopTopMenu .topMenuItem span.topMenuSpan { font-size: 18px; line-height: 1.2em; color:#4f2117; font-weight: 600; text-decoration: none; display: block; cursor:pointer; }
    .webshopTopMenu.headerStart .topMenuItem a,
    .webshopTopMenu.headerStart .topMenuItem span.topMenuSpan { color: #fff; }
.webshopTopMenu .topMenuItem a,
.webshopTopMenu .topMenuItem span.topMenuSpan { margin: 0; }
.webshopTopMenu .topMenuItem:hover a,
.webshopTopMenu .topMenuItem:hover span.topMenuSpan { color: #f8a392; }
.webshopTopMenu .topMenuItem a:hover { cursor: pointer; text-decoration: none; }
    .webshopTopMenu .topMenuItem .subMenu { display: none; position: absolute; top: 70px; left: 0; right: 0; width: 100%; background: #fff; padding: 30px 0; z-index:1000; }
.webshopTopMenu .topMenuItem .subMenu .inner { margin: auto; display:flex; justify-content:center; gap: 55px; align-items:flex-start;}
.webshopTopMenu .topMenuItem.on .subMenu { display: block; }
.webshopTopMenu .topMenuItem .subMenu a { color: #4a1b18; font-size:16px; white-space:nowrap; }
.webshopTopMenu .topMenuItem .subMenu a:hover { text-decoration:underline; }
.webshopTopMenu .topMenuItem .underMenu {margin: 20px 0 0 0;}
.webshopTopMenu .topMenuItem .underMenu a { font-size: 15px; font-weight: normal; }
.webshopTopMenu .topMenuItem .underMenuItem {margin: 0 0 5px 0;}
.extraDiv { background: #fff; position: fixed; top: 117px; height: auto; display:none; width: 100%; z-index: 3; }
.extraDiv.start {position:absolute;}
.header #nav ul#responsive { display: none; }

.pickCustomerTypeDiv { }
    .pickCustomerTypeDiv a { font-size: 13px; color: #4a1b18; text-decoration: none; padding: 10px 15px; font-weight: bold; }
.headerstart .pickCustomerTypeDiv a { color: #fff; }
.pickCustomerTypeDiv a.selected,
.pickCustomerTypeDiv a:hover { background: #f3ddd8; border-radius: 100px; }
.headerstart .pickCustomerTypeDiv a.selected,
.headerstart .pickCustomerTypeDiv a:hover { background: #f3ddd840; }

.headerLinks { max-width: 40%; position: absolute; right:0; display: flex; justify-content: space-between; align-items: center; z-index:1001;}
    .headerLinks .links { background: #f3ddd8; border-radius: 100px; text-decoration: none; cursor: pointer; font-weight: bold; font-size: 18px; height: 46px; width: 46px; display: inline-flex; align-items: center; justify-content: center; margin: 0 0 0 18px; position: relative; }
        .headerLinks .links:hover { background: #f3ddd890; }    
    .headerLinks #shopping-cart img { position:relative; top: 3px;   }
        .headerLinks .links .iconText { position: absolute; top: -5px; right: -5px; background: #ddb2a8; color: #fff; font-size: 13px; border-radius: 100px; width: 24px; height: 24px; display: flex; justify-content: center; align-items: center; }
.dropdown { position: relative; display: flex; padding: 0 0 20px 0; top: 10px; }
    .dropdown a { text-decoration: none; }
    .dropdown .links { }
.headerLinks .toplink svg { margin: 0 5px 0 0; }
.dropdown ul { background: #fff; border-radius: 20px; padding: 10px; margin: 5px 0; list-style: none; width: 160px; position: absolute; top: 58px; left: 5%; z-index: 3; box-shadow: -1px -1px 15px 4px #00000040 }
.dropdown:hover ul { display: block; }
.dropdown ul.hidden { display: none; }
.dropdown:hover ul.hidden { display: block; }
.dropdown ul li { margin: 0; border-top: 1px dotted #ccc; }
    .dropdown ul li:hover a { background: #f3ddd8; }
    .dropdown ul li a { color: #562931; font-size: 16px; padding: 5px 10px; margin: 5px 0; display: flex; justify-content:flex-start; align-items:center; gap: 5px; text-align: left; border-radius: 100px; box-sizing:border-box; width:100%;}
    .dropdown ul li:hover a { color: #fff; }
    .dropdown ul li svg { width: 25px; margin: 0 5px 0 0; }

.cartAddedProduct { width: 354px; background: #fff; border-radius: 20px; padding: 15px 20px; box-sizing: border-box; position: absolute; top: 90px; right: 0; display:none; z-index:100;}
.cartAddedProduct .cartAddedProductHeader {display:flex; justify-content:space-between; align-items:center; margin: 0 0 40px 0; }
    .cartAddedProduct .cartAddedProductHeader p {margin:0;}
        .cartAddedProduct .cartAddedProductHeader p:first-child img { background: #f3ddd8; padding: 5px; border-radius: 100px; }
    .cartAddedProduct .cartAddedProductHeader p:first-child { display: flex; justify-content: flex-start; align-items: center; gap:10px; font-size: 12px; color: #1a1a1a; }
#closeAddedProductBtn {cursor:pointer;}

#loginPopup { width: 354px; background: #fff; border-radius: 20px; padding: 27px 30px; box-sizing: border-box; position: absolute; top: 90px; right: 0; display: none; z-index: 100;}
#loginPopup .loginPopupHeader {display:flex; justify-content:space-between; align-items:center; margin: 0 0 27px 0;}
    #loginPopup .loginPopupHeader p {color:#4f2117; font-size:18px; font-weight:500; margin:0; }
    #loginPopup .loginPopupHeader p img {width:11px; cursor:pointer;}
    #loginPopup .loginPopupBody {}
        #loginPopup .loginPopupBody p { color: #1a1a1a; font-size:14px; }
        #loginPopup .loginPopupForm {margin: 25px 0;}
            #loginPopup .loginPopupForm input { width: 100%; display: block; border: solid 2px #f3ddd8; background: #fff; padding: 19px 25px; box-sizing: border-box; border-radius: 100px; color: #502220; font-size:14px; margin: 0 0 13px 0; }
            #loginPopup .loginPopupBtns {display:flex; justify-content:space-between; align-items:center;}
                #loginPopup .loginPopupBtns a { color: #502220; font-size: 14px; font-weight:500; text-decoration:none; }
                #loginPopup .loginPopupBtns input {background:#f3ddd8; color:#4f2117; font-size:14px; font-weight:600; padding: 16px 40px; border-radius:100px; border:none; cursor:pointer;}
                    #loginPopup .loginPopupBtns input:hover {background:#F4C7BE;}
    #loginPopup .errorText {margin: 10px 0 0 0;}
#loginPopupLoadingFilter {width:100%; height:100%; background:#00000060; display:flex; justify-content:center; align-items:center; position:absolute; top: 0; left:0; right:0; bottom:0; border-radius:20px; display:none;}

.cartAddedProductBody { display: flex; justify-content: flex-start; gap: 20px; }
.cartAddedProductBody .image {width:76px; }
    .cartAddedProductBody .image img {width:100%; }
    .cartAddedProductBody .productInfo {width: 203px;}
    .cartAddedProductBody .productInfo a { color: #4a1b18; text-decoration: none; font-weight: bold; font-size: 14px; }
    .cartAddedProductBody .price { color: #1a1a1a; font-size:14px; }
    .cartAddedProductBody .category { color: #717171; }

.cartAddedProduct .cartAddedProductFooter {margin: 30px 0 0 0; display:flex; justify-content:space-between; align-items:center; gap: 13px;}
    .cartAddedProduct .cartAddedProductFooter a { border: 1px solid #f3ddd8; padding: 20px 0px; border-radius: 100px; font-size: 14px; text-decoration: none; color: #502220; display: inline-block; font-weight: 500; width: 160px; text-align: center; box-sizing:border-box;}
        .cartAddedProduct .cartAddedProductFooter a:last-child { width: 130px; background: #f3ddd8; }
        .cartAddedProduct .cartAddedProductFooter a:hover { background: #F4C7BE; }

.shopLink { display: none; }

.threeColumns { display: flex; justify-content: flex-start; align-items: flex-start; }
    .threeColumns .column { margin: 0; width: 33.33%; }

.breadcrumbs { color: #562931; font-size: 14px; margin: 0 0 34px 0; }
    .breadcrumbs a { color: #4a1b18; font-size: 14px; text-decoration: none; }
    .breadcrumbs a,
    .breadcrumbs span { margin: 0 2px; font-weight: 500; }
    .breadcrumbs span.seperator {}
    .breadcrumbs span { color: #b2b2b2; }
/*---------------------
Page layout
---------------------*/
.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
* html .clearfix { height: 1%; }

.content { width: 100%; margin: 0; padding: 0; background-color: #fbf6f5; position:relative; overflow:hidden;}
    .content .inner { min-height: 450px; padding: 35px 0 120px 0; }
.contentright { width: 74%; float: right; margin: 0; padding: 0; }
.contentFull { width: 100%; }
.contentCenter { width: 100%; max-width: 100%; margin: auto; overflow: hidden; }

.contentright img { max-width: 100%; height: auto; }

.topImageContent {position:relative; max-height:570px; display:flex; justify-content:center; align-items:center; overflow:hidden;}
    .topImageContent.topImage {align-items:flex-start;}
    .topImageContent img { width: 100%; display: block; }
    .topImageContent .topImageContentText { position: absolute; top: 117px; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; height: calc(100% - 117px); z-index: 3; display: flex; justify-content: center; align-items: center; flex-direction: column; }
        .topImageContent .topImageContentText h1 { color: #fff; font-size: 54px; max-width: 600px; text-align: center; font-weight: 400; }
        .topImageContent .topImageContentText p { color: #fff; padding: 0; margin: 0; font-size: 20px; max-width: 600px; text-align: center; }
        .topImageContent .topImageContentText .readMoreLinks { display: flex; justify-content: space-between; align-items: center; gap: 30px; margin: 60px 0 0 0; }
    .topImageContent .filter { height: 100%; width: 100%; opacity: 0.3; background-color: #280f0e; position: absolute; top: 0; z-index: 2; }

        #mobileMenu { background: #fff; position: fixed; top: 0px; bottom: 0; overflow-y: scroll; overflow-x: hidden; left: -350px; padding: 130px 50px 20px 50px; z-index: 99999; width: 350px; box-sizing: border-box; height: 100%; transition-duration: 0.5s; -webkit-transition-duration: 0.5s; }
    #mobileMenu.visible { left: 0; transition-duration: 0.5s; -webkit-transition-duration: 0.5s; }
    #mobileMenu .closeMobileMenuBtn { position: absolute; right: 6%; top: 3%; cursor: pointer; }
            #mobileMenu .pickCustomerTypeDiv {position:absolute; left: 35px; top: 3%; }
            #mobileMenu .menuNodeItem { border-radius: 5px; padding: 0; margin: 0 0 30px 0; position: relative; z-index: 2; }
        #mobileMenu .menuNodeItem a { text-decoration: none; }
        #mobileMenu .menuNodeItem .parentNode a { color: #4f2117; font-size: 22px; font-weight: bold; }
        #mobileMenu .menuNodeItem .parentNode.selected a { font-weight: bold; }
        #mobileMenu .menuNodeItem .parentNode span { float: right; font-size: 20px; color: #4f2117; cursor: pointer; }
        #mobileMenu .menuNodeItem .childs { display: none; background: #f7e7e4; padding: 10px; }
        #mobileMenu .menuNodeItem.selected .childs { display: block; }
        #mobileMenu .menuNodeItem .childs .childNode { margin: 5px 0; }
        #mobileMenu .menuNodeItem .childs a { font-size: 14px; color: #4f2117; }
        #mobileMenu .menuNodeItem .childNode.selected a { font-weight: bold; }

    #mobileMenu .topBarLinks { margin: 40px 0 0 0; }
        #mobileMenu .topBarLinks a { display: block; font-size: 16px; color: #4f2117; text-decoration: none; }
    #mobileMenu .loginLink { color: #4f2117; font-size: 18px; font-weight: bold; text-decoration: none; display: flex; align-items: center; margin: 40px 0 0 0; }
        #mobileMenu .loginLink img { margin: 0 10px 0 0; }
    #mobileMenu .socialMedia { position: relative; top: 95px; width: 100%; z-index: 1; }
/*---------------------
Start page
---------------------*/
.categoryTextWrapper.hasImage { position: relative; display: flex; justify-content: center; align-items: center; flex-direction: column; max-height: 570px; overflow: hidden; }

#movie { width: 100%; overflow: hidden; position: relative; }
    #movie video { position: relative; z-index: 1; width: 100%; }
#movieAnchor { position: absolute; bottom: 2%; left: 0; right: 0; color: #fff; font-size: 48px; z-index: 3; text-align: center; cursor: pointer; opacity: .8; }
    #movieAnchor:hover { opacity: 1; }
#start-slideshow { width: 100%; margin: 0 auto; position: relative; }
    #start-slideshow #filter { min-height: 444px; height: 100%; width: 100%; opacity: 0.3; z-index: 1; position: absolute; top: 0; background: #000; }
.flexslider { overflow: hidden; width: 100%; margin: 0 auto !important; }
    .flexslider .slides li { background-size: auto; background-position: top; }
        .flexslider .slides li a { display: block; height: 100%; width: 100%; }

.startPageCatalogue { background: #F7E8E5; padding: 60px 0 40px 0; }
    .startPageCatalogue .inner { display: flex; justify-content: space-between; align-items: center; padding: 40px 0; min-height: 450px; }
    .startPageCatalogue h2 { font-size: 48px; font-weight: 500; line-height: 1em; margin: 0; }
    .startPageCatalogue p { font-size: 20px; color: #4f2117; margin: 25px 0 40px 0; }
    .startPageCatalogue .right { position: absolute; right: 0; width: 60%; text-align: right; }
        .startPageCatalogue .right img { width: 100%; }
    .startPageCatalogue .left { max-width: 520px; width: 40%; }

.startPageProducts { background: #fbf6f5; padding: 105px 0; overflow: hidden; }
.selectedProducts { padding: 0px 0 40px 0; width: 1400px; margin: auto; max-width: 100%; }
.productListTop { display: flex; justify-content: space-between; align-items: center; margin: 0 0 40px 0; }
    .productListTop h3 { margin: 0 !important; line-height: 1em; }
    .productListTop a { display: flex; align-items: center; justify-content: flex-start; color: #4f2117; text-decoration: none; font-weight: 500; }
.arrowLinkBottom { display: none; }
.productListTop a img { margin: 0 0 0 5px; transform: rotate(180deg); }
.productListTop a:hover { color: #F4C7BE; }
    .productListTop a:hover img { position: relative; left: 5px; }
.recipeProducts { width: 100%; padding: 0 0 40px 0; margin: auto; }
    .selectedProducts h3,
    .recipeProducts h3,
    .trendsDiv h3,
    .trendsDiv h3,
    .startPageMovie h3,
    .productSliderWrapper h3,
    .categorySliderWrapper h3 { text-align: left; margin: 0; font-size: 28px; font-family: 'Portrait',Arial, Sans-serif; font-weight: 400; }
    .recipeProducts .pageing { display: none; }

.trendsDiv { background: #fbf6f5; padding: 40px 0; }
    .trendsDiv h3 { margin: 0 0 40px 0; font-size: 28px; }

.startBlogPosts { display: flex; justify-content: space-between; align-items: center; width: 100%; }
.startPageArticle { text-align: center; width: 49.9%; height: 587px; position: relative; overflow: hidden; }
    .startPageArticle a { text-decoration: none; text-align: left; }
    .startPageArticle .articleImage { height: 100%; width: 100%; object-fit: cover; transition: transform 0.8s ease; }
    .startPageArticle:hover .articleImage { transform: scale(1.2); }
    .startPageArticle .articleText { position: absolute; bottom: 0; left: 0; width: 50%; padding: 0 0 45px 60px; box-sizing: border-box; z-index: 2; }
    .startPageArticle h4 { font-size: 28px; font-family: 'Portrait', serif; color: #fff; margin: 0 0 22px 0; line-height: 1em; font-weight: normal; }
    .startPageArticle .publishDate { color: #4f2117; font-weight: bold; margin: 15px 0 25px 0; }
    .startPageArticle .preamble { color: #fff; text-align: left; }
    .startPageArticle .filter { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgb(0,0,0); background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(255,255,255,0) 75%); width: 100%; height: 100%; }
    .startPageArticle .blogLinkButton { background: #fbf6f5; color: #4a1b18; font-size: 14px; padding: 14px 38px; border-radius: 100px; position: absolute; top: 20px; right: 25px; font-weight: 600; z-index: 2; }

#start-content { width: 960px; height: 225px; margin: 10px auto 0 auto; padding: 0; }
.startpageArticleList { width: 1400px; max-width: 100%; height: auto; margin: 0 auto 50px auto; padding: 0; overflow: hidden; }
#start-puffs { width: 1400px; max-width: 100%; height: auto; margin: 0 auto 80px auto; padding: 0; overflow: hidden; display: flex; justify-content: space-between; flex-wrap: wrap; }
    #start-puffs .puffitem { width: 49%; height: 100%; margin: 0 0 2% 0; padding: 0; text-align: left; overflow: hidden; position: relative; }
        #start-puffs .puffitem .filter { background: rgb(0,0,0); background: linear-gradient(180deg, rgba(0,0,0,0.1) 45%, rgba(0,0,0,1) 100%); width: 100%; height: 100%; position: absolute; top: 0; z-index: 2; }

        #start-puffs .puffitem a,
        #start-puffs .puffitem span.fakelink { display: block; width: 100%; height: 100%; text-decoration: none; font-size: 18px; position: relative; }
            #start-puffs .puffitem:nth-child(2n) a,
            #start-puffs .puffitem span.fakelink:nth-child(2n) { flex-direction: row; }
            #start-puffs .puffitem .rub, #start-puffs .puffitem a .rub { transition-duration: 0.2s; -webkit-transition-duration: 0.2s; color: #fff; font-size: 30px; margin: 0 0 20px 0; }
            #start-puffs .puffitem .image, #start-puffs .puffitem a .image { display: block; text-align: center; overflow: hidden; flex: 1; }
        #start-puffs .puffitem:nth-child(2n) .image, #start-puffs .puffitem:nth-child(2n) a .image { }

        #start-puffs .puffitem .image img, #start-puffs .puffitem a .image img { transition-duration: 0.2s; -webkit-transition-duration: 0.2s; width: 100%; display: block; opacity: 1.0; filter: alpha(opacity=100); }
        #start-puffs .puffitem .content, #start-puffs .puffitem a .content { transition-duration: 0.2s; -webkit-transition-duration: 0.2s; z-index: 3; position: absolute; bottom: 0px; left: 0px; background: none; width: 100%; height: 100%; }
            #start-puffs .puffitem .content .contentInner, #start-puffs .puffitem a .contentInner { position: absolute; width: 90%; left: 35px; bottom: 35px; }
            #start-puffs .puffitem .content p, #start-puffs .puffitem a .content p { transition-duration: 0.2s; -webkit-transition-duration: 0.2s; line-height: 24px; font-size: 16px; color: #fff; }
            #start-puffs .puffitem .content .puffText { max-width: 520px; height: 50px; overflow: hidden; }

        #start-puffs .puffitem:hover .rub { transition-duration: 0.2s; -webkit-transition-duration: 0.2s; }
        #start-puffs .puffitem:hover .content, #start-puffs .puffitem:hover .content p { transition-duration: 0.2s; -webkit-transition-duration: 0.2s; }
        #start-puffs .puffitem:hover img, #start-puffs .puffitem a:hover img { transition-duration: 1s; -webkit-transition-duration: 1s; transform: scale(1.1) }


.startPageVideo { background: url(/gfx/bg-viskaparmastare.jpg) no-repeat top center; height: 657px; position: relative; display: flex; justify-content: center; align-items: center; }
    .startPageVideo .filter { position: absolute; top: 0; width: 100%; height: 100%; background: #00000070; }
    .startPageVideo .startPageVideoText { width: 775px; position: relative; z-index: 2; }
    .startPageVideo h1,
    .startPageVideo h2 { color: #fff; font-size: 50px; line-height: 1em; margin: 0 0 55px 0; line-height: 1em; font-weight: normal; }
    .startPageVideo p { font-size: 18px; color: #fff; }
    .startPageVideo .playBtn { text-align: center; margin: 55px 0 0 0; cursor: pointer; }
        .startPageVideo .playBtn img { fill: red; }
        .startPageVideo .playBtn a { text-decoration: none; }
        .startPageVideo .playBtn span { font-size: 16px; font-weight: bold; margin: 10px 0 0 0; color: #fff; display: block; }

.instagram { padding: 0px 0 50px 0; }
    .instagram .inner { width: 1400px; margin: auto; padding: 0; }
    .instagram .instagramPosts { display: flex; justify-content: space-between; gap: 0.5%; margin: 65px 0 0 0; }
    .instagram .instagramPost { width: 24%; max-height:271px; box-sizing: border-box; border-radius: 5px; overflow: hidden; }
        .instagram .instagramPost:nth-child(5n) { margin: 0; }
        .instagram .instagramPost a { display: block; height: 100%; }
        .instagram .instagramPost:last-child { margin: 0; }
        .instagram .instagramPost .image img { width: 100%; height: 100%; object-fit:cover; border-radius: 5px; }
        .instagram .instagramPost .image { margin: 0; border-radius: 5px; overflow: hidden; height:100%;}
        .instagram .instagramPost:hover .image img { transition: transform 0.8s ease; transform: scale(1.2); }
        /*---------------------
Product list
---------------------*/
        .vismaProductlist { display: flex; justify-content: flex-start; flex-wrap: wrap; }
    .vismaProductlist.full .vismaProductlistInner { min-width: 1200px; display: flex; justify-content: flex-start; flex-wrap: wrap; }
    .vismaProductlist .productItem { width: 32%; margin: 0 1.5% 15px 0; padding: 35px; box-sizing: border-box; position: relative; overflow: hidden; background: #fff; border-radius: 30px; }
    .vismaProductlist.four .productItem { width: 24%; margin: 0 1.33% 15px 0; }
    .vismaProductlist .productItem a { text-decoration: none; }
    .vismaProductlist .productItem:nth-child(3n) { margin: 0 0 15px 0; }
    .vismaProductlist.four .productItem:nth-child(3n) { margin: 0 1.33% 15px 0; }
    .vismaProductlist.four .productItem:nth-child(4n) { margin: 0 0 15px 0; }
    .vismaProductlist .productItemSmall { width: 49%; margin: 0 2% 15px 0; float: left; padding: 20px; box-sizing: border-box; border: 1px solid #e7e7e7; position: relative; }
        .vismaProductlist .productItemSmall:nth-child(2n) { margin: 0 0 15px 0; }

    .vismaProductlist .logoImage { overflow: hidden; margin: 0 0 10px 0; }
        .vismaProductlist .logoImage img { float: right; max-height: 45px; }
    .vismaProductlist .image { text-align: center; overflow: hidden; height:207px; width:100%; }
        .vismaProductlist .image .reabanner { background: #f7e7e4; color: #562931; position: absolute; top: 7px; left: -27px; padding: 5px 50px; transform: rotate(-40deg); font-size: 18px; }
        .vismaProductlist .image img { height: 100%; width: 100%; object-fit:contain; }
        .vismaProductlist .image:hover img { transition-duration: 1s; -webkit-transition-duration: 1s; transform: scale(1.1); }
    .vismaProductlist .productContent { color: #000; }
        .vismaProductlist .productContent h4 { color: #4a1b18; font-size: 16px; font-weight: 600; margin: 35px 0 15px 0; }
            .vismaProductlist .productContent h4 a { color: #4f2117; font-weight: 500; }
    .vismaProductlist .category { font-size: 16px; color: #717171; margin: 0; }
    .vismaProductlist p { }
        .vismaProductlist p.storageP { text-align: center; font-size: 14px; color: #4f2117; font-weight: 500; display: flex; justify-content: center; align-items: center; margin: 24px 0 35px 0; }
            .vismaProductlist p.storageP img { margin: 0 5px 0 0; }
    .vismaProductlist .productContent p.artNr { color: #9c8682; font-size: 16px; margin: 0; }
    .vismaProductlist .productContent p.package { color: #9c8682; font-size: 14px; margin: 0 0 10px 0; }
    .vismaProductlist .productContent p.price { color: #4f2117; font-size: 16px; font-weight: bold; margin: 25px 0 0 0; }
    .vismaProductlist .buy {margin: 20px 0 0 0; display:flex; justify-content:space-around; align-items:center;}
    .vismaProductlist .buy .buyBtn { background: #f3ded9; color: #502220; font-size: 16px; border-radius: 100px; border: none; padding: 0px; height: 48px; width: 74%; box-sizing: border-box; font-weight: normal; display: inline-flex; justify-content: center; align-items: center; text-align: center; cursor: pointer; font-weight: 500; }
        .vismaProductlist .buy .buyBtn img { margin: 0 10px 0 0; position: relative; bottom: 1px; }

    .vismaProductlist .buy .amountTb { float: left; width: 19%; min-width: 20px; padding: 13.5px 10px; box-sizing: border-box; border: 1px solid #cfc5be; text-align: center; border-radius:10px;}
    .vismaProductlist .buy .buyBtn:hover { background: #F4C7BE; }

    .vismaProductlist .buy .notInStore { color: #df001a; text-align: center; font-size: 18px; margin: 20px 0 0 0; }
    .vismaProductlist .addedText { display: block; background: #59c134; color: #fff; font-size: 18px; width: auto; margin: auto; text-align: center; padding: 5px 10px; margin: 10px 0 0 0; box-sizing: border-box; }

    .vismaProductlist .productItem.productSliderItem { width: 480px; margin: 0; }
.categorySlider .categorySliderItem { width: 687px; height: 397px; position: relative; border-radius: 20px; }
    .categorySlider .categorySliderItem .categoryInfo { position: absolute; bottom: 0; left: 0; padding: 0 0 43px 53px; z-index: 2; }
        .categorySlider .categorySliderItem .categoryInfo h4 { color: #fff; font-size: 28px; font-family: 'Portrait', serif; margin: 0 0 13px 0; }
        .categorySlider .categorySliderItem .categoryInfo p { color: #fff; font-size: 16px; }
.productSliderWrapper,
.categorySliderWrapper { margin: auto; width: 1400px; }
.categorySliderWrapper { margin: 150px auto 0; }
.vismaProductlist.productSlider,
.categorySlider { width: 100000px; position: relative; }
    .vismaProductlist.productSlider .vismaProductlistInner,
    .categorySlider .categorySliderInner { display: flex; flex-wrap: nowrap; justify-content: flex-start; gap: 20px; }
.productSliderButtons,
.categorySliderButtons { display: flex; justify-content: center; align-items: center; gap: 13px; }
    .productSliderButtons span,
    .categorySliderButtons span { width: 52px; height: 52px; cursor: pointer; border-radius: 100px; display: flex; justify-content: center; align-items: center; background: #f3ddd8; }
    .productSliderButtons .inactive,
    .categorySliderButtons .inactive { background: #fff; cursor: default; }
    .productSliderButtons span img,
    .categorySliderButtons span img { width: 17px; }
    .productSliderButtons span:last-child img,
    .categorySliderButtons span:last-child img { transform: rotate(180deg) }
.categorySliderItem .filter { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgb(0,0,0); background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(255,255,255,0) 56%); width: 100%; height: 100%; border-bottom-left-radius: 20px; border-bottom-right-radius: 20px; }
.historyBlock { position: relative; width: 100%; height: 700px; overflow:hidden;}
    .historyBlock video { width: 100%; height: 100%; object-fit:cover; display: block; }
.historyBlockText { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; color: white; width: 80%; max-width: 680px; z-index: 2; }
.historyBlock .filter { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #000; opacity:0.3; }
.historyBlock h2 { font-size: 50px; color: #fff; font-family: 'Portrait', serif; font-weight: normal; line-height: 1.1em; margin: 0 0 45px 0; }
.historyBlock p { margin: 0 0 20px 0; }
    .historyBlock p:last-child { margin: 60px 0 0 0; }
.historyBlock .playLink { padding: 20px 58px; border: 1px solid #fff; border-radius: 100px; display: inline-flex; justify-content: center; align-items: center; gap: 15px; color: #fff; text-decoration: none; }
    .historyBlock .playLink img { width: 18px; }
    .historyBlock .playLink .playDark { display: none; }
    .historyBlock .playLink:hover { background: #fff; color: #4f2117; }
        .historyBlock .playLink:hover .playWhite { display: none; }
        .historyBlock .playLink:hover .playDark { display: inline; }

.recipeDiv { margin: 165px auto; }
    .recipeDiv p { text-align: center; margin: 0; }
    .recipeDiv .recipeText { text-align: center; margin: auto; width: 90%; max-width: 515px; }
        .recipeDiv .recipeText h2 { font-size: 40px; }
    .recipeDiv #recipeSeeMore { color: #4a1b18; font-size: 16px; text-decoration: none; padding: 20px 60px; font-weight: 600; border: 1px solid #F4C7BE; border-radius: 100px; display: inline-block; margin: 70px 0 0; }
        .recipeDiv #recipeSeeMore:hover { background: #F4C7BE; }
        /*------------------
	Sök
------------------*/
        .searchContainer { height: 115px; background: #f3ddd8; display: none; position: absolute; top: 0; z-index: 1002; width: 100%; }
    .searchContainer .inner { display: flex; justify-content: center; align-items: center; width: 1400px; max-width: 100%; height: 100%; position: relative; }
    .searchContainer .searchBox { background: #fff; width: 973px; display: flex; justify-content: center; align-items: center; padding: 8px 10px; border-radius:100px; position:relative; box-sizing:border-box;}
        .searchContainer .searchBox input[type=text] { border: none; padding: 15px; color: #4f2117; font-size: 14px; font-weight: bold; width: 900px; }
            .searchContainer .searchBox input[type=text]:focus { outline: none; }
            .searchContainer .searchBox input[type=text]::placeholder { color: #4f2117; }
        .searchContainer .searchBox .searchIconDiv { width: 49px; height: 49px; background: #f3ddd8; border-radius: 100px; display:flex; justify-content:center; align-items:center; }
        .searchContainer .searchBox .searchIconDiv img {width:20px;}
        .searchContainer .searchBox .searchload { padding: 0 10px; display: none; margin: 0 25px 0 0; position: absolute; right: 10px; }
    .searchContainer #closeSearchBtn { position: absolute; right: 25px; top: 25px; cursor: pointer; }
    .searchContainer #searchResults { position: absolute; top: 100px; width: 973px; max-width: 90%; z-index: 4; 0px 5px 5px 0 rgb(0 0 0 / 31%); background: #fff; border-radius: 20px; box-shadow: 2.5px 4.3px 27px 0 rgba(0, 0, 0, 0.18); }
        .searchContainer #searchResults ul { list-style: none; padding: 20px 0 0 0; margin: 0; }
#searchResults .overlay-search-info {padding: 10px 20px;}
.searchContainer #searchResults ul li.productRow { display: flex; justify-content: flex-start; align-items: center; padding: 10px; }
                .searchContainer #searchResults ul li.productRow .image { width: 66px; height: 66px; overflow: hidden; display: flex; justify-content: center; align-items: center; margin: 0 20px 0 0; }
                    .searchContainer #searchResults ul li.productRow .image img { width: 100%; }
            .searchContainer #searchResults ul li a { font-size: 14px; color: #4f2117; text-decoration: none; }
            .searchContainer #searchResults ul li:hover p,
            .searchContainer #searchResults ul li:hover a { color: #F4C7BE; }
            .searchContainer #searchResults ul li a .price { font-weight: bold; }
            .searchContainer #searchResults ul li p { margin: 0; color: #4f2117; font-weight: 500; }
                .searchContainer #searchResults ul li p.hits { font-size: 10px; }
            .searchContainer #searchResults ul li.pageRow { padding: 10px; }
            .searchContainer #searchResults ul li.allSearchResults { background: #f3ddd8; padding: 25px 0px; border-bottom-right-radius: 20px; border-bottom-left-radius: 20px; }
                .searchContainer #searchResults ul li.allSearchResults:hover { background: #F4C7BE; }
                .searchContainer #searchResults ul li.allSearchResults a { color: #4f2117; font-size: 16px; font-weight: bold; line-height: 1em; text-align: center; display: flex; justify-content: center; align-items: center; }
                    .searchContainer #searchResults ul li.allSearchResults a img { margin: 0 0 0 20px; transform: rotate(180deg); }
        .searchContainer #searchResults .overlay-search-alert { padding: 20px; }

/*---------------------
Submenu horizontal
---------------------*/
.fullmenu { background-color: #cccccc; }
    .fullmenu ul { width: auto; text-align: center; margin: 0; padding: 0; list-style: none; overflow: hidden; }
        .fullmenu ul li { display: inline-block; margin: 0 10px; padding: 0; }
            .fullmenu ul li:last-child { background: none; border: 0; }
            .fullmenu ul li a { margin: 0; padding: 5px 10px; font: normal 12px/40px Arial; color: #555; text-decoration: none; display: block; }
                .fullmenu ul li a:hover { color: #333; }
            .fullmenu ul li.on a, .fullmenu ul li.on-childs a { color: #333; font-weight: bold; }

.instagram h3,
.instagram p { text-align: center; margin: auto; }
.instagram p { max-width: 435px; margin: 50px auto 40px; }
#instagramReadMore { color: #4a1b18; font-size: 16px; text-decoration: none; padding: 20px 60px; font-weight: 600; border: 1px solid #F4C7BE; border-radius: 100px; display: inline-flex; justify-content: center; align-items: center; gap: 15px; }
    #instagramReadMore img { width: 20px; position: relative; bottom: 2px; }
    #instagramReadMore:hover { background: #F4C7BE; }
/*---------------------
Footer layout
---------------------*/
    #footer { background: #fff; padding: 95px 0 120px 0; }
    #footer .inner { display: flex; justify-content: space-between; }
    #footer .footerLogo { display: flex; justify-content: flex-start; align-items: flex-start; flex-direction:column; width: 370px; margin: 0 130px 0 0; }
        #footer .footerLogo p { font-size: 15px; color: #6f6f6f; margin: 40px 0 0 0; }

.footerColumns { width: 1000px; margin: auto; display: flex; justify-content: space-between; align-items: flex-start; }
    .footerColumns .column { width: 25%; }
        .footerColumns .column.small { width: 23%; }
        .footerColumns .column.big { width: 36%; }
        .footerColumns .column h4 { }
        .footerColumns .column p.footerHeader { font-size: 18px; font-weight: bold; color: #4f2117; }
        .footerColumns .column.big p.footerHeader {}
        .footerColumns .column ul { padding: 0; margin: 0; list-style: none; }
            .footerColumns .column ul li a,
            .footerColumns .column p { text-decoration: none; color: #4f2117; }
                .footerColumns .column ul li a:hover { text-decoration: none; color: #F4C7BE; }

.newsletter { border-top: solid 1px #e3e3e3; border-bottom: solid 1px #e3e3e3; }
    .newsletter .inner { display: flex; justify-content: flex-start; align-items: center; padding: 60px 0; }
.newsletterText { margin: 0 95px 0 0; width: 30%; }
    .newsletterText h4 { font-size: 28px; font-family: 'Portrait', serif; margin: 0 0 10px 0; }
    .newsletterText p { font-size: 16px; margin: 0; color: #4a1b18; }
.newsletter .newsletterForm { display: flex; justify-content: space-between; width: 70%; }
    .newsletter .newsletterForm div:first-child { width: 78%; }
    .newsletter .newsletterForm div:last-child { width: 20%; }
.newsletter input[type=text] { width: 100%; box-sizing: border-box; padding: 25px 45px; font-size: 14px; color: #4f2117; border: solid 1px #e3e3e3; display: block; border-radius: 100px; font-weight: 600; }
    .newsletter input[type=text]::placeholder { color: #4f2117; }
.newsletter input[type=submit] { padding: 25px 85px; background: #f3ddd8; color: #4f2117; transition: all 0.7s cubic-bezier(0.4, 0, 0.2, 1); border: none; font-weight: 600; border-radius: 100px; cursor: pointer; display: block; }
    .newsletter input[type=submit]:hover { background: #F4C7BE; }
.newsletter .gdprDiv { margin: 10px 0 0 15px; font-size: 14px; }
    .newsletter .gdprDiv span { margin: 0 0 0 0px; color: #4a1b18; }

.bottomFooter { padding: 35px 0 90px 0; border-top: solid 1px #e3e3e3; }
.bottomFooter .inner {display:flex; justify-content:space-between; align-items:center;}
.socialMedia { position: relative; z-index: 2; border: 1px solid #f4eae8; border-radius: 100px; display:inline-flex; justify-content:flex-start; align-items:center; }
    .socialMedia a { color: #4f2117; font-size: 19px; line-height:1em; text-decoration: none; margin: 0; border-right: 1px solid #f4eae8; padding: 11px 18px; display:inline-block;}
        .socialMedia a:hover { color: #F4C7BE; }
        .socialMedia a:last-child {border-right:none; padding: 11px 28px 11px 18px;}
        .socialMedia a:first-child { padding: 11px 18px 11px 28px; }
.bottomFooter p { font-size: 14px; color: #6f6f6f; text-align: left; margin: 0; display:flex; justify-content:flex-start; align-items:center; gap: 10px;}
#rabbit { position: absolute; bottom: 210px; right: 5%; z-index: 3; max-width: 100%; z-index: 1; }
#fox { position: absolute; bottom: 170px; left: 5%; z-index: 3; max-width: 100%; z-index: 1; }
.customerTypeDiv { width: 722px; max-width: 95%; height: 384px; margin: auto; background: #fff; background-size: cover; justify-content: center; align-items: center; display: flex; }
.overlayCustomerType { position: fixed; bottom: 50px; right: 50px; background: #fff; z-index:999; padding: 25px 35px; border-radius: 20px; width: 335px; box-sizing: border-box; box-shadow: -2.3px -4.5px 40px 0 rgba(0, 0, 0, 0.23); }
    .overlayCustomerType p {color: #4a1b18; font-size: 16px; margin: 0 auto 25px auto; font-weight: 400; }
    .overlayCustomerType a { padding: 14px 40px; text-decoration: none; font-size: 14px; color: #502220; line-height: 1em; display: inline-block; background: #f3ddd8; border: 2px solid #f3ddd8; border-radius:100px; font-weight: 600; }
/*    .overlayCustomerType a:hover {background:#4f2117; color:#F4C7BE;}
*/    .overlayCustomerType a:last-child {background:#fff; }
        .overlayCustomerType a:last-child:hover { background: #f3ddd8; color:#502220; }
@media screen and (max-width: 1500px) {
    .newsletter .newsletterForm {justify-content:flex-start; gap: 20px;}
    .newsletter .newsletterForm div:first-child { width: 65%; }
    .vismaProductlist .productItem.productSliderItem {width:350px;}
    .vismaProductlist .image { max-height: 150px; }
    .vismaProductlist .productContent h4 {margin: 15px 0 10px 0;}
    .vismaProductlist .productItem {padding: 25px;}
    .categorySlider .categorySliderItem {width:500px; height:289px;}
}

@media screen and (max-width: 1400px) {
    #logo { margin: 0; position:relative; }
    .headerLinks {position:relative;}
    .headerLinks .links { margin: 0 0 0 10px; }

    .productSliderWrapper,
    .categorySliderWrapper { width: 100%; }
    .categorySliderWrapper { margin: 50px auto 0; }

    .inner { width: 90%; }
    .header .inner {width: 95%; justify-content:space-between;}
    .contentFull { }

    .webshopTopMenu {margin: 0 200px 0 0; gap: 20px;}

    .startPageProducts { padding: 40px 0px; width: 90%; margin: auto; }
    .startPageCatalogue,
    .trendsDiv,
    .startPageMovie { padding: 60px 30px 40px 30px; }
        .trendsDiv .inner { padding: 0; }
    .instagram .inner { width: auto; padding: 0; }
    .footerColumns { position: relative; }
    .newsletter {  }
    #footer { padding: 110px 0 110px 0; }
    #fox { height: 300px; }
}

@media screen and (max-width: 1200px) {
    h1 { font-size: 48px; }
    h2 { font-size: 28px; }

    #logo {display:block; position:relative; height:52px;}

    .header {height:95px;}
    .header.sticky { }
    .header .inner { justify-content: center; }
    .webshopTopMenu,
    .topmenu{ display:none; }
    .extraDiv {display:none;}
    .headerLinks { position: absolute; right: 25px; }
        .headerLinks .links { margin: 0 0 0 8px; width:34px; height:34px;}
            .headerLinks .links img { width:15px;}
    .header #responsive-menu-btn { display: block; width:30px; position:absolute; left: 25px;  }
    .editorText { padding: 0 2%; box-sizing: border-box; }
        .editorText h1 { line-height: 40px; margin: 0 0 20px 0; }
    #footer .footerText { padding: 0 2%; box-sizing: border-box; }
    #footer .footerContactItem { width: 100%; float: none; text-align: center; margin: 25px 0; }
    #miniCart { top: 75px; z-index: 4; }
    .topImageContent .topImageContentText { top: 96px; height: calc(100% - 96px);}

    .mobileSalesPitch { display: block; padding: 25px 0; text-align: center; }
        .mobileSalesPitch span { margin: 0 5px; display: block; }
            .mobileSalesPitch span svg { margin: 0 3px 0 0; }
    .shopLink { display: inline-block; position: absolute; left: 85px; top: 18px; background: #fff; border-radius: 20px; font-size: 16px; text-decoration: none; padding: 10px; color: #562931; font-weight: bold; }
    .content .inner { padding: 30px 0 60px 0; }

    .contentright { float: none; width: 90%; margin: auto; }
    #footer { padding: 60px 0 150px 0; }
    #rabbit { height: 250px; }
    #fox { height: 250px; }
    .vismaProductlist .buy .buyBtn { font-size: 12px; }
    .vismaProductlist.full { overflow-x: scroll; }

    #start-puffs { margin: 0 auto 50px auto; }
        #start-puffs .puffitem .rub, #start-puffs .puffitem a .rub { font-size: 22px; margin: 0; }

        #start-puffs .puffitem .content p, #start-puffs .puffitem a .content p { font-size: 14px; }
        #start-puffs .puffitem .content .puffText { max-width: 80%; }
}

@media screen and (max-width: 1100px) {
    .salesPitches { overflow-x: scroll; }
        .salesPitches .pitch { min-width: 130px; text-align: center; margin: 0 10px; font-weight: 500; }
            .salesPitches .pitch .icon { margin: 0 0 10px 0; }

    .startPageCatalogue { padding: 60px 30px; }
        .startPageCatalogue .inner { min-height: 0; }
        .startPageCatalogue h2 { font-size: 36px; }
        .startPageCatalogue p { font-size: 16px; margin: 20px 0; }
        .startPageCatalogue .catalougeButtons a { display: inline-block; margin: 20px 0 0 0; text-align: center; width: 200px; }
    #footer .inner{flex-wrap:wrap;}
    #footer .footerLogo { width: 100%; margin: 0 0 30px 0;}
    .footerColumns { flex-wrap: wrap; width: 100%; margin: auto; }
        .footerColumns .column,
        .footerColumns .column.small,
        .footerColumns .column.big {  }
            .footerColumns .column ul li a, .footerColumns .column p { font-size: 14px; }


}

@media screen and (max-width: 1000px) {

    .historyBlock {height:500px; display:flex; justify-content:center; align-items:center;}
        .historyBlock #historyImage { height: 100%; width: auto; object-fit: cover; margin: auto;}
        .historyBlock h2 {font-size: 32px; margin: 0 0 20px 0;}
        .historyBlock p:last-child {margin: 20px 0 0 0;}
        .shopLink { font-size: 14px; padding: 10px 10px 7.5px 10px; }
    #start-puffs .puffitem .content .puffText { display: none; }
    #start-puffs .puffitem .content .contentInner, #start-puffs .puffitem a .contentInner { width: 90%; margin: auto; position: relative; height: 100%; left: 0; bottom: 0; display: flex; justify-content: center; align-items: center; }
    #start-puffs .puffitem .rub, #start-puffs .puffitem a .rub { text-align: center; font-size: 26px; font-weight: normal; line-height: 1em; }
    .newsletter .inner {flex-wrap:wrap;}
    .newsletterText { width: 100%; margin: 0 0 20px 0;}
    .newsletter .newsletterForm {width:100%;}
    .newsletter input[type=submit] {padding: 25px 45px;}
    .newsletter .newsletterForm div:first-child {width: 75%;}
    .newsletter input[type=text] {padding: 25px;}
    .searchContainer .searchBox { width: 90%; justify-content: flex-start; }
        .searchContainer .searchBox .searchIconDiv { }
        .searchContainer .searchBox input[type=text] {width: 80%;}

    .vismaProductlist.four .productItem { width: 32%; margin: 0 1.33% 15px 0; }
    .vismaProductlist.four .productItem:nth-child(3n) { margin: 0 0 15px 0; }
    .vismaProductlist.four .productItem:nth-child(4n) { margin: 0 1.33% 15px 0; }

}

@media screen and (max-width: 800px) {
    h1 { font-size: 36px; }
    h2 { font-size: 24px; }
    h3 { font-size: 18px; }


    .threeColumns { flex-direction: column; }
        .threeColumns .column { margin: 0; width: 100%; }
    .header .pickCustomerTypeDiv{display:none;}
    .topBar { padding: 10px 0; }
        .topBar .left { display: flex; align-items: center; }
        .topBar .inner .right .topBarNav { display: none; }
    .topBarIcons { display: block; height: 25px; }
        .topBarIcons .iconText { display: none; }
        .topBarIcons .links { margin: 0 0 0 15px; }

    .salesPitchesInner { justify-content: normal; }
    .selectedProducts h3,
    .recipeProducts h3,
    .trendsDiv h3 { font-size: 26px; margin: 0 0 20px 0; }
    .productListTop h3 { margin: 0;}

    .arrowLinkBottom { display: block; text-align: right; color: #4f2117; font-size: 14px; text-decoration: none; font-weight: bold; margin: 30px 30px 0 0; }
    .startPageArticle .arrowLinkBottom { text-align: center; margin: 30px 0 0 0; }
    .productListTop a.arrowLinkTop { display: none; }

    .startPageCatalogue { padding: 60px 0 0 0 }
        .startPageCatalogue .inner { flex-direction: column; padding: 0; width: 100% !important; }
        .startPageCatalogue .right { position: relative; width: 100%; }
        .startPageCatalogue .left { text-align: center; width: 80%; margin: 0 0 40px 0; }
        .startPageCatalogue .right img { display: block; }

    #start-puffs .puffitem { width: 100%; margin: 0 0 20px 0; }

    .startPageArticleInner { max-width: none; }

    #movieAnchor { display: none; }

    .recipeDiv {margin: 60px 0;}

    .ramRub { background: url(/gfx/rubBgSmall.png) no-repeat top center; height: 47px; line-height: 55px; text-align: center; margin: 30px 0; }
    .recipeProducts h2,
    .selectedProducts h2 { text-align: center; margin: 0px 0 40px 0; }

    .selectedProducts h3,
    .recipeProducts h3,
    .trendsDiv h3,
    .trendsDiv h3,
    .startPageMovie h3,
    .productSliderWrapper h3,
    .categorySliderWrapper h3 { font-size: 22px; }
    .productSliderButtons span, .categorySliderButtons span {width:34px; height:34px;}
        .productSliderButtons span img, .categorySliderButtons span img {width:12px;}

        .startPageVideo { height: 460px; background-size: cover; }
        .startPageVideo .startPageVideoText { width: 90%; margin: auto; overflow: hidden; }

    .facebooknews .newsItem { width: 49%; margin: 0 2% 2% 0; }
        .facebooknews .newsItem:last-child,
        .facebooknews .newsItem:nth-child(4n),
        .facebooknews .newsItem:nth-child(2n) { margin: 0; }
    #footer {padding: 30px 0 60px 0;}

    .newsletter .gdprDiv { width: 100%; }
        .newsletter .gdprDiv span,
        .newsletter .gdprDiv a { font-size: 12px; color: #4f2117; font-weight: bold; }


    .vismaProductlist .productItem.productSliderItem { width: 300px; margin: 0; }
    .categorySlider .categorySliderItem {width: 400px; height: 250px;}
    .bottomFooter {padding: 20px 0;}
    .bottomFooter .inner { flex-direction: column; justify-content: center; gap: 10px; }
}

@media screen and (max-width: 860px) {

    .topImageContent {max-height: 360px;}
    .topImageContent img {object-fit:cover; height:100%; min-height:315px;}
    .topImageContent .topImageContentText {max-width:80%; margin: auto;}
        .topImageContent .topImageContentText h1 { font-size: 38px; }
        .topImageContent .topImageContentText p { font-size: 18px; }
    .startBlogPosts { flex-wrap: wrap; }
    .startBlogPosts .startPageArticle {width: 100%;}
    table.responsive-table,
    table.responsive-table thead,
    table.responsive-table tbody,
    table.responsive-table th,
    table.responsive-table td,
    table.responsive-table tr { display: block; border: 0; }
        table.responsive-table thead tr { position: absolute; top: -9999px; left: -9999px; }
        table.responsive-table tr { }
        table.responsive-table td { padding: 4px 6px; }
        table.responsive-table td { border: none; position: relative; white-space: normal; text-align: left !important; }
            table.responsive-table td:before { position: absolute; top: 6px; left: 6px; width: 45%; padding-right: 10px; white-space: nowrap; text-align: left; font-weight: bold; }
            table.responsive-table td:before { content: attr(data-title); }
    .newsletter .gdprDiv {}
}


@media screen and (max-width: 680px) {
    #footer .footerContactItem { font-size: 16px; line-height: 18px; }
    #footer .footerColumns p strong { display: block; }

    .vismaProductlist.four .productItem { width: 49%; margin: 0 1.33% 15px 0; }
        .vismaProductlist.four .productItem:nth-child(2n) { margin: 0 0 15px 0; }
        .vismaProductlist.four .productItem:nth-child(3n) { margin: 0 1.33% 15px 0; }
}

@media screen and (max-width: 600px) {

    h1 { font-size: 32px; }
    .start-news .newsItem { width: 100%; float: left; margin: 0 0 2% 0; }
    .facebooknews .newsItem .image { height: 150px; }

    #nextFacebook { margin: 0 0 0 4%; }
    .blockImage { display: block; float: none !important; }
    .customerTypeDiv { height: 250px; }


    .startPageVideoText p { display: none; }

    .startPageCatalogue,
    .trendsDiv,
    .startPageMovie { padding: 30px 0px 20px 0px; }
    .newsletterText h4 {font-size: 22px;}
    .newsletterText p {font-size:14px;}
    .newsletter .inner{padding: 30px 0;}
    .newsletter input[type=text] { font-size: 12px; padding: 12px 12px; }
    .newsletter input[type=submit] { padding: 12px 25px; }
    .newsletter .gdprDiv {margin: 10px 0 0 0;}

    .newsletter .newsletterForm div:first-child { width: 65%; }

    .footerColumns { flex-direction:row-reverse; gap: 30px 0; }
        .footerColumns .column.big { width: auto; flex-basis: 100%; order:2;}
        .footerColumns .column { width: auto; flex-basis: 50%; order:1; }
    .topImageContent {max-height: 400px;}
    .topImageContent .topImageContentText h1 { font-size: 32px; }
    .topImageContent .topImageContentText p { font-size: 16px; }

    .footerColumns { flex-wrap: nowrap; }
        .footerColumns .column.big { margin: 20px 0 0 0; }
}

@media screen and (max-width: 480px) {

    h1 { font-size: 32px; }
    h2 { font-size: 22px; }
    h3 { font-size: 16px; }
    body {font-size: 14px;}
    .headerLinks {right: 10px;}
    .header #responsive-menu-btn { left: 10px; }
    .startPageArticle {height:400px;}
    .startPageArticle h4 { font-size: 26px; }
        .startPageArticle p { font-size: 14px; }
    .startPageArticle .articleText {padding: 0 0 25px 30px; width: 75%;}

    .recipeDiv .recipeText h2 { font-size: 32px; }

    .readMoreBtn { font-size: 16px; }
    .startPageVideo h2 { font-size: 34px; margin: 0 0 30px 0; }

    #rabbit { height: 180px; bottom: 140px; right: 0px; }
    #fox { height: 180px; bottom: 140px; left: -110px; }

    .categorySlider .categorySliderItem { width: 280px; height: 200px; }
        .categorySlider .categorySliderItem .categoryInfo {padding: 0 0 10px 10px;}
            .categorySlider .categorySliderItem .categoryInfo h4 {font-size:18px;}
            .categorySlider .categorySliderItem .categoryInfo p {font-size:14px; margin:0;}


    .newsletter .newsletterForm div:first-child { width: 70%; }
    .newsletter .newsletterForm {gap:10px; }
    .newsletter .newsletterForm div {}

    .bottomFooter p:last-child {display:flex; flex-direction:column; justify-content:center; align-items:center;}
    .bottomFooter p:last-child img { max-width:100%; }

    .vismaProductlist.four .productItem { width: 100%; margin: 0 0% 15px 0; }
}


@media screen and (max-width: 360px) {
    .newsletter .newsletterForm { gap: 10px; display: flex; flex-direction: column; }
        .newsletter .newsletterForm div { width: 100%; }
            .newsletter .newsletterForm div:first-child { width: 100%; }
}
