/*
Theme Name: dNovo Theme: Heks'nkaas
Theme URI: https://www.dnovo.nl/wp-themes/theme-heksnkaas/
Author: dNovo ICT - Web & Commerce
Author URI: https://www.dnovo.nl
Description: This theme is custom made for Heks'nkaas.
Version: 1.0
License: dNovo ICT General Public License v2 or later
License URI: http://www.dnovo.nl
Tags: black, blue, gray, pink, purple, white, yellow, dark, light, two-columns, left-sidebar, fixed-layout, responsive-layout, accessibility-ready, custom-background, custom-colors, custom-header, custom-menu, editor-style, featured-images, microformats, post-formats, rtl-language-support, sticky-post, threaded-comments, translation-ready
Text Domain: dNovotheme
*/

@import url('https://fonts.googleapis.com/css?family=Pangolin');
@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800');

@font-face {
    font-family: 'AppleBerry';
    src:  url('fonts/appleberry.woff') format('woff'),
    url('fonts/appleberry.svg#appleberry') format('svg'),
    url('fonts/appleberry.eot'),
    url('fonts/appleberry.eot?#iefix') format('embedded-opentype');
    font-weight: normal;
    font-style: normal;
}

/*!
 * fullPage 2.9.4
 * https://github.com/alvarotrigo/fullPage.js
 * MIT licensed
 *
 * Copyright (C) 2013 alvarotrigo.com - A project by Alvaro Trigo
 */
html.fp-enabled,
.fp-enabled body {
    margin: 0;
    padding: 0;
    overflow:hidden;

    /*Avoid flicker on slides transitions for mobile phones #336 */
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}
#superContainer {
    height: 100%;
    position: relative;

    /* Touch detection for Windows 8 */
    -ms-touch-action: none;

    /* IE 11 on Windows Phone 8.1*/
    touch-action: none;
}
.fp-section {
    position: relative;
    -webkit-box-sizing: border-box; /* Safari<=5 Android<=3 */
    -moz-box-sizing: border-box; /* <=28 */
    box-sizing: border-box;
}
.fp-slide {
    float: left;
}
.fp-slide, .fp-slidesContainer {
    height: 100%;
    display: block;
}
.fp-slides {
    z-index:1;
    height: 100%;
    overflow: hidden;
    position: relative;
    -webkit-transition: all 0.3s ease-out; /* Safari<=6 Android<=4.3 */
    transition: all 0.3s ease-out;
}
.fp-section.fp-table, .fp-slide.fp-table {
    display: table;
    table-layout:fixed;
    width: 100%;
}
.fp-tableCell {
    display: table-cell;
    vertical-align: middle;
    width: 100%;
    height: 100%;
}
.fp-slidesContainer {
    float: left;
    position: relative;
}
.fp-controlArrow {
    -webkit-user-select: none; /* webkit (safari, chrome) browsers */
    -moz-user-select: none; /* mozilla browsers */
    -khtml-user-select: none; /* webkit (konqueror) browsers */
    -ms-user-select: none; /* IE10+ */
    position: absolute;
    z-index: 4;
    top: 50%;
    cursor: pointer;
    width: 0;
    height: 0;
    border-style: solid;
    margin-top: -38px;
    -webkit-transform: translate3d(0,0,0);
    -ms-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}
.fp-controlArrow.fp-prev {
    left: 15px;
    width: 0;
    border-width: 38.5px 34px 38.5px 0;
    border-color: transparent #fff transparent transparent;
}
.fp-controlArrow.fp-next {
    right: 15px;
    border-width: 38.5px 0 38.5px 34px;
    border-color: transparent transparent transparent #fff;
}
.fp-scrollable {
    overflow: hidden;
    position: relative;
}
.fp-scroller{
    overflow: hidden;
}
.iScrollIndicator{
    border: 0 !important;
}
.fp-notransition {
    -webkit-transition: none !important;
    transition: none !important;
}
#fp-nav {
    position: fixed;
    z-index: 100;
    margin-top: -32px;
    top: 50%;
    opacity: 1;
    -webkit-transform: translate3d(0,0,0);
}
#fp-nav.right {
    right: 17px;
}
#fp-nav.left {
    left: 17px;
}
.fp-slidesNav{
    position: absolute;
    z-index: 4;
    left: 50%;
    opacity: 1;
    -webkit-transform: translate3d(0,0,0);
    -ms-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}
.fp-slidesNav.bottom {
    bottom: 17px;
}
.fp-slidesNav.top {
    top: 17px;
}
#fp-nav ul,
.fp-slidesNav ul {
    margin: 0;
    padding: 0;
}
#fp-nav ul li,
.fp-slidesNav ul li {
    display: block;
    width: 14px;
    height: 13px;
    margin: 7px;
    position:relative;
}
.fp-slidesNav ul li {
    display: inline-block;
}
#fp-nav ul li a,
.fp-slidesNav ul li a {
    display: block;
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    cursor: pointer;
    text-decoration: none;
}
#fp-nav ul li a.active span,
.fp-slidesNav ul li a.active span,
#fp-nav ul li:hover a.active span,
.fp-slidesNav ul li:hover a.active span{
    height: 12px;
    width: 12px;
    margin: -6px 0 0 -6px;
    border-radius: 100%;
}
#fp-nav ul li a span,
.fp-slidesNav ul li a span {
    border-radius: 50%;
    position: absolute;
    z-index: 1;
    height: 4px;
    width: 4px;
    border: 0;
    background: #333;
    left: 50%;
    top: 50%;
    margin: -2px 0 0 -2px;
    -webkit-transition: all 0.1s ease-in-out;
    -moz-transition: all 0.1s ease-in-out;
    -o-transition: all 0.1s ease-in-out;
    transition: all 0.1s ease-in-out;
}
#fp-nav ul li:hover a span,
.fp-slidesNav ul li:hover a span{
    width: 10px;
    height: 10px;
    margin: -5px 0px 0px -5px;
}
#fp-nav ul li .fp-tooltip {
    position: absolute;
    top: -2px;
    color: #fff;
    font-size: 14px;
    font-family: arial, helvetica, sans-serif;
    white-space: nowrap;
    max-width: 220px;
    overflow: hidden;
    display: block;
    opacity: 0;
    width: 0;
    cursor: pointer;
}
#fp-nav ul li:hover .fp-tooltip,
#fp-nav.fp-show-active a.active + .fp-tooltip {
    -webkit-transition: opacity 0.2s ease-in;
    transition: opacity 0.2s ease-in;
    width: auto;
    opacity: 1;
}
#fp-nav ul li .fp-tooltip.right {
    right: 20px;
}
#fp-nav ul li .fp-tooltip.left {
    left: 20px;
}
.fp-auto-height.fp-section,
.fp-auto-height .fp-slide,
.fp-auto-height .fp-tableCell{
    height: auto !important;
}

.fp-responsive .fp-auto-height-responsive.fp-section,
.fp-responsive .fp-auto-height-responsive .fp-slide,
.fp-responsive .fp-auto-height-responsive .fp-tableCell {
    height: auto !important;
}


/*** dNovo ICT Styling © 2017 **/

@keyframes bounce-up-down {
    0%   { bottom: 30px; }
    50%  { bottom: 40px; }
    100% { bottom: 30px; }
}

@keyframes zoom-in {
    0%   { transform: scale(4); }
    100% { transform: scale(1); }
}

@keyframes bounce-fade {
    0%   { transform: scale(1); opacity: .5; }
    50%  { transform: scale(1.03); opacity: 1; }
    100% { transform: scale(1); opacity: .5; }
}

@keyframes bounce {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.03); }
    100% { transform: scale(1); }
}

@keyframes bounce-large {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.05); }
    100% { transform: scale(1); }
}

@keyframes lazy-left-image {
    0%   { left: -9999px; opacity: 0; position: absolute; }
    100% { left: 0px; opacity: 1; position: relative; }
}

@keyframes lazy-right-image {
    0%   { transform: scale(0); opacity: 0; position: relative; }
    100% { transform: scale(1); opacity: 1; position: relative; }
}

@keyframes lazy-left-txt {
    0%   {
        -ms-transform: rotate(-90deg); /* IE 9 */
        -webkit-transform: rotate(-90deg); /* Chrome, Safari, Opera */
        transform: rotate(-90deg);
        text-indent: -9999px;
        opacity: 0;
    }
    50%  {
        -ms-transform: rotate(-45deg); /* IE 9 */
        -webkit-transform: rotate(-45deg); /* Chrome, Safari, Opera */
        transform: rotate(-45deg);
        opacity: 0.5;
        text-indent: -4999px;
    }

    100% {
        -ms-transform: rotate(0deg); /* IE 9 */
        -webkit-transform: rotate(0deg); /* Chrome, Safari, Opera */
        transform: rotate(0deg);
        text-indent: 0px;
        opacity: 1;
    }
}

