@font-face{font-display:swap;font-family:barlow condensed;font-style:normal;font-weight:200;src:url(/fonts/barlow-condensed-v13-latin-200.woff2)format('woff2')}@font-face{font-display:swap;font-family:barlow condensed;font-style:italic;font-weight:200;src:url(/fonts/barlow-condensed-v13-latin-200italic.woff2)format('woff2')}@font-face{font-display:swap;font-family:barlow condensed;font-style:normal;font-weight:300;src:url(/fonts/barlow-condensed-v13-latin-300.woff2)format('woff2')}@font-face{font-display:swap;font-family:barlow condensed;font-style:italic;font-weight:300;src:url(/fonts/barlow-condensed-v13-latin-300italic.woff2)format('woff2')}@font-face{font-display:swap;font-family:barlow condensed;font-style:normal;font-weight:400;src:url(/fonts/barlow-condensed-v13-latin-regular.woff2)format('woff2')}@font-face{font-display:swap;font-family:barlow condensed;font-style:italic;font-weight:400;src:url(/fonts/barlow-condensed-v13-latin-italic.woff2)format('woff2')}@font-face{font-display:swap;font-family:barlow condensed;font-style:normal;font-weight:500;src:url(/fonts/barlow-condensed-v13-latin-500.woff2)format('woff2')}@font-face{font-display:swap;font-family:barlow condensed;font-style:italic;font-weight:500;src:url(/fonts/barlow-condensed-v13-latin-500italic.woff2)format('woff2')}@font-face{font-display:swap;font-family:barlow condensed;font-style:normal;font-weight:700;src:url(/fonts/barlow-condensed-v13-latin-700.woff2)format('woff2')}@font-face{font-display:swap;font-family:barlow condensed;font-style:italic;font-weight:700;src:url(/fonts/barlow-condensed-v13-latin-700italic.woff2)format('woff2')}@view-transition{navigation: auto;
}:root{--toj-text:#ffffff;--toj-bg:#1e3711;--toj-block:#333;--toj-lighter:#2a4d17;--toj-green:#5dab35;--toj-green-dark:#529a2f}*,::after,::before{margin:0;padding:0;box-sizing:border-box;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}@keyframes fadeIn{0%{opacity:0}50%{opacity:.5}100%{opacity:1}}html{font-size:15px;scroll-behavior:smooth}body{background-color:var(--toj-bg);font-family:barlow condensed,sans-serif;font-weight:700;color:var(--toj-text);display:flex;flex-direction:column;min-height:100lvh}.background-cover img{position:fixed;height:100lvb;width:100lvi;z-index:-1;object-fit:cover}@media(max-aspect-ratio:1){body{background-image:url(/uploads/img/trompet_mobile.jpg)}}h1,h2,h3{font-family:barlow condensed;color:var(--toj-green);font-size:clamp(2.5rem,5vw,3.7rem);margin-bottom:.5em!important;clear:both}h3{font-size:1.7rem;margin-top:1.5rem;line-height:2rem}h1{word-break:break-word;margin-bottom:.65em!important}h1:has(+.event-date){margin-bottom:.15em!important}.event-date{display:block;color:#fff;font-weight:700;margin-bottom:1.5rem}.event-date span{font-weight:300;padding-left:.5em}.container{max-width:56rem;min-width:300px;border-radius:.5rem;margin:clamp(1rem,3vw,1rem)auto;padding:clamp(1rem,3vw,2.5rem);background-color:rgba(20,20,20,.9);overflow:hidden}img{max-width:100%;height:auto}main{line-height:normal;font-size:1.3rem;font-weight:500;flex-grow:1}main a{text-decoration-color:var(--toj-green);text-underline-offset:.3em;text-decoration-thickness:.1em;color:var(--toj-text)}main a:hover{text-decoration-thickness:.2em}main p{margin-bottom:1em}main ul{margin:0 0 1.5rem 1.75em}main li{padding:.2rem .25rem}main ol{margin-left:1.75em}main dt{color:var(--toj-text);margin-top:1.25em;font-weight:700}main dd{margin-top:.5em;padding-inline-start:1.625em}main h2{font-size:2rem;margin-top:3.5rem}main h3{margin-top:2.5rem}main h2.year{font-size:1.7rem;margin-top:2.5rem;line-height:2rem}main table{font-size:1.05rem;border-collapse:collapse;line-height:1.4rem;width:100%}main table tr{border-bottom:1px solid rgba(0,0,0,.1)}main table tbody tr:last-child{border:0}main table tr>*{vertical-align:top;padding:.5rem 2rem .5rem 0;text-align:left}main table tr>*:last-child{padding-right:0}main strong,main th{color:var(--toj-text);font-weight:700}main hr{background:rgba(0,0,0,.1);height:1px;border:0;margin-block:3rem}main img{border-radius:.25rem;display:inline-block}main blockquote>p{font-style:italic;font-weight:300;line-height:1.6rem;border-left:.25rem solid var(--toj-green);padding-left:1rem;color:var(--toj-text)}main figure{margin-bottom:1.5rem}main figure img{border-radius:.7rem}main figcaption{font-size:smaller;font-weight:200;font-style:italic;padding:0 .5rem;color:var(--toj-text)}main figure.left{float:left;margin-right:1.5rem}main figure.right{float:right;margin-left:1.5rem}header .container{display:grid;grid-template-columns: repeat(6, 1fr)); gap: .1rem; background-color: rgba(20, 20, 20, 0.6); } header .logo { min-width: 10rem; grid-row: 1; } header .logo a { display: flex; width: 100%; } header .logo img { width: 18rem; } .buttons.social { display: flex; gap: 1rem; align-items: center; } .buttons.social li { list-style: none; position: relative; } .buttons.social li.label { font-family: 'Barlow Condensed', sans-serif; font-size: 1rem; align-self: center; color: var(--toj-green); } .buttons.social li a { position: relative; display: flex; background: var(--toj-text); border-radius: .4rem;; width: 1.5rem; gap: .5rem; padding: .2rem; } .buttons.social li a:hover { background: var(--toj-green); } header nav { display: grid; grid-row: 1; justify-self: end; align-self: stretch; text-align: right; } header nav > ul { display: flex; justify-content: end; flex-wrap: wrap; column-gap: 1.2rem; } header nav > ul.nav-secondary { display: none; } header nav > ul li { list-style: none; } header nav > ul li a { display: block; margin-block: 0.35rem; font-size: 1.4rem; font-family: 'Barlow Condensed', sans-serif; color: var(--toj-text); text-decoration: none; } header nav > ul li.active a { text-decoration: underline; text-underline-offset: 0.4em; text-decoration-thickness: 0.2em; text-decoration-color: var(--toj-green); } header nav > ul li a:hover { color: var(--toj-green); } .menu-button { position: fixed; display: none; z-index: 9; right: 1.8rem; top: 6rem; } .menu-button button { display: none; cursor: pointer; border-radius: 6px; border: none; color: var(--toj-text); font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 1.5rem; align-items: flex-end; justify-items: right; gap: 1rem; background-color: transparent; } .menu-button button img { height: 1.75rem; width: auto; padding: .1rem; background-color: white; border-radius: 0.25rem; } main ul.breadcrumbs { display: flex; font-family: 'Barlow Condensed', sans-serif; position: relative; margin: 0 0.25rem .3rem; font-weight: 300; font-size: 1.2rem; line-height: 2rem; } main ul.breadcrumbs li { list-style: none; padding: 0; padding-right: .5rem; } main ul.breadcrumbs li a { display: inline-block; } main ul.breadcrumbs li::after { content: "›"; display: inline-block; margin: 0.5rem 0 0 .5rem; } main ul.breadcrumbs li a { text-decoration: none; color: var(--toj-text); } ul.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 1.5rem; margin: 0; } li.card { list-style: none; position: relative; background: var(--toj-block); border-radius: 0.7rem; padding: 0; transition: transform 0.15s ease; } li.card a { height: 100%; display: grid; grid-template-rows: 2fr 1fr; position: relative; text-decoration: none; } li.card img { width: 100%; height: 100%; object-fit: cover; border-radius: 0.7rem 0.7rem 0 0; } li.card div.details { color: var(--toj-text); font-size: 1.2rem; padding-block: 0.75rem 0.25rem; margin: 0; } li.card h2 { margin: 1.5rem 2rem 0.5rem 2rem; color: var(--toj-text); font-weight: 700; font-size: 1.5rem; } li.card p { margin: 0 2rem 1.5rem 2rem; color: var(--toj-text); font-weight: 300; font-size: 1.2rem; line-height: normal; } li.card:hover { transform: scale(1.03); } li.card:hover h2 { color: var(--toj-green); } ul.calendar { padding: 0; margin: 0; } li.calendar-item { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); align-items: stretch; list-style: none; margin-block: 2rem; padding: 0; background-color: var(--toj-block); text-decoration: none; transition: all 0.15s ease; border-radius: .7rem; } li.calendar-item a.image { grid-column: 1 / span 2; grid-row: 1 / span 2; height: 100%; } li.calendar-item a.details { display: block; grid-column: 3 / span 5; padding: 1rem; text-decoration: none; } li.calendar-item a img { border-radius: 0.7rem 0 0 .7rem;; object-fit: cover; height: 100%; } li.calendar-item h3 { margin: 0; padding: 0; font-size: 24px; } li.calendar-item time { color: var(--toj-text); font-size: 16px; font-weight: 700; padding-block: 1rem; } li.calendar-item time span { font-weight: 300; padding-left:.5em; } li.calendar-item .venue { font-size: 16px; font-weight: 300; padding-left: .5em; } .event-date .venue::before, li.calendar-item .venue::before { content: "· "; } li.calendar-item .lineup { font-size: 1rem; font-weight: 300; padding-block: 0.25rem 0.5rem; } li.calendar-item .description { font-size: 1.15rem; } .event-cover { margin: 0 0 1.5rem; } .event-cover img { display: block; width: 100%; } .event-cover.flyer { max-width: 24rem; margin-inline: auto; } .event-cover.square { max-width: 40rem; margin-inline: auto; } .event-cover figcaption { margin-top: 0.4rem; font-size: 0.9rem; font-weight: 300; text-align: right; opacity: 0.8; } .letter-index { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; font-family: 'Barlow Condensed', sans-serif; font-size: 1.5rem; font-weight: 700; } .letter-index [aria-current] { padding: 0 0.35em; margin-inline: -0.25em; margin-bottom: 0.15em; border-radius: 0.25rem; background-color: var(--toj-text); color: var(--toj-bg); } .letter-index > * { min-width: 1.5rem; text-align: center; } .letter-index .empty { opacity: 0.3; } ul.musicians { list-style: none; margin-left: 0; padding: 0; } ul.musicians > li { padding-block: 0.5rem; } ul.musicians > li > strong a { color: inherit; text-decoration: none; } ul.musicians > li:target > strong { background-color: var(--toj-text); color: var(--toj-bg); padding-inline: 0.25rem; border-radius: 0.25rem; } ul.musicians .website { font-weight: 300; } ul.musicians .instruments { font-weight: 300; } ul.musicians ul { margin: 0.25rem 0 0 1.25em; font-size: 1rem; font-weight: 300; } nav.pagination ul { display: flex; flex-wrap: wrap; gap: 0.5rem; padding: 0; margin: 2rem 0; list-style: none; } nav.pagination li { padding: 0; } nav.pagination a, nav.pagination span { display: inline-block; padding: 0.25rem 0.75rem; border-radius: 0.25rem; background-color: var(--toj-block); color: var(--toj-text); font-family: 'Barlow Condensed', sans-serif; font-size: 1.2rem; text-decoration: none; } nav.pagination a:hover, nav.pagination span[aria-current] { background-color: var(--toj-green-dark); } nav.pagination span[aria-current] { font-weight: 700; background-color: var(--toj-green); color: var(--toj-bg); } .tickets { ddisplay: inline; } .tickets a { display: inline-block; padding: 0.5rem 1rem; margin: 1rem; background-color: var(--toj-green-dark); color: var(--toj-text); text-decoration: none; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 1.4rem; border-radius: 0.25rem; transition: all 0.2s ease; } .tickets a:hover { background-color: var(--toj-text); color: var(--toj-bg); } .sponsors .container { display: grid; gap: 1rem; background: rgba(20, 20, 20, 0.6); justify-items: center; justify-content: center; } .sponsors h2 { font-weight: 300; font-size: 1.5rem; margin-bottom: 0; color: var(--toj-text) } .sponsors h3 { font-weight: 300; font-size: 1rem; color: var(--toj-text); } .sponsors .primary { display: flex; justify-content: center; } .sponsors .primary figure { width: 18rem; } .sponsors .secondary { display: flex; gap: 2rem; justify-content: center; } .sponsors .secondary figure { width: 8rem; } .sponsors figure { padding: 1rem; border-radius: .5rem; width: 100%; } .sponsors img { object-fit: contain; width: 100%; } .nieuwsbrief.cta .container { background: var(--toj-green-dark); color: var(--toj-text); } .nieuwsbrief.cta .signup-text h2 { font-size: 2rem; color: white; } #mc_embed_signup form { display: flex; flex-direction: column; gap: 1rem; margin-top: 1.5rem; } #mc_embed_signup label { visibility: hidden; } #mc_embed_signup input[type="email"] { padding: 0.75rem 1rem; width: calc(100% - 2rem); border: none; border-radius: 3px; font-size: 1rem; font-family: 'Barlow Condensed', sans-serif; } #mc_embed_signup input[type="submit"] { color: white; background-color: black;; border: none; border-radius: 5px; padding: 0.75rem 1rem; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 1.4rem; cursor: pointer; transition: all 0.15s ease; } #mc_embed_signup input[type="submit"]:hover { background-color: rgba(0,0,0, 0.8); color: white; } footer { padding-block: 1.5rem ; background-color: rgba(20, 20, 20, 0.6); } footer .container { display: grid; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); grid-auto-columns: 100%; align-items: end; gap: 1.5rem; background-color: transparent; } footer a { font-weight: 700; font-size: 1.1rem; line-height: 2.3rem; text-decoration: none; color: white; } footer .footer-logo { grid-column: 1 / span 2; min-width: 12rem; max-width: 20rem; } footer .footer-logo h2 { padding-top: 2rem; padding-left: 10px; text-align: right; font-size: 2.8rem; color: white; font-weight: 200; } footer .footer-primary { padding: 1rem; } footer .footer-secondary { padding: 1rem; } footer li { white-space: nowrap; } footer .footer-contact a { font-weight: 300; line-height: 1.55rem; padding: 1rem; text-decoration: none; color: white; text-align: right; display: block; } footer a:hover { color: var(--toj-green); } footer .footer-contact strong { font-weight: 700; font-size: 1.2rem; } footer ul li { list-style: none; } footer ul li.active a { text-decoration: underline; text-underline-offset: 0.4em; text-decoration-thickness: 0.2em; text-decoration-color: var(--toj-green); } @media only screen and (max-width: 55rem) { header nav > ul.nav-main li { min-width: 12rem}}@media only screen and (max-width:36rem){.menu-button{display:flex}.footer-primary,.footer-secondary{grid-row:2}.footer-contact{text-align:right}header nav{gap:1rem;position:fixed;top:0;right:0;transform:translateX(100%);z-index:2;width:calc(15rem + 2 * clamp(1rem,3vw,2rem));box-shadow:0 0 1.5rem rgba(0,0,0,.1);opacity:0;transition:none;padding-top:12rem}header nav>ul:not(.buttons.social){flex-direction:column;gap:.3rem;font-size:1.5rem;padding-right:2rem;text-align:right}header nav>ul.buttons.social{order:1;margin-top:2rem;margin-right:2rem}header nav>ul.nav-secondary{padding-top:2rem;display:flex;font-weight:300}body.menu-is-open header nav{transform:translateX(0%);opacity:1;transition:all .15s ease-in-out}body::before{content:"";position:fixed;top:0;left:0;width:100vw;height:100lvh;z-index:2;backdrop-filter:blur(0);opacity:0;pointer-events:none;transition:none}body.menu-is-open::before{opacity:1;background:rgba(20,20,20,.6);backdrop-filter:blur(.2rem);transition:all .15s linear}button.menu-open{display:flex}body.menu-is-open button.menu-open{display:none}body.menu-is-open button.menu-close{display:flex}li.calendar-item{display:block}li.calendar-item a img{border-radius:.7rem .7rem 0 0;width:100%}}