﻿/*
  xs: 0,
  sm: 576px,    -> 540
  md: 768px,    -> 720
  lg: 992px,    -> 960
  xl: 1200px,   -> 1140
  xxl: 1400px   -> 1320
*/

/* rem reference
10px = 0.625rem
12px = 0.75rem
14px = 0.875rem
16px = 1rem (base)
18px = 1.125rem
20px = 1.25rem
24px = 1.5rem
30px = 1.875rem
32px = 2rem
36px = 2.25rem
40px = 2.5rem
44px = 2.75rem
50px = 3.125rem
*/

/*
    https://www.color-hex.com/color/xxxxxx

    convert hex to filter
    https://codepen.io/sosuke/pen/Pjoqqp
*/

@import url("/styles/variables.css");

/* frame */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-optical-sizing: auto;
}

html {
    height: 100.1%;
    scroll-behavior: smooth;
    -webkit-text-size-adjust: none;
    touch-action: manipulation;
}

    html.no-scroll,
    html.no-scroll body {
        overflow-y: hidden;
    }

body {
    width: 100%;
    height: auto;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    /*display: flex;
    flex-direction: column;*/
    font-family: var(--font-body);
    font-size: 1rem;
    color: var(--color-dark);
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

.loading-overlay {
    display: none;
    background: #c0c0c0 url('/images/loader-gray.gif') center center no-repeat;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 0.75;
    z-index: 99999999;
    transition: all .5s;
    overflow-y: scroll; /* see html height */
}

.block-ui {
    display: none;
    background: transparent;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 99999999;
    overflow-y: scroll; /* see html height */
}

/* see hack for flatpickr */
.hidden:not(.flatpickr-day) {
    display: none !important;
}

.has-error {
    color: red !important;
}

.container {
    max-width: 1304px;
}

.cursor-pointer {
    cursor: pointer;
}
/* /frame */

/* FONTS */
.font-heading {
    font-family: var(--font-heading); /*Platform*/
}

.font-body {
    font-family: var(--font-body); /*Manrope*/
}

/* h1 is hidden but SEO valid - add aria-hidden=true */
h1 {
    position: absolute;
    left: -9999px;
    top: -9999px;
    font-size: 1px;
    color: transparent;
}

/*
h2,
h3,
h4,
h5,
h6 {
    margin: 0;
    padding: 0;
    text-decoration: none;
}

h2 {
    font-size: var(--h2);
}

h3 {
    font-size: var(--h3);
}

h4 {
    font-size: var(--h4);
}

h5 {
    font-size: var(--h5);
}

h6 {
    font-size: var(--h6);
}
*/

.fs-normal {
    font-size: 1rem;
}

.fs-smaller {
    font-size: 0.8rem;
}

.fs-larger {
    font-size: 1.5rem;
}

.fw-regular {
    font-weight: 400;
}
/* medium and bold are in bootstrap */

.fs-12 {
    font-size: 12px;
}

.fs-14 {
    font-size: 14px;
}

.fs-15 {
    font-size: 15px;
}

.fs-16 {
    font-size: 16px; /* aka default */
}

.fs-20 {
    font-size: 20px;
}

.fs-22 {
    font-size: 22px;
}

.fs-32 {
    font-size: 32px;
}

.fs-40 {
    font-size: 40px;
}

.fs-54 {
    font-size: 54px;
}

.fs-72 {
    font-size: 72px;
}

.fs-88 {
    font-size: 88px;
}

@media(max-width: 576px) {
    .header-notification .fs-14 {
        font-size: 10px;
    }
}
/* /FONTS */
/* IMAGES */
img, .picture, .picture-img, .img-raw {
    display: inline-block;
    max-width: 100%;
    height: auto;
}

.responsive-bg-img {
    position: absolute;
    object-fit: cover;
    object-position: center center;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    filter: grayscale(95%) brightness(30%);
}

.f-logos img {
    display: inline-block;
    max-width: 240px;
    max-height: 60px;
}
/* /IMAGES */
/* COLORS */
.bg-dark {
    background-color: var(--color-dark) !important;
}

.color-dark {
    color: var(--color-dark);
}

.bg-dark-light {
    background-color: var(--color-dark-light);
}

.color-dark-light {
    color: var(--color-dark-light);
}

.bg-gold {
    background-color: var(--color-gold);
}

.color-gold {
    color: var(--color-gold);
}

.bg-gold-light {
    background-color: var(--color-gold-light);
}

.color-gold-light {
    color: var(--color-gold-light);
}

.bg-black {
    background-color: #000;
}

.color-black {
    color: #000;
}

.bg-white {
    background-color: #fff;
}

.color-white {
    color: #fff;
}

.bg-red {
    background-color: var(--color-red);
}

.color-red {
    color: var(--color-red);
}

.bg-violet {
    background-color: var(--color-violet);
}

.color-violet {
    color: var(--color-violet);
}

.bg-gray {
    background-color: var(--color-gray);
}

.color-gray {
    color: var(--color-gray);
}

.bg-gray-lighter {
    background-color: var(--color-gray-lighter);
}

.color-gray-lighter {
    color: var(--color-gray-lighter);
}

.bg-gray-light {
    background-color: var(--color-gray-light);
}

.color-gray-light {
    color: var(--color-gray-light);
}

a {
    color: var(--color-dark);
    text-decoration: none;
}

    a.a-underline {
        text-decoration: underline;
    }

.border-b {
    border-bottom: solid 1px #f2f2f2;
}
/* /COLORS */

/* fix bootstrap anchor for heading */
a:not([href]):not([class]),
a:not([href]):not([class]):hover {
    scroll-margin-top: 150px;
}

/* remove vertical lines on scroll */
header, main, footer {
    will-change: auto;
}

/*header, main, footer {
    outline: none;
    width: 100%;
    position: relative;
}

main {
    display: flex;
    flex-direction: column;
    z-index: 0;
    flex: 1;
}

header {
    z-index: 2;
}

footer {
    z-index: 1;
}*/
/* BUTTONS */
.btn {
    all: unset;
}

.btn {
    position: relative;
    display: inline-block;
    padding: 15px 30px 15px 30px;
    border: solid 1px;
    font-size: 16px;
    font-family: var(--font-body);
    cursor: pointer;
    max-width: 200px;
    text-align: left;
    text-decoration: none;
    transition: all .2s ease-in-out;
    -webkit-backface-visibility: hidden;
}

.btn-smaller {
    padding: 10px 28px 10px 28px;
}

.btn-gold {
    background-color: var(--color-gold);
    color: var(--color-dark);
    border-color: var(--color-gold);
}

    .btn-gold i {
        color: var(--color-dark);
    }

    .btn-gold:hover {
        background-color: #fff;
        color: var(--color-gold);
        border-color: var(--color-gold);
    }

        .btn-gold:hover i {
            color: var(--color-gold);
        }

.btn-black {
    background-color: var(--color-dark);
    color: #fff;
    border-color: var(--color-dark);
}

    .btn-black i {
        color: #fff;
    }

    .btn-black:hover {
        background-color: #fff;
        color: var(--color-dark);
        border-color: var(--color-dark);
    }

        .btn-black:hover i {
            color: var(--color-dark);
        }

.btn-transparent {
    background-color: transparent;
    color: var(--color-dark);
    border-color: var(--color-dark);
}

    .btn-transparent i {
        color: var(--color-dark);
    }

    .btn-transparent:hover {
        background-color: var(--color-dark);
        color: #fff;
        border-color: var(--color-dark);
    }

        .btn-transparent:hover i {
            color: #fff;
        }

.btn-tickets {
    background-color: var(--color-violet);
    color: #fff;
    border-color: var(--color-violet);
}

    .btn-tickets i {
        color: #fff;
    }

    .btn-tickets:hover {
        background-color: #fff;
        color: var(--color-violet);
        border-color: var(--color-violet);
    }

        .btn-tickets:hover i {
            color: var(--color-violet);
        }

[class^="btn-tickets-"] {
    position: relative;
    display: inline-block;
    padding: 15px 30px 15px 30px;
    border: solid 1px;
    font-size: 16px;
    font-family: var(--font-body);
    max-width: 200px;
    text-align: left;
    -webkit-backface-visibility: hidden;
}

.btn-tickets-red {
    background-color: var(--color-red);
    color: #fff;
    border-color: var(--color-red);
}

.btn-tickets-gray {
    background-color: var(--color-gray);
    color: var(--color-dark);
    border-color: var(--color-gray);
}

/*/BUTTONS */

/* JALERT */
#alertsOverlay {
    background: #c0c0c0;
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    opacity: 0.75;
    z-index: 999999998;
}

