/* --- Algemeen --- */
.flexslider ul li > img { margin-top: 0; }

/* --- Groot scherm --- */
@media screen and (max-width: 1800px) {
  .flexslider ul li > img { margin-top: -100px; }
}
@media screen and (max-width: 1600px) {
  .flexslider ul li > img { margin-top: 0; }
}
@media screen and (min-width: 1300px) and (max-width: 1800px) {
  .socialinks { display: none; }
}

/* Extrainfo footer alleen mobiel */
@media screen and (max-width: 736px) {
  .extrainfo-footer-mob { display: inherit; }
  .extrainfo-footer { display: none; }
}
@media screen and (min-width: 736px) {
  .extrainfo-footer-mob { display: none; }
}

/* Whatsapp knoppen */
@media screen and (max-width: 539px) {
  #whatsapp-groot { display: none; }
}
@media screen and (min-width: 540px) and (max-width: 937px) {
  #whatsapp-klein { display: none; }
}
@media screen and (min-width: 937px) and (max-width: 1100px) {
  #whatsapp-groot { display: none; }
}
@media screen and (min-width: 1056px) {
  #whatsapp-klein { display: none; }
}

/* Logo & banner aanpassingen */
@media screen and (min-width: 1300px) and (max-width: 1424px) {
  .banner img { max-width: 150%; width: 150%; }
  .logo-content { width: 335px; margin-top: 127px; }
 
}
@media screen and (min-width: 1000px) and (max-width: 1299px) {
  .flexslider ul li a > img { margin-top: 0; }
  .caption h2 { font-size: 32px; }
  .logo { width: 400px; margin-top: 10%; }
  .logo-content { width: 350px; margin-top: 10%; }
  .banner img { max-width: 150%; width: 150%; }
  .afbeeldinghome {
    float: left; width: 49%;
    background: url(../images/het.jpg) no-repeat center/cover;
    background-color: #848680;
    position: relative;
  }
  .section1 ul li h2 a.btn,
  .section1 ul li h2 a.btn2 {
    display: inline-block; padding: 0 2%;
    line-height: 48px; font-size: 18px;
    color: #fff; font-weight: 400;
  }
 
  .socialinks { display: none; }
  .mobutton { display: none; position: absolute; margin: 14px 0 0 30px; }
  .flexslider .flex-direction-nav a.flex-prev { left: 10%; }
  .flexslider .flex-direction-nav a.flex-next { right: 10%; }
  .hetinfo { width: 40%; }
}
@media screen and (min-width: 768px) and (max-width: 999px) {
  .caption h2 { font-size: 32px; }
  .flexslider ul li a > img { margin-top: 0; width: 140%; margin-left: 0; }
  .logo { width: 400px; }
  .logo-content { width: 335px; margin-top: 100px; }
  .banner img { min-width: 1600px; width: 100%; }

  .socialinks { display: none; }
  .caption h1 { font-size: 25px; bottom: 100px; }
  .section2 .container { width: 100%; }
  .afbeeldinghome { width: 29%; }
  .hetinfo { width: 61%; }
  .hetinfo h1 { font-size: 30px; }
  .hetinfo h3 { font-size: 14px; }
  .hetinfo a {
    line-height: 44px; height: 43px;
    width: 120px; font-size: 16px; text-indent: -3px;
  }
  .section1 ul li:first-child a { font-size: 16px; }
  .section1 ul li h2 a.btn,
  .section1 ul li h2 a.btn2 {
    font-size: 14px; line-height: 25px;
  }
}
@media screen and (max-width: 1200px) {

}
@media screen and (max-width: 956px) {
  .now-block .now { width: 45%; margin: 0 1% 50px; }
  .socialinks-top { margin-top: -5px; }
}
@media screen and (min-width: 768px) and (max-width: 956px) {
  .mobutton { display: block; position: absolute; margin: 14px 0 0 30px; }
  header nav { display: none; }
}
@media screen and (max-width: 767px) {
  .content-left, .content-right { width: 100%; }
	.content-breed {
    font-size: 19px;
    line-height: 30px;
    float: left;
    width: 100%;
    padding: 5%;
    color: #373839;
    -moz-column-count: 1;
    -moz-column-rule: solid 0px #ccc;
    -moz-column-gap: 25px;
    -webkit-column-count: 1;
    -webkit-column-rule: solid 0px #ccc;
    -webkit-column-gap: 25px;
    column-count: 1;
    column-rule: solid 0px #ccc;
    column-gap: 5%;
}
}

