Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                
<!doctype html>
<html class="no-js" lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>Printzelf</title>
    <meta name="description" content="">
    <meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0'>

    <base href="//printzelf.nl/new/">

    <link rel="preload" href="https://printzelf.nl/new/assets/fonts/custom/Panton-ExtraBold.woff2" as="font" type="font/woff2" crossorigin>
    <link rel="preload" href="https://printzelf.nl/new/assets/fonts/custom/Panton-SemiBold.woff2" as="font" type="font/woff2" crossorigin>
    <link rel="preload" href="https://printzelf.nl/new/assets/fonts/custom/Panton-ThinItalic.woff2" as="font" type="font/woff2" crossorigin>
    <link rel="preload" href="https://printzelf.nl/new/assets/fonts/custom/Panton-Regular.woff2" as="font" type="font/woff2" crossorigin>
    <link rel="preload" href="https://printzelf.nl/new/assets/fonts/custom/Panton-Bold.woff2" as="font" type="font/woff2" crossorigin>
    <link rel="preload" href="https://printzelf.nl/new/assets/fonts/custom/Panton-Heavy.woff2" as="font" type="font/woff2" crossorigin>

    <link rel="shortcut icon" href="favicon.ico">

    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="assets/css/bootstrap.min.css">

    <!-- Icon Font CSS -->
    <!-- <link rel="stylesheet" href="assets/css/simple-line-icons.css">
    <link rel="stylesheet" href="assets/css/ionicons.min.css"> -->

    <!-- Plugins CSS -->
    <link rel="stylesheet" href="assets/css/plugins.css">

    <!-- Animate CSS -->
    <link rel="stylesheet" href="assets/css/animate.css">

    <!-- Main Style CSS -->
    <link rel="stylesheet" href="assets/css/style.css">

    <!-- Custom Style CSS -->
    <link rel="stylesheet" type="text/css" href="assets/css/custom.css">

    <link rel="stylesheet" href="assets/css/modal.css">

    <!-- Owl Carousel CSS -->
    <link rel="stylesheet" href="assets/css/owl.carousel.min.css">
    <link rel="stylesheet" href="assets/css/owl.theme.default.min.css">

    <!-- Mobile menu -->
    <link rel="stylesheet" href="dist/mmenu.css">

    <link href="assets/css/dataTables.bootstrap4.min.css" rel="stylesheet" type="text/css" />
    <link href="assets/css/buttons.bootstrap4.min.css" rel="stylesheet" type="text/css" />
    <link href="assets/css/responsive.bootstrap4.min.css" rel="stylesheet" type="text/css" />

    <!-- Smartwizard -->
    <link rel="stylesheet" href="assets/css/smart_wizard.css">

    <!-- Lightgallery -->
    <link rel="stylesheet" href="node_modules/lightgallery/dist/css/lightgallery.css">
    <link rel="stylesheet" href="node_modules/lightgallery/dist/css/lg-transitions.css">

    <link rel="stylesheet" href="https://unpkg.com/tippy.js@6/animations/scale-subtle.css"/>

    <link rel="stylesheet"href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>

    <!-- DropZone -->
    <link rel="stylesheet" href="assets/css/basic.css">
    <link rel="stylesheet" href="assets/css/dropzone.css">

    <!-- Google Fonts  -->
    <!-- <link href="https://fonts.googleapis.com/css2?family=Signika:wght@300;400;600;700&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Dancing+Script|Rochester" rel="stylesheet"> -->

    <!-- Modernizer JS -->
    <script src="assets/js/vendor/modernizr-2.8.3.min.js"></script>

    <!-- Google Captcha -->
    <script src="https://www.google.com/recaptcha/api.js" async defer></script>

    <!-- jQuery JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>


</head>

<body>
  <div class="absoluteoverlay"></div>
  <div class="closemenu"></div>
  <nav id="menu">
    <ul>
        <li class="mobmenudividers"><i class="icon-cart mobmenuicon"></i><a href="home">Winkelwagen</a></li>
        <li class="mobmenudividers"><i class="icon-user mobmenuicon"></i><a href="accountgegevens">Mijn account</a></li>
        <li class="mobmenudividers"><i class="icon-support mobmenuicon"></i><a href="klantenservice">Klantenservice</a></li>
        <li class="mobmenudividers"><i class="fas fa-sign-in-alt mobmenuicon"></i><a href="login">Inloggen</a></li>
        <li class="mm-divider">Producten</li>
        <li><span><span><i class="mobilemenuicon icon-interieur"></i></span> Interieur & inrichting</span><ul>
                <li class="mm-divider">Kantoor</li><li><a href="interieur-inrichting/acoustische-panelen"><img src="https://printzelf.nl/new/assets/images/custom/noimgprint.jpg"> Acoustische panelen</a></li><li><a href="interieur-inrichting/rolgordijnen"><img src="https://printzelf.nl/new/assets/images/custom/noimgprint.jpg"> Rolgordijnen</a></li>
                <li class="mm-divider">Woonkamer</li><li><a href="interieur-inrichting/gordijnen"><img src="https://printzelf.nl/new/assets/images/custom/noimgprint.jpg"> Gordijnen</a></li><li><a href="interieur-inrichting/spanplafond"><img src="https://printzelf.nl/new/assets/images/custom/noimgprint.jpg"> Spanplafond</a></li><li><a href="interieur-inrichting/tapijt"><img src="https://printzelf.nl/new/assets/images/custom/noimgprint.jpg"> Tapijt</a></li>
                <li class="mm-divider">Slaapkamer</li><li><a href="interieur-inrichting/spanplafond"><img src="https://printzelf.nl/new/assets/images/custom/noimgprint.jpg"> Spanplafond</a></li>
                <li class="mm-divider">Keuken</li><li><a href="interieur-inrichting/tafelkleed"><img src="cms/images/producten/tafelkleed/thumbnail/Salontafelkleed_eigen_print_1.jpg"> Tafelkleed</a></li>
          </ul></li><li><span><span><i class="mobilemenuicon icon-plaat"></i></span> Plaat</span><ul>
                <li class="mm-divider">Plaat soorten</li><li><a href="plaat/dibond"><img src="cms/images/producten/dibond/thumbnail/3mm.jpg"> Dibond</a></li><li><a href="plaat/dibond-rvs-look"><img src="cms/images/producten/dibond-rvs-look/thumbnail/851_a2855a53c8d8c7fb_6.jpg"> Dibond Butler Finish (RVS look)</a></li><li><a href="plaat/forex"><img src="cms/images/producten/forex/thumbnail/276_113e9436a8b4125e_2_3.jpg"> Forex</a></li><li><a href="plaat/hard-pvc"><img src="https://printzelf.nl/new/assets/images/custom/noimgprint.jpg"> Hard PVC</a></li><li><a href="plaat/kanaalplaat"><img src="https://printzelf.nl/new/assets/images/custom/noimgprint.jpg"> Kanaalplaat</a></li><li><a href="plaat/plexiglas-blockout"><img src="https://printzelf.nl/new/assets/images/custom/noimgprint.jpg"> Plexiglas blockout</a></li><li><a href="plaat/plexiglas-glashelder"><img src="https://printzelf.nl/new/assets/images/custom/noimgprint.jpg"> Plexiglas glashelder</a></li><li><a href="plaat/plexiglas-opaal"><img src="https://printzelf.nl/new/assets/images/custom/noimgprint.jpg"> Plexiglas opaal</a></li><li><a href="plaat/polycarbonaat"><img src="https://printzelf.nl/new/assets/images/custom/noimgprint.jpg"> Polycarbonaat</a></li><li><a href="plaat/schuimplaat-hard-top"><img src="cms/images/producten/schuimplaat-hard-top/thumbnail/a905e9ac6757e727klein_1.jpg"> Schuimplaat hard top</a></li><li><a href="plaat/trespa"><img src="https://printzelf.nl/new/assets/images/custom/noimgprint.jpg"> Trespa</a></li>
                <li class="mm-divider">Plaat producten</li><li><a href="plaat/blind-ophangsysteem"><img src="cms/images/producten/blind-ophangsysteem/thumbnail/1157_7725c8ceac772b8b_1_1.jpg"> Blind ophangsysteem</a></li><li><a href="plaat/bouwbord"><img src="https://printzelf.nl/new/assets/images/custom/noimgprint.jpg"> Bouwbord</a></li><li><a href="plaat/foto-op-hout"><img src="https://printzelf.nl/new/assets/images/custom/noimgprint.jpg"> Foto op hout</a></li><li><a href="plaat/foto-op-paneel"><img src="cms/images/producten/foto-op-paneel/thumbnail/Dibond_butler_finish_1.jpg"> Foto op paneel</a></li><li><a href="plaat/fotoblok"><img src="https://printzelf.nl/new/assets/images/custom/noimgprint.jpg"> Fotoblok </a></li><li><a href="plaat/freesletters"><img src="cms/images/producten/freesletters/thumbnail/883_7e83114d66175782_2.jpg"> Freesletters</a></li><li><a href="plaat/keuken-achterwand"><img src="https://printzelf.nl/new/assets/images/custom/noimgprint.jpg"> Keuken achterwand (spatwand)</a></li><li><a href="plaat/lichtbakplaat"><img src="https://printzelf.nl/new/assets/images/custom/noimgprint.jpg"> Lichtbakplaat</a></li><li><a href="plaat/makelaarsbord"><img src="https://printzelf.nl/new/assets/images/custom/noimgprint.jpg"> Makelaarsbord</a></li><li><a href="plaat/makelaarsbord-twister"><img src="https://printzelf.nl/new/assets/images/custom/noimgprint.jpg"> Makelaarsbord twister</a></li><li><a href="plaat/muurcirkel"><img src="https://printzelf.nl/new/assets/images/custom/noimgprint.jpg"> Muurcirkel</a></li><li><a href="plaat/plafondhanger"><img src="https://printzelf.nl/new/assets/images/custom/noimgprint.jpg"> Plafondhanger</a></li><li><a href="plaat/rallybordjes"><img src="https://printzelf.nl/new/assets/images/custom/noimgprint.jpg"> Rallybordjes</a></li><li><a href="plaat/reclamebord"><img src="cms/images/producten/reclamebord/thumbnail/488_9eed45c470107e0d_2.jpg"> Reclamebord</a></li><li><a href="plaat/systeemplafond"><img src="cms/images/producten/systeemplafond/thumbnail/1.jpg"> Systeemplafond</a></li><li><a href="plaat/xxl-puzzel"><img src="https://printzelf.nl/new/assets/images/custom/noimgprint.jpg"> XXL puzzel</a></li>
          </ul></li><li><span><span><i class="mobilemenuicon icon-folie"></i></span> Folie</span><ul>
                <li class="mm-divider">Foliesoorten</li><li><a href="folie/asfaltfolie"><img src="https://printzelf.nl/new/assets/images/custom/noimgprint.jpg"> Asfaltfolie</a></li><li><a href="folie/easy-folie"><img src="https://printzelf.nl/new/assets/images/custom/noimgprint.jpg"> Easy folie (herbruikbaar)</a></li><li><a href="folie/lichtdoorlatend"><img src="https://printzelf.nl/new/assets/images/custom/noimgprint.jpg"> Lichtdoorlatende folie</a></li><li><a href="folie/muurfolie"><img src="https://printzelf.nl/new/assets/images/custom/noimgprint.jpg"> Muurfolie</a></li><li><a href="folie/one-way-vision"><img src="cms/images/producten/one-way-vision/thumbnail/one-way-vision-folie.jpg"> One Way Vision</a></li><li><a href="folie/statisch-hechtend"><img src="https://printzelf.nl/new/assets/images/custom/noimgprint.jpg"> Statisch hechtend</a></li><li><a href="folie/transparante-folie"><img src="cms/images/producten/transparante-folie/afbeeldingen/orajet_folie_transparant.jpg"> Transparante folie</a></li><li><a href="folie/universele-folie"><img src="cms/images/producten/universele-folie/thumbnail/orajet_folie_wit.jpg"> Universele folie</a></li><li><a href="folie/vloerfolie"><img src="cms/images/producten/vloerfolie/afbeeldingen/materiaal-folie-dot-vloerfolie.png"> Vloerfolie (binnen)</a></li><li><a href="folie/wrap-cast"><img src="https://printzelf.nl/new/assets/images/custom/noimgprint.jpg"> Wrap folie / Cast</a></li><li><a href="folie/zandstraalfolie"><img src="cms/images/producten/zandstraalfolie/afbeeldingen/materiaal-folie-zandstraalfolie.png"> Zandstraalfolie</a></li>
                <li class="mm-divider">Folie producten</li><li><a href="folie/autosticker"><img src="https://printzelf.nl/new/assets/images/custom/noimgprint.jpg"> Autosticker</a></li><li><a href="folie/etiketten"><img src="https://printzelf.nl/new/assets/images/custom/noimgprint.jpg"> Etiketten</a></li><li><a href="folie/keuringsstickers"><img src="https://printzelf.nl/new/assets/images/custom/noimgprint.jpg"> Keuringsstickers</a></li><li><a href="folie/magneetsticker"><img src="https://printzelf.nl/new/assets/images/custom/noimgprint.jpg"> Magneetsticker</a></li><li><a href="folie/makelaarsbord-stickers"><img src="https://printzelf.nl/new/assets/images/custom/noimgprint.jpg"> Makelaarsbord stickers</a></li><li><a href="folie/muursticker"><img src="https://printzelf.nl/new/assets/images/custom/noimgprint.jpg"> Muursticker</a></li><li><a href="folie/raamsticker"><img src="cms/images/producten/raamsticker/thumbnail/Raamsticker_fullcolor.jpg"> Raamsticker</a></li><li><a href="folie/sticker-klein"><img src="https://printzelf.nl/new/assets/images/custom/noimgprint.jpg"> Sticker klein</a></li><li><a href="folie/stickers"><img src="https://printzelf.nl/new/assets/images/custom/noimgprint.jpg"> Stickers</a></li><li><a href="folie/vloer-sticker"><img src="https://printzelf.nl/new/assets/images/custom/noimgprint.jpg"> Vloersticker</a></li>
          </ul></li><li><span><span><i class="mobilemenuicon icon-papier"></i></span> Papier & karton</span><ul>
                <li class="mm-divider">Papier- & Kartonsoorten</li><li><a href="papier/behang"><img src="https://printzelf.nl/new/assets/images/custom/noimgprint.jpg"> Behang</a></li><li><a href="papier/blueback-papier"><img src="https://printzelf.nl/new/assets/images/custom/noimgprint.jpg"> Blueback papier</a></li><li><a href="papier/canvas"><img src="https://printzelf.nl/new/assets/images/custom/noimgprint.jpg"> Canvas</a></li><li><a href="papier/displaykarton"><img src="https://printzelf.nl/new/assets/images/custom/noimgprint.jpg"> Displaykarton</a></li><li><a href="papier/honingraatkarton"><img src="https://printzelf.nl/new/assets/images/custom/noimgprint.jpg"> Honingraatkarton</a></li><li><a href="papier/golfkarton"><img src="https://printzelf.nl/new/assets/images/custom/noimgprint.jpg"> Karton</a></li><li><a href="papier/poster-papier"><img src="https://printzelf.nl/new/assets/images/custom/noimgprint.jpg"> Poster papier</a></li><li><a href="papier/xxl-papier"><img src="https://printzelf.nl/new/assets/images/custom/noimgprint.jpg"> XXL papier</a></li><li><a href="papier/xxl-poster"><img src="https://printzelf.nl/new/assets/images/custom/noimgprint.jpg"> XXL poster</a></li>
                <li class="mm-divider">Papier & karton producten</li><li><a href="papier/lichtbakposter"><img src="https://printzelf.nl/new/assets/images/custom/noimgprint.jpg"> Lichtbakposter</a></li><li><a href="papier/papieren-bekers"><img src="https://printzelf.nl/new/assets/images/custom/noimgprint.jpg"> Papieren bekers</a></li><li><a href="papier/placemats"><img src="https://printzelf.nl/new/assets/images/custom/noimgprint.jpg"> Placemats</a></li><li><a href="papier/posters"><img src="https://printzelf.nl/new/assets/images/custom/noimgprint.jpg"> Posters</a></li><li><a href="papier/posters-groot"><img src="https://printzelf.nl/new/assets/images/custom/noimgprint.jpg"> Posters groot </a></li>
          </ul></li><li><span><span><i class="mobilemenuicon icon-textiel"></i></span> Textiel</span><ul>
                <li class="mm-divider">Textielsoorten</li><li><a href="textiel/decostof"><img src="https://printzelf.nl/new/assets/images/custom/noimgprint.jpg"> Decostof</a></li><li><a href="textiel/multitexpro"><img src="https://printzelf.nl/new/assets/images/custom/noimgprint.jpg"> MultiTexPro</a></li><li><a href="textiel/textiel-lichtdoorlatend"><img src="https://printzelf.nl/new/assets/images/custom/noimgprint.jpg"> Textiel lichtdoorlatend</a></li><li><a href="textiel/vlaggenstof"><img src="https://printzelf.nl/new/assets/images/custom/noimgprint.jpg"> Vlaggenstof</a></li><li><a href="textiel/vlaggenstof-longlife"><img src="https://printzelf.nl/new/assets/images/custom/noimgprint.jpg"> Vlaggenstof longlife</a></li><li><a href="textiel/vlaggenstof-mesh"><img src="https://printzelf.nl/new/assets/images/custom/noimgprint.jpg"> Vlaggenstof mesh</a></li><li><a href="textiel/walltexpro"><img src="https://printzelf.nl/new/assets/images/custom/noimgprint.jpg"> WalltexPro</a></li><li><a href="textiel/xxl-textiel-5m-breed"><img src="https://printzelf.nl/new/assets/images/custom/noimgprint.jpg"> XXL textiel 5m breed</a></li>
                <li class="mm-divider">Textiel producten</li><li><a href="textiel/desk-divider"><img src="https://printzelf.nl/new/assets/images/custom/noimgprint.jpg"> Akoestisch desk divider </a></li><li><a href="textiel/akoestisch-materiaal"><img src="https://printzelf.nl/new/assets/images/custom/noimgprint.jpg"> Akoestisch materiaal</a></li><li><a href="textiel/akoestisch-pro-panelen"><img src="https://printzelf.nl/new/assets/images/custom/noimgprint.jpg"> Akoestisch Pro panelen</a></li><li><a href="textiel/akoestisch-pro-plafondpanelen"><img src="https://printzelf.nl/new/assets/images/custom/noimgprint.jpg"> Akoestisch Pro plafondpanelen</a></li><li><a href="textiel/akoestisch-room-divider"><img src="https://printzelf.nl/new/assets/images/custom/noimgprint.jpg"> Akoestisch room divider </a></li><li><a href="textiel/baniervlag"><img src="https://printzelf.nl/new/assets/images/custom/noimgprint.jpg"> Baniervlag</a></li><li><a href="textiel/beachflag-drop"><img src="cms/images/producten/textiel_producten/beachflags/drop-flag.jpg"> Beachflag drop</a></li><li><a href="textiel/beachflag-mini"><img src="cms/images/producten/textiel_producten/BEACHVLAGG_MINI/1760_55a8939b286b6499.jpg"> Beachflag mini</a></li><li><a href="textiel/dekbedovertrek"><img src="cms/images/producten/dekbedovertrek/thumbnail/Dekbedovertrek_met_je_eigen_ontwerp.jpg"> Dekbedovertrek</a></li><li><a href="textiel/detectiepoorthoes"><img src="https://printzelf.nl/new/assets/images/custom/noimgprint.jpg"> Detectiepoorthoes</a></li><li><a href="textiel/fotostudio-achterwand"><img src="https://printzelf.nl/new/assets/images/custom/noimgprint.jpg"> Fotostudio achterwand</a></li><li><a href="textiel/gevelvlag"><img src="cms/images/producten/textiel_producten/gevelvlag/558_80e72d8dbcd452f1_2.jpg"> Gevelvlag</a></li><li><a href="textiel/kussensloop"><img src="https://printzelf.nl/new/assets/images/custom/noimgprint.jpg"> Kussensloop</a></li><li><a href="textiel/mastvlag"><img src="cms/images/producten/textiel_producten/mastvlag/1754_03cb6fe1eb3929f8.jpg"> Mastvlag</a></li><li><a href="textiel/naadloos-fotobehang"><img src="cms/images/producten/naadloos-fotobehang/thumbnail/345_428a7e6a8f3bd8fa_2.jpg"> Naadloos fotobehang</a></li><li><a href="textiel/outdoor-textielframe"><img src="cms/images/producten/textiel_producten/outdoortextielframe/1761_824727ff31a44cc1.jpg"> Outdoor textielframe</a></li><li><a href="textiel/rode-loper"><img src="https://printzelf.nl/new/assets/images/custom/noimgprint.jpg"> Rode loper</a></li><li><a href="textiel/sierkussens-binnen"><img src="cms/images/producten/sierkussens-binnen/thumbnail/sierkussen_1.jpg"> Sierkussens binnen</a></li><li><a href="textiel/sierkussens-buiten"><img src="https://printzelf.nl/new/assets/images/custom/noimgprint.jpg"> Sierkussens buiten</a></li><li><a href="textiel/straightflag"><img src="https://printzelf.nl/new/assets/images/custom/noimgprint.jpg"> Straightflag</a></li><li><a href="textiel/textielframe"><img src="cms/images/producten/textiel_producten/textielwand/1289_1cdc813e6fc6e815_1.jpg"> Textielframe</a></li><li><a href="textiel/textielwand"><img src="https://printzelf.nl/new/assets/images/custom/noimgprint.jpg"> Textielwand</a></li><li><a href="textiel/vlaggenmast"><img src="https://printzelf.nl/new/assets/images/custom/noimgprint.jpg"> Vlaggenmast</a></li><li><a href="textiel/wandkleed"><img src="cms/images/producten/wandkleed/afbeeldingen/1586_8bfb4ba9049ae50f_1.jpg"> Wandkleed</a></li><li><a href="textiel/zitzak"><img src="cms/images/Product_thumbnails/zitzak/549_22ed819692c7b8fe_3_thumb.jpg"> Zitzak</a></li>
          </ul></li><li><span><span><i class="mobilemenuicon icon-pvc"></i></span> Doek / PVC</span><ul>
                <li class="mm-divider">Doek & PVC soorten</li><li><a href="doek-pvc/airtex"><img src="https://printzelf.nl/new/assets/images/custom/noimgprint.jpg"> Airtex</a></li><li><a href="doek-pvc/backlitdoek"><img src="https://printzelf.nl/new/assets/images/custom/noimgprint.jpg"> Backlitdoek</a></li><li><a href="doek-pvc/blockout"><img src="https://printzelf.nl/new/assets/images/custom/noimgprint.jpg"> Blockout</a></li><li><a href="doek-pvc/meshdoek"><img src="https://printzelf.nl/new/assets/images/custom/noimgprint.jpg"> Meshdoek</a></li><li><a href="doek-pvc/pvc-doek"><img src="https://printzelf.nl/new/assets/images/custom/noimgprint.jpg"> PVC doek</a></li><li><a href="doek-pvc/reflecterend"><img src="https://printzelf.nl/new/assets/images/custom/noimgprint.jpg"> Reflecterend doek</a></li><li><a href="doek-pvc/roll-up-folie"><img src="https://printzelf.nl/new/assets/images/custom/noimgprint.jpg"> Roll-up folie</a></li><li><a href="doek-pvc/speakermesh"><img src="https://printzelf.nl/new/assets/images/custom/noimgprint.jpg"> Speakermesh</a></li><li><a href="doek-pvc/transparante-doek"><img src="https://printzelf.nl/new/assets/images/custom/noimgprint.jpg"> Transparant doek</a></li><li><a href="doek-pvc/truckzeil"><img src="https://printzelf.nl/new/assets/images/custom/noimgprint.jpg"> Truckzeil</a></li><li><a href="doek-pvc/vloerzeil"><img src="https://printzelf.nl/new/assets/images/custom/noimgprint.jpg"> Vloerzeil</a></li>
                <li class="mm-divider">Doek/PVC producten</li><li><a href="doek-pvc/bouwhekdoek"><img src="https://printzelf.nl/new/assets/images/custom/noimgprint.jpg"> Bouwhekdoek</a></li><li><a href="doek-pvc/buiten-canvas"><img src="https://printzelf.nl/new/assets/images/custom/noimgprint.jpg"> Buiten canvas</a></li><li><a href="doek-pvc/deurmat"><img src="https://printzelf.nl/new/assets/images/custom/noimgprint.jpg"> Deurmat</a></li><li><a href="doek-pvc/dranghekdoek"><img src="https://printzelf.nl/new/assets/images/custom/noimgprint.jpg"> Dranghekdoek</a></li><li><a href="doek-pvc/spandoek"><img src="https://printzelf.nl/new/assets/images/custom/noimgprint.jpg"> Spandoek</a></li><li><a href="doek-pvc/spandoekframe"><img src="https://printzelf.nl/new/assets/images/custom/noimgprint.jpg"> Spandoekframe</a></li><li><a href="doek-pvc/steigerdoek"><img src="https://printzelf.nl/new/assets/images/custom/noimgprint.jpg"> Steigerdoek</a></li><li><a href="doek-pvc/tuinposter"><img src="https://printzelf.nl/new/assets/images/custom/noimgprint.jpg"> Tuinposter</a></li>
          </ul></li><li><span><span><i class="mobilemenuicon icon-benodigdheden"></i></span> Benodigdheden</span><ul>
                <li class="mm-divider">Accessoires en gereedschap</li><li><a href="benodigdheden/afstandhouders-blind"><img src="https://printzelf.nl/new/assets/images/custom/noimgprint.jpg"> Afstandhouders blind 4st.</a></li><li><a href="benodigdheden/afstandhouders-blind-large"><img src="https://printzelf.nl/new/assets/images/custom/noimgprint.jpg"> Afstandhouders blind L 10st.</a></li><li><a href="benodigdheden/afstandhouders-blind-small"><img src="https://printzelf.nl/new/assets/images/custom/noimgprint.jpg"> Afstandhouders blind M 10st.</a></li><li><a href="benodigdheden/afstandhouders-blind-mini"><img src="https://printzelf.nl/new/assets/images/custom/noimgprint.jpg"> Afstandhouders blind S 10st.</a></li><li><a href="benodigdheden/grondpen-standaard"><img src="cms/images/producten/grondpen-standaard/afbeeldingen/grondpen-standaard.jpg"> Beachflag standaard met rotator</a></li><li><a href="benodigdheden/beachpole-large"><img src="cms/images/producten/beachpole/afbeeldingen/beachpole.jpg"> Beachpole Large</a></li><li><a href="benodigdheden/beachpole-medium"><img src="cms/images/producten/beachpole/afbeeldingen/beachpole.jpg"> Beachpole Medium </a></li><li><a href="benodigdheden/beachpole"><img src="cms/images/producten/beachpole/afbeeldingen/beachpole.jpg"> Beachpole Small</a></li><li><a href="benodigdheden/behangrakel"><img src="https://printzelf.nl/new/assets/images/custom/noimgprint.jpg"> Behangrakel</a></li><li><a href="benodigdheden/dubbelzijdig-tape"><img src="https://printzelf.nl/new/assets/images/custom/noimgprint.jpg"> Dubbelzijdig tape</a></li><li><a href="benodigdheden/elastieken"><img src="https://printzelf.nl/new/assets/images/custom/noimgprint.jpg"> Elastieken</a></li><li><a href="benodigdheden/glasschraper"><img src="https://printzelf.nl/new/assets/images/custom/noimgprint.jpg"> Glasschraper</a></li><li><a href="benodigdheden/grondpen-zachte-grond"><img src="https://printzelf.nl/new/assets/images/custom/noimgprint.jpg"> Grondplug</a></li><li><a href="benodigdheden/haak-klittenband-wit"><img src="https://printzelf.nl/new/assets/images/custom/noimgprint.jpg"> Haak klittenband wit</a></li><li><a href="benodigdheden/haak-klittenband-zwart"><img src="https://printzelf.nl/new/assets/images/custom/noimgprint.jpg"> Haak klittenband zwart</a></li><li><a href="benodigdheden/handystick"><img src="https://printzelf.nl/new/assets/images/custom/noimgprint.jpg"> Handystick</a></li><li><a href="benodigdheden/kartonnen-standaard-18-cm"><img src="https://printzelf.nl/new/assets/images/custom/noimgprint.jpg"> Kartonnen standaard 18 cm </a></li><li><a href="benodigdheden/kartonnen-standaard-24-cm"><img src="https://printzelf.nl/new/assets/images/custom/noimgprint.jpg"> Kartonnen standaard 24 cm </a></li><li><a href="benodigdheden/kartonnen-standaard-34-cm"><img src="https://printzelf.nl/new/assets/images/custom/noimgprint.jpg"> Kartonnen standaard 34 cm </a></li><li><a href="benodigdheden/label-dispenser-box-l"><img src="https://printzelf.nl/new/assets/images/custom/noimgprint.jpg"> Label dispenser box - L</a></li><li><a href="benodigdheden/label-dispenser-box-m"><img src="https://printzelf.nl/new/assets/images/custom/noimgprint.jpg"> Label dispenser box - M</a></li><li><a href="benodigdheden/label-dispenser-box-s"><img src="https://printzelf.nl/new/assets/images/custom/noimgprint.jpg"> Label dispenser box - S</a></li><li><a href="benodigdheden/lijm-voor-blinde-montage"><img src="https://printzelf.nl/new/assets/images/custom/noimgprint.jpg"> Lijm (voor blinde montage)</a></li><li><a href="benodigdheden/magneet"><img src="https://printzelf.nl/new/assets/images/custom/noimgprint.jpg"> Magneet</a></li><li><a href="benodigdheden/plaathanger-10-kg"><img src="https://printzelf.nl/new/assets/images/custom/noimgprint.jpg"> Plaathanger 10 kg</a></li><li><a href="benodigdheden/plaathanger-3-kg"><img src="https://printzelf.nl/new/assets/images/custom/noimgprint.jpg"> Plaathanger 3 kg</a></li><li><a href="benodigdheden/plaathanger-6-kg"><img src="https://printzelf.nl/new/assets/images/custom/noimgprint.jpg"> Plaathanger 6 kg</a></li><li><a href="benodigdheden/plaatsteun"><img src="https://printzelf.nl/new/assets/images/custom/noimgprint.jpg"> Plaatsteun</a></li><li><a href="benodigdheden/plafondhaak-15-cm"><img src="https://printzelf.nl/new/assets/images/custom/noimgprint.jpg"> Plafondhaak 15 cm</a></li><li><a href="benodigdheden/plafondhaak-21-cm"><img src="https://printzelf.nl/new/assets/images/custom/noimgprint.jpg"> Plafondhaak 21 cm</a></li><li><a href="benodigdheden/plafondhaak-35-cm"><img src="https://printzelf.nl/new/assets/images/custom/noimgprint.jpg"> Plafondhaak 35 cm</a></li><li><a href="benodigdheden/posterhanger-31-cm"><img src="https://printzelf.nl/new/assets/images/custom/noimgprint.jpg"> Posterhanger 31 cm </a></li><li><a href="benodigdheden/posterhanger-51-cm"><img src="https://printzelf.nl/new/assets/images/custom/noimgprint.jpg"> Posterhanger 51 cm </a></li><li><a href="benodigdheden/posterhanger-71-cm"><img src="https://printzelf.nl/new/assets/images/custom/noimgprint.jpg"> Posterhanger 71 cm </a></li><li><a href="benodigdheden/rakel-met-vilt"><img src="https://printzelf.nl/new/assets/images/custom/noimgprint.jpg"> Rakel met vilt</a></li><li><a href="benodigdheden/rolmaat"><img src="https://printzelf.nl/new/assets/images/custom/noimgprint.jpg"> Rolmaat</a></li><li><a href="benodigdheden/schilderstape"><img src="https://printzelf.nl/new/assets/images/custom/noimgprint.jpg"> Schilderstape</a></li><li><a href="benodigdheden/stanleymesjes"><img src="https://printzelf.nl/new/assets/images/custom/noimgprint.jpg"> Stanleymesjes</a></li><li><a href="benodigdheden/stanleymesjes-vulling"><img src="https://printzelf.nl/new/assets/images/custom/noimgprint.jpg"> Stanleymesjes vulling</a></li><li><a href="benodigdheden/teflon-mes"><img src="https://printzelf.nl/new/assets/images/custom/noimgprint.jpg"> Teflon mes</a></li><li><a href="benodigdheden/twin-teflon-mes"><img src="https://printzelf.nl/new/assets/images/custom/noimgprint.jpg"> Twin teflon mes</a></li><li><a href="benodigdheden/vlaggenmastgewicht"><img src="https://printzelf.nl/new/assets/images/custom/noimgprint.jpg"> Vlaggenmastgewicht</a></li><li><a href="benodigdheden/wrap-vinger"><img src="https://printzelf.nl/new/assets/images/custom/noimgprint.jpg"> Wrap vinger</a></li><li><a href="benodigdheden/zijgriphouder"><img src="https://printzelf.nl/new/assets/images/custom/noimgprint.jpg"> Zijgriphouders 4 st.</a></li>
          </ul></li>    </ul>