@keyframes lazy-right-txt {
    0%   { transform: scale(0); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

* {
    box-sizing: border-box;
}

body {
    background: url("images/bg-green.png") repeat;
    padding: 0;
    margin: 0;
    font-size: 18px;
    position: relative;
    font-family: 'Pangolin', cursive;
    overflow-y: scroll;
    overflow-x: hidden;
}

body:after {
    background: url("images/sterren-transp.png") no-repeat center bottom; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;
    content: "";
    display: block;
    width: 100%;
    height: 100vh;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    animation-name: bounce-fade;
    animation-duration: 6s;
    animation-iteration-count: infinite;
}

a {
    color: #fff;
    text-decoration: underline;
}

a:hover {
    color: #B1519A;
}

h1,
h2,
h3,
h4,
p {
    font-family: 'Pangolin', cursive;
    color: #fff;
    font-size: 1em;
    margin-bottom: 2em;
    line-height: 1.5em;
    padding: 0;
    text-transform: uppercase;
}

ul, ol {
    font-family: 'Pangolin', cursive;
    color: #fff;
    font-size: 0.8em;
    line-height: 1.5em;
    margin-bottom: 2em;
}

hr {
    border: 0;
    width: 100%;
    height: 10px;
    background: transparent url("images/hr.png") no-repeat;
}

.clear {
    clear: both;
    height: 0;
    margin: 0;
    padding: 0;
}

.align-left { float: left; }
.align-right { float: right; }

.btn-cta {
    display: inline-block;
    color: #fff;
    font-family: "AppleBerry", Pangolin;
    font-size: 1.4em;
    text-transform: uppercase;
    text-decoration: none;
    vertical-align: middle;
    text-align: center;
    -webkit-transition: all .1s ease-in-out;
    -moz-transition: all .1s ease-in-out;
    -ms-transition: all .1s ease-in-out;
    -o-transition: all .1s ease-in-out;
    transition: all .1s ease-in-out;
}

.btn-cta:hover {
    text-decoration: none;
    color: #fff;
    -ms-transform: rotate(-2deg); /* IE 9 */
    -webkit-transform: rotate(-2deg); /* Chrome, Safari, Opera */
    transform: rotate(-2deg);
}

.btn-cta.cta-small {
    background: transparent url("images/btn-bg-small.png") no-repeat;
    width: 124px;
    height: 53px;
    line-height: 53px;
}

.btn-cta.cta-large {
    background: transparent url("images/btn-bg-large.png") no-repeat;
    width: 234px;
    height: 62px;
    line-height: 62px;
}

.btn-cta.cta-extralarge {
    background: transparent url("images/btn-bg-extralarge.png") no-repeat;
    width: 360px;
    height: 61px;
    line-height: 61px;
}

.cta-spacing-r {
    margin-right: 20px;
    display: inline-block;
}

.cta-spacing-l {
    margin-left: 20px;
    display: inline-block;
}



@media (min-width: 768px) {
    .align-center {
        text-align: center;
        margin: 0 auto;
        display: inline-block;
        position: relative;
        float: none;
    }

    .alignright, img.alignright {
        display: inline;
        float: right;
        margin-left: 2em;
        margin-bottom: 2em;
    }

    .alignleft, img.alignleft {
        display: inline;
        float: left;
        margin-right: 2em;
        margin-bottom: 2em;
    }

    .aligncenter, img.aligncenter {
        display: block;
        margin-left: auto;
        margin-right: auto;
        clear: both;
    }

}

body.page-template-page-timeline main {
    width: 100%;
    display: table;
}

main:before, main:after {
    content: "";
    display: block;
    position: absolute;
    z-index: 14;
    height: 100%;
    width: 39px;
    pointer-events: none;
}

main:before {
    background: transparent url("images/border-left.png") repeat-y;
    left: -10px;
    top: 0;
}

main:after {
    background: transparent url("images/border-right.png") repeat-y;
    right: -10px;
    top: 0;
}

main header {
    background: url("images/header-bg.png") no-repeat center bottom; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;
    width: 100%;
    height: auto;
    display: block;
    padding: 30px 0;
    z-index: 900;
    position: fixed;
    top: 0;
    left: 0;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
}

body.fp-viewing-2 main header,
body.fp-viewing-3 main header,
body.fp-viewing-4 main header,
body.fp-viewing-5 main header,
body.fp-viewing-6 main header,
body.fp-viewing-7 main header,
body.fp-viewing-8 main header {
    padding: 0;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
}

main header .logo { padding: 0; width: 20%; }

main header .logo img {
    display: block;
    width: 100%;
    height: auto;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
}

body.fp-viewing-2 main header .logo img,
body.fp-viewing-3 main header .logo img,
body.fp-viewing-4 main header .logo img,
body.fp-viewing-5 main header .logo img,
body.fp-viewing-6 main header .logo img,
body.fp-viewing-7 main header .logo img,
body.fp-viewing-8 main header .logo img {
    width: 50%;
    padding: 20px 0;
}

main header .social {
    width: 12%;
    padding: 0;
}

main header .social .social-ico {
    display: inline-block;
    width: 40px;
    height: 40px;
    background: transparent url("images/social-icons-header-small.png") no-repeat;
    margin-top: 20px;
    float: right;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
}

main header .social .social-ico:hover {
    -ms-transform: rotate(-15deg); /* IE 9 */
    -webkit-transform: rotate(-15deg); /* Chrome, Safari, Opera */
    transform: rotate(-15deg);
}

main header .social .social-ico a {
    display: inline-block;
    width: 100%;
    height: 100%;
}

main header .social .social-ico.social-fb {
    background-position: 13px;
}

main header .social .social-ico.social-inst {
    background-position: -23px;
}

main header .social .social-ico.social-yt {
    background-position: -66px;
}

main header .social .social-quote {
    display: inline-block;
    width: 100%;
}

main header .social .social-quote a {
    display: inline-block;
}

main header .social .social-quote img {
    width: 100%;
}

main header .navigation { padding: 0; width: 68%; }

main header .navigation nav ul {
    list-style: none;
    padding: 0;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
    text-align: center;
    font-size: 1em;
}


main header .navigation nav ul li { display: inline-block; padding: 0 12px; text-transform: uppercase; }

main header .navigation nav ul li a {
    color: #1D5532;
    text-transform: uppercase;
    font-size: 1em !important;
    text-decoration: none;
    font-family: "AppleBerry", Pangolin;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    padding: 20px 0;
    display: block;
}

main header .navigation nav ul li.current-menu-item a,
main header .navigation nav ul li.active a,
main header .navigation nav ul li a:hover {
    color: #B1519A;
}

main header .navigation nav ul li {
    position: relative;
}

main header .navigation nav ul li ul.sub-menu {
    display: none;
    height: 0;
    -webkit-box-shadow: 0 15px 10px 5px rgba(0,0,0,.2);
    box-shadow: 0 15px 10px 5px rgba(0,0,0,.2);
    background: #fff;
    position: absolute;
    margin: 0;
    padding: 20px 0;
    width: 200px;
    left: 50%;
    margin-left: -100px;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

main header .navigation nav ul li ul.sub-menu:after {
    content: "";
    background: transparent url("images/sub-menu-bottom.png") no-repeat;
    display: inline-block;
    width: 200px;
    height: 15px;
    position: absolute;
    bottom: -15px;
    left: 0;
}

main header .navigation nav ul li:hover > ul.sub-menu {
    display: block;
    height: 100%;
}

main header .navigation nav ul li ul.sub-menu li,
main header .navigation nav ul li ul.sub-menu li a {
    font-size: 1em;
    padding: 0;
}


main section[role="banner"] {
    width: 100%;
    height: 60vh;
    display: inline-block;
    top: -40px;
    z-index: 1;
    position: relative;
}

body.single-recepten main section[role="banner"] {
    max-height: 80vh;
    overflow: hidden;
}

body.single-recepten main section[role="banner"],
body.single-nieuws main section[role="banner"],
body.page main section[role="banner"].content-page {
    height: auto;
    max-height: unset;
    overflow: hidden;
    padding-top: 100px;
}

body.single-recepten main section[role="banner"] {
    max-height: 80vh;
}

    body.single-recepten main section[role="banner"] img,
    body.single-nieuws main section[role="banner"] img,
    body.page main section[role="banner"].content-page img {
        width: 100%;
        height: auto;
    }

body.home main section[role="banner"] {
    height: 90vh;
    top: 0;
    margin: 0;
    padding: 0;
}

body.home main section[role="banner"].header-home:after {
    display: none;
}

body.home main section[role="banner"].header-home .scroll-indicator {
    z-index: 900;
    position: absolute;
    bottom: 2em;
    left: 50%;
    width: 60px;
    height: 90px;
    /*
       line-height: 70px;
       vertical-align: middle;
       border-radius: 50%;
        border: 2px solid #1D5532;
        background: rgba(255,255,255,0.1);
    */
    text-align: center;

    margin-left:-30px;
    animation-name: bounce-up-down;
    animation-duration: 2s;
    animation-iteration-count: infinite;

}
/*
body.home main section[role="banner"].header-home .scroll-indicator:hover {
    background: rgba(255,255,255,0.3);
}
*/

body.home main section[role="banner"].header-home .scroll-indicator i {
    color: #1D5532;
    font-size: 2em;
    font-weight: 200;
    vertical-align: middle;
}

main section[role="banner"]:after {
    content: "";
    z-index: 100;
    background: transparent url("images/visual-border.png") center center repeat-x;
    bottom: 0;
    left: 0;
    height: 20px;
    width: 100%;
    display: block;
    position: absolute;
}

main section[role="textblock"] {
    padding: 200px 0;
}

body.page-template-page-faq main section[role="textblock"],
body.page-template-page-faq main section[role="textblock"] {
    padding: 40px 0;
}

body.single main section[role="textblock"] {
    padding: 60px 0;
}

body.single-recepten main section[role="textblock"],
body.single-producten main section[role="textblock"] {
    padding: 0;
}

body.category main section[role="textblock"],
body.single-producten main section[role="textblock"] {
    padding: 200px 0 0 0;
}

body.single-producten main section[role="textblock"].recepten-slider-container {
    padding: 100px 0;
}

body.single-producten main section[role="textblock"].recepten-slider-container .slider-elementen {
    position: relative;
}

body.single-producten main section[role="textblock"].recepten-slider-container .slider-elementen:before,
body.single-producten main section[role="textblock"].recepten-slider-container .slider-elementen:after {
    content: "";
    display: block;
    position: absolute;
}

body.single-producten main section[role="textblock"].recepten-slider-container .slider-elementen:before {
    background: url("images/slider-before.png") no-repeat;
    width: 86px;
    height: 83px;
    top: -50px;
    left: -50px;
}

body.single-producten main section[role="textblock"].recepten-slider-container .slider-elementen:after {
    background: url("images/slider-after.png") no-repeat;
    width: 95px;
    height: 64px;
    bottom: -50px;
    right: -50px;
}

body.category main section[role="textblock"],
body.page-template-page-recepten main section[role="textblock"] {
    padding: 200px 0 100px 0;
}

main section[role="textblock"].content-text {
    padding: 50px 0 200px 0;
}

body.category main section[role="textblock"].recepten-overzicht {
    padding: 50px 0 200px 0;
}

body.single main section[role="textblock"] p,
body.single main section[role="textblock"] ul, body.single main section[role="textblock"] ul li, body.single main section[role="textblock"] ul li a,
body.single main section[role="textblock"] ol, body.single main section[role="textblock"] ol li, body.single main section[role="textblock"] ol li a {
    color: #fff;
    font-size: 1em;
}

main section[role="textblock"] div.packshot-container { position: relative; width: 100%; height: auto; margin-bottom: 40px; }

main section[role="textblock"] div.packshot-container:after {
    content: "";
    background: transparent url("images/packshot-shade.png") no-repeat center bottom; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;
    display: inline-block;
    width: 100%;
    height: 50px;
    position: absolute;
    bottom: -15px;
    left: 0;
    z-index: -1;
    opacity: 0.5;
}

main section[role="textblock"] div.packshot-container img.packshot {
    max-width: 100%; position: relative;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
}

main section[role="textblock"] div.packshot-container img.packshot:hover {
    -ms-transform: rotate(5deg); /* IE 9 */
    -webkit-transform: rotate(5deg); /* Chrome, Safari, Opera */
    transform: rotate(5deg);
}

main section[role="textblock"] .waarde-container {
    font-family: 'Pangolin', cursive;
    font-size: 1em;
    color: #fff;
    border-bottom: 1px solid #fff;
    box-sizing: border-box;
}

main section[role="textblock"] .waarde-container span:nth-child(1) {
    width: 75%;
    float: left;
    text-align: left;
    padding-left: 10px;
}

main section[role="textblock"] .waarde-container span:nth-child(2) {
    width: 25%;
    float: left;
    text-align: right;
    padding-right: 10px;
}

main section[role="textblock"] h1,
main section[role="textblock"] h2,
main section[role="textblock"] h3,
main section[role="textblock"] h4,
main section[role="textblock"] h5 {
    font-family: 'AppleBerry', Pangolin, cursive;
    color: #fff;
    font-size: 1em;
    margin-bottom: 15px;
    line-height: 1.5em;
    text-transform: uppercase;
}

main section[role="textblock"] h1 { font-size: 1.8em; }
main section[role="textblock"] h2 { font-size: 1.4em; }
main section[role="textblock"] h3 { font-size: 1.2em; }

main section[role="textblock"] h4, main section[role="textblock"] h5 { font-size: 1em; }

main section[role="textblock"] h5 { font-family: 'Pangolin', cursive; }

body.category main section[role="textblock"] h2 {
    font-size: 1.8em;
}

main section[role="textblock"] p {
    font-family: 'Pangolin', cursive;
    text-transform: none;
    font-size: 1em;
    line-height: inherit;
}

main section[role="textblock"] .content-container ul { padding: 0 0 10px 20px; }

main section[role="textblock"] .content-container ul,
main section[role="textblock"] .content-container ul li,
main section[role="textblock"] .content-container ul li a,
main section[role="textblock"] .content-container ol,
main section[role="textblock"] .content-container ol li,
main section[role="textblock"] .content-container ol li a{
    color: #fff;
    font-size: 1em;
}

main section[role="textblock"] .social-share-container,
main section[role="textblock"] .verkrijgbaar-bij-container {
    background: transparent url("images/social-bg.png") no-repeat;
    display: inline-block;
    float: right;
    padding: 6px 20px;
    color: #fff;
    width: 280px;
    height: 71px;
    position: relative;
}


main section[role="textblock"] .social-share-container {
    text-align: center;
}

main section[role="textblock"] .social-share-container h4 {
    margin: 0;
    padding: 0;
    text-align: center;
    width: 100%;
}

main section[role="textblock"] .verkrijgbaar-bij-container {
    float: left;
    cursor: pointer;
}

main section[role="textblock"] .verkrijgbaar-bij-container .verkrijgbaar-bij-content {
    position: absolute;
    bottom: 70px;
    left: 0;
    color: #000 !important;
    background: #fff;
    padding: 1em;
    -webkit-box-shadow: 5px 5px 10px 2px rgba(0,0,0,0.2);
    box-shadow: 5px 5px 10px 2px rgba(0,0,0,0.2);
    display: none;
    border-radius: 10px;
}

main section[role="textblock"] .verkrijgbaar-bij-container .verkrijgbaar-bij-content:after {
    content: "";
    display: block;
    width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 20px solid #fff;
    position: absolute;
    bottom: -10px;
    left: 50%;
    margin-left: -10px;
}

main section[role="textblock"] .verkrijgbaar-bij-container .verkrijgbaar-bij-content p {
    color: #000 !important;
    font-size: 0.8em;
    margin: 0;
}

main section[role="textblock"] .verkrijgbaar-bij-container h4 { font-size: 1.4em; }

main section[role="textblock"] .social-share-container .social-ico {
    display: inline-block;
    width: 30px;
    height: 30px;
    background: transparent url("images/social-icons.png") no-repeat;
    margin: 0 13px;
    /*float: right;*/
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
    overflow: hidden;
}

main section[role="textblock"] .social-share-container .social-ico.social-fb {
    background-position: 9px;
}

main section[role="textblock"] .social-share-container .social-ico.social-inst {
    background-position: -33px;
}

main section[role="textblock"] .social-share-container .social-ico.social-yt {
    background-position: -79px;
}

main section[role="textblock"] .social-share-container .social-ico.social-wa {
    background-position: -126px;
    /* background: none; */
    display: none;
}

main section[role="textblock"] .social-share-container .social-ico.social-em {
    background-position: -170px;
}

main section[role="textblock"] .social-share-container .social-ico a {
    display: block;
    width: 100%;
    height: 100%;
}

main section[role="textblock"] .social-share-container .social-ico:hover {
    -ms-transform: rotate(-15deg); /* IE 9 */
    -webkit-transform: rotate(-15deg); /* Chrome, Safari, Opera */
    transform: rotate(-15deg);
}

main footer {
    background: url("images/footer-bg.png") no-repeat center top; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;
    width: 100%;
    height: auto;
    display: block;
    /* padding: 30px 0 40px 0; */
    padding: 30px 0 0 0;
    text-align: center;
    position: relative;
    z-index: 10;
    margin-top: -30px;
}

main footer .footer-container {
    /* min-height: 300px; */
    padding: 60px 0;
}

main footer .footer-container p {
    color: #1d5532;
}

main footer .footer-container .social {
    display: inline-block;
    width: auto;
}

main footer .footer-container .social strong { font-size: 2em;  font-family: 'AppleBerry', Pangolin, cursive; color: #1d5532; }


main footer .footer-container ul.social {
    list-style: none;
    width: 100%;
    margin: 0 0 30px 0;
    padding: 0;
}

main footer .footer-container ul.social li {
    display: inline-block;
    width: auto;
    height: 40px;
    line-height: 40px;
}

main footer .footer-container li.social-ico {
    margin: 0;
    padding: 0;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
}

main footer .footer-container li.social-ico:hover {
    -ms-transform: rotate(-15deg); /* IE 9 */
    -webkit-transform: rotate(-15deg); /* Chrome, Safari, Opera */
    transform: rotate(-15deg);
}

main footer .footer-container li.social-ico a {
    display: inline-block;
    width: 40px;
    height: 40px;
    background: transparent url("images/social-icons-header-small.png") no-repeat;
}

main footer .footer-container li.social-txt {
    padding-right: 10px;
}

main footer .footer-container li.social-ico.social-fb a {
    background-position: 13px bottom;
}

main footer .footer-container li.social-ico.social-inst a {
    background-position: -23px bottom;
}

main footer .footer-container li.social-ico.social-yt a {
    background-position: -66px bottom;
}

main footer .footer-container p span {
    margin: 0 20px;
    display: inline-block;
    color: #1d5532;
    font-family: 'Open Sans', sans-serif;
    text-transform: none;
}

main footer .footer-container a {
    color: #1d5532;
    text-decoration: none;
}

main footer .footer-container a:hover {
    color: #73B327;
}

main footer .footer-container .adresgegevens {
    margin: 20px 0;
}

main footer ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

main footer ul li {
    display: inline-block;
    margin: 0 10px;
}

main footer ul li a {
    font-size: 0.8em !important;
    font-family: 'Open Sans', sans-serif;
}

@media (max-width: 991px) {

    .row {
        margin-left: 0;
        margin-right: 0;
        width: 100%;
    }

    .product-tekst {
        margin-bottom: 40px;
        display: inline-block;
        width: 100%;
    }

    main:before, main:after	{
        display: none;
    }

    main header {
        background: url("images/header-bg.png") no-repeat center bottom; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;
        width: 100%;
        height: auto;
        display: block;
        padding: 20px 0;
    }

    main header .logo img {
        display: block;
        width: 100%;
        max-width: 150px;
        height: auto;
    }

    main section[role="textblock"] .social-share-container {
        display: inline-block;
        margin-top: 40px;
    }

    main header .social .social-ico,
    main header .social .social-quote {
        display: none;
        width: 100%;
    }

    main footer .footer-container .social {
        width: 100%;
    }

    main footer .footer-container .social-ico {
        width: 33,33%;
    }

    main footer .footer-container li.social-txt {
        width: 100% !important;
        display: inline-block;
        margin-bottom: 10px;
    }
    main section[role="textblock"] .social-share-container .social-ico {
        margin: 0 7px;
    }

    main section[role="textblock"] .social-share-container .social-ico.social-wa {
        background-position: -126px;
        display: inline-block;
    }
    main section[role="textblock"] .social-share-container {
        float: none;
    }

    main footer .footer-container p span {
        margin: 0;
        display: inline-block;
        color: #1d5532;
        width: 100%;
        text-align: center;
    }

}

/* Content pagina */

.content-tekst a {
    color: #fff;
    text-decoration: underline;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -ms-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}

.content-tekst a:hover {
    color: #b1519a;
}

.content-tekst ol,
.content-tekst ul { margin-bottom: 30px; }

.content-tekst ol li,
.content-tekst ol li a,
.content-tekst ul li,
.content-tekst ul li a {
    color: #fff;
    text-decoration: none;
}


/* Nieuws overzicht styling */

.nieuws-container article {
    width: 100%;
    display: inline-block;
    margin: 60px 0;
}

.nieuws-container article .item-image {
    display: inline-block;
    float: left;
    width: 100%;
    max-width: 450px;
    height: auto;
    max-height: 420px;
    overflow: hidden;
    border: 5px solid #fff;
    -webkit-box-shadow: 5px 5px 10px 2px rgba(0,0,0,0.2);
    box-shadow: 5px 5px 10px 2px rgba(0,0,0,0.2);
    padding: 0;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
}


.nieuws-container article:nth-child(odd) .item-image {
    -ms-transform: rotate(-3deg); /* IE 9 */
    -webkit-transform: rotate(-3deg); /* Chrome, Safari, Opera */
    transform: rotate(-3deg);
}

.nieuws-container article:nth-child(odd) .item-image:hover {
    -ms-transform: rotate(-1deg); /* IE 9 */
    -webkit-transform: rotate(-1deg); /* Chrome, Safari, Opera */
    transform: rotate(-1deg);
    transform: scale(1.05);
}

.nieuws-container article:nth-child(even) .item-image {
    -ms-transform: rotate(3deg); /* IE 9 */
    -webkit-transform: rotate(3deg); /* Chrome, Safari, Opera */
    transform: rotate(3deg);
    float: right;
}

@media (max-width: 991px) {
    .nieuws-container article:nth-child(even) .item-image {
        float: left;
    }
}

.nieuws-container article:nth-child(even) .item-image:hover {
    -ms-transform: rotate(1deg); /* IE 9 */
    -webkit-transform: rotate(1deg); /* Chrome, Safari, Opera */
    transform: rotate(1deg);
    transform: scale(1.05);
}

.nieuws-container article .item-image img {
    /*    width: auto;
        height: 100%; */

    width: 100%;
    height: auto;

    display: block;
    margin: 0 auto;
    text-align: center;

}

.nieuws-container article .item-content {
    float: right;
    padding: 0;
    display: inline-block;
}

.nieuws-container article:nth-child(even) .item-content {
    float: left;
    padding: 0;
}

/* Nieuws DETAIL styling */

.nieuws-item-container { max-width: 790px; margin: 0 auto; }

.nieuws-item-container article:nth-child(odd) .item-image,
.nieuws-item-container article:nth-child(even) .item-image {
    -ms-transform: rotate(3deg); /* IE 9 */
    -webkit-transform: rotate(3deg); /* Chrome, Safari, Opera */
    transform: rotate(3deg);
    float: left;
}

.nieuws-item-container article {
    margin: 0 0 40px 0;
}

.nieuws-item-container article .item-image {
    width: 30%;
    max-width: 245px;
    height: 220px;
}

.nieuws-item-container article .item-content,
.nieuws-item-container article .item-content:nth-child(odd),
.nieuws-item-container article .item-content:nth-child(even) {
    float: right;
    padding: 0;
    display: inline-block;
    width: 60%;
}

@media (max-width: 767px) {
    .nieuws-item-container article .item-image,
    .nieuws-item-container article .item-content,
    .nieuws-item-container article .item-content:nth-child(odd),
    .nieuws-item-container article .item-content:nth-child(even) {
        float: none;
        padding: 0;
        display: inline-block;
        width: 100%;
    }

    .nieuws-item-container article .item-image,
    .nieuws-item-container article .item-image img {
        width: 100%;
        height: auto;
        float: none;
    }

    .nieuws-item-container .cta-extralarge {
        background-size: 100%;
        width: 260px;
        font-size: 1em;
        line-height: 41px;
    }

}

@media (max-width: 991px) {
    .nieuws-item-container article .item-image,
    .nieuws-item-container article .item-image img {
        width: 100%;
        height: auto;
    }

    .nieuws-item-container .cta-extralarge {
        display: block;
        margin: 0 auto;
        text-align: center;
        float: none;
    }

}


/* Contact pagina styling */

.contact-container {
    max-width: 790px;
    margin: 0 auto;
}

.contact-container .contact-form .contactrow {
    margin: 0 0 10px 0;
    color: #fff;
    font-size: 1em;
}

.contact-container .contact-form span.label {
    color: #fff;
    display: inline-block;
    font-size: 1em;
    width: 220px;
    height: 60px;
    line-height: 60px;
    vertical-align: middle;
    text-transform: uppercase;
    text-align: left;
    box-sizing: border-box;
}

.contact-container .contact-form span.label.text-area {
    vertical-align: top;
}

.contact-container .contact-form label {
    display: inline-block;
    margin: 0 20px;
}

.contact-container input[type="checkbox"],
.contact-container input[type="radio"] {
    display: none;
}

.contact-container input[type="checkbox"] + span,
.contact-container input[type="radio"] + label {
    color: #fff;
    font-family: "Pangolin";
    font-size: 1em;
    cursor: pointer;
}

.contact-container input[type="checkbox"] + span,
.contact-container input[type="radio"] + label span {
    display:inline-block;
    width: 36px;
    height: 36px;
    margin: -1px 4px 0 0;
    vertical-align: middle;
    cursor: pointer;
}

.contact-container input[type="checkbox"] + span,
.contact-container input[type="radio"] + label span {
    background: transparent url("images/input-radio-bg.png") no-repeat;
    position: relative;
}

.contact-container input[type="checkbox"]:checked + span:after,
.contact-container input[type="radio"]:checked + label span:after {
    background: transparent url("images/input-radio-checked.png") no-repeat;
    content: "";
    display: block;
    position: absolute;
    top: 7px;
    left: 8px;
    width: 20px;
    height: 22px;
}

.contact-container input[type="checkbox"] + span,
.contact-container input[type="checkbox"]:checked + span,
.contact-container input[type="radio"] + label span,
.contact-container input[type="radio"]:checked + label span {
    -webkit-transition:background-color 0.4s linear;
    -o-transition:background-color 0.4s linear;
    -moz-transition:background-color 0.4s linear;
    transition:background-color 0.4s linear;
}

.contact-container input[type="checkbox"] + span > label {
    width: 280px;
    max-width: inherit;
    display: inline-block;
    padding: .8rem;
    text-align: left;
    margin-left: 40px;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.contact-container input[type="checkbox"] + span > i {
    display: inline-block;
}

.contact-container input[type="tel"],
.contact-container input[type="email"],
.contact-container input[type="text"] {
    background: transparent url("images/input-txt-bg.png") no-repeat;
    border: 0;
    width: 100%;
    max-width: 539px;
    height: 69px;
    display: inline-block;
    padding: 0 20px 10px 20px;
    font-size: 1em;
    box-sizing: border-box;
    color: #1D5532;
}

.contact-container textarea {
    background: transparent url("images/input-txtarea-bg.png") no-repeat;
    border: 0;
    width: 100%;
    max-width: 539px;
    height: 294px;
    display: inline-block;
    padding: 20px 20px 0 20px;
    font-size: 1em;
    vertical-align: top;
    resize: none;
    box-sizing: border-box;
    color: #1D5532;
}

.contact-container input[type="submit"] {
    background: transparent url("images/input-submit-bg.png") no-repeat;
    border: 0;
    width: 235px;
    height: 62px;
    display: inline-block;
    padding: 10px 20px;
    color: #fff;
    font-family: 'AppleBerry';
    text-transform: uppercase;
    font-size: 1.4em;
    float: right;
    box-sizing: border-box;
    -webkit-transition: all .1s ease-in-out;
    -moz-transition: all .1s ease-in-out;
    -ms-transition: all .1s ease-in-out;
    -o-transition: all .1s ease-in-out;
    transition: all .1s ease-in-out;
}

.contact-container input[type="submit"]:hover {
    -ms-transform: rotate(-2deg); /* IE 9 */
    -webkit-transform: rotate(-2deg); /* Chrome, Safari, Opera */
    transform: rotate(-2deg);
}


/* Over HEKSN styling */

#fullpage section {
    padding: 0;
    margin: 0;
}

#fullpage section header[role="visual"] {
    position: absolute;
    top: 0;
}

#fullpage section footer[role="copyrights"] {
    position: absolute;
    bottom: 0;
}


#fullpage section.over-section {
    background: transparent url("images/overons-fade.png") no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;
    padding: 0;
    margin: 0;
}

#fullpage section.over-section:before, #fullpage section.over-section:after {
    content: "";
    display: block;
    position: absolute;
    position: absolute;
    z-index: 9;
    height: 100%;
    width: 39px;
    pointer-events: none;
}

