@charset "utf-8";

/** PS! Bootstrap and rte.css is loaded before this file. **/

:root {
    --cm-narrow: none;
    --cm-header-height: 90px;
    --cm-height-1: 20vh;
    --cm-height-2: 40vh;
    --cm-height-3: 60vh;
    --highcharts-color-0: var(--bs-primary);
    --highcharts-color-1: var(--bs-secondary);
    --highcharts-color-2: var(--bs-success);
    --highcharts-color-3: var(--bs-danger);
    --highcharts-color-4: var(--bs-warning);
    --highcharts-color-5: var(--bs-info);
    --highcharts-color-6: var(--bs-orange);
    --highcharts-color-7: var(--bs-pink);
    --highcharts-color-8: var(--bs-teal);
    --highcharts-color-9: var(--bs-cyan);
    --swiper-theme-color: var(--bs-body-color);
    --swiper-pagination-bullet-width: .75rem;
    --swiper-pagination-bullet-height: .75rem;
    --swiper-pagination-bullet-inactive-color: var(--bs-body-color);
    --swiper-pagination-bullet-inactive-opacity: 0.2;
    --swiper-pagination-bullet-horizontal-gap: .25rem;
    --flik-mask: '';
    --flik-bottom: url('data: image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 125 41"><path d="M125,41c-4.2,0-8-2.4-9.7-6.3C106.2,14.3,86,0,62.5,0S18.7,14.3,9.7,34.7c-1.7,3.8-5.5,6.3-9.7,6.3" /></svg>');
    --flik-right: url('data: image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 41 125"><path d="M41,0c0,4.2-2.4,8-6.3,9.7C14.3,18.8,0,39,0,62.5s14.3,43.8,34.7,52.8c3.8,1.7,6.3,5.5,6.3,9.7" /></svg>');
    --flik-left: url('data: image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 41 125"><path d="M0,125c0-4.2,2.4-8,6.3-9.7,20.4-9.1,34.7-29.3,34.7-52.8S26.7,18.7,6.3,9.7C2.5,8,0,4.2,0,0" /></svg>');
    --flik-top: url('data: image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 125 41"><path d="M0,0c4.2,0,8,2.4,9.7,6.3,9.1,20.4,29.3,34.7,52.8,34.7s43.8-14.3,52.8-34.7c1.7-3.8,5.5-6.3,9.7-6.3" /></svg>');
}

/** ################################################################################################################################################################################################# 
/** ############################################################################################ GENERAL ############################################################################################ 
/** ################################################################################################################################################################################################# 
/** These are general CSS-classes we have made. Used between sites and should not be customized per site except in special circumstances! **/

html {
    height: 100%;
}
html,body {
}
body {
}
section[id],
div[id] {
    scroll-margin-top: var(--cm-header-height);
}
.visibility-managers-only,
.visibility-noone {
	display: none;
}
.visibility-managers-only {
    border: 5px solid rgba(255,0,0,.25);
    position: relative;
}
.visibility-managers-only::before {
    content: "Only visible for administrators";
    display: inline-block;
    padding: 5px;
    font-size: 13px;
    background-color: rgba(255,0,0,.25);
    position: absolute;
    top: 0;
    right: 0;
}
img, video, picture, iframe {
    width: 100%;
    border-radius: 0;
}
select {
    cursor: pointer;
}
video {
    display: block;
}
b, strong {
    font-weight: 500;
}

/* Styles for video backgrounds. .has-started is added by JS when the video has started */
.cb-field-collapse-readmore .collapse-toggle.collapsed .open,
.cb-field-collapse-readmore .collapse-toggle:not(.collapsed) .collapsed {
    display: none;
}

/* Normally you would not like to use vh in header, since viewport height changes when you start to scroll and the navbar disappears on mobile. Therefore, we change it to small viewport height (svh) */
/*.cb-layout-header */.min-vh-100 { min-height: 100svh !important; }
/*.cb-layout-header */.min-vh-75 { min-height: 75svh !important; }
/*.cb-layout-header */.min-vh-50 { min-height: 50svh !important; }
/*.cb-layout-header */.min-vh-25 { min-height: 25svh !important; }
/*.cb-layout-header */.vh-100 { height: 100svh !important; }
/*.cb-layout-header */.vh-75 { height: 75svh !important; }
/*.cb-layout-header */.vh-50 { height: 50svh !important; }
/*.cb-layout-header */.vh-25 { height: 25svh !important; }

.min-h-100 { min-height: 100% !important; }

/* Base for aligning content of RichText */
.row>.col .rte-wrapper.horizontal-align-left>* {
    text-align: left !important;
}
.row>.col .rte-wrapper.horizontal-align-center>* {
    text-align: center !important;
}
.row>.col .rte-wrapper.horizontal-align-right>* {
    text-align: right !important;
}

/* Generally we use video.js to play video. It has an annoying black background that we need to remove */
.video-js {
    background-color: transparent;
}
.bg-wrapper .video-js {
    opacity: 0;
    transition: opacity 1s ease-in-out;
}
.bg-wrapper .video-js.vjs-has-started {
    opacity: 1;
}
.bg-wrapper .vjs-loading-spinner {
    display: none;
}

/* .full-media is used as a wrapper on images and video that should fill a container. Typically background media, etc. */
.full-media {
    width: 100%;
    height: 100%;
    margin: 0;
    position: relative;
    overflow: hidden;
    display: block;
}
.full-media img,
.full-media video,
.full-media .video-js {
    width: 100%;
    height: 100% !important;
    object-fit: cover;
    position: absolute;
    top: 0;
}

/* .inline-list is a handy class that can be used to turn ul's into items next to eachother. */
ul.inline-list {
    display: flex;
    gap: 1rem;
    padding: 0;
    margin: 0;
    list-style: none;
}

/* .hover-zoom is used on a wrapperelement for an image. If the wrapper is wrapped with an a-tag, the image will zoom in on hover. */
.hover-zoom {
    display: block;
    overflow: hidden;
}
.hover-zoom img {
    width: 100%;
}
a:hover .hover-zoom img {
    transform: scale(1.1);
}
.formbuilder-form > .row.mt-5{
    margin-top:0!important;
}
.form-label{
    font-weight: 500;
}
/* If the fitVids-script is used to make embedded videos responsive, theese rules are needed */
.fitVids-wrapper {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
}
.fitVids-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Makes sure the last element inside RTE does not get spacing at the bottom. In most cases we don't want that spacing since that is controlled bye the field it is in. */
.rte-wrapper > *:last-child {
    margin-bottom: 0;
}

/* If Google reCapthca is used, let's hide the badge. It's not very sexy. */
.grecaptcha-badge { 
    visibility: hidden;
}

