/*
Theme Name: Solidsite theme
Description: Solidsite WordPress
Author: Hans Cnops - Solidsite
Author URI: https://solidsite.be/
Description: Custom Theme for Klimkaffee
Version: 1.4
License: Unlicensed

*/

@import url('https://fonts.googleapis.com/css?family=Be+Vietnam:400,700|Be Vietnam:100,300,400,700&display=swap');

:root {
    --red: #be3d3c;
    --red-dark: #8C2B29;
    --dark-red: #8C2B29;
    --black: #260d0d;
    --black-brown: #361B1B;
    --dark: #4c1a1c;
    --brown: #591D1C;
    --pinky: #ede4e5;
    --instagram: #E1306C;
    --facebook: #3B5998;
    --light-red: #ede4e5;
    --gray: #D5D3D3;
    --dark-gray: #D5D5D5;
    --light: #F7F7F7;
    --white: #FFFFFF;
    --txt-color: #260d0d;
    --shadow: 0 16px 22px -17px #140101;
    --box-shadow: 7px 6px 13px -1px rgba(20,1,1,0.3);
    --txt-shadow-white: 1px 1px 1px rgba(255,255,255,0.2);
    --txt-shadow-small: 1px 0px 1px rgba(23,0,7,0.5);
    --txt-shadow: 1px 0px 4px rgba(23,0,7,0.5);
}

.c-white{
    color: var(--white);
}

.bg-white{
    background-color: var(--white);
}

.c-light{
    color: var(--light);
}

.bg-light{
    background-color: var(--light);
}

/* media queries sample */

@media only screen and (max-width: 1112px) {

}

@media only screen and (max-width: 834px) {

}

@media only screen and (max-width: 667px) {

}

@media only screen and (max-width: 414px) {

}
/* end media queries */


body{
    background-color: #FFF;
    color: #341919;
}

.navbar-collapse{
    float: right;
    margin-top: 20px;
}


/*
 Theme Name: Solid Theme
 Author: Wouter Kennis & Hans Cnops
 Version: 1.0
*/

/* 3rd party packages */

/*! normalize.css v5.0.0 | MIT License | github.com/necolas/normalize.css */

/**
 * 1. Change the default font family in all browsers (opinionated).
 * 2. Correct the line height in all browsers.
 * 3. Prevent adjustments of font size after orientation changes in
 *    IE on Windows Phone and in iOS.
 */

/* Document
   ========================================================================== */

html {
    font-family: 'Source Sans Pro', sans-serif;
    line-height: 1.15;
    font-size: 11px;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    overflow-x: hidden;
    scroll-behavior: smooth;
}


/* Sections
   ========================================================================== */

/**
 * Remove the margin in all browsers (opinionated).
 */

body {
    margin: 0;
}

/**
 * Add the correct display in IE 9-.
 */

