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, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit; /* stylelint-disable-line */
  vertical-align: baseline;
}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, main {
  display: block;
}

body {
  line-height: 1;
}

ol, ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote::before, blockquote::after,
q::before, q::after {
  content: '';
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

html {
  box-sizing: border-box;
  font-size: 62.5%;
  background-color: #f4f4f4;
}

*,
*::before,
*::after {
  /* stylelint-disable-line */
  box-sizing: inherit;
}

mark {
  background-color: transparent;
  font-weight: bold;
}

/* Header */

header {
  padding: 2rem 4rem;
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.header-logo {
  background-image: url(c6be72406de6b20f3802.png);
  background-size: 120%;
  background-repeat: no-repeat;
  background-color: #f4f4f4;
  width: 20rem;
  height: 15rem;
}

p {
  font-family: 'Open Sans', Arial, sans-serif;
  font-weight: 400;
  color: #4a4a4a;
  font-size: 1.4rem;
  line-height: 1.4rem;
}

h2 {
  font-family: 'Open Sans', Arial, sans-serif;
  font-weight: 500;
  text-transform: uppercase;
  font-size: 1.8rem;
}

.title {
  font-family: 'Open Sans', Arial, sans-serif;
  font-weight: 700;
  font-size: 3.6rem;
  line-height: 4rem;
  max-width: 60rem;
  margin: 4rem 0;
}

.horizontal {
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
  padding: 5% 15%;
  background-color: white;
}

.onderzoek {
  padding: 0;
  padding-right: 2rem;
}

.onderzoek div {
  width: 70%;
  margin-left: 5rem;
}

.onderzoek picture,
.onderzoek img {
  width: 50vw;
}

.vertical {
  display: flex;
  flex-direction: column;
  max-width: 96rem;
  margin: 0 auto;
  justify-content: space-around;
  align-items: center;
  text-align: center;
}

.vertical h2,
.horizontal h2 {
  margin-top: 5rem;
}

.vertical h2::after,
.horizontal h2::after {
  content: '';
  display: block;
  width: 3rem;
  height: .2rem;
  top: 1.5rem;
  margin: 0 auto;
  position: relative;
  background-color: #bf202f;
}

.horizontal h2::after {
  margin: 0;
}

.privacy-popup {
  position: fixed;
  bottom: 0;
  background-color: white;
  width: 100vw;
  height: 8vh;
  display: flex;
  align-items: center;
  font-size: 2rem;
  justify-content: center;
}

@keyframes comeIn {

  from {
    transform: translateY(8vh);
  }

  to {
    transform: translateY(0);
  }
}

@keyframes leave {

  from {
    transform: translateY(0);
  }

  to {
    transform: translateY(8vh);
  }
}

.privacy-link {
  color: #4a4a4a;
  font-size: 1.4rem;
  font-family: 'Open Sans', Arial, sans-serif;
  margin: .5rem;
}

.privacy-button {
  background-color: #4a4a4a;
  color: white;
  font-size: 1.4rem;
  font-family: 'Open Sans', Arial, sans-serif;
  height: 3rem;
  width: 8rem;
  display: flex;
  margin: 2rem;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.privacy-button:hover {
  background-color: grey;
}

.animate {
  animation: comeIn .6s ease-out forwards;
}

.animateOut {
  animation: leave .6s ease-out forwards;
}

/*---------Header----------*/

.header-nav-list {
  overflow: hidden;
  display: flex;
  z-index: 2;
  flex-direction: row;
  align-items: center;
}

.header-nav-list a {
  float: left;
  display: block;
  color: #4a4a4a;
  text-align: center;
  padding: 1.4rem 2rem;
  font-family: 'Open Sans', Arial, sans-serif;
  font-weight: 700;
  font-size: 1.4rem;
  text-decoration: none;
  transition: text-decoration .2s ease-out;
}

.header-nav-list a:hover {
  text-decoration: underline;
}

.header-nav-list li:nth-child(7) {
  border: .1rem solid #bf202f;
  ;
  margin: 0 0 0 1rem;
  background-color: #bf202f;
  ;
  transition: background-color .2s ease-out;
}

.header-nav-list li:nth-child(7) a {
  padding: 1.4rem 3rem;
  color: white;
}

.header-nav-list li:nth-child(6) {
  border: .1rem solid #4a4a4a;
  margin: 0 0 0 1rem;
  background-color: transparent;
  transition: background-color .2s ease-out;
}

.header-nav-list li:nth-child(6) a {
  padding: 1.4rem 3rem;
}

.header-nav-list li:nth-child(7):hover {
  background-color: transparent;
}

.header-nav-list li:nth-child(7):hover a {
  color: #4a4a4a;
  text-decoration: none;
}

.header-nav-list li:nth-child(6):hover {
  background-color: #4a4a4a;
}

.header-nav-list li:nth-child(6):hover a {
  color: white;
  text-decoration: none;
}

.active {
  text-decoration: underline;
}

.header-nav-list-hamburger {
  display: none;
}

/*-----Inleiding-----*/

.inleiding {
  height: 35rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  max-width: 100%;
  font-family: 'Open Sans', Arial, sans-serif;
  margin: 0 auto;
}

.inleiding p {
  max-width: 80rem;
  margin-bottom: 5rem;
}

.inleiding-name {
  color: #9b9b9b;
  font-size: 1.8rem;
}

.inleiding address {
  position: absolute;
  right: 0;
  top: 50rem;
  background-color: white;
  color: #bf202f;
  font-size: 1.8rem;
  width: 25rem;
  height: 6rem;
  align-self: flex-end;
  display: flex;
  justify-content: center;
  align-items: center;
}

.inleiding address::before {
  content: '';
  background: url(4de62aa4ced5464e9add.png);
  background-size: 90%;
  background-repeat: no-repeat;
  margin-right: 1rem;
  width: 2rem;
  height: 2rem;
}

.inleiding-qoute {
  color: #4a4a4a;
  font-size: 2.8rem;
  font-weight: 600;
  line-height: 3.2rem;
  text-align: center;
}

/*-----Over-----*/

.over {
  background-color: white;
  display: flex;
  flex-direction: row-reverse;
}

.over p {
  font-size: 1.8rem;
  line-height: 2rem;
  margin-bottom: 2rem;
}

.over div {
  padding: 5rem;
}

/*-----Doelgroep-----*/

.doelgroep ul {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  height: 30rem;
  width: 100%;
}

.doelgroep li {
  width: 25rem;
  height: 25rem;
  font-family: 'Open Sans', Arial, sans-serif;
  font-size: 1.8rem;
  background-repeat: no-repeat;
}

.doelgroep-sport {
  background-image:
    url(c91cd8598e183e953d15.png),
    url(cb78200a5995a4cf54f1.svg);
  background-size: 20%, 60%;
  background-position: 20% 85%, center;
}

.doelgroep-kind {
  background-image: url(290bef5e37cd914a3743.svg);
  background-size: 25%;
  background-position: center;
}

.doelgroep-diabetes {
  background-image: url(d8b938a1cc00f9f7e0f2.svg);
  background-size: 45%;
  background-position: center;
}

/*-----Onderzoek-----*/

.behandeling-text,
.onderzoek-text {
  max-width: 65rem;
  line-height: 1.8rem;
}

/*-----Klachten-----*/

.klachten ul {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 90%;
  margin: 0 2rem 5rem;
}

.klachten-voet,
.klachten-knie,
.klachten-rug {
  width: 25rem;
  height: 25rem;
  background-size: 100%;
  font-family: 'Open Sans', Arial, sans-serif;
  font-size: 2.2rem;
  text-align: left;
  display: flex;
  align-items: flex-end;
  padding: 2rem;
}

.klachten-voet {
  background-image: url(51b1abbe7e4f9cc2d6af.png);
}

.klachten-knie {
  background-image: url(29edf081334539e1a5ea.png);
}

.klachten-rug {
  background-image: url(33dae0573294595e0d4d.png);
}

/*----PopUps-----*/

.button {
  width: 33%;
}

.klachten .button {
  width: 25rem;
  height: 25.5rem;
}

.button:hover {
  border-bottom: #bf202f solid thick;
}

.select {
  border-bottom: #bf202f solid thick;
}

.doelgroep .button li {
  width: 100%;
}

.invisible {
  display: none;
}

.popup {
  max-width: 96rem;
  text-align: left;
  margin-bottom: 3rem;
  padding: 2rem;
  width: 100%;
}

.popup p {
  font-size: 1.8rem;
  line-height: 2rem;
}

.popup ul {
  display: flex;
  flex-direction: column;
  margin-top: 2rem;
}

.popup li {
  list-style: circle;
  margin-top: 1rem;
  line-height: 2rem;
  width: 101%;
}

/*-----Gallerij-----*/

.gallerij {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.slide-unselected {
  border: #bf202f thick solid;
  border-top: none;
  border-left: none;
  border-right: none;
}

.gallerij-big {
  max-width: 88.6rem;
  width: 90%;
  margin-bottom: 5rem;
}

.gallerij-small {
  height: 10rem;
  max-width: 96rem;
  width: 90%;
  display: flex;
  justify-content: space-between;
  flex-flow: row nowrap;
}

.gallerij-preview img {
  min-width: 5rem;
  width: 10vw;
  max-width: 15rem;
  cursor: pointer;
}

.slider-slide {
  width: 100%;
  display: none;
}

/*----Link-----*/

.link-behandeling {
  width: 100%;
  height: 5rem;
  text-align: center;
  color: white;
  background-color: #bf202f;
  padding-top: 1.5rem;
}

.link-behandeling a {
  color: white;
  text-decoration: none;
  font-family: 'Open Sans', Arial, sans-serif;
  text-transform: uppercase;
  font-size: 2rem;
}

/*-----Contact-----*/

.contact {
  display: flex;
  flex-direction: row;
  padding: 5% 15%;
}

.contact div {
  width: 50vw;
  margin-left: 5rem;
}

.contact p,
.contact a {
  font-size: 1.8rem;
  line-height: 2rem;
  font-family: 'Open Sans', Arial, sans-serif;
  text-decoration: none;
  color: #4a4a4a;
  font-weight: 400;
}

.contact li {
  margin-bottom: 2rem;
  display: flex;
  min-width: 20rem;
}

.contact-address {
  margin-bottom: 2rem;
  display: flex;
  width: 20rem;
  line-height: 2.4rem;
}

.contact li::before,
.contact-address::before {
  content: '';
  width: 2rem;
  height: 2rem;
  position: relative;
  background-size: 2rem;
  background-repeat: no-repeat;
  margin-right: 1rem;
}

.contact-tel::before {
  background-image: url(112f5edec7133f53e520.png);
}

.contact-email::before {
  background-image: url(956a2b43f6af9664b05a.png);
}

.contact-facebook::before {
  background-image: url(481df7cbc4c088260034.png);
}

.contact-address::before {
  background-image: url(8caaaf532d5a4bb77fd3.png);
  background-size: 100%;
  width: 3rem;
  height: 3rem;
}

.contact a:hover {
  color: black;
  font-weight: bold;
}

.map {
  width: 40rem;
  height: 40rem;
  background-color: grey;
}

/*----Behandeling----*/

.hidden {
  display: none;
}

.behandeling {
  max-width: 96rem;
  margin: 0 auto;
}

.behandeling-content {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  height: 30rem;
}

.behandeling-content div {
  width: 50rem;
}

.behandeling img {
  width: 15rem;
  height: 15rem;
  margin: 2rem 5rem 0 0;
  align-self: center;
}

.behandeling h2::after {
  content: '';
  display: block;
  width: 3rem;
  height: .3rem;
  top: 1.5rem;
  position: relative;
  background-color: #bf202f;
}

.behandeling h3 {
  font-family: 'Open Sans', Arial, sans-serif;
  font-weight: 700;
  font-size: 1.8rem;
  margin: 2rem 0;
}

.behandeling ul {
  font-family: 'Open Sans', Arial, sans-serif;
  font-weight: 500;
  font-size: 1.4rem;
  margin-left: 3rem;
  margin-top: 2rem;
}

.behandeling li {
  list-style: circle;
}

/*-- Privacy --*/

.privacy {
  max-width: 96rem;
  margin: 0 auto;
  margin-top: 5rem;

  & a {
    color: #4a4a4a;
  }

  & h1 {
    font-family: 'Open Sans', Arial, sans-serif;
    font-weight: 700;
    font-size: 2.8rem;
  }

  & p {
    margin-top: 1rem;
    margin-bottom: 5rem;
    line-height: 2rem;
  }

  & h2 {
    margin: 1rem 0;
  }
}

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

  .onderzoek {
    padding-bottom: 5rem;
  }

  .onderzoek img {
    width: 40vw;
    padding: 5rem 0 0 5rem;
  }
}

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

  .over div {
    padding: 5rem;
  }

}

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

  .behandeling {
    padding: 0 3rem;
  }

  .nav-open li {
    float: none;
    text-align: left;
    display: inline;
  }

  .nav-closed li:not(:last-child) {
    display: none;
  }

  .header-nav-list-hamburger {
    float: right;
    display: block;
  }

  .nav-open {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100vw;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    padding: 20rem 0;
    align-items: center;
    background-color: #f4f4f4;
  }

  .nav-open a {
    font-size: 2.5rem;
  }

  .nav-open li:nth-child(7) {
    margin: 1.5rem 0;
  }

  .nav-open li:nth-child(6) {
    border: none;
    margin: 0;
  }

  .nav-open li:nth-child(6) a {
    padding: 1.4rem 1.8rem;
  }

  .nav-open .header-nav-list-hamburger {
    position: absolute;
    right: 2rem;
    top: 4rem;
    overflow: visible;
  }
}

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

  .over div {
    padding: 5rem;
  }

  .privacy {
    margin: 0 5rem;
  }

  .title {
    font-size: 2.8rem;
    line-height: 2.8rem;
  }

  .horizontal {
    padding: 5%;
  }

  .klachten-voet,
  .klachten-knie,
  .klachten-rug {
    width: 25vw;
    height: 25vw;
  }

  .klachten .button {
    width: 25vw;
  }

  .contact {
    padding: 0 5%;
  }
}

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

  .privacy-popup {
    flex-direction: column;
    height: 14vh;
    padding-top: 2rem;
  }

  .inleiding {
    margin: 0 2rem;
    padding: 0;
  }

  .title {
    font-size: 2.4rem;
    line-height: 2.4rem;
    margin: 3rem 0 2rem;
  }

  .doelgroep li {
    font-size: 1.2rem;
  }

  .contact {
    flex-direction: column;
  }

  .contact div {
    width: 90vw;
    margin: 0 auto;
  }

  .horizontal {
    flex-direction: column-reverse;
  }

  .horizontal h2 {
    margin-top: 2rem;
  }

  .horizontal img {
    width: 100%;
  }

  .gallerij-small {
    flex-wrap: wrap;
    height: 20rem;
    margin: 2rem auto;
  }

  .gallerij-preview {
    width: 24vw;
  }

  .behandeling-content img {
    display: none;
  }

}

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

  .inleiding-qoute {
    font-size: 2.8rem;
    line-height: 3rem;
  }

  .link-behandeling a {
    font-size: 1.5rem;
  }

  .doelgroep-sport {
    background-size: 40%, 60%;
  }

  .over {
    flex-direction: column-reverse;
  }

  .over img {
    width: 100%;
  }

  .button {
    height: 20rem;
  }

  .doelgroep ul {
    height: 25rem;
  }

  .klachten .button {
    width: 50vw;
    height: 51vw;
    margin: 2rem 0 auto;
  }

  .klachten ul {
    flex-direction: column;
    align-items: center;
  }

  .klachten .popup {
    padding-top: 0;
  }

  .klachten .popup ul {
    margin-top: 0;
  }

  .klachten-voet,
  .klachten-knie,
  .klachten-rug {
    width: 50vw;
    height: 50vw;
  }

  .inleiding address {
    top: 49rem;
    width: 100%;
  }
}