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

}
.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 #262626; /* Light grey */
    border-top: 0.15em solid #fff; /* 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/elements/groenmaastricht.jpg"); background-size: cover; background-position: center; height: 4em; min-height: 40em; }


@-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: 'groen';
  src:  url('../fonts/groen2_373z2o.eot');
  src:  url('../fonts/groen2_373z2o.eot#iefix') format('embedded-opentype'),
    url('../fonts/groen2_373z2o.ttf') format('truetype'),
    url('../fonts/groen2_373z2o.woff') format('woff'),
    url('../fonts/groen2_373z2o.svg#groen2') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

i {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'groen' !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;
}

.g2-1:before {
  content: "\e900";
  
}
.g2-2:before {
  content: "\e901";
  font-size: 1.06em;
  
}
.g2-3:before {
  content: "\e902";
 
}
.g2-4:before {
  content: "\e903";
  
}
.g2-5:before {
  content: "\e904";
 
}
.g2-6:before {
  content: "\e905";
 
}
.g2-7:before {
  content: "\e906";
  
}
.g2-8:before {
  content: "\e908";
  
}
.g2-9:before {
  content: "\e909";
  font-size: 1.15em;
 
}
.g2-10:before {
  content: "\e90a";

}
.g2-11:before {
  content: "\e90b";
  
}
.g2-12:before {
  content: "\e90c";
 
}
.g2-arrow:before {
  content: "\e90d";
}
.g2-facebook:before {
  content: "\e90e";
  
}
.g2-instagram:before {
  content: "\e90f";
 
}
.g2-linkedin:before {
  content: "\e910";
 
}
.g2-twitter:before {
  content: "\e911";
  
}
.g2-fence:before {
  content: "\e600";
}
.g2-grass1:before {
  content: "\e601";
  font-size: 1.2em;
}
.g2-grass2:before {
  content: "\e602";
}
.g2-muscles:before {
  content: "\e603";
}
.g2-shovel:before {
  content: "\e604";
}
.g2-sketch:before {
  content: "\e605";
  font-size: 0.96em;
}
.g2-strength:before {
  content: "\e606";
  font-size: 0.96em;
}
.g2-washer:before {
  content: "\e907";
  font-size: 1.1em;
}

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: 'Lato', sans-serif;
  font-size:14px;
  line-height:1.6em;
  color:#262626;
  font-weight: 300;
  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: 'Lato', sans-serif; font-size: 1em; font-weight: 300; border:1px solid #979797;}
input[type=text]:focus, textarea:focus {
  box-shadow:none;
  outline: none;
}

