@font-face {
    font-family: "Heading-Pro-Double-Regular";
    src: url('../fonts/Heading-Pro-Double-Regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "Heading-Pro-Treble-Regular";
    src: url('../fonts/Heading-Pro-Treble-Regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "Heading-Pro-Treble-ExtraBold";
    src: url('../fonts/Heading-Pro-Treble-ExtraBold.woff2') format('woff2');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: "Heading-Pro-Treble-Heavy";
    src: url('../fonts/Heading-Pro-Treble-Heavy.woff2') format('woff2');
    font-weight: bold;
    font-style: normal;
}

:root {

    /***Logo's***/
    --logo-standard: url("../../custom/theme/assets/images/BF_Toolkit_Logo-Orange-CMYK.svg");
    --logo-alt: url("../../custom/theme/assets/images/BF_Toolkit_Logo-White-CMYK.svg");

    /***Header Image (Van toepassing op visual.twig)***/
    /* --header-image: url("../../custom/theme/assets/images/header_background.jpg"); */

    /***Brand Colors***/
    --color-brand-primary: #FE7000;
    --color-brand-primary-rgb: 255, 112, 0;
    --color-brand-secondary: #2d2d2d;
    --color-brand-tertiary: #7ADEC9;
    --color-brand-light: #EFEFEF;
    --color-brand-dark: #000000;
    --color-accent-purple: #6131AD;

    /***Font***/
    --font-family: 'Heading-Pro-Double-Regular', sans-serif;
    --font-family-title: 'Heading-Pro-Treble-Heavy', sans-serif;
    --font-family-bold: 'Heading-Pro-Treble-ExtraBold', sans-serif;
    --font-family-alt: 'Heading-Pro-Treble-Regular', sans-serif;
    --lineheight-size-m: 1.5;
    --border-radius: 0;

    /* --font-size: 1.6rem; */

    /**** Voor meer settings zie: /themes/base/assets/style/variables.css ****/
}

input.checkbox-toggle:checked+label.checkbox-toggle-button {
    background: green;
}

/* GENERAL */
body {
    color: var(--color-neutral-white);
    background-color: var(--color-neutral-black);
    background-image: url("../images/overhead-view-dry-purple-holi-colored-black-backdrop.png");
    background-size: 50vw;
    background-position: center right -20vw;
    background-repeat: no-repeat;
}

body.layout-header-small main {
    color: var(--color-neutral-white);
    background-color: transparent;
}

header .header_bar {
    color: var(--color-neutral-white);
    background-color: transparent;
    box-shadow: none;
    position: absolute;
}

.menu {
    justify-content: space-between;
}

.menu-items ul {
    padding: 0;
}

.menu-items li {
    align-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    width: max-content;
    height: calc(var(--menu-height) * 0.61);
    padding: 0 0.8rem;
    margin-top: unset;
}

.menu-items li .menu-item {
    color: var(--color-neutral-white);
}

.menu .language {
    margin-top: unset;
}

.language .language_selector {
    color: var(--color-neutral-white);
    background-color: var(--color-neutral-gray-08);
    background-image: linear-gradient(45deg, var(--color-neutral-gray-08) 8px, transparent 0),
        linear-gradient(-45deg, var(--color-neutral-gray-08) 8px, transparent 0),
        linear-gradient(45deg, var(--color-neutral-gray-01) 10px, transparent 0),
        linear-gradient(-45deg, var(--color-neutral-gray-01) 10px, transparent 0);
    min-width: 80px;
}

.language .language_selector:hover {
    background-image: linear-gradient(45deg, var(--color-neutral-gray-08) 8px, transparent 0),
        linear-gradient(-45deg, var(--color-neutral-gray-08) 8px, transparent 0),
        linear-gradient(45deg, var(--color-brand-primary) 10px, transparent 0),
        linear-gradient(-45deg, var(--color-brand-primary) 10px, transparent 0);
}
.language .language_selector option{
    color: var(--color-neutral-white);
}
.logo-fluid {
    width: 100%;
    height: auto;
    max-width: 200px;
    margin: 0 auto;
}

.menu .menu-items {
    margin-left: unset;
}

.menu-trigger-btn {
    color: var(--color-neutral-white);
}

h1,
h2 {
    color: var(--color-brand-primary);
    text-transform: uppercase;
}
strong{
    font-family: var(--font-family-bold);
    font-weight: normal;
}
.button--dark {
    background-color: var(--color-brand-dark);
    color: var(--color-neutral-white);
    cursor: pointer;
}

.cookiebanner {
    background-color: var(--color-brand-secondary);
    color: var(--color-neutral-white);
}

.cookiebanner_button {
    color: var(--color-neutral-white)
}

/* FOOTER */
body.layout-header-small footer {
    background-color: transparent;
}

.footer_cta {
    background-image: url(../images/footer_explosion.png);
    background-size: contain;
    background-position: bottom, center;
    background-repeat: no-repeat;
    padding: 8rem 0 3.2rem 0;
}

body.layout-header-small footer .footer_bar {
    background-color: transparent;
    color: var(--color-neutral-white);
}
.footer_cta .cta{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.footer_cta .cta  a.poweredby {
    color: var(--color-neutral-white);
    opacity: 0.6;
        font-size: var(--font-size-xs);
        text-decoration: none;
        margin-top: 3.2rem;
}
ul{
    font-size: var(--font-size-xs);
}

/* LOGIN */
.layout-login {
    background-color: var(--color-brand-secondary);
    color: var(--color-neutral-black);
}

/* Homepage */
/* Countdown*/
.container_countdown {
    margin-top: -5rem;
    margin-bottom: 6.4rem;
    z-index: 8;
    position: relative;
}

.container_countdown h6 {
    text-align: center;
    margin-bottom: 1.6rem;
}

.col-countdown {
    grid-column: span 12;
}

.countdown-content {
    display: flex;
    width: 100%;
    justify-content: space-between;
}

.month-container,
.date-container,
.days-container,
.hours-container,
.minutes-container,
.seconds-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 24%;
    max-width: 140px;
    height: 140px;
    background-color: var(--color-brand-secondary);
}

.container_countdown .month,
.container_countdown .date,
.container_countdown .days,
.container_countdown .hours,
.container_countdown .minutes,
.container_countdown .seconds {
    margin: 10px 0;
    font-family: var(--font-family-title);
    font-size: var(--font-size-xl);
    line-height: var(--lineheight-size-s);
}

.month-label,
.days-label,
.hours-label,
.minutes-label,
.seconds-label {
    font-family: var(--font-family-title);
    font-size: var(--font-size-xs);
    line-height: var(--lineheight-size-s);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.col-countdown .navbuttons {
    display: flex;
    justify-content: center;
}
body.layout-header-small .header_visual.boost-your-mood{
    margin-top: 6.4rem;
}
.program-item .title {
    margin: 0 0 1.6rem 0;
    color: var(--color-brand-primary);
    text-transform: uppercase;
}
.row-gallery p{
    font-size: var(--font-size-xs);
}
.gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 1.6rem;
    justify-content: space-between;
}

a.gallery-image-link {
    width: 46%;
    aspect-ratio: 1/1;
    overflow: hidden;
    margin: unset;
    line-height: 0;
    border: none;
    display: block;
    border-radius: var(--border-radius);
}

a.gallery-image-link figure {
    border: none;
}
.iframe_container{
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
}
.iframe_container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}
/* Formulier */
body.page-home {
    background-image: url("../images/oranje-splash.png");
    background-size: 25vw;
    background-position: center right -12vw;
}

.page-home .footer_cta {
    display: none;
}

.mainform {
    margin: 0em 0 3.2rem 0;
}

.accordion_title {
    font-family: var(--font-family-bold);
    color: var(--color-brand-primary);
}

.form_label {
    font-family: var(--font-family-bold);
    max-width: 55ch;
}

.radio-custom-label {
    color: var(--color-neutral-gray-01);
}

.accordion_step--finished .accordion_status {
    background: var(--color-brand-tertiary);
}

.accordion_status {
    background: var(--color-brand-secondary);
}

.button--back {
    color: var(--color-brand-primary);
    cursor: pointer;
}

.button--secondary,
.button--info {
    background-color: var(--color-accent-purple);
}

.button--secondary:hover,
.button--warning:hover,
.button--info:hover,
.button--dark:hover {
    background-color: var(--color-brand-secondary);
}

.assign-ticket--confirm-modal .ui-button.button--primary:hover,
.button--primary:hover {
    background-color: var(--color-brand-secondary);
}


/* LOCATIE */
.container-fluid .header_visual img {
    height: 33vh;
    object-fit: cover;
    object-position: center;
}
.page-location .container-fluid .header_visual img {
    object-position: bottom;
}
.img-fluid  {
    width: 100%;
    max-width: 100%;
    height: auto;
    border: 2px solid var(--color-brand-primary);
    float: right;
}

.page-location .img-fluid:last-child  {
    width: 60%;
    margin-top: -64px;
    margin-right: -12px;
    transform: rotate(5deg);
}
/* PROGRAMMA */

.program-table .program-day .program-items .program-item .time {
    color: var(--color-neutral-white);
    font-size: var(--font-size-xs);
}
.program-table .program-day .program-date .program-date-container .weekday {
    font-family: var(--font-family-title);
}
.program-table .program-day .program-items .program-item {
    padding: 1.6rem;
    font-size: var(--font-size-s);
    width: 100%;
}
    .program-item .background-image-container img{
        border: 1px solid var(--color-brand-primary);
    }
.program-item .title {
    margin: 0;
    color: var(--color-brand-primary);
    text-transform: uppercase;
}

.page-program .gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 1.6rem;
    flex-direction: column;
    margin-top: 3.2rem;
}
.page-program a.gallery-image-link {
    width: 50%;
    aspect-ratio: 3/4;
    transform: rotate(5deg);
}
.page-program a.gallery-image-link:not(:first-child) {
        margin-top: -13vw;
}
.page-program a.gallery-image-link:nth-child(even) {
    width: 66%;
    aspect-ratio: 4/3;
    transform: rotate(-5deg);
    align-self: flex-end;
}
.page-program a.gallery-image-link:nth-child(2) {
z-index: 5;
}
.page-program a.gallery-image-link:nth-child(4),
.page-program a.gallery-image-link:nth-child(6) {
    aspect-ratio: 3/4;
    width: 50%;
}
.page-program a.gallery-image-link:nth-child(7) {
    aspect-ratio: 4/3;
}
.page-program a.gallery-image-link figure{
   display: block;
   height: 100%;
   border: 2px solid var(--color-brand-primary);
}
.iti__dropdown-content{
    color: var(--color-neutral-gray-09);
}
.iti__dial-code {
    color: var(--color-neutral-gray-07);
}
/* DRESSCODE */
.col-center{
    grid-column: span 12;
}

