/* CSS Document */

/* menu */
/* Hide header by default */
header {
    display: none;
}


body {
  background-color: #f5f5f5;
}

/* Show header only on small screens */
@media (max-width: 767px) {
    header {
        display: block;
        background-color: rgba(255,255,255,1.00);
        color: #333;
        padding: 5px 0; /* Reduce padding to decrease height */
        position: fixed;
        width: 100%;
        top: 0;
        left: 0;
        z-index: 1000;
    }

    nav {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 10px; /* Adjust padding for inner spacing */
        position: relative;
    }

    .menu-icon {
        display: block;
        cursor: pointer;
        margin-right: 20px; /* Add space between the icon and the text */
        font-size: 24px; /* Adjust font size if needed */
        color: #333; /* Icon color */
    }

    .menu {
        list-style: none;
        margin: 0;
        padding: 0;
        display: none;
        flex-direction: column;
        width: 100%;
        position: absolute;
        top: 100%;
        left: 0;
        z-index: 999;
    }

    .menu li {
        margin: 10px 0;
        text-align: center;
        padding: 0; /* Remove padding from list items */
    }

    .menu li a {
        color: white; /* Text color of list items */
        text-decoration: none;
        display: block;
        padding: 0px 0; /* Adjust padding for clickable area */
    }

    .menu.active {
        display: flex;
    }
}

/* einde menu */ 


.pagina {
  width: 100%;
  /* volgende regels nodig? */
  padding-right: 0.75;
  padding-left: 0.25;
  /***********************/
  margin-right: auto;
  margin-left: auto;
}
ul {
  margin-top: 0em;
}
table {
  border-spacing: 0;
  border: 0
}
.tekstkolom-rechts {
  padding-left: 10px;
  margin-bottom: 1em;
}
.afbeeldingkolom-links {
  padding-right: 10px;
}
.afbeeldingkolom-rechts {
  padding-left: 10px;
}
.tegels, .tegels-center, .footer {
  display: grid;
  grid-template-columns: 100%;
  grid-gap: 0px;
}
.grid-socials {
  display: grid;
  grid-template-columns: auto auto auto auto;
  grid-gap: 5px;
  padding-top: 15px;
}
.footer-adres {
  padding-left: 15px;
}
.footer {
  margin-top: 10px;
  height: 160px;
  padding: 0px 0 0 0;
  display: grid;
  grid-template-columns: 100%;
  grid-gap: 0px;
}
.tegels {
  grid-auto-rows: minmax(100px, auto);
}
strong, .tekst-kop, .tekst-kop-klein {
  font-weight: 800;
}
.tegel-tekst {
  background-color: white;
  padding: 15px;
}
.link-adres {
  font-size: 16px;
  color: white;
  text-decoration: none;
  font-weight: 100;
}

.tekst-wit {
  color: white;
}

.tabel-4kolom {
  display: grid;
  grid-template-columns: auto auto auto auto;
  grid-auto-rows: auto;
}
.tabel-3kolom {}
.tabel-2kolom {
  display: grid;
  grid-template-columns: auto auto;
  grid-auto-rows: auto;
  grid-gap: 1em;
  max-width: 100%;
}
.tabel-2kolom-half {
  display: grid;
  grid-template-columns: 100%;
  grid-auto-rows: auto;
  grid-gap: 1em;
  max-width: 100%;
}
.tabel-2kolom img {
  max-width: 100%;
}
.socials {
  height: 40px;
  width: 40px
}
.tekst-schoolnaam {
  font-weight: 800;
  font-size: 36px;
  color: white;
}
.tegel-1, .tegel-2, .tegel-3, .tegel-4 {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  position: relative;
}
.tegel-trots {
  position: relative;
}
.tegel-1, .tegel-2, .tegel-3, .tegel-4, .tegel-subkop, .tekst-trots-titel {
  font-weight: 800;
  font-size: 32px;
  color: white;
}



