@import url('https://fonts.googleapis.com/css2?family=Lexend&display=swap');

:root{

  --main: #1a4342;
  --secondary: #00FF00;
  --third: #EDEDED;

  --stijn-text: #75727E;

}


* {

  margin: 0;
  padding: 0;

font-family: 'Lexend';

      }

html, body{
  margin: 0;
  padding: 0;


  background-color: var(--main);

  overflow-x: hidden;

}
  

li {
  list-style: none;

}

a {
  color: #FFFFFF;
  text-decoration: none;
}

li a:hover {
  font-weight: bold;
}


/* NAV / MENU */

nav{

  position: fixed;
  width: 100%;

  pointer-events: none;

  animation: .75s ease-in-out 0s 1 Slide_Top_To_Bottom;
  z-index: 2;

}

nav .container{

  width: 15em;

  float: right;
  margin-right: 5.5%;

}

nav .container .logo{

  position: relative;

  display: flex;
  justify-content: center;
  align-items: center;

  width: 100%;
  height: 240px;

  background-image: url("./img/SVG/BRAUND-TEXT-GROEN.svg");
  background-size: 85%;
  background-repeat: no-repeat;
  background-position: center;

  background-color: var(--main);

  z-index: 2;

}

nav .container .logo .to-top{

  position: absolute;
  
  width: 100%;
  height: 70%;

  top: 0;

  pointer-events: all;

}

nav .container .logo .tekst{

  display: flex;
  align-items: flex-end;

  width: 85%;
  height: 90%;

  color: #EDEDED;
  font-size: 20px;

}

nav .container .logo .tekst .tekst-container #pijl{

  width: 40px;
  pointer-events: auto;
  cursor: pointer;

  transform-origin: center;

  transition: .5s;

}

nav .container .logo .tekst .tekst-container{

  display: flex;
  justify-content: space-between;
  align-items: center;

  width: 100%;

}

nav .container #menu{

  position: relative;

  transform: translateY(-200%);
  z-index: 1;

  transition: .5s;

}

nav .container .menu-links{

  pointer-events: auto;

  background-color:#FFC0CB;
  padding: 15px;

}

nav .container .menu-links li{

  margin-bottom: 5px;

}

nav .container .menu-links a {

  color: var(--main);
  font-size: 22px;
  font-weight: bold;
line-height: 22px;

}

nav .container .menu-links .kruis-container{

  display: flex;
  justify-content: end;
  align-items: center;

}

nav .container .menu-links .kruis-container #kruis{

  width: 27.5px;
  margin-top: 15px;

  cursor: pointer;

}

/* HEADER */

