.hidden{width: 0; height: 0; overflow: hidden;}

.loader {
  position: fixed;
  left: 50%;
  top: 50%;
  margin-top: -1.25em;
  margin-left: -1.25em;
    border: 0.15em solid #1B1B1B; /* Light grey */
    border-top: 0.15em solid #C58D43; /* Blue */
    border-radius: 50%;
    width: 2.5em;
    height: 2.5em;
    -webkit-animation: spin 0.4s linear infinite;
            animation: spin 0.4s linear infinite;

}

header{position: relative; z-index: 8; background-image: url("../img/example1.jpgg"); background-size: cover; background-position: center; height:70vw; min-height: 40vw; max-height: calc(100vh - 4.4em); }
  .header1 header{background-image: url("../img/example1.jpg");}
  .header2 header{background-image: url("../img/example1.jpg");}
  .header3 header{background-image: url("../img/example1.jpg");}

@-webkit-keyframes spin {
    0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
    100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}

@keyframes spin {
    0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
    100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}

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

b{
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'hore' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.hore-youtube:before {
  content: "\e908";
  font-size: 1.15em;

}

b.hore-youtube{margin-top: -0.2em; position: relative; float: left;}

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

i, .hamburger {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'horecare' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.horecare-beeldmerk:before {
  content: "\e900";
  font-size: 2em;

}
.horecare-woordmerk:before {
  content: "\e907";
}
.horecare-facebook-logo:before {
  content: "\e901";
}
.horecare-instagram-logo:before {
  content: "\e902";
}
.horecare-linkedin-logo:before {
  content: "\e903";
}
.horecare-mijn-horecare:before {
  content: "\e904";
}
.horecare-pijl-links:before {
  content: "\e905";
}
.horecare-pijl-rechts:before {
  content: "\e906";
}

.hamburger:before, .horecare-menu:before {
  content: "\e908";
}
.horecare-expand:before {
  content: "\e909";
}



@font-face {
    font-family: 'horecare-l';
    src: url('../fonts/horecare-l.woff2') format('woff2'),
         url('../fonts/horecare-l.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}


@font-face {
    font-family: 'horecare-b';
    src: url('../fonts/horecare-b.woff2') format('woff2'),
         url('../fonts/horecare-b.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike,  sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
  margin: 0px;
  padding: 0;
  border: 0;
  outline: 0;
  font-weight: inherit;
  font-style: inherit;
  font-family: inherit;
  vertical-align: baseline;
  list-style:none;

}

body {

  font-family: "horecare-l", Arial, Helvetica;
  font-size:14px;
  line-height:1.6em;
  color:#1B1B1B;
  font-weight: 400;
  background-color: #fff;
  overflow-y: scroll; /* has to be scroll, not auto */
  overflow-x: hidden;
  letter-spacing: 0.1em;
  -webkit-overflow-scrolling: touch;

}



input, textarea{font-family: "horecare-l", Arial, Helvetica; font-size: 1em; border:1px solid #515151; color: #a1a1a1; border-radius:2px; padding: 0.3em 0.5em;box-sizing: border-box;}
input[type=text]:focus, textarea:focus {
  box-shadow:none;
  outline: none;
  box-sizing: border-box;
}

input[placeholder], [placeholder], *[placeholder] {
    color: #1a1a1a !important;
}

a{color: #1B1B1B; text-decoration: none;  font-family: 'horecare-l', Arial, Helvetica;}
p a{color: #C58D43;}

article p{ text-align: justify;
    -moz-text-align-last: left; /* Code for Firefox */
    text-align-last: left;
}

article ul{position: relative; float: left; width: 100%; margin-bottom: 1em;}
article ul li{position: relative; float: left; width: 94%; padding-left: 6%; margin-bottom: 0.5em;}
article ul li::before{position: absolute; left:0; width: 0.5em; height: 0.5em; line-height: 1em; margin-top: 0.5em; background-color: #C58D43; content: ""; display: block;}

i, cite, em, var, dfn {
    font-style:normal;
}
b, strong {font-weight: 400; font-family: "horecare-b", Arial, Helvetica;}

p{position:relative; width: 100%; display: block; float: left; margin-bottom: 1.6em;  }
p:last-child{margin-bottom: 0;}

ul, li{position: relative;  display: inline-block;}


img{position: relative; float: left; width: 100%; display: block;}
p img{margin: 1em 0;}

section, header, main, footer, article{position: relative; float: left; width: 100%; display: block; box-sizing:border-box;}
.b10{width: 10%;}
.b20{width: 20%;}
.b25{width: 25%;}
.b75{width: 75%;  ;}
.b50{width: 50%;}
.b33{width: 33.33%;}
.b66{width: 66.66%;}
.b100{width: 100%;}

.videoWrapper {
  position: relative;
  float: left;
  width: 100%;
  padding-bottom: 56.25%; /* 16:9 */
  margin-bottom: 3em;
  height: 0;
}
.videoWrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.middle{left:50%; top: 50%; -webkit-transform:translateY(-50%) translateX(-50%); -ms-transform:translateY(-50%) translateX(-50%); transform:translateY(-50%) translateX(-50%);}
.acenter{text-align: center;}

/* basics */

h1, h2, h3, h4, h5, h6{ position: relative; float: left; width: 100%; font-family: "horecare-b", Arial, Helvetica; font-weight:400; letter-spacing: 0.15em; line-height: 1.2em;  }
h1{font-size:2.2em; line-height: 1.2em;  }
h2{font-size:2.6em; line-height: 1.2em;  text-transform: lowercase; letter-spacing: 0.09em; margin: 0em 0 0.9em; }
h3{font-size:1.45em; line-height: 1.2em; letter-spacing: 0.09em; margin-bottom: 0.8em;}
h4{font-size:1.1em; line-height: 1.2em; letter-spacing: 0.09em;font-family: "horecare-l", Arial, Helvetica;}
h5{font-size:1em; line-height: 2.2em; letter-spacing: 0.09em;}
h2.tussenkop{margin: 0em 0 0.5em; font-size: 2em; }

/* blocks*/

.container{ margin-top: 4.4em; transition: -webkit-transform 0s cubic-bezier(0.77, 0, 0.175, 1);transition: transform 0s cubic-bezier(0.77, 0, 0.175, 1);transition: transform 0s cubic-bezier(0.77, 0, 0.175, 1), -webkit-transform 0s cubic-bezier(0.77, 0, 0.175, 1); opacity: 0; background-color: #fff; overflow: hidden; }
.animate .container{opacity: 1; transition:opacity 1s ease ;}
.animate .loader{opacity: 0;transition:opacity 0.4s ease;}


/* kleuren balk*/

.color0 .logo .horecare-woordmerk{ color: #fff; transition:color 0.3s ease 0.1s;}
.color1 .logo .horecare-woordmerk{ color: #1B1B1B; transition:color 0.3s ease;}
.color2 .logo .horecare-woordmerk{ color: #1B1B1B; transition:color 0.3s ease;}
.color3 .logo .horecare-woordmerk{ color: #1B1B1B; transition:color 0.3s ease;}
.color4 .logo .horecare-woordmerk{ color: #1B1B1B; transition:color 0.3s ease;}
.color5 .logo .horecare-woordmerk{ color: #1B1B1B; transition:color 0.3s ease;}
.color6 .logo .horecare-woordmerk{ color: #1B1B1B; transition:color 0.3s ease;}
.color7 .logo .horecare-woordmerk{ color: #1B1B1B; transition:color 0.3s ease;}
.color8 .logo .horecare-woordmerk{ color: #1B1B1B; transition:color 0.3s ease;}

/* kleuren vlakken*/

.white{   background:none;  }
.klein .white{padding-top: 4.4em; margin-top: -4.4em;}
.breed{position: relative;margin: 0 auto; width:40em; min-height: 1px; float: none;  display: block;}

.z{z-index: 10;}
.z2{z-index: 6;}
.logo{position: relative; float: left; width: 100%; clear: both; width: 8em; height: 2em; display: block; margin-bottom: 2.2em; font-size: 1.2em; cursor: pointer;}
.logo .horecare-woordmerk{position: relative; top: -0.5em; left: 0.5em; color: #1B1B1B;}
.logo .horecare-beeldmerk{color: #C58D43;}
.mainmenu{position:fixed; left: 4em; z-index: 9; top:4em; width: 12em; margin: 0; text-align: left; font-size: 1em; letter-spacing: 0.12em; text-transform: lowercase;  transition:color 0.3s ease; color: #C58D43;
    -webkit-user-select: none; /* Safari */ /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}
.mainmenu ul{position: relative; float: left; width: 100%; clear: both;}
.mainmenu li{position: relative; float: left; clear: both; margin: 0; cursor: pointer; line-height: 2em;}
.mainmenu li a{color: #fff;}
.mainmenu li:before{position: absolute; left: -11em; top:1em; width: 10em; height: 1px;  content: ""; background-color: #C58D43; -webkit-transform:translateX(-10em); -ms-transform:translateX(-10em); transform:translateX(-10em); transition: -webkit-transform 0.3s ease; transition: transform 0.3s ease; transition:transform 0.3s ease, -webkit-transform 0.3s ease;}
.mainmenu li.active:before{position: absolute; left: -11em; top:1em; width: 10em; height: 1px;  content: ""; background-color: #C58D43; -webkit-transform:translateX(0); -ms-transform:translateX(0); transform:translateX(0);}
.mainmenu li.active a{color: #C58D43;}
.mainmenu ul li.active{color: #C58D43; }
.mijnhorecare{position: absolute; right: 4em; top:4em; background-color:#C58D43; color: #1B1B1B; font-family: "horecare-b", Arial, Helvetica; border-bottom: 0; padding: 0.2em 0.6em 0.2em 2em; }
.mijnhorecare::before{position: absolute; left: 0.8em; font-family: "horecare"; content: "\e904"; font-size: 0.8em }

.socialmedia{position: absolute; bottom: 4em; right: 4em;}
.socialmedia a{position: relative; float: right; margin-left: 1em; display: block; border: 0; font-size: 1.8em;}
footer .socialmedia{position: relative; float: left; clear: both; bottom: auto; right: auto; left:0; width: auto; margin: 1.25em 0 0 0em;}
footer .socialmedia a{margin-right: 1em; margin-left: 0; color: #fff; font-size: 1.4em;}

.werkenbijh{position: absolute; bottom: 8em; right: 4em;}


.contact{position:fixed; right: 2em; z-index: 5; top:0;  width: 10.2em; margin:0em 0; padding: 7.6em 0 3em; box-sizing:border-box; text-align: left;  transition:color 0.3s ease;}
.home .contact{position: absolute;top:-200%;}
.contact h3{margin-bottom: 2.1em;}
.contact a{border-bottom: 0; color: #C58D43; margin-bottom: 0.1em; position: relative; float:left; }
.contact a.offertelink{margin-bottom: 1.8em;}
article{padding: 7.8em 0; min-height: 40em;}
.home article{min-height: auto;}
.submenu{margin: 0 0 3em;
     -webkit-user-select: none; /* Safari */ /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}
.submenu a{border: 0; color: #C58D43; margin-right: 1.8em; margin-bottom: 0.6em; position: relative; display: inline-block; padding-bottom: 0.3em;}
.submenu a.active{border-bottom: 1px solid;}

.submenu2{margin-top: 2.6em; margin-bottom: 2em;}
.submenu2 a{width: 26%; position: relative; float: left; margin-right: 11%; margin-bottom:5%; border: none;}
.submenu2 a:nth-child(3n){margin-right: 0;}
.submenu2 a h4{text-align: center; margin: 0.8em 0 0;}
.team{margin-top: 1em;}
.team .teammember{position: relative; float: left; width: 45%; margin-right: 10%; margin-bottom: 3em;  }
.team .teammember:nth-child(2n){margin-right: 0;}
.team .teammember img{margin-bottom: 1em;}


footer{background-color: #1B1B1B;  padding: 4em; color: #fff;}
footer p{}
footer .logo{font-size: 1em;}
footer .logo .horecare-beeldmerk{color: #C38B47!important;}
footer .logo .horecare-woordmerk{color: #fff!important;}
.quote{position: absolute; text-align: center; color: #fff; margin: 0; width: auto; top:50%; transform: translateX(-50%); line-height: 1.1em;}
.quote2{position: absolute; font-size: 1.2em; text-align: center; color: #fff; margin: 0; width: auto; bottom:10%; left: 70%; text-align: left;line-height: 1.6em; -webkit-transform:translateX(-50%); -ms-transform:translateX(-50%); transform:translateX(-50%); font-family: "horecare-b";}
.quote2 span{position: relative; float: left; margin-top: 1em; font-size: 0.7em;}
/*SLICK */

.slideshow{position:relative; float:left; width: 100%; height: auto; background-color: #fff; float: left; width: 100%; clear: both; margin-bottom: 3em;}
.slideshow a{border: 0!important;}
.slick-prev{left: 0px;}
.slick-next{right: 0px;}

.slick-arrow {
  position: absolute;
  z-index: 90;
  top: 0;
  width:7em;
  border: 0;
  height: 100%;
  background:none;
  content: "";
  cursor: pointer;
}

.slick-arrow:hover {
  border-color: rgba(256,256,256,1);
}

.slick-prev:before {
  font-family: "horecare"; content: "\e905"; font-size: 1.4em; width: 2em; line-height: 2em; position: absolute; bottom: 0; left: 1em; background:none; color: #1b1b1b;
}

.slick-next:before {
  font-family: "horecare"; content: "\e906"; font-size: 1.4em; width: 2em; line-height: 2em; position: absolute; bottom: 0; right: 1em; background:none; color: #1b1b1b;
}

.bottompage .mainmenu li::before {
    background-color: #c58d43;
    content: "";
    height: 1px;
    left: -11em;
    position: absolute;
    top: 1em;
    -webkit-transform: translateX(-10em);
        -ms-transform: translateX(-10em);
            transform: translateX(-10em);
    transition: -webkit-transform 0.3s ease 0s;
    transition: transform 0.3s ease 0s;
    transition: transform 0.3s ease 0s, -webkit-transform 0.3s ease 0s;
    width: 10em;
}

.bottompage .mainmenu li:nth-child(6)::before {
    background-color: #c58d43;
    content: "";
    height: 1px;
    left: -11em;
    position: absolute;
    top: 1em;
    -webkit-transform: translateX(0em);
        -ms-transform: translateX(0em);
            transform: translateX(0em);
    transition: -webkit-transform 0.3s ease 0s;
    transition: transform 0.3s ease 0s;
    transition: transform 0.3s ease 0s, -webkit-transform 0.3s ease 0s;
    width: 10em;
}


.hamburger{display: none; position: absolute; width: 2em; height: 4.4em; line-height: 4.4em; right: 1.6em; top:0em; z-index: 22; cursor: pointer;}
.open .mainmenu{height: auto;}
.open .mainmenu ul{margin-top:5em;}

.klein .container{margin-top: 4.4em;}

.mijnhorecare2{position: absolute; right: 4.6em; top: 0; width: 3em; height: 4.4em; line-height: 4.4em; color: #C58D43; display: none;}
.mijnhorecare2::before{position: absolute; left: 0.6em; font-family: "horecare"; content: "\e904"; font-size: 1.3em }


article .referenties{display: none}
.referenties li{position: relative; float: left; width: 100%; margin-bottom: 2em; font-size: 1.1em; cursor: pointer;}
.referenties li:before{ font-family:"horecare"; position: absolute; top: 50%; margin-top: -0em; left: 0; width: 2em; height: 2em; line-height: 2em; text-align: center; content: "\e905"; color: #C58D43; background-color: #1B1B1B; z-index: 2;}

.referenties li:after{ font-family:"horecare"; position: absolute; top: 50%; margin-top: -0em; right: 0; width: 2em; height: 2em; line-height: 2em; text-align: center; content: "\e906"; color: #C58D43; background-color: #1B1B1B;}

.meerconcepten{border-bottom: 1px dashed; padding-top:0em;margin-bottom: 2em; margin-top: 0em;}
.meerconcepten a{position: relative; float: left; width: auto; margin-right: 2em; margin-bottom: 1em; color: #C58D43;}

.broodkruimel{position: relative; float: left; width: 100%; font-size: 0.8em;top: -2.5em; text-transform: lowercase;}
.broodkruimel a{ position: relative; float: left; width: auto; padding-right: 1em;  margin-right: 1em;}

.broodkruimel a::after{content: ">";  position: absolute; right: 0; font-size: 1.5em;}
.broodkruimel a:last-child::after{display: none;}

.takecare{position: fixed; bottom: 4em; left: 4em; width: 6em; height: 6.14em; display: block; background-image: url(../img/take_care.png); background-size: 100%; background-position: center center; background-repeat: no-repeat; opacity: 0;}
.animate .takecare{opacity:1; transition:opacity 0.7s ease 1s;}

.koffie{position: absolute; right:0; width: 100%; bottom: 3em;}
.koffie input{width: 100%;}
.koffie input[type=submit]{ font-family:"horecare"; content: ""; cursor: pointer; position: absolute; width: 2em; height: 100%; top:0; right: 0;background-color: #1a1a1a; background-image: url(../img/arrow.png); background-size: 100%; background-position: center center; background-repeat: no-repeat;}
input.fout{display:none;}

.formpie{position: relative; float: left; width: 100%;}
.formpie input, .formpie textarea{position: relative; float: left; width: 100%; margin-bottom: 1em; padding: 0.7em 1em; letter-spacing: 0.1em;-webkit-appearance: none;}
.formpie input[type=submit]{width: auto; background-color: #C38B47; color: #fff; font-family: "horecare-b"; text-transform: lowercase;}

.small{font-size: 0.8em; color: #ccc; margin-top: 2em;}

footer .b20 a.witter{color: #fff;}


.brandlogos{position: relative; float: left; width: 100%;padding:1.6% 5%; border-bottom: 1px solid #979797; margin-bottom: 3em;  box-sizing:border-box; background-color: #fff; z-index:6;}
.brandlogos ul{position: relative; float: left;width: 100%; max-height: 8em; overflow: hidden; transition:max-height 0.8s ease;}
.brandlogos ul li{position: relative; display: block; float: left!important; height: 8em;  width:16.666%; padding: 0 4%; box-sizing:border-box;}
.brandlogos ul li img{position: relative; float: left;width: 100%; top:50%;transform:translateY(-50%);}
.brandlogos .klapperbutton{position: absolute; top:100%; width: auto; left: 50%; height: 2em; line-height: 2em; padding:0 1.4em; cursor: pointer; color: #C58D43;; border: 1px solid #979797; transform:translateX(-50%);}
.brandsopen .brandlogos ul{max-height: 200em; transition:max-height 1.8s ease;}
.brandsopen .brandlogos .klapperbutton{content: "sluit al onze klanten";}

.testimonials{ margin-bottom: 9.8em; margin-top: 0em;  }
.testimonials .inhoudtesti{width: 100%; box-sizing:border-box; padding-left: 12em; min-height: 12em;font-style: italic;}
.testimonials .inhoudtesti img{position: absolute; left:0; top:0; width: 10em;}
.testimonials .extrainfotesti,  .testimonials .extrainfotesti li{position: relative; float: left!important; display: block; width: 100%;}
.testimonials .extrainfotesti li, .testimonials .extrainfotesti a{color: #C58D43; text-decoration: none;font-family: "horecare-b";}

.testimonials .slick-prev::before, .testimonials .slick-next::before{bottom: 50%; }
.testimonials .googlereview{position: absolute; right: 20em; bottom: -7em; width: 7em; height: 7em; background-image: url(../img/review_google.png); background-size: 100% auto; background-position: center; background-repeat: no-repeat; z-index: 90;}
.newsblok{min-height: 10em; background-color: #1B1B1B; padding: 7em 0;}
.newsblok h2{color: #fff;}
.newsblok ul,  .newsblok ul li{position: relative; float: left!important; display: block; width: 100%; box-sizing:border-box;}
.newsblok ul li {margin-bottom: 1em;}
.newsblok ul li a{text-decoration: none;}
.newsblok ul li .date{padding-right: 4em; line-height: 1.2em; color: #fff; font-size: 0.8em; text-decoration: none;}
.newsblok ul li .newstitel{padding-right: 4em; line-height: 1.4em;font-family: "horecare-b"; font-size: 1.1em; font-weight: 300; color: #C58D43; text-decoration: none;}
.newsblok ul li .newstitel::after{position: absolute; right: 0; font-family: "horecare-l"; font-size: 1.6em; font-weight: 100; line-height: 1em; height: 1.4em; content:"+"; }


.newsbtn{position: relative; float: right; display: block; margin-left: 1em; width: 1em; height: 1em; background-image: url(../img/news.png); cursor: pointer; background-size: 100% auto; background-position: center center; background-repeat: no-repeat;}
.color5 .logo .horecare-woordmerk, .color5 .contact h3 {
    color: #fff;
    transition: color 0.3s ease 0.1s;
}


.container article .wp-caption{position: relative; float: left; width: 100%!important; margin-bottom: 1em; display: block;}

footer .newsbtn{ background-image: url(../img/news2.png); font-size: 1.7em!important; margin-top: -0.1em;}

header .socialmedia a{color: #C58D43;}
header .werkenbijh{color: inherit; background-color: #C58D43; padding: 0.6em 1.3em; font-weight: 400;}
header .newsbtn{display: none;}


.mainmenu{background-color: #1B1B1B; left: 0; top: 0; width: 100%; padding: 0.6em 0.6em 0.6em 12.6em; z-index: 99;box-sizing:border-box; height: 4.6em;}
  .mainmenu .logo{position: absolute; left: 0.8em; top:0.9em;}
  .mainmenu ul{position: relative; width: auto; float: right; margin-right: 3em}
  .mainmenu ul li{position: relative; clear: none; float: left; height: 3.4em; color: #fff; line-height: 3.4em; margin-bottom: 0; margin-right: 2em;}
  body .logo .horecare-woordmerk{ color: #fff!important; transition:color 0.3s ease;}
  .mainmenu li:before{display: none;}
 .mijnhorecare2{display: block; right: 1em; }
 .mijnhorecare{display: none;}




div{position: relative; float: left; width: 100%; display: block;}
.white .breed article h4{font-family: "horecare-b", Arial, Helvetica; margin-bottom: 0.8em; font-size: 1.3em;}
.marginbottom1{margin-bottom: 5em;}
.blocktekstbreed .outer{width: 120%; left: -10%; }
.blockgallerij .outer{width: 120%; left: -10%; }
.blockfotobreed .outer{width: 120%; left: -10%; }
.blocktekstsmal .outer{width: 80%; left: 10%; }
.blockfotosmal .outer{width: 80%; left: 10%; }
.wp-caption-text{font-size: 0.9em; margin-bottom: 1.6rem!important; width: 100%; position: relative; float: left; display: block;}

.ctabutton a{position: relative; display: inline-block; padding: 0.5em 3.6em 0.6em; border-radius: 2em; background-color: #C58D43; color: #1b1b1b; font-family: "horecare-b", Arial, Helvetica; font-size: 1.3em; margin-top: 0.6rem; margin-bottom: .6rem;}
.pusher{height: 4em;}

.blockteksttekst .outer{width: 120%; left: -10%; }
.blockfotofoto .outer{width: 120%; left: -10%; }
.blockvideo .outer{width: 120%; left: -10%; }
.blockvideo.evideo2 .outer{width: 100%; left: 0%; }
.blockvideo.evideo3 .outer{width: 80%; left: 10%; }
.block .outer, .block .inner{padding: 0 1em; box-sizing: border-box;}

.slick-dots { bottom: 1.2rem;}
.slick-dots li {
  cursor: pointer;
  display: inline-block;
  height: 20px;
  margin: 0 3px;
  padding: 0;
  position: relative;
  float: none;
  width: auto;
}
.slick-dots li button::before{color: #000; opacity: 0.2;}
.slick-dots li.slick-active button::before {
  color: #000;
}
.blockgallerij .slick-arrow{top:3.6em;}
.blockvideo .videoWrapper{margin-bottom: 0;}
.blockquote{padding: 2em 0;}
.blockquote blockquote{font-size: 2.4em; line-height: 1.2em;}
.blockquote .blockquotenaam{margin-top: 2em; text-align: right; font-size: 1.2em;}
.blockquote .blockquotenaam::before{position: relative;  margin-right: 0.2em; content: "—";}
.blocktekststandaard .outer, .blocktekststandaard .inner{padding: 0;}
.blockgallerij .inner{margin-bottom: 2em;}

.thumb .thumbfoto2{display: none;}
.thumb:hover .thumbfoto1{display: none;}
.thumb:hover .thumbfoto2{display: block;}

.vrijblijfcontainer{position: absolute; z-index: 2;  right: 0.5em; width: 15em; height: 100%; top: 0; overflow: visible;}

.vrijblijvend{position: -webkit-sticky; /* Safari */position: sticky;top: 5.2em; width: 100%; padding:  0 1.4em; background-color: #EBEBEB; box-sizing: border-box;}
.vrijblijvend article{padding: 0; min-height: 0; margin-bottom: 3em;}
.vrijblijvend article p{text-align: left;}
.vrijblijvend .thumb{margin-bottom: 3em;}
.vrijblijvend form{margin-bottom: 1.4em;}
.vrijblijvend form input{margin-bottom: 0.5em; width: 100%;padding: 0.4em 1em 0.5em; border-radius: 0; }
.vrijblijvend form input[type=submit]{background-color: #C68D43; color: #1B1B1B; text-transform: lowercase; border: 0; font-family: "horecare-b", Arial, Helvetica;}
.vrijblijvend h3{margin-bottom: 0; font-size: 1.3em;}
.vrijblijvend .textcont{}
.vrijblijvend .titelcont{ user-select: none; cursor: pointer; padding: 1.4em 0;}
.stickpusher{height: 12em; width: 100%;}
.uitklapcont{overflow: hidden; max-height: 40em; }
.slick-slide{height: auto!important;}
@media screen and (min-width: 1230px) {

  .breed{width: 50em;}

}

@media screen and (min-width: 1450px) {
  body{font-size: 16px;}

}

@media screen and (min-width: 1550px) {
  body{font-size: 17px;}
  .brandlogos ul li{  width:12.5%; padding: 0 3%; box-sizing:border-box;}
}

@media screen and (min-width: 1600px) {
  body{font-size: 18px;}

}

@media screen and (min-width: 1800px) {
  body{font-size: 20px;}

}

@media screen and (max-width: 1124px) {
  body{font-size: 14px;}
  footer{padding: 5em 7em;}
  footer .b20{width: 50%; margin-bottom: 3em;}

  .quote{font-size: 2em;}
  footer .logo{font-size: 1.2em;}

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

 
  .mijnhorecare{top: 2em; right: 2em;}
  .breed{width: 36em;}
  .quote{font-size: 1.6em;}
  .quote2{font-size: 0.9em;}
  .takecare{position: absolute; }
  .uitklapcont{max-height: 0em;  transition: max-height 0.3s ease;}
  .vrijopen .uitklapcont{max-height: 40em;  transition: max-height 0.8s ease;}
  .vrijblijvend{background-color: #C58D43;  transition: background-color 0.3s ease;}
  .vrijopen .vrijblijvend{background-color: #EBEBEB;}
  .vrijblijvend .titelcont{padding: 0.6em 0; transition: padding 0.3s ease;}
  .vrijopen .vrijblijvend .titelcont{padding: 2em 0; }
  .vrijblijfcontainer{right: 0;}
  .stickpusher{height: 0;}
}

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

}

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

 .contact{display: none;}
 
    .brandlogos ul li{  width:20%; padding: 0 5%; box-sizing:border-box;}
    .testimonials .googlereview{position: absolute; right: 10em;}
}

@media screen and (max-width: 780px) {
  .quote{font-size: 1.4em;}
  .quote2{display: none;}
  .breed{width: 90%; padding: 0 5%;}
  .mainmenu{padding: 0.6em 0.6em 0.6em 0.6em;}
  .mainmenu ul {margin-top: -140%; margin-bottom:3em; width: 100%; float: left;}

  .mainmenu ul li{position: relative; clear: none; float: left; width: 100%; text-align: center; height: 3.4em; font-size: 1.4em; line-height: 3.4em; margin-bottom: 0; margin-right: 0em;}
  .hamburger{display: block}
 
  footer{padding: 5em 10%;}
 
  .socialmedia {
    right: auto;
    left: 5%;
    width: auto;


  }
  .mijnhorecare2{right: 4.6em;}
  .werkenbijh{right: auto; left: 3em;}
  .takecare{position: absolute; left: auto; right: 3em; bottom: 3em;}
  .mijnhorecare { display: none;}
  article {
    padding: 4.6em 0;
  }
  .brandlogos ul li{  width:25%; padding: 0 6%; box-sizing:border-box;}
  .testimonials .slick-prev::before, .testimonials .slick-next::before{bottom: -1em; }

}

@media screen and (max-width: 600px) {
  .quote{display: none;}
  footer{padding: 3.4em 10%;}
  h2{font-size:2.4em;}
  .submenu2 a h4{font-size: 0.9em;}
  .team .teammember{position: relative; float: left; width: 100%; margin-right: 0%; margin-bottom: 2em;  }
  .testimonials .inhoudtesti {

    width: 100%;
    box-sizing: border-box;
    padding-top: 8em;
    padding-left: 0;
    padding-bottom: 3em;
    min-height: 8em;
    font-style: italic;

  }
  header{height: 90vw;}
  .testimonials .inhoudtesti img {

    position: absolute;
    left: 0;
    top: 0;
    width: 10em;

  }
  .testimonials .googlereview{position: absolute; right: 6em;}
  footer{padding: 3.4em 4%; }
  footer .b20{width: 100%; margin-bottom: 2em;}
  .breed{width: 96%; padding: 0 2%;}
   .blocktekstbreed .outer{width: 100%; left: 0%;}
    .blocktekstsmal .outer{width: 100%; left: 0%;}
    .blockteksttekst .b50{width: 100%;}
    .blockteksttekst .outer{width: 100%; left: 0%; }
    .blockgallerij .outer{width: 100%; left: 0%; }
    .blockfotofoto .outer{width: 100%; left: 0%; }
    .blockvideo .outer{width: 100%; left: 0%; }
    .blockfotofoto .b50{width: 100%;}
    .block .outer, .block .inner{padding: 0 0em; box-sizing: border-box;}
    .marginbottom1{margin-bottom: 3em;}
    .pusher{height: 1.4em;}
    .blockquote blockquote{font-size: 2em;}
}

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


   .brandlogos ul li{  width:33.333%; padding: 0 8%; box-sizing:border-box;}
}
@media screen and (max-height: 400px){
  .koffie{display: none;}
}