* {
  margin: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

*:focus {
  outline: none;
  box-shadow: none;
}

:root {
  --rood: #ff1509;
  --donker_rood: #800632;
  --blauw: #1300c8;
  --licht_blauw: #c3defd;
  --oranje: #f49200;
  --bruin: #744500;
  --groen: #008c0e;
  --licht_groen: #b7ffbd;
  --licht_roze: #ffafe9;
  --boxout: "Boxout", futura-pt, sans-serif;
  --futura: futura-pt, sans-serif;
  /* --visual-container-width:90%;
    --marquee-width:5vw; */
}

@font-face {
  font-family: "Boxout";
  src: url("../fonts/Boxout02-Wide-Bold.woff") format("woff"),
    url("../fonts/Boxout02-Wide-Bold.woff2") format("woff2");
}

body {
  font-family: var(--futura);
  font-size: clamp(1rem, 6vw, 1.5rem);
}

.boxout {
  font-family: var(--boxout);
  text-transform: uppercase;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
button,
ul,
li,
hr {
  margin: 0;
  padding: 0;
}

a {
  text-decoration: none;
}

h2 {
  font-family: var(--boxout);
  font-size: clamp(2rem, 6vw, 3.5rem);
}

h3 {
  font-weight: normal;
}

h4 {
  font-size: clamp(1.5rem, 6vw, 2rem);
}

h5 {
  line-height: 0.5;
}

button {
  background-color: none;
  border: none;
}

hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid var(--blauw);
  padding-top: 1rem;
  padding-bottom: 1rem;
}

/* ---------- Desktop (1728px)  */

/* Hero */

.container{
  position: relative;
  width: 100vw;
  height: calc(0.5 * 113vw);
  overflow: hidden;
}

.visual-container {
  position: absolute;
  width: 100%;
  height: calc(100vw * 1);
  top: 5%;
  left: 50%;
  margin-left: auto;
  margin-right: auto;
  transform: translate(-50%, 0);
  line-height: 0;
  z-index: 1;
  overflow: hidden;
  transition: transform 10s ease-out;
}

/* .visual-container{
    aspect-ratio: 1 / 1;
} */

.background-image {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: translate(-50%, -50%);
  z-index: -1;
}

.visual {
  margin: -3px;
}

svg {
  shape-rendering: crispEdges; /* remove hairlines in svg */
  transform-box: fill-box;
}

svg.diamond {
  display: inline-block;
  width: 5vw;
  height: 5vh;
}

.marquee-top svg.diamond,
.marquee-bottom svg.diamond,
.footer-marquee svg.diamond {
  vertical-align: middle;
}

.marquee-top span,
.marquee-bottom span,
.marquee-left span,
.marquee-right span,
.footer-marquee span {
  font-family: "Boxout";
  color: var(--licht_roze);
  text-transform: uppercase;
}

.marquee-left,
.marquee-right {
  overflow: hidden;
}

.marquee-top span,
.marquee-bottom span,
.marquee-left span,
.marquee-right span,
.footer-marquee span {
  font-size: clamp(2rem, 6vw, 3.5rem);
  white-space: nowrap;
}

.marquee-top span {
  display: inline-block;
  width: 100vw;
  height: 10vh;
  line-height: 10vh;
  animation: marqueeTop 60s linear infinite;
}

.marquee-left span {
  display: inline-block;
  height: 100vh;
  width: calc(5vw + 10px);
  line-height: calc(5vw + 10px);
  white-space: nowrap;
  writing-mode: vertical-lr;
  animation: marqueeLeft 60s linear infinite;
}

.marquee-right span {
  display: inline-block;
  width: calc(5vw + 10px);
  line-height: calc(5vw + 10px);
  height: 100vh;
  white-space: nowrap;
  writing-mode: vertical-lr;
  animation: marqueeRight 60s linear infinite;
}

.marquee-bottom span {
  display: inline-block;
  width: 100vw;
  height: 10vh;
  line-height: 10vh;
  white-space: nowrap;
  animation: marqueeBottom 60s linear infinite;
}

.footer-marquee span {
  display: inline-block;
  width: 100vw;
  height: 10vh;
  line-height: 10vh;
  white-space: nowrap;
  animation: marqueeTop 60s linear infinite;
}

.marquee-top,
.marquee-bottom,
.footer-marquee {
  width: 100%;
}
.marquee-left,
.marquee-right {
  height: 100%;
}

#marquee-top,
#footer-marquee {
  position: absolute;
  top: 0;
  height: 10vh;
}

#marquee-left {
  position: absolute;
  top: 0;
  left: 0;
  transform: rotate(-180deg);
  overflow: hidden;
}