header {

  width: 100%;
  height: 100vh;

  background-image: url("./img/Beelden/HEADER_BRAUND.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;

  color: var(--main);

}

header .text-container{

  display: block;

  width: 35%;
  margin-left: 17.25em;

  padding-top: 11em;

}

header .text-container h1{

  font-size: 50px;

}

header .text-container p{

  font-size: 35px;
  margin-left: 3px;
  line-height: 36px;

}


/* AANKONDIGING */

.disciplines-en-aankondiging{

  display: flex;
  justify-content: center;
  align-items: center;

  height: 400px;

background-color: var(--main);
background-image: url("./img/SVG/groot braund S.svg");
background-repeat: repeat;
background-position: left;
background-size: 700px;
margin-top: -5px;
margin-left: 0px;
}

.disciplines-en-aankondiging .container{

  height: 100%;
  width: 100%;

}

.disciplines-en-aankondiging .disciplines{

  font-size: 33px;
  height: 100%;

  margin-left: 270px;

  display: flex;
  justify-content: center;
  align-items: center;

  float: left;


}

.disciplines-en-aankondiging .disciplines li{

  margin-top: 2px;

}

.disciplines-en-aankondiging .aankondiging{

  display: flex;
  justify-content: center;
  align-items: center;

  width: 375px;
  height: 100%;

  margin-right: 20em;

  float: right;

}

.disciplines-en-aankondiging .aankondiging .aankondiging-container{

  display: flex;
  justify-content: space-around;
  align-items: center;


}

.disciplines-en-aankondiging .aankondiging .bol{

text-align: center;

  display: flex;
  justify-content: center;
  align-items: center;

  width: 16em;
  height: 16em;

  <!--background-image: url("./img/SVG/CIRKEL_GROEN.svg");-->
  background-repeat: no-repeat;
  background-position: center;

  transition: .25s;

}

.disciplines-en-aankondiging .aankondiging .bol img{

width: 255px;

}

.disciplines-en-aankondiging .aankondiging .bol h1{

  font-size: 28px;
  color: var(--main)

}

.disciplines-en-aankondiging .aankondiging .bol:hover{

  transform: scale(105%);
  transition: .25s;

}

.disciplines-en-aankondiging .aankondiging .media-links{

  width: 50px;
  margin-left: 0px;

}

.disciplines-en-aankondiging .aankondiging .media-links img{

  width: 95%;
  margin-top: 10px;

}

.disciplines-en-aankondiging .aankondiging .media-links img:hover{

  transform: scale(105%);

}


/* INTRODUCTIE */

/* .introductie .cirkel{

  position: absolute;
  width: 750px;

  transform: translate(205%, -110%);

} */

.introductie{

  color: var(--main);
  background-color: var(--third);

}

.introductie .position-container{

  width: 100%;

  padding-top: 70px;
  padding-bottom: 1000px;

  z-index: 2;

}

.introductie .tekst-container{

  margin-left: 17.25em;
  z-index: 3;

}

.introductie .tekst-1{

  width: 40%;

  float: left;

  z-index: 3;

}

.introductie .tekst-1 h1{

  font-size: 50px;

}

.introductie .tekst-1 p{

  font-size: 25px;
  margin-left: 3px;
line-height: 35px;

}

.introductie .tekst-1 h2{

  margin-left: 3px;
  margin-top: 30px;
  margin-bottom: 5px;
  font-size: 40px;

}

.introductie .tekst-2{

  width: 325px;

  float: right;

  margin-top: 49px;
  margin-right: 22em;

color: #75727E;

  z-index: 3;

}

.introductie .tekst-2 span{

  font-size: 21px;

}

.introductie .tekst-2 p{

  margin-top: 30px;
  font-size: 14.5px;
line-height: 25px;

}

.introductie .logo-quote{

  width: 100%;

  margin-top: 50px;

  float: left;

}

.introductie .logo-half{

  width: 600px;
  transform: translateX(-12.05%);

  float: left;

  z-index: 1;

}

.introductie .quote{

  margin-left: 17.25em;
  width: 520px;
  margin-bottom: 60px;

}

.introductie .mobiel-text{

  display: none;

}

/* MEER INFO */

.meer-info{

  color:var(--third);
background-image: url("./img/SVG/grote B.svg");
background-repeat: repeat;
  background-position: left;
background-size: 600px;


}

.meer-info .container{

  width: 35%;
  padding-top: 70px;
  padding-bottom: 70px;

  margin-left: 17.25em;

}

.meer-info .container h1{

  font-size: 40px;
  margin-bottom: 60px;

}

.meer-info .container h2{

  margin-left: 3px;
  margin-top: 30px;
  margin-bottom: 5px;
  font-size: 40px;

}

.meer-info .container p{

  font-size: 25px;
  margin-left: 3px;
line-height: 35px;

  width: 125%;

}

.meer-info .quote{

  width: 400px;
  margin-top: 90px;
margin-left: 3px;

}

/* DOEL */

.doel{

  color: var(--third);
  background-color: var(--main);


background-image: url("./img/SVG/BIG BRAUND.svg");
background-repeat: no repeat;
background-position: left;
margin-top: -5px;
margin-left: 0px;
background-size: 5000px;

}

.doel .container{

  width: 80%;

  padding-top: 90px;
  padding-bottom: 120px;

}

.doel .tekst-container{

  margin-left: 17.25em;

}

.doel h1{

  font-size: 50px;
  margin-bottom: 45px;

  margin-left: 3px;

}

.doel p{

  font-size: 27px;
  width: 70%;
line-height: 35px;

  margin-left: 3px;

}

.doel img{

  width: 400px;
  margin-top: 75px;
margin-left: 3px;

}


/* WAT IK DOE */


.wat-ik-doe {

  background-color: #EDEDED;
  background-image: url("./img/SVG/DESIGN_WIT LETTERS.svg");
background-repeat: repeat;
  background-size: 2200px;
  background-position: center;



}

.wat-ik-doe .container{

  padding-top: 100px;
  padding-bottom: 235px;

}

.wat-ik-doe h1{

  font-size: 50px;
  color: var(--main);

  margin-left: 5.8em;

}

.wat-ik-doe .bollen{

  margin-top: 75px;
  text-align: center;

}

.wat-ik-doe .bol-1-en-2, .bol-3-en-4{

  display: flex;
  justify-content: center;
  align-items: center;

}

.wat-ik-doe .bol-container{

  width: 75%;

}

.wat-ik-doe .bollen .bol-groen{

  display: flex;
  justify-content: center;
  align-items: center;

  width: 525px;
  height: 525px;

  margin: 20px;

  background-image: url("./img/SVG/CIRKEL_GROEN.svg");
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center;

  color: var(--main);

}

.wat-ik-doe .bollen .bol-grijs{

  display: flex;
  justify-content: center;
  align-items: center;

  width: 525px;
  height: 525px;

  margin: 20px;

  background-image: url("./img/SVG/CIRKEL_BLAUW.svg");
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center;

  color: var(--third);


}

.wat-ik-doe .bollen h2{

  font-size: 200%;
  margin-bottom: 25px;

}

.wat-ik-doe .bollen p{

  font-size: 100%;

}


/* WERKWIJZE (LEF) */

.werkwijze {

  display: flex;
  justify-content: center;
  align-items: center;

}

.werkwijze .container{

  width: 100%;
  
  padding-top: 90px;
  padding-bottom: 100px;

  color: var(--third);

}

.werkwijze .tekst-container{

  margin-left: 17.25em;

}

.werkwijze .tekst-container .tekst-1{

  width: 35%;
  float: left;

}

.werkwijze .tekst-container .tekst-2{

  width: 35%;

  margin-top: 112px;
  margin-right: 20em;

  float: right;

}

.werkwijze h1{

  font-size: 50px;
  margin-bottom: 50px;

}

.werkwijze p{

  font-size: 25px;

  margin-left: 5px;
  margin-bottom: 40px;
line-height: 35px;

}

.werkwijze .groen{

  color: var(--secondary);

}

/* ERVARING */

.ervaring{

  color: var(--main);

  background-image: url("./img/SVG/BIG BRAUND ROZE.svg");
  background-size: 400px;
  background-repeat: repeat;
  <!--background-position: 100.4% -35px;-->  
background-position: left;

  background-color: #FFC0CB;

}

.ervaring .container{

  width: 70%;

  padding-top: 90px;
  padding-bottom: 100px;

}

.ervaring .tekst-container{

  margin-left: 17.25em;

}

.ervaring h1{

  font-size: 50px;
  margin-bottom: 45px;

}

.ervaring p{

  font-size: 25px;
  width: 75%;

  margin-left: 3px;
  margin-bottom: 20px;
line-height: 35px;

}

/* CONTACT */

footer {

  display: flex;
  justify-content: center;
  align-items: center;

}

footer .container{

  padding-top: 80px;
  padding-bottom: 200px;

  width: 100%;

}

footer .tekst{

  width: 28%;

  margin-left: 19.5em;

  float: left;

}

footer .tekst h1{

  color: var(--third);
  font-size: 50px;

  margin-bottom: 45px;
  margin-left: 3px;

}

footer .tekst p{

  width: 80%;

  margin-left: 4px;

  color: var(--secondary);
  font-size: 20px;

}

footer .tekst .contact-manieren{

  margin-top: 33px;
  margin-left: 4px;

}

footer .tekst span, footer .tekst a{

  color: var(--third);
  font-size: 20px;

}

footer .tekst .media{

  display: flex;
  justify-content: start;
  align-items: center;

  margin-top: 33px;
  margin-left: 2px;

}

footer .tekst .media img{

  width: 40px;
  margin-right: 15px;

}

footer .tekst .media img:hover{

  transform: scale(105%);

}

footer .tekst .logo{

  width: 50%;

  margin-top: 42px;
  margin-left: 5px;

}

footer .contact-formulier{

  width: 30%;

  margin-right: 19em;

  float: right;

}

footer .contact-formulier .info-container .namen, footer .contact-formulier .info-container .contacten{

  display: flex;
  justify-content: space-between;
  align-items: center;

}

footer .contact-formulier .input-container{

  width: 100%;
  margin-right: 30px;
  margin-bottom: 10px;

}

footer .contact-formulier label{

  color: var(--secondary);
  font-size: 18px;

}

footer .contact-formulier .info-container input{

  width: 100%;

  border: none;
  outline: none;

  font-size: 22px;

  margin-top: 7px;

  padding-bottom: 35px;
  padding-left: 10px;
  padding-top: 10px;

  color: var(--main);
  background-color: var(--secondary);

}

footer .contact-formulier .bericht-container{

  width: 96%;

}

footer .contact-formulier .bericht-container textarea{

  width: 99%;
  height: 100%;

  border: none;
  outline: none;

  font-size: 22px;

  margin-top: 10px;

  padding-bottom: 40px;
  padding-top: 10px;
  padding-left: 10px;

  resize: none;

  color: var(--main);
  background-color: var(--secondary);

}

footer .contact-formulier #verzend{

  cursor: pointer;

  width: 96.5%;
  height: 60px;

  border: none;

  font-size: 17px;
  margin-top: 15px;

  background-color: #FFC0CB;

  transition: .25s;

}