/* Mobile friendly table is a trick to make the left column sticky on smaller screens. In RTE it is possible to set the class .table-mobile-friendly. In site.js, a function runs to find all tables with this class and wraps it wit div.table-mobile-friendly-container. */
.table-mobile-friendly-container {
    overflow-x: auto;
}
.table-mobile-friendly-container > .table-mobile-friendly {
    min-width: 498px;
}
.table-mobile-friendly-container > .table-mobile-friendly tr > td:nth-of-type(1) {
    position: sticky;
    left: 0;
    border-right: 1px solid var(--bs-border-color);
    z-index: 1;
}
.table-mobile-friendly-container > .table-mobile-friendly tr:hover > td:nth-of-type(1) {
}

/* In cases where we would like to fill a column with an image or video and we use flex-fill to do it, we need some special rules to make sure it works. */
.flex-grow-1 > figure picture,
.flex-grow-1 > figure .video-js {
    display: block;
    width: 100%;
    height: 100% !important;
    position: relative;
}
.flex-grow-1 > figure .video-js.vjs-fluid:not(.vjs-audio-only-mode) {
    padding-top: 0;
}
.flex-grow-1 > figure picture > img,
.flex-grow-1 > figure .video-js .vjs-tech {
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.min-height-100 {
    min-height: 100vh;    
}

/** .narrow is used to create narrower content, for example to make sure text does not get very wide. Can be used together with .container. Please adjust responsive size under media queries **/
.narrow {
    max-width: var(--cm-narrow);
}

/* A trick to make objects stretch horizontally outside their column. This uses two CSS-variables set by JS in site.js. */
.horizontal-fill {
    position: relative;
    left: calc( var(--container-padding) * -1 ) ;
    width: calc( var(--container-width) + var(--container-padding) );
}
.horizontal-fill .cb-field-image-picture,
.horizontal-fill .cb-field-video-figure {
    border-radius: 0;
}

/* Scroll to top. Visible when page is scrolled far */
#scroll-to-top {
    right: 0;
    bottom: -5rem;
    transition: all 500ms ease 0s;
    opacity: 0;
    z-index: 2;
}
body.scrolled.scrolled-far:not(.scrolled-end) #scroll-to-top {
    bottom: 0;
    opacity: 1;
}

/** .wide is used together with .container to make a wider layout than the default container. You may even place normal containers inside wide containers to "frame" the content. **/
.wide {
    max-width: 100%;
}
/** Makes sure the padding is consistent if a container is placed inside a full width container. May need adjusting per site. **/
.cb-layout-header.w-100 .container,
.cb-layout-section.w-100 .container,
.cb-layout-footer.w-100 .container,
.navbar .container {
    padding-right: calc(var(--bs-gutter-x) * 1);
    padding-left: calc(var(--bs-gutter-x) * 1);
}

/* Swiper */
.swiper {
    height: auto;
    z-index: auto;
}
.swiper-wrapper {
    display: flex;
    align-items: stretch;
}
.swiper-slide {
    display: flex;
    flex-direction: column;
    height: auto;
}

/* This is a trick that may be used on sites where you would like the text to be a max width but images and other elements larger. Switched off by default. May be used as a starting point. */
/*
.rte-wrapper.narrow {
    max-width: 100%;
}
.rte-wrapper.narrow > * {
    max-width: var(--cm-narrow);
    margin-left: auto;
    margin-right: auto;
}
.rte-wrapper.narrow > img,
.rte-wrapper.narrow > p:has(img) {
    max-width: 100%;
}
*/

/** ################################################################################################################################################################################################# 
/** ############################################################################################ GLOBAL ############################################################################################ 
/** ################################################################################################################################################################################################# 

/** Global typical rules that may need customization per site **/

/* A general setting for animating elements */
.animated, img, svg, a, i {
    transition: all 500ms ease 0s;
}

/* The scrolled-class is added automatically to body when user scrolls down. When scrolling even further (how much is set in site.js, scrolled-far is added.
Can be used to easily change the header style, show/hide elements, etc. */
body.scrolled #header {
}
body.scrolled.scrolled-far #scroll-to-top {
}

/* Minimum height is a setting for some fields - for example images and videos. Set the size of these options here. Make sure you also adjust responsively under Media Queries */
.cb-minheight-sm { min-height: var(--cm-height-1); }
.cb-minheight-md { min-height: var(--cm-height-2); }
.cb-minheight-lg { min-height: var(--cm-height-3); }
.cb-height-sm {        height: var(--cm-height-1); }
.cb-height-md {        height: var(--cm-height-2); }
.cb-height-lg {        height: var(--cm-height-3); }


/* Set standard rounding of objects here */
.cb-header-section > .container > [class*="bg-"],
.cb-layout-section > .container > [class*="bg-"],
.cb-layout-footer >.container>[class*="bg-"],
.cb-field-image-picture,
.cb-field-video-figure,
.cb-field-inner-layout-wrapper,
.gallery-slides-item-figure picture,
.list-item-wrapper,
.container .layout-container,
.rte-wrapper img,
.rte-wrapper iframe,
.resource-slides-item-picture {
    border-radius: var(--bs-border-radius);
}

/* Swiper styles */
.swiper-pagination {
    position: static;
    text-align: center;
    margin-top: 1rem;
}
.swiper-button-disabled {
    opacity: .25;
}
.swiper-layout-cards {
    position: relative;
}
.swiper-layout-cards .swiper-buttons .btn-prev,
.swiper-layout-cards .swiper-buttons .btn-next {
    position: absolute;
    top: 40%;
    z-index: 1;
    display: none;
}
.swiper-layout-cards .swiper-buttons .btn-prev {
    left: 0;
}
.swiper-layout-cards .swiper-buttons .btn-next {
    right: 0;
}
.swiper-layout-cards .swiper-pagination {
    text-align: center;
}
.swiper-layout-cards .swiper-slide {
    overflow: visible;
}
.swiper-layout-cards .swiper-slide-active {
    padding: 0 1rem;
}

/* Swiper Carousel */
.swiper-carousel .swiper-slide {
    width: 60%;
    height: 100%;
}

/* Collapse */
.cb-field-collapse .collapse-toggle-wrapper {}

.cb-field-collapse .collapse-toggle.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 3rem;
    min-width: 3rem;
    border-radius: var(--bs-border-radius-pill);
}

.cb-field-collapse .collapse-toggle.btn:has(span) {
    padding: 0 1.5rem;
}

.cb-field-collapse .collapse-toggle.btn span {
    margin-right: .25em;
}

.cb-field-collapse .collapse-toggle.collapsed .open {
    display: none;
}

.cb-field-collapse .collapse-toggle:not(.collapsed) .collapsed {
    display: none;
}

.cb-field-collapse .collapse-toggle i {
    --fa: "";
    --fa--fa: "";
    font-weight: 400;
}

.cb-field-collapse .collapse-toggle:not(.collapsed) i {
    --fa: "";
    --fa--fa: "";
}