#alertsContainer {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 999999999;
}

#alertsContent {
    position: fixed;
    min-width: 320px;
    max-height: 100vh;
    background-color: #fff;
    transform: translate(-50%,-50%);
    top: 50%;
    left: 50%;
    overflow: auto;
    /*border: solid 15px lightgrey;*/
    padding: 30px;
    /*    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);*/
    /*box-shadow: 0 0.125rem 0.25rem rgb(147 158 170 / 40%);*/
    box-shadow: 0 0.125rem 1.25rem 0 rgb(38 60 85 / 60%);
    border-radius: 0.5em;
}

#alertsButtons {
    padding: 20px;
    text-align: center;
}

    #alertsButtons button {
        margin: 0 5px 5px 5px;
    }

#alertsMessage {
    text-align: center;
    font-size: 1.15em;
    padding: 20px 0;
}

#alertsIcon {
    text-align: center;
}

    #alertsIcon:before {
        font-family: bootstrap-icons !important;
        font-size: 2rem;
        line-height: 2rem;
    }

    #alertsIcon._info:before {
        font-weight: 900;
        content: "\F332"; /**/
        color: #007bff;
    }

    #alertsIcon._alert:before {
        font-weight: 900;
        content: "\F33A"; /**/
        color: #dc3545;
    }

    #alertsIcon._confirm:before {
        font-weight: 900;
        content: "\F504"; /**/
        color: #28a745;
    }

    #alertsIcon._modal:before {
        font-weight: 900;
        content: "\F26A"; /**/
        color: #6c757d;
    }
