.elementor-kit-8{--e-global-color-primary:#051734;--e-global-color-secondary:#FF2E88;--e-global-color-text:#051734;--e-global-color-accent:#C8FF3D;--e-global-color-crnvlsun:#FFC219;--e-global-color-crnvlviolet:#7A4DFF;--e-global-color-crnvlcyan:#22E8E0;--e-global-color-crnvlgreen:#22B573;--e-global-color-crnvlcream:#FFF4E4;--e-global-color-crnvloff:#FBF7F0;--e-global-color-crnvllilac:#CCB0FA;--e-global-color-crnvlpanel:#0B2A58;--e-global-color-crnvlline:#14407E;--e-global-typography-primary-font-family:"Anton";--e-global-typography-primary-font-weight:400;--e-global-typography-primary-text-transform:uppercase;--e-global-typography-primary-line-height:0.94em;--e-global-typography-primary-letter-spacing:0px;--e-global-typography-secondary-font-family:"Archivo";--e-global-typography-secondary-font-size:12px;--e-global-typography-secondary-font-weight:800;--e-global-typography-secondary-text-transform:uppercase;--e-global-typography-secondary-letter-spacing:0.22em;--e-global-typography-text-font-family:"Archivo";--e-global-typography-text-font-size:17px;--e-global-typography-text-font-weight:400;--e-global-typography-text-line-height:1.65em;--e-global-typography-accent-font-family:"Archivo";--e-global-typography-accent-font-size:13px;--e-global-typography-accent-font-weight:900;--e-global-typography-accent-text-transform:uppercase;--e-global-typography-accent-letter-spacing:0.1em;background-color:#051734;color:#FFF4E4;font-family:"Archivo", Sans-serif;font-size:17px;font-weight:400;line-height:1.65em;}.elementor-kit-8 button,.elementor-kit-8 input[type="button"],.elementor-kit-8 input[type="submit"],.elementor-kit-8 .elementor-button{background-color:#FF2E88;font-family:"Archivo", Sans-serif;font-size:13px;font-weight:900;text-transform:uppercase;letter-spacing:0.1em;color:#FFFFFF;border-radius:999px 999px 999px 999px;padding:16px 28px 16px 28px;}.elementor-kit-8 button:hover,.elementor-kit-8 button:focus,.elementor-kit-8 input[type="button"]:hover,.elementor-kit-8 input[type="button"]:focus,.elementor-kit-8 input[type="submit"]:hover,.elementor-kit-8 input[type="submit"]:focus,.elementor-kit-8 .elementor-button:hover,.elementor-kit-8 .elementor-button:focus{background-color:#051734;color:#FFF4E4;}.elementor-kit-8 e-page-transition{background-color:#FFBC7D;}.elementor-kit-8 a{color:#FF2E88;}.elementor-kit-8 a:hover{color:#C8FF3D;}.elementor-kit-8 h1{font-family:"Anton", Sans-serif;font-weight:400;text-transform:uppercase;line-height:0.95em;}.elementor-kit-8 h2{font-family:"Anton", Sans-serif;font-weight:400;text-transform:uppercase;line-height:0.94em;}.elementor-kit-8 h3{font-family:"Anton", Sans-serif;font-weight:400;text-transform:uppercase;line-height:1.05em;}.elementor-kit-8 h4{font-family:"Archivo", Sans-serif;font-weight:900;text-transform:uppercase;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1320px;}.e-con{--container-max-width:1320px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}
/* Start custom CSS *//* ==========================================================
   CRNVL.FM - beweging en playerdetails
   Alles wat Elementor niet native kan. Kleuren volgen het merk.
   ========================================================== */

/* Merkpunt tussen CRNVL en FM (de punt van Anton verdwijnt) */
.crnvl-dot{display:inline-block;width:.13em;height:.13em;border-radius:50%;background:#C8FF3D;margin:0 .09em .02em .13em;vertical-align:baseline}

/* ---------- Marquee ---------- */
.crnvl-marquee{overflow:hidden}
.crnvl-marquee-track{width:max-content;flex-wrap:nowrap!important;animation:crnvl-scroll 26s linear infinite}
.crnvl-marquee-brand .crnvl-marquee-track{animation-duration:34s}
.crnvl-marquee-item{white-space:nowrap}
@keyframes crnvl-scroll{to{transform:translateX(-50%)}}

/* ---------- Equalizer ---------- */
.crnvl-eq{display:flex;align-items:flex-end;gap:4px;height:36px}
.crnvl-eq span{display:block;width:5px;border-radius:99px;background:#FF2E88;height:18%}
.crnvl-sticky-eq{height:22px}
body.crnvl-playing .crnvl-eq span{animation:crnvl-bounce .9s ease-in-out infinite}
.crnvl-eq span:nth-child(1){animation-delay:-.10s}
.crnvl-eq span:nth-child(2){animation-delay:-.45s}
.crnvl-eq span:nth-child(3){animation-delay:-.75s}
.crnvl-eq span:nth-child(4){animation-delay:-.25s}
.crnvl-eq span:nth-child(5){animation-delay:-.60s}
.crnvl-eq span:nth-child(6){animation-delay:-.35s}
.crnvl-eq span:nth-child(7){animation-delay:-.85s}
.crnvl-eq span:nth-child(8){animation-delay:-.50s}
.crnvl-eq span:nth-child(9){animation-delay:-.15s}
.crnvl-eq span:nth-child(10){animation-delay:-.70s}
@keyframes crnvl-bounce{0%,100%{height:16%}50%{height:100%}}

/* ---------- Volume ---------- */
.crnvl-volume{display:flex;align-items:center;gap:10px}
.crnvl-volume input[type=range]{-webkit-appearance:none;appearance:none;accent-color:#FF2E88;width:100%;height:6px;border-radius:99px;background:rgba(5,23,52,.16);outline:none;cursor:pointer}
.crnvl-sticky-volume input[type=range]{background:rgba(255,244,228,.3)}
.crnvl-volume input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:#051734;border:0}
.crnvl-sticky-volume input[type=range]::-webkit-slider-thumb{background:#FFF4E4}
.crnvl-volume input[type=range]::-moz-range-thumb{width:18px;height:18px;border:0;border-radius:50%;background:#051734}
.crnvl-sticky-volume input[type=range]::-moz-range-thumb{background:#FFF4E4}

/* ---------- Draaiende plaat ---------- */
body.crnvl-playing .crnvl-disc,body.crnvl-playing .crnvl-sticky-disc{animation:crnvl-spin 3.4s linear infinite}
@keyframes crnvl-spin{to{transform:rotate(360deg)}}

/* ---------- Confetti in de hero ---------- */
.crnvl-hero{overflow:hidden}
.crnvl-hero>.e-con-inner{position:relative;z-index:2}
.crnvl-confetti{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.crnvl-confetti i{position:absolute;top:-8vh;width:10px;height:14px;border-radius:2px;opacity:.7;animation:crnvl-fall linear infinite}
@keyframes crnvl-fall{0%{transform:translate3d(0,-10vh,0) rotate(0deg)}100%{transform:translate3d(40px,115vh,0) rotate(560deg)}}

/* ---------- Sticky player ---------- */
.crnvl-sticky{position:fixed;left:0;right:0;bottom:0;z-index:70;transform:translateY(130%);transition:transform .55s cubic-bezier(.2,.8,.2,1)}
.crnvl-sticky.is-visible{transform:none}

/* ---------- Programma-carrousel ---------- */
.crnvl-prog-viewport{overflow-x:auto;scroll-behavior:smooth;scroll-snap-type:x mandatory;scrollbar-width:none;flex-wrap:nowrap!important}
.crnvl-prog-viewport::-webkit-scrollbar{display:none}
.crnvl-pcard{scroll-snap-align:start}
.crnvl-pnav a{cursor:pointer}

/* ---------- Audio-element blijft onzichtbaar ---------- */
#crnvl-stream{display:none}

/* ---------- Mobiel ---------- */
@media (max-width:767px){
  .crnvl-sticky-volume,.crnvl-sticky-eq,.crnvl-sticky-live{display:none!important}
}

/* ---------- Minder beweging ---------- */
@media (prefers-reduced-motion:reduce){
  .crnvl-marquee-track,.crnvl-eq span,.crnvl-confetti i,.crnvl-disc,.crnvl-sticky-disc{animation:none!important}
  .crnvl-sticky{transition:none}
}
/* Naadloze marqueeloop: geen gap tussen de kopieen */
.crnvl-marquee-track{gap:0!important}
.crnvl-marquee-item{padding-right:.55em}

/* Paginaovergang binnen het palet houden */


/* Magenta merkaccent binnen koppen (CRNVL.FM, carnaval!, maar.) */
.crnvl-pink{color:#FF2E88}

/* Paginaovergang in het merkpalet in plaats van Elementor-oranje */
.elementor-kit-8 e-page-transition{background-color:#051734}

/* ---------- Kanteling van de marquees ----------
   De graden en de negatieve marges horen bij elkaar: de marge vangt de
   driehoekjes op die de kanteling aan de zijkanten maakt. */
.crnvl-marquee{transform:rotate(-1deg) scale(1.035);margin-top:calc(-1.4vw - 10px)!important;margin-bottom:calc(-1.4vw - 10px)!important}
.crnvl-marquee-brand{transform:rotate(1.2deg) scale(1.04);margin-top:calc(-1.6vw - 12px)!important;margin-bottom:calc(-1.6vw - 12px)!important}

/* Sticky balk blijft onderaan het scherm plakken */
.crnvl-sticky{position:fixed!important}

/* Programmakaarten mogen niet krimpen; de rij schuift horizontaal */
.crnvl-prog-viewport>.crnvl-pcard{flex:0 0 auto}

/* ---------- Live-badge ----------
   Pill met knipperend stipje; de heading zelf krijgt de vorm zodat hij
   om de tekst heen sluit in plaats van de hele breedte te pakken. */
.crnvl-badge-live .elementor-heading-title{display:inline-flex;align-items:center;gap:8px;background:#FF2E88;color:#FFFFFF;padding:7px 14px;border-radius:999px}
.crnvl-badge-live .elementor-heading-title::before{content:'';width:8px;height:8px;border-radius:50%;background:#FFFFFF;animation:crnvl-knipper 1.6s infinite}
@keyframes crnvl-knipper{0%,100%{opacity:1}50%{opacity:.15}}
@media (prefers-reduced-motion:reduce){.crnvl-badge-live .elementor-heading-title::before{animation:none}}

/* Tracktitel duwt de bediening niet meer weg */
.crnvl-track,.crnvl-sticky-meta{min-width:0}
.crnvl-track-title .elementor-heading-title,.crnvl-track-artist .elementor-heading-title,.crnvl-sticky-title .elementor-heading-title,.crnvl-sticky-artist .elementor-heading-title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---------- Header over de hero ----------
   De header ligt over de hero heen in plaats van erboven, zodat de
   decoratieve cirkel doorloopt tot de bovenrand van de pagina.
   De hero heeft bovenin genoeg padding om vrij te blijven van de header. */

/* ---------- Header ----------
   Ligt transparant over de hero. Zodra je 40px scrolt plakt hij vast
   (Elementor sticky) en krijgt hij de donkerblauwe achtergrond. */
.elementor-location-header{position:absolute;top:0;left:0;right:0;z-index:100}
.crnvl-header{transition:background-color .3s ease,padding .3s ease}
.crnvl-header.elementor-sticky--effects{background-color:#051734;border-bottom:1px solid rgba(255,255,255,.12);padding-top:3px;padding-bottom:3px}

/* ---------- Playknop in de sticky balk ----------
   Desktop: precies in het midden van de balk.
   Mobiel: helemaal rechts, artwork en titel blijven links. */
@media (min-width:768px){
  .crnvl-sticky-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);margin:0}
}
@media (max-width:767px){
  .crnvl-sticky-play{order:9;margin-left:auto}
}

/* De kaartenrij mag krimpen, de pijltjes niet: anders schuift de rij over de
   linkerknop heen omdat de kaarten samen breder zijn dan het scherm. */
.crnvl-prog-viewport{min-width:0}
.crnvl-pnav{flex-shrink:0}

/* Volume: icoon links, schuif ernaast */
.crnvl-volume-icoon{flex:0 0 auto;line-height:0}
.crnvl-volume input[type=range]{height:7px}

/* De gekantelde marquees zijn bewust iets breder dan het scherm (rotatie +
   schaal). Zonder deze regel kun je de pagina een paar pixels opzij slepen. */
html,body{overflow-x:hidden;max-width:100%}

/* Mobiel: de kaarten bovenaan, de twee pijltjes eronder naast elkaar */
@media (max-width:767px){
  .crnvl-prog-viewport{order:-1;flex:0 0 100%}
  .crnvl-pnav{order:1}
}/* End custom CSS */