article,
aside,
footer,
header,
nav,
section {
    display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */

h1 {
    font-family: 'Be Vietnam', sans-serif;
    font-size: 2em;
    margin: 0.67em 0;
}

/* Grouping content
   ========================================================================== */

/**
 * Add the correct display in IE 9-.
 * 1. Add the correct display in IE.
 */

figcaption,
figure,
main { /* 1 */
    display: block;
}

/**
 * Add the correct margin in IE 8.
 */

figure {
    margin: 1em 40px;
}

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */

hr {
    box-sizing: content-box; /* 1 */
    height: 0; /* 1 */
    overflow: visible; /* 2 */
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

pre {
    font-family: monospace, monospace; /* 1 */
    font-size: 1em; /* 2 */
}

/* Text-level semantics
   ========================================================================== */

/**
 * 1. Remove the gray background on active links in IE 10.
 * 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
 */

a {
    background-color: transparent; /* 1 */
    -webkit-text-decoration-skip: objects; /* 2 */

}

/**
 * Remove the outline on focused links when they are also active or hovered
 * in all browsers (opinionated).
 */

a:active,
a:hover {
    outline-width: 0;
}

/**
 * 1. Remove the bottom border in Firefox 39-.
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */

abbr[title] {
    border-bottom: none; /* 1 */
    text-decoration: underline; /* 2 */
    text-decoration: underline dotted; /* 2 */
}

/**
 * Prevent the duplicate application of `bolder` by the next rule in Safari 6.
 */

b,
strong {
    font-weight: inherit;
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */

b,
strong {
    font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

code,
kbd,
samp {
    font-family: monospace, monospace; /* 1 */
    font-size: 1em; /* 2 */
}

/**
 * Add the correct font style in Android 4.3-.
 */

dfn {
    font-style: italic;
}

/**
 * Add the correct background and color in IE 9-.
 */

mark {
    background-color: #ff0;
    color: #000;
}

/**
 * Add the correct font size in all browsers.
 */

small {
    font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */

sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}

sub {
    bottom: -0.25em;
}

sup {
    top: -0.5em;
}

/* Embedded content
   ========================================================================== */

/**
 * Add the correct display in IE 9-.
 */

audio,
video {
    display: inline-block;
}

/**
 * Add the correct display in iOS 4-7.
 */

audio:not([controls]) {
    display: none;
    height: 0;
}

/**
 * Remove the border on images inside links in IE 10-.
 */

img {
    border-style: none;
}

/**
 * Hide the overflow in IE.
 */

svg:not(:root) {
    overflow: hidden;
}

/* Forms
   ========================================================================== */

/**
 * 1. Change the font styles in all browsers (opinionated).
 * 2. Remove the margin in Firefox and Safari.
 */

button,
input,
optgroup,
select,
textarea {
    font-family: sans-serif; /* 1 */
    font-size: 100%; /* 1 */
    line-height: 1.15; /* 1 */
    margin: 0; /* 2 */
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */

button,
input { /* 1 */
    overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */

button,
select { /* 1 */
    text-transform: none;
}

/**
 * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
 *    controls in Android 4.
 * 2. Correct the inability to style clickable types in iOS and Safari.
 */

button,
html [type="button"], /* 1 */
[type="reset"],
[type="submit"] {
    -webkit-appearance: button; /* 2 */
}

/**
 * Remove the inner border and padding in Firefox.
 */

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
    border-style: none;
    padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
    outline: 1px dotted ButtonText;
}

/**
 * Change the border, margin, and padding in all browsers (opinionated).
 */

fieldset {
    border: 1px solid #c0c0c0;
    margin: 0 2px;
    padding: 0.35em 0.625em 0.75em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */

legend {
    box-sizing: border-box; /* 1 */
    color: inherit; /* 2 */
    display: table; /* 1 */
    max-width: 100%; /* 1 */
    padding: 0; /* 3 */
    white-space: normal; /* 1 */
}

/**
 * 1. Add the correct display in IE 9-.
 * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */

progress {
    display: inline-block; /* 1 */
    vertical-align: baseline; /* 2 */
}

/**
 * Remove the default vertical scrollbar in IE.
 */

textarea {
    overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10-.
 * 2. Remove the padding in IE 10-.
 */

[type="checkbox"],
[type="radio"] {
    box-sizing: border-box; /* 1 */
    padding: 0; /* 2 */
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
    height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */

[type="search"] {
    -webkit-appearance: textfield; /* 1 */
    outline-offset: -2px; /* 2 */
}

/**
 * Remove the inner padding and cancel buttons in Chrome and Safari on macOS.
 */

[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */

::-webkit-file-upload-button {
    -webkit-appearance: button; /* 1 */
    font: inherit; /* 2 */
}

/* Interactive
   ========================================================================== */

/*
 * Add the correct display in IE 9-.
 * 1. Add the correct display in Edge, IE, and Firefox.
 */

details, /* 1 */
menu {
    display: block;
}

/*
 * Add the correct display in all browsers.
 */

summary {
    display: list-item;
}

/* Scripting
   ========================================================================== */

/**
 * Add the correct display in IE 9-.
 */

canvas {
    display: inline-block;
}

/**
 * Add the correct display in IE.
 */

template {
    display: none;
}

/* Hidden
   ========================================================================== */

/**
 * Add the correct display in IE 10-.
 */

[hidden] {
    display: none;
}

.hide{
    display: none;
}


/* SOLIDSITE */

h1, h2, h3, h4, h5, h6 {
    font-family: 'Be Vietnam', sans-serif;
    color: var(--black);
    font-weight: 700;
    margin-block-start: 5px;
    margin-block-end: 5px;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    line-height: 1.4;
}


h1{
    font-size: 3vw;
}
h2{
    font-size: 2.5vw;
}
h3{
    font-size: 2.1vw;
}
h4{
    font-size: 1.8vw;
}
h5{
    font-size: 1.7vw;
}
h6{
    font-size: 1.5vw;
}


@media only screen and (max-width: 1112px) {

    h1{
        font-size: 32px;
    }
    h2{
        font-size: 24px;
    }
    h3{
        font-size: 20px;
    }
    h4{
        font-size: 18px;
    }
    h5{
        font-size: 16px;
    }
    h6{
        font-size: 15px;
    }


}

@media only screen and (max-width: 600px) {
    h1{
        font-size: 24px;
    }
    h2{
        font-size: 21px;
    }
    h3{
        font-size: 18px;
    }
    h4{
        font-size: 16px;
    }
    h5{
        font-size: 15px;
    }
    h6{
        font-size: 14px;
    }

}

p, input, ul, li, a, div {
    font-family: 'Heebo', sans-serif;
    color: var(--black);
    font-size: 15px;
    font-weight: 100;
}


@media only screen and (min-width: 1200px) {

    p, input, ul, li, a, div {
        font-family: 'Heebo', sans-serif;
        color: var(--black);
        /*font-size: 1.4vw;*/
        font-weight: 100;
    }

}

p{
    line-height: 2;
    font-weight: 100;
}

a{
    text-decoration: none;
}

.white{
    color: var(--white);
}

.gray{
    color: var(--gray);
}

.zwart{
    color: #260d0d;
}
.donker{
    color: #361B1B;
}

.wit{
    color: #FFFFFF;
}

.licht-grijs{
    color: #F7F7F7;
}

.grijs{
    color: #D5D3D3 ;
}

.rood{
    color: #BE3D3C;
}

.donker-rood{
    color: #8C2B29 ;
}

.bruin{
    color: #591D1C ;
}


/* === GLOBAL SOLID STUFF === */

img {
    width: 100%;
    height: auto;
}

.top-50{
    margin-top: 50px;
}

.text-center,
.cent,
.center{
    text-align: center;
}

.upper{
    text-transform: uppercase;
}

.position-relative{
    position: relative;
}

.overflow-hidden{
    overflow: hidden;
}


/* solid inline */

.solid-container-holder{
    max-width: 1120px;
    margin:10px 40px;
}


@media only screen and (min-width: 1200px) {

    .solid-container-holder{
        margin:10px auto;
    }

}

@media only screen and (max-width: 834px) {

    .solid-container-holder{
        margin:10px 30px;
    }


}

@media only screen and (max-width: 667px) {
    .solid-container-holder{
        margin:10px 20px;
    }

}

@media only screen and (max-width: 414px) {
    .solid-container-holder{
        margin:10px 15px;
    }

}

.solid-container{
    font-size: 0;
}
.solid-container-p{
    font-size: 0;
}

/* inline voor builder EENVOUDIGER */

[class*="builder-inline-block-"] {
    display: inline-block;
    vertical-align: top;
    margin: 0;
}

.builder-inline-block-100{
    width: 100%;
}

.builder-inline-block-80{
    width: 80%;
}

.builder-inline-block-75{
    width: 75%;
}

.builder-inline-block-66{
    width: 66.66%;
}

.builder-inline-block-60{
    width: 60%;
}

.builder-inline-block-50{
    width: 50%;
}

.builder-inline-block-40{
    width: 40%;
}

.builder-inline-block-33{
    width: 33.33%;
}

.builder-inline-block-25{
    width: 25%;
}

.builder-inline-block-20{
    width: 20%;
}

.builder-inline-block-16{
    width: 16.66%;
}

.builder-inline-block-8{
    width: 8.33%;
}

@media only screen and (max-width: 834px) {

    [class*="builder-inline-block-"] {
        display: inline-block;
        vertical-align: top;
        margin: 0;
        width: 100%;
    }

    .builder-inline-block-33{
        width: 33.33%;
    }

    .builder-inline-block-25{
        width: 50%;
    }

    .builder-inline-block-20{
        width: 50%;
    }

    .builder-inline-block-16{
        width: 50%;
    }

    .builder-inline-block-8{
        width: 50%;
    }

}


@media only screen and (max-width: 414px) {

    [class*="builder-inline-block-"] {
        display: inline-block;
        vertical-align: top;
        margin: 0;
        width: 100%;
    }

    .builder-inline-block-20{
        width: 50%;
    }

    .builder-inline-block-16{
        width: 50%;
    }

    .builder-inline-block-8{
        width: 50%;
    }

}



.solid-container-margin{
    margin: 0 40px 0 40px;
    max-width: 1120px;
}

@media only screen and (min-width: 1200px) {

    .solid-container-margin {
        margin: 0 auto 0 auto;
    }
}

.solid-inline-block-100{
    display: inline-block;
    vertical-align: top;
    width: 100%;
    margin: 0;
}

.solid-inline-block-80{
    display: inline-block;
    vertical-align: top;
    width: calc(85% - 4px);;
}

.solid-inline-block-75{
    display: inline-block;
    vertical-align: top;
    width: calc(75% - 4px);;
}

.solid-inline-block-70{
    display: inline-block;
    vertical-align: top;
    width: calc(70% - 4px);;
}

.solid-inline-block-65{
    display: inline-block;
    vertical-align: top;
    width: calc(65% - 4px);
    margin: 0;
}

.solid-inline-block-60{
    display: inline-block;
    vertical-align: top;
    width: calc(60% - 4px);
    margin: 0;
}

.solid-inline-block-50{
    display: inline-block;
    vertical-align: top;
    width: calc(50% - 4px);
}

.solid-inline-block-40{
    display: inline-block;
    vertical-align: top;
    width: calc(40% - 4px);
    margin: 0;
}

.solid-inline-block-35{
    display: inline-block;
    vertical-align: top;
    width: calc(35% - 4px);
}

.solid-inline-block-33{
    display: inline-block;
    vertical-align: top;
    width: calc(33% - 4px);
}

.solid-inline-block-30{
    display: inline-block;
    vertical-align: top;
    width: calc(30% - 4px);
}

.solid-inline-block-25{
    display: inline-block;
    vertical-align: top;
    width: calc(25% - 4px);
}

.solid-inline-block-20-last,
.solid-inline-block-20{
    display: inline-block;
    vertical-align: top;
    width: calc(20% - 4px);
}



@media only screen and (max-width: 834px) {

    .solid-inline-block-80{
        display: inline-block;
        vertical-align: top;
        width: 100%;
        margin: 0;
    }

    .solid-inline-block-75{
        display: inline-block;
        vertical-align: top;
        width: 100%;
        margin: 0;
    }

    .solid-inline-block-70{
        display: inline-block;
        vertical-align: top;
        width: 100%;
        margin: 0;
    }

    .solid-inline-block-65,
    .solid-inline-block-60{
        display: inline-block;
        vertical-align: top;
        width: 100%;
        margin: 0;
    }

    .solid-inline-block-50{
        display: inline-block;
        vertical-align: top;
        width: 100%;
        margin: 0;
    }

    .solid-inline-block-40{
        display: inline-block;
        vertical-align: top;
        width: 100%;
    }

    .solid-inline-block-33{
        display: inline-block;
        vertical-align: top;
        width: 50%;
    }

    .solid-inline-block-30{
        display: inline-block;
        vertical-align: top;
        width: 50%;
    }

    .solid-inline-block-25{
        display: inline-block;
        vertical-align: top;
        width: 50%;
    }

    .solid-inline-block-20{
        display: inline-block;
        vertical-align: top;
        width: 50%;
    }

    .solid-inline-block-20-last{
        display: inline-block;
        vertical-align: top;
        width: 100%;
    }

}

@media only screen and (max-width: 667px) {

    .solid-inline-block-80{
        display: inline-block;
        vertical-align: top;
        width: 100%;
    }

    .solid-inline-block-75{
        display: inline-block;
        vertical-align: top;
        width: 100%;
    }

    .solid-inline-block-70{
        display: inline-block;
        vertical-align: top;
        width: 100%;
    }

    .solid-inline-block-65,
    .solid-inline-block-60{
        display: inline-block;
        vertical-align: top;
        width: 100%;
    }

    .solid-inline-block-50{
        display: inline-block;
        vertical-align: top;
        width: 100%;
        margin: 0;
    }

    .solid-inline-block-40{
        display: inline-block;
        vertical-align: top;
        width: 100%;
    }

    .solid-inline-block-33{
        display: inline-block;
        vertical-align: top;
        width: 100%;
    }

    .solid-inline-block-30{
        display: inline-block;
        vertical-align: top;
        width: 100%;
    }

    .solid-inline-block-25{
        display: inline-block;
        vertical-align: top;
        width: 100%;
    }

    .solid-inline-block-20-last{
        display: inline-block;
        vertical-align: top;
        width: 100%;
    }

    .solid-inline-block-20{
        display: inline-block;
        vertical-align: top;
        width: 100%;
    }

}

@media only screen and (max-width: 414px) {

    .solid-inline-block-80,
    .solid-inline-block-75,
    .solid-inline-block-70,
    .solid-inline-block-60,
    .solid-inline-block-50,
    .solid-inline-block-40,
    .solid-inline-block-33,
    .solid-inline-block-30,
    .solid-inline-block-25,
    .solid-inline-block-20{
        display: inline-block;
        vertical-align: top;
        width: 100%;
        margin: 0;
    }

}

/* buttons */

.btn{
    outline: none;
    display: inline-block;
    padding: 12px 24px;
    margin-bottom: 0;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-image: none;
    border: 1px solid transparent;
    text-transform: uppercase;
    border-radius: 0;
    transition: all 0.3s ease 0s;
    -webkit-box-shadow: var(--box-shadow);
}


.btn-small{
    outline: none;
    display: inline-block;
    padding: 6px 12px;
    margin-bottom: 0;
    font-size: 14px;
    font-weight: 300;
    line-height: 1.2;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-image: none;
    border: none;
    text-transform: uppercase;
    border-radius: 0;
    transition: all 0.3s ease 0s;
    -webkit-box-shadow: var(--box-shadow);
}

.btn-klim{
    display: block;
    width: 220px;
    margin: 10px 0;
}

.btn-red{
    color: var(--white);
    background-color: var(--red);
    border-color: var(--red);
}

.btn-red:hover{
    color: var(--white);
    background: #a80a0a; /* Old browsers */
    background: -moz-linear-gradient(top,  #a80a0a 0%, #be3d3c 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top,  #a80a0a 0%,#be3d3c 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom,  #a80a0a 0%,#be3d3c 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a80a0a', endColorstr='#be3d3c',GradientType=0 ); /* IE6-9 */
    border-color: var(--white);
}


.btn-white{
    color: var(--red);
    background-color: var(--light);
    border-color: var(--light);
}

.btn-white:hover{
    border-color: var(--red);
    background: #ffffff; /* Old browsers */
    background: -moz-linear-gradient(top, #ffffff 0%, #e2e2e2 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #ffffff 0%,#e2e2e2 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #ffffff 0%,#e2e2e2 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e2e2e2',GradientType=0 ); /* IE6-9 */
}

.btn-black{
    color: var(--white);
    background-color: var(--black);
    border-color: var(--black);
}

.btn-black:hover{
    border: 1px solid white;
    background: #361b1b; /* Old browsers */
    background: -moz-linear-gradient(top, #361b1b 0%, #1c0e0d 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #361b1b 0%,#1c0e0d 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #361b1b 0%,#1c0e0d 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#361b1b', endColorstr='#1c0e0d',GradientType=0 ); /* IE6-9 */
    color: var(--white);
}

.btn-50{
    width: 50%;
}

.btn-60{
    width: 60%;
}
.btn-80{
    width: 80%;
}

.btn-90{
    width: 90%;
}

.btn-100{
    width: 100%;
}

.btn-center{
    margin-right: auto;
    margin-left: auto;
    display: block;
}

/* top to*/

#topToBtn {
    display: none;
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 99;
    outline: none;
    background-color: rgba(255, 255, 255, 0.24);
    border: 1px solid var(--red);
    color: white;
    cursor: pointer;
    padding: 8px;
    border-radius: 0;
    font-size: 18px;
    box-shadow: var(--box-shadow);
}

#topToBtn:hover {
    background-color: var(--light);
    border: none;
}

i.topToIcon.fas.fa-arrow-up {
    color: var(--red);
}

i.topToIcon.fas.fa-arrow-up:hover {
    color: var(--brown);
}

/* separator */

img.klimmkaffeeSeparatorIcon {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width:55px;
}

.klimmkaffeeSeparator {
    margin-top: 20px;
    margin-bottom: 30px;
}


/* === FOOTER === */

.solid-inline-block-20-footer-logo,
.solid-inline-block-20-footer {
    display: inline-block;
    width: 20%;
    vertical-align: top;
}

.solid-inline-block-40-footer-last{
    display: inline-block;
    width: 40%;
    vertical-align: top;
}

.solid-container-in{
    font-size: 0;
}

.solid-inline-block-50-footer{
    display: inline-block;
    width: 50%;
    vertical-align: top;
}

.footer-holder{
    margin: 20px;
}


.nav-list ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.spacer10{
    margin-left: 10px;
}

h3.headline.headline--small {
    font-size: 17px;
    margin-bottom: 30px;
}

nav.nav-list p,
nav.nav-list li,
nav.nav-list a
{
    font-size: 14px;
    line-height: 2;

}


@media only screen and (min-width: 1200px) {

    nav.nav-list p,
    nav.nav-list li,
    nav.nav-list a{
        font-size: 15px;

    }

}

p.footerCopyrightTxt {
    text-align: center;
}

.footerCopyrightTxt a,
p.footerCopyrightTxt {
    text-align: center;
    font-size: 12px;
}


.site-footer .fa-phone-volume,
.site-footer .fa-envelope {
    color: var(--red);
}

.site-footer.sitemap{
}

img.klimFooterLogo {
    width: 200px;
}


@media only screen and (max-width: 1112px) {
    .solid-inline-block-20-footer-logo{
        width: 100%;
        display: block;
    }

    .solid-inline-block-20-footer {
        width: 25%;
    }

    .solid-inline-block-40-footer-last{
        width: 50%;
    }

    .solid-inline-block-50-footer{
        width: 50%;
    }

    img.klimFooterLogo{
        display: block;
        margin-left: auto;
        margin-right: auto;
    }

}

@media only screen and (max-width: 834px) {

    img.klimFooterLogo{
        display: block;
        margin-left: auto;
        margin-right: auto;
    }

    .solid-inline-block-20-footer-logo{
        display: block;
        width: 100%;
    }
    .solid-inline-block-20-footer {
        width: 50%;
    }

    .solid-inline-block-40-footer-last{
        width: 100%;
    }

    .solid-inline-block-50-footer{
        width: 50%;
    }

    h3.headline.headline--small {
        text-align: center;
    }

    nav.nav-list p,
    nav.nav-list li,
    nav.nav-list a {
        text-align: center;
    }

    .nav-list span.schema-p {
        text-align: center;
        display: block;
    }

    .site-footer p,
    p span.schema-p,
    span.schema-p {
        text-align: center;
    }


}
ul#menu-main-mechelen,
ul#menu-main-herentals,
ul#menu-main-hcn {
    float: right;
}


@media only screen and (max-width: 667px) {
    .solid-inline-block-20-footer-logo{
        width: 100%;
        display: block;
    }

    img.klimFooterLogo{
        display: block;
        margin-left: auto;
        margin-right: auto;
    }
    .solid-inline-block-20-footer {
        width: 50%;
    }

    .solid-inline-block-40-footer-last{
        width: 100%;
    }

    .solid-inline-block-50-footer{
        width: 50%;
    }

}

@media only screen and (max-width: 414px) {
    .solid-inline-block-20-footer-logo{
        width: 100%;
        display: block;
    }
    img.klimFooterLogo{
        display: block;
        margin-left: auto;
        margin-right: auto;
    }
    .solid-inline-block-20-footer {
        width: 50%;
    }

    .solid-inline-block-40-footer-last{
        width: 100%;
    }

    .solid-inline-block-50-footer{
        width: 100%;
    }

    nav.nav-list p,
    nav.nav-list li,
    nav.nav-list a {
        font-size: 13px;
    }

    .nav-list span.schema-p {
        font-size: 13px;
    }

}

div.klimKaffeeFooterLine{
    display: block;
    margin-top: 20px;
    margin-bottom: 20px;
    margin-left: 0;
    margin-right: 0;
    width: 100%;
    height: 5px;
    background-color: var(--red);
}

.instaFb {
    display: inline-block;

}

.instaColor{
    color: var(--instagram);
    font-size: 30px;
    margin-left: 10px;

}

.fbColor{
    color: var(--facebook);
    font-size: 30px;
    margin-right: 10px;
}

.klimKaffeeFooterSoMe {
    display: block;
    width: 120Px;
    margin: 0 auto;
    text-align: center;
}

span.soMeSpacer {
    width: 20px;
    display: inline-block;
}

/* header */

#bigScreenNavigation{
    display: block;

}

#mobileNavigation{
    display: none;
}

#hamburgerMenu{
    display: none;
    background-color: var(--white);
    width: 40px;
    height: 39px;
    position: fixed;
    top: 20px;
    right: 20px;
    box-shadow: var(--box-shadow);
}


div#hamburgerMenu {
    z-index: 2;
}

.hamburgerLineHolder {
    margin: 8px 5px;
}

#hamburgerLineOne,
#hamburgerLineTwo,
#hamburgerLineThree{
    position: relative;
    height: 3px;
    width: 30px;
    background-color: var(--black);
    margin-bottom: 6px;
}

@media only screen and (max-width: 934px) {
    #bigScreenNavigation{
        display: none;

    }

    #mobileNavigation{
        display: block;
    }

    #hamburgerMenu{
        display: inline-block;
    }

}

div#main-menu ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
div#main-menu-herentals ul li a,
div#main-menu-mechelen ul li a,
div#main-menu ul li a {
    display: block;
    margin: 30px 10px 0 10px;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 14px;
    cursor: pointer;
    color: var(--black);
}
.whiteMenu div#main-menu-herentals li a,
.whiteMenu div#main-menu-mechelen li a,
.whiteMenu div#main-menu li a {
    color: var(--white);
}
div#main-menu-herentals li a:hover,
div#main-menu-mechelen li a:hover,
div#main-menu li a:hover{
    color: var(--red);
}
div#main-menu-mechelen li#menu-item-195 a:hover,
div#main-menu-herentals li#menu-item-195 a:hover,
div#main-menu li#menu-item-195 a:hover{
    color: var(--white);
    background-color: var(--brown);
}
div#main-menu-mechelen li,
div#main-menu-herentals li,
div#main-menu li {
    display: inline;
    text-align: center;
    float: left;
}
div#main-menu ul li.btn-contact-menu a,
li#menu-item-195.btn-contact-menu a{
    background-color: var(--red);
    padding: 6px 12px;
    margin-top: 26px;
    color: var(--white);
    font-size: 12px;
}

