/** Media Queries **/
@media screen and (min-width: 1920px) {
    
    #bottombar { background-size: 100% auto; }
    
}
@media screen and (max-width: 1660px) {
    
    #menu ul li { font-size: 18px; }

}
@media screen and (max-width: 1520px) {
    
    #menu ul { gap: 15px; }
    #menu ul li:last-of-type { margin-left: -15px; }
    ul#categories li:not(:last-of-type):after { content: none; }

}
@media screen and (max-width: 1380px) {

    #menu ul li { font-size: 17px; }

}
@media screen and (max-width: 1160px) {
    
    #topbar ul.taglines li { letter-spacing: initial; }
    ul.usermenu li.username { display: none; }

}
@media screen and (max-width: 960px) {

    ul.files.werkbladkleuren { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 15px; row-gap: 15px; margin-top: 0; }
	ul.files.werkbladkleuren li { }

}

@media screen and (max-width: 600px) {
    
    body { margin-top: 60px; font-size: 15px; }
    
    input.btn,
    span.btn,
    .btn,
    a.btn {
        margin-top: 10px;
        padding: 7px 15px 9px 15px;
    }
    
    /* temp */
    #header { display: none; }
    ul.usermenu { display: none; }
    #logo + #twentyfive { display: none; }
    /*#cart { display: none; }*/
    #cart a .summary { display: none; }
    #menu { display: none; }
    
    #topbar ul.usps { display: none; }
    
    .header-content { height: 60px; }
    #logo img { width: 200px; }
    
    .row.merken .content .page_content { padding: 45px 0; }
    .row.merken h2 { margin-top: 0; margin-bottom: 30px; font-size: 24px; }
    .row.merken .merken { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; }
    
    #categorie-products .product span.label {
        left: -70px;
        right: auto;
        transform: rotate(-45deg);
    }
	
	/* button op home */
	.catalogus-btn { width:110px; height:110px; margin-top:-8px; right:20px; z-index:99; }
	.catalogus-btn span { top:0; left:0; padding:24px 10px 0 10px; width:100%; height:100%; font-size:12px; }
	.catalogus-btn img { display:none; }
	
	.cta-content span.title { white-space:normal; }
	
	/* catalogus pagina */
    #pagina.catalogus { min-height: 0; }
    
	img.catalogus { top: 5px; right: 15px; width: 38%; }
	
	#catalogus #ctlg-buttons { width:100%; }	
	#catalogus #ctlg-buttons .text { width:50%; }
	#catalogus #ctlg-buttons .ctlg-btn { margin:0 0 4% 0; width:100%; }
	
	#catalogus .ctlg-form .field label { padding-right:0; margin-bottom:5px; width:100%; text-align:left; }
	#catalogus .ctlg-form .field.nieuwsbrief { margin-top:20px; }
	#catalogus .ctlg-form .field.nieuwsbrief label { padding-left:28px; padding-top:1px; box-sizing:border-box; }
	#catalogus .ctlg-form .field label.error { right:10px; bottom:3px; pointer-events:none; }
	#catalogus .ctlg-form .field input[type=text],
	#catalogus .ctlg-form .field textarea { width:100%; }
	#catalogus .ctlg-form .field input[type=text].pr25 { width:25%; }
	#catalogus .ctlg-form .field input[type=text].pr50 { width:50%; }
	#catalogus .ctlg-form .field input[type=checkbox] { left:5px; }
		
	#catalogus .ctlg-form .field.optioneel:after { top: 11px; right: 12px; }

    div#container {
        width: 100%;
    }

    div.screenwidth {
        /*width: 85%;*/
    }

    #sfeer {
        margin-bottom: 24px;
    }

    #sfeer div.slide div.title h2 {
        font-size: 24px;
        line-height: 1.2;
    }

    #sfeer div.slide div.title h2 span {
        font-size: 32px;
        line-height: 1.2;
    }

    #sfeer div.slide div.title a {
        padding: .5em;
    }

    #sfeer div.slide div.title {
        margin-top: -24px;
    }

    #sfeer div.owl-dots {
        bottom: -30px;
    }

    #home-container {
        padding-top: 0;
    }

    #sfeer div.slide div.title span.more,
    #sfeer div.slide div.title span.subtitle {
        display: none;
    }

    .owl-theme .owl-dots .owl-dot span {
        width: 12px;
        height: 12px;
        margin: 3px 6px;
    }

    #home-popular-products > h2 {
        width: 100%;
    }

    div#container[data-pagetype="home"] div#belmij,
    div#home-taglines,
    div.column,
    div#home-popular-products,
    div#home-aanbieding,
    div.product {
        width: 100% !important;
        float: left;
    }

    main { }
    main .content { width: 90%; }

    div#container div#belmij div.cta-form form > div {
        width: 100%;
        float: left;
        margin-bottom: 0.75em;
    }

    div.cta-form input[type="text"] {
        border-right: 0;
    }

    div#container div#belmij div.cta-form input.btn {
        width: 40%;
        float: right;
    }

    div#home-taglines {
        padding-bottom: 2em;
    }

    div.home-content h1 > span {
        white-space: normal;
    }

    #footer { padding: 30px 0; }
    #footer .columns { flex-direction: column; gap: 20px; }
    #footer .columns .column { width: 100%; max-width: none !important; }
    #footer .columns .column h3 { margin-bottom: 0; }
    
    #footer #mailstage { flex-direction: column; }
    #footer #mailstage .input { width: 100%; }
    #footer #mailstage input[name=ms-submit] { padding: 14px 20px 16px 20px; }
    
    #footer .social em { top: 1px; }
    
    .whatsapp-btn { right: 20px; bottom: 20px; width: 40px; height: 40px; }
    .melding + .whatsapp-btn { /*bottom: 140px;*/ bottom: 0; }
    .melding.showhide + .whatsapp-btn { bottom: 20px; }
    .whatsapp-btn img { width: 20px; height: 20px; }
    
    /*#smartsupp-widget-container > div { bottom: 99px!important; }
    #smartsupp-widget-container.nonoti > div { bottom: 19px!important; }*/
    #smartsupp-widget-container > div { bottom: initial; }
    #smartsupp-widget-container.nonoti > div { bottom: initial; }
    
    .melding { margin-top: 0; margin-bottom: 0; margin-left: 0; padding: 15px 10% 20px 5%; width: 100%; height: auto; font-size: 14px; line-height: 1.2; text-align: left; }
    .melding span.text { padding-left: 35px; }
    .melding span.text:before { position: absolute; top: 18px; left: 5%; margin-bottom: -6px; margin-right: 6px; width: 20px; height: 20px; }
    
    .melding span.close { width: 40px; height: 40px; }
    .melding span.close img { width: 20px; height: 20px; }

    div#bottombar {
        background-size: 200% auto;
    }

    div#topbar {
        height: 60px;
        width: 100%;
        position: fixed;
        top: 0;
        left: 0;
        border: none;
        z-index: 99;
        background-color: var(--pink);
    }

    div.credits {
        height: auto;
    }

    #bottombar { padding-top: 60px; }
    
    #bottombar .bottommenu.top { padding: 15px 0 30px 0; }
    #bottombar .bottommenu.top .columns { flex-direction: column; gap: 20px; }
    #bottombar .bottommenu.top .columns .column:first-of-type ul { column-count: auto; }
    #bottombar .bottommenu.top .columns .column.empty { display: none; }
    #bottombar .bottommenu.top .columns .column h3 { margin-bottom: 5px; }
    
    #bottombar .bottommenu.bottom { padding: 30px 0 45px 0; }
    #bottombar .bottommenu.bottom .credits { padding-left: 0; background-image: none; }
    
    .logos { align-items: center; gap: 30px; margin-top: 30px; padding: 30px 0 0 0; }
    .logos a img { height: 30px; }

    #search {
        display: none;
    }

    a.logo-mobile { position: absolute; display: flex; align-items: center; top: 0; width: 110px; height: 100%; left: 5%; }
    a.logo-mobile img { position: relative; display: block; top: 0; width: 100%; }

    #cart {

        padding: 0;
        margin-top: 0.3em;
    }

    #cart .smalllinks {
        display: none;
    }

    #cart > a {
        padding-right: 0;
    }

    #cta { margin-top: 60px; margin-bottom: 25px; }
    
    .home-content h1 {
        line-height: 1.2;
        margin-bottom: .3em;
    }

    span#menu-toggle,
    span#show-search-mobile,
    a#cart-mobile {
        position: absolute;
        display: block;
        top: 15px;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        filter: invert(1);
        background-color: rgba(255,255,255,0.25);
        background-position: center;
        background-size: 16px;
        background-repeat: no-repeat;
    }
    span#menu-toggle {
        right: 5%;
        background-size: 18px;
        background-image: url(/images/icons/menu.svg);
    }
    span#show-search-mobile {
        right: calc(5% + 30px + 5px);
        background-image: url(/images/icons/search.svg);
    }
    a#cart-mobile {
        right: calc(5% + 60px + 10px);
        background-image: url(/images/icons/cart.svg);
        background-size: 18px;
        background-position: top 5px right 7px;
    }

    a#cart-mobile span.qty {
        position: absolute;
        display: flex;
        align-items: center;
        justify-content: center;
        top: -6px;
        right: -3px;
        width: 14px;
        height: 14px;
        font-family: "Inter", sans-serif;
        font-size: 8px;
        color: #fff;
        font-weight: 300;
        line-height: 1;
        border-radius: 50%;
        background-color: #0e1014;
    }

    #menu-mobile { position: fixed; display: block; top: 0; right: 0; width: 90%; height: 100%; color: #fff; box-sizing: border-box; overflow-y: auto; transform: translateX(100%); transition: all ease 0.25s; z-index: 101; background-color: var(--pink); }
    #menu-mobile .menu-content { display: flex; flex-direction: column; padding: 30px 0; width: 80%; }

    #menu-mobile,
    #menu-mobile .menu-content { min-width: 0; }

    .menu-close { position: absolute; top: 15px; right: 5%; width: 30px; height: 30px; border-radius: 50%; filter: invert(1); background-image: url(/images/icons/close.svg); /*background-color: rgba(255,255,255,0.25);*/ background-position: center; background-size: 20px; background-repeat: no-repeat; }

    #menu-mobile.mobile-active { box-shadow: -10px 0px 30px rgba(0, 0, 0, 0.25); transform: translateX(0); }
    
    #menu-mobile ul { text-align: left; height: auto; }
    #menu-mobile ul:before { display: none; }
    
    #menu-mobile ul#categories-mobile,
    #menu-mobile ul#user-mobile,
    #menu-mobile ul#pages-mobile { display: block; padding: 12px 0 15px 0; border-top: 1px solid rgb(255 255 255 / 25%); }
    
    #menu-mobile ul#categories-mobile { padding: 0 0 15px 0; border-top: 0; margin-top: 0; }
    #menu-mobile ul#pages-mobile { padding: 15px 0 0 0; }
    
    #menu-mobile ul li { display: block; top: 0; margin-right: 0; }
    
    #menu-mobile ul#categories-mobile li:last-of-type { display: none; }
    
    #menu-mobile ul li a:hover { color: #fff; opacity: 0.5; }
    
    #menu-mobile ul#categories-mobile li a,
    #menu-mobile ul#user-mobile li a,
    #menu-mobile ul#pages-mobile li a { display: block; padding: 8px 0; font-size: 18px; line-height: 19px; }

    #menu-mobile ul#user-mobile li a,
    #menu-mobile ul#pages-mobile li a { padding: 5px 0; font-size: 15px; font-weight: 400; }

    #menu-mobile ul#user-mobile li a { display: flex; align-items: center; gap: 8px; }
    #menu-mobile ul#user-mobile li a img { width: 16px; height: 16px; filter: invert(1); }
    #menu-mobile ul#user-mobile li a.login img { width: 16px; height: 14px; }
    #menu-mobile ul#user-mobile li a.signup { }
    #menu-mobile ul#user-mobile li a.account { }
    #menu-mobile ul#user-mobile li a.logout img { width: 16px; height: 14px; }
    
    ul.usermenu li.username {
        display: none;
    }

    div#container[data-pagetype="home"] div#belmij div.cta-form form > div {
        width: 100%;
    }

    div#container[data-pagetype="home"] div#belmij div.cta-form input[type="text"] {
        border-right: 0;
    }

    div#container[data-pagetype="home"] div#belmij div.cta-form input.btn {
        width: 40%;
    }

    div.cta-content span.title {
        font-size: 1.2em;
        line-height: 1.3;
    }

    div.home-content h1, div.home-content > div > h2 {
        line-height: 1.3;
        font-size: 1.2em;
    }

    .home-content p,
    .pagina-content p,
    .text-content p {
        line-height: 1.5;
    }
    
    #pagina.reviews .page_content .txt p {
        padding: 25px;
        padding-bottom: 30px;
    }

    ul#pages-mobile li a,
    ul#categories-mobile li a,
    ul#user-mobile li a {
        display: inline-block;
        padding: 6px 0;
        line-height: 19px;
        font-size: 18px;
        font-weight: 600;
    }

    div.breadcrumbs {
        width: 100%;
    }

    #pagina .page_content,
    #pagina[data-url="algemene-voorwaarden"] .page_content {
        columns: auto;
        -webkit-columns: auto;
        -moz-columns: auto;

        column-rule: medium none;
        -webkit-column-rule: medium none;
        -moz-column-rule: medium none;

        column-gap: normal;
        -moz-column-gap: normal;
        -webkit-column-gap: normal;

        width: 100%;
        margin-bottom: 0em;
        padding-bottom: 0;
        margin-top: 0;
    }

    #pagina[data-url="werkbladkleuren"] .page_content .txt {
        columns: auto;
        -webkit-columns: auto;
        -moz-columns: auto;

        column-rule: medium none;
        -webkit-column-rule: medium none;
        -moz-column-rule: medium none;

        column-gap: normal;
        -moz-column-gap: normal;
        -webkit-column-gap: normal;
        width: 100%;

    }
    
    ul.files.werkbladkleuren { margin-top: 45px; }

    div#map {
        height: 200px;
    }

    div#contactformdiv {
        margin-top: 15px;
        padding: 20px;
        width: 100%;
    }

    #pagina.screenwidth { padding: 0; }
    #pagina .pagina-content .page_largefoto { margin: 0; margin-top: 15px; margin-bottom: 30px; aspect-ratio: 16 / 9; border-radius: 5px; background-color: #efefef; }
    
    #pagina .pagina-content,
    #pagina[data-url="contact"] .pagina-content { margin-top: 0; margin-bottom: 45px; }
        
    #pagina .pagina-content h1,
    #pagina .pagina-content .page_content,
    #pagina .pagina-content .page_media { padding: 0; box-sizing: border-box; }

    #pagina .pagina-content h1 { margin-bottom: 20px; width: 100%; font-size: 24px; line-height: 1.2; }
    #pagina .pagina-content h2 { font-size: 20px; line-height: 1.2; }
    #pagina .pagina-content .page_content { margin-top: 30px; }
    #pagina .pagina-content .page_largefoto + .page_content { margin-top: 0; }
    #pagina .pagina-content .page_media { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; width: 100%; margin-top: 45px; margin-bottom: 15px; padding-left: 0; border-left: 0; }
    #pagina .pagina-content .page_media img { width: 100%; border-radius: 3px; }
    
    
    #pagina.reviews .page_content .txt { gap: 15px; }

    
    /** product listing**/
    .product .img { margin-bottom: 0; width: 120px; height: auto; border-bottom: none; }
    .product .img img { display: inline-block; width: auto; max-width: 80%; height: auto; max-height: 70%; }
    .product .descr { flex: 1; margin-left: 0; padding: 15px 20px 15px 20px; width: 100%; border-left: 1px solid #ccc; text-align: left; }
    .product .descr h2 { margin-bottom: 5px; height: auto; font-size: 16px; line-height: 1.2 !important; }
    .product .descr span.price { font-size: 16px; }
    .product .descr span.price.incl { font-size: 16px; }
    
    .product .descr span.price.excl:after,
    .product .descr span.price.incl:after { position: relative; top: -5px; margin-left: 2px; font-size: 12px; font-weight: 500; letter-spacing: -0.25px; }
    
    .product { margin: .5em 0; padding: .4em 0; height: auto; border-bottom: 1px solid #ccc; }
    .product > a { max-width: none; width: 100%; padding-top: 0; float: left; }

    .nextandprev {
        margin-top: 5px;
        margin-bottom: -10px;
        font-size: .8em;
    }

    .product .banner {
        top: 0;
    }

    /** home products */
    #home-aanbieding {
        margin: 1em 0;
    }

    #home-aanbieding h2 + .product {
        margin-top: 0;
        padding-top: 0;
        padding-bottom: 0;
        border-bottom: 1px solid var(--darkpink)
    }

    div#home-aanbieding div.product > a {
        padding-top: 0;
        position: relative;

    }

    div#home-aanbieding h2 {
        line-height: 2;
    }

    div#home-aanbieding div.product h2, div#home-aanbieding div.product div.descr span.price {
        padding: 0;
    }

    div#home-aanbieding div.product div.img {
        margin: 1em 0;
    }

    div#home-aanbieding div.product div.descr {
        position: absolute;
        top: 0;
        right: 0;
        height: 100%;
        padding-top: 1em;
        box-sizing: border-box;
    }

    div#home-aanbieding div.product h2, div#home-aanbieding div.product div.descr span.price {
        background: var(--white);
        color: var(--darkpink);

    }

    /** categorie **/
    #categorie-header {
        width: 100%;
    }

    #categorie-header div.inner {
        margin: 0;
        width: 100%;
    }

    #filter-overview {
        padding-right: 0;
    }

    #categorie-products { display: flex; flex-direction: column; gap: 15px; margin-top: 0; width: 100%; }
    #categorie-products .product { margin: 0; margin-left: 0; width: 100%; }
    #categorie-products .product .product-wrapper { position: relative; flex-direction: row; }
    #categorie-products .product .product-wrapper a { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; }

    #categorie-products .weekaanbiedinglabel,
    #categorie-products .weekaanbiedinglabel.big,
    #categorie-products .weekaanbiedinglabel.bigger { top: 20px!important; left: auto!important; font-size: 11px; transform: rotate(-25deg); }
    
    
    #product .images .weekaanbiedinglabel { top: 20px !important; left: -110px; padding: 8px 0; font-size: 15px; }
    #product .images .weekaanbiedinglabel.big { top: 40px!important; left: -90px; }
    #product .images .weekaanbiedinglabel.bigger { top: 60px!important; left: -70px; }


    /** filters **/
    #categorie-controls {
        width: 100%;
        height: 100%;
        padding-top: 40px;
        box-sizing: border-box;
        min-height: 0;
        position: fixed;
        overflow-y: auto;
        background: rgba(239, 239, 239, 0.9);
        background: #efefef;
        background-color: rgb(255 255 255 / 95%);

        -webkit-overflow-scrolling: touch;
        top: 0;
        left: 0;
        z-index: 9;
        padding: 1em;
        top: 137px;
        display: none;

        top: 136px;
        left: 0;
        right: 0;
        width: auto;
        height: auto;

        padding: 110px 15px 45px 15px;

        max-height: 100%;

        bottom: auto;
        top: 0;
        display: block;

        transition: transform 250ms ease;
        transform: translate3d(0px, -100%, 0px);

        -webkit-transition: -webkit-transform 250ms ease;
        -webkit-transform: translate3d(0px, -100%, 0px);

    }
    
    main .row.categories .content #categorie-controls {
        gap: 20px;
        width: 100%;
    }
    main .row.categories .content .page_content {
        padding: 30px 0 0 0;
    }

    div#categorie-controls.mobile-active {

        transform: translate3d(0px, 0%, 0px);

        -webkit-transform: translate3d(0px, 0%, 0px);

    }

    div#categorie-controls > div {
        padding: 0;
    }

    div#categorie-controls > div.txtblock {
        display: none;

    }

    div.filter.active div.title span.arrow {
        display: none;
    }

    div.filter div.filter-content.filter-rangeslider {
        float: left;
        width: 100%;
    }

    div#mobile-triggers {
        position: fixed;
        display: flex;
        gap: 8px;
        top: 60px;
        left: 0;
        padding: 20px 5% 20px 5%;
        width: 100%;
        box-sizing: border-box;
        z-index: 97;
        background-color: rgb(255 255 255 / 95%);
    }

    div#mobile-triggers > span {
        margin: 0;
        width: 100%;
        float: left;
    }

    span.btn.mobile-action {
        height: 30px;
        line-height: 30px;
        padding: 0;
        font-weight: normal;
    }

    span.btn.mobile-action:nth-child(2) {
        /*margin-left: 4%;*/
    }

    #categorie-sorting {
        position: relative;
        position: fixed;
        display: none;
        display: block;
        float: left;
        top: 44px;
        bottom: auto;
        padding: 0 15px 15px 15px;
        width: 100%;
        height: 60px;
        box-sizing: border-box;
        transition: transform 150ms ease;
        transform: translate3d(0px, 0, 0px);
        z-index: 96;
        background-color: rgb(255 255 255 / 95%);
    }
    #top-block + blockquote { margin-top: -10px; margin-bottom: 30px; padding: 25px; }
    #top-block + #filter-overview + #categorie-sorting,
    #top-block + blockquote + #filter-overview + #categorie-sorting { top: 0; }

    #categorie-sorting.mobile-active {
        transform: translate3d(0px, 60px, 0px);
        -webkit-transform: translate3d(0px, 130px, 0px);
    }

    #filter-overview .filter,
    #categorie-sorting span {
        font-size: 13px;
    }

    #filter-overview .title,
    #categorie-sorting .title,
    #filter-overview .filter,
    #categorie-sorting span {
        font-size: 14px;

        display: block;
        float: left;
        padding: 0;
        margin: 0 15px 0 0;
    }

    #categorie-sorting span.close, #categorie-controls span.close {
        display: none;
        font-size: 24px;
        width: 14px;
        height: 14px;
        position: absolute;
        top: 8px;
        right: 10px;
        margin: 0
    }

    #categorie-sorting .title {
        margin-bottom: 6px;
        width: 100%;
        font-weight: 600;
    }

    .filter-rangeslider .slider {
        background-color: #ccc;
    }

    .filter-list {
        padding-top: 10px;
    }
    .filter-list label input + span:before {
        background-color: #ccc;
    }
    .filter.enum.color .filter-list {
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 8px;
        width: 75%;
    }

    .filter .title, .txtblock .title {
        padding: 0;
    }
    .filter .title span.arrow {
        background-image: none;
    }

    .gr-pink:hover, .gr-green:hover {
        background-position: 100% 0 !important;
    }

    .gr-pink.reversed:hover, .gr-green.reversed:hover {
        background-position: 0 0 !important;
    }

    .gr-pink.reversed {
        background-color: var(--darkgreen);
    }

    #filter-overview {
        display: none;
    }

    #categorie-header .inner {
        border-bottom: 0;
    }

    #categorie {
        min-height: 0;
        padding-top: 50px;
    }

    #noresults {
        margin-top: -10px;
        padding: 20px 25px 25px 25px;
        line-height: 1.4;
    }

    #noresults > span {
        white-space: normal;
    }

    .optie .popup span.mobile.close {
        display: block;
        width: 9px;
        height: 9px;
        position: absolute;
        top: .5em;
        right: .5em;
        background-image: url(/images/icons/cross-black@2x.png);
        background-size: 9px 9px;
        background-position: top left;
        background-repeat: no-repeat;
        border: 5px solid transparent;

    }

    div.filter div.title span.clear {
        background-image: url(/images/icons/cross@2x.png);
        background-size: 9px 9px;
    }

    #categorie-sorting span.active:after {
        margin-bottom: 1px;
        border-bottom: 1px solid #efefef !important;
        filter: grayscale(1);
        background-image: url(/images/icons/arrow-small-sprite-green@2x.png);
        background-size: 9px 10px;
    }

    /**product **/
    #product .page_content {
        flex-direction: column;
        padding-bottom: 45px;
    }
    #product .left-container,
    #product .right-container {
        width: 100%;
    }
    div#product div.left,
    div#product div.right {
        width: 100%;
        float: left;
    }
    div#product div.descr.specs div.inner {
        padding: 20px;
        columns: initial;
    }

    div#product div.images div.thumbs {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
    div#product div.images div.thumbs > div > img {
        width: auto;
        max-width: 90%;
        height: auto;
        max-height: 90%;
    }

    div#product div.images div.large img {
        width: 65%;
        width: auto;
        max-width: 90%;
        max-height: 200px;
        padding: 20px 0;
    }

    div#product div.images div.large div.media-item {
        height: auto;
        line-height: 1;
    }

    div#product div.images {
        min-height: 0;
        margin-bottom: 15px;
        padding-bottom: 0;
    }

    div#product div.owl-dots {
        display: block!important;
        display: none!important;
        bottom: -30px;
    }

    div#product div.images div.large img {
    }

    div#product div.descr div.inner {
        columns: auto;
        -webkit-columns: auto;
        -moz-columns: auto;

        column-rule: medium none;
        -webkit-column-rule: medium none;
        -moz-column-rule: medium none;

        column-gap: normal;
        -moz-column-gap: normal;
        -webkit-column-gap: normal;

    }

    div#product div.left div.descr {
        margin-bottom: 1.5em;
    }

    div#categorie h1, div#product h1, div#winkelwagen h1, div.hasform h1, div#klant h1 {
        font-size: 1.4em;
        line-height: 1.3;
        margin: 1em 0;
    }

    div#categorie #categorie-header h1 {
        margin: 0;
    }

    div#product div.descr div.inner {
        border: none;
        border-top: 1px solid #ccc;
        padding: 0;
        padding-top: .5em;
    }

    div.selectbox div.keuze {
        width: 30px;
        height: 30px;
        line-height: 30px;
    }

    div.selectbox div.keuze img {
        max-width: 30px;
        max-height: 30px;
    }

    div.bestellen div.totals div.row:not(.order) > div:first-child {
        width: 65%;
    }

    div.bestellen div.totals div.row:not(.order) > div:nth-child(2) {
        width: 35%;
        text-align: right;
    }

    div.select-styler {
        text-align: left;
        display: inline-block;
        float: none;
    }

    #product .related-products .prods { flex-direction: column; gap: 15px; }
    #product .related-products .prods .product { padding: 0; }
    #product .related-products .prods .product .product-wrapper { display: flex; width: 100%; }
    #product .related-products .prods .product .product-wrapper > a { max-width: none; float: left; }
    #product .related-products .prods .product { height: auto; margin: 0; }
    #product .related-products .prods .product .img { padding: 0; width: 120px; height: auto; border: none; }
    #product .related-products .prods .product .img img { max-height: 90px; }
    #product .related-products .prods .product .descr h2 { height: auto; }
    #product .related-products .prods .product .descr span.price { display: flex; font-size: 16px; }
    #product .related-products .prods .product .descr span.price.excl:after,
    #product .related-products .prods .product .descr span.price.incl:after { position: relative; top: 0; margin-left: 5px; font-size: 12px; font-weight: 500; letter-spacing: -0.25px; }
    #product .related-products .prods .product .descr span.price.excl:after { content: " excl. btw"; }
    
    .bestellen .row { height: auto; }
    .bestellen .row.ppb { height: auto; }
    .bestellen .row.de_vijf { display: flex; /*flex-direction: column;*/ }
    .bestellen .row.de_vijf ul { position: relative; display: flex; flex-wrap: wrap; gap: 0; justify-content: center; margin-top: 15px; width: 100%; text-align: center; }
    .bestellen .row.de_vijf ul li.tooltip { margin-bottom: 4px; margin-right: 4px; display: inline-block; float: none; position: static; }
    .bestellen .row.de_vijf ul li.tooltip .tooltip { left: auto; right: -5px; bottom: -12px; transform: translate(0,100%); -webkit-transform: translate(0,100%); }
    .bestellen .row.de_vijf ul li.tooltip .tooltip::before { left: auto; right: 75px; }

    .bestellen .row:not(.order):not(.optie):not(.countdown) > div:nth-of-type(1),
    .bestellen .row:not(.order):not(.optie):not(.countdown) > div:nth-of-type(2) {
        width: 50%!important;
    }
    .countdownbar {
        margin-bottom: 10px;
        width: 100%!important;
    }

    .bestellen .row.stelsamentitle {
        margin-top: 1em;
    }

    .optie.boolean .checkbox, .optie.integer .select, .optie.boolean .select {
        width: 60%;
    }

    .optie.boolean .prices, .optie.integer .prices {
        width: auto;
        padding-right: 0;
        float: right;
    }

    .optie.boolean .prices > span.rowtotaal, .optie.integer .prices > span.rowtotaal {
        display: none !important;
    }

    #product .descr ul li,
    #shoppingcart .item > .aantal span.action:before,
    span#go-login, span#go-register, span#go-login2 {
        background-image: url(/images/icons/arrow-right-pink@2x.png);
        background-size: 8px 12px;
    }

    span#continue-without-account, span#continue-without-account2 {
        background-image: url(/images/icons/arrow-down-pink@2x.png);
        background-size: 12px 8px;
    }

    .btn.order span.arr, a.btn.order span.arr, input.btn.order span.arr {
        background-size: 50% 50%;
        margin-left: .6em;
    }

    .select-styler span.arrow, .dropdown span.arrow {
        background-image: url(/images/icons/arrow-down-grey@2x.png);
        background-size: 12px 8px;
    }

    .select-styler:hover span.arrow, .dropdown:hover span.arrow {
        background-image: url(/images/icons/arrow-down-darkgrey@2x.png);
    }

    .optie.active .dropdown span.arrow {
        background-image: url(/images/icons/arrow-up-darkgrey@2x.png);
    }

    #winkelwagen .item .bestellen .totals .cancel:before {
        background-image: url(/images/icons/arrow-left-pink@2x.png);
        background-size: 8px 12px;
    }

    .dropdown span.image {
        margin-right: 1px;
    }

    .optie .popup {
        background: rgba(255, 255, 255, 0.9);
        top: 2.7em;
        width: 100%;
        left: 0;
    }

    .row.optie > div:nth-child(2) {
        width: 100%;
    }

    .bestellen .row:not(.order) > div:first-child {
        width: 100%;
        white-space: normal;
    }

    /** new trick: setting input fields font-size to 16px disables annoying iphone autozoom! **/
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="search"],
    select,
    textarea {
        font-size: 16px;
    }

    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="search"],
    select,
    textarea {
        box-sizing: border-box;
    }
    
    .hasform input[type=text],
    .hasform input[type=email],
    .hasform input[type=password],
    .hasform select,
    .hasform textarea {
        width: 100%!important;
        max-width: 100%;
    }

    div.dropdown {
        padding: 5px;
        padding-right: 38px;
        width: 210px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    div.dropdown span.name span.rowtotaal {
        display: none;
    }

    div#dialog, div#prompt {
        margin-left: 0;
        margin-top: 0;
        left: 5%;
        top: 20%;
        width: 90%;
    }

    div#prompt input[type=text] {
        width: 100%;
        margin-bottom: .4em;
    }

    /** shoppingcart **/
    #shoppingcart {
        border-top: 1px solid #ccc;
    }

    #shoppingcart div.item.header {
        display: none;
    }

    #shoppingcart div.item > div.thumb {
        display: none;
    }

    #shoppingcart div.item > div.description {
        width: 100%;
        white-space: normal;
    }

    #shoppingcart div.item > div.aantal {
        width: 50%;
        overflow: visible;
        white-space: normal;
        margin-top: .7em;
        float: right;
    }

    #shoppingcart div.item span.mobile.qtylb {
        display: block;
        font-size: 13px;
    }

    #shoppingcart div.item div.actions {
        margin-top: 0;
    }

    #shoppingcart div.item > div.prijs,
    #shoppingcart div.item > div.subtotaal,
    #shoppingcart div.item > div.aantal span.qty {
        display: none;
    }

    #shoppingcart div.item:not(.header) div.subtotaal.mobile {
        display: block;
        width: 50%;
        float: left;
        text-align: left;
        margin-top: .7em;
    }

    #shoppingcart div.item > div.subtotaal.mobile > span.sbtlb, #shoppingcart div.item > div.subtotaal.mobile > span.qtylb {
        display: block;
        font-size: 13px;
        float: none;
    }

    #shoppingcart div.item > div.subtotaal.mobile > span.sbtlb {
        margin-top: .3em;

    }

    #shoppingcart div.item > div.description h3 {
        white-space: normal;
    }
        
    #besteltraject.hasform #shoppingcart div.item > div.description {
        width: 90%;
    }

    #besteltraject.hasform #shoppingcart div.item > div.description div.currconfig > div {
        width: 100%;
    }

    #besteltraject.hasform #shoppingcart div.item:not(.header) div.subtotaal.mobile {
        margin-left: 8%;
    }

    #besteltraject.hasform #shoppingcart div.item > div.aantal {
        float: left;
        margin-top: 0
    }

    div#winkelwagen div.item div.bestellen {
        width: 100%;
        margin-top: -160px;
    }

    div#winkelwagen div.overzicht {
        width: 100%;
        float: left;
    }

    a.btn.order.smaller, div.btn.order.smaller,
    div.bestellen div.row.order div.btn.order,
    .hasform div.formrow input.btn.order,
    .hasform div.formrow input.login {
        font-size: 16px;
        padding: 5px 10px 5px 15px;
        line-height: 1.6;
        margin-top: 5px;
        width: auto;
        height: auto;
        min-width: 110px;
    }

    .hasform div.formrow input.login {
        float: right;
    }

    div#besteltraject form#loginform div.formrow:last-child div.label {
        width: 30%;
        float: left;
        clear: none;
    }

    div#besteltraject form#loginform div.formrow:last-child div.input {
        width: 60%;
        float: right;
        clear: none;
    }

    div#besteltraject form#loginform div.formrow:last-child {
        margin-top: 10px;
    }
    
    #winkelwagen .overzicht .row > .label {
        width: 55%;
    }

    #winkelwagen .overzicht .row > div {
        width: 45%;
    }

    #winkelwagen .overzicht .row.totaal > .label {
        line-height: 32px;
        vertical-align: bottom;
    }

    #winkelwagen .btns {
        padding: 1em 0;
    }

    #winkelwagen {
        float: left;
        padding-bottom: 2em;
    }

    span#enter-kortingscode.cart {
        bottom: -11em;
    }

    #product span#enter-kortingscode {
        right: auto;
        left: 0;
        top: 12em;
    }

    #progressbar-menu { width: 100%; }
    #progressbar-menu .step { border-bottom: none; }
    #progressbar-menu .step .pb { padding: 8px 15px; }

    #bestellen-winkelmand {
        display: none;
    }

    #column-content {
        padding: 0;
        padding-bottom: 60px;
        width: 100%;
        min-height: 0;
    }

    #column-content .inner {
        width: 100%;
        padding: 0;
    }

    .hasform .formrow,
    .hasform .formrow > div,
    .hasform .formrow > .label {
        width: 100%;
        text-align: left;
    }
    .hasform .formrow > div,
    .hasform .rowset {
        /*padding: 0;*/
    }
    .hasform .formrow .input {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
    }
    .hasform .formrow .input br {
        display: none;
    }

    .hasform #login,
    .hasform #klant-login,
    .hasform #besteltraject-register {
        width: 100%;
        padding: 25px;
        padding-bottom: 30px;
        line-height: 28px;
    }

    #klant.hasform #login form#loginform {
        display: flex;
        flex-direction: column;
        gap: 5px;
        padding: 0;
    }
    
    .hasform .formrow {
        margin-bottom: 0;
        position: relative;
    }
    #klant.hasform form#loginform .formrow:last-of-type .label {
        display: none;
    }
    
    .hasform .formrow > .field-loading {
        position: absolute;
        top: 1.8em;
        right: 4em;
    }

    .hasform .formrow > .label {
        /*height: 26px;
        line-height: 32px;*/
    }

    .hasform .rowset {
        /*padding: .5em 1em .8em 1em;*/
    }

    #besteltraject-identify-actions > .label:first-child {
        display: none;
    }

    #besteltraject-identify-actions {
        margin-top: .6em;
    }

    #besteltraject-identify-actions span.action {
        line-height: 2.4;
    }

    .hasform .formrow > .input a,
    .hasform .formrow > .input small {
        /*display: none;*/
    }

    .hasform .formrow.dp,
    .formrow .label.dp {
        display: none;
    }

    .hasform .formrow.mobile,
    .formrow .label.mobile {
        display: block;
    }
    .hasform label.error[for="akkoord"] {
        right: auto;
        white-space: normal!important;
    }

    .hasform label.error {
        left: auto;
        margin-left: 0;
        right: 0;
    }

        
    #klant-overzicht { padding: 25px 30px; }
    #klant-overzicht .col { width: 100%; margin-right: 0!important; margin-bottom: .7em; }

    .hasform .rowset h3,
    #klant .rowset h3,
    #afronden .formrow h3 {
        /*margin-left: -.7em;*/
    }

    .hasform #login.rowset h3,
    .hasform #besteltraject-register.rowset h3,
    .hasform #besteltraject-shippingaddress.rowset h3 {
        display: block;
        margin-left: 0;
        width: 100%;
        line-height: 1;
    }
    
    #besteltraject #column-content .inner { padding: 0; }

    .hasform #login,
    .hasform #klant-login,
    .hasform #besteltraject-register,
    #besteltraject-mailadres {
        /*height: 224px;*/
    }

    #besteltraject #shoppingcart .item > .aantal span.qty {
        display: inline-block;
    }

    #besteltraject #shoppingcart .item > .aantal {
        margin-top: .1em;
    }

    #besteltraject #shoppingcart .item > .subtotaal.mobile > span.sbtlb {
        margin-top: .2em;
    }

    .hasform .overzicht {
        width: 100%;
    }

    .hasform #klant-overzicht .formrow > .label {
        height: auto;
    }

    #afronden {
        padding: .5em 1em .8em
    }

    div.hasform div.formrow > div.input.checkbox.avw {
        width: 100%;
    }

    div#afronden div.formrow:last-child div.label {
        display: none;
    }

    div#afronden div.formrow:last-child {
        width: 100%;
    }

    div.hasform div#afronden div.formrow > div.input a {
        display: inline;
    }

    div#search-mobile {
        position: absolute;
        top: 10px;
        right: calc(5% + 30px + 5px);
        width: calc(100% - 173px - 5%);
        height: 40px;
        border-radius: 4px;
        overflow: hidden;
    }
    div#search-mobile.show {
        display: block;
    }
    div#search-mobile form {
        display: flex;
    }
    div#search-mobile input[type=search] {
        flex: 1;
        padding: 0 0 0 10px;
        width: 100%;
        height: auto;
        font-family: "Inter", sans-serif;
        font-size: 15px;
    }
    ::-ms-clear {
        display: none!important;
        width : 0; height: 0;
    }
    div#search-mobile span.submit {
        display: inline-block;
        width: 40px;
        height: 40px;
        background-color: white;
        background-image: url(/images/icons/search.svg);
        background-position: center;
        background-size: 18px;
        background-repeat: no-repeat;
        box-sizing: border-box;
    }

    div#contactformdiv.hasform div.formrow,
    div#catalogusformdiv.hasform div.formrow {
        margin-bottom: .5em;
    }

    #categorie-header #top-block .media {
        position: relative;
        opacity: 1;
        width: 100%;
        height: 200px;
    }
    #categorie-header #top-block .media + .content {
        width: 100%;
        padding: 25px;
    }
    #categorie-header #top-block {
        margin: 15px 0 30px 0;
        min-height: 0;
    }
    #categorie-header #top-block .content span.readmore {
        display: -webkit-box;
        -webkit-line-clamp: 4;
        -webkit-box-orient: vertical;  
        overflow: hidden;
        margin-bottom: 30px;
    }
    #categorie-header #top-block .content span.readmore.showhide {
        display: block;
    }
    #categorie-header #top-block .content span.readmore:after {
        position: absolute;
        margin-top: 8px;
        content: "Lees meer";
        text-decoration: underline;
    }
    #categorie-header #top-block .content span.readmore.showhide:after {
        content: "Lees minder";
    }
    
    #kiek-left,
    #kiek-right { width: 60px; font-size: 40px; color: #fff; }
    #kiek-left:hover,
    #kiek-right:hover { color: #fff; }
    
    /* De vijf zekerheden */
    #zekerheden { flex-direction: column; gap: 15px; margin-top: 30px; }
    #zekerheden .item { display: block; padding: 30px; width: 100%; min-height: 360px; box-sizing: border-box; }
    #zekerheden .item .icon { gap: 5px; padding: 0 15px 10px 15px; height: auto; }
    #zekerheden .item .icon img { width: 70px; height: 70px; }
    #zekerheden .item .text { display: block; margin-top: 15px; }

}