</nav>
  <!-- <div class="loader-container hidden">
    <div class="loader-logo">
      <div class="loader-circle"></div>
    </div>
  </div> -->

  <div class="main-wrapper home-2">

    <div class="header-area">
      <div class="header-top">
        <div class="container">
          <div class="row iconstop">
            <div class="owl-top owl-carousel">
              <div class="item check-wrapper">
                <i class="pr-1 fa fa-check check-green"></i>
                <span>Grootste print faciliteiten Benelux</span>
              </div>
              <div class="item check-wrapper">
                <i class="pr-1 fa fa-check check-green"></i>
                <span>Beste prijs-kwaliteitverhouding</span>
              </div>
              <div class="item check-wrapper">
                <i class="pr-1 fa fa-check check-green"></i>
                <span>Grenzeloze afwerkings mogelijkheden</span>
              </div>
              <div class="item check-wrapper">
                <i class="pr-1 fa fa-check check-green"></i>
                <span>Service van bestand tot verpakking</span>
              </div>
              <div class="item check-wrapper">
                <i class="pr-1 fa fa-check check-green"></i>
                <span>Continue kwaliteitsinspectie</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="menu-placeholder"></div>
      <div class="scrollmenu">
        <div class="header-middle">
          <div class="container">
            <div class="row">
              <div class="col-md-12 space-between">
                <div class="mobileicons">
                  <a href="javascript:void(0);" id="supportbtn"><i class="icon-support"></i></a>
                  <a href="javascript:void(0);" id="zoekbtn"><i class="icon-loop"></i></a>
                </div>
                <div class="logo-middle">
                  <a href="home"><img src="https://printzelf.nl/new/assets/images/logo_gewoon.png" alt="Printzelf" class="logo-gewoon"></a>
                </div>
                <div class="search vertical-center">
                  <div class="d-flex">
                    <input type="text" class="searchTerm1" placeholder="Zoeken naar...">
                    <button type="submit" class="searchButton">
                      <i class="fa fa-search"></i>
                   </button>
                    <div id="prodresultsdesktop" class="prodresultsdesktop animatedopen">
                      <span class="searching">...</span>
                    </div>
                  </div>
               </div>
                <div class="vertical-center disinlineblock">
                  <ul class="vertical-center">

                      <li><a href="login" class="inlogheaderbutton"><i class="fas fa-sign-in-alt"></i> Inloggen</a></li>
                      <li class="menu">
                        <div class="dropdown infodropdown">
                          <a class="chevronbuttonwrap inlineflexmenu infomenu pl-10" href="mijn-account"><button class="dropbtn">Info</button><i class="fas fa-chevron-down chevdown"></i></a>
                          <div class="dropdown-content">
                              <a href="informatie/bedrijfsgegevens">Bedrijfsgegevens</a><a href="informatie/hoe-werkt-printzelf-nl">Hoe werkt Printzelf.nl?</a><a href="informatie/over-printzelf">Over Printzelf</a><a href="informatie/service-garantie">Service & Garantie</a>
                          </div>
                        </div>
                      </li>                      <li class="menu">
                        <span class="inlineflexmenu hulptip">
                          <span class="icon-support menuicon"></span>Hulp
                          <div class="tooltipcontent hulptooltipcontent darktext tooltipcontentnone">
                            <span>
  <i class="icon-support"></i> <span>Hulp nodig?</span>
</span>
<span class="checktime"></span>
<p>Wij adviseren je graag bij het samenstellen van je product.</p>
<p>Bel ons op 085 - 040 90 18<br />Ma - Vr. 09:00 - 17:00</p><div>
  <span>
    <i class="icon-faq"></i>
    <a href="klantenservice">Veelgestelde vragen</a>
  </span>
  <span>
    <i class="icon-email"></i>
    <a href="mailto:info@printzelf.nl">Stuur een email</a>
  </span>
  <a href="klantenservice"><button class="btnstyle supportbtn" type="button" name="button">Klantenservice</button></a>