i#menu-item-195.btn-contact-menu a:hover{
    background-color: var(--brown);
    color: var(--white);
}


a.navbar-brand {
    display: inline-block;
    width: 100px;
    vertical-align: top;
}

div#main-menu {
    display: inline-block;
    width: calc(100% - 120px);
    margin-top: 10px;
}

.toggle-nav {
    position: absolute;
    top: 5px;
    right: 5px;
}



div#gradientMenu {
    height: 140px;
    /*
    background: rgba(237, 237, 237, 0.79);
    background: -moz-linear-gradient(top, rgba(237,237,237,0.79) 0%, rgba(255,255,255,0.79) 19%, rgba(255,255,255,0.79) 29%, rgba(255,255,255,0.48) 57%, rgba(255,255,255,0) 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(237,237,237,0.79)), color-stop(19%, rgba(255,255,255,0.79)), color-stop(29%, rgba(255,255,255,0.79)), color-stop(57%, rgba(255,255,255,0.48)), color-stop(100%, rgba(255,255,255,0)));
    background: -webkit-linear-gradient(top, rgba(237,237,237,0.79) 0%, rgba(255,255,255,0.79) 19%, rgba(255,255,255,0.79) 29%, rgba(255,255,255,0.48) 57%, rgba(255,255,255,0) 100%);
    background: -o-linear-gradient(top, rgba(237,237,237,0.79) 0%, rgba(255,255,255,0.79) 19%, rgba(255,255,255,0.79) 29%, rgba(255,255,255,0.48) 57%, rgba(255,255,255,0) 100%);
    background: -ms-linear-gradient(top, rgba(237,237,237,0.79) 0%, rgba(255,255,255,0.79) 19%, rgba(255,255,255,0.79) 29%, rgba(255,255,255,0.48) 57%, rgba(255,255,255,0) 100%);
    background: linear-gradient(to bottom, rgba(237,237,237,0.79) 0%, rgba(255,255,255,0.79) 19%, rgba(255,255,255,0.79) 29%, rgba(255,255,255,0.48) 57%, rgba(255,255,255,0) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ededed', endColorstr='#ffffff', GradientType=0 );
    */
}

div#gradientMenu2 {

    height: 100px;
/*
background: rgba(235, 235, 235, 0.65);
background: -moz-linear-gradient(top, rgba(235, 235, 235, 0.65) 0%, rgba(245, 245, 245, 0) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(235, 235, 235, 0.65)), color-stop(100%, rgba(245, 245, 245, 0)));
background: -webkit-linear-gradient(top, rgba(235, 235, 235, 0.65) 0%, rgba(245, 245, 245, 0) 100%);
background: -o-linear-gradient(top, rgba(235, 235, 235, 0.65) 0%, rgba(245, 245, 245, 0) 100%);
background: -ms-linear-gradient(top, rgba(235, 235, 235, 0.65) 0%, rgba(245, 245, 245, 0) 100%);
background: linear-gradient(to bottom, rgba(235, 235, 235, 0.65) 0%, rgba(245, 245, 245, 0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ebebeb', endColorstr='#f5f5f5', GradientType=0);
*/
}