/* /JALERT */

/* TOAST */
._toast {
    display: none;
    position: fixed;
    bottom: 25px;
    left: 25px;
    right: 25px;
    padding: 10px 15px;
    font-size: 16px;
    //font-family: Arial, sans-serif;
    cursor: pointer;
    z-index: 999999997;
    -webkit-box-shadow: 0 3px 6px -1px rgba(0, 0, 0, 0.12), 0 10px 36px -4px rgba(77, 96, 232, 0.3);
    box-shadow: 0 3px 6px -1px rgba(0, 0, 0, 0.12), 0 10px 36px -4px rgba(77, 96, 232, 0.3);
    border-radius: 5px;
}

._toast--success {
    color: white;
    background-color: green;
}

._toast--error {
    color: white;
    background-color: red;
}
/* /TOAST */

/* COLLAPSIBLE */
/*
.r-collapsible {
}

.r-collapsible-item {
}

    .r-collapsible-item:not(:last-of-type) {
        margin-bottom: 1rem;
    }

.r-collapsible-title {
    cursor: pointer;
}

    .r-collapsible-title.r-collapsible-title-opened i {
        transform: rotate(180deg);
    }

.r-collapsible .icon-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 1rem;
    width: 1rem;
    transform-origin: center;
}


.r-collapsible-title:hover {
}

.r-collapsible-content {
}
    */
/* /COLLAPSIBLE */

/* TABS */
.r-tabs {
}

.r-tabs__titles {
    display: flex;
    list-style: none;
    padding-left: 0;
    margin-bottom: 10px;
}

.r-tabs__title {
    /*    background: #ffffff;
    cursor: pointer;*/
}

    .r-tabs__title:not(:last-of-type) {
        margin-right: 10px;
    }

    .r-tabs__title:hover {
        /*        background: #f1f1f1;*/
    }

.r-tabs__title--active {
    /*    background: #c0c0c0;*/
}
/* /TABS */

/* TABLE */
.r-table {
    overflow-x: auto;
}

    .r-table .table-wrapper {
        display: block;
        width: fit-content;
    }

    .r-table table th,
    .r-table table td {
        padding: 10px 15px;
    }

.r-table--style-styled .table-wrapper {
}

.r-table--style-styled table {
    border-collapse: collapse;
    overflow: hidden;
    margin: 0;
}

    .r-table--style-styled table th {
        background: var(--color-gold-light);
        border-bottom: 1px solid var(--color-gold);
    }

    .r-table--style-styled table td {
        border-bottom: 1px solid #e0e0e0;
    }

        .r-table--style-styled table td:not(:last-child) {
            border-right: 1px solid #e0e0e0;
        }

    .r-table--style-styled table th:not(:last-child) {
        border-right: 1px solid var(--color-gold);
    }

.r-table--alignment-left .table-wrapper {
    margin-left: 0;
    margin-right: auto;
}