</div>
                          </div>
                        </span>
                      </li>
                      <li class="menu">
                        <span class="carttip inlineflexmenu">
                          <span class="icon-cart menuicon countcircle">
                            <span style="display:none!important;" class="amount"></span>                          </span>
                          <div id="headercart" class="tooltipcontent darktext tooltippadding tooltipcontentnone">
                          </div>
                        </span>
                      </li>
                  </ul>
                </div>
                <div class="mobileicons">
                  <a href="winkelwagen"><i class="icon-cart"></i></a>
                  <a href="#menu" id="mobmenu"><i class="icon-burger"></i></a>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="header-bottom">
  <div class="container">
    <div class="row">
      <div class="categoriemenu vertical-center">
        <ul class="categorielijst">
          <span class="animate__animated animate__faster" id="menu1">
            
            <li>
              <a class="categorieknop" href="javascript:void(0);"><i class="menu-afb icon-woonkamer"></i> <span>Woonkamer</span></a>
              <div id="prodmenu" class="product-menu menunone">
                <div class="productmenucontainer">
                  <div class="producten">
                    <div class="productgroup">
                      <h2 class="productmenukop">Woonkamer</h2>
                      <ul class="fivecolumns"><li><a href="woonkamer/blind-ophangsysteem">Blind ophangsysteem</a></li><li><a href="woonkamer/foto-op-hout">Foto op hout</a></li><li><a href="woonkamer/foto-op-paneel">Foto op paneel</a></li><li><a href="woonkamer/fotoblok">Fotoblok</a></li><li><a href="woonkamer/muursticker">Muursticker</a></li><li><a href="woonkamer/naadloos-fotobehang">Naadloos fotobehang</a></li><li><a href="woonkamer/salon-tafelkleed">Salon tafelkleed</a></li><li><a href="woonkamer/sierkussens-binnen">Sierkussens binnen</a></li><li><a href="woonkamer/wandkleed">Wandkleed</a></li><li><a href="woonkamer/zitzak">Zitzak</a></li></ul>
                    </div>
                  </div>
                </div>
              </div>
            </li>
            <li>
              <a class="categorieknop" href="javascript:void(0);"><i class="menu-afb icon-slaapkamer"></i> <span>Slaapkamer</span></a>
              <div id="prodmenu" class="product-menu menunone">
                <div class="productmenucontainer">
                  <div class="producten">
                    <div class="productgroup">
                      <h2 class="productmenukop">Slaapkamer</h2>
                      <ul class="fivecolumns"><li><a href="slaapkamer/blind-ophangsysteem">Blind ophangsysteem</a></li><li><a href="slaapkamer/dekbedovertrek">Dekbedovertrek</a></li><li><a href="slaapkamer/foto-op-hout-slaapkamer-2">Foto op hout</a></li><li><a href="slaapkamer/foto-op-paneel">Foto op paneel</a></li><li><a href="slaapkamer/fotoblok-in-slaapkamer">Fotoblok</a></li><li><a href="slaapkamer/kussensloop">Kussensloop</a></li><li><a href="slaapkamer/muurcirkel">Muurcirkel</a></li><li><a href="slaapkamer/naadloos-fotobehang-slaapkamer">Naadloos fotobehang</a></li><li><a href="slaapkamer/slaapkamer-kussens">Slaapkamer kussens</a></li><li><a href="slaapkamer/textielwand">Textielwand</a></li></ul>
                    </div>
                  </div>
                </div>
              </div>
            </li>
            <li>
              <a class="categorieknop" href="javascript:void(0);"><i class="menu-afb icon-keuken"></i> <span>Keuken</span></a>
              <div id="prodmenu" class="product-menu menunone">
                <div class="productmenucontainer">
                  <div class="producten">
                    <div class="productgroup">
                      <h2 class="productmenukop">Keuken</h2>
                      <ul class="fivecolumns"><li><a href="keuken/keuken-achterwand">Keuken achterwand</a></li></ul>
                    </div>
                  </div>
                </div>
              </div>
            </li>
            <li>
              <a class="categorieknop" href="javascript:void(0);"><i class="menu-afb icon-tuin"></i> <span>Tuin</span></a>
              <div id="prodmenu" class="product-menu menunone">
                <div class="productmenucontainer">
                  <div class="producten">
                    <div class="productgroup">
                      <h2 class="productmenukop">Tuin</h2>
                      <ul class="fivecolumns"></ul>
                    </div>
                  </div>
                </div>
              </div>
            </li>
            <li>
              <a class="categorieknop" href="javascript:void(0);"><i class="menu-afb icon-feestje"></i> <span>Feestje?</span></a>
              <div id="prodmenu" class="product-menu menunone">
                <div class="productmenucontainer">
                  <div class="producten">
                    <div class="productgroup">
                      <h2 class="productmenukop">Feestje?</h2>
                      <ul class="fivecolumns"></ul>
                    </div>
                  </div>
                </div>
              </div>
            </li>
            <li>
              <a class="categorieknop" href="javascript:void(0);"><i class="menu-afb icon-bedrijf"></i> <span>Eigen bedrijf?</span></a>
              <div id="prodmenu" class="product-menu menunone">
                <div class="productmenucontainer">
                  <div class="producten">
                    <div class="productgroup">
                      <h2 class="productmenukop">Eigen bedrijf?</h2>
                      <ul class="fivecolumns"></ul>
                    </div>
                  </div>
                </div>
              </div>
            </li>          </span>
          <span class="animate__animated animate__faster" id="menu2">
            
              <li>
                <a class="categorieknop" href="javascript:void(0);"><i class="menu-afb icon-plaat"></i> <span>Plaat</span></a>
                <div id="prodmenu" class="product-menu menunone">
                  <div class="productmenucontainer">
                      <div class="materialen">
                   		  <h2 class="productmenukop">Plaat soorten</h2>
                   		  <ul>
                        </ul>
                        <a class="toevoegen btn btn-fullcolor aandachtbtn" href="keuzehulp/plaat"> Keuzehulp <i class="fas fa-question-circle"></i></a>
                      </div>
                      <div class="producten">
                   		  <div class="productgroup">
                   			 <h2 class="productmenukop">Plaat producten</h2>
                         <ul class="twocolumns">
                         </ul>
                        </div>
                      </div>
                  </div>
                </div>
              </li>
              <li>
                <a class="categorieknop" href="javascript:void(0);"><i class="menu-afb icon-folie"></i> <span>Folie</span></a>
                <div id="prodmenu" class="product-menu menunone">
                  <div class="productmenucontainer">
                      <div class="materialen">
                   		  <h2 class="productmenukop">Folie soorten</h2>
                   		  <ul><li><a href="folie/universele-folie"><img class="prodmenuimg" src="https://printzelf.nl/new/cms/images/producten/Papier_en_karton/Behang/1674_d1df14a566078f91_1.jpg">Universele folie</a></li>
                        </ul>
                        <a class="toevoegen btn btn-fullcolor aandachtbtn" href="keuzehulp/folie"> Keuzehulp <i class="fas fa-question-circle"></i></a>
                      </div>
                      <div class="producten">
                   		  <div class="productgroup">
                   			 <h2 class="productmenukop">Folie producten</h2>
                         <ul class="twocolumns"><li><a href="folie/stickers">Stickers</a></li>
                         </ul>
                        </div>
                      </div>
                  </div>
                </div>
              </li>
              <li>
                <a class="categorieknop" href="javascript:void(0);"><i class="menu-afb icon-papier"></i> <span>Papier & karton</span></a>
                <div id="prodmenu" class="product-menu menunone">
                  <div class="productmenucontainer">
                      <div class="materialen">
                   		  <h2 class="productmenukop">Papier & kartonsoorten</h2>
                   		  <ul>
                        </ul>
                        <a class="toevoegen btn btn-fullcolor aandachtbtn" href="keuzehulp/papier-karton"> Keuzehulp <i class="fas fa-question-circle"></i></a>
                      </div>
                      <div class="producten">
                   		  <div class="productgroup">
                   			 <h2 class="productmenukop">Papier & karton producten</h2>
                         <ul class="twocolumns">
                         </ul>
                        </div>
                      </div>
                  </div>
                </div>
              </li>
              <li>
                <a class="categorieknop" href="javascript:void(0);"><i class="menu-afb icon-textiel"></i> <span>Textiel</span></a>
                <div id="prodmenu" class="product-menu menunone">
                  <div class="productmenucontainer">
                      <div class="materialen">
                   		  <h2 class="productmenukop">Textielsoorten</h2>
                   		  <ul>
                        </ul>
                        <a class="toevoegen btn btn-fullcolor aandachtbtn" href="keuzehulp/textiel"> Keuzehulp <i class="fas fa-question-circle"></i></a>
                      </div>
                      <div class="producten">
                   		  <div class="productgroup">
                   			 <h2 class="productmenukop">Textiel producten</h2>
                         <ul class="twocolumns"><li><a href="textiel/gevelvlag">Gevelvlag</a></li>
                         </ul>
                        </div>
                      </div>
                  </div>
                </div>
              </li>
              <li>
                <a class="categorieknop" href="javascript:void(0);"><i class="menu-afb icon-pvc"></i> <span>Doek / PVC</span></a>
                <div id="prodmenu" class="product-menu menunone">
                  <div class="productmenucontainer">
                      <div class="materialen">
                   		  <h2 class="productmenukop">Doek / PVC soorten</h2>
                   		  <ul>
                        </ul>
                        <a class="toevoegen btn btn-fullcolor aandachtbtn" href="keuzehulp/doek-pvc"> Keuzehulp <i class="fas fa-question-circle"></i></a>
                      </div>
                      <div class="producten">
                   		  <div class="productgroup">
                   			 <h2 class="productmenukop">Doek / PVC producten</h2>
                         <ul class="twocolumns">
                         </ul>
                        </div>
                      </div>
                  </div>
                </div>
              </li>
              <li>
                <a class="categorieknop" href="javascript:void(0);"><i class="menu-afb icon-benodigdheden"></i> <span>Benodigdheden</span></a>
                <div id="prodmenu" class="product-menu menunone">
                  <div class="productmenucontainer">
                  </div>
                </div>
              </li>          </span>
          <li class="litoggle">
            <div class="toggle-switch-container">
              <div class="toggle-switch switch-vertical productmenuform" id="togglemenu">
                
                <input id="toggle-a" type="radio" name="switch" checked="checked" value="1"/>
                <label for="toggle-a">Producten</label>
                <input id="toggle-b" type="radio" name="switch" value="2"/>                <label for="toggle-b">Materialen</label>
                <span class="toggle-outside">
                  <span class="toggle-inside"></span>
                </span>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>
      </div>
    </div>
    <div class="supportmobileblok hidemobilesupport tooltipcontent darktext hulptooltipcontent">
      <span>
  <i class="icon-support"></i> <span>Hulp nodig?</span>
</span>
<span class="checktime"></span>
<p>Wij adviseren je graag bij het samenstellen van je product.</p>
<p>Bel ons op 085 - 040 90 18<br />Ma - Vr. 09:00 - 17:00</p><div>
  <span>
    <i class="icon-faq"></i>
    <a href="klantenservice">Veelgestelde vragen</a>
  </span>
  <span>
    <i class="icon-email"></i>
    <a href="mailto:info@printzelf.nl">Stuur een email</a>
  </span>
  <a href="klantenservice"><button class="btnstyle supportbtn" type="button" name="button">Klantenservice</button></a>
</div>
    </div>
    <div class="zoekmobileblok hidezoekblok">
      <div class="zoekblok zoekblokmobilestyle">
        <div class="zoekblokwidth">
          <div class="search">
            <input type="text" class="searchproducts" placeholder="Zoek je product">
            <button type="submit" class="searchButton">
              <i class="fa fa-search"></i>
           </button>
          </div>
         <div id="prodresults" class="searchresultprods animatedopen">
           <span class="searching">...</span>
         </div>
       </div>
      </div>
    </div>
    <div class="container posrelative">

    </div>
<style media="screen">
.tippy-box {
  width: 100%!important;
  text-align: center;
  background-color: #fff!important;
  color: #fff!important;
  box-shadow: 3px 2px 15px 6px rgb(0 0 0 / 10%);
  border-radius: 5px;
  padding:0px;
  max-width: 100%!important;
}
.darktext {
  color: #383838;
  font-family: Panton;
  font-size: 15px;
}
body .tippy-arrow {
  color: #fff!important;
}

.tippy-content{
  padding:0px;
}

.tooltipwrap{
  display: flex;
  flex-direction: row-reverse;
}

.tooltipinfo{
  text-align: left;
  padding: 0px 0px 15px 15px;
  display: flex;
  flex-direction: column;
}

.tooltipinfo h2{
  margin-top: 15px;
  margin-bottom: 0px;
  font-weight: 800;
  font-family: Panton;
  font-size: 22px;
}

.tooltipinfo .sub{
  color: #b0b0b0;
  font-weight: 600;
}

.tooltipinfo .subbottom{
  background-color:#439fdd;
  display: inline-block;
  position: relative;
  color: #fff;
  padding: 3px 5px;
  border-radius: 5px;
  width: max-content;
  margin-top: 5px;
  font-size: 18px;
}

.tooltipwrap img{
  height: 300px;
  width: 300px;
  object-fit: cover;
  border-radius: 0px 5px 5px 0px;
  padding-left: 15px;
}

body{
  margin: 0px;
}

.canvastip{
  background-color: #009fe3;
  border:3px solid #ccc;
}

.canvastip:hover{
  background-color: #009fe3;
  border: 3px solid #FFF;
  border-radius: 18px;
  box-shadow: 0 0 2px #888;
}
</style>
    <!-- main-content-wrap start -->
    <img id="background" src="https://printzelf.nl/new/assets/images/custom/WOONKAMER.jpg" alt="" style="display:none;">
    <div class="canvas-container" style="pointer-events: none;width: 100%; height: 500px; position: relative; user-select: none;">
      <canvas id="c" width="100%" height="500" class="lower-canvas" style="pointer-events: none;position: absolute; width: 100%; height: 500px; left: 0px; top: 0px;user-select: none;"></canvas>
    </div>
    <span id="cirkel1" class="canvastip" style="border-radius:100%;width: 25px;height:25px;position:absolute;cursor:pointer;">
      <div class="tooltipcontentcanvas1 tooltipcontentcanvas darktext" style="position:relative;">
        <div class="tooltipwrap">
          <img src="assets/images/tooltipimg.png" alt="Gordijnen">
          <div class="tooltipinfo">
            <h2>Gordijnen</h2>
            <span class="sub">Print je eigen gordijnen.</span>
            <span class="subbottom">v.a. <b>€18,-</b> p/m<sup>2</sup></span>
          </div>
        </div>
      </div>
    </span>
    <span id="cirkel2" class="canvastip" style="border-radius:100%;width: 25px;height:25px;position:absolute;cursor:pointer;">
      <div class="tooltipcontentcanvas2 tooltipcontentcanvas darktext" style="position:relative;">
        <div class="tooltipwrap">
          <img src="cms/images/canvas/woonkamer/tooltip/vitragegordijnen.jpg" alt="Vitragegordijnen">
          <div class="tooltipinfo">
            <h2>Vitrage gordijnen</h2>
            <span class="sub">Print je eigen gordijnen.</span>
            <span class="subbottom">v.a. <b>€18,-</b> p/m<sup>2</sup></span>
          </div>
        </div>
      </div>
    </span>
    <span id="cirkel3" class="canvastip" style="border-radius:100%;width: 25px;height:25px;position:absolute;cursor:pointer;">
      <div class="tooltipcontentcanvas3 tooltipcontentcanvas darktext" style="position:relative;">
        <div class="tooltipwrap">
          <img src="cms/images/canvas/woonkamer/tooltip/fotoblok.jpg" alt="Fotoblok">
          <div class="tooltipinfo">
            <h2>Fotoblok</h2>
            <span class="sub">Print je eigen gordijnen.</span>
            <span class="subbottom">v.a. <b>€18,-</b> p/m<sup>2</sup></span>
          </div>
        </div>
      </div>
    </span>
    <span id="cirkel4" class="canvastip" style="border-radius:100%;width: 25px;height:25px;position:absolute;cursor:pointer;">
      <div class="tooltipcontentcanvas4 tooltipcontentcanvas darktext" style="position:relative;">
        <div class="tooltipwrap">
          <img src="cms/images/canvas/woonkamer/tooltip/fotopaneel.jpg" alt="Fotopaneel">
          <div class="tooltipinfo">
            <h2>Fotopaneel</h2>
            <span class="sub">Print je eigen gordijnen.</span>
            <span class="subbottom">v.a. <b>€18,-</b> p/m<sup>2</sup></span>
          </div>
        </div>
      </div>
    </span>
    <span id="cirkel5" class="canvastip" style="border-radius:100%;width: 25px;height:25px;position:absolute;cursor:pointer;">
      <div class="tooltipcontentcanvas5 tooltipcontentcanvas darktext" style="position:relative;">
        <div class="tooltipwrap">
          <img src="cms/images/canvas/woonkamer/tooltip/zitzak.jpg" alt="Zitzak">
          <div class="tooltipinfo">
            <h2>Zitzak</h2>
            <span class="sub">Print je eigen gordijnen.</span>
            <span class="subbottom">v.a. <b>€18,-</b> p/m<sup>2</sup></span>
          </div>
        </div>
      </div>
    </span>
    <span id="cirkel6" class="canvastip" style="border-radius:100%;width: 25px;height:25px;position:absolute;cursor:pointer;">
      <div class="tooltipcontentcanvas6 tooltipcontentcanvas darktext" style="position:relative;">
        <div class="tooltipwrap">
          <img src="cms/images/canvas/woonkamer/tooltip/kussens.jpg" alt="Kussens">
          <div class="tooltipinfo">
            <h2>Kussens</h2>
            <span class="sub">Print je eigen gordijnen.</span>
            <span class="subbottom">v.a. <b>€18,-</b> p/m<sup>2</sup></span>
          </div>
        </div>
      </div>
    </span>
    <span id="cirkel7" class="canvastip" style="border-radius:100%;width: 25px;height:25px;position:absolute;cursor:pointer;">
      <div class="tooltipcontentcanvas7 tooltipcontentcanvas darktext" style="position:relative;">
        <div class="tooltipwrap">
          <img src="cms/images/canvas/woonkamer/tooltip/tafelkleed.jpg" alt="Salontafelkleed">
          <div class="tooltipinfo">
            <h2>Salontafelkleed</h2>
            <span class="sub">Print je eigen gordijnen.</span>
            <span class="subbottom">v.a. <b>€18,-</b> p/m<sup>2</sup></span>
          </div>
        </div>
      </div>
    </span>
    <span id="cirkel8" class="canvastip" style="border-radius:100%;width: 25px;height:25px;position:absolute;cursor:pointer;">
      <div class="tooltipcontentcanvas8 tooltipcontentcanvas darktext" style="position:relative;">
        <div class="tooltipwrap">
          <img src="cms/images/canvas/woonkamer/tooltip/hexagonfotocollage.jpg" alt="Hexagon collage">
          <div class="tooltipinfo">
            <h2>Hexagon Fotocollage</h2>
            <span class="sub">Print je eigen gordijnen.</span>
            <span class="subbottom">v.a. <b>€18,-</b> p/m<sup>2</sup></span>
          </div>
        </div>
      </div>
    </span>
    <span id="cirkel9" class="canvastip" style="border-radius:100%;width: 25px;height:25px;position:absolute;cursor:pointer;">
      <div class="tooltipcontentcanvas9 tooltipcontentcanvas darktext" style="position:relative;">
        <div class="tooltipwrap">
          <img src="cms/images/canvas/woonkamer/tooltip/3dletters.jpg" alt="3D letters">
          <div class="tooltipinfo">
            <h2>3D Letters</h2>
            <span class="sub">Print je eigen gordijnen.</span>
            <span class="subbottom">v.a. <b>€18,-</b> p/m<sup>2</sup></span>
          </div>
        </div>
      </div>
    </span>
    <span id="cirkel10" class="canvastip" style="border-radius:100%;width: 25px;height:25px;position:absolute;cursor:pointer;">
      <div class="tooltipcontentcanvas10 tooltipcontentcanvas darktext" style="position:relative;">
        <div class="tooltipwrap">
          <img src="cms/images/canvas/woonkamer/tooltip/tafelkleed2.jpg" alt="Tafelkleed 2">
          <div class="tooltipinfo">
            <h2>Tafelkleed</h2>
            <span class="sub">Print je eigen gordijnen.</span>
            <span class="subbottom">v.a. <b>€18,-</b> p/m<sup>2</sup></span>
          </div>
        </div>
      </div>
    </span>
    <span id="cirkel11" class="canvastip" style="border-radius:100%;width: 25px;height:25px;position:absolute;cursor:pointer;">
      <div class="tooltipcontentcanvas11 tooltipcontentcanvas darktext" style="position:relative;">
        <div class="tooltipwrap">
          <img src="cms/images/canvas/woonkamer/tooltip/rolgordijn.jpg" alt="Rolgordijn">
          <div class="tooltipinfo">
            <h2>Rolgordijn</h2>
            <span class="sub">Print je eigen gordijnen.</span>
            <span class="subbottom">v.a. <b>€18,-</b> p/m<sup>2</sup></span>
          </div>
        </div>
      </div>
    </span>
    <span id="cirkel12" class="canvastip" style="border-radius:100%;width: 25px;height:25px;position:absolute;cursor:pointer;">
      <div class="tooltipcontentcanvas12 tooltipcontentcanvas darktext" style="position:relative;">
        <div class="tooltipwrap">
          <img src="cms/images/canvas/woonkamer/tooltip/raamsticker.jpg" alt="Raamsticker">
          <div class="tooltipinfo">
            <h2>Raamsticker</h2>
            <span class="sub">Print je eigen gordijnen.</span>
            <span class="subbottom">v.a. <b>€18,-</b> p/m<sup>2</sup></span>
          </div>
        </div>
      </div>
    </span>
    <span id="cirkel13" class="canvastip" style="border-radius:100%;width: 25px;height:25px;position:absolute;cursor:pointer;">
      <div class="tooltipcontentcanvas13 tooltipcontentcanvas darktext" style="position:relative;">
        <div class="tooltipwrap">
          <img src="cms/images/canvas/woonkamer/tooltip/textielwand.jpg" alt="Textielwand">
          <div class="tooltipinfo">
            <h2>Textielwand</h2>
            <span class="sub">Print je eigen gordijnen.</span>
            <span class="subbottom">v.a. <b>€18,-</b> p/m<sup>2</sup></span>
          </div>
        </div>
      </div>
    </span>
    <span id="cirkel14" class="canvastip" style="border-radius:100%;width: 25px;height:25px;position:absolute;cursor:pointer;">
      <div class="tooltipcontentcanvas14 tooltipcontentcanvas darktext" style="position:relative;">
        <div class="tooltipwrap">
          <img src="cms/images/canvas/woonkamer/tooltip/fotoopplexiglas.jpg" alt="Foto op plexiglas">
          <div class="tooltipinfo">
            <h2>Foto op plexiglas</h2>
            <span class="sub">Print je eigen gordijnen.</span>
            <span class="subbottom">v.a. <b>€18,-</b> p/m<sup>2</sup></span>
          </div>
        </div>
      </div>
    </span>
    <span id="cirkel15" class="canvastip" style="border-radius:100%;width: 25px;height:25px;position:absolute;cursor:pointer;">
      <div class="tooltipcontentcanvas15 tooltipcontentcanvas darktext" style="position:relative;">
        <div class="tooltipwrap">
          <img src="cms/images/canvas/woonkamer/tooltip/fotooprvs.jpg" alt="Foto op RVS">
          <div class="tooltipinfo">
            <h2>Foto op RVS</h2>
            <span class="sub">Print je eigen gordijnen.</span>
            <span class="subbottom">v.a. <b>€18,-</b> p/m<sup>2</sup></span>
          </div>
        </div>
      </div>
    </span>
    <span id="cirkel16" class="canvastip" style="border-radius:100%;width: 25px;height:25px;position:absolute;cursor:pointer;">
      <div class="tooltipcontentcanvas16 tooltipcontentcanvas darktext" style="position:relative;">
        <div class="tooltipwrap">
          <img src="cms/images/canvas/woonkamer/tooltip/fotoophout.jpg" alt="Foto op hout">
          <div class="tooltipinfo">
            <h2>Foto op hout</h2>
            <span class="sub">Print je eigen gordijnen.</span>
            <span class="subbottom">v.a. <b>€18,-</b> p/m<sup>2</sup></span>
          </div>
        </div>
      </div>
    </span>
    <span id="cirkel17" class="canvastip" style="border-radius:100%;width: 25px;height:25px;position:absolute;cursor:pointer;">
      <div class="tooltipcontentcanvas17 tooltipcontentcanvas darktext" style="position:relative;">
        <div class="tooltipwrap">
          <img src="cms/images/canvas/woonkamer/tooltip/roomdivider.jpg" alt="Roomdivider">
          <div class="tooltipinfo">
            <h2>Roomdivider</h2>
            <span class="sub">Print je eigen gordijnen.</span>
            <span class="subbottom">v.a. <b>€18,-</b> p/m<sup>2</sup></span>
          </div>
        </div>
      </div>
    </span>
    <div class="main-content-wrap section-ptb pt--0 product-details-page login-section listing">
        <div class="container">
            <div class="row">
                <div class="col-xl-12 col-lg-12 col-md-12">
                                      <div class="row">
                      <div class="col-lg-12 spring-wrapper">
                          <h3 class="listingkop">Woonkamer</h3>
                          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam libero turpis, lobortis ac dignissim nec, mattis nec magna. Nunc aliquam lectus vel efficitur laoreet. Vestibulum diam sapien, ultrices non massa id, fermentum volutpat lorem. Vivamus vel vehicula nunc, eu dignissim augue. Sed ornare in augue vel porttitor. Ut nisi orci, laoreet ac lectus eu, suscipit pellentesque nibh. Cras efficitur viverra interdum. Donec gravida pellentesque urna quis molestie. Sed leo elit, mattis at volutpat eget, interdum vitae justo. Phasellus ullamcorper quam purus, vulputate facilisis urna maximus in. Etiam ac tempus ligula, sit amet laoreet lorem. Curabitur vitae mi eu turpis egestas ullamcorper. In sed ante finibus, facilisis massa eget, pharetra urna. Etiam vestibulum dignissim erat, a venenatis mauris bibendum ut. Interdum et malesuada fames ac ante ipsum primis in faucibus.</p>                      </div>
                    </div>
                    <div class="row listingproductmargin">
                      
                        <div class="col-6 col-md-3">
                          <a href="product/blind-ophangsysteem" class="listingblock">
                            <span class="listinglabel">Vaak bekeken</span>
                            <div class="productcontent searchresult">
                              <img class="prodimglisting" src="cms/images/producten/blind-ophangsysteem/afbeeldingen/1157_7725c8ceac772b8b_1.jpg" alt="Blind ophangsysteem">
                              <span class="soortkop">Blind ophangsysteem</span>
                              <div class="pro_rating_small">
                                <img class="prodpagerating" src="assets/images/rate_4.png">
                                <span class="rat_qun"> (1 beoordeling) </span>
                              </div>
                              <span>Voor het onzichtbaar ophangen van panelen</span>
                            </div>
                          </a>
                        </div>
                        <div class="col-6 col-md-3">
                          <a href="product/fotoblok" class="listingblock">
                            <span class="listinglabel">Vaak bekeken</span>
                            <div class="productcontent searchresult">
                              <img class="prodimglisting" src="cms/images/producten/fotoblok/afbeeldingen/604_30ce36618aa6d545_2.jpg" alt="Fotoblok">
                              <span class="soortkop">Fotoblok</span>
                              <div class="pro_rating_small">
                                <img class="prodpagerating" src="assets/images/rate_4.png">
                                <span class="rat_qun"> (1 beoordeling) </span>
                              </div>
                              <span>Zet je foto's neer waar je wilt</span>
                            </div>
                          </a>
                        </div>
                        <div class="col-6 col-md-3">
                          <a href="product/muursticker" class="listingblock">
                            
                            <div class="productcontent searchresult">
                              <img class="prodimglisting" src="cms/images/producten/muursticker/afbeeldingen/2017_23e4cfbbe228dd0b_2.jpg" alt="Muursticker">
                              <span class="soortkop">Muursticker</span>
                              <div class="pro_rating_small">
                                <img class="prodpagerating" src="assets/images/rate_4.png">
                                <span class="rat_qun"> (1 beoordeling) </span>
                              </div>
                              <span>Ontwerp en plak je eigen prachtige muursticker</span>
                            </div>
                          </a>
                        </div>
                        <div class="col-6 col-md-3">
                          <a href="product/naadloos-fotobehang" class="listingblock">
                            
                            <div class="productcontent searchresult">
                              <img class="prodimglisting" src="cms/images/producten/naadloos-fotobehang/afbeeldingen/345_428a7e6a8f3bd8fa_2.jpg" alt="Naadloos fotobehang">
                              <span class="soortkop">Naadloos fotobehang</span>
                              <div class="pro_rating_small">
                                <img class="prodpagerating" src="assets/images/rate_4.png">
                                <span class="rat_qun"> (1 beoordeling) </span>
                              </div>
                              <span>Naadloos en krasvast fotobehang (PVC, textiel of egaliserend)</span>
                            </div>
                          </a>
                        </div>
                        <div class="col-6 col-md-3">
                          <a href="product/tafelkleed" class="listingblock">
                            
                            <div class="productcontent searchresult">
                              <img class="prodimglisting" src="cms/images/producten/tafelkleed/afbeeldingen/Salontafelkleed_eigen_print.jpg" alt="Salon tafelkleed">
                              <span class="soortkop">Salon tafelkleed</span>
                              <div class="pro_rating_small">
                                <img class="prodpagerating" src="assets/images/rate_4.png">
                                <span class="rat_qun"> (1 beoordeling) </span>
                              </div>
                              <span>Bedruk je eigen ontworpen kleed in verschillende hoge kwaliteit stoffen</span>
                            </div>
                          </a>
                        </div>
                        <div class="col-6 col-md-3">
                          <a href="product/wandkleed" class="listingblock">
                            
                            <div class="productcontent searchresult">
                              <img class="prodimglisting" src="cms/images/producten/wandkleed/afbeeldingen/1586_8bfb4ba9049ae50f_1.jpg" alt="Wandkleed">
                              <span class="soortkop">Wandkleed</span>
                              <div class="pro_rating_small">
                                <img class="prodpagerating" src="assets/images/rate_4.png">
                                <span class="rat_qun"> (1 beoordeling) </span>
                              </div>
                              <span>Een unieke wanddecoratie met jouw foto of mooi patroon</span>
                            </div>
                          </a>
                        </div>
                        <div class="col-6 col-md-3">
                          <a href="product/zitzak" class="listingblock">
                            
                            <div class="productcontent searchresult">
                              <img class="prodimglisting" src="cms/images/producten/zitzak/afbeeldingen/551_43f11f981e8581ac_3.jpg" alt="Zitzak">
                              <span class="soortkop">Zitzak</span>
                              <div class="pro_rating_small">
                                <img class="prodpagerating" src="assets/images/rate_4.png">
                                <span class="rat_qun"> (1 beoordeling) </span>
                              </div>
                              <span>Een comfortabele en échte eyecatcher. Slijtvast en waterafstotend.</span>
                            </div>
                          </a>
                        </div>
                        <div class="col-6 col-md-3">
                          <a href="product/foto-op-hout" class="listingblock">
                            <span class="listinglabel">Vaak bekeken</span>
                            <div class="productcontent searchresult">
                              <img class="prodimglisting" src="cms/images/producten/foto-op-hout/afbeeldingen/603_1bc1d5ebfe2bc86f_2.jpg" alt="Foto op hout">
                              <span class="soortkop">Foto op hout</span>
                              <div class="pro_rating_small">
                                <img class="prodpagerating" src="assets/images/rate_4.png">
                                <span class="rat_qun"> (1 beoordeling) </span>
                              </div>
                              <span>Een duurzame look en feel</span>
                            </div>
                          </a>
                        </div>
                        <div class="col-6 col-md-3">
                          <a href="product/foto-op-paneel" class="listingblock">
                            <span class="listinglabel">Vaak bekeken</span>
                            <div class="productcontent searchresult">
                              <img class="prodimglisting" src="cms/images/producten/foto-op-paneel/afbeeldingen/Dibond_butler_finish.jpg" alt="Foto op paneel">
                              <span class="soortkop">Foto op paneel</span>
                              <div class="pro_rating_small">
                                <img class="prodpagerating" src="assets/images/rate_4.png">
                                <span class="rat_qun"> (1 beoordeling) </span>
                              </div>
                              <span>Een echte sfeermaker in de woonkamer (keuze uit 10 materialen)</span>
                            </div>
                          </a>
                        </div>
                        <div class="col-6 col-md-3">
                          <a href="https://printzelf.nl/new/product/sierkussens-binnen" class="listingblock">
                            <span class="listinglabel">Vaak bekeken</span>
                            <div class="productcontent searchresult">
                              <img class="prodimglisting" src="cms/images/producten/sierkussens-binnen/afbeeldingen/sierkussen_1.jpg" alt="Sierkussens binnen">
                              <span class="soortkop">Sierkussens binnen</span>
                              <div class="pro_rating_small">
                                <img class="prodpagerating" src="assets/images/rate_4.png">
                                <span class="rat_qun"> (1 beoordeling) </span>
                              </div>
                              <span>Dit is een korte beschrijving</span>
                            </div>
                          </a>
                        </div>                    </div>
                </div>
                <div class="col-12 inspiratiesection">
  <h3 class="listingkop">Inspiratie</h3>
  <div class="grid" id="impressions">
    
      <div class="grid-item">
        <div class="impressionitem" data-src="cms/images/Impressies/sierkussen_11.jpg">
          <div class="content-overlay blauwoverlay"></div>
          <img src="cms/images/Impressies/sierkussen_11.jpg" />
          <div class="content-details fadeIn-bottom">
            <h3 class="content-title">Sierkussens binnen</h3>
            <p class="content-text">Sierkussens met print, foto of patroon</p>
            <a class="rozebtn propbtn" href="https://printzelf.nl/new/product/sierkussens-binnen">Bekijk dit product</a>
          </div>
        </div>
      </div>
      <div class="grid-item">
        <div class="impressionitem" data-src="cms/images/Impressies/sierkussen_51.jpg">
          <div class="content-overlay geeloverlay"></div>
          <img src="cms/images/Impressies/sierkussen_51.jpg" />
          <div class="content-details fadeIn-bottom">
            <h3 class="content-title">Sierkussens buiten</h3>
            <p class="content-text">Sierkussens met print, foto of patroon</p>
            <a class="blauwbtn propbtn" href="https://printzelf.nl/new/product/sierkussens-buiten">Bekijk dit product</a>
          </div>
        </div>
      </div>
      <div class="grid-item">
        <div class="impressionitem" data-src="cms/images/Impressies/603_1bc1d5ebfe2bc86f_21.jpg">
          <div class="content-overlay rozeoverlay"></div>
          <img src="cms/images/Impressies/603_1bc1d5ebfe2bc86f_21.jpg" />
          <div class="content-details fadeIn-bottom">
            <h3 class="content-title">Foto op hout</h3>
            <p class="content-text">Foto op hout gemaakt van duurzaam vurenhout</p>
            <a class="blauwbtn propbtn" href="https://printzelf.nl/new/product/foto-op-hout">Bekijk dit product</a>
          </div>
        </div>
      </div>
      <div class="grid-item">
        <div class="impressionitem" data-src="cms/images/Impressies/549_22ed819692c7b8fe_31.jpg">
          <div class="content-overlay blauwoverlay"></div>
          <img src="cms/images/Impressies/549_22ed819692c7b8fe_31.jpg" />
          <div class="content-details fadeIn-bottom">
            <h3 class="content-title">Zitzak</h3>
            <p class="content-text">Je eigen ontwerp&nbsp;haarscherp geprint</p>
            <a class="rozebtn propbtn" href="https://printzelf.nl/new/product/zitzak">Bekijk dit product</a>
          </div>
        </div>
      </div>  </div>