img.logoKlimWit {

}

/* header mobile */

div#mobileNavigation {
    position: fixed;
    top: 0;
    width: 100%;
    background-color: var(--white);
    z-index: 1;
    height: 0;
    display: none;
}
#main-menu-mobile-mechelen ul
#main-menu-mobile ul {
    list-style: none;
    line-height: 3;
}

#main-menu-mobile li {
    text-align: center;
    text-transform: uppercase;
}

img.klimkaffeeMobileLogo{
    width: 120px;
    z-index: 2;
}

@media only screen and (min-width: 934px) {

    img.klimkaffeeMobileLogo {
            display: none;
        }

}



/* home */


.homeBanner {
    /*
    margin-top: -225px;*/
    margin-top: -10px;
    z-index: -1;
    min-height: 600px;
    background-color: var(--white);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50% 50%;
}

@media only screen and (max-width: 834px) {

    .homeBanner {
        margin-top: -225px;
    }

}

.homeEventImageBlock {
    height: 170px;
    background-color: var(--white);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50% 50%;
}


@media only screen and (max-width: 414px) {

}



.solid-container-home {
    padding-top: 50px;
    padding-left: 70px;
    font-size: 0;
}
.homeBannerTitle span,
.homeBannerTitle p,
.homeBannerTitle h2,
.homeBannerTitle {
    font-size: 3vw;
    font-family: 'Be Vietnam', sans-serif;
    font-weight: 700;
    line-height: 1.4;
    text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.55);
}

.homeBannerSubTitle p,
.homeBannerSubTitle span,
.homeBannerSubTitle a,
.homeBannerSubTitle {
    margin-top: 20px;
    font-size: 17px;
    line-height: 1.4;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.55);
}


.homeBannerEventBlock {
    width: 80%;
    background-color: var(--gray);
    margin: -30px auto 20px auto;
    box-shadow: var(--box-shadow);
}

.homeEventTitleBlock {
    background-color: var(--black);
    color: var(--white);
    padding: 10px;
}

h3.homeEventTitle {
    color: var(--white);
    font-size: 16px;
    text-align: center;
    font-weight: 400;
}

div#homeShowOne {
    padding-top: 10px;
}

.bannerButtons.solid-container {
    margin-top: 20px;
}

.separatorWhite{
    height: 3px;
    width: 100%;
    background-color: var(--white);
}

.separatorRed{
    height: 3px;
    width: 100%;
    background-color: var(--red);
}

h4.homeEventSubTitle {
    text-align: center;
    color: var(--txt-color);
    font-size: 17px;
    font-weight: 400;
}

h4.homeEventDateBanner {
    text-align: center;
    color: var(--red);
}

.homeEventSubTitleBlock {
    background-color: var(--light);
    padding: 10px;
}

button.homeEventButton {
    position: relative;
    top: 120px;
    display: block;
    width: 80%;
    margin: 0 auto;
    padding: 6px 12px;
    border: none;
    font-size: 13px;
    background-color: var(--white);
    color: var(--dark);
}

button.homeEventButton:hover{
    background-color: var(--red);
    color: var(--white);

}

button.homeEventBottomButton {
    display: block;
    width: 100%;
    background-color: var(--white);
    color: var(--red);
    font-size: 11px;
    padding: 12px 24px;
    border: none;
    cursor: pointer;
}

button.homeEventBottomButton:hover{
    background-color: var(--black);
    color: var(--white);
}


.homeBannerTitleTemp {
    font-size: 3vw;
    font-family: 'Be Vietnam', sans-serif;
    font-weight: 700;
    line-height: 1.4;
    text-align: center;
}

@media only screen and (max-width: 667px) {

    .homeBanner {
        min-height: 700px;
    }
    .homeBannerTitleTemp p,
    .homeBannerTitle p,
    .homeBannerTitleTemp span,
    .homeBannerTitle span,
    .homeBannerTitleTemp,
    .homeBannerTitle {
        font-size: 25px;
    }
    div#homeShowOne {
        margin-top: 80px;
    }
}


@media only screen and (max-width: 667px) {

    .solid-container-home {
        padding: 150px 20px 20px;
    }

    div#homeShowOneSub,
    div#homeShowOne {
        text-align: center;
    }

    .btn-home-banner {
        display: block;
        margin: 20px auto;
    }

    .homeIntroWysiwyg h2,
    .homeIntroWysiwyg h3,
    .homeIntroWysiwyg h4,
    .homeIntroWysiwyg p,
    .homeIntroWysiwyg span,
    .homeIntroWysiwyg a,
    h2.homeIntroTitleTwee,
    h3.homeIntroTitleTwee {
        text-align: center;
    }


}


@media only screen and (max-width: 834px) {

    .homeBannerEventBlock {
        display: none;
    }

    .solid-container-home {
        padding: 120px 40px 40px;
    }
}



img.klimkaffeeOverlay {
    max-height: 200px;
    width: auto;
}





.homeIntroductie {
    margin-top: 50px;
}


h1.homeIntroTitle {
     text-align: center;
}

.homeText {
    text-align: center;
}