#fullpage section.over-section:before {
    background: transparent url("images/border-left.png") repeat-y;
    left: -10px;
    top: 0;
}

#fullpage section.over-section:after {
    background: transparent url("images/border-right.png") repeat-y;
    right: -10px;
    top: 0;
}


#fullpage #heritage-line {
    background: rgba(0, 0, 0, 0) url("images/timeline.png") no-repeat scroll center top / auto 100%;
    height: 60%;
    left: 50%;
    margin-left: -136px;
    position: absolute;
    top: 15%;
    width: 273px;
    z-index: 1;
    pointer-events: none;
}

#fullpage .heritage-navigation {
    position: absolute;
    left:0;
    right: 0;
    bottom: 2em;
    width: 100%;
    padding: 0;
    text-align: center;
    animation-name: bounce-up-down;
    animation-duration: 2s;
    animation-iteration-count: infinite;
}

/* Hide last arrow */
#fullpage section.heritage-block:nth-child(6) .heritage-navigation {
    display: none !important;
}

@media (max-width: 991px) {
    #fullpage .heritage-navigation {
        position: relative;
        left:0;
        right: 0;
        bottom: 2em;
        width: 100%;
        padding: 60px 0;
        text-align: center;
        animation-name: bounce-up-down;
        animation-duration: 2s;
        animation-iteration-count: infinite;
    }
}