.r-table--alignment-center .table-wrapper {
    margin-left: auto;
    margin-right: auto;
}

.r-table--alignment-right .table-wrapper {
    margin-left: auto;
    margin-right: 0;
}

.r-table p,
.r-table p {
    margin-bottom: 0 !important;
}
/* /TABLE */

/* GALLERY */
.r-gallery {
    display: flex;
    flex-wrap: wrap;
    /*justify-content: center;*/
    /*margin-left: -20px;*/ /*gap*/
}

.r-gallery-item {
    display: block;
    width: 100%;
    padding-left: 20px; /*gap*/
    padding-bottom: 20px;
    color: black;
    text-decoration: none;
}

@media only screen and (min-width: 577px) {
    .r-gallery-item {
        width: 50%;
    }
}

@media only screen and (min-width: 993px) {
    .r-gallery-item {
        width: 33.33%;
    }
}

@media only screen and (min-width: 1201px) {
    .r-gallery-item {
        width: 25%;
    }
}

.r-gallery-item img {
    display: inline-block;
    object-fit: cover;
    width: 100%;
    height: auto;
    border-radius: 10px;
}

.r-gallery-item small {
    display: block;
}
/* /GALLERY */

/* FORM */
.r-form {
}

    .r-form .form-wrapper {
        display: block;
        width: fit-content;
    }

.r-form-alignment-left .form-wrapper {
    margin-left: 0;
    margin-right: auto;
}

.r-form-alignment-center .form-wrapper {
    margin-left: auto;
    margin-right: auto;
}

.r-form-alignment-right .form-wrapper {
    margin-left: auto;
    margin-right: 0;
}

.r-form .file-upload {
    position: relative;
    display: inline-block;
}

    .r-form .file-upload .file-upload-button {
        position: relative;
        padding: 8px 10px;
        background-color: var(--color-gold);
        color: #fff;
        border: solid 1px var(--color-gold);
        font-size: 15px;
        font-family: var(--font-sans-serif);
        cursor: pointer;
        max-width: 300px;
        text-align: left;
        letter-spacing: 1.2px;
        text-decoration: none;
        z-index: 1;
    }

    .r-form .file-upload input:hover + .file-upload-button {
        background-color: #fff;
        color: #000;
    }

    .r-form .file-upload input {
        position: absolute;
        z-index: 2;
        top: 0px;
        left: 0px;
        opacity: 0;
        border-bottom: none;
    }

.r-form .file-upload-filename a.remove {
    text-decoration: none;
}

.r-form input.form-control:not([type="checkbox"]),
.r-form textarea,
.r-form select {
    border-radius: 0;
    border: none;
    border-bottom: solid 1px var(--color-gold);
    padding: 0.5rem !important;
    letter-spacing: 0.5px;
}

    .r-form input.form-control:not([type="checkbox"])::placeholder,
    .r-form textarea::placeholder {
        font-style: italic;
        color: gray;
    }

    .r-form select option:first-child {
        font-style: italic;
        color: gray;
    }

    .r-form select.italic {
        font-style: italic;
        color: gray;
    }

    .r-form select option {
        font-style: normal;
        color: initial;
        padding: 0.5rem 1rem !important;
    }

/* Checkbox & Radio: Checked background and border */
.form-check-input:checked {
    background-color: var(--color-gold); /* Tvoja barva */
    border-color: var(--color-gold);
}

/* Checkbox & Radio: Fokus */
/*.form-check-input:focus {
    box-shadow: 0 0 0 0.2rem rgba(0, 0, 0, 0.25);
    border-color: var(--color-gold);
}*/

/* Checkbox & Radio: Border v nedefiniranem stanju */
.form-check-input {
    border: 1px solid #999;
}

.form-check-check a,
.form-check-radio a {
    text-decoration: underline;
}

/* flatpickr datetime */
.flatpickr-input {
    cursor: pointer;
}

    .flatpickr-input + input {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='1em' viewBox='0 0 448 512'%3E%3Cpath d='M152 24c0-13.3-10.7-24-24-24s-24 10.7-24 24V64H64C28.7 64 0 92.7 0 128v16 48V448c0 35.3 28.7 64 64 64H384c35.3 0 64-28.7 64-64V192 144 128c0-35.3-28.7-64-64-64H344V24c0-13.3-10.7-24-24-24s-24 10.7-24 24V64H152V24zM48 192H400V448c0 8.8-7.2 16-16 16H64c-8.8 0-16-7.2-16-16V192z'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right calc(0.375em + 0.1875rem) center;
        background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
    }