img.homeKlimIntroImage {
    width: 90%;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.introHomeBlock2 {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
}

@media only screen and (max-width: 834px) {
    .introHomeBlock2 {
        margin-top: 30px;
        margin-bottom: 30px;
    }

    .homeBannerSubTitle {
        text-shadow: var(--txt-shadow-white);
    }

}

.image-container2{
    min-height: 350px;
    background-color: var(--white);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50% 50%;
}




.homeIntroExplainBlock {
    margin-top: 60px;
    margin-bottom: 70px;
}

h3.homeIntroTitleTwee {
    color: var(--red);
}

/* home aanbod */

.homeAanbod {
    background-color: var(--red);
    padding: 40px 20px;
}

h2.homeAanbodTitle {
    color: var(--white);
    text-align: center;
}

img.aanbodImage {
    width: 70px;
    display: block;
    margin: 20px auto;
}

p.aanbodTitel {
    font-size: 16px;
    text-transform: uppercase;
    color: var(--white);
    font-weight: 700;
    text-align: center;
}

.homeAanbodTitelContainer {
    padding: 10px 0 30px 0;
}

p.aanbodTekst {
    color: var(--white);
    text-align: center;
}

button.btn-aanbod {
    outline: none;
    width: 70%;
    display: block;
    margin: 5px auto;
    padding: 8px 12px;
    text-transform: uppercase;
    font-size: 13px;
    max-width: 200px;
}


.aanbodImageHolder {
    height: 100px;
}




.homeAanbodTxt {
    width: 90%;
    margin: 0 auto 20px auto;
}

/* gallery home */

.homeGalleryTitleHolder {
    margin: 30px 20px 40px 20px;
}

h2.homeGalleryTitle {
    text-align: center;
}

.homeGallery {
    max-width: 1120px;
    margin: 40px;
}

@media only screen and (min-width: 1200px) {

    .homeGallery {
        margin: 40px auto;
    }

}


.galleryGridWrapper {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 10px;
    grid-auto-rows: minmax(200px, auto);
}

@media only screen and (max-width: 667px) {

    .galleryGridWrapper {
        display: grid;
        grid-template-columns: 1fr;
        grid-gap: 10px;
        grid-auto-rows: minmax(300px, auto);
    }

}

.galleryGridOne {
    grid-column: 1 ;
    grid-row: 1;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}
.galleryGridTwo {
    grid-column: 2 ;
    grid-row: 1 ;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}
.galleryGridThree {
    grid-column: 3;
    grid-row: 1 / 3;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}
.galleryGridFour {
    grid-column: 1/3;
    grid-row: 2 / 4;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}
.galleryGridFive {
    grid-row: 3;
    grid-column: 3;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}
.galleryGridSix {
    grid-row: 4;
    grid-column: 1;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;

}

.galleryGridSeven {
    grid-row: 4;
    grid-column: 2;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

.galleryGridEight {
    grid-row: 4;
    grid-column: 3;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

@media only screen and (max-width: 667px) {


    .galleryGridOne {
        grid-column: 1 ;
        grid-row: 1;
    }
    .galleryGridTwo {
        grid-column: 1 ;
        grid-row: 2 ;
    }
    .galleryGridThree {
        grid-column: 1 ;
        grid-row: 3 ;
    }
    .galleryGridFour {
        grid-column: 1 ;
        grid-row: 4;
    }
    .galleryGridFive {
        grid-column: 1 ;
        grid-row: 5;
    }
    .galleryGridSix {
        grid-column: 1 ;
        grid-row: 6;
    }

    .galleryGridSeven {
        grid-column: 1 ;
        grid-row: 7;
    }

    .galleryGridEight {
        grid-column: 1 ;
        grid-row: 8;
    }

}

/* homeNewsBlock */

div#homeNewsBlock {
    max-width: 1120px;
    margin: 40px;
}

@media only screen and (min-width: 1200px) {

    div#homeNewsBlock {
        margin: 40px auto;
    }
}

.eventBlock {
    width: 90%;
    margin: 20px auto;
    background-color: var(--light);
}

.eventHomeInfoBlock {
    padding: 30px;
}

h3.headTitleEvent {
    text-align: center;
}

.eventBlockTopImage{
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    height: 300px;
}

.homeEventDate {
    font-weight: 700;
    color: var(--red);
}

.homeEventKnop {
    padding: 5px 20px 30px 20px;
}


/* home practical block */

.homeOpenInfo.columnSame {
    background-color: var(--red);
    color: var(--white);
}

.solid-inline-block-40.homeContactInfo {
    background-color: var(--dark-red);
    color: var(--white);
}



.tg-cly1,
.tg-0lax {
    color: var(--white);
}

h3.practicalBlockTitle {
    color: var(--white);
}

.practicalBlock {
    padding: 20px 40px ;
}

.practicalWysiwigHolder {
    padding: 0 20px;
}

.iconContact {
    display: inline-block;
    width: 30px;
    vertical-align: top;
}

.iconContact i.fas {
    color: var(--gray);
}

.contentContact a,
.contentContact {
    display: inline-block;
    width: calc(100% - 40px);
    color: var(--white);
}

h3.practicalBlockTitle2 {
    color: var(--white);
    padding: 20px 30px;
}

.practicalContactBlock {
    padding: 0 30px;
    margin-bottom: 30px;
}


.practicalContactDetailBlock {
    padding-bottom: 20px;
}

/* contact page */

.contactBanner {
    margin-top: -180px;
    z-index: -1;
    height: 250px;
    background-color: var(--white);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50% 100%;
}

.contactPageExtraContent {
    margin: 50px 30px 30px 30px;
    background-color: var(--black);
    padding: 20px 40px;
}

input.wpcf7-form-control{
    width: 100%;
    padding: 12px;
    box-sizing: border-box;
    border: 1px solid var(--dark);
    margin-top:20px;
}

textarea.wpcf7-form-control.wpcf7-textarea {
    width: 100%;
    height: 120px;
    padding: 12px;
    margin-top:20px;
    border: 1px solid var(--dark);
    box-sizing: border-box;
}

.contactFormHolder {
    width: 80%;
    margin: 30px auto;
}

input.wpcf7-form-control.wpcf7-submit.btn-contact-form {
    outline: none;
    display: inline-block;
    padding: 12px 24px;
    margin-bottom: 0;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-image: none;
    border: 1px solid transparent;
    text-transform: uppercase;
    border-radius: 0;
    transition: all 0.3s ease 0s;
    -webkit-box-shadow: var(--box-shadow);
    color: var(--white);
    background-color: var(--red);

}

input.wpcf7-form-control.wpcf7-submit.btn-contact-form:hover {
    color: var(--white);
    background: #a80a0a; /* Old browsers */
    background: -moz-linear-gradient(top, #a80a0a 0%, #be3d3c 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #a80a0a 0%, #be3d3c 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #a80a0a 0%, #be3d3c 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#a80a0a', endColorstr='#be3d3c', GradientType=0); /* IE6-9 */
    border-color: var(--white);
}

h1.contactPageTitle {
    text-align: center;
}

.contactPageTitleHolder {
    display: block;
}

p.contactPageSubTitle {
    text-align: center;
}

/* boulderen */


.boulderBanner {
    margin-top: -5px;
    z-index: -1;
    height: 600px;
    background-color: var(--white);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50% 50%;
}

.solid-container-boulder {
    margin: 160px 60px;
}

.boulderBannerTitle {
    font-size: 30px;
    font-family: 'Be Vietnam', sans-serif;
    font-weight: 600;
    color: var(--white);
    text-shadow: var(--txt-shadow);
    text-align: center;
}

h1.boulderIntroTitle {
    text-align: center;
}

.boulderIntroExplainBlock {
    margin-top: 40px;
    margin-bottom: 70px;
}

.boulderBannerSubTitle {
    color: var(--white);
    text-transform: uppercase;
    font-weight: 400;
    font-size: 17px;
    margin: 20px 0;
    text-shadow: var(--txt-shadow);
    text-align: center;
}

.boulderText {
    display: block;
    width: 600px;
    margin: 0 auto 30px auto;
    text-align: center;
}

@media only screen and (max-width: 834px) {

    .boulderText {
        width: 100%;
    }

}

.space10{
    margin-right: 10px !important;
}

.introboulderBlock2 {
    padding: 0 30px;
}


.image-container-contact{
    min-height: 350px;
    background-color: var(--white);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50% 50%;

}

h3.boulderIntroTitleTwee {
    color: var(--red);
}

/* gallery boulder */

.boulderGalleryHolder {
    background-color: var(--black);
    padding-bottom: 40px ;
}

.boulderGalleryTitleHolder {
    padding: 30px 0;
}

h2.boulderGalleryTitle {
    text-align: center;
    color: var(--white);
}

.boulderCta {
    margin: 50px 20px;
}


.boulderGallery {
    max-width: 1120px;
    margin: 40px;
}

@media only screen and (min-width: 1200px) {

    .boulderGallery  {
        margin: 40px auto;
    }

}


.galleryGridBWrapper{
    display: grid;
    grid-template-columns: auto;
    grid-gap: 10px;
    grid-template-rows: minmax(220px, auto);
    grid-auto-rows: minmax(220px, auto);
}

@media only screen and (max-width: 667px) {

    .galleryBGridWrapper {
        display: grid;
        grid-template-columns: auto;
        grid-gap: 10px;
        grid-auto-rows: minmax(300px, auto);
    }

}

.galleryBGridOne {
    grid-column: 1;
    grid-row: 1/3;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}
.galleryBGridTwo {
    grid-column: 2 ;
    grid-row: 1 ;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}
.galleryBGridThree {
    grid-column: 3;
    grid-row: 1 ;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}
.galleryBGridFour {
    grid-column: 2/4;
    grid-row: 2 / 4;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}
.galleryBGridFive {
    grid-row: 3;
    grid-column: 1;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}
.galleryBGridSix {
    grid-row: 4 / 6;
    grid-column: 1 / 3;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;

}

.galleryBGridSeven {
    grid-row: 4 / 6;
    grid-column: 3;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

.galleryBGridEight {
    grid-row: 4;
    grid-column: 4;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

@media only screen and (max-width: 667px) {


    .galleryBGridOne {
        grid-column: 1 ;
        grid-row: 1;
    }
    .galleryBGridTwo {
        grid-column: 1 ;
        grid-row: 2 ;
    }
    .galleryBGridThree {
        grid-column: 1 ;
        grid-row: 3 ;
    }
    .galleryBGridFour {
        grid-column: 1 ;
        grid-row: 4;
    }
    .galleryBGridFive {
        grid-column: 1 ;
        grid-row: 5;
    }
    .galleryBGridSix {
        grid-column: 1 ;
        grid-row: 6;
    }

    .galleryBGridSeven {
        grid-column: 1 ;
        grid-row: 7;
    }

    .galleryBGridEight {
        grid-column: 1 ;
        grid-row: 8;
    }

}

/* tarief boulder */

.boulderTariefTitelHolder {
    margin: 40px 20px 20px 20px;
}

h2.boulderTariefTitel {
    text-align: center;
}

p.boulderTariefSubTitel {
    text-align: center;
}

h3.tariefFieldSubTitle {
    font-size: 1.8vw;
    margin: 20px;
    text-align: center;
    font-weight: 400;
}

.tarief-container{
    max-width: 1120px;
    margin: 40px;
}

.tariefTekstHolder {
    padding: 10px;
    margin-top: 10px;
}


@media only screen and (min-width: 1200px) {

    .tarief-container{
        margin: 40px auto;
    }

    h3.tariefFieldSubTitle {
        font-size: 20px;
    }

}

@media only screen and (max-width: 1112px) {

}

@media only screen and (max-width: 834px) {

    .solid-container-boulder {
        margin: 140px 40px;
    }

    .introboulderBlock2{
        margin-top: 30px;
    }

}

@media only screen and (max-width: 667px) {
    .solid-container-boulder {
        margin: 100px 20px;
    }

}

@media only screen and (max-width: 414px) {

}

/* VERJAARDAG */


.verjaardagBanner {
    margin-top: -225px;
    z-index: -1;
    height: 600px;
    background-color: var(--white);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50% 50%;
}

.solid-container-verjaardag {
    margin: 160px 60px;
}

.verjaardagBannerTitle {
    font-size: 30px;
    font-family: 'Be Vietnam', sans-serif;
    font-weight: 600;
    color: var(--white);
    text-shadow: var(--txt-shadow);
    text-align: center;
}

.verjaardagIntroTitle {
    text-align: center;
}

.verjaardagIntroExplainBlock {
    margin-top: 40px;
    margin-bottom: 70px;
}

.verjaardagBannerSubTitle {
    color: var(--white);
    text-transform: uppercase;
    font-weight: 400;
    font-size: 17px;
    margin: 20px 0;
    text-shadow: var(--txt-shadow);
    text-align: center;
    line-height: 2;
}

.verjaardagText {
    display: block;
    width: 600px;
    margin: 0 auto 30px auto;
    text-align: center;
}

@media only screen and (max-width: 834px) {

    .verjaardagText {
        display: block;
        width: 100%;
        margin: 0 auto 30px auto;
        text-align: center;
    }

    .verjaardagBannerTitle {
        font-size: 20px;
    }



}

.introverjaardagBlock2 {
    padding: 0 30px;
}


.image-container-contact{
    min-height: 350px;
    background-color: var(--white);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50% 50%;

}

h3.verjaardagIntroTitleTwee {
    color: var(--red);
}

/* gallery boulder */

.verjaardagGalleryHolder {
    background-color: var(--black);
    padding-bottom: 40px ;
}

.verjaardagGalleryTitleHolder {
    padding: 30px 0;
}

h2.verjaardagGalleryTitle {
    text-align: center;
    color: var(--white);
}


.verjaardagGallery {
    max-width: 1120px;
    margin: 40px;
}

@media only screen and (min-width: 1200px) {

    .verjaardagGallery  {
        margin: 40px auto;
    }

}

/* */

.galleryGridWrapperVerjaardag{
    display: grid;
    grid-template-columns: 33.33% 33.33% 33.33%;
    grid-gap: 10px;
    grid-template-rows: minmax(220px, auto);
    grid-auto-rows: minmax(220px, auto);
}

/* repeat(3, 1fr) */

@media only screen and (max-width: 667px) {

    .galleryGridWrapperVerjaardag{
        display: grid;
        grid-template-columns: auto;
        grid-gap: 10px;
        grid-auto-rows: minmax(300px, auto);
    }

}

.galleryVerjaardagGridOne {
    grid-column-start: 1;
    grid-column-end: 1;
    grid-row-start: 1;
    grid-row-end: 3;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}
.galleryVerjaardagGridTwo {
    grid-column-start: 2;
    grid-column-end: 4;
    grid-row-start: 1;
    grid-row-end: 3;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}
.galleryVerjaardagGridThree {
    grid-column: 1;
    grid-row: 3;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}
.galleryVerjaardagGridFour {
    grid-column-start: 2;
    grid-column-end: 2;
    grid-row-start: 3;
    grid-row-end: 5;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}
.galleryVerjaardagGridFive {
    grid-row: 3;
    grid-column: 3;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}
.galleryVerjaardagGridSix {
    grid-column-start: 1;
    grid-column-end: 1;
    grid-row-start: 4;
    grid-row-end: 4;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;

}

.galleryVerjaardagGridSeven {
    grid-column-start: 3;
    grid-column-end: 3;
    grid-row-start: 4;
    grid-row-end: 4;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}



@media only screen and (max-width: 667px) {


    .galleryVerjaardagGridOne {
        grid-column: 1 ;
        grid-row: 1;
        height: 400px;
    }
    .galleryVerjaardagGridTwo {
        grid-column: 1 ;
        grid-row: 2 ;
    }
    .galleryVerjaardagGridThree {
        grid-column: 1 ;
        grid-row: 3 ;
    }
    .galleryVerjaardagGridFour {
        grid-column: 1 ;
        grid-row: 4;
        height: 400px;
    }
    .galleryVerjaardagGridFive {
        grid-column: 1 ;
        grid-row: 5;
    }
    .galleryVerjaardagGridSix {
        grid-column: 1 ;
        grid-row: 6;
    }

    .galleryVerjaardagGridSeven {
        grid-column: 1 ;
        grid-row: 7;
    }



}

/* */

.extraVerjaardag {
    padding: 30px 20px;
}

.verjaardagOptieHolder,
.verjaardagPakketHolder {
    background-color: var(--light-red);
    margin: 20px;
}

.verjaardagPakketOptionsTitelBlock,
.verjaardagPakketTitelBlock {
    background-color: var(--red);
    padding: 10px 20Px;
}

h2.verjaardagPakketOptionsTitel,
h2.verjaardagPakketTitel {
    text-align: center;
    color: var(--white);
    font-size: 20px;
}

.verjaardagPakketOptionsContentBlock,
.verjaardagPakketContentBlock {
    padding: 20px;
}


h2.verjaardagRegelsOptionsTitel {
    text-align: center;
    font-size: 16px;
}

.verjaardagCtaHolder {
    padding: 50px 20px;
    margin-bottom: 50px;
    background-color: var(--light-red);
}


/* faq */

.faqBanner {
    margin-top: -180px;
    z-index: -1;
    height: 180px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50% 100%;
}

div#faqBlock {
    margin: 40px;
}

.faqHolder {
    padding: 20px;
}

p.faqQuestTit{
    display: inline-block;
    font-weight: 700;
}

.faqQuestionHolder {
    padding: 10px 20px;
    background-color: var(--light-red);
}

.faqAnswer{
    display: none;
}


/* CPT gallery - custom post type */

.grid-gallery{
    font-size: 0;
}

.galleryPortfolio{
    position: relative;
    padding: 0;
    margin:10px;
}

.overlayGallery {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(23, 11, 11, 0.85);
    overflow: hidden;
    width: 0;
    height: 100%;
    transition: .5s ease;
    cursor: pointer;
}

.galleryPortfolio:hover .overlayGallery  {
    width: 100%;
}

.black-bg-tile h5{
    line-height: 1;
    margin: 0;
    padding: 0;
    color: var(--white);
    font-size: 14px;
    font-weight: 500;
    text-transform: uppercase;
    cursor: pointer;
}

.text {
    color: white;
    font-size: 20px;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    white-space: nowrap;
}



.icon-hover {
    color: white;
    font-size: 20px;
    position: absolute;
    top: 35%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    white-space: nowrap;
    cursor: pointer;
}

img.icon-hover{
    width: 100px;
    height: auto;
    cursor: pointer;
}


.btn-hover {
    font-size: 12px;
    position: absolute;
    top: 65%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    white-space: nowrap;
    cursor: pointer;
    padding: 6px 12px;
}

.btn-overlay{
    color: var(--white);
    background-color: var(--red);
    border: none;
}

.down-push{
    position: relative;
    height: 40px;
    width: 100%;

}

.smallerName{
    font-size: 14px;
}

/* gallery cta block*/

.generalCtaBlock {
    background-color: var(--light-red);
    padding: 40px 20Px;
}

.galleryImage{
    height: 400px;
    background-color: var(--white);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50% 50%;
    margin: 5px;
}

.galleryFrame{
    font-size: 0;
}


/* inline voor gallery Single EENVOUDIGER */

[class*="gallery-inline-block-"] {
    display: inline-block;
    vertical-align: top;
}

.gallery-inline-block-100{
    width: 100%;
}

.gallery-inline-block-80{
    width: 80%;
}

.gallery-inline-block-75{
    width: 75%;
}

.gallery-inline-block-66{
    width: 66.66%;
}

.gallery-inline-block-60{
    width: 60%;
}

.gallery-inline-block-50{
    width: 50%;
}

.gallery-inline-block-40{
    width: 40%;
}

.gallery-inline-block-33{
    width: 33.33%;
}

.gallery-inline-block-25{
    width: 25%;
}

.gallery-inline-block-20{
    width: 20%;
}

.gallery-inline-block-16{
    width: 16.66%;
}

.gallery-inline-block-8{
    width: 8.33%;
}

@media only screen and (max-width: 834px) {

    [class*="gallery-inline-block-"] {
        display: inline-block;
        vertical-align: top;
        margin: 0;
        width: 100%;
    }
    
    .gallery-inline-block-80{
    width: 50%;
}

    .gallery-inline-block-75{
    width: 50%;
    }

    .gallery-inline-block-66{
    width: 66.66%;
    }
    
    .gallery-inline-block-60{
    width: 100%;
    }
    
    .gallery-inline-block-40{
    width: 50%;
        }

    .gallery-inline-block-33{
        width: 33.33%;
    }

    .gallery-inline-block-25{
        width: 50%;
    }

    .gallery-inline-block-20{
        width: 50%;
    }

    .gallery-inline-block-16{
        width: 50%;
    }

    .gallery-inline-block-8{
        width: 50%;
    }

}


@media only screen and (max-width: 414px) {

    [class*="gallery-inline-block-"] {
        display: inline-block;
        vertical-align: top;
        margin: 0;
        width: 100%;
    }

    .gallery-inline-block-20{
        width: 50%;
    }

    .gallery-inline-block-16{
        width: 50%;
    }

    .gallery-inline-block-8{
        width: 50%;
    }

}

div#grid-gallery {
    margin: 40px 20px;
    position: relative;
}

h5.klimTileBottom {
    text-align: center;
    text-transform: uppercase;
}

.klim-bottom-tile {
    background-color: var(--light-red);
    padding: 10px 20px;
    margin-top: -15Px;
}


h1.agendaTitle {
     text-align: center;
 }

#agenda{
    font-size: 0;
    margin: 20px;
}

.agendaBlock{
    display: inline-block;
    width: 33%;
    vertical-align: top;
    margin-top: 20px;
}

div#eventCal {
    max-width: 900px;
    margin: 40px auto;
    display:none;
}