#fullpage section .image-container-inner,
#fullpage section .text-container {
    width: 50%;
    display: inline-block;
    height: auto;
}

#fullpage section .image-container-inner {
    position: absolute;
    top: 0;
    margin-top: -20%;
}

#fullpage section .text-container h2.title {
    font-size: 1.6em;
}

#fullpage section .text-container h2.title,
#fullpage section .text-container p {
    width: 100%;
    display: inline-block;
}

#fullpage section:nth-child(odd) .image-container-inner,
#fullpage section:nth-child(even) .text-container { float: right; }

#fullpage section:nth-child(even) .image-container-inner,
#fullpage section:nth-child(odd) .text-container { float: left; }


#fullpage section:nth-child(even) .image-container-inner,
#fullpage section:nth-child(odd) .image-container-inner {
    width: auto;
    height: auto;
    max-width: 100%;
    overflow: hidden;
    padding: 0;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
}

#fullpage section:nth-child(even) .image-container-inner {
    -ms-transform: rotate(3deg); /* IE 9 */
    -webkit-transform: rotate(3deg); /* Chrome, Safari, Opera */
    transform: rotate(3deg);
}

#fullpage section:nth-child(odd) .image-container-inner {
    -ms-transform: rotate(-3deg); /* IE 9 */
    -webkit-transform: rotate(-3deg); /* Chrome, Safari, Opera */
    transform: rotate(-3deg);
}

