:root {
  --red: #ff1c14;
  --pink: #da25da;
  font-size: clamp(20px,1.5vw,23px);
}

html{  scroll-behavior: smooth;
}

::-moz-selection {background: black; color: white;}
::selection {background: black; color: white;}
::placeholder { color: rgba(176, 39, 39, 0.4); }

::-webkit-scrollbar {width: 0.5rem;}

/* Track */
::-webkit-scrollbar-track {background: #ffffff;}
 
/* Handle */
::-webkit-scrollbar-thumb {background: lightgray; }

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {}

*{box-sizing:border-box;margin:0;padding:0;text-rendering:optimizeLegibility;-webkit-font-smoothing: antialiased;outline:none;}

@font-face {
font-family:"dunbar-tall";
src:url("https://use.typekit.net/af/f90c91/00000000000000007735d31a/31/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("woff2"),url("https://use.typekit.net/af/f90c91/00000000000000007735d31a/31/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("woff"),url("https://use.typekit.net/af/f90c91/00000000000000007735d31a/31/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("opentype");
font-display:auto;font-style:normal;font-weight:400;font-stretch:normal;
}

@font-face {
font-family:"dunbar-tall";
src:url("https://use.typekit.net/af/aed7e3/00000000000000007735d321/31/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("woff2"),url("https://use.typekit.net/af/aed7e3/00000000000000007735d321/31/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("woff"),url("https://use.typekit.net/af/aed7e3/00000000000000007735d321/31/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("opentype");
font-display:auto;font-style:normal;font-weight:700;font-stretch:normal;
}

@font-face {
font-family:"dunbar-tall";
src:url("https://use.typekit.net/af/8e42e5/00000000000000007735b161/31/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i4&v=3") format("woff2"),url("https://use.typekit.net/af/8e42e5/00000000000000007735b161/31/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i4&v=3") format("woff"),url("https://use.typekit.net/af/8e42e5/00000000000000007735b161/31/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i4&v=3") format("opentype");
font-display:auto;font-style:italic;font-weight:400;font-stretch:normal;
}

@font-face {
font-family:"dunbar-tall";
src:url("https://use.typekit.net/af/ec83bb/00000000000000007735b174/31/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i7&v=3") format("woff2"),url("https://use.typekit.net/af/ec83bb/00000000000000007735b174/31/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i7&v=3") format("woff"),url("https://use.typekit.net/af/ec83bb/00000000000000007735b174/31/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i7&v=3") format("opentype");
font-display:auto;font-style:italic;font-weight:700;font-stretch:normal;
}

body{
  /* animation-name: example;
  animation-duration: 10s;
  animation-iteration-count: infinite; */
  font-family:'dunbar-tall', sans-serif;
  font-weight:500;
  line-height:1.4;
  letter-spacing: 0.02em;
  /* background: var(--tertiary); */
}

h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4 ,.h5,.h6 {
  font-family:'dunbar-tall', sans-serif;
  font-weight: 600;text-wrap: balance;
  letter-spacing: 0.02em;
  line-height: 1;
  display: block;
  margin-bottom: .1em;
}

h1,.h1 {font-size: 3.5rem;}
h2,.h2 {font-size: 2.5rem;}
h3,.h3 {font-size: 1.5rem;}
h4,.h4 {font-size: 1rem;}


.p0{font-size: 0.75rem;}
.p1{font-size: 1rem}
.p2{font-size: 1.5rem}
.p3{font-size: 2rem}
.p4{font-size: 2.5rem}


strong, .strong {font-weight: 700;}
small, .small {font-size:.75rem;}
ul {list-style:none;}
ion-icon {vertical-align: text-bottom;}
.italic {
  font-style: italic;
}

a {color:inherit;text-decoration: none; cursor: pointer;}
a.ul {text-decoration: underline;text-decoration-thickness: 2px;text-underline-offset: 3px;transition: text-decoration-color .25s;}
a.tick {display: block;transition: translate .5s;}
a.button{display:inline-block;border:none!important;padding:.625vw 1vw;min-width:10rem;font-weight:bold;background:#0ff;transition:padding .5s;}
a.inline-button {display:inline-block;padding:.25rem .5rem;margin:.5rem 0;border-radius:.25rem;border:1px solid;line-height:1;}
a.btn {display: inline-block;border-radius:.25em;}
a.btn.block {display: block;}
a.more{display:block;border:none;text-align:center;font-size:90%;}
a.arrow{position: relative}
a.arrow .arw{width:.5em;height:.5em;}

a.arrowed {position:relative;padding-left:1rem;display:block;}
a.arrowed:before {content:'';position:absolute;width:.3em;height:.3em;border-top:1px solid;border-right:1px solid;rotate:45deg;left:0;top:.5em}
a.tooltip {position:relative}
a.tooltip:before {position:absolute;content:attr(data-tt);left:0;top:100%;background:rgb(0 0 0 /75%);color:#fff;padding:.25em;pointer-events:none;opacity:0;transition:opacity .5s;}
a.arw {padding-left:1rem;position:relative;}
a.arw:before {content: '';position: absolute;width: .4em;height: .4em;transform: rotate(-135deg);margin-left: -1rem;top: .5rem;border-left: 1px solid;border-bottom: 1px solid;}*/

a.download {display:inline-block;min-width:80%;}
a.file{margin:1rem 0;padding:3px 0;border:none;}
a.file em{display:inline-block;float:left;height:50px;width:40px;margin-right:1rem;background:url(/lib/gfx/files.svg) no-repeat;border:0;background-size: 160px;}
a.file.pdf em{background-position:0 0;}
a.file.doc em{background-position:-40px 0;}
a.file.xls em{background-position:-80px 0;}
a.file.zip em{background-position:-120px 0;}

a:focus { outline: 1px dotted var(--c1); }

p.bullet{position: relative;display:block;margin:5px 0;padding-left:14px;font-style:normal;}
p.bullet:before{margin-left:-1rem;content:'-';position:absolute;}

hr {border:none;border-top:5px solid var(--red);}
hr.inset {margin-left:.75rem;margin-right:.75rem;}

figure img, figure video {width:100%;display: block;}

figure img{transition:opacity 2s;}
figure.ll img{opacity:.25; }
figure.loaded img{opacity:1;}
figure figcaption {padding-top:0.5rem;font-size: 0.75rem;}
figure.nocaption figcaption {display:none;}
figure.fix img{width:100%; height:100%; object-fit:cover}
figure.fix.fit{width:100%;height:100%;}
figure.fix.fit img{width:100%;height:100%;}
figure.fix.contain img{object-fit:contain;}
figure.r50 {aspect-ratio:2;}
figure.r75 {aspect-ratio:4/3;}
figure.r100 {aspect-ratio:1;}
figure.r150 {aspect-ratio:2/1;}
figure.r169 {aspect-ratio:16/9;}

figure.masthead {height:calc(100vh - 16rem);}
figure.masthead img{width:100%;height:100%;object-fit:cover;}
figure.masthead figcaption{padding-left:2rem}
figure.masthead .author {left: unset;right: 2rem;text-align:right;rotate: 0deg;}

figure.gray {overflow:hidden;margin-right: -1px;}
figure.gray img{filter:grayscale(1);transition:filter .5s, scale .5s;	}
iframe {border:0;width:100%;
  aspect-ratio:16/9;
}

ul.inline{display:block;}
ul.inline li{padding-left: 1em;margin: 1em 0;background: url(/lib/gfx/arw.svg) no-repeat 0 0.4em;background-size: 1em;}

.ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display: block;}
.up {text-transform:uppercase}
.ucf {text-transform:capitalize}

/* .row {border:1px dotted #00f;}
.col {border:1px dotted #f00;} */

.row{display:flex;flex-wrap:wrap;flex-direction: row;justify-content: stretch;}
.row.inset{margin:0 -.5rem}
.row.card {display:flex;}
.row.card .card-inner{display:flex;flex-direction:column;}
.row.card .card-inner .read{flex-grow:1;}

.col{align-self: stretch;padding:0.5rem;position: relative;}

.m1{width:8.3333333333%;}
.m2{width:16.6666666667%;}
.m3{width:25%;}
.m4{width:33.3333333333%;}
.m5{width:41.6666666667%;}
.m6{width:50%;}
.m7{width:58.3333333333%;}
.m8{width:66.6666666667%;}
.m9{width:75%;}
.m10{width:83.3333333333%;}
.m11{width:91.6666666667%;}
.m12{width:100%;}
.offset-m1 {margin-left:8.3333333333%;}
.offset-m2 {margin-left:16.6666666667%;}

.read p {max-width:30rem}
.mb0 {display:block;margin-bottom:.5rem !important;}
.mb {margin-bottom:1rem !important;}
.mb2 {margin-bottom:2rem !important;}
.mb3 {margin-bottom:3rem !important;}
.mb4 {margin-bottom:4rem !important;}

.lft{text-align:left;}
.rgt{text-align:right;}
.ctr{text-align:center;}

.lo {text-transform:lowercase;}
.mr {margin-right:1em;}
.pd0 {padding:0.5rem;}
.pd {padding:1rem;}
.pd2 {padding:2rem;}
.pd3 {padding:3rem;}
.pd4 {padding:4rem;}
.pv {padding:1rem 0;}
.pv2 {padding:2rem 0;}
.pv3 {padding:3rem 0;}
.ph0 {padding:0 .5rem ;}
.ph {padding:0 1rem ;}
.ph2 {padding:0 2rem;}
.ph3 {padding:0 3rem;}
.spacer {height:3rem;}
.bb {border:1px solid var(--pink);}

.tc {display:grid;grid-template-rows:auto 0fr; transition: .25s linear;}
.tc .t.ul {border-bottom:1px solid;}
.tc > .t {position: relative;	padding-left: 1em;	padding-bottom: .625vw;line-height: 1.2;cursor:pointer;user-select: none;}
.tc > .c {overflow:hidden;padding-left: 1vw;}
.tc > .t:before { position: absolute; content: ''; border-right: 1px solid; border-bottom: 1px solid; width: 0.3em; height: 0.3em; rotate: -45deg; left: 0; top: 0.4em; transition: .5s; }
.tc.active > .c{overflow:inherit}

.tc.preview {grid-template-rows:7em 2em;}
.tc.preview .c {padding:0;}
.tc.preview .t {display:flex;align-items: center;padding-left:1em;}
.tc.preview .t:before {content:'';width:.3	em;height:.3em;border:1px solid;rotate:45deg;border-left:none;border-bottom:0;transition:rotate .5s;margin-top:.5em}
/* .tc.preview .t:after {content:attr(data-more);} */
.tc.preview.active{grid-template-rows:1fr 3em}
.tc.preview.active .t:before{rotate:135deg}

.tc.coms {grid-template-rows:3.4em 0fr;}
.tc.coms.active{grid-template-rows:3.4em 1fr}

.tc.coms .t{border-bottom: 1px solid;}
.tc.coms .t:before{top: 1.5em;left:.5em;}

#mainstage{
  padding-left: 8rem;
  padding-right: 8rem;
  padding-top: 1rem;
  transition: padding 0.5s ease;
}

.headertitel{
  padding: 0 0.5rem;
}
.headertitel h1{
  margin-bottom: -0.5rem;
}

.headsmall{font-size: 1rem;}

.header {
  z-index: 2;
  position: sticky;
  left: 0;
  top: 0;
  background-color: white;
}

a.anker {
    display: block;
    position: absolute;
    top: -6rem;
    left: 0;
}

#menu{display: inline-block;}

.menu{position: relative;}

.menu ul{
  right: 0px;
  bottom: 0px;
  position: absolute;
  padding-right: 0.5rem;
  padding-bottom: 0.5rem;
}

.menu ul li{
  transition: 0.2s text-decoration ease ;
  text-decoration: underline;
  text-underline-offset: 0.2rem;
  text-decoration-thickness: 0.1rem;
  position: relative;
  text-decoration-color: rgb(0, 0, 0, 0);
  display: inline;
  margin-left: 2rem;
  z-index: 2;
}

.menu ul li:hover{
  text-decoration-color: rgb(0, 0, 0, 255);
}
.menu ul li ul{ 
  height: max-content;
  width: max-content;
  left: -1rem;
  top: 1rem;
  position: absolute;
  padding: 1rem 1rem 0.5rem 1rem;
  z-index: -1;
  transition: 0.2s ease;
}
.menu ul li:hover ul{background-color: white;}

.menu ul li ul li{
  opacity: 0;
  margin-left: 0;
  /* margin-top: 0.25rem; */
  margin-bottom: 0.5rem;
  display: block;

}
.menu ul li:hover ul li{opacity: 100;}
.menu ul li ul:hover li{opacity: 100}

.cover figure img, .cover figure video {object-fit: cover;}

table{width: 100%;}
td{padding-right: 1rem;vertical-align: top; width: 50%;}

table, th, td {
  border-collapse: collapse;
}

.agenda{font-size: 1.25rem; margin: 0.5rem; padding: 0;border-top: 2px solid black; transition: 0.2s ease;}

.agenda tr {border-bottom: 2px solid black; transition: 0.2s ease;}
.agenda tr td{padding: 1rem}

.agenda tr:hover{background-color: black; color: white;}

.agenda tr td.date{width: 18%;}
.agenda tr td.event{width: 25%;}
.agenda tr td.location{width: 40%;}
.agenda tr td.kaarten{width: 15%;}

input[type=text], select {
  width: 50%;
  padding: 1rem;
  display: inline-block;
  border: 2px solid #000000;
  border-radius: 0;
  font-size: 1rem;
  font-family:'dunbar-tall', sans-serif;
}

input[type=email], select {
  width: 50%;
  padding: 1rem;
  display: inline-block;
  border: 2px solid #000000;
  border-radius: 0;
  font-size: 1rem;
  font-family:'dunbar-tall', sans-serif;
}

button[type=submit] {
  width: 100%;
  background-color: #000000;
  color: white;
  padding: 1rem;
  border: none;
  border-radius: 0;
  cursor: pointer;
  font-size: 1rem;
}

textarea {
  width: 100%;
  height: 10rem;
  padding: 1rem;
  border: 2px solid black;
  border-width: 0px 2px;
  border-radius: 0;
  font-size: 1rem;
  font-family:'dunbar-tall', sans-serif;
  resize: none;
  vertical-align: top
}

#Naam {
  border-right: 0px;
}

::placeholder {
  color: grey;
  opacity: 1;
}

::-ms-input-placeholder {
  color: grey;
}

.show-mobile {display:none;}

@media only screen and (max-width: 1600px) {
#mainstage{
  padding-left: 4rem;
  padding-right: 4rem;
}
}

@media only screen and (max-width: 1000px) {
  .s1{width:8.3333333333%;}
.s2{width:16.6666666667%;}
.s3{width:25%;}
.s4{width:33.3333333333%;}
.s5{width:41.6666666667%;}
.s6{width:50%;}
.s7{width:58.3333333333%;}
.s8{width:66.6666666667%;}
.s9{width:75%;}
.s10{width:83.3333333333%;}
.s11{width:91.6666666667%;}
.s12{width:100%;}

.headertitel{text-align: center;}
.headersubtitel{text-align: center;}

#mainstage{
  padding: 3rem;
}

.menu{display: none;}

/* #menu{display: none;} */

.menu ul{
  position: relative;
  padding: 0;
}

.menu ul li{
  margin-left: 0;
  display: block;
}

.menu ul li ul {
  position: relative;
  padding: 0;
  padding-left: 1rem;
  left: 0;
  top: 0;
}

.menu ul li ul li{
  opacity: 100;
}

input[type=text], select {
    width: 100%;
    
}
input[type=email], select {
    width: 100%;
}

textarea {
  height: 15rem;
}

#Naam {
  border-right: 2px solid black;
  border-bottom: 0px;
}


.agenda{font-size: 1rem}
.agenda tr {padding: 0.5rem 0;}
.agenda tr td {display: inline-block;padding: 0 0.5rem;}
.agenda tr td.date{width: 100%; padding-top: 0.5rem;}
.agenda tr td.event{width:  100%;font-weight: 700;}
.agenda tr td.location{width: calc(100% - 5rem);}
.agenda tr td.kaarten{width: 5rem; padding-bottom: 0.5rem;}

.show-mobile {display:inline-block;}

}

@media only screen and (max-width: 800px) {

  #mainstage{
  padding: 0.75rem;
}
}

@media only screen and (max-width: 500px) {

h1, .h1{font-size: 2.5rem;}
h2, .h2{font-size: 2rem;}

}