/*.flatpickr-current-month span.cur-month {
    font-weight: inherit;
}

.flatpickr-current-month input.cur-year[disabled], .flatpickr-current-month input.cur-year[disabled]:hover {
    color: inherit;
}*/
/* flatpickr datetime */

.r-form .modal-content {
    border-radius: 0;
}
/* /FORM */
/* paginaion */
.pagination li {
    padding: 0.3rem;
    min-width: 30px;
    text-align: center;
}

@media(min-width: 992px) {
    .pagination li {
        padding: 0.375rem 0.75rem;
        min-width: 44px;
        text-align: center;
    }
}

.pagination li.active {
    background: var(--color-gold);
}
/* pagination */
/* skip to content */
.skip-to-content {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 9999;
}

    .skip-to-content a {
        position: fixed;
        background: #000;
        color: #fff;
        left: 0;
        top: 0;
        transform: translateY(-100%);
        transition: transform 0.3s;
        border: none;
        margin: 0;
        padding: .5rem 1rem;
        text-decoration: none;
    }

        .skip-to-content a:focus {
            transform: translateY(0%);
        }
/* skip to content */

/* scroll to top */
.scroll-to-top {
    display: inline-block;
    position: fixed;
    bottom: 0.5rem;
    right: 1rem;
    overflow: hidden;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: all 300ms;
}

    .scroll-to-top i {
        color: #c0c0c0;
        font-size: 2.5rem;
    }

    .scroll-to-top.show {
        opacity: .75;
        visibility: visible;
    }
/* scroll to top */

/* disable tel on desktop */
/*@media(min-width: 992px) {
    a[href ^= "tel"] {
        pointer-events: none;
        text-decoration: none;
    }
}*/

/* EVENTS */
/* gallery */
.r-events-gallery .masonry img,
.r-events-gallery .masonry video {
    vertical-align: middle;
    max-width: 100%;
}