div#eventCalBtn {
    width: 20%;
    color: var(--white);
    background-color: var(--red);
    margin: 30px auto;
    text-align: center;
    padding: 8px 16px;
}

.Event_tekst_block {
    background-color: var(--pinky);
    padding: 30px;
}

.homeIntroWysiwyg {
    margin-top: 20px;
}

.full_image_block {
    background-color: var(--pinky);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.EventIntroBlock {
    margin: 40px 40px 0 40px;
    max-width: 1120px;
}

@media only screen and (min-width: 1200px){

    .EventIntroBlock {
        margin: 40px auto 0 auto;
    }

}


div#lessenCal {
    margin: 40px;
    max-width: 900px;
}


span.simcal-event-title {
    font-size: 13px;
}



@media only screen and (min-width: 980px){

    div#lessenCal {
        margin: 40px auto;
    }

    span.simcal-event-title {
        font-size: 15px;
    }


}

@media only screen and (max-width: 834px) {

    .simcal-default-calendar-grid .simcal-events > .simcal-event {
        font-size: 12px;
    }

}


.full_image_block {
    min-height: 300px;
}


/* contact page grid */

.solid-contact-grid-block{
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: auto;
    margin: 50px 0;
    padding: 5px 20px 30px 20px;
}

.contactPageTitleHolderGrid{

    grid-column: 1 / 6;
    grid-row: 1 ;

}

.solid-contact-form-grid1{

    grid-column: 1 / 3;
    grid-row: 2 ;
    background-color: var(--black);

}