footer .contact-formulier #verzend:hover{

  background-color: #dfdede;
  transition: .25s;

}

footer #confirm{

  display: none;
  text-align: center;

  color: var(--secondary);

  font-size: 18.5px;
  margin-top: 25px;

}


/* OVERIG */

.open-menu {

  transform: translateY(0%) !important;
  transition: .5s;

}

.rotate-pijl{

  transform: rotate(180deg) !important;
  transition: .5s;

}

.show-confirm{

  display: block !important;

}

.swiper{

  width: 100%;
  height: fit-content;

  overflow-y: visible;

}

.swiper-slide img{

  width: 100%;
  user-select: none;

}

.swiper .swiper-pagination{

  margin-bottom: 30px;

}

.swiper .swiper-pagination-bullet{

  background-color: var(--secondary);

  width: 13px;
  height: 13px;

  opacity: 1;

  transition: .125s;

}

.swiper .swiper-pagination-bullet:hover{

  transform: scale(125%);
  transition: .25s;

}

.swiper .swiper-pagination-bullet-active{

  background-color: var(--main);

}



/* inViewport */

@keyframes Slide_Top_To_Bottom {
  0% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateX(0);
  }
}


[data-inviewport="scale-in"] { 
  transition: .5s;
  transform: scale(0.85);
}