#fullpage section:nth-child(even) .image-container-inner img,
#fullpage section:nth-child(odd) .image-container-inner img {
    width: auto;
    max-width: 80%;
    height: auto;
    display: inline-block;
    text-align: center;

}

#fullpage section:nth-child(odd) .image-container-inner img {
    float: right;
}

#fullpage section .image-container {
    position: relative;
    display: inline-block;
    width: 50%;
}

/*#fullpage section .image-container:before {
    content: "";
    background: transparent url("images/image-bling.png") no-repeat;
    position: absolute;
    display: inline-block;
    width: 76px;
    height: 90px;
}

#fullpage section:nth-child(even) .image-container:before {
    bottom: -60px;
    left: -60px;
}

#fullpage section:nth-child(odd) .image-container:before {
    bottom: -80px;
    right: 340px;
}


#fullpage section .image-container .foto-element {
    display: block;
    position: absolute;
    top: -40%;
    left: 0;
    max-width: 100%;
    height: auto;
    animation-name: bounce;
    animation-duration: 4s;
    animation-iteration-count: infinite;
}
*/
#fullpage .timeline-start h2, #fullpage .timeline-eind h2 {
    position: relative;
    font-size: 2em;
    display: inline-block;
    z-index: 10;
}

#fullpage .timeline-start h2 a, #fullpage .timeline-eind h2 a {
    text-decoration: none;
    color: #fff;
    position: relative;
    z-index: 20;
}

#fullpage .timeline-start h2 a:before,
#fullpage .timeline-start h2 a:after,
#fullpage .timeline-eind h2 a:before,
#fullpage .timeline-eind h2 a:after {
    content: "";
    display: inline-block;
    position: absolute;
    z-index: 9;
}

#fullpage .timeline-start,
#fullpage .timeline-eind {
    display: inline-block;
    margin: 20px 0;
    animation-name: bounce;
    animation-duration: 2s;
    animation-iteration-count: infinite;
}

#fullpage .timeline-start h2 a:before,
#fullpage .timeline-eind h2 a:before {
    left: -50px;
    top: -45px;
    background: transparent url("images/timeline-head-shapes.png") no-repeat;
    width: 510px;
    height: 115px;
    pointer-events: none;
    animation-name: bounce-large;
    animation-duration: 2.5s;
    animation-iteration-count: infinite;
}

#fullpage .timeline-start h2 a:after {
    content: "";
    display: block;
    background: transparent url("images/timeline-arrow-down.png") no-repeat;
    width: 62px;
    height: 88px;
    left: 55%;
    top: 80px;
}

#fullpage .timeline-eind h2 a:after {
    content: "";
    display: block;
    background: transparent url("images/timeline-arrow-up.png") no-repeat;
    width: 71px;
    height: 86px;
    left: 50%;
    top: -120px;
}

/** CENTER CONTENT **/

/*#fullpage section .elements-container {
    display: inline-block;
    white-space: nowrap;
}

#fullpage section .image-container,
#fullpage section .text-container {
    display: inline-block;
    white-space: normal;
    vertical-align: middle;
}
*/

/* LAZY LOAD ANIMATIONS */

#fullpage section.active .image-container {
    animation-name: lazy-left-image;
    animation-duration: .8s;
    /*animation-iteration-count: once;*/
    animation-iteration-count: 1;
}

#fullpage section:nth-child(odd).active .image-container {
    animation-name: lazy-right-image;
    animation-duration: .8s;
    /*animation-iteration-count: once;*/
    animation-iteration-count: 1;
}

#fullpage section.active .image-container:before,
#fullpage section.active .image-container:after {
    animation-name: bounce-fade;
    animation-duration: 2s;
    animation-iteration-count: infinite;
}

#fullpage section.active .text-container h2.title {
    animation-name: lazy-right-txt;
    animation-duration: 1s;
    animation-iteration-count: 1;
}

#fullpage section.active .text-container p {
    animation-name: lazy-right-txt;
    animation-duration: 1.5s;
    animation-iteration-count: 1;
}


@media (max-width: 991px) {
    #fullpage section.over-section:before, #fullpage section.over-section:after {
        display: none;
    }
}


/* PRODUCT GRID */
body.product-page,
body.product-page:after {
    background: transparent;
    animation: none;
}

main.products-grid header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    display: inline-block;
}

main.products-grid footer {
    position: relative;
    bottom: 0;
    left: 0;
    width: 100%;
    display: inline-block;
    margin-top: -60px;
}

@media (max-width: 991px) {

    main.products-grid footer {
        position: relative;
        bottom: 0;
        left: 0;
        width: 100%;
        display: inline-block;
        z-index:90;
    }
}


main.products-grid footer .footer-container {
    padding: 20px 0;
}

section.product-grid {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0 !important;

}

section.product-grid article.product {
    display: inline-block;
    position: relative;
    height: 80vh;
    line-height: 80vh;
    text-align: center;
    vertical-align: middle;
    background: transparent url("images/overons-fade.png") no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;
    overflow: hidden;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
}

section.product-grid.product-cat-grid article.product {
    height: 500px;
    line-height: 500px;
    background: transparent url("images/product-fade-small.png") no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;
}

section.product-grid article.product-crosssell {
    height: 500px;
    line-height: 500px;
    margin: 0;
    padding: 0;
}

section.product-grid.grid-crosssell {
    /*height: 500px;*/
    padding: 0 !important;
}

section.product-grid.grid-crosssell ul {
    padding: 0;
    margin: 0 auto;
    list-style: none;
    text-align: center;
}

section.product-grid.grid-crosssell ul li .product-title {
    top: -170px !important;
    height: 100% !important;
}

section.product-grid.grid-crosssell .lSAction > .lSPrev { left: 40px; }
section.product-grid.grid-crosssell .lSAction > .lSNext { right: 40px; }

section.recepten-slider-container .lSAction > .lSPrev { left: 0; opacity: .9; }
section.recepten-slider-container .lSAction > .lSNext { right: 0;opacity: .9; }

section.recepten-slider-container .container { padding: 0; }

section.recepten-slider-container h1 {
    position: relative;
    width: auto;
    display: inline-block;
}

section.recepten-slider-container h1:after {
    display: inline-block;
    content: "";
    position: absolute;
    background: url("images/magic-wand-small.png") no-repeat;
    width: 117px;
    height: 61px;
    right: -127px;
    top: -10px;
}

section.product-grid.grid-crosssell ul li .product-image {
    max-width: 280px;
}

main.five-grid section.product-grid { padding-top: 140px !important; height: 100%; display: inline-block; }
main.five-grid section.product-grid article.product { height: 400px; line-height: 480px; }
main.five-grid footer { position: relative !important; margin-top: -20px; }


section.product-grid article.product:hover {
    background-size: 250%;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
}



@media (max-width: 767px) {

    section.product-grid article.product {
        width: 100%;
        height: 50vh;
        line-height: 50vh;
    }
}


section.product-grid article.product .product-image {
    width: 60%;
    min-width: 220px;
    max-width: 400px;
    height: auto;
    top: 0;
    position: relative;
    z-index: 10;
    margin: 0 auto;
}

main.five-grid section.product-grid article.product .product-image {
    max-width: 260px;
}

section.product-grid article.product .product-image img {
    width: 100%;
    height: auto;
    position: relative;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
    z-index: 10;
}

section.product-grid article.product:nth-child(odd):hover .product-image img {
    -ms-transform: rotate(-7deg); /* IE 9 */
    -webkit-transform: rotate(-7deg); /* Chrome, Safari, Opera */
    transform: rotate(-7deg);
}

section.product-grid article.product:nth-child(even):hover .product-image img {
    -ms-transform: rotate(7deg); /* IE 9 */
    -webkit-transform: rotate(7deg); /* Chrome, Safari, Opera */
    transform: rotate(7deg);
}

section.product-grid article.product .product-image .product-shadow {
    width: 100%;
    height: auto;
    position: absolute;
    z-index: 1;
    top: 80%;
    left: 0;
    opacity: 0.3;
}

main.five-grid section.product-grid article.product .product-image .product-shadow {
    bottom: 100px;
}

body.page-template-page-producten section.product-grid article.product .product-image .product-shadow {
    top: 65%;
}

section.product-grid article.product .product-image .product-shadow img {
    display: block;
    width: 100%;
    height: auto;
}

/** HIDE PACKSHOT SCHADUW
.product-shadow {
    display: none !important;
}**/

section.product-grid article.product:hover .product-image .product-shadow img {
    -ms-transform: rotate(0deg); /* IE 9 */
    -webkit-transform: rotate(0deg); /* Chrome, Safari, Opera */
    transform: rotate(0deg);
}

section.product-grid article.product .product-title {
    position: absolute;
    width: 100%;
    top: -22%;
    left: 0;
    color: #fff;
    font-size: 2em;
    font-family: "AppleBerry", Pangolin, Arial;
    text-transform: uppercase;
    display: inline-block;
    z-index: 20;
}

main.five-grid section.product-grid article.product .product-title { top: -160px; }

section.product-grid article.product .product-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: inline-block;
    z-index: 1;
    pointer-events: none;
}

section.product-grid article.product .product-overlay img {
    pointer-events: none;
    display: inline-block;
    width: 100%;
    height: auto;
    transform: scale(15);
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
}

section.product-grid article.product:hover .product-overlay img {
    transform: scale(1);
}

/*
section.product-grid.grid-2 article.product { width: 50%; }
section.product-grid.grid-3 article.product { width: 33.33%; }
section.product-grid.grid-4 article.product { width: 25%; }

section.product-grid.grid-5 article.product { width: 33.33%; }
section.product-grid.grid-5 article.product:nth-child(4), section.product-grid.grid-5 article.product:nth-child(5) { width: 50%; }

section.product-grid.grid-6 article.product { width: 33.33%; }

section.product-grid.grid-1 article.product { width: 100%; }
*/