#marquee-right {
  position: absolute;
  top: 0;
  right: 0;
  overflow: hidden;
}

#marquee-bottom {
  position: absolute;
  bottom: 0;
}

#marquee-top,
#marquee-bottom,
#marquee-footer {
  z-index: 999;
  background-color: var(--blauw);
}

#marquee-left,
#marquee-right {
  z-index: 1;
  background-color: var(--blauw);
}

@keyframes marqueeTop {
  0% {
    transform: translateX(-200%);
  }
  100% {
    transform: translateX(0%);
  }
}

@keyframes marqueeLeft {
  0% {
    transform: translateY(-200%);
  }
  100% {
    transform: translateY(0%);
  }
}

@keyframes marqueeRight {
  0% {
    transform: translateY(-200%);
  }
  100% {
    transform: translateY(0%);
  }
}

@keyframes marqueeBottom {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-200%);
  }
}

/* Intro */

section.intro {
  position: relative;
  background-color: var(--blauw);
}

.intro-container {
  font-family: futura-pt, sans-serif;
  color: var(--licht_roze);
}

.intro {
  color: var(--licht_roze);
  font-weight: 500;
}

.intro p {
  font-size: clamp(1.4rem, 6vw, 1.8rem);
  padding: 1rem 0;
}

.intro ul {
  padding: 1.5rem 0;
}

button.btn {
  cursor: pointer;
}

.intro-container .first-level .toggle-btn {
  width: 2rem;
  height: 2rem;
}

.intro-container .first-level div.flex {
  gap: 1rem;
}

.intro-container .first-level div.flex p {
  cursor: pointer;
}

.intro-container .third-level .toggle-btn {
  width: 2rem;
  height: 2rem;
}

.intro-container .third-level div.flex {
  gap: 1rem;
}

.intro-container .third-level div.flex p {
  cursor: pointer;
}

.intro-container .toggle-btn svg path {
  stroke: var(--licht_roze);
}

.second-hero-container {
  position: relative;
  width: 100vw;
  height: 60vh;
  overflow: hidden;
  background-color: var(--blauw);
}

.second-hero {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: translate(-50%, -50%);
  z-index: 1;
}

.credit {
  font-size: clamp(0.6rem, 5vw, 1.2rem);
  opacity: 1;
}

.small-list li {
  padding: 1rem 0;
}

/* Accordion */

.first-level h2 {
  cursor: pointer;
}

.second-level,
.fourth-level,
.extra-second-level {
  overflow: hidden;
  cursor: pointer;
  max-height: 0;
  transition: max-height 0.3s ease-in;
}

.second-level.expanded,
.fourth-level.expanded {
  max-height: 4000px;
}

.extra-second-level.expanded {
  max-height: 500px;
}
.first-level p,
.second-level p {
  font-size: clamp(1rem, 4vw, 1.5rem);
  line-height: 1.2;
}

.third-level h4 {
  font-size: clamp(1.5rem, 6vw, 2rem);
}

.fourth-level p,
.fourth-level li {
  font-size: clamp(1rem, 4vw, 1.5rem);
}

.toggle-btn {
  cursor: pointer;
  position: relative;
  display: inline-block;
}

.toggle-btn svg {
  transition: transform 0.3s ease-in-out;
  transform: rotate(0deg);
  transform-origin: center;
}

.toggle-btn.rotated svg {
  transform: rotate(45deg);
}

.programma-container .second-level .third-level:nth-child(3) .toggle-btn svg {
  display: none;
}

.event-date-container p,
.event-location-container p {
  margin: 0;
  padding: 0;
}

.event-slogan-container {
  margin-top: -25px;
}

.event-slogan-container p {
  font-size: clamp(1.5rem, 8vw, 2rem);
}

.header-ticket-container button.btn#ticket-btn {
  background-color: var(--licht_roze);
  color: var(--blauw);
}

/* Tickets */

section.tickets {
  background-color: var(--blauw);
}

section.tickets h2,
section.ticket button,
section.tickets p {
  color: var(--licht_roze);
}

button.btn#ticket-btn {
  background-color: var(--licht_roze);
  color: var(--blauw);
}

button.btn#ticket-btn a {
  color: var(--blauw);
}

.event-ticket button.btn#ticket-btn a {
  color: var(--licht_roze);
}

button.btn {
  padding: 0.75rem 1.5rem;
}

/* Progamma */

section.programma .first-level,
section.programma .second-level,
section.programma .third-level {
  cursor: default;
}

section.programma {
  background-color: var(--licht_roze);
}

