@import 'fonts/font-montserrat.css';

@font-face {
    font-family  : 'Kaushan Script';
    src          : url('../fonts/KaushanScript-Regular.ttf') format('truetype');
    font-display : swap;
}

html {
    scroll-behavior : smooth
}

body.page-template-page-festival {
    max-width                                                                                                                                                                                                                                             : unset;
    border                                                                                                                                                                                                                                                : 0px;
    margin                                                                                                                                                                                                                                                : 0px;
    background-color                                                                                                                                                                                                                                      : #0e0e0e;
    /* font-weight                                                                                                                                                                                                                                        : 400;
    font-size                                                                                                                                                                                                                                             : 16px; */
}

.mb-0 {
    margin-bottom : 0px !important;
}

.d-block {
    display : block;
}

.d-flex {
    display : flex;
}

.d-flex.u-centered {
    align-items     : center;
    justify-content : center;
}

.font-main {
    font-family : 'Montserrat';
}

.font-festive {
    font-family : 'Kaushan Script';
}

.u-text-white {
    color : white;
}

.u-text-muted {
    color : rgb(212, 212, 212);
}

.u-text-green {
    color : #79a72e;
}

.is-hazy {
    opacity : 0.7;
}

.u-z1 {
    z-index : 1;
}

.u-z2 {
    z-index : 2;
}

.u-hidden {
    display : none !important;
}

.u-self-centered {
    top       : 50%;
    left      : 50%;
    transform : translate(-50%, -50%);
}

img.is-bw {
    filter : grayscale(100%);
}

.notice {
    border-radius     : .25rem !important;
    border            : 1px solid;
    border-left-width : 4px;
    box-shadow        : 0 1px 1px rgba(0, 0, 0, .04);
    margin-top        : 20px;
}

.notice p {
    color   : inherit !important;
    margin  : .5em 0 !important;
    padding : 2px !important;
}

.notice-error {
    background-color : #f8d7da;
    border-color     : #f5c6cb;
    color            : #721c24;
}

.notice-succes {
    color            : #155724;
    background-color : #d4edda;
    border-color     : #c3e6cb;
}

.main--festive-container {
    width     : 90vw;
    max-width : 1000px;
    margin    : 0 auto;
    position  : relative;
}

.hero .back-button {
    position      : absolute;
    top           : 50px;
    right         : 0;
    background    : #79a72e;
    color         : white;
    font-size     : 14px;
    padding       : 7px 13px;
    z-index       : 3;
    border-radius : 5px;
    display       : flex;
    align-items   : center;
    gap           : 10px;
}

.hero .back-button i {
    color         : #79a72e;
    background    : white;
    border-radius : 3px;
    width         : 15px;
    height        : 16px;
    text-align    : center;
    line-height   : 15px;
    font-size     : 8px;
}

.hero--gradient {
    position                                                                                                                                                                                                                                                                                                                   : absolute;
    left                                                                                                                                                                                                                                                                                                                       : 0;
    top                                                                                                                                                                                                                                                                                                                        : 0;
    bottom                                                                                                                                                                                                                                                                                                                     : 0;
    right                                                                                                                                                                                                                                                                                                                      : 0;
    /* Permalink - use to edit and share this gradient                                                                                                                                                                                                                                                                         : https://colorzilla.com/gradient-editor/#000000+0,0e0e0e+100,0e0e0e+100&0+0,0.65+85,1+100 */
    background                                                                                                                                                                                                                                                                                                                 : -moz-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(12, 12, 12, 0.65) 85%, rgba(14, 14, 14, 1) 100%);
    /* FF3.6-15 */
    background                                                                                                                                                                                                                                                                                                                 : -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(12, 12, 12, 0.65) 85%, rgba(14, 14, 14, 1) 100%);
    /* Chrome10-25,Safari5.1-6 */
    background                                                                                                                                                                                                                                                                                                                 : linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(12, 12, 12, 0.65) 85%, rgba(14, 14, 14, 1) 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter                                                                                                                                                                                                                                                                                                                     : progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#0e0e0e', GradientType=0);
    /* IE6-9 */
}

.hero--festival {
    width    : 100%;
    height   : 100vh;
    position : relative;
}