section.product-grid,
section.product-grid .row,
section.product-grid .lSSlideOuter {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    width: 100%;
}

section.product-grid article.product {
    display: flex;
    flex: 1 25%;
    justify-content: center;
    align-items: center;
    float: none !important;
}

section.product-grid.grid-2 article.product {
    flex: 1 50%;
}

section.product-grid.grid-3 article.product {
    flex: 1 33.33333%;
}

section.product-grid.grid-4 article.product {
    flex: 1 25%;
}

section.product-grid.grid-crosssell.full-width .lSSlideOuter,
section.product-grid.grid-crosssell.full-width .lSSlideOuter .lSSlideWrapper,
section.product-grid.grid-crosssell.full-width .lSSlideOuter .lSSlideWrapper ul.producten
{
    width: 100% !important;
}

@media (max-width: 1024px) {

    section.product-grid article.product,
    section.product-grid.grid-2 article.product,
    section.product-grid.grid-3 article.product,
    section.product-grid.grid-4 article.product,
    section.product-grid.grid-5 article.product,
    section.product-grid.grid-6 article.product {
        display: flex;
        flex: 1 50%;
    }
}

@media (max-width: 767px) {
    /*section.product-grid.grid-2 article.product,
    section.product-grid.grid-3 article.product,
    section.product-grid.grid-4 article.product,
    section.product-grid.grid-5 article.product,
    section.product-grid.grid-6 article.product { width: 100%; }

    section.product-grid.grid-5 article.product:nth-child(4),
    section.product-grid.grid-5 article.product:nth-child(5) { width: 100%; }*/

    section.product-grid article.product,
    section.product-grid.grid-2 article.product,
    section.product-grid.grid-3 article.product,
    section.product-grid.grid-4 article.product,
    section.product-grid.grid-5 article.product,
    section.product-grid.grid-6 article.product {
        display: flex;
        flex: 1 100%;
    }

}

main section[role="textblock"] ul.recepten li.recept {
    display: inline-block;
    width: 25%;
    height: auto;
    margin: 20px 0;
}

main section[role="textblock"] ul.recepten li.recept a {
    color: #fff;
    text-decoration: none;
}

main section[role="textblock"] ul.recepten li.recept img {
    width: 100%;
    height: auto;
    display: block;
    border: 4px solid #fff;
    -webkit-box-shadow: 5px 5px 10px 2px rgba(0,0,0,0.2);
    box-shadow: 5px 5px 10px 2px rgba(0,0,0,0.2);
}

main section[role="textblock"] ul.recepten li.recept:nth-child(even) img {
    -ms-transform: rotate(-2deg); /* IE 9 */
    -webkit-transform: rotate(-2deg); /* Chrome, Safari, Opera */
    transform: rotate(-2deg);
}

main section[role="textblock"] ul.recepten li.recept:nth-child(odd) img {
    -ms-transform: rotate(2deg); /* IE 9 */
    -webkit-transform: rotate(2deg); /* Chrome, Safari, Opera */
    transform: rotate(2deg);
}


/* RECEPTEN */

section.recept-filter {
    background: url("images/filter-bg.png") no-repeat center bottom; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;
    padding: 30px 0 50px 0;
    z-index: 12;
    text-align: center;
    color: #fff;
    position: relative;
    margin-bottom: -25px;
    -webkit-box-shadow: 0 -8px 10px 0 rgba(0,0,0,.2);
    box-shadow: 0 -8px 10px 0 rgba(0,0,0,.2);
}

section.recept-filter.sticky {
    position: fixed;
    top: 50px;
    width: 100%;
    z-index: 8;
}

section.recept-filter div.filter {
    display: block;
    position: relative;
    width: 100%;
    padding: 0;
    clear: both;
}

section.recept-filter .navigation { width: 100%; position: absolute; padding: 20px 0; bottom: 0; left: 0; }

section[role="textblock"].recepten-grid {
    position: relative;
    padding: 0 !important;
}

section[role="textblock"].recepten-grid.filter-is-sticky {
    margin-top: 90px;
}

div.recepten-filter-category {
    position: absolute;
    right: 5%;
    top: 0;
    background: transparent url("images/arr-down.png") no-repeat right;
}


div.recepten-filter-category select {
    background: transparent;
    border: 1px solid transparent;
    box-shadow: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

div.recepten-filter-category select,
div.recepten-filter-category select option {
    font-family: 'AppleBerry', Pangolin, cursive;
    color: #fff;
    font-size: 1.2em !important;
    line-height: 1.8em;
    text-transform: uppercase;
    text-align: right;
    padding-right: 35px;
}

div.recepten-filter-category select option {
    background: transparent;
    color: #1D5532;
    padding: 0 10px;
    display: block;
}


section[role="textblock"].recepten-grid article {
    height: 420px;
    line-height: 420px;
    vertical-align: middle;
    position: relative;
    padding: 0;
    overflow: hidden;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
}

section[role="textblock"].recepten-grid:hover article  {
    -webkit-filter: brightness(65%);
    filter: brightness(65%);
}

section[role="textblock"].recepten-grid article:hover  {
    -webkit-filter: brightness(100%);
    filter: brightness(100%);
}

section[role="textblock"].recepten-grid article a { text-decoration: none; width: 100%; height: 100%; display: inline-block; }

section[role="textblock"].recepten-grid article a .recept-image {
    width: 100%;
    height: 100%;
    display: inline-block;
    z-index: 1;
    transform: scale(1);
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -ms-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
}


section[role="textblock"].recepten-grid article a:hover .recept-image {
    transform: scale(1.2);
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -ms-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
}


section[role="textblock"].recepten-grid article a h2 {
    transform: scale(1) !important;
    line-height: 420px;
    vertical-align: middle;
    display: block;
    margin: 0;
    padding: 0;
    font-size: 1.6em;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    text-align: center;
    z-index: 5;
    text-shadow: 0 0 10px rgba(0,0,0,0.9);
}

section[role="textblock"].recepten-grid article .recept-youtube-icon {
    width: 54px;
    height: 49px;
    display: inline-block;
    background: url("images/youtube-icon.png") no-repeat;
    margin-bottom: -15px;
    margin-right: 10px;
}

section.recept-detail .recepten-met-container ul { padding: 0; margin: 0; }

section.recept-detail .recepten-met-container ul li {
    display: inline-block;
    width: 300px;
    height: 300px;
}

section.recept-detail .recepten-met-container ul li img { width: 100%; height: auto; }


section[role="textblock"].recepten-grid article .slugs {
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 7;
    line-height: normal;
    padding: 0 15px;
}

section[role="textblock"].recepten-grid article .slugs .slug {
    display: inline-block;
    color: #fff;
    margin: 20px 10px;
    text-indent: -9999px;
}

section[role="textblock"].recepten-grid article .slugs .slug.algemeen {  }
section[role="textblock"].recepten-grid article .slugs .slug.borrel { width: 43px; height: 35px; background: url("images/recepten/borrel.png") no-repeat; }
section[role="textblock"].recepten-grid article .slugs .slug.koken { width: 41px; height: 31px; background: url("images/recepten/koken.png") no-repeat; }
section[role="textblock"].recepten-grid article .slugs .slug.lunch { width: 40px; height: 33px; background: url("images/recepten/lunch.png") no-repeat; }

/** RECEPTEN FILTER **/

ul.recepten-main-filter, ul.recepten-main-filter li {
    margin: 0;
    padding: 0;
}

ul.recepten-main-filter {
    list-style-type: none;
    width: 100%;
    text-align: center;
}

ul.recepten-main-filter li {
    display: inline-block;
    margin: 0 25px;
    cursor: pointer;
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    font-family: 'AppleBerry', Pangolin, cursive;
    color: #fff;
    font-size: 1.8em;
    line-height: 1.5em;
    text-transform: uppercase;
    position: relative;
}

ul.recepten-main-filter li:after {
    content: "";
    background: transparent url("images/arr-down.png") no-repeat 80% 50%;
    display: inline-block;
    width: 32px;
    height: 32px;
    position: absolute;
    left: -35px;
}
ul.recepten-main-filter li.disabled:after {
    display: none;
}


ul.recepten-main-filter li.algemeen:before {  }
ul.recepten-main-filter li.borrel:before { width: 43px; height: 35px; background: url("images/recepten/borrel.png") no-repeat; display: inline-block; content: ""; margin-bottom: -10px; margin-right: 10px; }
ul.recepten-main-filter li.koken:before { width: 41px; height: 31px; background: url("images/recepten/koken.png") no-repeat; display: inline-block; content: ""; margin-bottom: -5px; margin-right: 10px; }
ul.recepten-main-filter li.lunch:before { width: 40px; height: 33px; background: url("images/recepten/lunch.png") no-repeat; display: inline-block; content: ""; margin-bottom: -5px; margin-right: 10px; }

ul.recepten-main-filter li.disabled { opacity: .5; }

@media (max-width: 991px) {

    ul.recepten-main-filter li {
        font-size: 1.4em;
        margin: 0 25px;
    }

    div.recepten-filter-category {
        background: #fff url("images/arr-down-green.png") no-repeat 80% 50%;
        color: #76B828;
        width: 100%;
        padding: 0;
        top: 60px;
        left: 0;
        right: 0;
        text-align: center;
        z-index: 999;
        position: absolute;
    }

    div.recepten-filter-category select,
    div.recepten-filter-category select option {
        color: #76B828 !important;
        padding: 0;
        text-align: center;
        text-align-last: center;
    }

    section.recepten-grid[role="textblock"] article .slugs {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 30%;
        z-index: 7;
        line-height: normal;
        padding: 0 15px;
    }


}


@media (max-width: 768px) {

    ul.recepten-main-filter li {
        /*font-size: 1.4em;
        margin: 0 10px;
        width: 42%;*/

        font-size: 1em;
        margin: 0 16px;
        width: auto;

    }

    ul.recepten-main-filter li:after {
        left: -29px;
    }

    div.recepten-filter-category {
        background: #fff url("images/arr-down-green.png") no-repeat 80% 50%;
        color: #76B828;
        width: 100%;
        padding: 0;
        top: 28px;
        left: 0;
        right: 0;
        text-align: center;
        z-index: 999;
        position: relative;
    }


}


/** HOME HEADER **/

body.home main section[role="banner"] {
    overflow: hidden;
}

body.home main section[role="banner"] div.header-element-title {
    width: 100%;
    height: auto;
    text-align: center;
    position: absolute;
    z-index: 110;
    pointer-events: none;
    display: block;
    padding-top: 200px;
}

body.home main section[role="banner"] div.header-element-title img {
    animation-name: bounce-fade;
    animation-duration: 3s;
    animation-iteration-count: infinite;
}

body.home main section[role="banner"] div.packshots {
    width: 100%;
    height: 90vh;
    max-width: 1140px;
    margin: 0 auto;
    vertical-align: middle;
    text-align: center;
    position: relative;
    display: block;
    z-index: 100;
}

body.home main section[role="banner"] div.packshots img {
    bottom: 0;
    position: absolute;
    display: inline-block;
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -ms-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    max-width: 50%;
}

@media (max-width: 1400px) {

    body.home main section[role="banner"] div.packshots {
        width: 70%;
    }

    body.home main section[role="banner"] div.header-element-title {
        padding-top: 130px;
    }
}

body.home main section[role="banner"] div.packshots img.packshot-left {
    left: 0;
}

body.home main section[role="banner"] div.packshots img.packshot-left:hover {
    -ms-transform: rotate(-5deg); /* IE 9 */
    -webkit-transform: rotate(-5deg); /* Chrome, Safari, Opera */
    transform: rotate(-5deg);
}

body.home main section[role="banner"] div.packshots img.packshot-right {
    right: 0;
}

body.home main section[role="banner"] div.packshots img.packshot-right:hover {
    -ms-transform: rotate(5deg); /* IE 9 */
    -webkit-transform: rotate(5deg); /* Chrome, Safari, Opera */
    transform: rotate(5deg);
}

body.home main section[role="banner"] div.bg-elements {
    width: 100%;
    height: 85vh;
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 10;
    pointer-events: none;
    animation-name: zoom-in;
    animation-duration: 2s;
    /*animation-iteration-count: once;*/
    animation-iteration-count: 1;
}

body.home main section[role="textblock"].canvas-grid {
    padding: 30px 0;
}


/** CANVAS STYLING **/

.canvas-container {
    position: relative;
    display: block;
}

section#background-blocks,
section#blocks {
    float: left;
    width: 100%;
    clear: both;
    position: relative;
    margin-top: -6px;
    z-index: 8;
}

