/*
    NGK Baflo
    
    
    @website  http://ngkbaflo.nl
    @version  1.0.1
    @date     2023-04-30 14:31:03
    @author   Sander Tiekstra - sandertiekstra.nl
 */

@charset "UTF-8";
/* Cascading Style Sheet */
/*
    RESET
*/
*, *:before, *:after {
  box-sizing: border-box;
}

html,
button {
  -moz-osx-font-smoothing: greyscale;
  font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
      -ms-text-size-adjust: 100%;
          text-size-adjust: 100%;
}

body {
  color: rgb(60, 60, 60);
  font-family: ff-nexus-mix, Helvetica, Arial, sans-serif;
  font-size: 100%;
  margin: 0;
  padding: clamp(1rem, 5vh, 4rem) 10vw;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
  gap: clamp(1rem, 5vh, 4rem);
}

p,
table,
address,
ul,
ol,
dl,
figure {
  font-size: 16px;
  font-size: 1rem;
  line-height: 1.5em;
  margin: 0 0 1.5em;
}

h1,
h2,
h3 {
  margin: 0 0 0.75em;
}

h1,
h2,
h3,
h1 a,
h2 a,
h3 a {
  color: rgb(0, 178, 67);
}

h3 {
  line-height: 1.4em;
  margin: 0;
}

img {
  height: auto;
  max-width: 100%;
  vertical-align: middle;
}

table {
  border: 0;
}

abbr[title] {
  border-bottom: 1px dotted;
}

mark {
  background-color: transparent;
  border-bottom: 1px dotted rgb(0, 178, 67);
  color: rgb(0, 178, 67);
  font-style: italic;
}

th,
td {
  border: 0;
  border-bottom: 1px solid rgba(62, 172, 80, 0.15);
  padding: 0.3125em 0.625em 0.3125em 0;
  vertical-align: top;
}
th:last-child,
td:last-child {
  padding-right: 0;
}

th {
  text-align: left;
}

thead th {
  border-bottom-color: rgb(0, 178, 67);
  font-style: italic;
  font-weight: 400;
}

tbody th {
  color: rgb(0, 178, 67);
  padding-top: 1.5em;
}

tbody tr:first-child th {
  padding-top: 0.3125em;
}

div.table {
  margin-bottom: 2em;
  margin-right: -2em;
  overflow: auto;
  padding-right: 2em;
}

table.agenda {
  max-width: 50em;
  width: 100%;
}

table.prekenseries {
  border-spacing: 0;
  width: 100%;
}
table.prekenseries .txt {
  min-width: 9em;
}
table.prekenseries .date {
  min-width: 5em;
}
table.prekenseries .theme {
  min-width: 12em;
}
table.prekenseries .download {
  min-width: 5em;
}

div.top {
  font-size: 40;
}

div.agenda_extrainfo {
  font-size: 10pt;
}

div.top_kenk {
  font-size: 30;
}

div.kop1_kenk {
  font-size: 21;
  font-weight: bold;
}

div.kop2_kenk {
  font-size: 20;
}

div.kop3_kenk {
  font-size: 16;
  font-weight: bold;
}

a {
  color: rgb(0, 178, 67);
}
a:hover {
  text-decoration: none;
}

.past {
  color: rgb(150, 150, 150);
  text-decoration: line-through;
}

nav {
  background-color: #d9f3e3;
  color: rgb(60, 60, 60);
  padding: 0.625em;
  max-width: 40rem;
  -ms-flex-item-align: center;
      -ms-grid-row-align: center;
      align-self: center;
  width: 100%;
}
nav > :last-child {
  margin-bottom: 0;
}
nav h2 {
  font-size: 1em;
  margin-bottom: 0;
  text-align: center;
}
nav ul {
  list-style: none;
  padding-left: 0;
  text-align: center;
}
nav ul.secondary {
  color: rgb(120, 120, 120);
}
nav li {
  display: inline;
}
nav li:after {
  content: " – ";
  padding: 0 0.5em;
}
nav li:last-child:after {
  content: none;
}
nav a {
  color: rgb(60, 60, 60);
}
nav a:hover {
  text-decoration: none;
}
nav .active a {
  font-weight: bold;
  text-decoration: none;
}

header,
nav,
main,
footer {
  max-width: 50rem;
  inline-size: 100%;
  -ms-flex-item-align: center;
      -ms-grid-row-align: center;
      align-self: center;
}

header a {
  display: inline-block;
}
header img {
  -webkit-margin-after: -3.5081967213%;
          margin-block-end: -3.5081967213%;
}
@media (min-width: 40em) {
  header h2 {
    -webkit-padding-start: 50%;
            padding-inline-start: 50%;
    margin: 0;
  }
  header a {
    transform: translateX(-16.393443%);
  }
}

[data-gallery] {
  position: relative;
}
[data-gallery] figure {
  position: relative;
  text-align: center;
  transition: height 1000ms;
  z-index: 1;
}
[data-gallery] figure.portrait {
  padding-left: 16.6666666667%;
  padding-right: 16.6666666667%;
}
[data-gallery] figure.landscape {
  padding-bottom: 16.6666666667%;
  padding-top: 16.6666666667%;
}
[data-gallery] figcaption[aria-hidden=true] {
  display: none;
}
[data-gallery]:after {
  animation: loading 1s ease-out;
  animation-iteration-count: infinite;
  border-radius: 2em;
  border: 0.25em solid rgb(0, 178, 67);
  content: "";
  height: 2em;
  left: 50%;
  margin: -1em 0 0 -1em;
  opacity: 0;
  position: absolute;
  top: 50%;
  width: 2em;
  z-index: 0;
}
[data-gallery] .nav button {
  background-color: white;
  border-radius: 0.2em;
  border: 0.25em solid rgb(0, 178, 67);
  cursor: pointer;
  height: 3em;
  margin-top: -1.5em;
  outline: none;
  padding: 0.5em;
  position: absolute;
  top: 50%;
  transform: rotate(45deg);
  transition: background-color 200ms;
  width: 3em;
  z-index: 2;
}
[data-gallery] .nav button.prev {
  left: -2em;
}
[data-gallery] .nav button.prev span {
  border-color: transparent transparent rgb(0, 178, 67) rgb(0, 178, 67);
}
[data-gallery] .nav button.prev:hover span, [data-gallery] .nav button.prev:focus span {
  border-color: transparent transparent #fff #fff;
}
[data-gallery] .nav button.next {
  right: -2em;
}
[data-gallery] .nav button.next span {
  border-color: rgb(0, 178, 67) rgb(0, 178, 67) transparent transparent;
}
[data-gallery] .nav button.next:hover span, [data-gallery] .nav button.next:focus span {
  border-color: #fff #fff transparent transparent;
}
[data-gallery] .nav button span {
  border: 0.25em solid #fff;
  border-radius: 0.25em;
  display: block;
  height: 1.5em;
  overflow: hidden;
  text-indent: 1.5em;
  transition: border 200ms;
  white-space: nowrap;
  width: 1.5em;
}
[data-gallery] .nav button:hover, [data-gallery] .nav button:focus {
  background-color: rgb(0, 178, 67);
}
[data-gallery] ol {
  display: none;
}

@keyframes loading {
  0% {
    opacity: 0;
    transform: scale(0.1);
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: scale(1.2);
  }
}