.hero--inner {
    width    : 100%;
    height   : 100%;
    position : absolute;
    left     : 0;
    top      : 0;
    bottom   : 0;
    right    : 0;
}

.hero--festival .inner-content {
    position   : absolute;
    height     : 25vh;
    gap        : 50px;
    min-height : 180px;
}

.hero--festival .inner-content .title {
    width : 440px;
}

.hero--festival .inner-content h1 {
    line-height : 1;
    font-size   : 60px;
    margin      : 0px;
}

.hero--festival .inner-content img {
    max-height : 100%;
    width      : auto;
}

.hero--festival img.is-bg {
    width           : 100%;
    height          : 100%;
    object-fit      : cover;
    object-position : center;
}

.hero--back-black {
    background-color : black;
}

.tab--wrapper .tab--buttons {
    justify-content : center;
    gap             : 10px;
}

.tab--wrapper .tab--link {
    border-radius    : 1rem;
    padding-top      : 1rem;
    padding-left     : 1.5rem;
    padding-right    : 1.5rem;
    padding-bottom   : 1rem;
    width            : 33%;
    background-color : #1e1e1e;
    color            : white;
    border           : 0px;
    font-size        : 20px;
    margin           : 0px;
    text-align       : left;
    cursor           : pointer;
    position         : relative;
    overflow         : hidden;
}

.tab--wrapper .tab--link .button-title {
    text-transform : uppercase;
    font-weight    : 700;
    font-family    : 'Montserrat';
}

.tab--wrapper .tab--link .button-subtitle {
    font-weight : 400;
    font-family : 'Montserrat';
}

.tab--wrapper .tab--link .fa {
    position   : absolute;
    right      : 20px;
    top        : 50%;
    color      : #79a72e;
    transition : all .2s ease-out;
    transform  : translate(260%, -50%);
    font-size  : 20px;
}

.tab--wrapper .tab--link.active .fa {
    transform : translate(0%, -50%);
}

.tab--wrapper .tab--link .fa.active {
    transform : translate(0%, -50%);
}

.tab--wrapper .tab--contents {
    padding : 50px 20px;
}

.tab--wrapper .tab--contents .section-title {
    font-size  : 40px;
    text-align : center;
}

.tab--wrapper .tab--contents .section-title.has-subtitle {
    margin-bottom : 0px;
}

.tab--wrapper .tab--contents .section-sub-title {
    margin        : 0px;
    color         : white;
    text-align    : center;
    margin-bottom : 30px;
}

.tab--wrapper .tab--contents .festival-sectie {
    margin-top : 100px;
}

.tab--wrapper .item--wrapper {
    display    : flex;
    gap        : 120px;
    margin-top : 80px;
    flex-wrap  : wrap;
}

.tab--wrapper .item--wrapper .outer--item {
    width  : 100%;
    cursor : pointer;
}

.tab--wrapper .item--wrapper .item {
    border-radius    : 20px;
    background-color : #1e1e1e;
    position         : relative;
    display          : flex;
    gap              : 40px;
    width            : 100%;
    padding          : 20px;
    padding-right    : 120px;
}

.tab--wrapper .item--wrapper .item-image {
    position      : absolute;
    height        : 200px;
    width         : 200px;
    border-radius : 5px;
    overflow      : hidden;
    top           : -40px;
    left          : 40px;

}

.tab--wrapper .item--wrapper .item-image img {
    width           : 100%;
    height          : 100%;
    object-fit      : cover;
    object-position : center;
}

.tab--wrapper .item--wrapper .item-content {
    padding-left : 250px;
}

.tab--wrapper .item--wrapper .item-title {
    font-family : 'Montserrat';
    font-weight : 800;
    font-size   : 50px;
    margin      : 0px;
    padding     : 0px;
    line-height : 1;
    color       : white;
}

.tab--wrapper .item--wrapper .item-subtitle {
    font-family : 'Montserrat';
    color       : #79a72e;
    margin      : 5px 0px 0px 0px;
    font-size   : 16px;
}

.tab--wrapper .item--wrapper .item-end {
    position : absolute;
    right    : 20px;
    bottom   : 20px;
    color    : #79a72e;
}