section#background-blocks {
    z-index: -1;
    position: absolute;
    left: 0;
    top: 0;
    background: url("images/bg-green.png");
}

section#blocks div.block {
    width: 25%;
    min-height: 40vh;
    max-height: 40vh;
    line-height: 40vh;
    vertical-align: middle;
    float: left;
    position: relative;
    box-sizing: border-box;
    color: #fff;
    text-align: center;
    overflow: hidden;
    display: block;
}

section#background-blocks div {
    width: 25%;
    min-height: 40vh;
    max-height: 40vh;
    float: left;
    position: relative;
    padding: 0;
    box-sizing: border-box;
    color: #fff;
    text-align: center;
    overflow: hidden;
    margin-top: 0;
}

section#background-blocks div:first-child,
section#blocks div:first-child,
section#background-blocks div:nth-child(6),
section#blocks div:nth-child(6) {
     width: 50%;
}

section#blocks div a {
    color: #fff;
    text-decoration: none;
    width: 100%;
    height: 100%;
    display: block;
}

section#blocks div img {
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 40vh;
    text-align: center;
    margin: 0 auto;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -ms-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
    padding: 30px 40px;
}

section#blocks div:hover img {
    transform: scale(1.05);
}

canvas {
    position: absolute;
    z-index: -1;
    top:-19px;
    left:-20px;

}


/** FAQ **/
article.faq-item div.faq-title h2 {
    width: 100%;
    display: inline-block;
    cursor: pointer;
    text-transform: uppercase;
    text-decoration: underline;
}

article.faq-item div.faq-title.faq-active h2 {
    text-decoration: none;    ;
}

article.faq-item div.faq-content {
    display: none;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -ms-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}

.intro-text {
    width: 65%;
    margin: 0 auto;
    float: none;
}

@media (max-width: 991px) {
    .intro-text {
        width: 100%;
        margin: 0 auto;
        float: none;
    }
}

.faq-container ul {
    padding: 0;
}

.slider-container {
    margin-bottom: 80px;
}

.top {
    display: none;
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 99999;
    color: #1D5532;
    background: rgba(255,255,255,0.5);
    padding: 20px;
    border:1px solid #1D5532;
}

.no-recept {
    display: none;
    padding: 60px 0;
}

/* RESPONSIVE STYLING */

.mobile-toggle,
.mobile-toggle.active .mobile-bars,
.mobile-close {
    display: none;
}

.mobile-toggle.active .mobile-close {
    display: block;
    position: relative;
    z-index: 1000;
}

@media (min-width: 991px) {

    main header.sticky {
        padding: 0;
        -webkit-transition: all 0.3s ease-in-out;
        -moz-transition: all 0.3s ease-in-out;
        -ms-transition: all 0.3s ease-in-out;
        -o-transition: all 0.3s ease-in-out;
    }

    main header.sticky .logo img {
        width: 50%;
        padding: 20px 0;
    }

    main header.sticky .navigation nav ul {
        margin: 20px 0 30px 0;
    }

    main header.sticky .navigation nav ul li a {
        padding: 0;
    }

    main header .navigation nav ul li {
        padding: 0 11px;
        font-size: 1.2em;
    }

}

@media (max-width: 991px) {

    main header .navigation nav {
        display: none;
    }

    main header {
        background: #fff;
        height: auto;
        display: block;
    }

    main header .logo {
        width: auto;
        display: inline-block;
        z-index: 999;
    }

    main header .navigation {
        width: 100%;
        height: 50px;
        background: transparent;
        position: absolute;
        top: 50%;
        right: 0;
        margin-top: -25px;
        z-index: 901;
    }

    main header .mobile-toggle {
        position: absolute;
        top: 50%;
        right: 20px;
        width: 30px;
        height: 25px;
        margin-top: -12px;
        text-align: center;
    }

    main header .mobile-toggle:hover {
        cursor: pointer;
    }

    main header .navigation nav {
        width: 100%;
        height: 100vh;
        position: relative;
        float: none;
        background: #fff;
        padding: 0;
    }

    main header .navigation nav.collapse {
        display: block;
        top: 0;
        left: 0;
        position: fixed;
        padding: 100px 0;
        height: 100vh;
        width: 100%;
        background: url("images/bg-green.png");
        z-index: 999;
    }

    main header .navigation nav ul,
    main header .navigation nav ul li,
    main header .navigation nav ul li a {
        width: 100%;
    }

    main header .navigation nav ul li a,
    main header.sticky .navigation nav ul li a {
        padding: 10px 0;
    }

    main header .navigation nav.collapse ul li a {
        color: #fff;
        font-size: 1.5em !important;
    }

    main header .navigation nav.collapse ul li a:hover,
    main header .navigation nav.collapse ul li.current-menu-item a {
        color: #B1519A;
    }

    main header .navigation nav.collapse ul li ul.sub-menu {
        display: block;
        background: transparent;
        box-shadow: none;
        padding: 0;
    }


    main header .navigation nav.collapse ul li ul.sub-menu li a {
        font-size: 1em !important;
    }

    main header .navigation nav.collapse ul li ul.sub-menu:after {
        display: none;
    }

    canvas#canvas-home {
        display: none;
    }

    body.home main section[role="banner"] div.header-element-title {
        top: 0 !important;
        left: 0 !important;
        width: 100%;
        padding-top: 80px;
    }

    body.home main section[role="banner"] div.header-element-title img {
        width: 30%;
        margin: 0 auto;
    }

    body.home main section[role="banner"],
    body.home main section[role="banner"] div.packshots {
        width: 100%;
        height: 80vh;
    }

    body.home main section[role="banner"] div.packshots img {
        max-width: 60%;
    }

    body.home main section[role="banner"] div.packshots a:nth-child(1) img,
    body.home main section[role="banner"] div.packshots a:nth-child(2) img {
        bottom: -20%;
    }

    body.home main section[role="banner"] div.bg-elements {
        height: 30vh;
        top: 50%;
        bottom: inherit;
    }

    .block,
    .block.bg-block-6 {
        width: 50% !important;
    }

    section.recepten-grid[role="textblock"] article {
        width: 50%;
        float: left;
    }


    /* Product page */

    section.product-grid.grid-4 article.product {
        width: 100%;
    }

    section.product-grid article.product {
        height: 80vh;
        line-height: 80vh;
    }

    section.product-grid article.product .product-title {
        top: -20%;
    }

    section.product-grid article.product .product-image {
        top: 15%;
    }

    .contact-container .contact-form span.label {
        width: 100%;
        text-align: left;
    }

    .contact-container input[type="radio"] + label {
        width: 100%;
        display: inline-block;
        text-align: left;
        margin-bottom: 10px;
    }

    section.product-grid {
        padding-top: 80px !important;
    }

    section.product-grid article.product {
        height: 550px;
        line-height: normal;
        position: relative;
    }

    section.product-grid article.product .product-title,
    section.product-grid article.product .product-image {
        position: relative;
        top: 0;
        margin-top: 40px;
    }

    section.product-grid.grid-crosssell ul li div.product-image {
        margin-top: 90px;
    }

    section.product-grid.grid-crosssell ul li article {
        height: 360px;
    }


    /* Product detail styling */
    .product-tekst {
        margin-bottom: 0;
    }

    .product-gegevens h5 span {
        display: none;
    }

    .ingredienten-container h2, .product-gegevens h5 {
        font-family: 'AppleBerry', Pangolin, cursive !important;
        font-size: 1.4em !important;
        border-bottom: 2px solid #fff;
        position: relative;
        cursor: pointer;
    }

    .ingredienten-container h2:after, .product-gegevens h5:after {
        display: block;
        content: "";
        background: url("images/product-toggle-arrow.png") no-repeat;
        width: 16px;
        height: 17px;
        position: absolute;
        right: 0;
        top: 10px;
    }

    .ingredienten-container h2.active:after, .product-gegevens h5.active:after {
        background: url("images/product-toggle-close.png") no-repeat;
    }

    .ingredienten-container p img {
        width: 100%;
        height: auto;
    }

    /* Nieuws */

    .nieuws-container article .item-image img {
        width: 100%;
        height: auto;
    }


    /* FULL screen */

    #fullpage {
        padding-top: 100px;
    }

    #fullpage #heritage-line {
        display: none;
    }

    #fullpage section .image-container,
    #fullpage section .image-container-inner, #fullpage section .text-container {
        display: inline-block;
        position: relative;
        width: 100% !important;
        height: auto !important;
        float: none !important;
    }

    #fullpage .timeline-eind {
        display: none !important;
        visibility: hidden;
    }

    #fullpage section .image-container-inner {
        margin-top: 0;
        width: 100%;
        height: auto;
        position: relative;
        overflow: auto;
        text-align: center;
    }

    #fullpage section .image-container-inner img {
        width: 100%;
        height: auto;
        display: inline-block;
        text-align: center;
        margin: 0 auto;
        position: relative;
        float: none !important;
    }

    #fullpage section .text-container {
        padding: 0 40px;
    }


    #fullpage section footer[role="copyrights"] {
        position: relative;
    }

    section.recept-filter.sticky {
        top: 75px;
    }


    section.product-grid {
        padding-top: 80px !important;
    }

    section.product-grid article.product .product-title,
    section.product-grid article.product .product-image {
        position: relative;
        top: 0;
        margin-top: 40px;
    }

    body.category section.product-grid article.product .product-title,
    body.category section.product-grid article.product .product-image {
        position: relative;
        top: 0;
        margin-top: 0;
    }


}