.programma-container {
  width: 100%;
  color: var(--blauw);
}

.top-info {
  font-size: clamp(0.8rem, 8vw, 1.2rem);
  font-weight: 500;
}

.start-time::after {
  content: "–";
  padding: 0 0.5rem;
}

li.tt-item {
  padding-left: 2.5rem;
  position: relative;
}

li.tt-item::before {
  content: url(../assets/diamond-dot.svg);
  /* vertical-align: middle; */
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}

.programma-container .toggle-btn {
  text-align: right;
}

.programma-container .toggle-btn svg {
  width: 2rem;
  height: 2rem;
}

/* Tafelberg-Programma */

.event-date{
  background-color:var(--blauw);
  display:flex;
  justify-content: center;
  align-items: center;
  margin: 2rem 0;
}

.event-date h2{
  font-family:var(--futura);
  font-weight:bold;
  font-size:2rem;
  color:var(--licht_roze)
}

.event-ticket button.btn#ticket-btn {
  background-color: var(--blauw);
}

.event-ticket a{
    color: var(--licht_roze);
}

/* Fotos */

section.fotos {
  background-color: var(--licht_blauw);
}

.foto-container {
  color: var(--blauw);
}

/* ----------Flickity----------- */

.carousel-wrapper {
  width: 100vw;
  position: relative;
  display: flex;
  align-items: center;
  margin: 0 auto;
}

.custom-prev-button,
.custom-next-button {
  background: transparent;
  border: none;
  cursor: pointer;
  z-index: 999; /* Keep buttons on top */
  position: absolute;
  transform: translateY(-2rem);
  touch-action: manipulation; /* Prevents double-tap zoom */
}

.custom-prev-button {
  left: -6rem;
}

.custom-next-button {
  right: -6rem;
}

/* .custom-prev-button.is-disabled,
.custom-next-button.is-disabled {
  opacity: 0.3;
  cursor: default;
} */

.carousel {
  flex-grow: 1;
  position: relative;
  width: 100%;
  box-sizing: border-box;
  margin-left: auto;
  margin-right: auto;
  margin-top: 2rem;
  margin-bottom: 0;
  transform: translateX(8rem);
}

.carousel-cell {
  width: 25%; /* As 4 images in a row */
  height: auto;
  position: relative;
  margin-right: 1rem;
}

.carousel-cell img {
  width: 100%;
  height: auto;
  object-fit: cover;
  object-position: top;
}

.carousel-cell.size-landscape {
  width: 75%;
  height: auto;
}

/* loading images */
.carousel-cell img[data-flickity-lazyload] {
  opacity: 0;
  transition: opacity 0.3s;
}

/* loaded images */
.carousel-cell img.flickity-lazyloaded {
  opacity: 1;
}

.flickity-button {
  display: none;
}

.tag {
  display: flex;
  flex-direction: column;
  position: absolute;
  align-items: center;
  top: 0;
  right: 0;
  padding: 20px;
}

.tag-icon {
  text-align: center;
  padding-bottom: 0.5rem;
}

.tag.winner .tag-icon {
  fill: var(--blauw);
}

.tag.nominee .tag-icon,
.tag.nominee-14 .tag-icon {
  fill: var(--licht_blauw);
}

.tag div p {
  line-height: 1;
}

.tag.winner p,
.tag.nominee p,
.tag.nominee-14 p {
  text-align: center;
  font-size: 1rem;
  text-transform: uppercase;
}

.tag.winner div p {
  color: var(--blauw);
}

.tag.nominee div p,
.tag.nominee-14 div p {
  color: var(--licht_blauw);
}

p.winner,
p.nominee,
p.nominee-14 {
  font-weight: 600;
}

p.bdg {
  font-weight: 600;
}

.download-link {
  display: block;
  text-align: center;
  text-decoration: none;
  padding: 5px 10px;
  background-color: var(--licht_blauw);
  color: var(--blauw);
  transition: background-color 0.3s;
}

.download-link:hover {
  background-color: var(--groen);
  color: var(--licht_groen);
}

p a.facebook-link {
  color: var(--licht_blauw);
  text-decoration: underline;
}

/* ----------Flickity----------- */

/* Videos */

section.videos {
  background-color: var(--oranje);
}

.video-container {
  color: var(--blauw);
}

.video-carousel-container {
  width: 100vw;
  height: auto;
  position: relative;
  display: flex;
  align-items: center;
  margin: 0 auto;
}

.video-carousel {
  flex-grow: 1;
  position: relative;
  width: 100%;
  box-sizing: border-box;
  margin-left: auto;
  margin-right: auto;
  margin-top: 2rem;
  margin-bottom: 4rem;
  transform: translateX(8rem);
}