[data-inviewport="scale-in"].is-inViewport { 
  transform: scale(1);
}

[data-inviewport="fade"] { 
  transition: 2s;
  opacity: 0;
}

[data-inviewport="fade"].is-inViewport { 
  opacity: 1;
}

[data-inviewport="move-in"] { 
  transition: 1s;
  transform: translateX(-50%);
}

[data-inviewport="move-in"].is-inViewport { 
  transform: translateX(0%);
}

[data-inviewport="move-up"] { 
  transition: 1s;
  transform: translateY(20%);
}

[data-inviewport="move-up"].is-inViewport { 
  transform: translateY(0%);
}


/* MEDIA QUERIES */

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

  header .text-container{

    margin-left: 2.75em;
    padding-top: 10%;

  }

  .disciplines-en-aankondiging{

    display: block;
    height: 510px;
  
  }
  .disciplines-en-aankondiging .container{

    width: auto;

    margin-top: 45px;
    margin-bottom: 45px;

    margin-left: .75em;

  }

  .disciplines-en-aankondiging .disciplines{

    height: auto;
    width: 100%;

    margin-bottom: 33px;
    margin-left: 0;

    float: none;

  }


  .disciplines-en-aankondiging .disciplines-container{

    width: 100%;
    margin-left: .75em;

  }

  .disciplines-en-aankondiging .aankondiging{

    height: auto;

    margin-right: 0;
    float: none;

  }

  .disciplines-en-aankondiging .aankondiging .media-links{

    margin-left: 33px;

  }

  .introductie .position-container{

    padding-bottom: 45%;

  }

  .introductie .position-container .tekst-container{

    margin-left: 2.75em;

  }

  .introductie .tekst-1{

    width: 80%;
    margin-left: 0;

    float: none;

  }

  .introductie .tekst-2{

    width: 80%;

    margin-right: 0;
    margin-top: 55px;

    margin-left: 5px;

    float: none;

    z-index: 3;

  }


  .meer-info .container {

    margin-left: 2.75em;

  }


  .doel .tekst-container{

    margin-left: 2.75em;

  }

  .doel p{

    width: 77%;

  }

  .wat-ik-doe h1{

    margin-left: 0;
    text-align: center;

  }

  .werkwijze .container{

    padding-top: 0;

  }

  .werkwijze .tekst-container{

    display: block;

    margin-left: 2.5em;
    float: none;
  
  }

  .werkwijze .tekst-container .tekst-1{

    width: 100%;

  }

  .werkwijze .tekst-container .tekst-2{

    width: 100%;
    margin-right: 0;

    float: none;

  }

  .werkwijze p{

    width: 75%;

  }

  .ervaring{

    background-position: 101% -11.8px;

  }

  .ervaring .tekst-container{

    margin-left: 2.75em;

  }

  .ervaring .container p{

    width: 77%;

  }

  footer .container{

    display: block;
  
    padding-top: 85px;
    padding-bottom: 85px;
  
    margin-left: 2.75em;
  
  }

  footer .container .tekst{

    width: 100%;
    margin-bottom: 50px;

    margin-left: 0;
    float: none;

  }

  footer .container .tekst p{
  
    width: 70%;

  }

  footer .container .contact-formulier{

    width: 85%;

    margin-right: 0;
    margin-left: 10px;
    float: none;

  }

  footer .contact-formulier .info-container label{

    width: 25%;
    
  }

  footer .contact-formulier .info-container input{

    width: 100%;

  }

  footer .contact-formulier .bericht-container{

    width: 97%;
  
  }

  footer .contact-formulier .info-container .namen, footer .contact-formulier .info-container .contacten{

    display: block;
  
  }

  footer .contact-formulier .bericht-container textarea{

    width: 103%;
  
  }
  
  footer .contact-formulier #verzend{
  
    width: 101%;
    height: 70px;

    margin-top: 33px;
  
  }

}