.r-events-gallery .masonry {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.r-events-gallery .masonry-brick {
    overflow: hidden;
    /*border-radius: 5px;*/
    background-color: #333;
    color: white;
    position: relative;
}

.r-events-gallery .masonry-img {
    object-fit: cover;
    width: 100%;
    height: 100%;
    /*filter: brightness(50%);*/
    transition: filter 300ms ease;
}

/*    .r-events-gallery .masonry-img:hover {
        filter: brightness(75%);
    }*/

.r-events-gallery .masonry-brick--h {
    flex: auto;
    height: 200px;
    /*min-width: 300px;*/
}

@media (min-width: 992px) {
    .r-events-gallery .masonry-brick--h {
        height: 300px;
    }
}

/*@media (min-width: 992px) {*/
/* quasi random settelment, but works :) */
.r-events-gallery .masonry-brick--h:nth-child(4n+1) {
    width: 30%;
}

.r-events-gallery .masonry-brick--h:nth-child(4n+2) {
    width: 20%;
}

.r-events-gallery .masonry-brick--h:nth-child(4n+3) {
    width: 40%;
}

.r-events-gallery .masonry-brick--h:nth-child(4n+4) {
    width: 30%;
}
/*}*/
/* /gallery */

/* secondary menu */
.p-event-detail .secondary-menu .title.hide-mobile {
    display: none;
}

@media (min-width: 768px) {
    .p-event-detail .secondary-menu .title.hide-mobile {
        display: block;
    }
}

.p-event-detail .secondary-menu {
    position: relative;
    transition: position 0.3s ease, top 0.3s ease;
    width: 100%;
    z-index: 10;
}

    .p-event-detail .secondary-menu .swiper-container {
        width: 100%;
        height: 100%;
        mask-image: linear-gradient(to right, rgba(214, 196, 144, 0) 0px, #D6C490 10px, #D6C490 calc(100% - 15px), rgba(214, 196, 144, 0) 100%);
        -webkit-mask-image: linear-gradient(to right, rgba(214, 196, 144, 0) 0px, #D6C490 10px, #D6C490 calc(100% - 15px), rgba(214, 196, 144, 0) 100%);
    }

    .p-event-detail .secondary-menu .swiper-wrapper {
        display: flex;
        width: max-content;
    }

    .p-event-detail .secondary-menu .swiper-slide {
        width: auto !important;
        transform: none !important;
    }

    .p-event-detail .secondary-menu ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
    }

        .p-event-detail .secondary-menu ul li {
            display: block;
        }

    .p-event-detail .secondary-menu a {
        display: inline-block;
        position: relative;
        white-space: nowrap;
        text-decoration: none;
        padding: 5px 15px;
        top: 50%;
        transform: translateY(-50%);
        letter-spacing: 0.5px; /* pevent jumping */
    }

        .p-event-detail .secondary-menu a.active {
            font-weight: bold;
            letter-spacing: 0;
        }

        .p-event-detail .secondary-menu a:not(:first-child):before {
            content: "";
            position: absolute;
            left: -5px;
            top: 50%;
            transform: translateY(-50%);
            width: 1px;
            height: 100%;
            background-color: gray;
        }

    .p-event-detail .secondary-menu .swiper-container-horizontal > .swiper-scrollbar {
        position: absolute;
        left: 1%;
        bottom: 0;
        z-index: 50;
        height: 3px;
        width: 98%;
    }
/* /secondary menu */
.p-event-detail .date-guid {
    font-size: 10px;
    color: gray;
}

/* text with images */
.r-events-text-with-images .images-part .row {
    margin-bottom: 10px;
}

.r-events-text-with-images .images-part .col {
    display: flex;
}

.r-events-text-with-images .images-part img {
    width: 100%;
    height: auto;
    object-fit: cover;
    flex-grow: 1;
}

.r-events-text-with-images .images-part a:not(.single-image) img {
    height: 300px;
}
/* /text with images */
/* /EVENTS */

/* FOOTER */
footer {
    padding-bottom: env(safe-area-inset-bottom); /* IOS */
}

.f-newsletter {
    position: relative;
}

    .f-newsletter:before {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 50%;
        background-color: var(--color-dark);
        z-index: -1;
    }

    .f-newsletter .container {
        position: relative;
        background-color: var(--color-gold);
    }

    .f-newsletter input {
        padding: 10px;
        border: none;
        width: 100%;
    }

.f-columns,
.f-columns a {
    color: #fff;
}
/* /FOOTER */
/* ARCADE PATTERN */
.arcade-pattern {
    position: relative;
    height: 20px;
}

    .arcade-pattern:after {
        content: "";
        position: absolute;
        background-size: contain;
        background-position: top left;
        background-repeat: repeat-x;
        display: block;
        left: 0;
        width: 100%;
        height: 20px;
        margin-top: -1px; /* if gap */
        z-index: -1;
    }

.arcade-pattern-dark:after {
    background-image: url(/images/arcade-pattern-dark.svg);
}

.arcade-pattern-gold:after {
    background-image: url(/images/arcade-pattern-dark.svg);
}
/* /ARCADE PATTERN */


/* NEWS */
.news-listing-item {
    display: flex;
    flex-direction: column;
    width: 100%;
    background: #fff;
    border-bottom: solid 2px transparent;
}

    .news-listing-item:hover {
        box-shadow: 0 0.125rem 1.25rem 0 rgb(38 60 85 / 10%);
        border-bottom: solid 2px var(--color-gold);
    }

.r-news-picker {
    position: relative;
}

@media (min-width: 768px) {
    .r-news-picker:after {
        content: "";
        position: absolute;
        height: 100%;
        top: 0;
        left: 42%;
        right: 0;
        background: var(--color-gold-light);
        z-index: -1;
    }
}

.r-news-picker .slider-container {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.r-news-picker .owl-carousel {
    width: calc(100% - 70px);
    max-width: 1440px;
    position: relative;
}

    .r-news-picker .owl-carousel .owl-stage {
        display: flex;
    }

    .r-news-picker .owl-carousel .owl-item {
        display: flex;
        align-items: stretch;
    }

.r-news-picker .item {
    background: #fff;
}

.r-news-picker .nav-btn {
    width: 25px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    user-select: none;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
}

.r-news-picker .owl-prev {
    left: -35px;
}

.r-news-picker .owl-next {
    right: -35px;
}

.r-news-picker h3 {
    padding-top: 40px;
}

    .r-news-picker h3:after {
        content: "";
        position: absolute;
        top: 0;
        left: 0px;
        width: 50%;
        height: 2px;
        background-color: var(--color-gold);
    }

    .r-news-picker h3 span:first-child {
    }

    .r-news-picker h3 span:nth-child(2) {
        padding-top: 30px;
        padding-left: 30%;
    }
/* /NEWS */

/* events filter */
.events-filter .time-span-row div {
    padding: 0.5rem 1rem;
    border-bottom: solid 1px var(--color-gray);
    margin-bottom: 0.5rem;
}

    .events-filter .time-span-row div:hover {
        border-bottom: solid 2px var(--color-gray);
    }

    .events-filter .time-span-row div.active {
        font-weight: bold;
        border-bottom: solid 2px var(--color-gold);
    }

    .events-filter .time-span-row div:has(input) {
        padding-bottom: 1px; /* for hover line bottom */
    }

    .events-filter .time-span-row div input {
        padding: 0 5px;
        border: solid 1px var(--color-gray);
        margin-bottom: 5px;
    }

.events-filter .categories-row div {
    padding: 0.5rem 1rem;
    border: solid 1px #000;
    margin-right: 1rem;
    margin-bottom: 0.5rem;
}

    .events-filter .categories-row div:hover {
        background: var(--color-gray);
    }

    .events-filter .categories-row div.active {
        background: #000;
    }

        .events-filter .categories-row div.active a {
            color: #fff;
        }
/* /events filter */

/* fp-banner */
.fp-banner {
    position: relative;
    z-index: 1;
}

    .fp-banner .image__gradient {
        position: absolute;
        z-index: 2;
        width: 100%;
        height: 100%;
        background: #000000;
        background: linear-gradient(90deg,rgba(0, 0, 0, 0.57) 0%, rgba(0, 0, 0, 0.52) 50%, rgba(255, 255, 255, 0) 100%);
    }

    .fp-banner .content {
        position: absolute;
        z-index: 2;
        top: 0px;
        left: 0px;
        bottom: 0px;
        right: 0px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        margin-top: 60px;
        margin-bottom: 60px;
    }

    .fp-banner img {
        width: 100%;
        height: calc(100vh - 88px);
        object-fit: cover;
    }

    .fp-banner h3 {
        display: inline-block;
        /*text-shadow: 0px 0px 1px black;*/
    }

    .fp-banner .title-bold {
        display: block;
        font-family: var(--font-heading);
        font-size: 88px;
        font-weight: 500;
        color: #fff;
    }

    .fp-banner .title-indent {
        display: block;
        font-family: var(--font-heading);
        font-size: 54px;
        font-weight: 400;
        color: #fff;
        padding-left: 20%;
        line-height: 100%;
    }

    .fp-banner .subtitle {
        display: block;
        font-family: var(--font-body);
        font-size: 20px;
        color: #fff;
        /*text-shadow: 0px 0px 1px black;*/
    }

@media (max-width: 769px) {
    .fp-banner .title-bold {
        font-size: 44px;
        word-break: break-word;
        line-height: 90%
    }

    .fp-banner .title-indent {
        font-size: 34px;
        line-height: 90%
    }
}

.fp-banner .banner-video {
    width: 100vw; /* Celotna širina */
    height: calc(100vh - 88px); /* Odštejemo višino headerja */
    object-fit: cover; /* Poskrbi, da video zapolni celoten prostor */
    display: block;
}

.fp-banner .mute-button {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    padding: 5px 7px;
    font-size: 20px;
    line-height: 20px;
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
    border: none;
    cursor: pointer;
    border-radius: 5px;
    z-index: 10;
}

    .fp-banner .mute-button:hover {
        background-color: rgba(0, 0, 0, 0.9);
    }
/* /fp-banner */

/* breadcrumbs */
ol.breadcrumbs,
ul.breadcrumbs {
    padding-left: 0 !important;
    color: #c0c0c0;
}

.breadcrumb a {
    font-family: var(--font-body);
    color: #c0c0c0;
}

.breadcrumb span {
    font-family: var(--font-body);
    color: #fff;
    font-weight: 600;
}

/* /breacrumbs*/

/*.exposed-notice {
    max-width: 50%;
}*/

@media (min-width: 769px) {
    .exposed-notice {
        max-width: 50%;
    }
}

.exposed-notice .gold {
    background: var(--color-gold);
    color: var(--color-dark);
}

.exposed-notice .black {
    background: #000;
    color: #fff;
}

.exposed-notice .red {
    background: var(--color-red);
    color: #fff;
}

.txtSearch {
    border: none;
    background: transparent;
    outline: none;
    border-bottom: solid 1px var(--color-gold);
}