.video-carousel-cell {
  width: 50%; /* Set the cell width to 50% of the container */
  position: relative; /* Position relative to allow absolute positioning inside */
  margin-right: 2rem;
  left: 0;
}

.video-embed-container {
  padding-bottom: 1rem;
}

.video-embed-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.aspect-ratio {
  position: relative;
  width: 100%; /* Full width of the .carousel-cell.video */
  padding-top: 56.25%; /* Aspect ratio of 16:9 (9 / 16 = 0.5625) */
  height: 0; /* Collapse the div and let padding give it height */
}

.video-content h3.video-title {
  font-size: clamp(2rem, 5vw, 4rem);
  font-family: var(--boxout);
  text-transform: uppercase;
}

/* FAQ */

section.faq {
  background-color: var(--groen);
}

.faq-container {
  color: var(--licht_blauw);
}

.faq-container .toggle-btn svg path {
  stroke: var(--licht_blauw);
}

.faq-container .toggle-btn svg {
  width: 1rem;
  height: 1rem;
}

.faq {
  display: flex;
  gap: 1rem;
  align-items: center;
}

/* Footer */

section.footer {
  background-color: #000;
}

.organisatie {
  gap: 1rem;
}

.organisatie p{
  color: #fff;
  font-size: clamp(1.2rem, 6vw, 1.8rem);
}

.organisatie a{
    color: #fff;
}

a.organisatie-link {
  font-size: clamp(0.8rem, 5vw, 1.1rem);
}

.organisatie a,
.organisatie a.email {
  border-bottom: 1px solid white;
}

.credit-container {
  gap: 1rem;
}

p.credit {
  color: #fff;
  font-size: clamp(0.8rem, 5vw, 1.1rem);
}

/* organisatie */

section.organisatie {
  background-color: #000;
  color: #fff;
}

.organisatie ul li {
  line-height: 1.4;
}
p.copyright {
  font-size: clamp(0.8rem, 5vw, 1.1rem);
}
p.copyright a {
  border: none;
  font-size: inherit;
}

/* -------------- Small desktop (1280px) */

@media (max-width: 1280px) {

  /* intro */

    .container {
    width: 100%;
    height: 60vh;
    overflow: hidden;
  }


  /* ----------Flickity----------- */

  .carousel-cell {
    width: 33.33%; /* As 4 images in a row */
    height: auto; /* 80% of the viewport width */
    position: relative;
    margin-right: 1rem;
  }

  .carousel {
    transform: translateX(8rem);
  }

  /* ----------Flickity----------- */
}

/* -------------- Tablet (959px) */

@media (max-width: 959px) {

  /* intro */
    .event-slogan-container h1{
    font-size:2rem;
  }

  .event-date-container p,
  .event-location-container p {
    font-size:1.2rem;
  }

  .button.btn{
    padding: 0.5rem 1.2rem  
  }

    /* end intro */

  .container {
    width: 100%;
    height: 75vh;
    overflow: hidden;
  }

  .visual-container {
    width: 90%;
    top: 0;
    left: 50%;
    margin-left: auto;
    margin-right: auto;
    transform: translate(-50%, 0);
    line-height: 0;
    z-index: 0;
    overflow: hidden;
  }

  .background-image {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: translate(-50%, -50%);
    z-index: -1;
  }

  svg.diamond {
    /* margin:2vw 0; */
    transform: scale(1.2);
    transform-origin: center center;
  }

  .marquee-top span {
    width: 200vw;
    height: 10vh;
    line-height: 10vh;
  }

  .marquee-left span {
    width: 11vw;
    line-height: 12vw;
    height: 200vh;
  }

  .marquee-right span {
    width: 11vw;
    line-height: 12vw;
    height: 200vh;
  }

  .marquee-bottom span {
    width: 200vw;
    height: 10vh;
    line-height: 10vh;
  }

  #marquee-top {
    top: 0;
    /* height:6vh; */
  }

  #marquee-left {
    top: 0;
    left: 0;
  }

  #marquee-right {
    top: 0;
    right: 0;
  }

  #marquee-bottom {
    bottom: 0;
  }

  /* programma */

  .event-date{
    padding:1rem 1rem;
  }

  .event-date h2{
    font-size:1.2rem;
  }

  /* end programma */
  

  /* ----------Flickity----------- */

  .carousel-cell {
    width: 50%; /* As 4 images in a row */
    height: auto; /* 50% of the viewport width */
    position: relative;
    margin-right: 1rem;
  }

  .carousel {
    transform: translateX(1rem);
  }

  .custom-prev-button {
    transform: scale(0.8);
  }

  .custom-next-button {
    transform: scale(0.8);
  }

  /* Videos */

  .video-carousel-container {
    width: 100vw;
    height: auto;
    position: relative;
    display: flex;
    align-items: flex-end;
    margin: 0 auto;
  }

  .video-carousel {
    transform: translateX(1rem);
    padding-bottom: 4rem;
  }

  .video-carousel-cell {
    width: 75%;
  }

  /* ----------Flickity----------- */
}