@media only screen and (max-width: 1500px) {
  
  .introductie .logo-half{

    width: 30%;

  }

  .introductie .quote{

    width: 35%;
    margin-top: 150px;

  }

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

  .disciplines-en-aankondiging{

    display: block;
    height: 510px;
  
  }
  .disciplines-en-aankondiging .container{

    width: auto;

    margin-top: 45px;
    margin-bottom: 45px;

    margin-left: .75em;

  }

  .disciplines-en-aankondiging .disciplines{

    height: auto;
    width: 90%;

    margin-bottom: 33px;
    margin-left: 0;

    float: none;

  }


  .disciplines-en-aankondiging .disciplines-container{

    width: 100%;
    margin-left: .75em;

  }

  .disciplines-en-aankondiging .aankondiging{

    height: auto;

    margin-right: 0;
    float: none;

  }

  .disciplines-en-aankondiging .aankondiging .media-links{

    margin-left: 33px;

  }

  .introductie .position-container{

    padding-bottom: 45%;

  }

  .introductie .position-container .tekst-container{

    margin-left: 2.75em;

  }

  .introductie .tekst-1{

    width: 80%;
    margin-left: 0;

    float: none;

  }

  .introductie .tekst-2{

    width: 80%;

    margin-right: 0;
    margin-top: 55px;

    margin-left: 5px;

    float: none;

    z-index: 3;

  }


  .meer-info .container {

    margin-left: 2.75em;

  }


  .doel .tekst-container{

    margin-left: 2.75em;

  }

  .doel p{

    width: 77%;

  }

  .wat-ik-doe h1{

    margin-left: 0;
    text-align: center;

  }

  .werkwijze .container{

    padding-top: 0;

  }

  .werkwijze .tekst-container{

    display: block;

    margin-left: 2.5em;
    float: none;
  
  }

  .werkwijze .tekst-container .tekst-1{

    width: 100%;

  }

  .werkwijze .tekst-container .tekst-2{

    width: 50%;
    margin-right: 0;

    float: none;

  }

  .werkwijze p{

    width: 75%;

  }

  .ervaring{

    background-position: 101% -11.8px;

  }

  .ervaring .tekst-container{

    margin-left: 2.75em;

  }

  .ervaring .container p{

    width: 77%;

  }

  footer .container{

    display: block;
  
    padding-top: 85px;
    padding-bottom: 85px;
  
    margin-left: 2.75em;
  
  }

  footer .container .tekst{

    width: 100%;
    margin-bottom: 50px;

    margin-left: 0;
    float: none;

  }

  footer .container .tekst p{
  
    width: 70%;

  }

  footer .container .contact-formulier{

    width: 85%;

    margin-right: 0;
    margin-left: 10px;
    float: none;

  }

  footer .contact-formulier .info-container label{

    width: 25%;
    
  }

  footer .contact-formulier .info-container input{

    width: 100%;

  }

  footer .contact-formulier .bericht-container{

    width: 97%;
  
  }

  footer .contact-formulier .info-container .namen, footer .contact-formulier .info-container .contacten{

    display: block;
  
  }

  footer .contact-formulier .bericht-container textarea{

    width: 103%;
  
  }
  
  footer .contact-formulier #verzend{
  
    width: 101%;
    height: 70px;

    margin-top: 33px;
  
  }




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

    background-position: 101.5% -11.8px;

  }

}

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

  nav .container{

    width: 13em;


  }

  nav .container .logo{

    height: 210px;

  }

  header img{

    content: url("./img/Beelden/HEADER_BRAUND_MOBIEL.jpg");

  }

  .disciplines-en-aankondiging .container{

    margin-left: .25em;

  }

  .introductie .position-container{

    width: 100%;
  
    padding-top: 70px;
    padding-bottom: 100%;
  
    z-index: 2;
  
  }
  
  .introductie .logo-quote{

    width: 100%;

    margin-top: 50px;

    float: left;

  }

  .introductie .logo-half{

    width: 50%;
    transform: translateX(-12.05%);

    float: none;

    z-index: 1;

  }

  .introductie .quote{

    width: 65%;
    margin-top: 25px;
    margin-left: 2.75em;

  }

  .wat-ik-doe{

    background-image: none;

  }

  .wat-ik-doe .container{

    padding-bottom: 50px;

  }

  .wat-ik-doe .container h1{

    text-align: center;
    margin-left: 0;

  }

  .wat-ik-doe .center-bollen{

    display: flex;
    justify-content: center;
    align-items: center;

  }

  .wat-ik-doe .bollen{

    margin-top: 20px;

  }

  .wat-ik-doe .bol-1-en-2, .bol-3-en-4{

    display: block;

  }

  .wat-ik-doe .bollen .bol-groen{

    width: 500px;
    height: 500px;

    margin-bottom: 30px;

  }

  .wat-ik-doe .bollen .bol-grijs{

    width: 500px;
    height: 500px;
    
    margin-bottom: 30px;

  }


  .wat-ik-doe .bollen h2{

    font-size: 200%;
    margin-bottom: 10px;
  
  }
  
  .wat-ik-doe .bollen p{
  
    font-size: 105%;
  
  }

  /* .disciplines-en-aankondiging{

    height: auto;

  }

  .disciplines-en-aankondiging .container{

    display: block;
    width: 90%;

    margin-top: 45px;
    margin-bottom: 45px;

  }

  .disciplines-en-aankondiging .disciplines{

    margin-bottom: 33px;

  }

  .disciplines-en-aankondiging .aankondiging{

    width: 95%;

  }

  .disciplines-en-aankondiging .aankondiging .media-links{

    margin-left: 33px;

  }

  .introductie .position-container{

    padding-bottom: 100px;

  } 

  .introductie .center-container{

    display: block;
    margin-left: 33px;

  }

  .introductie .tekst-1{

    width: 85%;
    padding: 0;

  }

  .introductie .tekst-2{

    width: 85%;

    margin-left: 0;
    margin-top: 55px;

    padding: 0;

    z-index: 3;

  }

  .introductie .logo-half{

    position: relative;
    width: 350px;
    margin-top: 50px;

    transform: translate(-12%,0%);

  }

  .introductie .quote{

    width: 300px;

    margin-top: 40px;
    margin-left: 2.75em;
  
    transform: translate(0%, 0%);
  
  }

  .meer-info {

    background-position-x: 135%;

  }

  .meer-info .container {

    width: 60%;
    margin-left: 65px;

  }

  .meer-info .container p{

    font-size: 23px;
    width: 100%;

  }


*/
}


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

  nav .container{

    width: 10em;

  }

  nav .container .logo{

    height: 160px;

  }

  nav .container .menu-links li{

    margin-bottom: 12px;
  
  }

  .introductie .position-container{

    padding-bottom: 115%;
  
  }

  .meer-info .quote{

    width: 175%;
    margin-left: 2.5px;

  } 

  .wat-ik-doe .container h1{

    font-size: 45px;

  }

  .werkwijze .tekst-container{

    display: block;
  
  }

  .werkwijze .tekst-container .tekst-1{

    width: 100%;

  }

  .werkwijze .tekst-container .tekst-2{

    width: 100%;
    margin-left: 0;

  }

  .doel img{

    width: 80%;
    margin-left: 2.5px;

  }

  .doel p{

    width: 100%;

  }
  
  .ervaring .container{
  
    padding-top: 100px;
    padding-bottom: 75px;
  
  }
  
  .ervaring .tekst-container{

    margin-bottom: 25px;
  
  }

  .ervaring p{

    width: 100%;

  }
  
  .ervaring .img-container{
  
    display: flex;
    justify-content: center;
    align-items: start;

  }

  .ervaring .img-container img{
  
    content: url("./img/Beelden/ERVARING_MOBIEL.jpg");
    width: 133%;
  
  }

  .ervaring .verticaal-logo{

    display: none;

  }

  footer .container{

    margin-left: 3em;
  
  }

  footer .contact-formulier .info-container .namen, footer .contact-formulier .info-container .contacten{

    display: block;
  
  }

  footer .contact-formulier .bericht-container textarea{

    width: 100%;
  
  }
  
  footer .contact-formulier #verzend{
  
    width: 102%;
    height: 70px;

    margin-top: 33px;
  
  }

}