.hide-desktop {
    display: none;
}
.hide-mobile {
    display: block;
}

@media (max-width: 580px) {

    canvas#canvas-home {
        display: none;
    }

    main header {
        background: #fff;
        height: auto;
        display: block;
    }

    main header .logo {
        width: auto;
        display: inline-block;
        z-index: 999;
    }

    main header .navigation {
        width: 100%;
        height: 50px;
        background: transparent;
        position: absolute;
        top: 50%;
        right: 0;
        margin-top: -25px;
        z-index: 901;
    }

    main header .mobile-toggle {
        position: absolute;
        top: 50%;
        right: 20px;
        width: 30px;
        height: 25px;
        margin-top: -12px;
        text-align: center;
    }

    main header .mobile-toggle:hover {
        cursor: pointer;
    }

    main header .navigation nav {
        width: 100%;
        height: 100vh;
        position: relative;
        float: none;
        background: #fff;
        padding: 0;
    }

    main header .navigation nav.collapse {
        display: block;
        top: 0;
        left: 0;
        position: fixed;
        padding: 100px 0;
        height: 100vh;
        width: 100%;
        background: url("images/bg-green.png");
        z-index: 999;
    }

    main header .navigation nav ul,
    main header .navigation nav ul li,
    main header .navigation nav ul li a {
        width: 100%;
    }

    main header .navigation nav ul li a,
    main header.sticky .navigation nav ul li a {
        padding: 10px 0;
    }

    main header .navigation nav.collapse ul li a {
        color: #fff;
        font-size: 1.5em !important;
    }

    main header .navigation nav.collapse ul li a:hover,
    main header .navigation nav.collapse ul li.current-menu-item a {
        color: #B1519A;
    }

    main header .navigation nav.collapse ul li ul.sub-menu {
        display: block;
        background: transparent;
        box-shadow: none;
        padding: 0;
    }


    main header .navigation nav.collapse ul li ul.sub-menu li a {
        font-size: 1em !important;
    }

    main header .navigation nav.collapse ul li ul.sub-menu:after {
        display: none;
    }

    body.home main section[role="banner"] div.header-element-title {
        top: 0 !important;
        left: 0 !important;
        width: 100%;
        padding-top: 80px;
    }

    body.home main section[role="banner"] div.header-element-title img {
        width: 50%;
        top: 30%;
        margin: 0 auto;
    }

    body.home main section[role="banner"],
    body.home main section[role="banner"] div.packshots {
        width: 100%;
        height: 90vh;
    }

    body.home main section[role="banner"] div.packshots img {
        max-width: 90%;
    }

    body.home main section[role="banner"] div.packshots a:nth-child(1) img {
        bottom: 10%;
        left: -10%;
    }

    body.home main section[role="banner"] div.packshots a:nth-child(2) img {
        bottom: -10%;
        right: -10%;
    }

    body.home main section[role="banner"] div.bg-elements {
        height: 30vh;
        top: 50%;
        bottom: inherit;
    }

    div.canvas-container .block,
    div.canvas-container .block.bg-block-6 {
        width: 100% !important;
    }

    div.canvas-container .block:nth-child(3),
    div.canvas-container .block.bg-block-6:nth-child(3),
    div.canvas-container .block:nth-child(4),
    div.canvas-container .block.bg-block-6:nth-child(4) {
        width: 50% !important;
    }

    section.recepten-grid[role="textblock"] article {
        width: 100%;
        float: none;
    }

    /* Product page */

    section.product-grid.grid-4 article.product {
        width: 100%;
    }

    section.product-grid article.product {
        height: 80vh;
        line-height: 80vh;
    }

    section.product-grid article.product .product-title {
        top: -20%;
    }

    section.product-grid article.product .product-image {
        top: 15%;
    }

    .contact-container .contact-form span.label {
        width: 100%;
        text-align: left;
    }

    .contact-container input[type="radio"] + label {
        width: 100%;
        display: inline-block;
        text-align: left;
        margin-bottom: 10px;
    }

    section.product-grid {
        /* BV hack */
        /*padding-top: 80px !important;*/
    }

    section.product-grid article.product {
        height: 400px;
        line-height: normal;
        position: relative;
    }

    section.product-grid article.product .product-title,
    section.product-grid article.product .product-image {
        position: relative;
        top: 0;
        margin-top: 40px;
    }

    section.product-grid.grid-crosssell ul li div.product-image {
        margin-top: 90px;
    }

    /* BV hack */
    .hide-desktop {
        display: block;
    }
    .hide-mobile {
        display: none;
    }

}

@media (max-width: 340px) {
    section.product-grid article.product {
        height: 400px;
        line-height: normal;
        position: relative;
    }
}


section.header-mobile {
    display: none !important;
}


@media (max-width: 991px) {

    section.header-mobile {
        display: block !important;
        height: auto !important;
        text-align: center !important;
    }

    section.header-mobile img {
        margin: 0 auto;
        text-align: center;
        display: block;
        width: 100%;
        height: auto;
    }

    section.header-desktop {
        display: none !important;
    }

    body.page-template-page-producten section.product-grid article.product .product-image .product-shadow {
        top: unset !important;
        bottom: -10% !important;
    }

}

div.wpcf7-validation-errors {
    display: block;
    position: fixed;
    z-index: 80;
    bottom: 0;
    left: 0;
    width: 100%;
    background: #f7e700;
    color: #000;
    margin: 0;
    padding: 30px;
    box-sizing: border-box;
}

span.wpcf7-not-valid-tip {
    display: block;
    background: red;
    color: #fff;
    width: 100%;
    height: auto;
}

#content-start {
    position: absolute;
    bottom: 10vh;
}

/** AVG - GRDP **/

label.privacy-toggle-btn { cursor: help; }

.privacy-info-overlay {
    position: absolute;
    width: 100%;
    max-width: 800px;
    top: 50%;
    left: 50%;
    background: #fff;
    color: #4d4d4d;
    padding: 5rem 2rem;
    box-shadow: 0 0 15px rgba(0,0,0,.3);
    transform: translate(-50%, 50%);
    font-size: 1.6rem;
    z-index: 9000;
    cursor: pointer;
}

@media (min-width: 991px) {
    .privacy-info-overlay {
        position: fixed;
        top: 50%;
        left: 50%;
        background: #fff;
        color: #4d4d4d;
        padding: 5rem;
        box-shadow: 0 0 15px rgba(0,0,0,.3);
        transform: translate(-50%,-50%);
        font-size: 1.6rem;
        z-index: 9000;
        cursor: pointer;
    }
}

.privacy-info-overlay a,
.privacy-info-overlay p,
.privacy-info-overlay h1,
.privacy-info-overlay h2,
.privacy-info-overlay h3,
.privacy-info-overlay h4,
.privacy-info-overlay h5,
.privacy-info-overlay ul,
.privacy-info-overlay ul li {
    color: #4d4d4d;
}

.privacy-info-overlay i.fa-window-close {
    position: absolute;
    right: 20px;
    top: 20px;
    font-size: 2.5rem;
    color: #4d4d4d;
}

.privacy-info-overlay > label {
    padding: 1rem;
}

.privacy-info-overlay > label:hover {
    color: green;
}

    @media (min-width: 991px) {
        .privacy-info-overlay:hover i.fa-window-close { color: red; }
    }

.gegevensverwerking-label { display: none !important; }

    @media (min-width: 991px) {
        .gegevensverwerking-label { display: inline-block !important; }
    }


.gegevensverwerking-algemeen .wpcf7-list-item,
.gegevensverwerking-algemeen .wpcf7-list-item > label,
.gegevensverwerking-klacht .wpcf7-list-item,
.gegevensverwerking-klacht .wpcf7-list-item > label { margin: 0 !important; }

.gegevensverwerking-algemeen .wpcf7-list-item-label,
.gegevensverwerking-klacht .wpcf7-list-item-label { position: relative; }

.gegevensverwerking-algemeen .wpcf7-list-item-label label.privacy-toggle-btn,
.gegevensverwerking-klacht .wpcf7-list-item-label label.privacy-toggle-btn { position: absolute; top: 0; left: 0; }

ul#responsive-recepten {
    min-height: 210px;
}

.ui-datepicker .ui-datepicker-title select.ui-datepicker-month, .ui-datepicker .ui-datepicker-title select.ui-datepicker-year {
    color: #000;
}