/* Specifieke ranges voor flexslider scaling */
@media screen and (min-width: 667px) and (max-width: 767px) {
  .flexslider ul li a > img { width: 138% !important; margin-left: -32% !important; }
}
@media screen and (min-width: 530px) and (max-width: 666px) {
  .flexslider ul li a > img { width: 163% !important; margin-left: -55% !important; }
}
@media screen and (min-width: 447px) and (max-width: 767px) {
  .extrainfo-footer { width: 100%; padding: 60px 8%; }
  .overons { width: 80% !important; }
  .caption { width: 225px; margin: 0 auto; position: relative; text-align: center; }
  .caption h2 { font-size: 20px; }
  .logo { max-width: 280px; }
  .logo-content { width: 197px; margin-top: 68px; }
  .banner img { min-width: 1600px; width: 100%; }
  .content-breed { width: 100%; padding: 5%; column-count: 1; }

  header nav { display: none; }
  .mobutton { display: block; position: absolute; margin: 0 0 0 30px; }
  .socialinks { display: none; }
  .caption h1 { font-size: 25px; bottom: 12px; }
  .flexslider .flex-direction-nav,
  .flexslider .flex-control-nav { display: none; }
  .hetinfo { width: auto; padding: 15px 20px 0; box-sizing: border-box; }
  .afbeeldinghome { display: none; }
  .section1 ul li { width: 50%; }
  .newsletter .container { width: 95%; }
  .newsletter input { width: 80%; margin: 0 auto; float: none; }
  .newsletter input[type="submit"] { width: 80%; margin: -8px auto 0; }
  .newsletter h1 { text-align: center; }
}
@media screen and (max-width: 600px) {
  .now-block .now { width: 80%; margin: 0 1% 50px; }
  .content-breed h1, .content-breed-zk h1 { font-size: 22px; }
}
@media screen and (max-width: 446px) {
  .content-breed h1, .content-breed-zk h1 { font-size: 22px; }
  .extrainfo-footer { width: 100%; padding: 60px 15%; }

  .overons { width: 80% !important; }
  .caption h2 { font-size: 17px; }
  .afbeeldinghome { display: none; }
  .flexslider ul li a > img { width: 223%; margin-left: -63%; margin-top: 0; }
  .logo { max-width: 280px; margin-top: 114px; }
  .logo-content { width: 252px; margin-top: 127px; }
  .banner img { min-width: 1600px; width: 100%; }
  .banner { height: auto; max-width: 200%; overflow: hidden; }

  header nav { display: none; }
  .mobutton { display: block; position: absolute; margin: 1px 0 0 30px; }
  .menulogo { display: none; }
  .caption h1 { font-size: 30px; bottom: 30px; }
  .flexslider ul li > img { height: 360px; width: auto; margin-left: -395px; left: 50%; }
  .flexslider .flex-direction-nav,
  .flexslider .flex-control-nav { display: none; }
  .caption { width: 96%; margin: 0 auto; }
  .section2 { padding: 0 0 30px; }
  .section2 .container { width: 100%; }
  .section2 img { max-width: 100%; margin: 0 auto; display: block; }
  .hetinfo { width: auto; padding: 15px 20px 0; box-sizing: border-box; }
  .section1 ul li { width: 50%; }
  .section1 ul li h2 a.btn,
  .section1 ul li h2 a.btn2 { font-size: 14px; line-height: 25px; }
  .newsletter { background-size: cover; padding: 40px 0 50px; }
  .newsletter .container { width: 95%; }
}