.page-dresscode a.gallery-image-link {
    width: 47%;
    aspect-ratio: 3/4;
    transform: rotate(5deg);
}
.page-dresscode a.gallery-image-link:nth-child(even) {
    transform: rotate(-5deg);
}
.page-dresscode a.gallery-image-link figure{
   display: block;
   height: 100%;
   border: 2px solid var(--color-brand-primary);
}
/* FAQ */
.faq_list .ui-accordion-header.ui-state-default{
    background-color: var(--color-neutral-black);
    border-bottom: 1px solid var(--color-brand-primary);
    color: var(--color-neutral-white);
}
.faq_list .ui-accordion-header.ui-state-active {
    background-color: var(--color-brand-secondary);
    border-bottom: 1px solid var(--color-brand-primary);
    color: var(--color-neutral-white);
}
.faq_list .ui-accordion-header.ui-state-default.ui-state-hover,
.faq_list .ui-accordion-header.ui-state-active.ui-state-hover {
    background-color: var(--color-brand-secondary);
    color: var(--color-neutral-white);
}
.ui-widget-content {
    border: none;
    background: var(--color-brand-secondary);
    color: var(--color-neutral-white);
}
.faq_list .ui-accordion-header {
    font-size: var(--font-size-s);
}
.faq_list .ui-accordion-header.ui-state-default {
    margin-top: 0; 
}
.ui-icon, .ui-widget-content .ui-icon {
    filter: brightness(0) saturate(100%) invert(45%) sepia(21%) saturate(6477%) hue-rotate(5deg) brightness(107%) contrast(106%);
}
.ui-state-active .ui-icon, .ui-button:active .ui-icon {
    filter: brightness(0) saturate(100%) invert(45%) sepia(21%) saturate(6477%) hue-rotate(5deg) brightness(107%) contrast(106%);
}
.page-faq h3{
    font-size: var(--font-size-m);
    color: var(--color-brand-primary);
    text-transform: uppercase;
    margin: 6.4rem 0 1.6rem 0;
}
.faq_list h6{
    text-transform: none;
    line-height: var(--lineheight-size-m);
    font-family: var(--font-family-bold);
    text-indent: 0;
}

