:root {
  --kleur1: #512A5B;
  --kleur2: #DF006E;
  --kleur3: #ED6b06;
  
  
}
.menu {
    background-color: rgba(81, 42, 91, 0.85); /* Overlay background */
}

.tegel-logo{
  background-image: url("../images/logo-website.png");
  background-size: 100% auto;
  background-position: bottom;
  background-repeat: no-repeat;
  background-color: var(--kleur1);

}

.tegel-1, .tegel-adres, .tegel-links{
  background-color: var(--kleur1);
}

.footer{
  background-color: var(--kleur1);
}

.footer-wb-tekst{
  color:var(--kleur1);
}

.tegel-2, .tegel-subkop{
  background-color: var(--kleur2);  
}

.tegel-3, .tegel-trots{
  background-color: var(--kleur3);  
}

.tekstkleur1 {
  font-family: 'supria-sans';
  color: var(--kleur1); /*zelfde als kleur1 */
}
a, .link {
  color: var(--kleur2); /*zelfde als kleur1 */
}
a:hover, .link:hover {
  color: var(--kleur1); /*zelfde als kleur2 */
}

.link-adres:hover {
  color: white; 
  text-decoration: underline;
}


@media (min-width:768px) {
  .img-leerlingenzorg {
    background-image: url("../images/llzorg.png");
    background-size: auto 100%;
    background-position: 0 100%;
    background-repeat: no-repeat;
    display: block;
  }
  .img-onze-school {
    background-image: url("../images/onzeschool.png");
    background-size: auto 100%;
    background-position: 100% 0%;
    background-repeat: no-repeat;
    display: block;
  }
  .tekst-llzorg{
    padding-left:40%;
  }
  .tekst-onzeschool{
    padding-right:40%;    
  }
}