a{color: #2A2A2A; text-decoration: none;  font-family: 'Lato', sans-serif;}
p a{color: #C58D43;}

i, cite, em, var, dfn {
    font-style:normal;
}
b, strong {font-weight: 400; }

p{position:relative; width: 100%; display: block; float: left; margin-bottom: 1em;  }
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;}

header, main, footer, section, nav, article, .b, p form, input, textarea{position: relative; width:100%;  height: auto; display: block; float: left; -webkit-box-sizing:border-box; box-sizing:border-box; }


.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{position: absolute; 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%; text-transform: lowercase;  font-weight:400; letter-spacing: 0.15em; line-height: 1.2em; font-family: "baronneue";  }
h1{font-size:3em; line-height: 1.3em; letter-spacing: 0.15em; }
h2{font-size:1.7em; line-height: 1.6em; letter-spacing: 0.10em; color: #223A25; margin-bottom: 2em;}
h3{font-size:1em; line-height: 1.3em;  }
h4{font-size:1.1em; line-height: 1.3em; margin-bottom: 1.6em; }

h2.tussenkop{margin: 0em 0 0.5em; font-size: 2em; }

/* blocks*/

.container{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 .kleur{ opacity: 1; transition:opacity 0.3s ease;}
.color0 .logo .wit{ opacity: 0; transition:opacity 0.3s ease ;}
.colorundefined .logo .kleur{ opacity: 1; transition:opacity 0.3s ease;}
.colorundefined .logo .wit{ opacity: 0; transition:opacity 0.3s ease;}
.color1 .logo .kleur{ opacity: 1; transition:opacity 0.3s ease;}
.color1 .logo .wit{ opacity: 0; transition:opacity 0.3s ease;}
.color2 .logo .kleur{ opacity: 1; transition:opacity 0.3s ease;}
.color2 .logo .wit{ opacity: 0; transition:opacity 0.3s ease;}
.color3 .logo .kleur{ opacity: 1; transition:opacity 0.3s ease;}
.color3 .logo .wit{ opacity: 0; transition:opacity 0.3s ease;}
.color4 .logo .kleur{ opacity: 1; transition:opacity 0.3s ease;}
.color4 .logo .wit{ opacity: 0; transition:opacity 0.3s ease;}
.color5 .logo .kleur{ opacity: 1; transition:opacity 0.3s ease;}
.color5 .logo .wit{ opacity: 0; transition:opacity 0.3s ease;}
.color6 .logo .kleur{ opacity: 1; transition:opacity 0.3s ease;}
.color6 .logo .wit{ opacity: 0; transition:opacity 0.3s ease;}
.color7 .logo .kleur{ opacity: 1; transition:opacity 0.3s ease;}
.color7 .logo .wit{ opacity: 0; transition:opacity 0.3s ease;}
.color8 .logo .kleur{ opacity: 1; transition:opacity 0.3s ease;}
.color8 .logo .wit{ opacity: 0; transition:opacity 0.3s ease;}
.color9 .logo .kleur{ opacity: 1; transition:opacity 0.3s ease;}
.color9 .logo .wit{ opacity: 0; transition:opacity 0.3s ease;}

.color0 .mainmenu ul li{ color: #A4AFA4; transition:color 0.3s ease;}
.colorundefined .mainmenu ul li{ color: #48614B; transition:color 0.3s ease;}
.color1 .mainmenu ul li{ color: #48614B; transition:color 0.3s ease;}
.color2 .mainmenu ul li{ color: #48614B; transition:color 0.3s ease;}
.color3 .mainmenu ul li{ color: #48614B; transition:color 0.3s ease;}
.color4 .mainmenu ul li{ color: #48614B; transition:color 0.3s ease;}
.color5 .mainmenu ul li{ color: #48614B; transition:color 0.3s ease;}
.color6 .mainmenu ul li{ color: #48614B; transition:color 0.3s ease;}
.color7 .mainmenu ul li{ color: #48614B; transition:color 0.3s ease;}
.color8 .mainmenu ul li{ color: #48614B; transition:color 0.3s ease;}
.color9 .mainmenu ul li{ color: #48614B; transition:color 0.3s ease;}

/* kleuren vlakken*/

.white{background-color: #fff;}

.breed{position: relative;margin: 0 auto; width:50em; min-height: 20px; float: none;  display: block;}
.paddingleft{padding-left: 3em;}
.paddingright{padding-right: 3em;}
.z{z-index: 10;}

.logo{position: relative; float: left; width: 100%; clear: both; width: 6.4em; height: 6.4em; display: block; margin-bottom: 2.2em; font-size: 1.2em; cursor: pointer;}
.logo .wit, .logo .kleur{position: absolute; left: 0; top: 0; width: 100%; height: auto; transform:opacity 0.3s ease;}
.logo .kleur {opacity: 0;}
.logo .mobile{display: none;}

.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: #fff; 
    -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 .klapper{position: relative; float: left; width: 100%; clear: both; margin-top: 2em;}
.mainmenu li{position: relative; float: left; clear: both; margin: 0; cursor: pointer; line-height: 2.6em; font-family: "baronneue"; }
.mainmenu li a{color: #fff;}
.mainmenu li:before{position: absolute; left: -10em; top:1em; width: 8em; height: 2px;  content: ""; background-color: #48614B; -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: -10em; top:1em; width: 8em; height: 2px;  content: ""; background-color: #48614B; -webkit-transform:translateX(0); -ms-transform:translateX(0); transform:translateX(0);}

.topper .middle{text-align: center;}

.socialmedia{position: absolute; top: 4em; right: 4em;}
.socialmedia a{position: relative; float: right; margin-left: 1em; display: block; color: #fff; border: 0; font-size: 1.8em;}
.no-touch .social2 a:hover, {color: #48614B!important;}
.titletopper{color: #fff; text-align: center; padding: 2em 0; font-size: 1em; text-transform: uppercase;font-family: "baronneue"; white-space: nowrap;}
.titletopper::before{position: absolute; top:-3px; left: 50%;  transform:translateX(-50%); width: 3.7em; height: 3px; background-color: #7C8D7C; content: "";}
.titletopper::after{position: absolute; bottom:-3px; left: 50%;  transform:translateX(-50%); width: 3.7em; height: 3px; background-color: #7C8D7C; content: "";}

.btngreen{ padding: 0 2em; line-height: 2em;  background-color: #7C8D7C; color:#262626; text-transform: lowercase; cursor: pointer; font-family: "baronneue";}
.btnlightgreen{ padding: 0 2em; line-height: 2em;  background-color: #A5B0A5; color:#262626; text-transform: lowercase; cursor: pointer; font-family: "baronneue";}
.btnblack{ padding: 0 2em; line-height: 2em;  background-color: #000000; color:#A5B0A5; text-transform: lowercase; cursor: pointer; font-family: "baronneue";}
.btnwhite{padding: 0 2em; line-height: 2em;  background-color: #fff; border:1px solid #7C8D7C; font-size: 1em; color:#262626; text-transform: lowercase; cursor: pointer; font-family: "baronneue";}

.topper .btngreen, .topper .btnlightgreen{position: absolute; left: 50%; bottom: -6em; transform:translateX(-50%); white-space: nowrap;}

.succes header{background: none;}
.succes header h1{color: #47614C;}
.succes header .btnlightgreen{}
.succes header h3{color: #A4AFA4; margin-top: 1em; font-size: 1.2em;}
.succes header .titletopper:before, .succes header .titletopper:after{display: none;}
.succes .mainmenu .klapper{display: none;}

.contact{right: 0; width: 10em; z-index: 10;}
.contact .contactbtn{position: relative; float: right; margin-top: 5em; font-size: 0.8em;}

article{}
.paddingy{padding-top: 6em; padding-bottom: 6em;}
.paddingx{padding-left: 6em; padding-right: 6em;}
article p { text-align:justify; margin-bottom: 1.7em; font-size: 1.1em; line-height: 1.7em;}
article .contactbtn{position: relative; display: inline-block; margin:1.5em 0 2.5em;}
article .btnwhite{font-size: 0.9em; position: relative; float: left;}

.contact{z-index: 60;}

.photoblock {margin-bottom: 3em;}
.photoblock img{object-fit: cover; position: relative; width: 100%; height: 100%;}
.photoblock .b33{height: 33vw;}

.tableke{display: table;}
.tableke .b50{display: table-cell; float: none;}

.paddingbigleft{padding-left: 11em;}
.paddingbigright{padding-right: 11em;}
.tableke .covermobile{display: none;}
.b50.cover{ height: 100%; background-image: url("../img/elements/bg.jpg"); background-size: cover;}
.b50#cover1{background-image: url("../img/photos/new/1.jpg"); background-size: cover;}
.b50#cover2a{background-image: url("../img/photos/5.jpg"); background-size: cover;}
.b50#cover2b{background-image: url("../img/photos/5.jpg"); background-size: cover;}

   #cover2b{display: none!important;}
.b50#cover3{background-image: url("../img/photos/new/6.jpg"); background-size: cover;}
.icons{overflow: hidden; }
.icons ul{position: relative; float: left; width: calc(100% + 10em); left:-5em;}
.icons ul li{width: 25%; position: relative; float: left; text-align: center; line-height: 12em; cursor: pointer; }
.icons ul li i{font-size: 3.2em; color: #A5B0A5;  transition:color 0.3s ease;}
.icons ul li h3{position: absolute; left:50%;  transform:translateX(-50%); bottom: 0;  transition:color 0.3s ease;}

.icons ul li:hover i, .icons ul li:hover h3{color: #F36621;}
.icons ul li.active i, .icons ul li.active h3{color: #F36621;}

.slider{width: 100%; height: 34vw; position: relative; float: left;}
.slider div{width: 100%; height: 100%; position: relative;}
.slider div img{ object-fit: cover; position: absolute; height: 100%; width: 100%; position: relative; }
.slider div label{ position: absolute; font-size: 0.8em; bottom: 3em; left: 0; z-index: 99; width: auto; float: none; margin: 0; padding: 0 2em; line-height: 2em;  background-color: #48614B; color:#A5B0A5; text-transform: lowercase; cursor: pointer; font-family: "baronneue";}

.slider1{}
.slider3, .slider4{height: 44vw;}

#overons{background-image: url("../img/elements/blaadjes.jpg"); background-size: 100% auto; background-repeat: no-repeat; padding: 6em 0 0 0;}
#overons .contactbtn{margin-bottom: 4em;}
#contact { padding: 6em 0 6em;}

table{position: relative; float: left; width: 100%; margin-bottom: 1.8em; font-size: 1.1em;}

.social2{position: relative; float: left; width: 100%; text-align: left; transform:none; margin: 0; padding: 0; right: auto; left: auto; top:auto; margin: 1em 0 0;}
.social2 a{color: #7C8D7C; float: left; margin-left: 0em; margin-right: 1em; font-size: 1.3em;}

footer{background-color: #030303;  padding: 1em 4em; color: #fff; white-space:nowrap; font-size: 0.8em;}
footer span{position: relative; float: left; color: #7C8D7C; font-family: "baronneue"; width: auto; white-space:nowrap;}

footer span a{color: inherit; font-size: inherit; font-family: inherit; font-weight: inherit;}
footer nav{position: relative; float: right; width: auto; white-space:nowrap;}
footer nav a{position: relative; float: left; margin-left: 2em; font-family: "baronneue"; width: auto; white-space:nowrap; color: #E2E2E2; text-decoration: none;}

/* Form */

.contactform form{position: relative; width: 100%; margin:0px; overflow: hidden;}
.contactform form h4{margin-bottom: 1em; font-size: 1em;  }
.contactform form input, .contactform form textarea{position: relative; float: left; color:#000; font-family: 'Lato', sans-serif; font-weight: 300; font-size: 1.1em; padding:0.8em 1em; margin-bottom: 1.3em; background-color: #fff; box-shadow: none; }
.contactform input{width: 100%; margin-bottom: 3%; -webkit-appearance: none; border-radius:0; -webkit-border-radius:0; }

.contactform input:focus {
     border-color: #48614B;
} 
.contactform textarea.grootbericht{width: 100%; clear: both; margin-right: 0; height: 10em; line-height: 1.2em;font-family: 'Lato', sans-serif; font-weight: 300; font-size: 1em; padding:1.2em 1em; margin-top: 0.2em;   text-transform: none; -webkit-appearance: none; border-radius:0; -webkit-border-radius:0;  }
.contactform textarea:focus {
      border-color: #48614B;
} 
.contactform form span {position:relative; float: left; display: block; width:100%; margin:2em auto 2em; padding: 0; background: none; border: none; }
.contactform form input[type="submit"]{padding: 0 2em; line-height: 2em;  background-color: #A5B0A5; color:#262626; text-transform: lowercase; cursor: pointer; font-family: "baronneue"; border:none; width: auto;}
.contactform form input[type="submit"]:hover{color:#48614B; }

::-webkit-input-placeholder { /* WebKit browsers */
    color:    #eee;
    
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color:    #eee;
   opacity:  0.5;

}
::-moz-placeholder { /* Mozilla Firefox 19+ */
   color:    #eee;
   opacity:  0.5;
  
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
   color:    #eee;
   
}
.contactform form label{position: relative; float: left; background: none; border: none; padding: 0; margin: 0; font-weight: 500; line-height: 2.2em;}

.contactform form input.fout{position: absolute; opacity: 0; right: 1000px;}

/*SLICK */

.slideshow{position:relative; float:left; width: 100%; height: auto; 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: 2000;
  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: 0; background-color: #060606; color: #C58D43;
}

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

.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:1.5em; z-index: 22; cursor: pointer; background-image: url("../img/elements/hamburger.png"); background-repeat: no-repeat; background-size: 100% auto;}


.open .mainmenu{height: auto;}
.open .mainmenu .klapper{margin-top:0em;}


/*/////////// Custom lightbox  //////////////// */

#examplelightbox{cursor: pointer;}

.customlightbox{position: absolute; min-height: 100%; height: 0; overflow: hidden; opacity: 0;  z-index: -10; transition:z-index 0s ease 0.6s, height 0s ease 0.6s, opacity 0.4s ease;}
.customlightbox .breed{padding: 0 2em;}
.customlightbox .paper{ margin-top: 6em; padding:2.5em 3em; margin-bottom: 5em; min-height: 1em; background-color: #fff; color: #000;}

.customlightbox .closingbtn{position: absolute; right: 0.6em; top: 0.6em; font-size: 1.8em; width: 3em; height: 3em; color: #000; cursor: pointer; z-index: 2; background-image: url("../img/elements/close.png"); background-repeat: no-repeat; background-size: 100% auto;}

.customlightbox .shield{position: fixed; width: 100%; height: 100%; background: rgba(14, 19, 13, 0.5); display: block; left: 0; top:0;}


.customlightboxon .customlightbox{opacity: 1; z-index: 99; height: auto; transition:z-index 0s ease, height 0s ease, opacity 0.4s ease;}
.customlightboxon .container{position: fixed;}


.customlightbox h2{margin-bottom: 0.9em; font-size: 1.6em;}
.customlightbox form{margin-top: 1.4em; float: left;}

.customlightbox h1{line-height: 1.1em; color: #223A25; margin-top: 0.1em; margin-bottom: 1em; font-size: 2.3em; padding-right: 1em; box-sizing:border-box;}


.customlightbox2{position: absolute; min-height: 100%; height: 0; overflow: hidden; opacity: 0;  z-index: -10; transition:z-index 0s ease 0.6s, height 0s ease 0.6s, opacity 0.4s ease;}
.customlightbox2 .breed{padding: 0 2em;}
.customlightbox2 .paper{ margin-top: 6em; padding:2.5em 3em; margin-bottom: 5em; min-height: 1em; background-color: #fff; color: #000;}

.customlightbox2 .closingbtn{position: absolute; right: 0.6em; top: 0.6em; font-size: 1.8em; width: 3em; height: 3em; color: #000; cursor: pointer; z-index: 2; background-image: url("../img/elements/close.png"); background-repeat: no-repeat; background-size: 100% auto;}

.customlightbox2 .shield{position: fixed; width: 100%; height: 100%; background: rgba(14, 19, 13, 0.5); display: block; left: 0; top:0;}


.customlightbox2on .customlightbox2{opacity: 1; z-index: 99; height: auto; transition:z-index 0s ease, height 0s ease, opacity 0.4s ease;}
.customlightbox2on .container{position: fixed;}


.customlightbox2 h2{margin-bottom: 0.9em; font-size: 2em;}
.customlightbox2 form{margin-top: 1.4em; float: left;}

.customlightbox2 h1{line-height: 1.1em; margin-bottom: 1em;}


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

}

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

}

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

}



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

  .breed{position: relative;margin: 0 auto; width:45em; }

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

  
   .breed{position: relative;margin: 0 auto; width:35em; }
   .customlightbox .breed{width: 45em;}
    .customlightbox2 .breed{width: 45em;}
}





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

  .icons ul{width: calc(100% + 4em); left: -2em;}
  .icons ul li h3{font-size: 0.9em;}
 .breed{width: 100%; padding: 0 6em;}

  .container{margin-top: 3em;}
  .color0 .logo .kleur{ opacity: 1; transition:opacity 0.3s ease;}
  .color0 .logo .wit{ opacity: 0; transition:opacity 0.3s ease ;}
  .mainmenu{background-color: #030303; left: 0; top: 0; width: 100%; padding: 0.8em 0.8em 0.8em 4em; z-index: 70;box-sizing:border-box; height: 4.4em;}

  .succes .mainmenu{display: none;}
  .mainmenu .logo{position: absolute; left: 1em; top:0.4em; font-size: 1em; width: 9em;
height: 4em;}
  .logo .mobile{display: block;}
  .logo .kleur, .logo .wit{display: none;}
  .mainmenu .klapper{position: relative; width: auto; float: right; margin-top: 0; }
  .mainmenu ul li{position: relative; clear: none; float: left; height: 2.8em; line-height: 2.8em; color: #fff!important; margin-bottom: 0; margin-right: 2em;}
  .mainmenu li:before{display: none;}
  .paddingbigleft{padding-left: 0;}
  .paddingbigright{padding-right: 0;}
  .contact{display: none;}
  .paddingx {
    padding-left: 5em;
    padding-right: 5em;
  }
  .paddingy {
      padding-top: 5em;
      padding-bottom: 5em;
  }
  .paddingright {
    padding-right: 2.5em;
  }
  .paddingleft {
    padding-left: 2.5em;
  }
  .titletopper{font-size: 0.8em;}
}

@media screen and (max-width: 850px) {
  
  .breed{width: 100%; padding: 0 4em;}
  .mainmenu{padding: 0.6em 0.6em 0.6em 0.6em;}
  .mainmenu .klapper {margin-top: -4000px;  width: 100%; float: left; height: 100vh;}
  
  .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}
  .mainmenu ul{position: relative; float: left; width: 100%; top:40%; transform:translateY(-50%);}
  .paddingx {
    padding-left: 4em;
    padding-right: 4em;
  }
  .paddingy {
      padding-top: 4em;
      padding-bottom: 4em;
  }
  .paddingright {
    padding-right: 2em;
  }
  .paddingleft {
    padding-left: 2em;
  }
  #ontwerp{margin-top: -3em;}
  
}

@media screen and (max-width: 700px) {
  .breed{width: 100%; padding: 0 2em;}
   .paddingx {
    padding-left: 2em;
    padding-right: 2em;
  }
  .paddingy {
      padding-top: 2em;
      padding-bottom: 2em;
  }
   .paddingright {
    padding-right: 1em;
  }
  .paddingleft {
    padding-left: 1em;
  }
  h2{margin-bottom:1.5em; margin-top: 0.8em; font-size: 1.5em;}
  .customlightbox .paper h2{margin-top: 0;}
   .customlightbox2 .paper h2{margin-top: 0;}
  h1{font-size: 2.5em;}
  .icons ul {
    width: calc(100% + 2em);
    left: -1em;
  }
  .slider div label{display: none;}
  .contactform .b50{width: 100%;}
  .slideshow{margin-top: 2em;}

  .contactform .b50:first-child{margin-bottom: 4em;}
  .btnlightgreen, .btngreen, .btnwhite, .contactform form input[type="submit"]{padding: 0 1.3em;}
  #overons{padding: 2em 0 0 0;}
  .customlightbox .paper{margin-top: 2em; margin-bottom: 2em;}
  .customlightbox .breed{width: 100%;}
   .customlightbox2 .paper{margin-top: 2em; margin-bottom: 2em;}
  .customlightbox2 .breed{width: 100%;}
  .photoblock .b33{width: 50%;}
  .photoblock .b33:first-child{padding-right: 1em;}
  .photoblock .b33.paddingright{padding-right: 0;}
   .photoblock .b33:last-child{display: none;}
   .photoblock .b33{height: 75vw;}
}

@media screen and (max-width: 600px){
  .titletopper {
    font-size: 0.9em;
  }
  body{font-size: 13px;}
  .icons ul li {width: 33.333%;}
  .tableke .b50{width: 100%; display: block; clear: both;}
    .tableke .cover{min-height: 75vw;}
  #cover2a{display: none!important;}
   #cover2b{display: block!important;}
   .icons ul li{line-height: 10em;}
   header .socialmedia{font-size: 0.8em; right: 50%; transform:translateX(50%); bottom:4em; top:auto;}
   header .socialmedia a{margin: 0 0.5em;}
   .customlightbox .paper, .customlightbox2 .paper{padding: 1.5em 2em; margin-top: 4.2em; margin-bottom: 4em;}
   .customlightbox .closingbtn{top:0; right: 0;}
   .customlightbox2 .closingbtn{top:0; right: 0;}
   article .btnwhite { font-size: 0.8em; margin-bottom: 1.8em;}
   .mainmenu ul li{font-size: 1.2em;}
   .customlightbox h1{font-size: 1.8em; margin-top: 1.2em; margin-bottom: 2em;}
   .customlightbox h2{font-size: 1.2em;}
}

@media screen and (max-width: 500px){
  .titletopper {
    font-size: 0.8em;
  }
  footer{ padding: 1em 2em; font-size: 0.7em;}
  .titletopper::before{height: 2px;}
  .titletopper::after{height: 2px;}
  .icons ul li i {
    font-size: 2.8em;
    
  }

  .customlightbox .breed, .customlightbox2 .breed{padding: 0 0em}
}

@media screen and (max-width: 440px){
  .titletopper {
    font-size: 0.7em;
  }
  footer span {position: absolute; top:-4em; left: 50%; transform:translateX(-50%);}
  footer nav{text-align: center; width: 100%;}
  footer nav a{float: none; display: inline-block; margin: 0 0.8em;}
  h2{font-size: 1.3em;}
  .icons ul li h3 {
    font-size: 0.8em;
  }
  .contactform form h4{font-size: 0.9em;}

}

@media screen and (max-width: 370px){
  body{font-size: 12px;}
   .icons ul li {width: 50%;}
}
@media screen and (max-height: 500px) and (min-width: 850px) {
  .mainmenu .klapper{margin-top: 0;}
  body{font-size: 13px;}
}

@media screen and (max-height: 440px) {
  body{font-size: 12px;}
  
}
@media screen and (max-width: 850px) and (max-height: 500px) {
  .mainmenu ul li{font-size: 1.1em;}

}
@media screen and (max-width: 850px) and (max-height: 400px) {
  .mainmenu ul li{height: 2em; line-height: 2em;}

}

@media screen and (min-width: 850px) and (max-height: 380px) {
  
  .mainmenu ul{display: none;}

}