*{
    margin: 0;
    padding: 0;
}
body {
    background-color: #FFFFFF;
    overflow-x: hidden;
}

.navigatie {
  z-index: 2;
  position: fixed;
  top: -1px;
  left: -1px;
  box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.35);
    background-color: #FFFFFF;
    text-align: center;
    width: 100%;
    max-height: 10%;
    overflow: hidden;
    display: flex; 
    align-items: center; 
    justify-content: space-between;
}
.navigatieLinks{
    font-family: "Roboto", sans-serif;
    color: #003082;
    text-decoration: none;
    font-weight: bold;
    font-size: larger;
    
}

footer{
  width: 100%;
  justify-content: space-between;
  box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.35);
  background-color: #FFFFFF;
  max-height: 10%;
  padding: 10px;
  font-family: "Roboto", sans-serif;
  font-weight: lighter;
}
.footerlinks{
  text-decoration: none;
  text-align: center;
}

.logo{ 
    float: left;
    height: 8vh;
    width: auto;
    min-width: 50px;
    object-fit: contain;
}



@media (max-width: 768px) {  /* Adjust breakpoint as needed */
    .logo {
      width: 30%;  /* Adjust width for smaller screens */
    }
    .navigatieLinks {
      font-size: smaller; /* Adjust font size for smaller screens (optional) */
    }
  }
  

* {
    box-sizing: border-box;
  }


  .row::after {
    content: "";
    clear: both;
    display: table;
  }

.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}

[class*="col-"] {
    float: left;
    margin: 1px;
    
  }

.hoofdArtikel{
    z-index: 1;
    border-radius: 7px;
    position: relative;
    margin-right: 10px;
    
    transition: transform .2s;
}
.hoofdArtikel:hover{
  transform: scale(1.02);
}

.titel{
  
  font-weight:700;
  z-index: 1;
  font-family: Effra-Bold, Helvetica, Arial, sans-serif;
  margin-top: -4%;
  margin-left: 0.5%;
  color: white;
  text-align: left;
  position: relative;


  transition: transform .2s;

}


.mobiel-titel{
  display: none;
  z-index: 0; 
}




.textOverlay{
    position: relative;
    text-align: center;
    color: white;

}

.artikel{

    object-fit: cover;
    height: 33vh;
    position: relative;
    margin-bottom: 10px;
    border-radius: 7px;



    transition: transform .2s;
}
.artikel:hover{
  transform: scale(1.02);
  
}
.artikel:hover .titel{
  color:  #005CA0 !important;
  
}

.artikel-container{
  
  height: 227px;
  width: auto;
  overflow: hidden; 

}
.divider{
  height: 5px;
  background: black;
  position: relative;
}

.artikelTitel{
  margin-left: 0.5%;
  z-index: -1;
  position: relative;
  text-align: left;
  font-family: "Roboto", sans-serif;
  color: black;
}

.onderartikelTitel{
  position: relative;
  text-align: left;
  font-family: "Roboto", sans-serif;
  color: black;
  overflow: hidden;
  margin-left: 34%;
}

.artikelTekst{
  margin-left: 0.4%;
    text-align: left;
    font-family: "Roboto", sans-serif;
    color: rgb(102, 102, 102);
    overflow: hidden;
}

@media (max-width: 1500px) {  /* Adjust breakpoint as needed */
  

  .titel{
    margin-top: -8%;
  }
  
}

@media (max-width: 1350px) {  /* Adjust breakpoint as needed */
  

  .titel{
    margin-top: -12%;
  }
  
}

  @media (max-width: 1100px) {  /* Adjust breakpoint as needed */
    .artikelTekst {
      font-size: small;
    }
  }
  @media (max-width: 900px) {  /* Adjust breakpoint as needed */
    .artikelTekst {
      font-size: xx-small;
    }
  }

  @media (max-width: 768px) {
    .hoofdArtikel{
        width: 91.66%;
    }


    .mobiel-titel{
      display:block;
      font-family: "Roboto", sans-serif;
      color: #070721;
      margin-bottom: 10px;
      text-align: left;


    
    }
    .titel{
      display: none;
    }



    .textOverlay {
        display: flex;
        flex-direction: column; /* Stack elements vertically */
    }
    .artikelTekst {
        margin-top: 5px;
        width: 30vw;
        max-height: 70px;
        text-overflow: ellipsis;

    }
    .artikelTitel{
      width: 50%;
      font-size: 12px;
      margin-top: 5px; /* Adjust spacing as needed */
    margin-bottom: -5px; 
    z-index: -1;
    }
    .onderartikelTitel{
      font-size: 12px;
      margin-bottom: -5px;
    }
    .artikel{
        width: 120px;
        height: 80px;
        margin-top: 10px;
        display: flex;
        align-items: flex-start;
        flex-direction: column;
    }

        .radar {
          padding: 8.33% 0% 8.33% 8.33%;
          min-width: 92.66%;
          min-height: 800px; /* Set the height as needed */
            

        }
    }


      @media (min-width: 768px) {
        .radar{
           margin: 10px;
        }
    }



    
  .radar{
    margin-top: -15px;
    margin-left: 5px;
    border-radius: 15px;
    border-style: solid;
    width: 25%;
    height: 250px;

  }