.tegel-subkop {
  display: flex;
  align-items: center;
  position: relative;
  padding: 24px 24px 24px 24px;
  font-size: 45px;
  line-height: 50px;
}
.tegel-inhoudsub {
  color: black;
  padding: 10px;
  padding-right: 0px;
}
.tegel-1, .tegel-2, .tegel-3, .tegel-4, .tegel-inhoudsub, .tegel-adres, .tegel-slides, .tegel-logo, .tegel-tekst, .tegel-links, .tegel-subkop, .tegel-trots {
  order: 100;
}
.tegel-links {
  position: relative
}
.tegelonder {
  position: absolute;
  bottom: 0;
}
.tegel-trots {
  padding: 0px 24px;
		  display: none;
}
.tekst-trots-titel {
  font-weight: 800;
  line-height: 32px;
  padding-bottom: 14px;
  padding-top: 14px;
}
.tekst-trots {
  display: flex;
  align-items: center;
  position: relative;
  padding: 16px 0px 0px 0px;
  font-size: 20px;
  color: white;
}
.tegel-3 {
  background-color: #FFFFFF;
}
.tegel-logo {
  position: relative;
}
.footer-wb {
  color: white;
  font-weight: 800;
  font-size: calc(30px + 1vw);
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  position: relative;
  padding-left: 40%;
}
.tegel-adres {
  padding: 10px;
}
.tegelspan-2 {
  grid-column-start: span 1;
}
.tegelspan-3 {
  grid-column-start: span 1;
}
.tegelspan-4 {
  grid-column-start: span 1;
}
.tegel-slides {
  grid-column-start: span 1;
  height: calc(100vw * 0.32);
}
.img-meisjeloep {
  background-image: url("https://www.skor-scholen.nl/images/meisjesvergrootglas2.png");
  background-size: auto 100%;
  background-position: 100% 0%;
  background-repeat: no-repeat;
}
.img-wbbg {
  background-image: url("https://www.skor-scholen.nl/images/werkenbij-bg.png");
  background-size: auto 180px;
  background-position: right bottom;
  background-repeat: no-repeat;
}
#SkorSlides div {
  position: absolute;
  width: 100%;
}
#SkorSlides div:nth-of-type(1) {
  animation-name: fader;
  animation-delay: 4s;
  animation-duration: 1s;
  z-index: 20;
}
#SkorSlides div:nth-of-type(2) {
  z-index: 10;
}
#SkorSlides div:nth-of-type(n+3) {
  display: none;
}