/* Accordions */
.accordion {
    --bs-accordion-color: var(--bs-body-color);
    --bs-accordion-bg: var(--bs-light);
    --bs-accordion-border-color: transparent;
    --bs-accordion-border-width: 0;
    --bs-accordion-btn-color: var(--bs-body-color);
    --bs-accordion-btn-bg: var(--bs-secondary);
    --bs-accordion-active-color: var(--bs-dark);
    --bs-accordion-active-bg: var(--bs-accordion-bg);
    --bs-accordion-btn-focus-box-shadow: 0 0 0 0.25rem rgba(250, 135, 0, 0);
}
.accordion .accordion-item {
    border-radius: var(--bs-border-radius);
    overflow: hidden;
    box-shadow: var(--bs-box-shadow-sm);
}
.accordion .accordion-item .accordion-collapse.collapse.show{
    overflow: visible;
}
.accordion .accordion-item + .accordion-item {
  margin-top: .5rem; /* juster (0.75–1.25rem) til ønsket luft */
}
.accordion-body {
    padding-top: 0;
}
.accordion-button::after {
    content: "\2b";
    font-family: "Font Awesome 7 Pro";
    font-weight: 400;
    color: var(--bs-primary);
    width: auto;
    height: auto;
    margin-left: auto;
    background: none !important;
}
.accordion-button:not(.collapsed)::after {
    content: "\f068";
}
.accordion-button:not(.collapsed) {
}
.accordion-flush {
    --bs-accordion-color: rgba(var(--cm-content-color-rgb), 1);
    --bs-accordion-bg: transparent;
    --bs-accordion-border-color: rgba(var(--cm-content-color-rgb), .5);
    --bs-accordion-border-width: 1px;
    --bs-accordion-btn-padding-x: 0;
    --bs-accordion-btn-padding-y: 1rem;
    --bs-accordion-btn-color: rgba(var(--cm-content-color-rgb), 1);
    --bs-accordion-btn-bg: transparent;
    --bs-accordion-body-padding-x: 0;
    --bs-accordion-body-padding-y: 1rem;
    --bs-accordion-active-color: rgba(var(--cm-content-color-rgb), 1);
    --bs-accordion-active-bg: transparent;
}
.accordion-flush .accordion-item {
    padding: .75rem 0;
}
.accordion-flush .accordion-button {
    border-bottom: none !important;
    box-shadow: none !important;
    font-weight: bold;
}

.accordion-flush .accordion-body {
    padding-top: 0;
}

/* Modals */
.modal .cb-field-inner-layout {
    overflow-x: hidden;
}
.modal-simple .modal-content {
    background-color: transparent;
    color: #FFF;
}
.modal-simple .modal-header {
    border: none;
}
.modal-simple .modal-content .btn-close {
    filter: var(--bs-btn-close-white-filter);
}
.modal-backdrop.show {
    opacity: 0.9;
}

/* Overlays */
.overlay::after {
    --overlay-color: 0, 0, 0;
    --min-opacity: 0;
    --max-opacity: .75;
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}
.overlay.overlay-top::after {
    background: linear-gradient(to bottom,
        rgba(var(--overlay-color), var(--max-opacity)) 0%,
        rgba(var(--overlay-color), var(--min-opacity)) 100%
    );
}
.overlay.overlay-bottom::after {
    background: linear-gradient(to bottom,
        rgba(var(--overlay-color), var(--min-opacity)) 50%,
        rgba(var(--overlay-color), var(--max-opacity)) 100%);
}
.overlay.overlay-top-bottom::after {
    background: linear-gradient(to bottom,
        rgba(var(--overlay-color), var(--max-opacity)) 0%,
        rgba(var(--overlay-color), var(--min-opacity)) 50%,
        rgba(var(--overlay-color), var(--max-opacity)) 100%);
}

/* Breadcrumbs */
.breadcrumb {
    margin-bottom: 0;
    display: block;
}
.breadcrumb-item {
    display: inline;
    color: inherit;
}
.breadcrumb-item a{
    color: inherit!important;
    text-decoration: none;
}
.breadcrumb-item+.breadcrumb-item::before {
    content: "/";
    float: none;
    color: inherit;
}
.breadcrumb-item.active {
    color:inherit;
}
.breadcrumb-center .breadcrumb {
    text-align: center;
}

/* Special rules to make sure you don't end up with a button with the same color as the background (which of course would make it invisible) */
.text-bg-dark .btn-dark,
.text-bg-dark .btn-outline-dark {
    --bs-btn-color: var(--bs-body-bg);
    --bs-btn-border-color: var(--bs-body-bg);
    --bs-btn-hover-color: var(--bs-body-bg);
    --bs-btn-hover-bg: var(--bs-body-bg)c;
    --bs-btn-hover-border-color: var(--bs-body-bg);
}

/* The following variables are used to style elements according to the background they are placed on */
.text-bg-primary,
.text-bg-dark {
    --swiper-theme-color: var(--bs-secondary);
    --swiper-pagination-bullet-inactive-color: var(--bs-secondary);
    --cm-content-color-rgb: var(--bs-body-bg-rgb);
    --cm-invert-color-rgb: var(--bs-body-color-rgb);
    color: var(--bs-secondary) !important;
}
.text-bg-info {
    color: var(--bs-dark) !important;
}
.text-bg-info a {
    color: var(--bs-dark);
    text-decoration: underline;
}

/* General styles for list items */
.list-item-wrapper {
    box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .05);
}
/* Default white background if not set */
.list-item-wrapper:not([class*="bg"]) {
    background-color: var(--bs-white);
    color: var(--bs-body-color);
}

/* Profile list items */
.profile-list-item {
    text-align: center;
}

/* Profile list items */
.list-item-phone,
.list-item-email {
    padding-left: .25rem;
    padding-right: .25rem;
}

/* Event list items */
.list-item-calendar {
    position: absolute;
    top: 0;
    left: 0;
    background-color: var(--bs-light);
    color: var(--bs-body-color);
    padding: .5rem;
    margin: .5rem;
    border-radius: var(--bs-border-radius-xl);
    width: 5rem;
    height: 5rem;
    text-align: center;
}

/* Partner list items */
.partner-list-item .list-logo-picture img,
.partner-slides-item .list-logo-picture img {
    object-fit: contain;
    aspect-ratio: 4 / 2;
    object-position: center bottom;
    filter: grayscale(100%);
}
.partner-list-item a:hover .list-logo-picture img,
.partner-slides-item a:hover .list-logo-picture img {
    filter: grayscale(0%);
}

/* Event special list items */
.text-bg-dark .event-special-list-item a:not(.btn) {
    color: #FFF;
}

/* Calendar block with month, date and weekday */
.calendar-block-container {
    position: absolute;
    top: 1rem;
    left: 1rem;
    background-color: var(--bs-white);
    color: var(--bs-body-color);
    padding: .5rem;
    border-radius: var(--bs-border-radius-xl);
    margin-bottom: .5rem;
    height: 5rem;
    aspect-ratio: 1 / 1;
    box-shadow: .5rem .5rem 1.5rem rgba(0,0,0,.05);
}
.calendar-block {
    display: flex;
    flex-direction: column;
    text-align: center;
}
.calendar-block > * {
    margin-bottom: 0;
    line-height: 1.1;
}
.calendar-block-month {
    text-transform: uppercase;
    font-weight: 500;
    font-size: .75rem;
}
.calendar-block-day {
    font-weight: 500;
    font-size: 2rem;
}
.calendar-block-weekday {
    text-transform: capitalize;
    font-size: .75rem;
}