.page-contenido .radio-custom-label,
.page-contenido .form_label{
    color:var(--color-brand-dark);
}
.multiple-editors-notice span{
    color: var(--color-brand-dark);
}
@media screen and (min-width: 320px) {
    .menu.hide-on-tablet {
        display: none !important;
    }

    .menu.hide-on-desktop {
        display: flex !important;
    }
}
@media screen and (min-width: 425px) {
    ul {
        font-size: var(--font-size-s);
    }
}
@media screen and (min-width: 600px) {
    a.gallery-image-link {
        width: 31%;
    }
    .page-dresscode a.gallery-image-link {
    width: 31%;
}
}
@media screen and (min-width: 768px) {
    a.gallery-image-link {
        width: 23%;
    }

    .col-center {
        grid-column: span 10/12;
    }

    .container_countdown {
        margin-top: -10rem;
    }

    .month-label,
    .days-label,
    .hours-label,
    .minutes-label,
    .seconds-label {
        font-size: var(--font-size-s);
    }

    .page-program .gallery {
        margin-top: 0;
    }
    body.layout-header-small .header_visual.boost-your-mood{
    margin-top: 0;
    }
    .program-item .background-image-container img{
    width: 50%;
}
}

@media (min-width: 992px) {
    .layout-header-small .content-container .container,
    body.layout-header-full-width .container {
        width: 970px;
    }

    .col-countdown {
        grid-column: span 6/10;
    }

    a.gallery-image-link {
        width: 15%;
    }

    .container-fluid .header_visual img {
        height: 60vh;
    }

    .page-location .img-fluid:last-child img {
        margin-right: -64px !important;
    }

    .col-center {
        grid-column: span 8/11;
    }

    .col-form {
        grid-column: span 8 / 11;
    }
}

@media screen and (min-width: 1200px) {
    .menu.hide-on-tablet {
        display: flex !important;
    }

    .menu.hide-on-desktop {
        display: none !important;
    }

    .layout-header-small .content-container .container,
    body.layout-header-full-width .container {
        width: 1170px;
    }
    .container_countdown {
    margin-top: -14rem;
}
.page-program a.gallery-image-link:not(:first-child) {
    margin-top: -11vw;
}
.page-program a.gallery-image-link:last-child {
    margin-top: -4vw;
}
}

.form_check {
    display: inline;
}