#content .content.editor {
    border-radius    : 20px;
    background-color : #1e1e1e;
    position         : relative;
    width            : 100%;
    padding          : 30px;
}

#info .content.editor {
    margin-top : 50px;
}

#info .content.editor:first-child {
    margin-top : 0px;
}

#content .content.editor h3 {
    font-family   : 'Montserrat';
    font-weight   : 800;
    font-size     : 30px;
    margin-bottom : 20px;
    padding       : 0px;
    line-height   : 1;
    color         : white;
}

#content .content.editor h3 .time {
    font-weight : 400;
    font-size   : 18px;
    margin-left : 10px;
}

#content .content.editor p,
#content .content.editor li {
    color       : #79a72e;
    font-weight : 300;
}

#content .content.editor a {
    color           : white;
    text-decoration : underline;
}

#content .content.editor strong {
    font-weight    : 700;
    letter-spacing : 1px;
    color          : white;
}

#content .content.editor strong.inline-strong {
    letter-spacing : 0px;
    font-weight    : 500;
}

#content .content.editor .internal-link-button {
    background    : #79a72e;
    color         : white;
    font-size     : 14px;
    padding       : 7px 13px;
    border-radius : 5px;
    display       : inline-flex;
    align-items   : center;
    gap           : 10px;
    border        : 0px;
    cursor        : pointer;
    margin-top    : 5px;
}

#present .content form {
    display   : flex;
    color     : white;
    flex-wrap : wrap;
    gap       : 30px;
}

#present .content form .input-wrapper {
    width : calc(50% - 15px);
}

#present .content form .input-wrapper.wide {
    width : 100%;
}

#present .content form .input-wrapper.wide.checkbox {
    display     : flex;
    flex-wrap   : nowrap;
    gap         : 5px;
    align-items : center;
}

#present .content form .input-wrapper.wide.checkbox input {
    width : 30px;
}

#present .content form .submit-wrapper {
    width      : 100%;
    text-align : center;
}

#present .content form .submit-wrapper button {
    background    : #79a72e;
    color         : white;
    font-size     : 14px;
    padding       : 7px 13px;
    border-radius : 5px;
    display       : inline-flex;
    align-items   : center;
    gap           : 10px;
    border        : 0px;
    cursor        : pointer;
}

#present .content form .input-wrapper:not(.wide) label {
    display : block;
}

#present .content form .input-wrapper label {
    width : auto;
}

#present .content form .input-wrapper.wide label {
    cursor : pointer;
}

#present .content form .input-wrapper label .label {
    font-weight : 600;
    display     : block;
}

#present .content form .input-wrapper label .info {
    line-height : 1;
    font-size   : 12px;
    display     : block;
}

#present .content form .input-wrapper input:not([type="checkbox"]) {
    padding       : 5px 10px;
    border-radius : 5px;
    border        : 0px;
    height        : 30px;
    line-height   : 30px;
    width         : 100%;
    margin-top    : 10px;
}

#present .content form .input-wrapper select {
    padding            : 0px 10px;
    border-radius      : 5px;
    border             : 0px;
    height             : 30px;
    line-height        : 30px;
    width              : 100%;
    background-color   : white;
    appearance         : none;
    -webkit-appearance : none;
    cursor             : pointer;
}

#present .content form .input-wrapper .select_wrapper {
    margin-top : 10px;
}

#present .content form .input-wrapper .select_wrapper .fa {
    color : black;
}

#present .content form .input-wrapper input[type="checkbox"] {
    width  : auto;
    cursor : pointer;
}

#present .grouped--years:first-of-type strong {
    margin-top : 0px;
}

#present .content .list {
    text-align : center;
}

#present .content .list ul {
    padding    : 0px;
    list-style : none;
    margin     : 0px;
}

#present .content .list .list-title {
    font-size     : 22px;
    margin-bottom : 10px;
}

#present .content .list li {
    line-height : 1.5;
}

#present .content .list li small {
    font-size   : 70%;
    margin-left : 5px;
    color       : white;
}

#present .content .list .grouped--years {
    margin-top : 20px;
}

#present .content .filter {
    text-align      : center;
    margin-bottom   : 30px;
    display         : flex;
    align-items     : center;
    justify-content : center;
    gap             : 20px;
}

#present .content .filter label {
    width : auto;
    color : white;
}

