body, html {
  height: 100%;
  margin: 0;
  background-color: #000000;
}

/* ---------- hieronder tekstkleur ------------- */
p {color: #FFFFFF} 




/* ---------- hieronder scrolbar ------------ */

/* width */
::-webkit-scrollbar {
  width: 20px;
}

/* Track */
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px #000000;
  border-radius: 10px;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: red;
  border-radius: 10px;
}

--------

. bgimg-1 {
  position: relative;
  opacity: 0.65;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.bgimg-1 {
  background-image: url("../images/collage3.jpg");
  height: 50%;
}
.container3 {
  color: #000000;
  background-color: #000000;



}
p {
  font-family: 'Prata', serif;
  line-height: 170%;



}
/* ---------- begin navigatie ------------- */
.navbar a {
    color: #FFFFFF;
    font-size: 1.2em;
    font-family: 'Open Sans', sans-serif;

}
.navbar a:hover {
    color: #FFFFFF;
}
.nav-link.active {
    border-bottom: 2px solid black;
}
/* ---------- blokje met titel hieronder ------------- */


.textfoto {
  background-color: rgb(255, 255, 255, 0.5);
  width: 50%;
  margin: 200px auto;
  padding: 50px;
  color: #FFFFFF;
  text-align: center;
}

.ruimtetopbottom {
  margin-top: 50px;
  margin-bottom: 50px;
}
/* ------------ begin card ------------ */
.card {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
color: #FFFFFF;
  position: relative;
  
  width: 600px;
  height: 400px;
  overflow: hidden;

  border-radius: 5px;


}



.image {
  opacity: 1;
  display: block;
  width: 100%;
  height: auto;
  transition: .5s ease;
  backface-visibility: hidden;
}

.middle {
  transition: .5s ease;
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
}

.container:hover .image {
  opacity: 0.3;
}

.container:hover .middle {
  opacity: 1;
}

.text {
  background-color: white;
  color: #FFFFFF;
  font-size: 16px;
  padding: 16px 32px;
}

/* ------------ einde card ------------ */

/* ------------ begin footer ------------ */
.footer {
  background-color: #000000;
  color: white;
}
.ruimtetop {
  padding-top: 40px;
  padding-bottom: 40px;
  padding-left: 100px;
}
.footer a {
    color: white;
    font-size: 1em;
    font-family: 'Open Sans', sans-serif;
}
.footer a:hover {
    color: white;
}

.oefening1:hover{ 
  transform: scale(1.10);
  transition: all 0.3s ease-in-out;

 }

.oefening2:hover{ 
  transform: scale(1.20);
  transition: all 0.3s ease-in-out;
  
  }

.oefening3:hover{ 
  transform: scale(1.05);
  transition: all 0.3s ease-in-out;
  
  }

.oefening4:hover{ 
  transform: scale(1.02);
  transition: all 0.3s ease-in-out;
  
  }








.card_part {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 7;

  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  
  transform: translateX( 700px );
  background-image: <img src=images/slideshow1.jpg class=card-img-top alt=...>;
  
  animation: opaqTransition 28s cubic-bezier(0, 0, 0, 0.97) infinite;
}


.card_part.card_part-two {
  z-index: 6;
  background-image: <img src=images/slideshow2.jpg class=card-img-top alt=...>;
  animation-delay: 7s;
}

.card_part.card_part-three {
  z-index: 5;
  background-image: <img src=images/slideshow3.jpg class=card-img-top alt=...>;
  animation-delay: 14s;
}

.card_part.card_part-four {
  z-index: 4;
  background-image: <img src=images/slideshow3.jpg class=card-img-top alt=...> ;
  animation-delay: 21s;
}


@keyframes opaqTransition {
  3% { transform: translateX( 0 ); }
  25% { transform: translateX( 0 ); }
  28% { transform: translateX( -700px ); }
  100% { transform: translateX( -700px ); }
}
/* ------------ einde footer ------------ */