/* hele document */
body {
  background-color: #ccc;
  margin: 0;

  font-family: sans-serif;
}
main{
  margin: 2.5rem 3% 2rem 3%;
}
section.wrapper-horz{
  justify-content: center;
  text-align: center;
}
section.special-margin{
  margin-left: 4rem;
}
a{
  text-decoration: none;
  color: black;
}
img{
  height: clamp(200px, 35vh, 900px);
}
.wrapper-horz{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 10px;
}
.wrapper-vert{
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  gap: 10px;
}






/* ______________________index______________________ */
.achtergrond-opacity{
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;

  background-color: rgb(53, 105, 102);

  z-index: -1;
}
.achtergrond-image{
  margin: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
  opacity: 0.4;
}

.titel-wrapper{
  display: flex;
  justify-content: center;
  margin-top: 2rem;
}
.titel_inleiding{
  width: clamp(280px, 70%, 800px);

  padding: 10px;

  color: white;
  text-align: center;

  background-color: darkblue;
  border-radius: 10px;
  opacity: 0.6;
}

figure{
  display: flex;
  flex-direction: column;

  width: 300px;

  margin: 10px 10px 0 0;

  opacity: 0.9;

  border: 1px solid black;
  border-radius: 10px;
}
figure:hover{
  opacity: 0.7;
}
figcaption{
  text-align: center;
  font-size: 20px;
  margin: 10px;
}
figure>img{
  border: 0 !important;
  border-radius: 10px 10px 0 0;
}






/* ______________________Rubrieken______________________ */
.speciaal{
  width: 40%;
  border: 1px solid black;
}
img{
  border: 1px solid transparent;
  border-radius: 1%;
}
img:not(#img_popup):hover{
  border: 1px solid black;
}



/* tekst */
h1 {
  font-size: 50px;
  margin: 2rem 0 2rem 0;
}
h2 {
  font-size: 40px;
  text-align: center;
  margin: 20px;
}
p {
  text-align: center;
  font-weight: bold;
  font-size: 20px;
  margin: 10px;
}
br {
  clear: left;
}
.p_in_rubriek{
  text-decoration: none;
  color: black;
  height: 15%;
}
.p_in_speciaal{
  height: 9.55%;
  text-decoration: none;
  color: black;
}
.left {
  text-align: left;
}




/* navbar en plaatje */
iframe {
  width: 40%;
  height: 700px;
  margin: 40px;
}

ul{
  margin-left: 10%;
  padding: 0px;
  width: 80%;
  overflow: hidden;
  list-style-type: none;
  border-radius: 10px;
  border: 1px solid black;
}
ul:not(.ul_popup){
  background-color: rgb(130, 130, 130);
}
ul.ul_popup{
  background-color: darkgrey;
  z-index: 101;
}
 
li{
  user-select: none;
}
li a{
  text-decoration: none;
  color: black;
  padding: 20px;
  text-align: center;
  float: left;
  /* border: 1px solid black; */
  font-size: 25px;
}
li.li_popup{
  color: black;
  padding: 20px;
  text-align: center;
  float: left;
  /* border: 1px solid black; */
  font-size: 25px;
}
.active{
  background-color: rgb(159, 197, 93);
  color: white;
}
.bar_rechts{
  float:right;
}

li:hover:not(.active){
  background-color: #555;
  color: white;
}
li a:hover:not(.active){
  background-color: #555;
  color: white;
}
.veel{
  width: auto;
  cursor: pointer;
}





/*achtergronden*/
.achtergrond{
  background: url("assets/20.jpg") no-repeat fixed transparent;
  width: 100%;
  height: 1700px;
}
.achtergrond_2{
  background-color: rgba(64, 224, 208, 0.5);
  padding: 20px;
  max-width: 100%;
  height: 1670px;
}
.achtergrond_h{
  background: url("assets/hout.jpg");
  background-repeat:repeat;
  max-width: 100%;
}
.achtergrond_h2{
  background-color: rgba(197, 143, 95, 0.7);
  padding: 20px;
  max-width: 100%;
}




/* rubrieken */
.rubriek{
  height: 400px;
  width: fit-content;
  border: 2px solid rgb(177, 130, 238);
  margin: 0 10px 10px 0;
  border-radius: 10px;
  float: left;
}
.rubriek:hover{
  border: 2px solid black;
  opacity: 0.7;
}
.rubriek>img{
  border: 0 !important;
}
#rubriek_benp{
  background-color: lightgreen;
}
#rubriek_p{
  background-color: rgb(76, 43, 226);
}
#rubriek_f{
  background:url("assets/hout_rubriek.jpg");
}
#rubriek_e{
  background-color: rgb(175, 175, 142);
}
figure.rubriek_e{
  background-color: rgb(175, 175, 142);
  height: fit-content;
  width: 400px;
}
figure.rubriek_e > img{
  height: auto;
  border-radius: 0 0 2% 2%;
}
figure.rubriek_e > figcaption{
  margin: 1rem auto 1rem auto;
}
#rubriek_l_a{
  background-color: darkolivegreen;
}
#rubriek_l_d{
  background-color: rgb(155, 192, 89);
}
#rubriek_d{
  background-color: dimgray;
}
#rubriek_b{
  background-color: peru;
}
#rubriek_dv{
  background-color: rgb(230, 194, 104);
}
.img_in_r{
  width: 99.7%;
  height: 85%;
  border: 1px solid black;
  margin: 0px;
}




/*popup*/
#popup {
  z-index: 100;
  display: none;
  position: fixed;
  width: 100%;
  background: rgb(209, 209, 209);
  height: 100%;
}
#img_popup{
  position: absolute;
  top: 130px;
  height: auto;
  max-height: 75%;
  border: 1px solid black;
}
#bar_rechts{
  float: right;
}




/*anders*/
#doc1 {
  margin-left: 40px;
}
#doc2 {
  margin-left: 43%;
}