</div>
            </div>
        </div>
    </div>

<!-- footer-area start -->
<!-- Footer -->
		<footer id="contact">
			<div class="footertop">
				<div class="container">
					<div class="row">
						<div class="col-lg-2 col-md-6 col-sm-6 mt-2 mb-4">
							<h4 class="font-weight-bold">Service</h4>
							<ul class="recent-post mobli">
								<li>
									<a>Klantenservice</a>
								</li>
								<li>
									<a>Aanleverspecificaties</a>
								</li>
								<li>
									<a>Veelgestelde vragen</a>
								</li>
								<li>
									<a>Vaktermen</a>
								</li>
								<li>
									<a>Contact</a>
								</li>
							</ul>
						</div>
						<div class="col-lg-2 col-md-6 col-sm-6 mt-2 mb-4">
							<h4 class="font-weight-bold">PrintZelf.nl</h4>
							<ul class="recent-post mobli">
								
									<li>
										<a href="informatie/bedrijfsgegevens">Bedrijfsgegevens</a>
									</li>
									<li>
										<a href="informatie/hoe-werkt-printzelf-nl">Hoe werkt Printzelf.nl?</a>
									</li>
									<li>
										<a href="informatie/over-printzelf">Over Printzelf</a>
									</li>
									<li>
										<a href="informatie/service-garantie">Service & Garantie</a>
									</li>							</ul>
						</div>
						<div class="col-lg-2 col-md-6 col-sm-6 mt-2 mb-4">
							<h4 class="font-weight-bold">Volg ons</h4>
							<ul class="recent-post mobli">
								<li>
									<a>Instagram</a>
								</li>
								<li>
									<a>Facebook</a>
								</li>
								<li>
									<a>Youtube</a>
								</li>
								<li>
									<a>LinkedIN</a>
								</li>
								<li>
									<a>Pinterest</a>
								</li>
							</ul>
						</div>
						<div class="col-lg-2">

						</div>
						<div class="col-lg-4 col-md-6 col-sm-6 mt-2 mb-4">
							<div class="supportblok hulptooltipcontent p30">
								<span>
  <i class="icon-support"></i> <span>Hulp nodig?</span>
</span>
<span class="checktime"></span>
<p>Wij adviseren je graag bij het samenstellen van je product.</p>
<p>Bel ons op 085 - 040 90 18<br />Ma - Vr. 09:00 - 17:00</p><div>
  <span>
    <i class="icon-faq"></i>
    <a href="klantenservice">Veelgestelde vragen</a>
  </span>
  <span>
    <i class="icon-email"></i>
    <a href="mailto:info@printzelf.nl">Stuur een email</a>
  </span>
  <a href="klantenservice"><button class="btnstyle supportbtn" type="button" name="button">Klantenservice</button></a>
</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="footer-bottom-white">
				<div class="footerlogo">
					<a class="logofooter" href="home"><img src="https://printzelf.nl/new/assets/images/logo_gewoon.png" alt=""></a>
				</div>
				<div class="footerlinks">
					<span>© 2021 PrintZelf  |  <a href="#">Studio NewMedia B.V.</a></span>
					<span><a href="privacy">Privacy en Cookies</a></span>
					<span><a href="informatie/algemene-voorwaarden">Algemene voorwaarden</a></span>
				</div>
			</div>

	</footer>
<!-- footer-area end -->
</div>
<!-- Main Wrapper End -->
<!-- JS
============================================ -->


<!-- Popper JS -->
<script src="assets/js/popper.min.js"></script>
<!-- Tippy JS -->
<script src="https://unpkg.com/tippy.js@6"></script>
<!-- FabricJS -->
<script type="text/javascript" src="assets/js/fabric.js"></script>
<!-- Bootstrap JS -->
<script src="assets/js/bootstrap.min.js"></script>
<!-- Masonry -->
<script src="https://unpkg.com/imagesloaded@4/imagesloaded.pkgd.min.js"></script>
<script src="assets/js/masonry.js"></script>
<!-- Slicknav JS -->
<script src="assets/js/jquery.slicknav.min.js"></script>
<!-- Plugins JS -->
<script src="assets/js/plugins.js"></script>
<!-- Main JS -->
<script src="assets/js/main.js"></script>
<!-- Modal JS -->
<script src="assets/js/modal.js"></script>
<!-- Owl JS -->
<script src="assets/js/owl.carousel.min.js"></script>
<!-- Moments JS -->
<script src="assets/js/moments.js"></script>
<script src="assets/js/moment-business.js"></script>
<script src="assets/js/jquery.mask.js"></script>
<!-- Mobile menu -->
<script src="dist/mmenu.polyfills.js"></script>
<script src="dist/mmenu.js"></script>
<!-- Steps -->
<!-- BS Wizard -->
<script src="assets/js/jquery.steps.js"></script>
<!-- Smartwizard -->
<script src="assets/js/jquery.smartWizard.js"></script>

<!-- Datatables -->
<script src="assets/js/jquery.dataTables.min.js"></script>

<script src="assets/js/dataTables.bootstrap4.min.js"></script>

<script src="assets/js/datatables.init.js"></script>

<script src="assets/js/html2canvas.min.js"></script>

<script src="node_modules/lightgallery/dist/js/lightgallery.js"></script>
<script src="node_modules/lg-zoom/dist/lg-zoom.js"></script>
<script src="node_modules/lg-thumbnail/dist/lg-thumbnail.js"></script>
<script src="node_modules/lg-fullscreen/dist/lg-fullscreen.js"></script>
<script src="node_modules/lg-videos/lg-video.js"></script>



<!-- DropZone -->
<script src="assets/js/dropzone.js"></script>
<script src="sjerd-uploaden/upload.js"></script>
<script>
window.belcoConfig = {
  shopId: 'jiYu2f9oAophNw4k5'
};
</script>
<script>!function (a, b) { var c = [], d = window.belcoFunction || "Belco"; window[d] || (window[d] = function (a) { if (void 0 === window[d][a]) throw new Error("Unknown method"); return window[d][a].apply(window[d], Array.prototype.slice.call(arguments, 1)) }); for (var e = ["init", "sync", "track", "page", "open", "close", "toggle", "on", "once", "off", "anonymousId", "customer", "reset", "sendMessage"], f = function (a) { return function () { var b = Array.prototype.slice.call(arguments); return b.unshift(a), c.push(b), window[d] } }, g = 0; g < e.length; g++) { var h = e[g]; window[d][h] = f(h) } window[d].load = function (c) { if (!a.getElementById("belco-js")) { var d = a.createElement(b); d.async = !0, d.id = "belco-js", d.type = "text/javascript", d.src = ("https:" === a.location.protocol ? "https://" : "http://") + "cdn.belco.io/widget.min.js", d.onload = d.onreadystatechange = function (a) { var b = this.readyState; b && "complete" != b && "loaded" != b || "function" == typeof c && c(a) }; var e = a.getElementsByTagName(b)[0]; e.parentNode.insertBefore(d, e)
 } }, window[d].load(function () { window.belcoConfig && window[d]("init", window.belcoConfig); while (c.length > 0) { var a = c.shift(); try { window[d].apply(window[d], a) } catch (b) { console.error(b) } } }) }(document, "script");</script>