@media only screen and (max-width: 565px) {
  
  .wat-ik-doe .bollen .bol-groen{

    width: 400px;
    height: 400px;

    margin-bottom: 30px;

  }

  .wat-ik-doe .bollen .bol-grijs{

    width: 400px;
    height: 400px;
    
    margin-bottom: 30px;

  }

  .wat-ik-doe .bollen h2{

    font-size: 175%;
    margin-bottom: 2px;

  }

  .wat-ik-doe .bollen p{

    font-size: 90%;

  }

  .ervaring{

    background-position: 102.5% -11.8px;

  }

}

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

    height: 90vh;
    background-image: url("./img/Beelden/HEADER_BRAUND_MOBIEL.jpg");

  }

  header .text-container{

    display: none;

  }

  .introductie .mobiel-text{

    display: block;

  }

  .meer-info .container {

    width: 50%;

  }

  footer .contact-formulier .info-container label{

    width: 25%;
    
  }

  footer .contact-formulier .info-container input{

    width: 96%;

  }

  footer .contact-formulier .bericht-container textarea{

    width: 100%;

  }

  footer .contact-formulier #verzend{
  
    width: 99%;
  
  }

}

@media only screen and (max-width: 425px) {
  
  .disciplines-en-aankondiging{

    height: 610px;
    
  }

  .disciplines-en-aankondiging .container{

    margin-left: .75em;

  }

  .disciplines-en-aankondiging .aankondiging{

    display: block;
    margin-left: 15px;

  }

  .disciplines-en-aankondiging .aankondiging .aankondiging-container{

    display: block;
    
  }

  .disciplines-en-aankondiging .aankondiging .aankondiging-container .media-links{

    display: flex;
    justify-content: center;
    align-items: center;

    margin-left: 55px;
    margin-top: 25px;

  }

  .disciplines-en-aankondiging .aankondiging .aankondiging-container .media-links img{

    width: 50px;
    margin-right: 15px;

  }

  .ervaring{

    background-position: 103.5% -11.8px;

  }

  footer .contact-formulier #verzend{
  
    width: 101%;
  
  }

}

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

  .wat-ik-doe .bollen .bol-groen{

    width: 350px;
    width: 350px;

    margin-bottom: 30px;

  }

  .wat-ik-doe .bollen .bol-grijs{

    width: 350px;
    width: 350px;
    
    margin-bottom: 30px;

  }

  .wat-ik-doe .bollen h2{

    margin-bottom: 2px;

  }

  .wat-ik-doe .bollen p{

    font-size: 75%;

  }

  footer .contact-formulier .info-container label{

    width: 25%;
    
  }

  footer .contact-formulier .info-container input{

    width: 96%;

  }

  footer .contact-formulier .bericht-container textarea{

    width: 100%;

  }

}