body {
  font-family: 'supria-sans';
  margin: 0px;
}
a {
  text-decoration: none;
  font-weight: 800;
}
.stretched-link::after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  content: ""
}
.cijfer {
  width: 30px;
  display: block;
  margin-left: auto;
  margin-right: 0.5rem;
}
img {
  max-width: 100%;
}
img.pdf {
  width: 40px;
}
@keyframes fader {
  from {
    opacity: 1.0;
  }
  to {
    opacity: 0.0;
  }
}
@media (max-width:767px) {
  .order-0 {
    display: none;
  }
  .order-1 {
    order: 1;
  }
  .order-2 {
    order: 2;
  }
  .order-3 {
    order: 3;
  }
  .order-4 {
    order: 4;
  }
  .order-5 {
    order: 5;
  }
  .order-6 {
    order: 6;
  }
  .order-7 {
    order: 7;
  }
  .order-8 {
    order: 8;
  }
  .hoogte-logo {
    height: 400px;
  }
  .footer-wb {}
}
@media (min-width:768px) {
  :root {
    --breedte: 768px;
  }
  body {
    font-size: calc(var(--breedte) / 70);
    line-height: calc(var(--breedte) / 50);
  }
  .tabel-2kolom-half {
    display: grid; 
    grid-template-columns: 50% auto;
    grid-auto-rows: auto;
    grid-gap: 1em;
    max-width: 100%;
  }
  .tabel-3kolom {
    display: grid;
    grid-template-columns: 33% auto auto;
    grid-auto-rows: auto;
    grid-gap: 0.5rem;
  }
  .tegels-center {
    grid-template-columns: 10% 80% 10%;
  }
  .tekst-kop {
    font-size: calc(var(--breedte) / 50);
  }
  .tekst-kop-klein, strong {
    font-size: calc(var(--breedte) / 60);
  }
  .tegel-1, .tegel-2, .tegel-3, .tegel-4, .tekst-trots-titel {
    font-size: calc(var(--breedte) / 38);
    line-height: calc(var(--breedte) / 38);
    ;
  }
  .tegel-subkop {
    font-size: calc(var(--breedte) / 26);
    line-height: calc(var(--breedte) / 26);
  }
  .tekst-schoolnaam {
    font-size: calc(var(--breedte) / 40);
  }
  .link-adres {
    font-size: calc(var(--breedte) / 70);
  }
  .tegel-subkop {
    padding: 0px calc(var(--breedte) / 55);
  }
  .tegel-trots {
    padding: 0px calc(var(--breedte) / 55);
	  display:block;
  }
  .tekstkolom-rechts {
    padding-left: calc(var(--breedte) / 55);
  }
  .tegel-inhoudsub {
    padding: calc(var(--breedte) / 55);
    padding-right: 0px;
  }
  .tekst-trots-titel {
    font-weight: 800;
    line-height: calc(var(--breedte) / 40);
    padding-bottom: calc(var(--breedte) / 190);
    padding-top: calc(var(--breedte) / 55);
  }
  .tekst-trots {
    font-size: calc(var(--breedte) / 60);
    padding: calc(var(--breedte) / 85) 0px 0px 0px;
  }
  .cijfer {
    width: calc(var(--breedte) / 40);
    position: absolute; /*nodig voor top*/
    top: calc(var(--breedte) / 80); /*omdat het middelpunt van een img de positie bepaalt moet deze lager komen dan top 0 */
  }
  .trotsregel {
    min-width: calc(var(--breedte) / 30);
    height: calc(var(--breedte) / 35);
  }
  .footer {
    margin-top: calc(var(--breedte) / 140);
    height: calc(var(--breedte) / 9);
    padding: calc(var(--breedte) / 100) 0 0 0;
    grid-template-columns: 25% 25% 25% 25%;
  }
  .img-wbbg {
    background-size: auto calc(var(--breedte) / 9);
  }
  .socials {
    height: calc(var(--breedte) / 25);
    width: calc(var(--breedte) / 25);
  }
  .footer-wb {
    font-size: calc(var(--breedte)/45);
    padding-left: calc(var(--breedte) / 12);
  }
  .pagina {
    max-width: 720px
  }
  .tegels {
    grid-template-columns: repeat(4, 25%);
    grid-auto-rows: minmax(180px, auto);
  }
  .tegel-slides {
    grid-column-start: span 3;
    height: auto;
  }
  #SkorSlides div {
    width: 540px;
  }
  .tegelspan-2 {
    grid-column-start: span 2;
  }
  .tegelspan-3 {
    grid-column-start: span 3;
  }
  .tegelspan-4 {
    grid-column-start: span 4;
  }
}
@media (min-width:992px) {
  :root {
    --breedte: 992px;
  }
  .pagina {
    max-width: 960px
  }
  .tegels {
    grid-auto-rows: minmax(240px, auto);
  }
  #SkorSlides div {
    width: 720px;
  }
}
@media (min-width:1200px) {
  :root {
    --breedte: 1200px;
  }
  .pagina {
    max-width: 1140px
  }
  .tegels {
    grid-auto-rows: minmax(285px, auto);
  }
  #SkorSlides div {
    width: 855px;
  }
  @media (min-width:1400px) {
    :root {
      --breedte: 1400px;
    }
    .pagina {
      max-width: 1320px
    }
    .tegels {
      grid-auto-rows: minmax(330px, auto);
    }
    #SkorSlides div {
      width: 990px;
    }
  }
}