/* Highcharts styling */
.highcharts-container {
    font-family: var(--bs-body-font-family);
}
.highcharts-background {
    fill: transparent;
}
.highcharts-title {
    font-size: 1rem;
    font-weight: normal;
    fill: var(--bs-body-color);       
}
.highcharts-legend-item > text {
    font-weight: normal;
    font-size: .7rem;
    fill: var(--bs-body-color);       
}
.highcharts-axis-title,
.highcharts-axis-labels {
    fill: var(--bs-body-color);      
}
.highcharts-point {
    stroke-width: 0;
}
.highcharts-grid-line {
    stroke: rgba(0,0,0,.25);
}
.chart-text-in-donut {
    position: relative;
    z-index: -1;
}

/* Publication info */
.publication-info-author-image {
    width: 4rem;
}

/* Video JS Player */
.video-js .vjs-big-play-button {
    background-color: var(--bs-primary);
}

/* Custom Google Maps Styling (Infowindow and pin) */
.gm-style .gm-style-iw-c {
    padding: 0;
}
.gm-style-iw-d {
    padding: 0 1rem 0 1rem;
}
.gmaps-pin {
    filter:
        drop-shadow(0 1px 1px rgba(255, 255, 255, 1))
        drop-shadow(.25rem .25rem 1rem rgba(0, 0, 0, .25)
    );
}
.gmaps-pin-wrapper {
    font-size: 1rem;
    width: auto;
    height: auto;
    min-width: 3rem;
    min-height: 3rem;
    background: var(--bs-primary);
    color: #FFF;
    padding: 1rem;
    position: relative;
    text-align: center;
    border-radius: 1.5rem;
}
.gmaps-pin-wrapper:empty::before {
    content: "";
    display: block;
    background-color: #FFF;
    width: 1rem;
    height: 1rem;
    border-radius: 100%;
}
.gmaps-pin::after { 
    content: "";
    display: block;
    width: 0;
    height: 0;
    border-left: .5rem solid transparent;
    border-right: .5rem solid transparent;
    border-top: .5rem solid var(--bs-primary);
    margin: -2px auto 0;
}
.gmaps-pin.active .gmaps-pin-wrapper {
    background: var(--bs-light);
    color: var(--bs-primary);
}
.gmaps-pin.active::after {
    border-top: .5rem solid var(--bs-light);
}
.gmaps-pin.active .gmaps-pin-wrapper:empty::before {
    background-color: var(--bs-primary);
}

/* Gallery */
.gallery-wrapper {
    position: relative;
}
.gallery-button {
    background-color: var(--bs-dark);
    color: #FFF;
    position: absolute;
    margin-top: calc(var(--bs-gutter-y) * .5);
    top: 1rem;
    right: 1rem;
    z-index: 1;
    opacity: .75;
}
.gallery-button:hover {
    background-color: var(--bs-dark);
    color: #FFF;
    opacity: 1;
}

/* Masonry layout (for galleries, etc) */
.masonry-layout-1 {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: calc(var(--bs-gutter-x) * -.5);
}
.masonry-layout-1 > .tile {
    grid-column: span 1;
    grid-row: span 1;
    aspect-ratio: 1 / 1;
}
.masonry-layout-1 > .tile:nth-child(8n + 1),
.masonry-layout-1 > .tile:nth-child(8n + 6) {
    grid-column: span 2;
    grid-row: span 2;
    aspect-ratio: 1 / 1;
}
.masonry-layout-1 > .tile:nth-child(8n + 2),
.masonry-layout-1 > .tile:nth-child(8n + 5) {
    grid-column: span 2;
    grid-row: span 1;
    aspect-ratio: 2 / 1;
}
.masonry-layout-1.limit-4>.tile:nth-child(n+5),
.masonry-layout-1.limit-8>.tile:nth-child(n+9),
.masonry-layout-1.limit-12>.tile:nth-child(n+13),
.masonry-layout-1.limit-16>.tile:nth-child(n+17) {
    display: none;
}
.masonry-layout-1 > .tile {
    grid-column: span 1;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    display: flex;
    padding: calc(var(--bs-gutter-x) * .5);
    cursor: pointer;
}
.masonry-layout-1 > .tile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.masonry-layout-1 > .tile picture {
    position: relative;
}
.masonry-layout-1 > .tile:hover picture::after {
    font-family: "Font Awesome 7 Pro";
    font-weight: 400;
    font-size: 3rem;
    color: var(--bs-light);
    content: "\f00e";
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.5);
    position: absolute;
    top: 0;
}

/* Special effects */
.bottom-border-overlay .layout-wrapper:before {
    content: "";
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 30%;
    background-color: white;
}

/** ################################################## HEADER ################################################## **/


#header {
    background-color: rgba(255,255,255,0);
    transition: background-color 250ms ease;
}
#header.position-absolute {
    z-index: 1030;
}
body.scrolled #header.fixed-top {
    background-color: rgba(255,255,255,1);
    box-shadow: 0 0 1rem rgba(0,0,0,.1);
}
#header.navbar-collapse-open {
    background-color: var(--bs-body-bg);
}
#header .navbar {
    --bs-navbar-color: rgba(var(--bs-body-color-rgb), 1);
}
#header .navbar-collapse.collapse.show {
    padding-top: 1rem;
    padding-bottom: 2rem;
}
#header .navbar-collapse.collapse.show .navbar-nav {
    padding-bottom: 1rem;
}
#header .navbar-brand img {
    height: 3rem;
    width: auto;
}
.header-compensate {
    padding-top: var(--cm-header-height);
}
#header .menu-top a {
    color: inherit;
    text-decoration: none;
}
#header .menu-top .nav-destination-img {
    height: 8rem;
    width: auto;
}
#header .menu-top .nav-destination-link:hover .nav-destination-img {
    filter: drop-shadow(0 0 1rem var(--bs-primary));
}
#header .menu-top .nav-destination-trips {
    padding: 0;
    list-style: none;
}
#header .menu-top .nav-destination-trips-item-link:hover {
    text-decoration: underline;
}
.menu-bottom::before {
    content: "";
    background: url("../gfx/paw.svg") no-repeat center/contain;
    display: block;
    width: 500px;
    height: 500px;
    object-fit: contain;
    position: absolute;
    bottom: -150px;
    right: -100px;
    transform: rotate(-22.5deg);
    filter: brightness(1000%) opacity(5%);
}
#header .menu-bottom .navbar-nav {
    --bs-navbar-color: rgba(var(--bs-secondary-rgb), 1);
    --bs-navbar-hover-color: rgba(var(--bs-secondary-rgb), 0.8);
    --bs-navbar-active-color: rgba(var(--bs-light-color-rgb), 1);
    --bs-nav-link-font-size: 1.25rem;
    --bs-nav-link-padding-y: 0.25rem;
}
#header .menu-bottom .nav-item {
    font-family: "sinter", sans-serif;
    font-weight: 700;
}
#header .menu-bottom .dropdown-menu {
    --bs-dropdown-min-width: 13rem;
    --bs-dropdown-color: var(--bs-secondary);
    --bs-dropdown-bg: transparent;
    --bs-nav-link-font-size: 1rem;
    --bs-dropdown-padding-y: 0;
    --bs-nav-link-padding-y: 0;
    --bs-dropdown-box-shadow: none;
    --bs-dropdown-border-color: transparent;
    margin-bottom: .25rem;
}
#header .menu-bottom .dropdown-menu .nav-item{
    font-family: var(--bs-body-font-family);
    font-weight: var(--bs-body-font-weight);
}
#header .menu-bottom .dropdown-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
#header .menu-bottom .dropdown-toggle::after {
    content: "\f078";
    border: none;
    font-family: "Font Awesome 7 Pro";
}
#header .menu-bottom .dropdown-toggle.show::after {
    transform: rotate(180deg);
}
#header .menu-bottom .dropdown-menu .nav-item .nav-link {
}
#navbarCollapse {
}
#navbarCollapse .navbar-nav {
}
#header.navbar-collapse-open {
    background-color: var(--bs-secondary) !important;
}