@media only screen and (max-width: 400px) {
  
  .wat-ik-doe .bollen .bol-groen{

    width: 275px;
    height: 275px;

  }

  .wat-ik-doe .bollen .bol-grijs{

    width: 275px;
    height: 275px;

  }

  .wat-ik-doe .bollen h2{

    font-size: 115%;

  }
  
  .wat-ik-doe .bollen p{
  
    font-size: 62%;
  
  }

  .ervaring{

    background-position: 104.5% -11.8px;

  }

}

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

  .disciplines-en-aankondiging{

    height: 600px;

  }
  
  .disciplines-en-aankondiging .container{

    margin-left: 0;
    width: 100%;

  }

  .disciplines-en-aankondiging .disciplines-container{

    width: 100%;
    margin-left: .5em;
    
  }

  .disciplines-en-aankondiging .disciplines li{

    margin-top: 17px;
    font-size: 25px;

    
  
  }

  .disciplines-en-aankondiging .aankondiging .bol{

    width: 50%;
    height: 200px;

  }

  .disciplines-en-aankondiging .aankondiging .bol h1{

    font-size: 27px;

  }

  .introductie .position-container .tekst-container{

    margin-left: 1.5em;

  }

  .meer-info .container{

    margin-left: 1.5em;
    width: 61%;

  }

  .meer-info .quote{

    width: 100%;

  }

  .werkwijze .container .tekst-container{

    margin-left: 1.25em;

  }

  .ervaring{

    background-position: 106% -11.8px;

  }

  .ervaring .container{

    margin-left: 1.5em;
    width: 95%;

  }
  
  footer .container{

    margin-left: 1.9em;

  }

  footer .container .tekst h1{

    font-size: 50px;

  }

  footer .container .tekst p{

    width: 88%;

  }

  footer .container .tekst .contact-manieren{

    width: 50%;

  }

  footer .container .tekst .contact-manieren .logo{

    width: 100%;

  }

  footer .contact-formulier .info-container label{

    width: 25%;
    
  }

  footer .contact-formulier .info-container input{

    width: 96%;

  }

  footer .contact-formulier .bericht-container textarea{

    width: 100%;

  }

}