#present .content .filter select#participant_year_search {
    background         : #79a72e;
    color              : white;
    font-size          : 14px;
    padding            : 7px 13px;
    border-radius      : 5px;
    display            : inline-flex;
    align-items        : center;
    gap                : 10px;
    border             : 0px;
    cursor             : pointer;
    appearance         : none;
    -webkit-appearance : none;
    padding-right      : 30px;
}

#present .content .select_wrapper {
    position : relative;
}

#present .content .select_wrapper .fa {
    position  : absolute;
    font-size : 12px;
    top       : 50%;
    right     : 10px;
    transform : translateY(-50%);
    color     : white;
}

#present .participants {
    margin-top : 50px;
}

@media (max-width : 1028px) {
    .hero--festival .inner-content {
        width      : 100%;
        min-height : 140px;
        padding    : 0px 20px;
    }

    .tab--wrapper .item--wrapper .item {
        padding-right : 100px;
    }

    .tab--wrapper .item--wrapper .item-image {
        height : 150px;
        width  : 150px;
        top    : -20px;
        left   : 20px;
    }

    .tab--wrapper .item--wrapper .item-content {
        padding-left : 170px;
    }

    .tab--wrapper .item--wrapper .item-title {
        font-size : 30px;
    }

    .tab--wrapper .item--wrapper .item-subtitle {
        font-size : 15px;
    }

    .tab--wrapper .item--wrapper .item-end {
        font-size : 13px;
    }
}

@media (max-width : 768px) {

    .hero--festival .inner-content img {
        max-width : 40%;
    }

    .hero--festival .inner-content .title {
        max-width : 60%;
        width     : auto;
    }

    .hero--festival .inner-content h1 {
        font-size : 45px;
    }

    .tab--wrapper .tab--buttons {
        flex-wrap : wrap;
    }

    .tab--wrapper .tab--link {
        width : calc(50% - 10px);
    }

    .tab--wrapper .tab--contents .festival-sectie:first-of-type {
        margin-top : 50px;
    }

    .tab--wrapper .tab--contents .section-title {
        font-size : 35px;
    }
}

@media (max-width : 670px) {
    .tab--wrapper .item--wrapper {
        justify-content : center;
        gap             : 50px;
    }

    .tab--wrapper .item--wrapper .item .outer--item {
        max-width : 400px;
    }

    .tab--wrapper .item--wrapper .item {
        display : block;
        padding : 30px;
        width   : 100%;
    }

    .tab--wrapper .item--wrapper .item-image {
        width    : 100%;
        height   : auto;
        position : relative;
        top      : auto;
        left     : auto;
    }

    .tab--wrapper .item--wrapper .item-content {
        padding : 30px 0px 20px 0px;
    }

    #content .content.editor {
        padding : 20px;
    }

    #content .content.editor h3 .time {
        display    : block;
        margin     : 0px;
        margin-top : 10px;
        font-size  : 15px;
    }

    #content .content.editor p {
        font-size : 15px;
    }

    .hero--festival .inner-content {
        justify-content : center;
        flex-wrap       : wrap;
        min-height      : auto;
        gap             : 30px;
        height          : auto;
    }

    .hero--festival .inner-content img {
        max-width : none;
        display   : block;
        width     : 45vw;
    }

    .hero--festival .inner-content .title {
        width      : 100%;
        max-width  : none;
        text-align : center;
        display    : block;
    }

    .hero--festival .inner-content h1 {
        font-size : 40px;
    }

    #present .content form .input-wrapper {
        width : 100%;
    }
}

@media (max-width : 500px) {
    .tab--wrapper .tab--contents {
        padding-left  : 0px;
        padding-right : 0px;
    }

    .tab--wrapper .item--wrapper .item {
        padding : 20px;
    }

    .tab--wrapper .item--wrapper .item-content {
        padding : 20px 0px 30px 0px;
    }
}

@media (max-width : 420px) {
    .tab--wrapper .tab--link {
        width : 100%;
    }

    .hero--festival .inner-content h1 {
        font-size : 35px;
    }

    #present .content .filter {
        gap       : 10px;
        flex-wrap : wrap;
    }

    #present .content .filter label {
        width : 100%;
    }
}