/* In between tablet and mobile */

@media (max-width: 700px){

  /* intro */
    .event-slogan-container h1{
    font-size:1.5rem;
  }

  button.btn {
  padding: 0.5rem 1rem;
}

  button.btn a {
  font-size:1.2rem;
}

.event-date{
  padding:1rem;
  text-align: center;
}

  .event-date h2{
    font-size:1.2rem;
  }
}


/* ---------- Mobile  */

/* Hero */

@media (max-width: 480px) {
  .container {
    width: 100%;
    height: 50vh;
    overflow: hidden;
  }

  .visual-container {
    width: 80%;
    top: 6vh;
    left: 50%;
    margin-left: auto;
    margin-right: auto;
    transform: translate(-50%, 0);
    line-height: 0;
    z-index: 0;
    overflow: hidden;
  }

  .background-image {
    height: 90%;
    object-fit: cover;
  }

  svg.diamond {
    /* margin:2vw 0; */
    transform: scale(1.2);
    transform-origin: center center;
  }

  .marquee-top span {
    width: 200vw;
    height: 4vh;
    line-height: 6vh;
  }

  .marquee-left span {
    width: 11vw;
    line-height: 12vw;
    height: 200vh;
  }

  .marquee-right span {
    width: 11vw;
    line-height: 12vw;
    height: 200vh;
  }

  .marquee-bottom span {
    width: 200vw;
    height: 4vh;
    line-height: 6vh;
  }

  .footer-marquee span {
    width: 200vw;
    height: 6vh;
    line-height: 6vh;
  }

  #marquee-top {
    top: 0;
    height: 6vh;
  }

  #marquee-left {
    top: 0;
    left: 0;
  }

  #marquee-right {
    top: 0;
    right: 0;
  }

  #marquee-bottom {
    bottom: 0;
  }

  /* Intro */

  .intro p {
    font-size: clamp(1rem, 6vw, 1.2rem);
  }

  .second-hero-container {
    height: 30vh;
  }

  .event-date-container p,
  .event-location-container p {
    font-size: clamp(0.8rem, 3vw, 1rem);
  }

  .event-slogan-container p {
    font-size: clamp(1rem, 4vw, 1.2rem);
  }

  .event-slogan-container h1{
    font-size: clamp(1rem, 4vw, 1.2rem);
  }

  .header-ticket-container button.btn#ticket-btn {
    background-color: var(--licht_roze);
    color: var(--blauw);
  }

  /* ----------Flickity----------- */

  .carousel {
    transform: translateX(0);
    padding: 0 1rem;
  }

  .carousel-cell {
    width: 100%; /* As 4 images in a row */
    height: auto; /* 50% of the viewport width */
    position: relative;
    margin-right: 1rem;
  }

  .custom-prev-button {
    left: -7rem;
    transform: scale(0.5);
  }

  .custom-next-button {
    right: -7rem;
    transform: scale(0.5);
  }

  /* Videos */

  .video-carousel-container {
    width: 100vw;
    height: auto;
    position: relative;
    display: flex;
    align-items: flex-end;
    margin: 0 auto;
  }

  .video-carousel-cell {
    width: 100%;
  }

  .video-carousel {
    transform: translateX(0);
    padding: 0 1rem;
    padding-bottom: 3rem;
  }

  .video-carousel-container .custom-prev-button {
    left: -8rem;
    transform: scale(0.5);
  }

  .video-carousel-container .custom-next-button {
    right: -8rem;
    transform: scale(0.5);
  }

  /* ----------Flickity----------- */

  /* Accordion */
}

/* 404 */

.error-404 div.wrapper {
  background-color: var(--rood);
}

.wrapper div.flex div {
  line-height: 2rem;
}

.error-404 div.wrapper {
  color: var(--licht_roze);
  font-family: var(--boxout);
}

.error-404 div.wrapper h1 {
  font-size: clamp(2vw, 8vw, 10vw);
}

.error-404 div.wrapper h1 {
  font-size: clamp(5vw, 10vw, 15vw);
}