<script>
(function() {
	 function reRender(){
			var myImg = document.querySelector("#background");
			var realWidth = window.innerWidth;
			var realHeight = myImg.naturalHeight;
			var source = document.getElementById('background').src;
			var canvas = new fabric.Canvas('c');
			canvas.hoverCursor = 'pointer';
			canvas.selection = false;
			canvas.setDimensions({
					allowTouchScrolling: true,
					width: realWidth,
					height: realHeight
			});
			var img = new Image();
			// use a load callback to add image to canvas.
			img.src = 'https://printzelf.nl/new/assets/images/custom/WOONKAMER.jpg';
			fabric.Object.NUM_FRACTION_DIGITS = 10;
			fabric.Image.fromURL(source, function(img) {
				img.scaleToWidth(canvas.width);
				canvas.setBackgroundImage(img);
				canvas.requestRenderAll();
		});

		var scaleToWidth = window.innerWidth / myImg.width;

		// alert (scaleToWidth)
		const hotspots = [{
						top: (140* scaleToWidth),
						left: (720* scaleToWidth),
						radius: 10,
						fill: '#009fe3',
						id: 'cirkel1',
						hoverCursor: 'pointer',
						selectable: false,
						imgtop: 71,
						imgleft: 236,
						imgheight: 335,
						imgwidth: 514,
						placement: 'right',
						tooltipid: 'cirkel1',
						imgUrl: 'https://printzelf.nl/new/cms/images/canvas/woonkamer/gordijnen.jpg'
				},
				{
						top: (160* scaleToWidth),
						left: (640* scaleToWidth),
						radius: 10,
						fill: '#009fe3',
						id: 'cirkel2',
						hoverCursor: 'pointer',
						selectable: false,
						imgtop: 82,
						imgleft: 351,
						imgheight: 313,
						imgwidth: 337,
						placement: 'right',
						tooltipid: 'cirkel2',
						imgUrl: 'https://printzelf.nl/new/cms/images/canvas/woonkamer/voile.jpg'
				},
				{
						top: (350* scaleToWidth),
						left: (120* scaleToWidth),
						radius: 10,
						fill: '#009fe3',
						id: 'cirkel3',
						hoverCursor: 'pointer',
						selectable: false,
						imgtop: 293,
						imgleft: 21,
						placement: 'right',
						imgheight: 81,
						imgwidth: 107,
						imgUrl: 'https://printzelf.nl/new/cms/images/canvas/woonkamer/fotoblok.jpg'
				},
				{
						top: (275* scaleToWidth),
						left: (165* scaleToWidth),
						radius: 10,
						fill: '#009fe3',
						id: 'cirkel4',
						hoverCursor: 'pointer',
						selectable: false,
						imgtop: 283,
						imgleft: 127,
						placement: 'right',
						imgheight: 60,
						imgwidth: 57,
						imgUrl: 'https://printzelf.nl/new/cms/images/canvas/woonkamer/fotopaneel.jpg'
				},
				{
						top: (430* scaleToWidth),
						left: (600* scaleToWidth),
						radius: 10,
						fill: '#009fe3',
						id: 'cirkel5',
						hoverCursor: 'pointer',
						selectable: false,
						imgtop: 365,
						imgleft: 227,
						placement: 'right',
						imgheight: 185,
						imgwidth: 396,
						imgUrl: 'https://printzelf.nl/new/cms/images/canvas/woonkamer/zitzak.jpg'
				},
				{
						top: (320* scaleToWidth),
						left: (760* scaleToWidth),
						radius: 10,
						fill: '#009fe3',
						id: 'cirkel6',
						hoverCursor: 'pointer',
						selectable: false,
						imgtop: 287,
						imgleft: 785,
						placement: 'left',
						imgheight: 60,
						imgwidth: 75,
						imgUrl: 'https://printzelf.nl/new/cms/images/canvas/woonkamer/kussens.jpg'
				},
				{
						top: (360* scaleToWidth),
						left: (660* scaleToWidth),
						radius: 10,
						fill: '#009fe3',
						id: 'cirkel7',
						hoverCursor: 'pointer',
						selectable: false,
						imgtop: 309,
						imgleft: 554,
						placement: 'right',
						imgheight: 82,
						imgwidth: 138,
						imgUrl: 'https://printzelf.nl/new/cms/images/canvas/woonkamer/tafelkleed.jpg'
				},
				{
						top: (200* scaleToWidth),
						left: (970* scaleToWidth),
						radius: 10,
						fill: '#009fe3',
						id: 'cirkel8',
						hoverCursor: 'pointer',
						selectable: false,
						imgtop: 162,
						imgleft: 843,
						placement: 'right',
						imgheight: 102,
						imgwidth: 129,
						imgUrl: 'https://printzelf.nl/new/cms/images/canvas/woonkamer/hexagoncollage.jpg'
				},
				{
						top: (140* scaleToWidth),
						left: (1020* scaleToWidth),
						radius: 10,
						fill: '#009fe3',
						id: 'cirkel9',
						hoverCursor: 'pointer',
						selectable: false,
						imgtop: 150,
						imgleft: 1033,
						placement: 'left',
						imgheight: 81,
						imgwidth: 121,
						imgUrl: 'https://printzelf.nl/new/cms/images/canvas/woonkamer/3dletters.jpg'
				},
				{
						top: (380* scaleToWidth),
						left: (1290* scaleToWidth),
						radius: 10,
						fill: '#009fe3',
						id: 'cirkel10',
						hoverCursor: 'pointer',
						selectable: false,
						imgtop: 331,
						imgleft: 1288,
						placement: 'left',
						imgheight: 102,
						imgwidth: 324,
						imgUrl: 'https://printzelf.nl/new/cms/images/canvas/woonkamer/tafelkleed2.jpg'
				},
				{
						top: (180* scaleToWidth),
						left: (1795* scaleToWidth),
						radius: 10,
						fill: '#009fe3',
						id: 'cirkel11',
						hoverCursor: 'pointer',
						selectable: false,
						imgtop: 55,
						imgleft: 1807,
						placement: 'left',
						imgheight: 173,
						imgwidth: 152,
						imgUrl: 'https://printzelf.nl/new/cms/images/canvas/woonkamer/rolgordijn.jpg'
				},
				{
						top: (278* scaleToWidth),
						left: (1809* scaleToWidth),
						radius: 10,
						fill: '#009fe3',
						id: 'cirkel12',
						hoverCursor: 'pointer',
						selectable: false,
						imgtop: 245,
						imgleft: 1823,
						placement: 'left',
						imgheight: 173,
						imgwidth: 152,
						imgUrl: 'https://printzelf.nl/new/cms/images/canvas/woonkamer/raamsticker.jpg'
				},
				{
						top: (200* scaleToWidth),
						left: (1365* scaleToWidth),
						radius: 10,
						fill: '#009fe3',
						id: 'cirkel13',
						hoverCursor: 'pointer',
						selectable: false,
						imgtop: 82,
						imgleft: 1333,
						placement: 'left',
						imgheight: 331,
						imgwidth: 468,
						imgUrl: 'https://printzelf.nl/new/cms/images/canvas/woonkamer/textielwand.jpg'
				},
				{
						top: (255* scaleToWidth),
						left: (1165* scaleToWidth),
						radius: 10,
						fill: '#009fe3',
						id: 'cirkel14',
						hoverCursor: 'pointer',
						selectable: false,
						imgtop: 156,
						imgleft: 1165,
						placement: 'left',
						imgheight: 116,
						imgwidth: 54,
						imgUrl: 'https://printzelf.nl/new/cms/images/canvas/woonkamer/fotoopplexiglas.jpg'
				},
				{
						top: (159* scaleToWidth),
						left: (1219* scaleToWidth),
						radius: 10,
						fill: '#009fe3',
						id: 'cirkel15',
						hoverCursor: 'pointer',
						selectable: false,
						imgtop: 164,
						imgleft: 1215,
						placement: 'left',
						imgheight: 116,
						imgwidth: 468,
						imgUrl: 'https://printzelf.nl/new/cms/images/canvas/woonkamer/fotooprvs.jpg'
				},
				{
						top: (257* scaleToWidth),
						left: (1260* scaleToWidth),
						radius: 10,
						fill: '#009fe3',
						id: 'cirkel16',
						hoverCursor: 'pointer',
						selectable: false,
						imgtop: 172,
						imgleft: 1259,
						placement: 'left',
						imgheight: 331,
						imgwidth: 468,
						imgUrl: 'https://printzelf.nl/new/cms/images/canvas/woonkamer/fotoophout.jpg'
				},
				{
						top: (440* scaleToWidth),
						left: (1965* scaleToWidth),
						radius: 10,
						fill: '#009fe3',
						id: 'cirkel17',
						hoverCursor: 'pointer',
						selectable: false,
						imgtop: 210,
						imgleft: 1927,
						placement: 'left',
						imgheight: 465,
						imgwidth: 173,
						imgUrl: 'https://printzelf.nl/new/cms/images/canvas/woonkamer/roomdivider.jpg'
				}
		];

		const loadedImages = [];

		for (let [idx, props] of hotspots.entries()) {
				let c = new fabric.Circle(props);
				c.class = 'hotspot';
				c.name = 'hotspot-' + idx;
				canvas.add(c);
		}

		fabric.Canvas.prototype.getAbsoluteCoords = function(object) {
				return {
						left: object.left + this._offset.left,
						top: object.top + 171
				};
		}

		var btnWidth = 40,
				btnHeight = 40;

		function positionBtn(obj, index) {
				var absCoords = canvas.getAbsoluteCoords(obj);
				var element = document.getElementById('cirkel' + index);
				element.style.left = (absCoords.left - btnWidth / 10) + 'px';
				element.style.top = (absCoords.top - btnHeight / 10) + 'px';
		}

		canvas.getObjects().forEach(function(ho, index) {
				positionBtn(ho, index + 1);
		});

		$(".canvastip").each(function(i) {
				tippy(this, {
						theme: 'blue',
						allowHTML: true,
						placement: 'right',
						animation: 'scale-subtle',
						interactive: true,
						// popperOptions: {
						// 	strategy: 'fixed',
						// 	modifiers: [
						// 		{
						// 			name: 'flip',
						// 			options: {
						// 				fallbackPlacements: ['bottom', 'bottom'],
						// 			},
						// 		},
						// 		{
						// 			name: 'preventOverflow',
						// 			options: {
						// 				altAxis: true,
						// 				tether: false,
						// 			},
						// 		},
						// 	],
						// },
						onShow(instance) {
								canvas.getObjects().forEach(function(ho, index) {
										if (ho.class && ho.class === 'hotspot') {
												if (instance.id == index + 1) {
														// check if image was previously loaded
														if (loadedImages.indexOf(ho.name) < 0) {
																// image is not in the array
																// so it needs to be loaded
																// prepare the image properties
																let imgProps = {
																		width: ho.imgwidth,
																		height: ho.imgheight,
																		left: ho.imgleft* scaleToWidth,
																		top: ho.imgtop* scaleToWidth,
																		scaleX: 1* scaleToWidth,
																		scaleY: 1* scaleToWidth,
																		selectable: false,
																		id: 'img-' + ho.name,
																		hoverCursor: "default",
																};
																instance.setProps({placement: ho.placement})
																var printzelfImg = new Image();
																printzelfImg.onload = function(img) {
																		var printzelf = new fabric.Image(printzelfImg, imgProps);
																		printzelf.trippyHotspotImage = true;
																		canvas.add(printzelf);
																};
																printzelfImg.src = ho.imgUrl;
																// update the `loadedImages` array
																loadedImages.push(ho.name);
														} else {
																for (const o of canvas.getObjects()) {
																		if (o.id && o.id === 'img-' + ho.name) {
																				o.visible = true;
																				break;
																		}
																}
																canvas.renderAll();
														}
												}
										}
								});
						},
						onHide(instance) {
								for (const o of canvas.getObjects()) {
										if (o.trippyHotspotImage) {
												o.visible = false;
										}
								}
								canvas.renderAll();
						},
						content: function(reference) {
								return reference.querySelector('.tooltipcontentcanvas' + (i + 1));
						}
				});
		});
	 }
	 window.addEventListener('resize', reRender, false);
	 reRender();
})();
$(document).ready(function() {
	$("body").on("click","#bestellenbtn",function(){
		var viewportWidth = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
		if(viewportWidth > 991) {
			var scrollmenuheight = $('.scrollmenu').height();
			$([document.documentElement, document.body]).animate({
				scrollTop: $("#bestellen").offset().top - scrollmenuheight
			}, 1000);
		}else{
			document.querySelector("#bestellen")
				.scrollIntoView({block: "start", behavior: "smooth"})
		}
	});

	$("body").on("click",".stelsamenknop",function(){
		var viewportWidth = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
		if(viewportWidth > 991) {
			var scrollmenuheight = $('.scrollmenu').height();
			$([document.documentElement, document.body]).animate({
				scrollTop: $("#bestellen").offset().top - scrollmenuheight
			}, 1000);
		}else{
			document.querySelector("#bestellen")
				.scrollIntoView({block: "start", behavior: "smooth"})
		}
	});

	$("body").on("click","#informatiebtn",function(){
		var viewportWidth = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
		if(viewportWidth > 991) {
			var scrollmenuheight = $('.scrollmenu').height();
			$([document.documentElement, document.body]).animate({
				scrollTop: $("#informatie").offset().top - scrollmenuheight
			}, 1000);
		}else{
			document.querySelector("#informatie")
				.scrollIntoView({block: "start", behavior: "smooth"})
		}
	});

	$("body").on("click","#downloadsbtn",function(){
		var viewportWidth = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
		if(viewportWidth > 991) {
			var scrollmenuheight = $('.scrollmenu').height();
			$([document.documentElement, document.body]).animate({
				scrollTop: $("#downloads").offset().top - scrollmenuheight
			}, 1000);
		}else{
			document.querySelector("#downloads")
				.scrollIntoView({block: "start", behavior: "smooth"})
		}
	});

	$("body").on("click","#inspiratiebtn",function(){
		var viewportWidth = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
		if(viewportWidth > 991) {
			var scrollmenuheight = $('.scrollmenu').height();
			$([document.documentElement, document.body]).animate({
				scrollTop: $("#inspiratie").offset().top - scrollmenuheight
			}, 1000);
		}else{
			document.querySelector("#inspiratie")
				.scrollIntoView({block: "start", behavior: "smooth"})
		}
	});



	$('.tooltipcontent').removeClass('tooltipcontentnone');
	$('#menu').mmenu({
	  "offCanvas": {
	    "position": "left",
	    "zposition": "front"
	 },
	 "extensions": [
	    "pagedim-black",
	    "theme-white"
	  ],
	  "navbars": [
	        {
	           "position": "top"
	        }
	     ]
	});

	const supportbtn = $('#supportbtn');
	supportbtn.on("click", function(e) {
		$('.zoekmobileblok').removeClass('showzoekblok');
		$('.zoekmobileblok').addClass('hidezoekblok');
	  $('.supportmobileblok').toggleClass('showmobilesupport hidemobilesupport');
	});

	$('#mobmenu').click(function(e) {
		$('#menu').toggle().css('display','flex');
	});

	// Menu code
	const $categorieknop = $('.categorielijst a');
	$categorieknop.on("click", function(e) {
	  $categorieknop.not(this).removeClass('activecategorieknop');
	  $categorieknop.not(this).next().removeClass('menuflex');
		$('.absoluteoverlay').css('display', 'block');
	  $(this).next().toggleClass('menuflex menunone');
	  $(this).toggleClass('activecategorieknop');
		// $('.search').addClass('lowzindex');
		$('.header-area').addClass('menuactive');
		$('#prodresultsdesktop').hide();
		$('.searchTerm1').css('border', '2px solid #d2d2d2');
		$('.searchTerm1').next('.searchButton').css('background', '#d2d2d2');
		$('.searchTerm1').next('.searchButton').css('border', '2px solid #d2d2d2');
		$( ".searchTerm1" ).css('border-radius', '5px 0px 0px 5px');
		$('.searchTerm1').next('.searchButton').css('border-radius', '0px 5px 5px 0px');
	});

	$('.product-menu').click(function() {
		$('#prodresultsdesktop').hide();
		$('.searchTerm1').css('border', '2px solid #d2d2d2');
		$('.searchTerm1').next('.searchButton').css('background', '#d2d2d2');
		$('.searchTerm1').next('.searchButton').css('border', '2px solid #d2d2d2');
		$( ".searchTerm1" ).css('border-radius', '5px 0px 0px 5px');
		$('.searchTerm1').next('.searchButton').css('border-radius', '0px 5px 5px 0px');
	});

	$(window).click(function() {
		$('.product-menu').addClass('menunone');
		$('.product-menu').removeClass('menuflex');
		$('.categorielijst a').removeClass('activecategorieknop');
		$( ".searchTerm1" ).css('border-radius', '5px 0px 0px 5px');
		$('.searchTerm1').next('.searchButton').css('border-radius', '0px 5px 5px 0px');
		$('#prodresultsdesktop').hide();
		$('.absoluteoverlay').hide();
		$('.searchTerm1').css('border', '2px solid #d2d2d2');
		$('.searchTerm1').next('.searchButton').css('background', '#d2d2d2');
		$('.searchTerm1').next('.searchButton').css('border', '2px solid #d2d2d2');
	});

	$('.search').click(function(event){
	    event.stopPropagation();
	});

	$('.categoriemenu').click(function(event){
	    event.stopPropagation();
	});

	$('#searchresultfaq').click(function(event){
	    event.stopPropagation();
	});

	$('.absoluteoverlay').click(function(e) {

		$('.absoluteoverlay').hide();
		// $('.search').removeClass('lowzindex');
		$('.product-menu').removeClass('menuflex');
		$('.product-menu').addClass('menunone');
		$('.categorielijst a').removeClass('activecategorieknop');
		$('.header-area').removeClass('menuactive');
	});

	$("#checkout-steps").steps({
	  headerTag: "h3",
	  bodyTag: "section",
	  transitionEffect: "slideLeft",
	  autoFocus: true,
	  labels: {
	      current: ""
	  }
	});

if(window.outerWidth > 767) {
	$('.menu-afb').css('display', 'none');
	$('.product-menu').css('top', '56px');
	$('.toggle-switch-container').css('padding', '10px');
	$('.switch-vertical').css('height', '40px');
	$('.switch-vertical label').css('font-size', '16px');
	$('.switch-vertical label').css('display', 'flex');
	$('.switch-vertical label').css('align-items', 'center');
	$("head").append(
	$("<style/>").text(
					".switch-vertical input ~ input:checked ~ .toggle-outside .toggle-inside {\n" +
					"  top: 20px;\n" +
					"}"
			)
	);
  $(window).scroll(function(){
    if ($(window).scrollTop() >= 40) {
      $('.scrollmenu').addClass('is-sticky');
      $(".menu-placeholder").height($(".scrollmenu").outerHeight());
      $('.menu-afb').css('display', 'none');
      $('.categorieknop').css('padding-top', '15px');
      $('.product-menu').css('top', '56px');
    	}else {
      $('.scrollmenu').removeClass('is-sticky');
			// $('.toggle-switch-container').css('padding', '30px');
      $(".menu-placeholder").height(0);
			$('.menu-afb').css('display', 'none');
      $('.categorieknop').css('padding-top', '15px');
      $('.product-menu').css('top', '56px');
    }
  });
}




// Menu code
// $("body .categorielijst a").on({
//     mouseenter: function () {
//       //stuff to do on mouse enter
//       $(this).next().css('display', 'flex');
//     },
//     mouseleave: function () {
//       //stuff to do on mouse leave
//       $(this).next().css('display', 'none');
//     }
// });

// $(".product-menu").on({
//     mouseenter: function () {
//       //stuff to do on mouse enter
//       $(this).css('display', 'flex');
//     },
//     mouseleave: function () {
//       //stuff to do on mouse leave
//       $(this).css('display', 'none');
//     }
// });

if($("#bestseller").length > 0){
	var owl =  $('#bestseller').owlCarousel({
		loop:true,
		margin: 0,
		items: 4,
		auto: true,
		dots: false,
		autoplay: true,
		nav: false,
		navText: ['<i class="fa fa-caret-left"></i>', '<i class="fa fa-caret-right"></i>'],
		responsive : {
		    0 : {
		        items: 1
		    },
		    768 : {
		        items: 4
		    }
		}
	});
};

if($("#defaultHomeSlider").length > 0){
		var owl =  $('#defaultHomeSlider').owlCarousel({
			loop:true,
			margin: 0,
			items: 1,
			auto: true,
			dots: true,
			autoplay: false,
			nav: true,
			navText: ['<i class="fa fa-caret-left"></i>', '<i class="fa fa-caret-right"></i>']
		});
		owl.on("changed.owl.carousel", function(event){
				// selecting the current active item
				var item = event.item.index-2;
				// first removing animation for all captions
				$('.r-slider-top-content h1').removeClass('animated fadeInDown');
				$('.r-slider-top-content h4').removeClass('animated fadeInLeft');
				$('.r-slider-top-content a').removeClass('animated fadeInUp');
				$('#defaultHomeSlider .owl-item').not('.cloned').eq(item).find('h1').addClass('animated fadeInDown');
				$('#defaultHomeSlider .owl-item').not('.cloned').eq(item).find('h4').addClass('animated fadeInLeft');
				$('#defaultHomeSlider .owl-item').not('.cloned').eq(item).find('a').addClass('animated fadeInUp');
		});
	};


  $("#faqclick").click(function() {
    event.preventDefault()
      $('html, body').animate({
          scrollTop: $("#faq").offset().top
      }, 2000);
  });

	$("input[name='postcode']").mask('0000 SS');
	$("input[name='huisnummer']").mask('000000000');

	$("body").on("input","input[name='postcode']",function(e){
			e.preventDefault();
			var value = $(this).val();
			var housenumber = $(this).closest('form').find("input[name='huisnummer']").val();

			console.log(value);
			console.log(housenumber);
			if(housenumber.length >= 1) {
					if (value.length == 7) {
							url = 'includes/postcodecheck.php';

							var $postcode = value;
							var $huisnummer = housenumber;

							var posting = $.post( url, { postcode: $postcode, huisnummer: $huisnummer} );
							posting.done(function( data ) {
								var obj = JSON.parse(data);
								var status = obj[0].status;
								var straat = obj[0].straat;
								var woonplaats = obj[0].woonplaats;
								if (status == 'error') {

								}else if(status == 'success'){
									$('input[name="woonplaats"]').val(woonplaats);
									$('input[name="straat"]').val(straat);
								}
								// var content = $( $.parseHTML(data) );
								// $( "#postcoderesult" ).empty().append( content );
							});
					}else {

					}
			} else {
					alert('Vul eerst je huisnummer in voor dat je verder kan.');
					$("input[name='postcode']").val('');
			}
	});


	// Ververs page
	// $("body").on("click",".verderwinkelen",function(e){
	// 	e.preventDefault();
	// 	location.reload();
	// });

	// Accountinfo editbaar maken
	$("body").on("click",".account-button",function(e){
		e.preventDefault();
		$(".readonly").removeAttr("readonly");
		$(".readonly").addClass("editinput");
		$("#editinfo").show();
		$(".readonly").removeClass("readonly");
	});

	// Registreren
	$("body").on("submit",".register-form",function(e){
		e.preventDefault();

		 // if($('#registerform')[0].reportValidity()){
		 	registerform = $(this).serialize();

			$.ajax({
			 type:'post',
			 url:"includes/registreren.php",
			 data:{
				 registerform: registerform
			 },
			 success:function(data){
				 var obj = JSON.parse(data);


				var arrayspot = 0;
 	      for (var i = 0; i < obj.length; i++) {
 	        var status = obj[i].status;
 	        var field = obj[i].field;
 	        var $errorveld = $('input[name="' + field + '"]').parent();

 	        if (status == 'error') {
 	          var message = obj[i].message;
 	          $errorveld.addClass('invalid-input');
 	          $errorveld.next('.inputerror').remove();
 	          $errorveld.after('<div class="inputerror"><i class="fas fa-arrow-up"></i> ' + message + '</div>');
 	        } else if (status == 'success') {
 	          $errorveld.next('.inputerror').remove();
 	          $errorveld.removeClass('invalid-input');
 	        }
 	        var arrayspot = parseInt(i);
 	      }
 	      if (obj[arrayspot].totalstatus == 'error') {
 	        $("#registerresult").removeClass('positiveresult').show().empty().append(obj[arrayspot].totalmessage);
 	      } else if (obj[arrayspot].totalstatus == 'success') {
					var teruglink = obj[arrayspot].teruglink;
					window.location.replace(teruglink)
 	        // $("#registerresult").addClass('positiveresult').show().empty().append(obj[arrayspot].totalmessage);
 	      }

			 }
		 });
	  // }else{
		//
	  // }
	});

	// Login
	$("body").on("submit", ".login-form", function(e) {
	  e.preventDefault();
	  loginform = $(this).serialize();

	  $.ajax({
	    type: 'post',
	    url: "includes/inloggen.php",
	    data: {
	      loginform: loginform
	    },
	    success: function(data) {
	      var obj = JSON.parse(data);

	      var arrayspot = 0;
	      for (var i = 0; i < obj.length; i++) {
	        var status = obj[i].status;
	        var field = obj[i].field;
	        var $errorveld = $('input[name="' + field + '"]').parent();

	        if (status == 'error') {
	          var message = obj[i].message;
	          $errorveld.addClass('invalid-input');
	          $errorveld.next('.inputerror').remove();
	          $errorveld.after('<div class="inputerror"><i class="fas fa-arrow-up"></i> ' + message + '</div>');
	        } else if (status == 'success') {
	          $errorveld.next('.inputerror').remove();
	          $errorveld.removeClass('invalid-input');
	        }
	        var arrayspot = parseInt(i);
	      }
	      if (obj[arrayspot].totalstatus == 'error') {
	        $("#loginresult").removeClass('positiveresult').show().empty().append(obj[arrayspot].totalmessage);
	      } else if (obj[arrayspot].totalstatus == 'success') {
	        window.location.replace(obj[arrayspot].totalmessage);
	      }
	    }
	  });
	});

	// Wachtwoord vergeten
	$("body").on("click",".forgot-button",function(e){
		e.preventDefault();

		// if($('#registerform')[0].reportValidity()){
			forgotform = $(".forgot-form").serialize();

			$.ajax({
			 type:'post',
			 url:"includes/forgotpass.php",
			 data:({forgotform: forgotform}),
			 success:function(data){
				 var content = $( $.parseHTML(data) );
				 $( "#forgotresult" ).show().empty().append( content );
			 }
		 });
	 // }else{
	 //
	 // }
	});

	// Wachtwoord resetten
	$("body").on("click",".reset-button",function(e){
		e.preventDefault();
		// if($('#registerform')[0].reportValidity()){
			resetform = $(".reset-form").serialize();
			$.ajax({
			 type:'post',
			 url:"includes/resetpass.php",
			 data:({resetform: resetform}),
			 success:function(data){
				 var obj = JSON.parse(data);
				 if(obj.success == 'true'){
					 $( "#resetresult" ).show().empty().append( obj.message );
					 $( "#resetresult" ).addClass('positiveresult');
				 }else{
					 $( "#resetresult" ).removeClass('positiveresult');
					 $( "#resetresult" ).show().empty().append( obj.message );
				 }
			 }
		 });
	 // }else{
	 //
	 // }
	});

	$('#impressions').lightGallery({
	    selector: '.impressionitem'
	});

	$('.propbtn').on('click', (e) => {
			e.stopPropagation();
  })

	$('#productgallery').lightGallery({
	    selector: '.item'
	});

	$('#listingvideo').lightGallery({
	    selector: '.item'
	});

	// // Account gegevens updaten
	$("#account-details").on("click",".save-button",function(e){
		e.preventDefault();
		// if($('#registerform')[0].reportValidity()){
			accountform = $(".account-form").serialize();
			$.ajax({
			 type:'post',
			 url:"includes/updateaccount.php",
			 data:({accountform: accountform}),
			 success:function(data){
				 var obj = JSON.parse(data);
				 var arrayspot = 0;
				 for (var i = 0; i < obj.length; i++) {
					 var status = obj[i].status;
					 var field = obj[i].field;
					 if(status == 'error'){
						 var message = obj[i].message;
							$( 'input[name="' + field + '"]' ).addClass('invalid-input');

							var errorveld = $( 'input[name="' + field + '"]' );
							$( 'input[name="' + field + '"] + div').remove();
							errorveld.after('<div class="inputerror"><i class="fas fa-arrow-up"></i> ' + message + '</div>');
					 }else if(status == 'success'){
						 $( 'input[name="' + field + '"] + div').remove();
						 $( 'input[name="' + field + '"]' ).removeClass('invalid-input');
					 }
					 var arrayspot = parseInt(i);
				 }
				 if(obj[arrayspot].totalstatus == 'error'){
					 $( "#updateresult" ).removeClass('positiveresult');
					 $( "#updateresult" ).show().empty().append( obj[arrayspot].totalmessage );
				 }else if(obj[arrayspot].totalstatus == 'success'){
					 $( "#updateresult" ).show().empty().append( obj[arrayspot].totalmessage );
					 $( "#updateresult" ).addClass('positiveresult');
				 }
			 }
		 });
	 // }else{
	 //
	 // }
	});

	// Adressen zoeken
	$('#search-address').keyup(function(e) {
    clearTimeout($.data(this, 'timer'));
    if (e.keyCode == 13){
			search(true);
		}else{
			$(this).data('timer', setTimeout(search, 500));
		}
	});
	function search(force) {
    var zoekwaarde = $("#search-address").val();
		var account_id = $("#account_id").val();
		$.ajax({
		 type:'post',
		 url:"includes/searchaddress.php",
		 data:({zoekwaarde: zoekwaarde, account_id: account_id}),
		 success:function(data){
			 $( "#adressenlist" ).show().empty().append( data );
			 $( "#deleteresult" ).hide();
			 $( "#adresresult" ).hide();
		 }
	 });
	}
	$("body").on("click","#test",function(e){
		console.log('test');
	});


	//Check of buitenland of Nederland
	$("body").on("click",".landselect",function(e){
	// $('.landselect').change(function(){
	  if($(this).val() != 'Nederland'){
			$( '.buitenlandinput' ).css('display', 'block');
			$('input[name="btw"]').prop('required',true);
	  }else{
			$( '.buitenlandinput' ).css('display', 'none');
			$('input[name="btw"]').removeAttr('required');
		}
	});

	// Adres toevoegen
	$("#newadres-form").on("click",".adres-button",function(e){
		e.preventDefault();
		// if($('#registerform')[0].reportValidity()){
			newadresform = $(".newadres-form").serialize();
			$.ajax({
			 type:'post',
			 url:"includes/newaddress.php",
			 data:({newadresform: newadresform}),
			 success:function(data){
				 var obj = JSON.parse(data);
				 var arrayspot = 0;
				 for (var i = 0; i < obj.length; i++) {
					 var status = obj[i].status;
					 var field = obj[i].field;
					 if(status == 'error'){
						 var message = obj[i].message;
							$( 'input[name="' + field + '"]' ).addClass('invalid-input');
							$( 'select[name="' + field + '"]' ).addClass('invalid-input');

							var errorveld = $( 'input[name="' + field + '"]' );
							var errorselect = $( 'select[name="' + field + '"]' );
							$( 'input[name="' + field + '"] + div').remove();
							$( 'select[name="' + field + '"] + div').remove();
							errorveld.after('<div class="inputerror"><i class="fas fa-arrow-up"></i> ' + message + '</div>');
							errorselect.after('<div class="inputerror"><i class="fas fa-arrow-up"></i> ' + message + '</div>');
					 }else if(status == 'success'){
						 $( 'input[name="' + field + '"] + div').remove();
						 $( 'select[name="' + field + '"] + div').remove();
						 $( 'input[name="' + field + '"]' ).removeClass('invalid-input');
						 $( 'select[name="' + field + '"]' ).removeClass('invalid-input');
					 }
					 var arrayspot = parseInt(i);
				 }
				 if(obj[arrayspot].totalstatus == 'error'){
					 $( "#adresresult" ).removeClass('positiveresult');
					 $( "#adresresult" ).show().empty().append( obj[arrayspot].totalmessage );
				 }else if(obj[arrayspot].totalstatus == 'success'){
					 $('.newadres-form').trigger("reset");
					 $( "#deleteresult" ).hide();
					 $( "#adresresult" ).show().empty().append( obj[arrayspot].totalmessage );
					 $( "#adresresult" ).addClass('positiveresult');
					 $.ajax({
		 			 type:'post',
		 			 url:"includes/refreshaddresslist.php",
		 			 data:({newadresform: newadresform}),
		 			 success:function(adressen){
							 $( "#adressenlist" ).show().empty().append( adressen );
						 }
					 });
				 }
			 }
		 });
	 // }else{
	 //
	 // }
	});
	const $blokje = $('.klantenblokje');

  if (window.matchMedia('(max-width: 767px)').matches) {
      $blokje.on("click", function(e) {
				$('html, body').animate({scrollTop: $('#' + hash).offset().top}, 100);
			});
  } else {

  }




	$blokje.on("click", function(e) {
			e.preventDefault();
			var id = $(this).attr('id');
			$blokje.not(this).removeClass('activeblok');
			$(this).addClass('activeblok');
			history.replaceState(true, '', 'klantenservice#' + id);
			window.location.hash = id;

			// Ajax post which retrieves the questions
			$.ajax({
			 type:'post',
			 url:"includes/faqresult.php",
			 data:{id: id},
			 success:function(data){
				 $( "#faqresult" ).show().empty().append( data );
			 }
		 });
	});


	if(window.location.hash) {
		var hash = window.location.hash.substring(1); //Puts hash in variable, and removes the # character
		location.hash = "#" + hash;

		 $('html, body').animate({scrollTop: $('#' + hash).offset().top-100}, 1000);


		$('#' + hash).addClass('activeblok');
		$.ajax({
		 type:'post',
		 url:"includes/faqresult.php",
		 data:{id: hash},
		 success:function(data){
			 $( "#faqresult" ).show().empty().append( data );
		 }
	 });
	} else {

	}

	//
	// $('.klantenblokje').each(function(i, obj) {
	// 	$(this).on("click", function(e){
	// 		 e.preventDefault();
	// 		 var id = $(this).attr('id');
	// 		 $(this).addClass('activeblok');
	// 		 $(this).siblings().removeClass('activeblok');
	//  });
	// });

	$("body").on("click","#bezorgen",function(e){
		e.preventDefault();
	});

	// Adres edit modal (popup bij adressenboek)
	$("#address").on("click",".edit-adres",function(){
		var editid = $(this).attr('id');
		 $.ajax({
			type:'post',
			url:"includes/updateadres.php",
			data:{editid: editid},
			success:function(data){
				$('#editresult').modal({
					fadeDuration: 100,
				  clickClose: false
				});
				$('#editresult').show().empty().append(data);
				$("input[name='postcode']").mask('0000 SS');
				$("input[name='huisnummer']").mask('000000000');
			}
		});
	});


	$("body").on("click","#openbasis",function(e){
		$('#basiscontrole').modal();
	});

	$("body").on("click","#openpro",function(e){
		$('#procontrole').modal();
	});

	$("body").on("click","#basismodal",function(e){
		$('#basiscontrole').modal();
	});

	$("body").on("click","#promodal",function(e){
		$('#procontrole').modal();
	});


	$(".winkelmand").on("click", function() {
		$(".shopping-cart").toggle();
	});

	function refreshcart(force, tippyInstance) {
	    $.ajax({
	        type: 'post',
	        url: 'includes/refreshcart.php',
	        data: ({}),
	        success: function(data){
	            $('body #headercart').empty().append(data);
	            tippyInstance.popperInstance.update(); // Here, the tippy positioning is updated
	        }
	    });
	}


	function refreshcoupon(force){
	  $.ajax({
		 type:'post',
		 url:"checkout/refreshcoupon.php",
		 data:({}),
		 success:function(data){
			 $( "body #coupon" ).empty().append( data );
		 }
	 });
	}

	function refreshcount(force){
	  $.ajax({
		 type:'post',
		 url:"includes/refreshcount.php",
		 data:({}),
		 success:function(data){
			 $( "body .countcircle" ).empty().append( data );
		 }
	 });
	}

	function refreshprice(force){
		$.ajax({
		 type:'post',
		 url:"includes/prices.php",
		 data:({}),
		 success:function(data){
			 $( "body .prodinfoprice" ).empty().append( data );
		 }
	 });
	}

	function refreshform(force, element, orderline){
		$.ajax({
		 type:'post',
		 url:"payprocess/refreshform.php",
		 data:({orderline:orderline}),
		 success:function(data){
			 $(element).empty().append( data );
		 }
	 });
	}

	// Click minus / plus buttons checkoutpage
	$('.pluscheckout').click(function(e) {
	  e.preventDefault();
		var $button = $(this).prop('disabled', true);
		var $input = $(this).closest('.quantitybtns').siblings('.aantal');
		var productid = $(this).closest('.quantitybtns').siblings('.productid').val();
		var $pricediv = $(this).closest('.prodinfoquantity').siblings('.prodinfoprice');
		var thiselement = $(this).closest('.productblocktop').siblings('.refreshform');
		var orderline = $(this).closest('.productblocktop').siblings('.refreshform').attr('id');
	  var currentValue = parseInt($input.val());
		var quantity = parseInt($input.val()) + 1;
	  $input.val(currentValue + 1);
		$.ajax({
			type: 'post',
			url: "checkout/prices.php",
			data: ({ quantity: quantity, productid: productid }),
			success: function(data) {
				$($pricediv).empty().append( data );
				refreshcoupon(true);
				refreshform(true, thiselement, orderline);
			},
			complete: function(data) {
				$button.prop('disabled', false);
			}
		});
	});

	$('.mincheckout').click(function(e) {
	  e.preventDefault();
		var $button = $(this).prop('disabled', true);
	  var $input = $(this).closest('.quantitybtns').siblings('.aantal');
		var productid = $(this).closest('.quantitybtns').siblings('.productid').val();
		var $pricediv = $(this).closest('.prodinfoquantity').siblings('.prodinfoprice');
		var thiselement = $(this).closest('.productblocktop').siblings('.refreshform');
		var orderline = $(this).closest('.productblocktop').siblings('.refreshform').attr('id');
	  var currentValue = parseInt($input.val());
		var quantity = parseInt($input.val()) - 1;
		if(quantity > 0){
			$input.val(currentValue - 1);
			$.ajax({
			 type:'post',
			 url:"checkout/prices.php",
			 data:({quantity: quantity, productid: productid}),
			 success:function(data){
				 $($pricediv).empty().append( data );
				 refreshcoupon(true);
				 refreshform(true, thiselement, orderline);
			 },
			complete: function(data) {
				$button.prop('disabled', false);
			}
		 });
	 }else{
		 $button.prop('disabled', false);
	 }
	});


	$('.checkoutwrap .aantal').on("change", function(e) {
	  e.preventDefault();
		var productid = $(this).siblings('.productid').val();
		var quantity = $(this).val();
		var $pricediv = $(this).closest('.prodinfoquantity').siblings('.prodinfoprice');
		var thiselement = $(this).closest('.productblocktop').siblings('.refreshform');
		var orderline = $(this).closest('.productblocktop').siblings('.refreshform').attr('id');
	  var form_data = $("#formsid form").serialize();

	  $.ajax({
	    type:'post',
	    url:"checkout/prices.php",
	    data:({productid: productid, quantity: quantity}),
	    success:function(data){
				$($pricediv).empty().append( data );
				refreshcoupon(true);
				refreshform(true, thiselement, orderline);
	    },
			complete: function(data) {

			}
	  });
	});

	$("body").on("click",".couponbtn",function(e){
		e.preventDefault();
		couponvalue = $('input[name=couponcode]').val();

		$.ajax({
	    type:'post',
	    url:"checkout/couponcode.php",
	    data:({couponvalue: couponvalue}),
	    success:function(data){
				var obj = JSON.parse(data);
				var status = obj[0].status;
				var message = obj[0].message;
				$('.couponmessage').addClass('couponmessageactive');
				if(status == 'success'){
					$('.couponmessage').css('background-color', '#93cc27');
				}else if(status == 'error'){
					$('.couponmessage').css('background-color', '#ef2a2a');
				}
				$('.couponmessage').empty().append( message );
				refreshcoupon(true);
	    },
			complete: function() {

			}
	  });
	});

	$('.checkoutwrap input[name=ontwerpcontrole]').on("change", function(e) {
	  e.preventDefault();
		var $radio = $(this);
		$( "input[name=ontwerpcontrole" ).each(function( index ) {
		  $(this).prop('disabled', true);
		});

		var ontwerp = $(this).val();
		var productid = $(this).closest('.prodinfoleft').siblings('.prodinforight').find('.productid').val();
		var $pricediv = $(this).closest('.prodinfoleft').siblings('.prodinforight').find('.prodinfoprice');
		var thiselement = $(this).closest('.productblocktop').siblings('.refreshform');
		var orderline = $(this).closest('.productblocktop').siblings('.refreshform').attr('id');
	  $.ajax({
	    type:'post',
	    url:"checkout/ontwerpcontrole.php",
	    data:({ontwerp: ontwerp, productid: productid}),
	    success:function(data){
				// $($pricediv).empty().append( data );
				refreshcoupon(true);
				refreshform(true, thiselement, orderline);
	    },
			complete: function(data) {
				$( "input[name=ontwerpcontrole" ).each(function( index ) {
				  $(this).prop('disabled', false);
				});
			}
	  });

		$.ajax({
	    type:'post',
	    url:"checkout/prices.php",
	    data:({productid: productid}),
	    success:function(data){
				$($pricediv).empty().append( data );
	    },
			complete: function(data) {

			}
	  });
	});

	$( ".uploadbtn" ).each(function() {
		var form = $(this).closest('.productblockbottom').siblings('form');
		$(this).click(function() {
			form.submit();
		});
	});


	// $( ".uploadbtn" ).each(function( index ) {
	// 	var json = $(this).attr('data-uploadinfo');
	// 	$(this).click(function() {
	// 		$.ajax({
	// 			type:'post',
	// 			url:"https://burrito.a2test.com/print",
	// 			data:({json: json}),
	// 			success:function(data){
	//
	// 			},
	// 			complete: function(data) {
	//
	// 			}
	// 		});
  //   });
	// });

	// function refreshcoupon(force){
	//   $.ajax({
	// 	 type:'post',
	// 	 url:"includes/refreshcoupon.php",
	// 	 data:({}),
	// 	 success:function(data){
	// 		 $( "body .prodinfoprice" ).empty().append( data );
	// 	 }
	//  });
	// }

	// Force caps in zip input field
	$('#zip').keyup(function(){
	 this.value=this.value.toUpperCase();
	});

	// const $categorieknop = $('.categorieknop'); // Cache your elements
	//
	// $categorieknop.on("mouseover", function(e) {
	//     $categorieknop.not(this).removeClass('activecategorieknop');
	//     $(this).addClass('activecategorieknop');
	// });

		// Productmenu
	$('#menu2').removeClass();
	$('#menu2').addClass('animate__animated animate__faster');
	$('#menu1').removeClass();
	$('#menu1').addClass('animate__animated animate__faster');
		$('.toggle-switch input').on('change', function() {
		if($('input[name=switch]:checked', '.toggle-switch').val() == 1){
			$(".categorielijst").css('overflow-y', 'hidden');
      $("#menu1").addClass('animate__slideInUp');
			$("#menu2").addClass('animate__slideOutUp');
			$("#menu1").css('display', 'flex');
      $("#menu1").removeClass('animate__slideOutDown');
			$("#menu2").removeClass('animate__slideInDown');
			$(".product-menu").css('display', 'none');
			setTimeout(function(){ 	$(".categorielijst").css('overflow-y', 'visible'); },600)
			setTimeout(function(){ 	$(".product-menu").css('display', ''); },600)
			console.log('menu1');
			menusession(true);
		}else if($('input[name=switch]:checked', '.toggle-switch').val() == 2){
			$(".categorielijst").css('overflow-y', 'hidden');
			$("#menu1").css('position', 'absolute')
      $("#menu1").addClass('animate__slideOutDown');
			$("#menu2").addClass('animate__slideInDown');
			$("#menu2").css('display', 'flex');
      $("#menu1").removeClass('animate__slideInDown');
			$("#menu2").removeClass('animate__slideOutUp');
			$(".product-menu").css('display', 'none');
			setTimeout(function(){ 	$(".categorielijst").css('overflow-y', 'visible'); },600);
			setTimeout(function(){ 	$(".product-menu").css('display', ''); },600)
			console.log('menu2');
			menusession(true);
		}
	});

	// FAQ zoeken
	$('.searchTerm2').keyup(function(e) {
	clearTimeout($.data(this, 'timer'));


		if($(this).val() == ''){
			$( "#searchresultfaq" ).hide();
		}else{
			if (e.keyCode == 13){
				searchfaq(true);
			}else{
				$(this).data('timer', setTimeout(searchfaq, 500));
			}
		}
	});

	$('.searchTerm1').keyup(function(e) {
	clearTimeout($.data(this, 'timer'));
	$value = $(this).val();
	$( "#prodresultsdesktop" ).show();
		if($(this).val() == ''){
			$( "#prodresultsdesktop" ).show();
		}else{
			$('.searchButton').on('click', function(){
				window.location = '/new/productresultaten/' + $value;
			});

			if (e.keyCode == 13){
				window.location = '/new/productresultaten/' + $(this).val();
			}else{
				$(this).data('timer', setTimeout(searchprods, 500));
			}
		}
	});


	$('.searchproducts').keyup(function(e) {
	clearTimeout($.data(this, 'timer'));
	$( "#prodresults" ).show();
		if($(this).val() == ''){
			$( "#prodresults" ).show();
		}else{
			if (e.keyCode == 13){
				window.location = '/new/productresultaten/' + $(this).val();
			}else{
				$(this).data('timer', setTimeout(searchprodsmob, 500));
			}
		}
	});

	function searchfaq(force) {
		var zoekterm = $(".searchTerm2").val();
		$.ajax({
		 type:'post',
		 url:"includes/faqsearchresults.php",
		 data:({zoekterm: zoekterm}),
		 success:function(data){
			 $( "#searchresultfaq" ).show().empty().append( data );
			 $( ".searchresultfaq" ).css('border-radius', '0px 0px 5px 5px');
			 $( ".searchresultfaq" ).css('border-top', '0px');
			 $( ".searchTerm2" ).css('border-radius', '5px 0 0 0px');
			 $('.searchTerm2').next('.searchButton').css('border-radius', '0 5px 0px 0');
		 }
	 });
	}

	function menusession(force) {
		var productmenuform = $(".productmenuform :input").serialize();
		$.ajax({
		 type:'post',
		 url:"includes/menusession.php",
		 data:({productmenuform: productmenuform}),
		 success:function(data){
		 }
	 });
	}

	function searchprods(force) {
		var zoekterm = $(".searchTerm1").val();
		$( "#prodresultsdesktop" ).show();
		$.ajax({
		 type:'post',
		 url:"includes/searchproducts.php",
		 data:({zoekterm: zoekterm}),
		 success:function(data){
			 $( "#prodresultsdesktop" ).show().empty().append( data );
			 $( ".prodresultsdesktop" ).css('border-radius', '0px 0px 5px 5px');
			 $( ".prodresultsdesktop" ).css('border-top', '0px');
			 $( ".searchTerm1" ).css('border-radius', '5px 0 0 0px');
			 $('.searchTerm1').next('.searchButton').css('border-radius', '0 5px 0px 0');
		 }
	 });
	}

	function searchprodsmob(force) {
		$( "#prodresults" ).show();
		var zoekterm = $(".searchproducts").val();
		$.ajax({
		 type:'post',
		 url:"includes/searchproducts.php",
		 data:({zoekterm: zoekterm}),
		 // beforeSend:function(data){
			//  $( "#prodresults" ).show();
		 // },
		 success:function(data){
			 $( "#prodresults" ).show().empty().append( data );
			 $( ".searchresultprods" ).css('border-radius', '0px 0px 5px 5px');
			 $( ".searchresultprods" ).css('border-top', '0px');
			 $( ".searchproducts" ).css('border-radius', '5px 0 0 0px');
			 $('.searchproducts').next('.searchButton').css('border-radius', '0 5px 0px 0');
		 }
	 });
	}

	// Search focus
	$("body").on("focus",".searchTerm1",function(e){
		$(this).addClass('zindex100');
		$(this).css('border', '2px solid #49abe8');
		$(this).next('.searchButton').css('background', '#49abe8');
		$(this).next('.searchButton').css('border', '2px solid #49abe8');
		$('.header-area').addClass('overlayactive');
	});

	// $("body").on("blur",".searchTerm1",function(e){
	//
	// 	// $( "#prodresultsdesktop" ).hide();
	// 	// $('.header-area').removeClass('overlayactive')
	// });
	// faq
	$("body").on("focus",".searchTerm2",function(e){
		$(this).css('border', '2px solid #49abe8');
		$(this).next('.searchButton').css('background', '#49abe8');
		$(this).next('.searchButton').css('border', '2px solid #49abe8');
		$('.absoluteoverlay').show();
		$('.header-area').addClass('overlayactive');
		$(this).parent('.search').css('z-index', '11');

		if($('.searchTerm2').val() !== ''){
			searchfaq(true)
		}
	});

	$("body").on("blur",".searchTerm2",function(e){
		// $(this).css('border', '2px solid #d2d2d2');
		// $(this).next('.searchButton').css('background', '#d2d2d2');
		// $(this).next('.searchButton').css('border', '2px solid #d2d2d2');
		// $('.absoluteoverlay').hide();

	});
	$("html").on("click",".absoluteoverlay",function(e){
		$(this).removeClass('zindex100');
		$('.searchTerm2').css('border', '2px solid #d2d2d2');
		$('.searchTerm2').next('.searchButton').css('background', '#d2d2d2');
		$('.searchTerm2').next('.searchButton').css('border', '2px solid #d2d2d2');
		$('.searchTerm2').parent('.search').css('z-index', '1');
		$( ".searchTerm2" ).css('border-radius', '5px 0 0 5px');
		$('.searchTerm2').next('.searchButton').css('border-radius', '0 5px 5px 0');
		$( "#searchresultfaq" ).hide();
		$( ".absoluteoverlay" ).hide();
	});

	// products

	const zoekbtn = $('#zoekbtn');
	zoekbtn.on("click", function(e) {

		$('.supportmobileblok').removeClass('showmobilesupport');
		$('.supportmobileblok').addClass('hidemobilesupport');
		$('.zoekmobileblok').toggleClass('showzoekblok hidezoekblok');



		$('.searchproducts').css('border', '2px solid #49abe8');
		$('.searchproducts').next('.searchButton').css('background', '#49abe8');
		$('.searchproducts').next('.searchButton').css('border', '2px solid #49abe8');
		$('.absoluteoverlay').show();
		$('.searchproducts').parent('.search').css('z-index', '11');
		$('.searchproducts').focus();
		if($('.searchproducts').val() !== ''){
			searchprodsmob(true)
		}
	});

	$("html").on("click",".absoluteoverlay",function(e){
		$('.searchproducts').css('border', '2px solid #d2d2d2');
		$('.searchproducts').next('.searchButton').css('background', '#d2d2d2');
		$('.searchproducts').next('.searchButton').css('border', '2px solid #d2d2d2');
		$('.searchproducts').parent('.search').css('z-index', '1');
		$( ".searchproducts" ).css('border-radius', '5px 0 0 5px');
		$('.searchproducts').next('.searchButton').css('border-radius', '0 5px 5px 0');
		$( "#prodresults" ).hide();
		$( ".absoluteoverlay" ).hide();
		$('.zoekmobileblok').toggleClass('showzoekblok hidezoekblok');
	});

	$("body").on("focus",".searchTerm1",function(e){
		$(this).css('border', '2px solid #49abe8');
		$(this).next('.searchButton').css('background', '#49abe8');
		$(this).next('.searchButton').css('border', '2px solid #49abe8');
		$('.absoluteoverlay').show();
		$(this).parent('.search').css('z-index', '11');

		if($('.searchTerm1').val() !== ''){
			searchprods(true)
		}
	});

	$("html").on("click",".absoluteoverlay",function(e){
		$('.searchTerm1').css('border', '2px solid #d2d2d2');
		$('.searchTerm1').next('.searchButton').css('background', '#d2d2d2');
		$('.searchTerm1').next('.searchButton').css('border', '2px solid #d2d2d2');
		$('.searchTerm1').parent('.search').css('z-index', '1');
		$( ".searchTerm1" ).css('border-radius', '5px 0 0 5px');
		$('.searchTerm1').next('.searchButton').css('border-radius', '0 5px 5px 0');
		$( "#prodresultsdesktop" ).hide();
		$( ".absoluteoverlay" ).hide();
	});

	$(".newadres").on("click",function(e){
		whichmodal = $(this).attr('id');
		$.ajax({
			type:'post',
			url:"payprocess/newaddress.php",
			data:{
				whichmodal: whichmodal
			},
			success:function(data){
				$('#newadresmodal').show().empty().append(data);
				$('#newadresmodal').modal({
					fadeDuration: 100,
					clickClose: false
				});
				}
		});
	});


	// Create new adres during checkout
	$("body").on("submit",".createnewadres",function(e){
		e.preventDefault();
		createnewadresform = $(".createnewadres").serialize();

		$.ajax({
		 type:'post',
		 url:"includes/createadress.php",
		 data:{createnewadresform: createnewadresform},
		 success:function(data){
			 var obj = JSON.parse(data);
			 var arrayspot = 0;
			 for (var i = 0; i < obj.length; i++) {
				 var status = obj[i].status;
				 var field = obj[i].field;
				 if(status == 'error'){
					 var message = obj[i].message;
						$( '.createnewadres input[name="' + field + '"]' ).addClass('invalid-input');
						$( '.createnewadres select[name="' + field + '"]' ).addClass('invalid-input');

						var errorveld = $( '.createnewadres input[name="' + field + '"]' );
						var errorselect = $( '.createnewadres select[name="' + field + '"]' );
						$( '.createnewadres input[name="' + field + '"] + div').remove();
						$( '.createnewadres select[name="' + field + '"] + div').remove();
						errorveld.after('<div class="inputerror"><i class="fas fa-arrow-up"></i> ' + message + '</div>');
						errorselect.after('<div class="inputerror"><i class="fas fa-arrow-up"></i> ' + message + '</div>');
				 }else if(status == 'success'){
					 $( '.createnewadres input[name="' + field + '"] + div').remove();
					 $( '.createnewadres select[name="' + field + '"] + div').remove();
					 $( '.createnewadres input[name="' + field + '"]' ).removeClass('invalid-input');
					 $( '.createnewadres select[name="' + field + '"]' ).removeClass('invalid-input');
				 }
				 var arrayspot = parseInt(i);
			 }
			 if(obj[arrayspot].totalstatus == 'successrefresh'){
				 // $.modal.close();
				 // location.reload();
			 }else{
				 if(obj[arrayspot].totalstatus == 'error'){
					 $( "#newadresresult" ).removeClass('positiveresult');
					 $( "#newadresresult" ).show().empty().append( obj[arrayspot].totalmessage );
				 }else if(obj[arrayspot].totalstatus == 'success'){
					 $.modal.close();
					 location.reload();
					 $( "#deleteresult" ).hide();
					 $( "#adresresult" ).hide();
					 $( "#deleteresult" ).addClass('positiveresult');
					 $( "#deleteresult" ).show().empty().append( obj[arrayspot].totalmessage );
					 // $.ajax({
					 // type:'post',
					 // url:"includes/refreshaddresslist.php",
					 // data:({createnewadresform: createnewadresform}),
					 // success:function(adressen){
						// 	 $( "#adressenlist" ).show().empty().append( adressen );
						//  }
					 // });
				 }
			 }
		 }
	 });
	});


	// Edit adres in adressenboek
	$("body").on("submit",".editadres",function(e){
		e.preventDefault();
		editadresform = $(".editadres").serialize();

		$.ajax({
		 type:'post',
		 url:"includes/updateadressave.php",
		 data:{editadresform: editadresform},
		 success:function(data){
			 var obj = JSON.parse(data);
			 var arrayspot = 0;
			 for (var i = 0; i < obj.length; i++) {
				 var status = obj[i].status;
				 var field = obj[i].field;
				 if(status == 'error'){
					 var message = obj[i].message;
						$( '.editadres input[name="' + field + '"]' ).addClass('invalid-input');
						$( '.editadres select[name="' + field + '"]' ).addClass('invalid-input');

						var errorveld = $( '.editadres input[name="' + field + '"]' );
						var errorselect = $( '.editadres select[name="' + field + '"]' );
						$( '.editadres input[name="' + field + '"] + div').remove();
						$( '.editadres select[name="' + field + '"] + div').remove();
						errorveld.after('<div class="inputerror"><i class="fas fa-arrow-up"></i> ' + message + '</div>');
						errorselect.after('<div class="inputerror"><i class="fas fa-arrow-up"></i> ' + message + '</div>');
				 }else if(status == 'success'){
					 $( '.editadres input[name="' + field + '"] + div').remove();
					 $( '.editadres select[name="' + field + '"] + div').remove();
					 $( '.editadres input[name="' + field + '"]' ).removeClass('invalid-input');
					 $( '.editadres select[name="' + field + '"]' ).removeClass('invalid-input');
				 }
				 var arrayspot = parseInt(i);
			 }
			 if(obj[arrayspot].totalstatus == 'successrefresh'){
				 $.modal.close();
				 location.reload();
			 }else{
				 if(obj[arrayspot].totalstatus == 'error'){
					 $( "#editadresresult" ).removeClass('positiveresult');
					 $( "#editadresresult" ).show().empty().append( obj[arrayspot].totalmessage );
				 }else if(obj[arrayspot].totalstatus == 'success'){
					 $.modal.close();
					 $( "#deleteresult" ).hide();
					 $( "#adresresult" ).hide();
					 $( "#deleteresult" ).addClass('positiveresult');
					 $( "#deleteresult" ).show().empty().append( obj[arrayspot].totalmessage );
					 $.ajax({
					 type:'post',
					 url:"includes/refreshaddresslist.php",
					 data:({editadresform: editadresform}),
					 success:function(adressen){
							 $( "#adressenlist" ).show().empty().append( adressen );
						 }
					 });
				 }
			 }
		 }
	 });
	});

	// Adres verwijderen
	$("#address").on("click",".delete-adres",function(){
		 var r = confirm("Weet je zeker dat je dit adres wilt verwijderen?");

		 if(r == true){
			 $(this).parents(".grid-item").remove();

			 var removeid = $(this).attr('id');
			 url = 'includes/deleteaddress.php';


			 $.ajax({
				type:'post',
				url:"includes/deleteaddress.php",
				data:({removeid: removeid}),
				success:function(data){
					var obj = JSON.parse(data);
					$( "#deleteresult" ).show().empty().append( obj[0].message );
					$( "#deleteresult" ).addClass('positiveresult');
				}
			});
		 }
	});


	$("body").on("click",".revealpass",function(e){

		if($(".revealpass").hasClass('fa-eye-slash')){
			$(".revealpass").removeClass('fa-eye-slash');
			$(".revealpass").addClass('fa-eye');
			$(".revealpass").prev().prop('type', 'text');
		}else if($(".revealpass").hasClass('fa-eye')){
			$(".revealpass").removeClass('fa-eye');
			$(".revealpass").addClass('fa-eye-slash');
			$(".revealpass").prev().prop('type', 'password');
		}

		// if($(this).hasClass('fa-eye-slash')){
		// 	$(this).removeClass('fa-eye-slash');
		// 	$(this).addClass('fa-eye');
		// 	$(this).prev().prop('type', 'text');
		// }else if($(this).hasClass('fa-eye')){
		// 	$(this).removeClass('fa-eye');
		// 	$(this).addClass('fa-eye-slash');
		// 	$(this).prev().prop('type', 'password');
		// }
	});

	// Wachtwoord veranderen
	$("#password-form").on("click",".password-button",function(e){
		e.preventDefault();
		// if($('#registerform')[0].reportValidity()){
			passwordform = $(".password-form").serialize();
			$.ajax({
			 type:'post',
			 url:"includes/changepass.php",
			 data:({passwordform: passwordform}),
			 success:function(data){
				 var obj = JSON.parse(data);
				 var arrayspot = 0;
				 for (var i = 0; i < obj.length; i++) {
					 var status = obj[i].status;
					 var field = obj[i].field;
					 if(status == 'error'){
							var message = obj[i].message;
							$( 'input[name="' + field + '"]' ).parent().addClass('invalid-input');
							var errorveld = $( 'input[name="' + field + '"]' ).parent();
							$( 'input[name="' + field + '"]' ).parent().next('div').remove();
							errorveld.after('<div class="inputerror"><i class="fas fa-arrow-up"></i> ' + message + '</div>');
					 }else if(status == 'success'){
							$( 'input[name="' + field + '"]' ).parent().next('div').remove();
							$( 'input[name="' + field + '"]' ).parent().removeClass('invalid-input');
					 }
					 var arrayspot = parseInt(i);
				 }
				 if(obj[arrayspot].totalstatus == 'error'){
					 $( "#passwordresult" ).removeClass('positiveresult');
					 $( "#passwordresult" ).show().empty().append( obj[arrayspot].totalmessage );
				 }else if(obj[arrayspot].totalstatus == 'success'){
					 $( "#passwordresult" ).show().empty().append( obj[arrayspot].totalmessage );
					 $( "#passwordresult" ).addClass('positiveresult');
				 }
			 }
		 });
	 // }else{
	 //
	 // }
	});



	// Wachtwoord veranderen
	$("#korting-form").on("click",".korting-button",function(e){
		e.preventDefault();
		// if($('#registerform')[0].reportValidity()){
			kortingform = $(".korting-form").serialize();
			$.ajax({
			 type:'post',
			 url:"includes/sendkorting.php",
			 data:({kortingform: kortingform}),
			 success:function(data){
				 var obj = JSON.parse(data);
				 var arrayspot = 0;
				 for (var i = 0; i < obj.length; i++) {
					 var status = obj[i].status;
					 var field = obj[i].field;
					 if(status == 'error'){
							var message = obj[i].message;
							$( 'input[name="' + field + '"]' ).parent().addClass('invalid-input');
							var errorveld = $( 'input[name="' + field + '"]' ).parent();
							$( 'input[name="' + field + '"]' ).parent().next('div').remove();
							errorveld.after('<div class="inputerror"><i class="fas fa-arrow-up"></i> ' + message + '</div>');
					 }else if(status == 'success'){
							$( 'input[name="' + field + '"]' ).parent().next('div').remove();
							$( 'input[name="' + field + '"]' ).parent().removeClass('invalid-input');
					 }
					 var arrayspot = parseInt(i);
				 }
				 if(obj[arrayspot].totalstatus == 'error'){
					 $( "#kortingresult" ).removeClass('positiveresult');
					 $( "#kortingresult" ).show().empty().append( obj[arrayspot].totalmessage );
				 }else if(obj[arrayspot].totalstatus == 'success'){
					 $( "#kortingresult" ).show().empty().append( obj[arrayspot].totalmessage );
					 $( "#kortingresult" ).addClass('positiveresult');
				 }
			 }
		 });
	 // }else{
	 //
	 // }
	});

var $producten = '';
	// Bestellen
	$("body").on("click","#orderbtn",function(e){
		e.preventDefault();
		$producten = $("#formsid form").serialize();
		$('input[class=optionselected]').each(function(e){
		    if ($(this).is(':checked')){
					var bleed = $(this).attr('data-bleed');
					var multiple_layouts = $(this).attr('data-multiple_layouts');
					var template = $(this).attr('data-template');
					var canvas_size = $(this).attr('data-canvas_size');
					var rulers = $(this).attr('data-rulers');
					var spotcolor = $(this).attr('data-spotcolor');
					var safety_margin = $(this).attr('data-safety_margin');
					var multiple_pages = $(this).attr('data-multiple_pages');
					var verpakking = $(this).attr('data-verpakking');
					if (typeof bleed !== typeof undefined && bleed !== false) {
						$producten = $producten+"&bleed="+bleed;
					}
					if (typeof multiple_layouts !== typeof undefined && multiple_layouts !== false) {
						$producten = $producten+"&multiple_layouts="+multiple_layouts;
					}
					if (typeof template !== typeof undefined && template !== false) {
						$producten = $producten+"&template="+template;
					}
					if (typeof canvas_size !== typeof undefined && canvas_size !== false) {
						$producten = $producten+"&canvas_size="+canvas_size;
					}
					if (typeof rulers !== typeof undefined && rulers !== false) {
						$producten = $producten+"&rulers="+rulers;
					}
					if (typeof spotcolor !== typeof undefined && spotcolor !== false) {
						$producten = $producten+"&spotcolor="+spotcolor;
					}
					if (typeof safety_margin !== typeof undefined && safety_margin !== false) {
						$producten = $producten+"&safety_margin="+safety_margin;
					}
					if (typeof multiple_pages !== typeof undefined && multiple_pages !== false) {
						$producten = $producten+"&multiple_pages="+multiple_pages;
					}
					if (typeof verpakking !== typeof undefined && verpakking !== false) {
						$producten = $producten+"&verpakking="+verpakking;
					}
					// console.log($(this).attr('data-bleed'));
				}else{
					// Non selected options
					// console.log('niet geselecteerd');
				}
		});
		var $order = 'yes';
		$.ajax({
		 type:'post',
		 url:"catalog/calcdiv.php",
		 data:{
			 form_data: $producten,
			 order: $order
		 },
		 success:function(data){
			 var obj = JSON.parse(data);

			 if(obj[1].status == 'error'){
			 }else if(obj[1].status == 'success'){
				 var message = obj[1].message;

				 $.ajax({
			 		 type:'post',
			 		 url:"includes/winkelmandpopup.php",
			 		 data:{
			 			 producten: $producten
			 		 },
			 		 success:function(data1){
			 			 $( "#orderresult" ).show().empty().append(data1);
						 $('#orderresult').modal();
						 refreshcount(true);
			 		 }
			 	 });
			 }
		 }
	 });
	});


	// Winkelmand popup
	$("#orderresult").on("click","#togglespecs",function(e){
		if($(this).children('i').hasClass('fa-chevron-down') == true){
			$(this).children('i').removeClass('fa-chevron-down');
			$(this).children('i').addClass('fa-chevron-up');
		}else if($(this).children('i').hasClass('fa-chevron-up') == true){
			$(this).children('i').removeClass('fa-chevron-up');
			$(this).children('i').addClass('fa-chevron-down');
		}
		$( ".togglespecs" ).slideToggle( "fast" );
	});

	//Factuur adres aanpassen of kiezen
	$("body").on("click","#openfactuurmodal",function(e){
		$('#factuurmodal').modal();
	});

	//Bezorg adres aanpassen of kiezen
	$("body").on("click","#openbezorgmodal",function(e){
		$('#bezorgmodal').modal();
	});

	// Open factuur edit modal
	$(".editfactuuradres").on("click",function(e){
		adresid = $(this).attr('id');
		$.ajax({
			type:'post',
			url:"includes/editcheckoutadres.php",
			data:{
				adresid: adresid
			},
			success:function(data){
				$('#editfactuurmodal').show().empty().append(data);
				$('#editfactuurmodal').modal({
					fadeDuration: 100,
					clickClose: false
				});
			}
		});
		// console.log(adresid);
	});

	// Open adresboek modal
	$(".openadresboek").on("click",function(e){
		adresid = $(this).attr('id');
		$.ajax({
			type:'post',
			url:"includes/adresboekpopup.php",
			data:{
				adresid: adresid
			},
			success:function(data){
				$('#editfactuurmodal').show().empty().append(data);
				$('#editfactuurmodal').modal();
			}
		});
		// console.log(accountid);
	});


	// Open adresboek modal
	$(".editadresmodal").on("click",".grid-item",function(e){
		adresid = $(this).attr('id');
		$.ajax({
			type:'post',
			url:"payprocess/pickadress.php",
			data:({
				adresid: adresid
			}),
			success:function(data){
				var obj = JSON.parse(data);
				if(obj[0].totalstatus == 'success'){
	 				location.reload();
	 			}
			}
		});
		// console.log(accountid);
	});

	// Product verwijderen
	$('body').on('click', '.deleteproduct', function(event) {
		// Stop default behaviour
		event.preventDefault();

		var r = confirm("Weet je zeker dat je dit product uit je winkelwagen wilt verwijderen?");

		if(r == true){
			prodid = $(this).attr('id');
			$.ajax({
				type:'post',
				url:"payprocess/deleteproduct.php",
				data:({
					prodid: prodid
				}),
				success:function(data){
		 			location.reload();
				}
			});
		}else{

		}
	});



	// Cart toggle specs
	$("body").on("click","#togglespecscart",function(e){
		if($(this).find('i').hasClass('fa-chevron-down') == true){
			$(this).find('i').removeClass('fa-chevron-down');
			$(this).find('i').addClass('fa-chevron-up');
		}else if($(this).find('i').hasClass('fa-chevron-up') == true){
			$(this).find('i').removeClass('fa-chevron-up');
			$(this).find('i').addClass('fa-chevron-down');
		}
		$(this).siblings('.speclist').slideToggle("fast");
	});

	// Checkout toggle specs
	$("body").on("click","#togglespecscheckout",function(e){
		if($(this).find('i').hasClass('fa-chevron-down') == true){
			$(this).find('i').removeClass('fa-chevron-down');
			$(this).find('i').addClass('fa-chevron-up');
		}else if($(this).find('i').hasClass('fa-chevron-up') == true){
			$(this).find('i').removeClass('fa-chevron-up');
			$(this).find('i').addClass('fa-chevron-down');
		}
		$(this).closest('.prodinfoleft').find('.speclist').slideToggle("fast");
	});
	// Toggle extra
	$("body").on("click","#toggleextracheckout",function(e){
		if($(this).find('i').hasClass('fa-chevron-down') == true){
			$(this).find('i').removeClass('fa-chevron-down');
			$(this).find('i').addClass('fa-chevron-up');
		}else if($(this).find('i').hasClass('fa-chevron-up') == true){
			$(this).find('i').removeClass('fa-chevron-up');
			$(this).find('i').addClass('fa-chevron-down');
		}
		$(this).closest('.prodinfocheckout').find('.toggleextracheckout').slideToggle( "fast" );
	});





	//
	//
	// $("#account-details").on("blur","input",function(e){
	// 	e.preventDefault();
	// 	// if($('#registerform')[0].reportValidity()){
	// 		accountform = $(".account-form").serialize();
	// 		$.ajax({
	// 		 type:'post',
	// 		 url:"includes/updateaccount.php",
	// 		 data:({accountform: accountform}),
	// 		 success:function(data){
	// 			 var obj = JSON.parse(data);
	//
	// 			 for (var i = 0; i < obj.length; i++) {
	// 				 var status = obj[i].status;
	// 				 var field = obj[i].field;
	// 				 if(status == 'error'){
	// 					 var message = obj[i].message;
	// 						$( 'input[name="' + field + '"]' ).addClass('invalid-input');
	//
	// 						var errorveld = $( 'input[name="' + field + '"]' );
	// 						$( 'input[name="' + field + '"] + div').remove();
	// 						errorveld.after('<div class="inputerror">' + message + '</div>');
	// 				 }else if(status == 'success'){
	// 					 $( 'input[name="' + field + '"] + div').remove();
	// 					 $( 'input[name="' + field + '"]' ).removeClass('invalid-input');
	// 				 }
	// 			 }
	// 		 }
	// 	 });
	//  // }else{
	//  //
	//  // }
	// });


  // let qty = document.querySelector("input[name='quantity']");
  // qty.addEventListener("change", function (event) {
  //     if (this.value < 1) this.value = 1;
  // })


  $("body").on("change",".nice-select",function(){
    // Sort options
    $selectedval = $(this). children("option:selected"). val();
    $alias = '';
    url = 'catalog/filter.php';

    var posting = $.post( url, { selectedval: $selectedval, alias: $alias} );
    // Put result of PHP script in div with id #filter
    posting.done(function( data ) {
      var content = $( $.parseHTML(data) );
      $( "#filter" ).empty().append( content );
    });
  });

  // Delete a product when clicking on remove icon from shoppingcart
  $('body').on('click', '.remove_from_cart', function(event) {
    // Stop default behaviour
    event.preventDefault();
    // Get the ID of the product
    var $remove = $(this).attr('id');
    url = 'catalog/cart.php';
    url1 = 'catalog/cartpage.php';
    url2 = 'catalog/checkoutdiv.php';
    // Post above values to cart.php
    var posting = $.post( url, { remove: $remove} );
    // Put the result inside the shopping cart
    posting.done(function( data ) {
      var content = $( data );
      $( "#shoppingcart" ).empty().append( content );

      var posting1 = $.post( url1 );
      posting1.done(function( data1 ) {
        var content1 = $( $.parseHTML(data1) );
        $( "#cartpage" ).empty().append( content1 );
      });

      var posting2 = $.post( url2 );
      posting2.done(function( data2 ) {
        var content2 = $( $.parseHTML(data2) );
        $( "#checkoutdiv" ).empty().append( content2 );
      });
    });
  });

  // Update cart quantities
  $('body').on('click', '.update_cart_btn', function(event) {
    // Stop default behaviour
    event.preventDefault();
    // Get the ID of the product
    var elements = $('input[name="quantity"]'),
    url = 'catalog/cart.php',
    url1 = 'catalog/cartpage.php',
    postBody = [];
    for (var i=0; i<elements.length; i++) {
        var element = $(elements[i]);
        postBody.push({
            product: element.attr('id'),
            quantity: element.val()
        })
    }
    // Post above values to shoppingcart
    var posting = $.post( url, {quantityobject: JSON.stringify(postBody)} );
    posting.done(function( data ) {
        var content = $( data );
        $( "#shoppingcart" ).empty().append( content );
        // Post to the cartpage
        var posting1 = $.post( url1, {quantityobject: JSON.stringify(postBody)} );
        posting1.done(function( data1 ) {
            var content1 = $( data1 );
            $( "#cartpage" ).empty().append( content1 );
        });
    });
  });

  // Insert coupon code
  $('body').on('click', '.coupon_button', function(event) {
    // Stop default behaviour
    event.preventDefault();
    // Get the value of the coupon code input
    var $coupon = $('#coupon_code').val();
    url = 'catalog/cart.php';
    url1 = 'catalog/cartpage.php';
    // Put the result inside the shopping cart and shoppingcart page
    var posting1 = $.post( url1, { coupon: $coupon} );
    var posting = $.post( url, { coupon: $coupon} );
    posting1.done(function( data1 ) {
      var content1 = $( data1 );
      $( "#cartpage" ).empty().append( content1 );
      posting.done(function( data ) {
        var content = $( data );
        $( "#shoppingcart" ).empty().append( content );
      });
      let qty = document.getElementById($cart['productid'].$cart['kuubkosten']);
      qty.addEventListener("change", function (event) {
          if (this.value < 1) this.value = 1;
      })
    });
  });

  // Delete a product when clicking on remove icon from cartpage
  $('body').on('click', '.remove_from_cartlist', function(event) {
    // Stop default behaviour
    event.preventDefault();
    // Get the ID of the product
    var $remove = $(this).attr('id');
    url = 'catalog/cart.php';
    url1 = 'catalog/cartpage.php';
    // Post above values to cart.php
    var posting = $.post( url, { remove: $remove} );
    // Put the result inside the shopping cart
    posting.done(function( data ) {
      var content = $( data );
      $( "#shoppingcart" ).empty().append( content );
      var posting1 = $.post( url1 );
      posting1.done(function( data1 ) {
        var content1 = $( data1 );
        $( "#cartpage" ).empty().append( content1 );
      });
    });
  });

  // Post review
  $("body").on("click",".add_review",function(){
    event.preventDefault();
    $reviewform = $(".addreview").serializeArray();
    url = 'includes/addreviewscript.php';

    var posting = $.post( url, { reviewarray: $reviewform} );

    posting.done(function( data ) {
      var content = $( $.parseHTML(data) );
      $('[name="beoordeling"]').hide();
      $('[name="submitreview"]').hide();
      $('#textarea_feedback').hide();
      $('.beoordeeltekst').hide();
      $( ".reviewresponse" ).empty().append( content ).slideDown();
    });
  });


	// Post to shopping cart
  $("body").on("change","#voorwaarden",function(){
		if($(this).is(':checked')){
			$('#bestelbtn').addClass('completeorderbtn');
			$('#bestelbtn').removeClass('disabledorderbtn');
		}else{
			$('#bestelbtn').removeClass('completeorderbtn');
			$('#bestelbtn').addClass('disabledorderbtn');
		}
  });

	// Post to shopping cart
  $("body").on("click","#order",function(){
    $serializedform = $("#productform").serializeArray();
    url = 'catalog/cart.php';

    var posting = $.post( url, { productarray: $serializedform} );

    posting.done(function( data ) {
      var content = $( $.parseHTML(data) );
      $( "#shoppingcart" ).empty().append( content );
    });

    $('.popupmessage').fadeIn(200);
    $('.popupmessage').delay(1000).fadeOut(200);

  });

	// Save notitie
	$("body").on("click",".savenotitie",function(){
		$notitieid = $(".notitieid").val();
    $notitie = $(".notitieval").val();
		$.ajax({
			type:'post',
			url:"includes/savenotitie.php",
			data:({
				notitie: $notitie,
				notitieid: $notitieid
			}),
			success:function(data){
				location.reload();
			}
		});
  });

	// Place order
	$("body").on("click","#bestelbtn",function(){
		if($('#bestelbtn').hasClass('completeorderbtn')){
			$bezorgform = $("#bezorgform").serialize();
			$opmerking = $("#opmerking").val();
			$.ajax({
				type:'post',
				url:"payprocess/pay.php",
				data:({
					bezorgform: $bezorgform,
					opmerking: $opmerking
				}),
				success:function(data){
					var obj = JSON.parse(data);
					var url = obj[0].url;
					window.location.replace(url)
					// location.reload();
				}
			});
		}
  });






  // $("body").on("click",".filterprice",function(){
  //   // Sort options
  //   $minprice = $('#min-price').val().replace('€', '');
  //   $maxprice = $('#max-price').val().replace('€', '');
  //
  //   $prijsfilter = 'prijsfilter';
  //   $alias = '';
  //   url = 'catalog/filter.php';
  //
  //   var posting = $.post( url, { alias: $alias, prijsfilter: $prijsfilter, minprice: $minprice, maxprice: $maxprice} );
  //   // Put result of PHP script in div with id #filter
  //   posting.done(function( data ) {
  //     var content = $( $.parseHTML(data) );
  //     $( "#filter" ).empty().append( content );
  //   });
  // });

  // Review textarea counter
  var text_max = 140;
  $('#textarea_feedback').html('Nog <b>' + text_max + '</b> tekens');

  $('#reviewtext').keyup(function() {
      var text_length = $('#reviewtext').val().length;
      var text_remaining = text_max - text_length;

      $('#textarea_feedback').html('Nog <b>' + text_remaining + '</b> tekens');
  });

	// Set locale to dutch
  moment.locale('nl');

  // Set current day
  $dag = moment().format('dddd');
  // Next business day
  $eerstvolgend = moment($dag, 'dddd').businessAdd(1);
  $eerstvolgendvolledig = moment($eerstvolgend).format('dddd D MMMM');
  // Set full date to use in string
  $volledatum = $dag +' '+ moment().format('D MMMM');

  $leverdatumdatabase = moment($dag, 'dddd').businessAdd();
  $leverdatumdatabaseplus1 = moment($leverdatumdatabase, 'dddd').businessAdd(1);
  $leverdatumbegin = moment($leverdatumdatabase).format('dddd D MMMM');
  $leverdatumeind = moment($leverdatumdatabaseplus1).format('dddd D MMMM');
  $leverdatumvolledig = $leverdatumbegin + ' - ' + $leverdatumeind;
	$leverdatumvolledigof = $leverdatumbegin + ' of ' + $leverdatumeind;

  $('#leveringchecktop').append('Voor 10:00 besteld, binnen '+  +' werkdagen geleverd');

  // Check if day is saturday or sunday
  if(($dag == 'zaterdag') || ($dag == 'zondag') || ($dag == 'vrijdag' && moment().hours() >= 10)){
    // It's the weekend or friday past 10 so $eerstvolgendvolledig is the first day after the weekend
    $('#datumcheck').append('* Heb je je ontwerp gecheckt? Geef akkoord op jouw ontwerp vóór <b>'+ $eerstvolgendvolledig +' <u>10 uur</u>.</b>');
    $('#leveringcheck').append('Levering: <br>'+ $leverdatumvolledig +' *');
  }else{
    $('#leveringcheck').append('Levering: <br>'+ $leverdatumvolledig +' *');
    // It's a businessday so calculate time
    if(moment().hours() >= 10){
      // Time is 10 or after 10
      $('#datumcheck').append('* Heb je je ontwerp gecheckt? Geef akkoord op jouw ontwerp vóór <b>'+ $eerstvolgendvolledig +' <u>10 uur</u>.</b>');
    }else{
      // Time is before 10
      $('#datumcheck').append('* Heb je je ontwerp gecheckt? Geef vandaag akkoord op jouw ontwerp vóór <b><u>10 uur</u>.</b>');
    }
  }


				// Check of het weekend is
		if(($dag == 'zaterdag') || ($dag == 'zondag')){
			$('.checktime').append('<a href="klantenservice">Klantenservice gesloten</a> <span class="supportdotclosed"></span>');
		}else{
			var time = moment(),
			format = 'hh:mm:ss',
			nine = moment('09:00:00', format),
  		seventeen = moment('17:00:00', format);


			// Check of het tussen 9 en 5 is
			if(time.isBetween(nine, seventeen)){
				$('.checktime').append('<a href="klantenservice">Klantenservice geopend</a> <span class="supportdot"></span>');
			}else{
				$('.checktime').append('<a href="klantenservice">Klantenservice gesloten</a> <span class="supportdotclosed"></span>');
			}
		}
				$( ".property_tip" ).each(function( i ) {
			tippy(this, {
				theme: 'blue',
				trigger: 'mouseenter',
				allowHTML: true,
				animation: 'scale-subtle',
				interactive: true,
				content: function (reference) {
					return reference.querySelector('.tooltipcontent');
				}
			});
		});

		$( ".hulptip" ).each(function( i ) {
			tippy(this, {
				theme: 'blue',
				trigger: 'click',
				allowHTML: true,
				animation: 'scale-subtle',
				interactive: true,
				content: function (reference) {
					return reference.querySelector('.tooltipcontent');
				}
			});
		});

		$( ".carttip" ).each(function( i ) {
		    tippy(this, {
		        theme: 'blue',
		        trigger: 'click',
		        allowHTML: true,
		        animation: 'scale-subtle',
		        maxWidth: 400,
		        boundary: 'viewport', // This has been dropped in tippy@6
		        interactive: true,
		        content: function (reference) {
		            return reference.querySelector('.tooltipcontent');
		        },
		        onShow(instance) {
		            refreshcart(true, instance);
		        }
		    });
		});

		$( ".controltip" ).each(function( i ) {
			tippy(this, {
				theme: 'blue',
				trigger: 'mouseenter',
				placement: 'right',
				allowHTML: true,
				animation: 'scale-subtle',
				interactive: true,
				content: function (reference) {
					return reference.querySelector('.tooltipcontent');
				}
			});
		});


		$( ".tooltippy" ).each(function( i ) {
			tippy(this, {
				trigger: 'click',
				allowHTML: true,
				animation: 'scale-subtle',
				interactive: true,
				content: function (reference) {
					return reference.querySelector('.tooltipcontent');
				}
				// content: "<div class='tooltipcontent'><img src='assets/images/custom/logo_helinium.png'><p>Stage<br>Bedrijfsbezoek<br>Voorlichting op school</p></div>",
			});
		});

		$( ".tooltippy_nostyle" ).each(function( i ) {
			tippy(this, {
				trigger: 'click',
				allowHTML: true,
				animation: 'scale-subtle',
				interactive: true,
				content: function (reference) {
					return reference.querySelector('.tooltipcontent');
				}
				// content: "<div class='tooltipcontent'><img src='assets/images/custom/logo_helinium.png'><p>Stage<br>Bedrijfsbezoek<br>Voorlichting op school</p></div>",
			});
		});

		// html2canvas(document.querySelector(".mijnbestelling")).then(canvas => {
	  //   document.body.appendChild(canvas)
		// });

		//
		// $("#savebon").on('click', function() {
		// 	html2canvas($('#bonpng').get(0)).then(function(canvas) {
		//     document.body.appendChild(canvas);
		// 		downloadLink = document.createElement('a');
	  //     downloadLink.href = canvas.toDataURL('image/png');
	  //     downloadLink.download = fileName;
	  //     raiseEvent(downloadLink, 'click');
		// 	  },
		// 	  width: 400,
		// 	  height: 400
		// 	});
		// });

		$(".grid").imagesLoaded(function() {
			$(".grid").masonry({
			  itemSelector: ".grid-item"
			});
		});

});



</script>

</body>

</html>

              
            
!

CSS

              
                
              
            
!

JS

              
                
              
            
!
999px

Console