/* There is a JS-function that checks the background color of the first header in main. If it is dark, the class .header-light is placed on the header so that we can style it differently. */
/* The first rule shows the correct logo according to the background of the first header in main and if the page has been scrolled or not. */
/* If this gets too complex, make your own logic. */

/* Show the correct logo (dark on light background, light on dark background */
body:not(.scrolled) #header.light-header:not(.navbar-collapse-open) .navbar-brand-img,
body.scrolled #header:not(.navbar-collapse-open):not(.position-absolute) .navbar-brand-img-light,
#header:not(.light-header):not(.navbar-collapse-open) .navbar-brand-img-light,
#header.navbar-collapse-open .navbar-brand-img-light 
{
    opacity: 0;
}
/* Choose suitable link color for the menu if the user has not scrolled and the burger menu is not open */
body:not(.scrolled) #header.light-header:not(.navbar-collapse-open) .navbar,
#header.light-header:not(.navbar-collapse-open).position-absolute .navbar
{
    --bs-emphasis-color-rgb: 255,255,255;
    --bs-navbar-color: rgba(var(--bs-emphasis-color-rgb), 1);
}
/* Choose a suitable background color for the dropdown if the user has not scrolled and the burger menu is not open */
body:not(.scrolled) #header.light-header:not(.navbar-collapse-open) .dropdown-menu {
    --bs-dropdown-bg: var(--bs-dark);
}

/* Custom Google Search */
.cgs-search-results-list {
    --bs-list-group-active-color: var(--bs-body-color);
    --bs-list-group-active-bg: var(--bs-light);
    --bs-list-group-active-border-color: var(--bs-light);
    --bs-list-group-action-active-bg: var(--bs-light);
}
.cgs-search-results-item-introtext {
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow: hidden;
}
.header-search .cgs-search-results-container {
    position: absolute;
    left: 0;
    top: 100%;
    width: 100%;
    margin-top: .5rem;
}

/** ################################################## MAIN ################################################## **/

/* Compensate for the sticky header. Adds padding/margin if this setting is true on the ContentBlocks header */
.cb-layout-header.container > .header-compensation {
    margin-top: var(--cm-header-height) !important;
}
.cb-layout-header.w-100 > .header-compensation {
    padding-top: var(--cm-header-height) !important;
}


/** ################################################## FOOTER ################################################## **/

#footer .brand-symbol {
   height: 3rem;
   width: auto;
}

/** ################################################## SPECIAL ################################################## **/