.solid-contact-form-grid2{

    grid-column: 1 / 3;
    grid-row: 3 ;
    background-color: var(--black);
    min-height: 200px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.solid-contact-form-grid3{

    grid-column: 3 / 6;
    grid-row: 2 / 4 ;

}

@media only screen and (max-width: 667px) {

    .solid-contact-grid-block{
        grid-template-columns: repeat(1, 1fr);
    }

    .contactPageTitleHolderGrid{

        grid-column: 1;
        grid-row: 1 ;

    }

    .solid-contact-form-grid1{

        grid-column: 1;
        grid-row: 3 ;

    }

    .solid-contact-form-grid2{
        grid-column: 1;
        grid-row: 4 ;
        min-height: 300px;

    }

    .solid-contact-form-grid3{

        grid-column: 1;
        grid-row: 2 ;

    }

}

p.contactPageSubTitle {
    margin-bottom: 40px;
}



.lessenBanner {
    margin-top: -5px;
    z-index: -1;
    height: 500px;
    background-color: var(--white);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50% 50%;
}

@media only screen and (max-width: 667px) {

    .lessenBanner {
        margin-top: -225px;
        z-index: -1;
        height: 600px;
    }

}


/* LESSEN GALLERY */

.galleryGridWrapperLessen{
    display: grid;
    grid-template-columns: repeat(6, 1fr);;
    grid-gap: 10px;
    grid-template-rows: minmax(220px, auto);
    grid-auto-rows: minmax(220px, auto);
}

/* repeat(3, 1fr) */

@media only screen and (max-width: 667px) {

    .galleryGridWrapperLessen{
        display: grid;
        grid-template-columns: auto;
        grid-gap: 10px;
        grid-auto-rows: minmax(300px, auto);
    }

}

.galleryLessenGridOne {
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: 1;
    grid-row-end: 3;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}
.galleryLessenGridTwo {
    grid-column-start: 3;
    grid-column-end: 7;
    grid-row-start: 1;
    grid-row-end: 3;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}
.galleryLessenGridThree {
    grid-column-start: 4;
    grid-column-end: 5;
    grid-row-start: 3;
    grid-row-end: 5;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}
.galleryLessenGridFour {
    grid-column-start: 5;
    grid-column-end: 7;
    grid-row-start: 3;
    grid-row-end: 6;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}
.galleryLessenGridFive {
    grid-column-start: 1;
    grid-column-end: 5;
    grid-row-start: 3;
    grid-row-end: 5;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}
.galleryLessenGridSix {
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: 5;
    grid-row-end: 5;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;

}

.galleryLessenGridSeven {
    grid-column-start: 3;
    grid-column-end: 5;
    grid-row-start: 5;
    grid-row-end: 5;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}



@media only screen and (max-width: 667px) {


    .galleryLessenGridOne {
        grid-column: 1 ;
        grid-row: 1;
        height: 400px;
    }
    .galleryLessenGridTwo {
        grid-column: 1 ;
        grid-row: 2 ;
    }
    .galleryLessenGridFour {
        grid-column: 1 ;
        grid-row: 3;
        height: 400px;
    }
    .galleryLessenGridFive {
        grid-column: 1 ;
        grid-row: 4;
    }
    .galleryLessenGridSix {
        grid-column: 1 ;
        grid-row: 5;
    }

    .galleryLessenGridSeven {
        grid-column: 1 ;
        grid-row: 6;
    }

}

.lessenGalleryTitleHolder {
    margin: 40px 30px;
}

.knopLessenHolder {
    margin: 50px 30px;
}

.knopLessen {
    width: 250px;
    text-align: center;
    background-color: var(--red);
    padding: 12px 16px;
    color: var(--white);
    margin-left: auto;
    margin-right: auto;
    box-shadow: var(--box-shadow);
}

.knopLessen:hover {
    background-color: var(--red-dark);
}

.solid-container-lessen {
    margin: 80px 30px;
}

.lessenIntroductie{
    max-width: 1120px;
    margin: 40px;
}

@media only screen and (min-width: 1200px) {

    .lessenIntroductie{
        margin: 40px auto;
    }

}

@media only screen and (max-width: 667px) {

    .lessenIntroductie{
        margin: 40px 20px;
    }

    .knopLessenHolder {
        margin: 50px 20px;
    }

}

.solid-inline-block-100.knopHolderLes {
    margin-top: 40px;
}


/* GROEP GALLERY */

/* LESSEN GALLERY */

.galleryGridWrapperGroepen{
    display: grid;
    grid-template-columns: repeat(6, 1fr);;
    grid-gap: 10px;
    grid-template-rows: minmax(220px, auto);
    grid-auto-rows: minmax(220px, auto);
}

/* repeat(3, 1fr) */

@media only screen and (max-width: 667px) {

    .galleryGridWrapperGroepen{
        display: grid;
        grid-template-columns: auto;
        grid-gap: 10px;
        grid-auto-rows: minmax(300px, auto);
    }

}

.galleryGroepenGridOne {
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: 1;
    grid-row-end: 3;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}
.galleryGroepenGridTwo {
    grid-column-start: 3;
    grid-column-end: 5;
    grid-row-start: 1;
    grid-row-end: 1;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}
.galleryGroepenGridThree {
    grid-column-start: 5;
    grid-column-end: 7;
    grid-row-start: 1;
    grid-row-end: 3;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}
.galleryGroepenGridFour {
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: 3;
    grid-row-end: 3;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}
.galleryGroepenGridFive {
    grid-column-start: 3;
    grid-column-end: 5;
    grid-row-start: 2;
    grid-row-end: 4;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}
.galleryGroepenGridSix {
    grid-column-start: 5;
    grid-column-end: 7;
    grid-row-start: 3;
    grid-row-end: 4;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;

}

.galleryGroepennGridSeven {
    grid-column-start: 3;
    grid-column-end: 5;
    grid-row-start: 5;
    grid-row-end: 5;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}



@media only screen and (max-width: 667px) {


    .galleryGroepenGridOne {
        grid-column: 1 ;
        grid-row: 1;
        height: 400px;
    }
    .galleryGroepenGridTwo {
        grid-column: 1 ;
        grid-row: 2 ;
    }
    .galleryGroepenGridFour {
        grid-column: 1 ;
        grid-row: 3;
        height: 400px;
    }
    .galleryGroepenGridFive {
        grid-column: 1 ;
        grid-row: 4;
    }
    .galleryGroepenGridSix {
        grid-column: 1 ;
        grid-row: 5;
    }

    .galleryGroepenGridSeven {
        grid-column: 1 ;
        grid-row: 6;
    }

}

.breadcrumbs {
    margin: 10px 30px;
}

/* filter */


.filterBtn{
    color: #ffffff;
    background-color: var(--dark);
    border: none;
    padding: 12px 20px;
    margin: 10px 4px;
    text-transform: uppercase;
    outline: none;
}

.tagKnopStyle{
    color: #ffffff;
    background-color: var(--dark);
    border: none;
    padding: 8px 16px;
    margin: 6px 2px;
    font-size: 12px;
    text-transform: uppercase;
    outline: none;

}

div#filterContainer {
    width: 100%;
    margin: 10px auto;
    text-align: center;
}


.filterBtn:hover,
.filterBtn:hover
{
    color: var(--white);
    background-color: var(--brown);
    -moz-box-shadow: 3px 3px 4px 1px rgba(138,138,138,0.3);
    box-shadow: 3px 3px 4px 1px rgba(138,138,138,0.3);
}

div.fasCheck {
    display: inline-block;
    width: 10px;
    color: var(--white);
    margin-left: 6px;
}

.gallery-cat{
   display: none;
}

.noFilterSelection{
    display: none;
}

/* Lessen single */

.lessenGrid {
    display: grid;
    grid-template-columns: 1fr 3fr;
}


.lessenGrid-item01{
    grid-column: 1/3;
    grid-row: 1;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    height: 250px;
}

.lessenGrid-item02{
    padding: 20px 5px;
    background-color: var(--pinky);
    grid-column: 1;
    grid-row: 2;
}
.lessenGrid-item03{
    padding: 20px 5px;
    background-color: var(--pinky);
    grid-column: 1;
    grid-row: 3;
}
.lessenGrid-item04{
    padding: 20px 5px;
    background-color: var(--pinky);
    grid-column: 1;
    grid-row: 4;
}
.lessenGrid-item05{
    padding: 20px 5px;
    background-color: var(--pinky);
    grid-column: 1;
    grid-row: 5;
}
.lessenGrid-item06{
    padding: 20px 5px;
    background-color: var(--pinky);
    grid-column: 1;
    grid-row: 6;
}
.lessenGrid-item07{
    padding: 30px;
    grid-column: 2;
    grid-row: 2/6;
}

.lessenGrid-item08{
    padding: 30px;
    grid-column: 2;
    grid-row: 7;
}

.lessenGrid-item09{
    background-color: var(--pinky);
    grid-column: 1;
    grid-row: 7;
}

.lesGever {
    text-align: center;
}
.lessenPracticalTitel {
    text-align: center;
    font-weight: 400;
    color: var(--red);
}


span.material-icons.locationLesIcon,
span.material-icons.lesDatumIcon,
span.material-icons.lesTariefIcon{
    font-size: 16px;
    vertical-align: text-bottom;
    display: block;
    margin: 0 auto 6px auto;
    color: var(--black-brown);
}

span.material-icons.lesgeverIcon {
    font-size: 20px;
    vertical-align: text-bottom;
    display: block;
    margin: 0 auto 6px auto;
    color: var(--black-brown);
}

@media only screen and (max-width: 667px) {
    .lessenGrid {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .lessenGrid-item01{
        grid-column: 1/3;
        grid-row: 1;
    }

    .lessenGrid-item02{
        grid-column: 1/3;
        grid-row: 2;
    }
    .lessenGrid-item03{
        grid-column: 1;
        grid-row: 3/5;
    }
    .lessenGrid-item04{
        grid-column: 2;
        grid-row: 3;
    }
    .lessenGrid-item05{
        grid-column: 2;
        grid-row: 4;
    }
    .lessenGrid-item06{
        grid-column: 1/3;
        grid-row: 5;
    }
    .lessenGrid-item07{
        grid-column: 1/3;
        grid-row: 6;
    }

    .lessenGrid-item08{
        grid-column: 1/3;
        grid-row: 7;
    }

    .lessenGrid-item09{
        display: none;
    }



}

@media only screen and (max-width: 414px) {

    .lessenGrid {
        display: grid;
        grid-template-columns: 1fr;
    }

    .lessenGrid-item01{
        grid-column: 1;
        grid-row: 1;
    }

    .lessenGrid-item02{
        grid-column: 1;
        grid-row: 2;
    }
    .lessenGrid-item03{
        grid-column: 1;
        grid-row: 3;
    }
    .lessenGrid-item04{
        grid-column: 1;
        grid-row: 4;
    }
    .lessenGrid-item05{
        grid-column: 1;
        grid-row: 5;
    }
    .lessenGrid-item06{
        grid-column: 1;
        grid-row: 6;
    }
    .lessenGrid-item07{
        grid-column: 1;
        grid-row: 7;
    }

    .lessenGrid-item08{
        grid-column: 1;
        grid-row: 8;
    }


}


button.btn.btn-red.btn-cta-lessen {
    display: block;
    margin: 30px auto 0 auto;
}



img.lessenImageLesgever {
    width: 130px;
    border-radius: 75px;
    display: block;
    height: auto;
    margin: 15px auto 0 auto;
}

.lesDatum,
.lesTarief,
.lesLocatie,
.lesGever {
    text-align: center;
    margin-top: 15px;
}

.titleLes {
    margin-top: 90px;
}

.titleLes h1{
    color: var(--txt-color);
    /*text-shadow: 2px 1px 3px rgba(172, 150, 150, 0.77);*/
    text-transform: uppercase;
}

.basicBannerPinky {
    height: 100px;
    margin-top: -100px;
    margin-bottom: 50px;
    background-color: var(--pinky);
}

.lessenBannerArchive {
    margin-top: -50px;
    z-index: -1;
    height: 500px;
    background-color: var(--white);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50% 50%;
}

@media only screen and (max-width: 835px) {

    .basicBannerPinky {
        height: 120px;
        margin-top: -120px;
    }

    .lessenBannerArchive {
        margin-top: -50px;
    }

}

.solid-container-lessen2 {
    padding-top: 160px;
}


/* lessen archive */
.lessenOverViewGridItem {
    height: 200Px;
}


.lessenOverViewGrid{
    display: grid;
    grid-template-columns: 1fr 1fr;
}


.lessenOverViewGrid-Item01{
    padding: 30px;
    background: var(--pinky);
    grid-column: 1;
    grid-row: 1;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    min-height: 350px;
}

.lessenOverViewGrid-Item02{
    padding: 30px;
    background-color: var(--pinky);
    grid-column: 2;
    grid-row: 1;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    min-height: 350px;
}

.solid-lessen-holder {
    margin: 50px 0;
}

h2.klim-single-titel_lessen {
    text-transform: uppercase;
}

.lesDatumTekst{
    text-transform: uppercase;
}


span.material-icons.locationLesIcon2,
span.material-icons.lesDatumIcon2,
span.material-icons.lesTariefIcon2,
span.material-icons.lesgeverIcon2 {
    font-size: 20px;
    vertical-align: text-bottom;
    margin: 0 10px 0 0;
    color: var(--red);
}

.single-datum {
    padding-top: 20px;
}

.single-locatie {
    margin-top: 20px;
}

.klimT-single-lesgever {
    margin-top: 20px;
}

.klim-single-datum-self {
    margin-top: 20px;
}

.single-short_content {
    margin-top: 30px;
}
.single-lesgever span,
.single-locatie span,
.klim-single-datum span {
    font-weight: 400;
}

@media only screen and (max-width: 835px) {

    .lessenOverViewGrid{
        display: grid;
        grid-template-columns: 1fr;
    }

    #mobileGrid1,
    .mobileGrid1{
        grid-column: 1;
        grid-row: 1;
    }

    #mobileGrid2,
    .mobileGrid2{
        grid-column: 1;
        grid-row: 2;
    }

    /* */

    h2.klim-single-titel_lessen {
        text-align: center;
    }

    .klim-single-short_content h1,
    .klim-single-short_content h2,
    .klim-single-short_content h3,
    .klim-single-short_content h4,
    .klim-single-short_content span,
    .klim-single-short_content a,
    .klim-single-short_content p {
        text-align: center;
    }

    .single-datum {
        text-align: center;
    }

    .single-locatie {
        text-align: center;
    }

    .single-lesgever {
        text-align: center;
    }

    .klimT-single-lesgever {
        text-align: center;
    }

    .btn-small.btn-red.btn-link-single-les {
        display: block;
        width: 200px;
        margin: 5px auto;
    }

}

span.material-icons.moreDetailsLes {
    font-size: 22px;
    vertical-align: text-bottom;
}


/* carousel single gallery */


img.klimkaffeeCarouselImgMobile{
    display: none;
}

img.klimkaffeeCarouselHeadImg {
    max-height: 680px;
    width: auto;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.KlimKaffeeGalleryImgBlock {
    background-color: var(--black);
}

@media only screen and (max-width: 835px) {

    img.klimkaffeeCarouselImgMobile{
        display: block;
    }

    img.klimkaffeeCarouselHeadImg{
        display: none;
    }

}


div.slickArrowBgBottomBack {
    display: block;
    position: absolute;
    z-index: 1;
    left: 10px;
    top: 50%;
    margin-top: -13px;
    /*background-color: rgba(255, 255, 255, 0.44);*/
    width: 25px;
    height: 25px;
    border-radius: 50%;
}

div.slickArrowBgBottomNext{
    display: block;
    position: absolute;
    z-index: 1;
    right: 10px;
    top: 50%;
    margin-top: -13px;
    /*background-color: rgba(255, 255, 255, 0.44);*/
    width: 25px;
    height: 25px;
    border-radius: 50%;
}


.slickArrowBgTopNext.slick-arrow {
    position: absolute;
    display: block;
    z-index: 1;
    background-color: rgba(255, 255, 255, 0.5);
    top: 50%;
    margin-top: -18px;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    left: 10px;
}

.slickArrowBgTopBack.slick-arrow {
    position: absolute;
    display: block;
    z-index: 1;
    background-color: rgba(255, 255, 255, 0.5);
    top: 50%;
    margin-top: -18px;
    height: 25px;
    border-radius: 50%;
    right: 10px;
}

span.material-icons.nextSlickTop,
span.material-icons.backSlickTop {
    color: var(--red);
    cursor: pointer;
}


.solid-carousel-holder{
    max-width: 1020px;
    margin: 20px 40px;
}

@media only screen and (min-width: 1100px) {

    .solid-carousel-holder{
        margin: 20px auto;
    }

}


@media only screen and (max-width: 834px) {

    .solid-carousel-holder{
        margin: 20px 30px;
    }

}

@media only screen and (max-width: 667px) {

    .solid-carousel-holder{
        margin: 20px 20px;
    }


}

@media only screen and (max-width: 414px) {

    .solid-carousel-holder{
        margin: 20px 10px;
    }
}


span.material-icons.nextSlickBottom {
    z-index: 1;
    color: var(--white);
    cursor: pointer;
}

span.material-icons.backSlickBottom {
    z-index: 2;
    color: var(--white);
    cursor: pointer;
}

.GalleryIntroTitle {
    margin-top: 50px;
    margin-bottom: 40px;
}

img.klimkaffeeOverlay {
    position: absolute;
    max-height: 350px;
    width: 150px;
    bottom: 0;
}

img.klimkaffeeOverlayRight {
    max-height: 420px;
    height: auto;
    width: auto;
    position: absolute;
    right: 0;
}

@media only screen and (min-width: 1200px) {

    img.klimkaffeeOverlayRight {
        max-height: 100%;
        height: 100%;
        width: auto;
        position: absolute;
        right: 0;
    }
}

div.klimkaffeeVorm03 {
    background-color: #FFF;
    width: 100px;
    height: 50px;
    z-index: 3;
    position: absolute;
    left: 0;
    top: -40px;
    transform: skewY(-15deg);
}

@media only screen and (max-width: 414px) {

    img.klimkaffeeOverlayRight {
        width: 50px;
        height: 450px;
    }

    img.klimkaffeeOverlay {
        position: absolute;
        max-height: 350px;
        width: 90px;
        bottom: 0;
    }
}

div#websiteLive #timer {
    font-size: 25px;
    text-align: center;
}

@media only screen and (min-width: 1200px) {

    div#websiteLive #timer {
        font-size: 2vw;
        width: 60%;
    }
}


.solid-container-homeTemp{
    padding: 80px 40px 20px 40px;
}

@media only screen and (min-width: 1200px) {

    .solid-container-homeTemp{
        padding-top: 80px;
        padding-bottom: 20px;
    }

}

@media only screen and (max-width: 834px) {

    .solid-container-homeTemp{
        padding: 150px 30px 20px 30px;
    }

}

@media only screen and (max-width: 667px) {

    .solid-container-homeTemp{
        padding: 170px 30px 20px 30px;
    }

}

@media only screen and (max-width: 414px) {

    .solid-container-homeTemp{
        padding: 180px 20px 20px 20px;
    }

}

div#timer{
    display: block;
    width: 50%;
    background-color: rgba(237, 228, 229, 0.46);
    padding: 20px;
    margin: 10px auto;
}

@media only screen and (max-width: 667px) {

    div#timer{
        display: block;
        width: 70%;
        padding: 20px;
        margin: 10px auto;
    }

}

@media only screen and (max-width: 414px) {

    div#timer{
        display: block;
        width: 90%;
        padding: 20px;
        margin: 10px auto;
    }

}


/* breadcrumbs */

p#breadcrumbs span,
p#breadcrumbs span a,
p#breadcrumbs a,
p#breadcrumbs {
    font-size: 15px;
}

.breadcrumbs {
    max-width: 1120px;
    margin: 10px 40px;
    cursor: pointer;
}

@media only screen and (max-width: 414px) {
    .breadcrumbs {
        margin: 10px 10px;
    }
}

@media only screen and (min-width: 1200px) {
    .breadcrumbs {
        margin: 10px auto;
    }
}

h1.entry-title-404 {
    text-align: center;
}
.intro-text-404 {
    text-align: center;
}

.page-content-error {
    text-align: center;
}


/* correcties */

@media only screen and (max-width: 834px){
    
    .homeBannerEventBlock {
    display: block;
    }
    
    .homeBannerEventBlock {
    width: 80%;
    background-color: var(--gray);
    margin: 30px auto 20px auto;
    box-shadow: var(--box-shadow);
    }
    
    .solid-inline-block-35 {
    display: inline-block;
    vertical-align: top;
    width: 100%;
    }
    
    div#homeShowOneSub, 
    div#homeShowOne {
    text-align: center;
    }
    
    .btn-home-banner {
    display: block;
    margin: 20px auto;
    }
    
    
}

@media only screen and (max-width: 500px){
    
    .homeBannerEventBlock {
    width: 90%;
    }
    
    
}


.btn-primary {
    color: #fff;
    background-color: var(--red);
    border-color: var(--red);
}


.btn-primary:hover {
    color: #fff;
    background-color: var(--red-dark);
    border-color: var( --red-dark);
}