/* Timeline */
.cb-field-timeline-item {
    width: 100%;
    border: 1px solid var(--bs-light);
    padding: .6rem .6rem .6rem 1.8rem;
    border-radius: var(--bs-border-radius-pill);
}
.cb-field-timeline-item-icon {
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background-color: var(--bs-light); /* eller hva du vil */
    color: var(--bs-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
}
.cb-field-timeline-item {
    position: relative;
}
.cb-field-timeline-item-arrow {
    margin: .5rem;
    color: var(--bs-light);
}
.cb-field-timeline .cb-field-timeline-item-arrow:last-of-type {
    display: none;
}

.cb-field-ticket-search {
    position: relative;
    width: 100%;
    max-width: 30rem;
    padding: 6rem 1.5rem;
}

.cb-field-ticket-search .rte-wrapper {
    position: relative;
    z-index: 1;
}

.cb-field-ticket-search::before,
.cb-field-ticket-search::after {
    content: "";
    position: absolute;
    display: block;
    width: 100%;
    height: 75%;
    left: 0;
    background-image: url("../gfx/ticket-portrait.svg");
    background-repeat: no-repeat;
    background-size: cover;
}

.cb-field-ticket-search::before {
    top: 0;
    background-position: top center;
}

.cb-field-ticket-search::after {
    bottom: 0;
    background-position: bottom center;
}


.bg-paw > .layout-container::before {
    content: "";
    background: url("../gfx/paw.svg") no-repeat center/contain;
    display: block;
    width: 500px;
    height: 500px;
    object-fit: contain;
    position: absolute;
    bottom: -150px;
    left: 500px;
    transform: rotate(-22.5deg);
    opacity: .15;
}
.bg-paw-bottom-right >.layout-container::before {
    content: "";
    background: url("../gfx/paw.svg") no-repeat center/contain;
    display: block;
    width: 500px;
    height: 500px;
    object-fit: contain;
    position: absolute;
    bottom: -150px;
    right: 200px;
    transform: rotate(-22.5deg);
    opacity: .15;
}

.bg-topograpy-1 > .layout-container::before {
    content: "";
    background: url("../gfx/topo-1.png") no-repeat center/contain;
    display: block;
    width: 500px;
    height: 500px;
    object-fit: contain;
    position: absolute;
    bottom: -150px;
    left: 500px;
    transform: rotate(-22.5deg);
    opacity: .15;
}

.quote-slides-item {
    background-color: var(--bs-info);
    border-radius: var(--bs-border-radius);
    box-shadow: var(--bs-box-shadow-lg);
    margin-top: 3rem;
    padding: 1rem;
    filter: brightness(120%) contrast(40%) saturate(75%);
    opacity: .6;
    transition: all 500ms ease 0s;
}
.quote-slides-item.swiper-slide-active {
    background-color: var(--bs-light);
    filter: none;
    opacity: 1;
}
.quote-slides-item-content {
    border-radius: var(--bs-border-radius);
    border: 1px dashed var(--bs-body-color);
    position: relative;
    padding: 1rem;
    text-align: center;
}
.quote-slides-item-figure {
    width: 6rem;
    margin: -4rem auto 1rem;
    border-radius: var(--bs-border-radius);
    overflow: hidden;
    filter: sepia(100%);
}
.quote-slides-item-name {
    font-style: italic;
}

.cb-newsletter-form {
    max-width: 600px;
}


.article-header {
    position: relative;
}
.article-header::after {
    content: "";
    display: block;
    width: 100%;
    height: 15rem;
    background-color: var(--bs-secondary);
    position: absolute;
    left: 0;
    bottom: -1px;
}
.article-header .layout-wrapper {
    z-index: 1;
}
.article-header .layout-wrapper .cb-field-image,
.article-header .layout-wrapper .cb-field-video {
    box-shadow: var(--bs-box-shadow-lg);
}

.cb-layout-aside-sticky {

}





.mt--5 {
    margin-top: -2rem !important
}
@media (min-width: 768px){
    .mt--5 {margin-top: -2rem !important}
}

.navbar-toggler {
    border: 0;
    outline: 0;
    font-family: "sinter", sans-serif;
    font-weight: 700;
    line-height: 1.2;
}

.trip-item,
.trip-ticket {
    position: relative;
    overflow: visible;
    z-index: 1;
    filter: drop-shadow(0px 4px 10px rgba(0, 0, 0, 0.08));
}

.trip-ticket {
    filter: drop-shadow(0px 16px 32px rgba(0, 0, 0, 0.17));
}

.trip-ticket-inner {
    mask-image: var(--flik-top), var(--flik-bottom), linear-gradient(#000 0 0);
    mask-size: 130px, 130px, 100%;
    mask-position: top center, center calc(100% + 1px);
    mask-repeat: no-repeat;
    mask-composite: exclude;
}

.trip-item-inner {
    --flik-mask: var(--flik-bottom);
    mask: var(--flik-mask), linear-gradient(#000 0 0);
    mask-size: 130px, 100%;
    mask-position: bottom center;
    mask-repeat: no-repeat;
    mask-composite: exclude;
}



.trip-item img {
    max-height: 166px;
    object-fit: cover;
}





.trip-item .grid,
.trip-ticket .grid {
    --gap: .5rem;
    --line-offset: calc(var(--gap) / 2);
    --line-thickness-horizontal: 0;
    --line-thickness-vertical: 0;

    display: grid;
    padding: 1rem 2rem 3rem 2rem;
    min-height: 100%;
    grid-template-areas:
        "a e"
        "b f"
        ". ."
        "x x"
        ". ."
        "d g";
    grid-template-columns: 1.5fr 1fr;
    grid-template-rows: min-content min-content 10px min-content 10px min-content;
    overflow: hidden;
    gap: var(--gap);
}

.trip-ticket .grid {
    padding: 3rem 1rem;
    grid-template-columns: 1fr 1fr;
}

.trip-ticket .grid_item_f {
    padding-left: .75rem;
}

.grid_item {
    position: relative;
}

.grid_item::before,
.grid_item::after {
    content: '';
    position: absolute;
    z-index: 1;
    --dash-size: 3px;
    --dash-color: rgba(0, 0, 0, .5)
}

.grid_item::after {
    inline-size: 100vw;
    block-size: var(--line-thickness-horizontal);
    inset-inline-start: -2rem;
    inset-block-start: calc(var(--line-offset) * -1);
    background-image: repeating-linear-gradient(to right,
            var(--dash-color) 0,
            var(--dash-color) var(--dash-size),
            transparent var(--dash-size),
            transparent calc(var(--dash-size) * 2));
}

.grid_item::before {
    inline-size: var(--line-thickness-vertical);
    block-size: 100vh;
    inset-block-start: -2rem;
    inset-inline-start: calc(var(--line-offset) * -1);
    background-image: repeating-linear-gradient(to bottom,
            var(--dash-color) 0,
            var(--dash-color) var(--dash-size),
            transparent var(--dash-size),
            transparent calc(var(--dash-size) * 2));
}

.grid_item_a {
    grid-area: a
}

.grid_item_b {
    grid-area: b
}

.grid_item_c {
    display: none
}

.grid_item_d {
    grid-area: d;
    display: flex;
    align-items: center;
    gap: 0px 5px;
    flex-wrap: wrap
}

.grid_item_e {
    grid-area: e
}

.grid_item_f {
    grid-area: f;
}

.grid_item_g {
    grid-area: g;
}

.grid_item_x {
    --line-thickness-horizontal: 2px;
    grid-area: x;
}

@media (min-width: 768px) {

    .trip-item-inner {
        mask-size: 40px, 100%;
        mask-position: right center;
        --flik-mask: var(--flik-right);
    }

    .grid_item_c {
        grid-area: c;
        display: block;
    }

    .trip-item .grid,
    .trip-ticket .grid {
        padding: 2rem 1rem 2rem 3rem;
        grid-template-rows: initial;
        grid-template-columns: 2fr 5px min-content 5px 1fr;
        grid-template-areas:
            "a . x . e"
            "b . x . f"
            "c . x . f"
            "d . x . g";
        --gap: 1rem;
    }

    .trip-ticket .grid {
        padding: 2rem 2rem;
        grid-template-areas:
            "a . x . e"
            "b . x . f"
            "b . x . f"
            "d . x . g";
    }

    .grid_item_d {
        gap: 5px;
    }

    .trip-ticket .grid_item_b {
        display: flex;
        align-items: center
    }

    .grid_item_x {
        --line-thickness-horizontal: 0;
        --line-thickness-vertical: 2px;
        grid-area: x;
    }

    .trip-ticket-inner {
        mask-image: var(--flik-right), var(--flik-left), linear-gradient(#000 0 0);
        mask-size: 50px, 50px, 100%;
        mask-position: calc(100% + 0px) center,
            0px center;
        mask-repeat: no-repeat;
        mask-composite: exclude;
    }

    .trip-item img {
        max-width: 200px;
        max-height: initial;
    }
}

@media (min-width: 992px) {
    .trip-item img {
        max-width: 300px;
        max-height: initial;
    }
}
@media (max-width: 1016px) and (min-width: 768px) {
    .trip-item img {
        max-width: 250px
    }
}
.trip-section-heading {
    scroll-margin-top: 130px !important;
}

.trip-section-icon {
    background: var(--bs-primary);
    padding: .5rem .75rem;
    border-radius: 0.5rem;
    transition: opacity 250ms ease;
}

ul.flex {
    display: flex;
    flex-direction: column;

}


.bttt-items {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

@media (min-width: 480px) {
    .bttt-items {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 768px) {
    .bttt-items {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (min-width: 1200px) {
    .bttt-items {
        grid-template-columns: repeat(6, 1fr);
    }
}


.sticky-wrapper {
    width: 100%;
}

.navbar-trip {
    z-index: 1021;
}

.navbar-trip-wrapper {
    gap: 1px;
    border: 1px solid var(--bs-info);
    overflow-x: scroll;
}

.navbar-trip-item {
    min-width: 160px;
    flex: 1;
    box-shadow: inset 0px 0 0 0px var(--bs-primary);
    transition: box-shadow 250ms ease;
    cursor: pointer;
}

.navbar-trip-item.is-active {
    box-shadow: inset 0px -7px 0 0px var(--bs-primary);
    font-weight: 600;
}

.navbar-trip-item.is-active i {
    color: var(--bs-primary);
}


@media (max-width: 1199px) {

    .navbar-trip {
        padding: 0;
    }

    .navbar-trip .container.wide {
        max-width: 100%;
        padding: 0;
    }

    .navbar-trip-item {
        font-size: 12px;
    }
}

@media (min-width: 1200px) {
    .navbar-trip {
        margin-top: -3rem;
    }

    .sticky-aside {
        height: 0px;
    }

    .sticky-wrapper {
        margin-top: -51px;
    }

    .sticky-wrapper .container.wide {
        padding-right: calc(var(--bs-gutter-x) * 1);
        padding-left: calc(var(--bs-gutter-x) * 1);
    }

    .navbar-trip-wrapper {
        border-radius: var(--bs-border-radius-lg) !important;
        overflow: hidden;
    }

    .navbar-trip-item:hover {
        box-shadow: inset 0px -7px 0 0px var(--bs-primary);
        font-weight: 600;
    }

    .navbar-trip-item:hover i {
        color: var(--bs-primary);
    }
}


.day-program-wrapper {}

.day-program-item {
    border-bottom: 1px dashed black;
    border-bottom-width: 2px;
}

.secret-sticky-section {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9999;

}

.trip-departures {}

.trip-departures-grid--header,
.trip-departures-grid--row {
    grid-template-columns: 1fr min-content;
    grid-template-rows: 2fr;
    gap: 10px 0
}

@media (max-width: 1200px) {
    .trip-departures-grid--price {
        align-self: end;
    }
}

@media (min-width: 1200px) {

    .trip-departures-grid--header,
    .trip-departures-grid--row {
        grid-template-columns: 1fr 1fr 1fr 1fr;
        grid-template-rows: 2fr;
    }
}

.trip-departures-grid--row {}

.justify-self-end {
    justify-self: end;
}

.hint-text {
    color: rgba(0, 0, 0, 0.5)
}

.catch-multiselect-option-check {
    --checkColor: var(--bs-primary);
}

.catch-multiselect-options {
    background-color: var(--bs-light) !important;
}





/** ################################################################################################################################################################################################# 
/** ######################################################################################### MEDIA QUERIES ######################################################################################### 
/** ################################################################################################################################################################################################# 
**/


/** Small devices (landscape phones, 576px and up) **/
/** Bootstrap: -sm **/
@media (min-width: 576px) {
    :root {
    }
    .wide {
        min-width: calc(540px + var(--bs-gutter-x) * 1);
        max-width: 640px;
    }
    .cb-layout-header.w-100 .container:not(.wide),
    .cb-layout-section.w-100 .container:not(.wide),
    .cb-layout-footer.w-100 .container:not(.wide) {
        padding-right: calc(var(--bs-gutter-x) * .5);
        padding-left: calc(var(--bs-gutter-x) * .5);
    }
    .position-sm-absolute {
        position: absolute;
    }
    .aside-sticky-sm {
        height: 0;
        pointer-events: none;
    }
    /* If swiper is placed in a column next to another and overflow is set to visible this makes sure the slides don't overflow the other column */
    /*.row > [class*="col-sm"]:nth-child(1) .swiper.overflow-visible { clip-path: inset(0 0 0 -100vw); }*/
    .row > [class*="col-sm"]:nth-child(2) .swiper.overflow-visible { clip-path: inset(0 -100vw 0 0); }

    /* If horizontal fill is turned on and the element is in a column, it will stretch to the left or right side of the screen accordingly. */
    .row > [class*="col-sm"]:nth-child(1) .horizontal-fill {
        width: calc( ( 100vw - var(--container-width) ) / 2  + 100% + var(--container-padding) ); left: auto; right: 0;
    }
    .row > [class*="col-sm"]:nth-child(2) .horizontal-fill {
        width: calc( ( 100vw - var(--container-width) ) / 2  + 100% + var(--container-padding) ); left: 0; right: auto;
    }

    /* Some CB fields have an option to set horizontal alignment on screens when column switches from stacked to column. These rules are associated with that. */
    .row > [class*="col-sm"] .rte-wrapper.horizontal-align-left > * {
        text-align: left !important;
    }
    .row > [class*="col-sm"] .crte-wrapper.horizontal-align-center > * {
        text-align: center !important;
    }
    .row > [class*="col-sm"] .rte-wrapper.horizontal-align-right > * {
        text-align: right !important;
    }
    .row > [class*="col-sm"] .cb-field-buttons .horizontal-align-left {
        justify-content: start !important;
    }
    .row > [class*="col-sm"] .cb-field-buttons .horizontal-align-center {
        justify-content: center !important;
    }
    .row > [class*="col-sm"] .cb-field-buttons .horizontal-align-right {
        justify-content: end !important;
    }
    .quote-slides-item {
        margin-top: 5rem;
        padding: 1.5rem;
    }
    .quote-slides-item-content {
        padding: 2rem;
    }
    .quote-slides-item-figure {
        width: 8rem;
        margin: -6rem auto 2rem;
    }
}

/** Medium devices (tablets, 768px and up) **/
/** Bootstrap: -md **/
@media (min-width: 768px) {
    :root {
        --cm-narrow: 576px;
    }
    .wide {
        min-width: calc(720px + var(--bs-gutter-x) * 1);
        max-width: 900px;
    }
    /*.row > [class*="col-md"]:nth-child(1) .swiper.overflow-visible { clip-path: inset(0 0 0 -100vw); }*/
    .row > [class*="col-md"]:nth-child(2) .swiper.overflow-visible { clip-path: inset(0 -100vw 0 0); }

    .row > [class*="col-md"]:nth-child(1) .horizontal-fill {
        width: calc( ( 100vw - var(--container-width) ) / 2  + 100% + var(--container-padding) ); left: auto; right: 0;
    }
    .row > [class*="col-md"]:nth-child(2) .horizontal-fill {
        width: calc( ( 100vw - var(--container-width) ) / 2  + 100% + var(--container-padding) ); left: 0; right: auto;
    }
    .row > [class*="col-md"] .rte-wrapper.horizontal-align-left > * {
        text-align: left !important;
    }
    .row > [class*="col-md"] .rte-wrapper.horizontal-align-center > * {
        text-align: center !important;
    }
    .row > [class*="col-md"] .rte-wrapper.horizontal-align-right > * {
        text-align: right !important;
    }
    .row > [class*="col-md"] .cb-field-buttons .horizontal-align-left {
        justify-content: start !important;
    }
    .row > [class*="col-md"] .cb-field-buttons .horizontal-align-center {
        justify-content: center !important;
    }
    .row > [class*="col-md"] .cb-field-buttons .horizontal-align-right {
        justify-content: end !important;
    }
    #footer .articles-list.inline-list {
        display: inline-flex;
        gap: 2rem;
        margin-left: 2rem;
    }
    .cb-field-ticket-search {
        max-width: 50rem;
        padding: 5rem 7rem;
    }

    .cb-field-ticket-search::before,
    .cb-field-ticket-search::after {
        width: 75%;
        height: 100%;
        left: auto;
        top: 0;
        bottom: auto;
        background-image: url("../gfx/ticket-landscape.svg");
    }

    .cb-field-ticket-search::before {
        left: 0;
        background-position: left center;
    }

    .cb-field-ticket-search::after {
        right: 0;
        background-position: right center;
    }
    #header .menu-bottom .dropdown-toggle::after {
        display: none;
    }
    .position-md-absolute {
        position: absolute;
    }
    .aside-sticky-md {
        height: 0;
        pointer-events: none;
    }
}

/** Large devices (desktops, 992px and up) **/
/** Bootstrap: -lg **/
@media (min-width: 992px) {
    :root {
        --cm-narrow: 768px;
    }
    .wide {
        min-width: calc(960px + var(--bs-gutter-x) * 1);
        max-width: 1080px;
    }
    /*.row > [class*="col-lg"]:nth-child(1) .swiper.overflow-visible { clip-path: inset(0 0 0 -100vw); }*/
    .row > [class*="col-lg"]:nth-child(2) .swiper.overflow-visible { clip-path: inset(0 -100vw 0 0); }

    .row > [class*="col-lg"]:nth-child(1) .horizontal-fill {
        width: calc( ( 100vw - var(--container-width) ) / 2  + 100% + var(--container-padding) ); left: auto; right: 0;
    }
    .row > [class*="col-lg"]:nth-child(2) .horizontal-fill {
        width: calc( ( 100vw - var(--container-width) ) / 2  + 100% + var(--container-padding) ); left: 0; right: auto;
    }
    .row > [class*="col-lg"] .rte-wrapper.horizontal-align-left > * {
        text-align: left !important;
    }
    .row > [class*="col-lg"] .rte-wrapper.horizontal-align-center > * {
        text-align: center !important;
    }
    .row > [class*="col-lg"] .rte-wrapper.horizontal-align-right > * {
        text-align: right !important;
    }
    .row > [class*="col-lg"] .cb-field-buttons .horizontal-align-left {
        justify-content: start !important;
    }
    .row > [class*="col-lg"] .cb-field-buttons .horizontal-align-center {
        justify-content: center !important;
    }
    .row > [class*="col-lg"] .cb-field-buttons .horizontal-align-right {
        justify-content: end !important;
    }
    .swiper-layout-cards {
        padding: 0 5rem;
    }
    .swiper-layout-cards .swiper-pagination {
        display: none;
    }
    .swiper-layout-cards .swiper-buttons .btn-prev,
    .swiper-layout-cards .swiper-buttons .btn-next {
        display: block;
    }
    .position-lg-absolute {
        position: absolute;
    }
    .aside-sticky-lg {
        height: 0;
        pointer-events: none;
    }
}

/** Extra large devices (large desktops, 1200px and up) **/
/** Bootstrap: -xl **/
@media (min-width: 1200px) {
    :root {
        --cm-narrow: 900px;
    }
    .wide {
        min-width: calc(1140px + var(--bs-gutter-x) * 1);
        max-width: 1280px;
    }
    /*.row > [class*="col-xl"]:nth-child(1) .swiper.overflow-visible { clip-path: inset(0 0 0 -100vw); }*/
    .row > [class*="col-xl"]:nth-child(2) .swiper.overflow-visible { clip-path: inset(0 -100vw 0 0); }

    .row > [class*="col-xl"]:nth-child(1) .horizontal-fill {
        width: calc( ( 100vw - var(--container-width) ) / 2  + 100% + var(--container-padding) ); left: auto; right: 0;
    }
    .row > [class*="col-xl"]:nth-child(2) .horizontal-fill {
        width: calc( ( 100vw - var(--container-width) ) / 2  + 100% + var(--container-padding) ); left: 0; right: auto;
    }
    .row > [class*="col-xl"] .rte-wrapper.horizontal-align-left > * {
        text-align: left !important;
    }
    .row > [class*="col-xl"] .rte-wrapper.horizontal-align-center > * {
        text-align: center !important;
    }
    .row > [class*="col-xl"] .rte-wrapper.horizontal-align-right > * {
        text-align: right !important;
    }
    .row > [class*="col-xl"] .cb-field-buttons .horizontal-align-left {
        justify-content: start !important;
    }
    .row > [class*="col-xl"] .cb-field-buttons .horizontal-align-center {
        justify-content: center !important;
    }
    .row > [class*="col-xl"] .cb-field-buttons .horizontal-align-right {
        justify-content: end !important;
    }
    .position-xl-absolute {
        position: absolute;
    }
    .aside-sticky-xl {
        height: 0;
        pointer-events: none;
    }
}

/** Extra Extra large devices (HD desktops, 1400px and up) **/
@media (min-width: 1400px) {
    .wide {
        min-width: calc(1348px + var(--bs-gutter-x) * 1);
        max-width: 1640px;
    }
    /*.row > [class*="col-xxl"]:nth-child(1) .swiper.overflow-visible { clip-path: inset(0 0 0 -100vw); }*/
    .row > [class*="col-xxl"]:nth-child(2) .swiper.overflow-visible { clip-path: inset(0 -100vw 0 0); }

    .row > [class*="col-xxl"]:nth-child(1) .horizontal-fill {
        width: calc( ( 100vw - var(--container-width) ) / 2  + 100% + var(--container-padding) ); left: auto; right: 0;
    }
    .row > [class*="col-xxl"]:nth-child(2) .horizontal-fill {
        width: calc( ( 100vw - var(--container-width) ) / 2  + 100% + var(--container-padding) ); left: 0; right: auto;
    }
    .row > [class*="col-xxl"] .rte-wrapper.horizontal-align-left > * {
        text-align: left !important;
    }
    .row > [class*="col-xxl"] .rte-wrapper.horizontal-align-center > * {
        text-align: center !important;
    }
    .row > [class*="col-xxl"] .rte-wrapper.horizontal-align-right > * {
        text-align: right !important;
    }
    .row > [class*="col-xxl"] .cb-field-buttons .horizontal-align-left {
        justify-content: start !important;
    }
    .row > [class*="col-xxl"] .cb-field-buttons .horizontal-align-center {
        justify-content: center !important;
    }
    .row > [class*="col-xxl"] .cb-field-buttons .horizontal-align-right {
        justify-content: end !important;
    }
    .position-xxl-absolute {
        position: absolute;
    }
    .aside-sticky-xxl {
        height: 0;
        pointer-events: none;
    }
}

@media (orientation: landscape) {
}

@media (orientation: portrait) {
}