/*!
Theme Name: ace
Theme URI: http://underscores.me/
Author: Chad Rossouw for HdK
Author URI: https://wearehdk.com/
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: ace
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

ace is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/
/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Generic
	- Normalize
	- Box sizing
# Base
	- Typography
	- Elements
	- Links
	- Forms
## Layouts
# Components
	- Navigation
	- Posts and pages
	- Comments
	- Widgets
	- Media
	- Captions
	- Galleries
# plugins
	- Jetpack infinite scroll
# Utilities
	- Accessibility
	- Alignments

--------------------------------------------------------------*/
/*Font Weights*/
.has-medium-font-size {
  font-size: 1.25rem;
}

/*--------------------------------------------------------------
# Generic
--------------------------------------------------------------*/
/* Normalize
--------------------------------------------- */
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
/* Document
	 ========================================================================== */
/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */
html {
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
}

/* Sections
	 ========================================================================== */
/**
 * Remove the margin in all browsers.
 */
body {
  margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */
main {
  display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */
h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/* Grouping content
	 ========================================================================== */
/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr {
  box-sizing: content-box;
  height: 0;
  overflow: visible;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
pre {
  font-family: monospace, monospace;
  font-size: 1em;
}

/* Text-level semantics
	 ========================================================================== */
/**
 * Remove the gray background on active links in IE 10.
 */
a {
  background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
  border-bottom: none;
  text-decoration: underline;
  text-decoration: underline dotted;
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b,
strong {
  font-weight: 700;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code,
kbd,
samp {
  font-family: monospace, monospace;
  font-size: 1em;
}

/**
 * Add the correct font size in all browsers.
 */
small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Embedded content
	 ========================================================================== */
/**
 * Remove the border on images inside links in IE 10.
 */
img {
  border-style: none;
}

/* Forms
	 ========================================================================== */
/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */
button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  font-size: 100%;
  line-height: 1.15;
  margin: 0;
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */
button,
input {
  overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */
button,
select {
  text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */
button,
[type=button],
[type=reset],
[type=submit] {
  -webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */
button::-moz-focus-inner,
[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */
button:-moz-focusring,
[type=button]:-moz-focusring,
[type=reset]:-moz-focusring,
[type=submit]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */
fieldset {
  padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *		`fieldset` elements in all browsers.
 */
legend {
  box-sizing: border-box;
  color: inherit;
  display: table;
  max-width: 100%;
  padding: 0;
  white-space: normal;
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
  vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */
textarea {
  overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */
[type=checkbox],
[type=radio] {
  box-sizing: border-box;
  padding: 0;
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */
[type=search] {
  -webkit-appearance: textfield;
  outline-offset: -2px;
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */
[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit;
}

/* Interactive
	 ========================================================================== */
/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */
details {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */
summary {
  display: list-item;
}

/* Misc
	 ========================================================================== */
/**
 * Add the correct display in IE 10+.
 */
template {
  display: none;
}

/**
 * Add the correct display in IE 10.
 */
[hidden] {
  display: none;
}

/* Box sizing
--------------------------------------------- */
/* Inherit box-sizing to more easily change it's value on a component level.
@link http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
*,
*::before,
*::after {
  box-sizing: inherit;
}

html {
  box-sizing: border-box;
}

/*--------------------------------------------------------------
# Base
--------------------------------------------------------------*/
/* Typography
--------------------------------------------- */
/* ubuntu-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Ubuntu";
  font-style: normal;
  font-weight: 700;
  src: url("/wp-content/themes/karoo/assets/fonts/ubuntu-v20-latin-700.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* karla-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Karla";
  font-style: normal;
  font-weight: 400;
  src: url("/wp-content/themes/karoo/assets/fonts/karla-v31-latin-regular.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* karla-italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Karla";
  font-style: italic;
  font-weight: 400;
  src: url("/wp-content/themes/karoo/assets/fonts/karla-v31-latin-italic.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* karla-600 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Karla";
  font-style: normal;
  font-weight: 600;
  src: url("/wp-content/themes/karoo/assets/fonts/karla-v31-latin-600.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* karla-600italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Karla";
  font-style: italic;
  font-weight: 600;
  src: url("/wp-content/themes/karoo/assets/fonts/karla-v31-latin-600italic.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
body,
button,
input,
select,
optgroup,
textarea {
  color: #1a1a1a;
  font-family: "Karla", sans-serif;
  font-size: 1rem;
  line-height: 1.5;
  font-weight: 400;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: #550C2F;
  font-family: "Ubuntu", sans-serif;
  font-weight: 700;
  line-height: 110%;
  margin: 0 0 1rem;
}
h1 + h1,
h1 + h2,
h1 + h3,
h1 + h4,
h2 + h1,
h2 + h2,
h2 + h3,
h2 + h4,
h3 + h1,
h3 + h2,
h3 + h3,
h3 + h4,
h4 + h1,
h4 + h2,
h4 + h3,
h4 + h4,
h5 + h1,
h5 + h2,
h5 + h3,
h5 + h4,
h6 + h1,
h6 + h2,
h6 + h3,
h6 + h4 {
  margin-top: -1rem;
}

h1, .h1 {
  font-size: 3rem;
}

h2, .h2 {
  font-size: 3rem;
}

h3, .h3 {
  font-size: 2rem;
}

h4 {
  font-size: 1.5rem;
  font-weight: 400;
}

h5 {
  font-size: 1rem;
}

p {
  margin-top: 0;
  margin-bottom: 1em;
  font-size: 1rem;
  line-height: 1.5;
  font-weight: 400;
}

dfn,
cite,
em,
i {
  font-style: italic;
}

blockquote {
  margin: 0 1.5em;
}

address {
  margin: 0 0 1.5em;
}

pre {
  background: #eee;
  font-family: mono, sans-serif;
  line-height: 1.6;
  margin-bottom: 1.6em;
  max-width: 100%;
  overflow: auto;
  padding: 1.6em;
}

code,
kbd,
tt,
var {
  font-family: mono, sans-serif;
}

abbr,
acronym {
  border-bottom: 1px dotted #666;
  cursor: help;
}

mark,
ins {
  background: #fff9c0;
  text-decoration: none;
}

big {
  font-size: 125%;
}

/*Typography Utilities*/
.weight-bold {
  font-weight: 700;
}

.lc {
  text-transform: initial;
}

.uc {
  text-transform: uppercase;
}

.large {
  font-size: 1.2rem;
  line-height: 125%;
}

@media screen and (min-width: 1000px) {
  .large {
    line-height: 125%;
  }
}
.small {
  font-size: 80%;
}

::-moz-selection {
  color: #fff;
  background: #57ABB9;
}

::selection {
  color: #fff;
  background: #57ABB9;
}

.bold {
  font-weight: 700;
}

.medium {
  font-weight: 500;
}

.center {
  text-align: center;
}

a:focus {
  outline: 2px solid;
  outline-offset: 0.2rem;
}

/*Captions*/
.image-caption.small {
  font-size: 1rem !important;
  line-height: 1.8rem !important;
}

/* Elements
--------------------------------------------- */
:root {
  --header-height: 4rem;
  --header-height-min: 4rem;
  --margin: 8vw;
  --transition: 400ms;
}

@media (prefers-reduced-motion) {
  :root {
    --transition: 0ms;
  }
}
@media screen and (min-width: 700px) {
  :root {
    --margin: 10vw;
  }
}
@media screen and (min-width: 1000px) {
  :root {
    --margin: 10vw;
  }
}
@media screen and (min-width: 1200px) {
  :root {
    --margin: 6vw;
    --header-height: 6rem;
    --nav-padding: 6vw;
  }
}
@media screen and (min-width: 1800px) {
  :root {
    --margin: calc((100vw - 1640px) / 2);
  }
}
.grecaptcha-badge {
  display: none !important;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-height);
}

html,
body {
  width: 100vw;
  overflow-x: hidden;
}

body {
  background-color: #fff;
  color: #0E1B2F;
}

.scroll_lock,
.scrolly_lock,
.scroll-lock {
  overflow: hidden;
}

table {
  margin: 0 0 1.5em;
  width: 100%;
}

/* Make sure embeds and iframes fit their containers. */
embed,
iframe,
object {
  max-width: 100%;
}

img {
  height: auto;
  max-width: 100%;
}

figure {
  margin: 1em 0;
}

/*Lists*/
ul,
ol {
  margin: 0 0 1.5em 0;
}

ul {
  list-style: disc;
}

ol {
  list-style: decimal;
}

li > ul,
li > ol {
  margin-bottom: 0;
  margin-left: 1.5em;
}

dt {
  font-weight: 700;
}

dd {
  margin: 0 1.5em 1.5em;
}

/*Links*/
a {
  color: #550C2F;
  text-decoration-thickness: 0.05em;
  transition: text-decoration-thickness var(--transition) ease, color var(--transition) ease;
  text-underline-offset: 0.25em;
}
a:visited {
  color: #57ABB9;
}
a.white:visited {
  color: #fff;
}
a:hover, a:focus, a:active {
  text-decoration-thickness: 0.1em;
}
a:hover, a:active {
  outline: 0;
}
a:focus {
  outline: none;
}
a:focus-visible {
  outline: 1px solid;
  border-radius: 10px;
}

/*Input Fields*/
input[type=text],
input[type=email],
input[type=url],
input[type=password],
input[type=search],
input[type=number],
input[type=tel],
input[type=range],
input[type=date],
input[type=month],
input[type=week],
input[type=time],
input[type=datetime],
input[type=datetime-local],
input[type=color],
textarea {
  color: #1a1a1a;
  border: 1px solid #f8f8f8;
  border-radius: 0;
  padding: 0.5rem 1rem;
  transition: border var(--transition) ease;
  margin-bottom: 1rem;
}
input[type=text]:focus,
input[type=email]:focus,
input[type=url]:focus,
input[type=password]:focus,
input[type=search]:focus,
input[type=number]:focus,
input[type=tel]:focus,
input[type=range]:focus,
input[type=date]:focus,
input[type=month]:focus,
input[type=week]:focus,
input[type=time]:focus,
input[type=datetime]:focus,
input[type=datetime-local]:focus,
input[type=color]:focus,
textarea:focus {
  outline: 1px solid #550C2F;
}
input[type=text]::placeholder,
input[type=email]::placeholder,
input[type=url]::placeholder,
input[type=password]::placeholder,
input[type=search]::placeholder,
input[type=number]::placeholder,
input[type=tel]::placeholder,
input[type=range]::placeholder,
input[type=date]::placeholder,
input[type=month]::placeholder,
input[type=week]::placeholder,
input[type=time]::placeholder,
input[type=datetime]::placeholder,
input[type=datetime-local]::placeholder,
input[type=color]::placeholder,
textarea::placeholder {
  color: #0E1B2F;
}

label {
  display: block;
}

select {
  color: #1a1a1a;
  border: 1px solid #0E1B2F;
  border-radius: 10px;
  padding: 0.75rem 3rem 0.75rem 1rem;
  max-width: 100%;
  font-weight: 400;
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  background-color: #fff;
  background-image: url(../assets/down_arrow.svg);
  background-size: 1rem;
  background-repeat: no-repeat;
  background-position: right 1rem center;
}

/* For IE (thanks to @SaiManoj) */
textarea {
  width: 100%;
}

/*Buttons*/
button,
input[type=button],
input[type=reset],
input[type=submit],
.button,
.decorative {
  background: #550C2F;
  color: #fff;
  display: block;
  text-align: left;
  padding: 0.6rem 1rem;
  line-height: 1;
  text-decoration: none;
  border: none;
  border-radius: 0;
  text-transform: none;
  font-weight: 500;
  letter-spacing: 0.05em;
  transition: text-decoration 400ms ease;
  cursor: pointer;
}
button .unset-button,
input[type=button] .unset-button,
input[type=reset] .unset-button,
input[type=submit] .unset-button,
.button .unset-button,
.decorative .unset-button {
  background: none;
  color: currentColor;
  display: inline;
  padding: 0;
}
button.bg_white,
input[type=button].bg_white,
input[type=reset].bg_white,
input[type=submit].bg_white,
.button.bg_white,
.decorative.bg_white {
  background: #fff;
  transition: background var(--transition) ease-in, color var(--transition) ease-in, border var(--transition) ease-in;
}
button.bg_white:hover,
input[type=button].bg_white:hover,
input[type=reset].bg_white:hover,
input[type=submit].bg_white:hover,
.button.bg_white:hover,
.decorative.bg_white:hover {
  background: #550C2F;
  border: #550C2F 1px solid;
  color: #fff;
}
button.bg_transparent,
button .bg-transparent,
button .bg_none,
button .bg-none,
input[type=button].bg_transparent,
input[type=button] .bg-transparent,
input[type=button] .bg_none,
input[type=button] .bg-none,
input[type=reset].bg_transparent,
input[type=reset] .bg-transparent,
input[type=reset] .bg_none,
input[type=reset] .bg-none,
input[type=submit].bg_transparent,
input[type=submit] .bg-transparent,
input[type=submit] .bg_none,
input[type=submit] .bg-none,
.button.bg_transparent,
.button .bg-transparent,
.button .bg_none,
.button .bg-none,
.decorative.bg_transparent,
.decorative .bg-transparent,
.decorative .bg_none,
.decorative .bg-none {
  background: transparent;
  transition: background var(--transition) ease-in, color var(--transition) ease-in;
}
button.bg_transparent:hover,
button .bg-transparent:hover,
button .bg_none:hover,
button .bg-none:hover,
input[type=button].bg_transparent:hover,
input[type=button] .bg-transparent:hover,
input[type=button] .bg_none:hover,
input[type=button] .bg-none:hover,
input[type=reset].bg_transparent:hover,
input[type=reset] .bg-transparent:hover,
input[type=reset] .bg_none:hover,
input[type=reset] .bg-none:hover,
input[type=submit].bg_transparent:hover,
input[type=submit] .bg-transparent:hover,
input[type=submit] .bg_none:hover,
input[type=submit] .bg-none:hover,
.button.bg_transparent:hover,
.button .bg-transparent:hover,
.button .bg_none:hover,
.button .bg-none:hover,
.decorative.bg_transparent:hover,
.decorative .bg-transparent:hover,
.decorative .bg_none:hover,
.decorative .bg-none:hover {
  background: #fff;
  color: #57ABB9;
}

.buttons {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 0.5rem;
}

button[disabled] {
  opacity: 0.3;
  cursor: default;
}

.tiny {
  font-size: 0.75rem;
}
@media screen and (min-width: 1000px) {
  .tiny {
    font-size: 1rem;
  }
}

/*Details*/
details {
  padding: 1rem 0;
  border-top: 1px solid #57ABB9;
  -webkit-user-select: none;
  user-select: none;
  /*This is to stop margins overflowing and messing up the calculations on the animation */
}
details > summary {
  list-style: none;
  position: relative;
  color: #57ABB9;
  font-size: 1.2rem;
  font-weight: 700;
  margin-bottom: 1rem;
}
details > summary:hover {
  cursor: pointer;
}
details > summary::after {
  content: "";
  position: absolute;
  top: 0.2rem;
  right: 0;
  width: 22px;
  height: 22px;
  transition: transform var(--transition) ease-in;
  transform-origin: center center;
  line-height: 0;
  background-image: url(../assets/down_arrow.svg);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center center;
}
details > summary h4 {
  margin-bottom: 0;
  margin-right: 2rem;
}
details > summary h3 {
  margin-right: 2rem;
}
details .panel {
  padding: 1px 0;
}

summary::-webkit-details-marker {
  display: none;
}

details.open {
  /*  .content {
     filter:opacity(1) blur(0);
   } */
}
details.open > summary::after {
  transform: rotate(180deg);
}

h3 ~ details {
  margin-bottom: 0.5rem;
}

@media screen and (min-width: 1200px) {
  .mobile-only {
    display: none;
  }
}
@media screen and (min-width: 1200px) {
  .mobile_only {
    display: none !important;
  }
}
@media screen and (min-width: 1000px) and (orientation: landscape) {
  .mobile_only.tablet {
    display: none !important;
  }
}

@media screen and (max-width: 1199px) {
  .desktop_only {
    display: none !important;
  }
}
@media screen and (min-width: 1000px) and (orientation: landscape) {
  .desktop_only.tablet {
    display: block !important;
  }
}

p.caption {
  font-size: 0.875rem;
}

figure {
  margin-bottom: 0;
}

/*HoneyPot*/
input#hp {
  display: none;
}

.hide {
  display: none;
}

@media screen and (min-width: 1200px) {
  .half_margin {
    margin-left: calc(var(--margin) / 2);
    margin-right: calc(var(--margin) / 2);
  }
}
@media screen and (min-width: 1200px) {
  .half_margin.margins {
    margin-left: calc(var(--margin) / 2);
    margin-right: calc(var(--margin) / 2);
  }
}

@media screen and (min-width: 1200px) {
  .half_padding {
    padding-left: calc(var(--margin) / 2);
    padding-right: calc(var(--margin) / 2);
  }
}
@media screen and (min-width: 1200px) {
  .half_padding.padding {
    padding-left: calc(var(--margin) / 2);
    padding-right: calc(var(--margin) / 2);
  }
}

dt {
  font-weight: 500;
}

dd {
  margin: 0;
}

dl {
  margin-bottom: 1rem;
}

.ubuntu {
  font-family: "Ubuntu", sans-serif;
}

/*Colors & bgs*/
#page {
  background: #fff;
}

.black {
  color: #0E1B2F;
}

.charcoal {
  color: #0E1B2F;
}

.body {
  color: #1a1a1a;
}

.white {
  color: #fff;
}

.primary {
  color: #550C2F;
}

.burgundy {
  color: #550C2F;
}

.secondary {
  color: #57ABB9;
}

.aqua {
  color: #57ABB9;
}

.dark_grey {
  color: #606060;
}

.lime {
  color: #C3BC32;
}

.maroon {
  color: #782B50;
}

.red {
  color: #6C123B;
}

.pink {
  color: #DDA2C1;
}

.bg-black,
.bg_black {
  background-color: #0E1B2F;
}
.bg-charcoal,
.bg_charcoal {
  background-color: #0E1B2F;
}
.bg-bg,
.bg_bg {
  background-color: #fff;
}
.bg-white,
.bg_white {
  background-color: #fff;
}
.bg-grey,
.bg_grey {
  background-color: #f8f8f8;
}
.bg-primary,
.bg_primary {
  background-color: #550C2F;
}
.bg-burgundy,
.bg_burgundy {
  background-color: #550C2F;
}
.bg-secondary,
.bg_secondary {
  background-color: #57ABB9;
}
.bg-aqua,
.bg_aqua {
  background-color: #57ABB9;
}
.bg-lime,
.bg_lime {
  background-color: #C3BC32;
}
.bg-maroon,
.bg_maroon {
  background-color: #782B50;
}
.bg-red,
.bg_red {
  background-color: #6C123B;
}
.bg-pink,
.bg_pink {
  background-color: #DDA2C1;
}

.error {
  color: #a01313;
}

.border_primary,
.border-primary {
  border: #550C2F 1px solid;
}
.border_secondary,
.border-secondary {
  border: #57ABB9 1px solid;
}
.border_white,
.border-white {
  border: #fff 1px solid;
}

.shadow_pink {
  box-shadow: 5px 5px 0 #DDA2C1;
}
.shadow_aqua {
  box-shadow: 5px 5px 0 #57ABB9;
  transition: box-shadow var(--transition);
}
.shadow_lime {
  box-shadow: 5px 5px 0 #C3BC32;
}
.shadow_maroon {
  box-shadow: 5px 5px 0 #782B50;
}
.shadow_red {
  box-shadow: 5px 5px 0 #6C123B;
}
.shadow_burgundy {
  box-shadow: 5px 5px 0 #550C2F;
}

.fill_pink {
  fill: #DDA2C1;
}
.fill_pink path, .fill_pink rect, .fill_pink circle {
  fill: #DDA2C1;
}
.fill_aqua {
  fill: #57ABB9;
}
.fill_aqua path, .fill_aqua rect, .fill_aqua circle {
  fill: #57ABB9;
}
.fill_lime {
  fill: #C3BC32;
}
.fill_lime path, .fill_lime rect, .fill_lime circle {
  fill: #C3BC32;
}
.fill_maroon {
  fill: #782B50;
}
.fill_maroon path, .fill_maroon rect, .fill_maroon circle {
  fill: #782B50;
}
.fill_red {
  fill: #6C123B;
}
.fill_red path, .fill_red rect, .fill_red circle {
  fill: #6C123B;
}
.fill_burgundy {
  fill: #550C2F;
}
.fill_burgundy path, .fill_burgundy rect, .fill_burgundy circle {
  fill: #550C2F;
}
.fill_charcoal {
  fill: #0E1B2F;
}
.fill_charcoal path, .fill_charcoal rect, .fill_charcoal circle {
  fill: #0E1B2F;
}
.fill_white {
  fill: #fff;
}
.fill_white path, .fill_white rect, .fill_white circle {
  fill: #fff;
}

.active .shadow_aqua {
  box-shadow: 10px 10px 0 #57ABB9;
}

.wave_charcoal_small {
  position: relative;
}
.wave_charcoal_small::after {
  content: "";
  background-color: #0E1B2F;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  mask-image: url("../assets/masks/wave_small.svg");
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: bottom right;
}
.wave_charcoal_medium {
  position: relative;
}
.wave_charcoal_medium::after {
  content: "";
  background-color: #0E1B2F;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  mask-image: url("../assets/masks/wave_medium.svg");
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: bottom right;
}
.wave_charcoal {
  position: relative;
}
.wave_charcoal::after {
  content: "";
  background-color: #0E1B2F;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  mask-image: url("../assets/masks/wave.svg");
  mask-size: 100% auto;
  mask-repeat: no-repeat;
}
.wave_pink {
  position: relative;
}
.wave_pink::after {
  content: "";
  background-color: #DDA2C1;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  mask-image: url("../assets/masks/wave.svg");
  mask-size: 100% auto;
  mask-repeat: no-repeat;
}
.wave_aqua {
  position: relative;
}
.wave_aqua::after {
  content: "";
  background-color: #57ABB9;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  mask-image: url("../assets/masks/wave.svg");
  mask-size: 100% auto;
  mask-repeat: no-repeat;
}
.wave_lime {
  position: relative;
}
.wave_lime::after {
  content: "";
  background-color: #C3BC32;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  mask-image: url("../assets/masks/wave.svg");
  mask-size: 100% auto;
  mask-repeat: no-repeat;
}
.wave_maroon {
  position: relative;
}
.wave_maroon::after {
  content: "";
  background-color: #782B50;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  mask-image: url("../assets/masks/wave.svg");
  mask-size: 100% auto;
  mask-repeat: no-repeat;
}
.wave_red {
  position: relative;
}
.wave_red::after {
  content: "";
  background-color: #6C123B;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  mask-image: url("../assets/masks/wave.svg");
  mask-size: 100% auto;
  mask-repeat: no-repeat;
}
.wave_burgundy {
  position: relative;
}
.wave_burgundy::after {
  content: "";
  background-color: #550C2F;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  mask-image: url("../assets/masks/wave.svg");
  mask-size: 100% auto;
  mask-repeat: no-repeat;
}

:where(.wave_pink > *, .wave_aqua > *, .wave_lime > *, .wave_maroon > *, .wave_red > *, .wave_burgundy > *, .wave_charcoal > *) {
  position: relative;
  z-index: 1;
}

.piano_keys {
  background-color: #C3BC32;
  background-image: url(/wp-content/themes/karoo/assets/pianokeys_m.svg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: top left;
}
@media screen and (min-width: 1000px) {
  .piano_keys {
    background-image: url(/wp-content/themes/karoo/assets/pianokeys.svg);
    background-position: -40% 0%;
  }
}
@media screen and (min-width: 1200px) {
  .piano_keys {
    background-position: top left;
  }
}
.piano_keys.padding {
  padding-top: 5rem;
}
@media screen and (min-width: 1000px) {
  .piano_keys.padding {
    padding-top: 2rem;
  }
}

/*Proportional Images*/
.container.container--square {
  position: relative;
  width: 100%;
  overflow: hidden;
}
@supports (aspect-ratio: 16/9) {
  .container.container--square {
    aspect-ratio: 1;
  }
}
@supports not (aspect-ratio: 16/9) {
  .container.container--square {
    padding-top: 100%;
    height: 0;
  }
}
.container.container--round {
  border-radius: 50%;
  position: relative;
  width: 100%;
  overflow: hidden;
}
@supports (aspect-ratio: 16/9) {
  .container.container--round {
    aspect-ratio: 1;
  }
}
@supports not (aspect-ratio: 16/9) {
  .container.container--round {
    padding-top: 100%;
    height: 0;
  }
}
.container.container--sixteennine {
  position: relative;
  width: 100%;
  overflow: hidden;
}
@supports (aspect-ratio: 16/9) {
  .container.container--sixteennine {
    aspect-ratio: 1.7777777778;
  }
}
@supports not (aspect-ratio: 16/9) {
  .container.container--sixteennine {
    padding-top: 56.25%;
    height: 0;
  }
}
.container.container--fourthree {
  position: relative;
  width: 100%;
  overflow: hidden;
}
@supports (aspect-ratio: 16/9) {
  .container.container--fourthree {
    aspect-ratio: 1.3333333333;
  }
}
@supports not (aspect-ratio: 16/9) {
  .container.container--fourthree {
    padding-top: 75%;
    height: 0;
  }
}
.container.container--twentyonenine {
  position: relative;
  width: 100%;
  overflow: hidden;
}
@supports (aspect-ratio: 16/9) {
  .container.container--twentyonenine {
    aspect-ratio: 2.3333333333;
  }
}
@supports not (aspect-ratio: 16/9) {
  .container.container--twentyonenine {
    padding-top: 42.85%;
    height: 0;
  }
}
.container.container--fivefour {
  position: relative;
  width: 100%;
  overflow: hidden;
}
@supports (aspect-ratio: 16/9) {
  .container.container--fivefour {
    aspect-ratio: 1.25;
  }
}
@supports not (aspect-ratio: 16/9) {
  .container.container--fivefour {
    padding-top: 80%;
    height: 0;
  }
}
.container.container--fourfive {
  position: relative;
  width: 100%;
  overflow: hidden;
}
@supports (aspect-ratio: 16/9) {
  .container.container--fourfive {
    aspect-ratio: 0.8;
  }
}
@supports not (aspect-ratio: 16/9) {
  .container.container--fourfive {
    padding-top: 125%;
    height: 0;
  }
}
.container.container--twothree {
  position: relative;
  width: 100%;
  overflow: hidden;
}
@supports (aspect-ratio: 16/9) {
  .container.container--twothree {
    aspect-ratio: 0.6666666667;
  }
}
@supports not (aspect-ratio: 16/9) {
  .container.container--twothree {
    padding-top: 150%;
    height: 0;
  }
}
.container.container--threetwo {
  position: relative;
  width: 100%;
  overflow: hidden;
}
@supports (aspect-ratio: 16/9) {
  .container.container--threetwo {
    aspect-ratio: 1.5;
  }
}
@supports not (aspect-ratio: 16/9) {
  .container.container--threetwo {
    padding-top: 66%;
    height: 0;
  }
}
.container.container--threeone {
  position: relative;
  width: 100%;
  overflow: hidden;
}
@supports (aspect-ratio: 16/9) {
  .container.container--threeone {
    aspect-ratio: 1.2;
  }
}
@supports not (aspect-ratio: 16/9) {
  .container.container--threeone {
    padding-top: 80%;
    height: 0;
  }
}
@media screen and (min-width: 1000px) {
  .container.container--threeone {
    position: relative;
    width: 100%;
    overflow: hidden;
  }
  @supports (aspect-ratio: 16/9) {
    .container.container--threeone {
      aspect-ratio: 3;
    }
  }
  @supports not (aspect-ratio: 16/9) {
    .container.container--threeone {
      padding-top: 33%;
      height: 0;
    }
  }
}
.container.container--video {
  overflow: visible;
}
.container.container--karoo {
  position: relative;
  width: 100%;
  overflow: hidden;
}
@supports (aspect-ratio: 16/9) {
  .container.container--karoo {
    aspect-ratio: 1.1489361702;
  }
}
@supports not (aspect-ratio: 16/9) {
  .container.container--karoo {
    padding-top: 87%;
    height: 0;
  }
}
.container.container--banner {
  position: relative;
  width: 100%;
  overflow: hidden;
}
@supports (aspect-ratio: 16/9) {
  .container.container--banner {
    aspect-ratio: 1.25;
  }
}
@supports not (aspect-ratio: 16/9) {
  .container.container--banner {
    padding-top: 80;
    height: 0;
  }
}
@media screen and (min-width: 1000px) {
  .container.container--banner {
    position: relative;
    width: 100%;
    overflow: hidden;
  }
  @supports (aspect-ratio: 16/9) {
    .container.container--banner {
      aspect-ratio: 1;
    }
  }
  @supports not (aspect-ratio: 16/9) {
    .container.container--banner {
      padding-top: 100%;
      height: 0;
    }
  }
}
.container img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 35%;
}
.container.container--max-height {
  height: 375px;
  width: fit-content;
  position: static;
}
.container.container--max-height img {
  height: 100%;
  width: auto;
  position: static;
  max-width: calc(100vw - 2 * var(--margin));
  object-fit: contain;
}
.container.contain img {
  object-fit: contain;
}

.cover img {
  width: 100%;
  height: auto;
}

.block:has(.container--banner) {
  padding-top: 0;
  padding-bottom: 0;
}

@media screen and (min-width: 1000px) {
  .container.container--banner {
    /* max-height: 102dvh; */
    min-height: 100%;
  }
}
@media screen and (min-width: 1200px) {
  .container.container--banner {
    max-height: 70dvh;
  }
}

.type-event .container.container--banner {
  position: relative;
  width: 100%;
  overflow: hidden;
}
@supports (aspect-ratio: 16/9) {
  .type-event .container.container--banner {
    aspect-ratio: 1.5;
  }
}
@supports not (aspect-ratio: 16/9) {
  .type-event .container.container--banner {
    padding-top: 66;
    height: 0;
  }
}
@media screen and (min-width: 1000px) {
  .type-event .container.container--banner {
    position: relative;
    width: 100%;
    overflow: hidden;
  }
  @supports (aspect-ratio: 16/9) {
    .type-event .container.container--banner {
      aspect-ratio: 1;
    }
  }
  @supports not (aspect-ratio: 16/9) {
    .type-event .container.container--banner {
      padding-top: 100%;
      height: 0;
    }
  }
}

/*responsive padding and margins*/
.margins {
  margin: 1rem var(--margin);
}
@media screen and (min-width: 1200px) {
  .margins {
    margin: 2rem var(--margin) 3rem;
  }
}

.padding {
  padding: 2rem var(--margin) 2rem;
}
@media screen and (min-width: 1200px) {
  .padding {
    padding: 2rem var(--margin) 3rem;
  }
}

.double_padding {
  padding-left: var(--margin);
  padding-right: var(--margin);
}
@media screen and (min-width: 1000px) {
  .double_padding {
    padding-left: calc(var(--margin) * 2);
    padding-right: calc(var(--margin) * 2);
  }
}

.padding.padding--half {
  padding: 4rem var(--margin);
}
@media screen and (min-width: 1200px) {
  .padding.padding--half {
    padding: 4rem calc(var(--margin) / 2);
  }
}

.inner-padding {
  padding: 2rem;
}

@media screen and (min-width: 1200px) {
  :is(.banner) .inner-padding, :is(.donations) .inner-padding {
    padding: 4rem;
  }
}
.margin-left {
  margin-left: var(--margin);
}

.margin-right {
  margin-right: var(--margin);
}

@media screen and (min-width: 1000px) {
  .padding-left, .padding_left {
    padding-left: var(--margin);
  }
}

@media screen and (min-width: 1000px) {
  .padding-right, .padding_right {
    padding-right: var(--margin);
  }
}

.max-width {
  max-width: 780px;
  margin-left: auto;
  margin-right: auto;
}

/*Grid and Flex*/
.grid {
  display: grid;
}

.grid--two-column.margins .padding {
  padding-left: 0;
  padding-right: 0;
}
.grid--two-column.margins .margins {
  margin-left: 0;
  margin-right: 0;
}

.flex {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.flex.flex_50 > .flex_item, .flex.flex_50 > .flex--item {
  flex-basis: 100%;
}
.flex.flex_66-33 > .flex_item, .flex.flex_33 > .flex_item {
  flex-basis: 100%;
}
.flex.flex_25 > .flex_item {
  flex-basis: 100%;
}
.flex.flex_20 {
  justify-content: start;
  gap: 2%;
}
.flex.flex_20 > .flex_item {
  flex-basis: 48%;
}
.flex.flex_25-75 > .flex_item {
  flex-basis: 100%;
}

@media screen and (min-width: 700px) {
  .flex.flex_50 > .flex_item, .flex.flex_50 > .flex--item {
    flex-basis: calc(50% - 2rem);
  }
  .flex.flex_33 {
    flex-wrap: wrap;
  }
  .flex.flex_33 > .flex_item {
    flex-basis: calc(33% - 1.66rem);
  }
  .flex.flex_33::after {
    content: "";
    flex-basis: calc(33% - 1.66rem);
  }
  .flex.flex_25 > .flex_item {
    flex-basis: 48%;
  }
  .flex.flex_20 > .flex_item {
    flex-basis: 18%;
  }
}
@media screen and (min-width: 1000px) {
  .flex.flex_66-33 > .flex_item {
    flex-basis: 67%;
  }
  .flex.flex_66-33 > .flex_item:nth-child(2n) {
    flex-basis: 33%;
  }
  .flex.flex_25 {
    gap: 2.5%;
  }
  .flex.flex_25::after {
    content: "";
    flex-grow: 1;
  }
  .flex.flex_25 > .flex_item {
    flex-basis: 23%;
  }
  .flex.flex_25-75 .flex_item:nth-child(1) {
    flex-basis: 25%;
    margin-right: 2rem;
  }
  .flex.flex_25-75 .flex_item:nth-child(2) {
    flex-basis: calc(75% - 2rem);
  }
}
@media screen and (min-width: 1200px) {
  .flex.flex_66-33 > .flex_item {
    flex-basis: 55%;
  }
  .flex.flex_66-33 > .flex_item:nth-child(2n) {
    flex-basis: 33%;
  }
}
.fixed {
  position: fixed;
  top: 0;
}

.karoo {
  mask: url(../assets/karoo.svg) no-repeat center center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.wave {
  text-decoration: none;
  position: relative;
}
.wave::after {
  content: "";
  position: absolute;
  bottom: -0.75rem;
  left: 0;
  width: 100%;
  height: 0.75rem;
  background-image: url(../assets/wave.svg);
  background-repeat: repeat-x;
  background-size: 3rem 0.75rem;
  transition: all calc(var(--transition) * 2) ease-in-out;
}
.wave:hover::after {
  background-position: 20px 0;
  background-size: 4rem 0.75rem;
}
.wave.white::after {
  background-image: url(../assets/wave_white.svg);
}
.wave.burgundy::after {
  background-image: url(../assets/wave_burgundy.svg);
}
.wave.pink::after {
  background-image: url(../assets/wave_pink.svg);
}
.wave.aqua::after {
  background-image: url(../assets/wave_aqua.svg);
}

.colourise img {
  mix-blend-mode: luminosity;
  filter: grayscale(1);
}
.colourise.colourise_maroon {
  background: #782B50;
}
.colourise.colourise_aqua {
  background: #57ABB9;
}
.colourise.colourise_charcoal {
  background: #0E1B2F;
}
.colourise.colourise_lime {
  background: #C3BC32;
}

.down_arrow a {
  padding-right: 2rem;
  position: relative;
  display: block;
  font-size: 1.2rem;
  width: fit-content;
  margin: 0 auto;
}
.down_arrow a::after {
  content: "";
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  width: 1rem;
  height: 1.2rem;
  background-image: url(../assets/down_arrow_link.svg);
  background-repeat: no-repeat;
  background-position: top center;
  background-size: contain;
}
.down_arrow a:hover::after, .down_arrow a:focus::after {
  animation: bounce calc(2 * var(--transition)) linear 0ms 1;
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-10px);
  }
  60% {
    transform: translateY(-5px);
  }
}
/*--------------------------------------------------------------

/*--------------------------------------------------------------
# Components
--------------------------------------------------------------*/
/* Navigation
--------------------------------------------- */
/*Header*/
header#masthead {
  height: var(--header-height);
  position: absolute;
  width: 100vw;
  max-width: 100vw;
  top: 0;
  padding: 0;
  z-index: 100;
  color: #550C2F;
  background-color: #550C2F;
  background-image: url("../assets/masks/wave_nav.svg");
  background-position: bottom right;
  background-repeat: no-repeat;
  transition: padding var(--transition) ease, margin var(--transition) ease;
}
@media screen and (min-width: 1200px) {
  header#masthead {
    display: grid;
    padding-top: 0;
    position: absolute;
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.1);
  }
}
header#masthead.addFixed {
  position: fixed;
  transform: translate3d(0, -100%, 0);
  transition: padding 0ms ease;
}
header#masthead.slideOut {
  transition: transform 600ms ease-in;
  transform: translate3d(0, -100%, 0);
  position: fixed;
  background-color: #550C2F;
}
header#masthead.slideOut.slideInDown {
  transform: translate3d(0, 0, 0);
  position: fixed;
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.2);
  background: #550C2F;
}
header#masthead.slideOut.slideInDown::before {
  display: none;
}
header#masthead svg path {
  fill: #fff;
}

.logo svg {
  width: 275px;
  max-width: 70vw;
}
@media screen and (min-width: 1200px) {
  .logo svg {
    width: 375px;
  }
}

.nav-utilites--desktop a.list_link {
  color: #550C2F;
  text-decoration: none;
  font-weight: 500;
  font-size: 1.5rem;
  width: fit-content;
  position: relative;
}
@media screen and (min-width: 1200px) {
  .nav-utilites--desktop a.list_link {
    font-size: clamp(1rem, 1.3vw, 1.125rem);
  }
}
.nav-utilites--desktop a.list_link::after {
  content: "";
  position: absolute;
  height: 2px;
  width: 100%;
  background-color: #550C2F;
  bottom: 0;
  left: 0;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--transition) ease-in;
}
.nav-utilites--desktop a.list_link:hover::after {
  transform: scaleX(1);
}

/*This sets padding on everypage to account for the absolute positioned header*/
#primary {
  transition: padding var(--transition) ease;
  padding-top: var(--header-height);
  background: #fff;
}

/*and this to stop the white space forming when admin bar is on*/
#wpadminbar + #page {
  margin-top: -32px;
}

.main-navigation {
  display: flex;
  justify-content: center;
  width: 100vw;
  position: absolute;
  top: 100%;
  left: 0;
  background: #6C123B;
  padding-top: clamp(2rem, 3vw, 4rem);
  padding-bottom: 7.2rem;
  height: auto;
  color: #fff;
  text-align: center;
  transform: translateY(-150%);
  transition: transform var(--move-transition) ease-in;
  z-index: -1;
  max-height: calc(var(--vh) * 100 - (var(--header-height)) + 1px);
  min-height: calc(var(--vh) * 100 - (var(--header-height)) + 1px);
}
@supports (height: 100dvh) {
  .main-navigation {
    max-height: calc(100dvh - (var(--header-height)) + 1px);
    min-height: calc(100dvh - (var(--header-height)) + 1px);
    overflow: auto;
  }
}
@media screen and (min-width: 1200px) {
  .main-navigation {
    height: calc(var(--vh) * 100 - var(--header-height) + 1px);
    max-height: calc(var(--vh) * 100 - var(--header-height) + 1px);
    min-height: calc(var(--vh) * 100 - var(--header-height) + 1px);
  }
  @supports (height: 100dvh) {
    .main-navigation {
      max-height: calc(100dvh - (var(--header-height)) + 1px);
      min-height: calc(100dvh - (var(--header-height)) + 1px);
      height: calc(100dvh - (var(--header-height)) + 1px);
    }
  }
}
.main-navigation.toggled {
  transform: translate(0, 0);
  justify-content: flex-start;
  padding-left: var(--margin);
  padding-right: var(--margin);
}
.main-navigation.toggled #primary-menu-mobile {
  align-items: start;
}
.main-navigation ul {
  list-style: none;
  margin: 0;
  padding-left: 0;
}
.main-navigation a {
  display: block;
  text-decoration: none;
}

:has(.home-video):has(.main-navigation.toggled) #masthead, :has(.home-banner):has(.main-navigation.toggled) #masthead {
  background-color: #550C2F;
  background-image: url(../assets/masks/wave_nav.svg);
}
:has(.home-video):has(.main-navigation.toggled) #masthead .logo, :has(.home-banner):has(.main-navigation.toggled) #masthead .logo {
  visibility: visible;
}

.main-navigation-inner {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: fit-content;
}
.main-navigation-inner > .text_sizer {
  margin-bottom: 1rem;
}
.main-navigation-inner > .social_media_wrapper {
  margin: 4rem 0;
}

#primary-menu, #primary-menu-mobile {
  display: flex;
  flex-direction: column;
  align-items: center;
  row-gap: 0.5rem;
  max-width: 95vw;
  margin: 0 auto;
}
#primary-menu li a, #primary-menu-mobile li a {
  color: #fff;
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 125%;
  transition: color var(--transition) ease-in;
  position: relative;
  margin-bottom: 0.5rem;
}
#primary-menu li a::after, #primary-menu-mobile li a::after {
  content: "";
  position: absolute;
  height: 2px;
  width: 100%;
  background-color: #550C2F;
  bottom: 0;
  left: 0;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--transition) ease-in;
}
#primary-menu li a:hover::after, #primary-menu-mobile li a:hover::after {
  transform: scaleX(1);
}
@media screen and (min-width: 1200px) {
  #primary-menu li a, #primary-menu-mobile li a {
    font-size: 2rem;
  }
}
@media (forced-colors: active) {
  #primary-menu li a, #primary-menu-mobile li a {
    text-decoration: underline;
  }
  #primary-menu li a:hover, #primary-menu-mobile li a:hover {
    text-decoration-thickness: 0.3em;
  }
}

.main-navigation.toggled .main-navigation-inner #primary-menu li a {
  color: #550C2F;
}

@media screen and (max-width: 400px) {
  #primary-menu li a {
    font-size: 1.5rem;
    line-height: 2.2rem;
    text-align: left;
  }
}
@media screen and (min-width: 1200px) {
  #primary-menu {
    width: 100%;
  }
  #primary-menu li a {
    text-transform: uppercase;
    padding-bottom: 1rem;
    font-size: clamp(1rem, 1.3vw, 1.125rem);
    margin-bottom: 1rem;
    text-decoration: none;
    font-family: "Ubuntu", sans-serif;
  }
}
@media screen and (min-width: 1400px) {
  #primary-menu li a {
    font-size: 1.5rem;
  }
}
@media screen and (min-width: 1600px) {
  #primary-menu li a {
    font-size: 1.5rem;
  }
}
.hamburger_container {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  height: fit-content;
  grid-row: 1/3;
  grid-column: 3/4;
}
.hamburger_container label {
  color: #fff;
}

#hamburger {
  position: relative;
  background: transparent;
  transition: top var(--transition) ease;
  z-index: 10;
  width: fit-content;
  height: 40px;
  display: grid;
  justify-content: center;
  align-items: center;
  grid-template-columns: 20px auto;
}
@media screen and (min-width: 1200px) {
  #hamburger {
    align-content: center;
  }
}
#hamburger .menu_open {
  display: none;
}
#hamburger.is-active {
  outline: #C3BC32 3px solid;
}
#hamburger.is-active .menu_open {
  display: inline;
}
#hamburger.is-active .menu_closed {
  display: none;
}

.hamburger.close-modal {
  position: absolute;
  left: 50%;
  transform: translateX(-60%);
  top: var(--header-height);
  background: transparent;
}

.hamburger {
  padding: 5px;
  display: inline-block;
  cursor: pointer;
  transition-property: opacity, filter;
  transition-duration: calc(var(--transition) / 2);
  transition-timing-function: linear;
  font: inherit;
  color: #fff;
  text-transform: none;
  background-color: transparent;
  border: 0;
  margin: 0;
  overflow: visible;
  /*   &.is-active::before {
     color: $color_white;
     content: "Close";
   } */
}

@media screen and (min-width: 1200px) {
  .hamburger:hover .hamburger-inner,
  .hamburger:hover .hamburger-inner::before,
  .hamburger:hover .hamburger-inner::after {
    background-color: #fff;
  }
  .hamburger:hover span {
    text-decoration: underline;
    text-underline-offset: 0.2em;
    text-decoration-thickness: 2px;
    color: #fff;
  }
  .hamburger.is-active:hover .hamburger-inner,
  .hamburger.is-active:hover .hamburger-inner::before,
  .hamburger.is-active:hover .hamburger-inner::after {
    background-color: #C3BC32;
  }
}
.hamburger.is-active .hamburger-inner,
.hamburger.is-active .hamburger-inner::before,
.hamburger.is-active .hamburger-inner::after {
  background-color: #C3BC32;
}

.hamburger-box {
  width: 22.4px;
  height: 18px;
  display: inline-block;
  position: relative;
}

.hamburger-inner {
  display: block;
  top: 50%;
  margin-top: -2px;
}

.hamburger-inner,
.hamburger-inner::before,
.hamburger-inner::after {
  width: 100%;
  height: 2px;
  background-color: #fff;
  border-radius: 4px;
  position: absolute;
  transition-property: transform;
  transition-duration: calc(var(--transition) / 2);
  transition-timing-function: ease;
}

.hamburger-inner::before,
.hamburger-inner::after {
  content: "";
  display: block;
}

.hamburger-inner::before {
  top: -6px;
}

.hamburger-inner::after {
  bottom: -10px;
}

/*

* Hamburger Collapse

*/
.hamburger--collapse .hamburger-inner {
  top: auto;
  bottom: 0;
  transition-duration: calc(var(--transition) / 2.2);
  transition-duration: calc(var(--transition) / 2.2);
  transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

.hamburger--collapse .hamburger-inner::after {
  top: -12px;
  transition: top calc(var(--transition) / 2) calc(var(--transition) / 2) cubic-bezier(0.33333, 0.66667, 0.66667, 1), opacity calc(var(--transition) / 4) linear;
}

.hamburger--collapse .hamburger-inner::before {
  transition: top calc(var(--transition) / 3) calc(var(--transition) / 2) cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform calc(var(--transition) / 3) cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

.hamburger--collapse.is-active .hamburger-inner {
  transform: translate3d(0, -7px, 0) rotate(-45deg);
  transition-duration: calc(var(--transition) / 1.8);
  transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}

.hamburger--collapse.is-active .hamburger-inner::after {
  top: 0;
  opacity: 0;
  transition: top calc(var(--transition) / 2) cubic-bezier(0.33333, 0, 0.66667, 0.33333), opacity calc(var(--transition) / 4) calc(var(--transition) / 2) linear;
}

.hamburger--collapse.is-active .hamburger-inner::before {
  top: 0;
  transform: rotate(-90deg);
  transition: top calc(var(--transition) / 4) calc(var(--transition) / 3) cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform calc(var(--transition) / 3) calc(var(--transition) / 2) cubic-bezier(0.215, 0.61, 0.355, 1);
}

.header {
  display: flex;
  flex-direction: row;
  width: 100vw;
  justify-content: space-between;
  padding-left: var(--margin);
  padding-right: var(--margin);
  padding-top: 0.75rem;
}
@media screen and (min-width: 1200px) {
  .header {
    padding-top: 1rem;
  }
}

/*Mobile Menu*/
.menu-menu-1-container {
  /* 	//background-color: $color_white;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: vh(98);
  box-shadow: 4px 0 4px rgba(0, 0, 0, 0.15);
  transform: translate(0, -110%);
  transition: transform var(--transition) ease-in;
  padding: 1rem 2rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-content: center;
  flex-direction: column;
  */
  /* 	&::after {
  	content: "";
  	//position: absolute;
  	height: 100%;
  	width: 100vw;
  	//background: $color_black;
  	top: 0;
  	left: 0;
  	z-index: -1;
  	/* 	-webkit-backdrop-filter: blur(15px);
  	backdrop-filter: blur(15px); */
  /* @include media1200 {
  		display: none;
  	} */
  /*} */
}
.menu-menu-1-container .flex.so-me {
  justify-content: center;
  gap: 1rem;
}
@media screen and (min-width: 1200px) {
  .menu-menu-1-container .flex.so-me {
    display: none;
    grid-column: 4/5;
    grid-row: 1/2;
  }
}
.menu-menu-1-container .flex.so-me svg {
  width: 40px;
  height: 40px;
}
.menu-menu-1-container .flex.so-me svg path {
  transition: fill var(--transition) ease-in;
  fill: #fff;
}
.menu-menu-1-container .flex.so-me svg path:hover {
  fill: #550C2F;
}

.no-flexbox-gap .menu-menu-1-container .flex.so-me {
  gap: 0;
}
.no-flexbox-gap .menu-menu-1-container .flex.so-me > * {
  margin-right: 1rem;
}
.no-flexbox-gap .menu-menu-1-container .flex.so-me > *:last-child {
  margin-right: 0;
}

.toggled #primary-menu {
  background-color: #fff;
}

.toggled .menu-menu-1-container {
  transform: translate(0, 0);
  z-index: 5;
}

.mobile_nav_home svg {
  height: 40px;
  width: auto;
  display: block;
}

.mobile_nav_home {
  padding-bottom: 1rem;
  width: 100%;
}
@media screen and (min-width: 1200px) {
  .mobile_nav_home {
    display: none;
  }
}

.small_menu_heading {
  margin-bottom: 0.5rem;
}

@media screen and (min-width: 1200px) {
  .main-navigation-inner .text_sizer {
    display: none;
  }
}
@media screen and (min-width: 1200px) {
  .main-navigation-inner .mode {
    display: none;
  }
}

/*Desktop Menu*/
.nav--menu--desktop #primary-menu {
  flex-direction: row;
  list-style: none;
  column-gap: 1rem;
}
@media screen and (min-width: 1400px) {
  .nav--menu--desktop #primary-menu {
    column-gap: 2rem;
  }
}
@media screen and (min-width: 1600px) {
  .nav--menu--desktop #primary-menu {
    column-gap: 4rem;
  }
}

.nav-utilites--desktop {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 2rem;
  position: relative;
}
.nav-utilites--desktop .nav_search.search {
  height: 24px;
  padding: 0;
  display: block;
}
.nav-utilites--desktop .button--donate {
  transition: color var(--transition) ease-in, background var(--transition) ease-in, border var(--transition) ease-in;
}
.nav-utilites--desktop .button--donate:hover {
  background: #fff;
  color: #57ABB9;
  border: 1px #fff solid;
}

.desktop_nav_utilities_wrapper {
  display: flex;
  flex-direction: row;
  align-items: center;
  column-gap: 1rem;
  padding-top: 0;
}
@media screen and (min-width: 1400px) {
  .desktop_nav_utilities_wrapper {
    column-gap: 10rem;
  }
}

/*Branding*/
.site-branding {
  height: calc(var(--header-height) - 5.5rem);
  position: relative;
  z-index: 11;
}
@media screen and (min-width: 1200px) {
  .site-branding {
    height: 85px;
  }
}

.search_toggle {
  background-color: transparent;
  display: inline;
}
.search_toggle svg {
  width: 1.2rem;
  height: 1.2rem;
}

@media screen and (min-width: 1200px) {
  #masthead {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  #masthead.slideInDown {
    color: #fff;
  }
  #masthead.slideInDown svg path {
    fill: #fff;
  }
  #masthead.slideInDown #primary-menu > li > a {
    color: #fff;
  }
  #masthead.slideOut svg path {
    fill: #fff;
  }
}
#primary-menu .sub-menu,
.nav-utilites--desktop .sub-menu {
  position: absolute;
  top: 0;
  transform: translate(100vw, 0);
  left: 0;
  background-color: #550C2F;
  z-index: 10;
  height: 100%;
  border-left: 2px solid #fff;
  padding-left: 1rem;
  transition: transform var(--transition) ease;
}
@media screen and (min-width: 1200px) {
  #primary-menu .sub-menu,
  .nav-utilites--desktop .sub-menu {
    transform: translate(-50%, 0) scale(1, 0);
    transform-origin: top;
  }
}
#primary-menu .sub-menu.open,
.nav-utilites--desktop .sub-menu.open {
  transform: translate(0, 0);
}
@media screen and (min-width: 1200px) {
  #primary-menu .sub-menu.open,
  .nav-utilites--desktop .sub-menu.open {
    transform: translate(-50%, 0) scale(1, 1);
  }
}
@media screen and (min-width: 1200px) {
  #primary-menu .menu-item-has-children,
  .nav-utilites--desktop .menu-item-has-children {
    position: relative;
    height: 1.5rem;
    /* &:last-of-type {
    	& > a::after {
    		content: "";
    		position: relative;
    		top: 25%;
    		left: 0.5rem;
    		width: 0;
    		height: 0;
    		border-left: 6px solid transparent;
    		border-right: 6px solid transparent;
    		border-top: 6.86px solid $color_primary;
    	}
    } */
  }
  #primary-menu .menu-item-has-children .sub-menu,
  .nav-utilites--desktop .menu-item-has-children .sub-menu {
    border: none;
    padding: 1.5rem 1.25rem 1.25rem;
    border-radius: 1.25rem;
    top: calc(100% + 1rem);
    height: fit-content;
    width: fit-content;
    min-width: 240px;
    margin: 0;
    left: 50%;
    background-color: white;
    list-style: none;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
  }
  #primary-menu .menu-item-has-children .sub-menu::before,
  .nav-utilites--desktop .menu-item-has-children .sub-menu::before {
    /* 	content: "";
    position: absolute;
    top: -0.75rem;
    left: 50%;
    transform: translate(-50%, 0);
    width: 0;
    height: 0;
    border-left: 0.625rem solid transparent;
    border-right: 0.625rem solid transparent;
    border-bottom: 0.75rem solid white; */
  }
  #primary-menu .menu-item-has-children li,
  .nav-utilites--desktop .menu-item-has-children li {
    opacity: 0;
    transition: opacity var(--transition) ease calc(var(--transition) / 2);
    margin-bottom: 1rem;
  }
  #primary-menu .menu-item-has-children li a,
  .nav-utilites--desktop .menu-item-has-children li a {
    color: #57ABB9;
    font-size: 1.5rem;
    font-weight: 500;
    text-decoration: none;
  }
  #primary-menu .menu-item-has-children.open li,
  .nav-utilites--desktop .menu-item-has-children.open li {
    opacity: 1;
  }
}

.search_group {
  display: flex;
}

@media screen and (min-width: 1200px) {
  .nav-utilites--desktop .menu-item-has-children .nav_search_popover.sub-menu {
    transform: translate(-85%, 0) scale(1, 0);
  }
  .nav-utilites--desktop .menu-item-has-children .nav_search_popover.sub-menu.open {
    transform: translate(-85%, 0) scale(1, 1);
  }
  .nav-utilites--desktop .menu-item-has-children .nav_search_popover.sub-menu::before {
    left: 85%;
  }
}

.search_alt a {
  margin: 1rem auto 0;
  display: block;
  width: fit-content;
}

/*Search*/
/*Breadcrumbs*/
.breadcrumbs .crumb svg {
  height: 0.85rem;
  width: auto;
  margin-right: 0.25rem;
  margin-bottom: 0.15rem;
}
.breadcrumbs .crumb svg path {
  fill: #57ABB9;
}

.breadcrumb_container {
  margin-bottom: 1rem;
}

.breadcrumbs ol {
  list-style: none;
  display: flex;
  flex-direction: row;
  column-gap: 1rem;
  margin-left: 0;
  padding-left: 0;
  margin-bottom: 0;
}
.breadcrumbs ol a {
  text-decoration: none;
  color: #57ABB9;
  display: flex;
  align-items: center;
}
.breadcrumbs ol .crumb {
  font-weight: 500;
  font-size: 0.85rem;
  display: flex;
  align-items: center;
}
.breadcrumbs ol .crumb--current {
  font-weight: 400;
  color: #1a1a1a;
  font-size: 0.85rem;
  display: flex;
  align-items: center;
}

.breadcrumb_container li.crumb a {
  font-weight: 500;
}

li.crumb::before {
  content: " / ";
  color: #57ABB9;
  font-size: 1rem;
  position: relative;
  margin-right: 1rem;
  font-weight: 400;
}

li.crumb:first-of-type::before {
  content: "";
  margin-right: 0;
}

li.crumb--current::before {
  content: " / ";
  color: #57ABB9;
  font-size: 1rem;
  position: relative;
  margin-right: 1rem;
  font-weight: 400;
}

@media screen and (min-width: 1200px) {
  a.home_link.desktop_only {
    grid-column: auto;
  }
}

/* Posts and pages
--------------------------------------------- */
.block {
  padding-top: 2rem;
  padding-bottom: 2rem;
}
.block:not(.padding) > h2, .block:not(.padding) > h3 {
  margin-left: 1rem;
  margin-right: 1rem;
}

.content_block.content_block--content {
  margin-bottom: 0;
}

.big_text {
  padding: 4rem 0;
  width: 1080px;
  max-width: calc(100vw - 2 * var(--margin));
  margin: 0 auto;
  font-size: clamp(1.2rem, 3vw, 1.8rem);
  line-height: 175%;
  text-align: left;
}
.big_text strong {
  display: block;
  margin-bottom: 1rem;
}
.big_text p,
.big_text a {
  font-size: clamp(1.2rem, 3vw, 1.8rem);
  line-height: 175%;
}
.big_text a {
  font-weight: 700;
  text-align: center;
  display: block;
}
.big_text a:empty {
  display: none;
}

.block_quote {
  position: relative;
  width: 1020px;
  max-width: calc(100vw - 2 * var(--margin));
  margin: 0 auto;
  padding: 4rem 0 4rem;
}
@media screen and (min-width: 1000px) {
  .block_quote {
    padding: 4rem 0;
  }
}
.block_quote::before {
  content: "";
  position: absolute;
  top: 3rem;
  left: 0;
  width: 3rem;
  height: 3.4rem;
  background-image: url(../assets/quotes.png);
  background-size: contain;
  background-repeat: no-repeat;
}
@media screen and (min-width: 1000px) {
  .block_quote::before {
    left: -5rem;
    top: 4rem;
    width: 4rem;
  }
}
.block_quote p,
.block_quote footer {
  font-size: 1.4rem;
  line-height: 115%;
  font-weight: 700;
}
.block_quote p {
  color: #57ABB9;
}

#response,
#signupform {
  position: relative;
}
#response::before,
#signupform::before {
  z-index: 10;
  content: "";
  position: absolute;
  top: calc(50% - 25px);
  left: calc(50% - 25px);
  border-radius: 25px;
  width: 50px;
  height: 50px;
  border: 5px solid #57ABB9;
  border-bottom-color: transparent;
  animation: spin 1s ease-in-out infinite;
  display: none;
}
#response.loading::before,
#signupform.loading::before {
  display: block;
}
#response.loading .flex_item,
#signupform.loading .flex_item {
  opacity: 0.1;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.filter input[type=reset].hide {
  display: none;
}

.filter input[type=reset].hide {
  display: none;
}

.page-numbers {
  width: 2rem;
  height: 2rem;
  display: flex;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  background-color: #f8f8f8;
  color: #0E1B2F;
  text-decoration: none;
  transition: background-color var(--transition) ease, color var(--transition) ease;
}
.page-numbers.current {
  background-color: #550C2F;
  color: #fff;
}
.page-numbers.current:visited {
  color: #fff;
}
.page-numbers:hover {
  text-decoration: none;
  background-color: #57ABB9;
  color: #fff;
}
.page-numbers:hover:visited {
  color: #fff;
}
.page-numbers:visited {
  color: #0E1B2F;
}

/* Content Block */
@media screen and (min-width: 1200px) {
  .layout_block--content {
    margin-bottom: 3rem;
  }
}
@media screen and (min-width: 1200px) {
  .layout_block--content .content_block--content p {
    font-size: 1.5rem;
    line-height: 150%;
  }
}
.layout_block--content .content_block--video {
  margin-bottom: 3rem;
}
@media screen and (min-width: 1200px) {
  .layout_block--content .content_block--quote h3 {
    font-size: 2.5rem;
    line-height: 125%;
  }
}

.content_max_width > * {
  width: 680px !important;
  max-width: 90vw;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 2rem;
}

.column--one .content_max_width {
  margin-top: 0;
}
.column--one .content_max_width > * {
  width: auto !important;
  max-width: 90vw;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 2rem;
}

.column--two {
  display: grid;
  gap: 2rem;
  grid-template-rows: min-content min-content 1fr;
}
.column--two .quote {
  font-size: 1.4rem;
  font-weight: 700;
}
.column--two .button {
  width: fit-content;
  padding: 1rem 2rem;
  margin: 0 auto;
  text-transform: uppercase;
  font-family: "Ubuntu", sans-serif;
  transition: box-shadow var(--transition) ease;
}
.column--two .button:hover {
  box-shadow: 8px 8px 0 #C3BC32;
}

.content_block.content_block--images .carousel {
  overflow: hidden;
  padding-bottom: 3rem;
  position: relative;
}
.content_block.content_block--images .carousel .button--prev, .content_block.content_block--images .carousel .button--next {
  position: absolute;
  bottom: 0;
  line-height: 0;
}
.content_block.content_block--images .carousel .button--prev {
  left: 0;
  right: unset;
}
.content_block.content_block--images .carousel .button--next {
  right: 0;
  left: unset;
}

.add_content_video {
  padding-top: 4rem;
  padding-bottom: 4rem;
}
.add_content_video .block-video {
  max-width: 1080px;
  margin-left: auto;
  margin-right: auto;
}

.form_block input[type=text], .form_block input[type=email], .form_block input[type=tel], .form_block input[type=number], .form_block input[type=password], .form_block textarea {
  width: 100%;
}

.partners > a {
  width: fit-content;
  margin: 2rem auto;
  font-size: 1.5rem;
  font-family: "Ubuntu", sans-serif;
}

.related_event h2 {
  margin-bottom: 2rem;
}

@media screen and (min-width: 1000px) {
  .column--one {
    grid-column: 1/2;
  }
  .column--two {
    grid-column: 2/3;
  }
  .column--two.side_bar {
    margin-left: 4rem;
  }
  .column--span {
    grid-column: 1/-1;
  }
  .grid--two-column {
    grid-template-columns: 2fr 1fr;
    grid-template-rows: auto 1fr;
    grid-auto-flow: dense;
    column-gap: 2rem;
  }
  .grid--two-column > * {
    min-width: 0px;
  }
  .grid--two-column .padding {
    padding-left: 0;
    padding-right: 0;
  }
  .grid--two-column.has_crumb {
    grid-template-rows: 4rem auto;
  }
  .grid--two-column.grid--two-column-equal {
    grid-template-columns: 1fr 1fr;
  }
  .grid--two-column.grid--45_55 {
    grid-template-columns: 9fr 11fr;
    column-gap: 4rem;
  }
  .grid--two-column.grid--45_55 .column--two {
    padding-right: 4rem;
  }
  .grid--two-column.grid--55_45 {
    grid-template-columns: 11fr 9fr;
    column-gap: 4rem;
  }
  .grid--two-column.grid--55_45 .column--two {
    padding-left: 4rem;
  }
  .grid--two-column.grid--9_5 {
    grid-template-columns: 9fr 5fr;
    column-gap: 4rem;
  }
  .grid--two-column.grid--9_5 .column--two {
    padding-left: 4rem;
  }
  .grid--two-column.grid--4_3 {
    grid-template-columns: 4fr 3fr;
    column-gap: 4rem;
  }
  .grid--two-column.grid--4_3 .column--two {
    padding-left: 4rem;
  }
}
.grid--three-column {
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 2rem;
}
.grid--three-column .column--one {
  grid-column: 1/3;
}
.grid--three-column .column--two {
  grid-column: 1/2;
}
.grid--three-column .column--three {
  grid-column: 2/3;
}
@media screen and (min-width: 1000px) {
  .grid--three-column {
    grid-template-columns: 2fr 1fr 1fr;
    grid-template-rows: 1fr;
  }
  .grid--three-column .column--one {
    grid-column: 1/2;
  }
  .grid--three-column .column--two {
    grid-column: 2/3;
  }
  .grid--three-column .column--three {
    grid-column: 3/4;
  }
}
.grid--three-column.grid--three-column-equal {
  grid-template-columns: 1fr;
}
@media screen and (min-width: 1000px) {
  .grid--three-column.grid--three-column-equal {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

.grid--two_five {
  grid-template-columns: 1fr;
  grid-template-rows: auto auto;
}
@media screen and (min-width: 1000px) {
  .grid--two_five {
    grid-template-columns: 3fr 10fr;
    grid-template-rows: 1fr;
  }
}

@media screen and (min-width: 1200px) {
  .grid--three_five {
    grid-template-columns: 3fr 5fr;
    grid-template-rows: 1fr;
  }
}

.grid_20 {
  gap: 2rem;
}
@media screen and (min-width: 1000px) {
  .grid_20 {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  }
}

.grid_25 {
  gap: 2rem;
}
@media screen and (min-width: 700px) {
  .grid_25 {
    grid-template-columns: 1fr 1fr;
  }
}
@media screen and (min-width: 1000px) {
  .grid_25 {
    grid-template-columns: 1fr 1fr 1fr;
  }
}
@media screen and (min-width: 1200px) {
  .grid_25 {
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }
}

.grid_33 {
  gap: 2rem;
}
@media screen and (min-width: 1000px) {
  .grid_33 {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

.grid_50 {
  gap: 1rem;
}
.grid_50.invert_on_mobile > :first-child {
  order: 2;
}
@media screen and (min-width: 1000px) {
  .grid_50.invert_on_mobile > :first-child {
    order: unset;
  }
}
@media screen and (min-width: 1000px) {
  .grid_50 {
    grid-template-columns: 1fr 1fr;
  }
}

.grid_4_1 {
  gap: 2rem;
}
@media screen and (min-width: 1000px) {
  .grid_4_1 {
    grid-template-columns: 4fr 1fr;
  }
}

.video_bg .header-content {
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: 10;
  width: 530px;
  max-width: 90vw;
  gap: 0.5rem;
  padding-bottom: 0.5rem;
  padding-top: 3rem;
  padding-left: 3rem;
  padding-right: var(--margin);
}
.video_bg .header-content > * {
  z-index: 1;
}
.video_bg .header-content h2 {
  font-size: 1.2rem;
  text-align: right;
  text-transform: uppercase;
}
.video_bg .header-content .header-logo {
  width: 180px;
  margin-left: auto;
}
@media screen and (min-width: 700px) {
  .video_bg .header-content {
    padding-bottom: 3rem;
    gap: 2rem;
  }
  .video_bg .header-content h2 {
    font-size: 2rem;
  }
  .video_bg .header-content .header-logo {
    width: unset;
    margin-left: unset;
  }
}

.home:has(.home-video) #primary {
  padding-top: 0;
}
.home:has(.home-video) #masthead {
  background-color: transparent;
  background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.8) 30%, transparent 100%);
  box-shadow: none;
}
.home:has(.home-video) #masthead .logo {
  visibility: hidden;
}

.home:has(.home-banner) #primary {
  padding-top: 0;
}
.home:has(.home-banner) #masthead {
  background-color: transparent;
  box-shadow: none;
  background-image: none;
}
.home:has(.home-banner) #masthead .logo {
  visibility: hidden;
}

.home-video iframe {
  transform: scale(3.2);
}
.home-video .container.container--sixteennine {
  position: relative;
  width: 100%;
  overflow: hidden;
}
@supports (aspect-ratio: 16/9) {
  .home-video .container.container--sixteennine {
    aspect-ratio: 1;
  }
}
@supports not (aspect-ratio: 16/9) {
  .home-video .container.container--sixteennine {
    padding-top: 100%;
    height: 0;
  }
}
@media screen and (min-width: 1000px) {
  .home-video .container.container--sixteennine {
    position: relative;
    width: 100%;
    overflow: hidden;
  }
  @supports (aspect-ratio: 16/9) {
    .home-video .container.container--sixteennine {
      aspect-ratio: 1.7777777778;
    }
  }
  @supports not (aspect-ratio: 16/9) {
    .home-video .container.container--sixteennine {
      padding-top: 56.25;
      height: 0;
    }
  }
}
@media screen and (min-width: 700px) {
  .home-video iframe {
    transform: scale(1.8);
  }
}
@media screen and (min-width: 1000px) {
  .home-video iframe {
    transform: scale(1);
  }
}
@media screen and (min-width: 1200px) {
  .home-video {
    height: 90dvh;
    position: relative;
  }
  .home-video iframe {
    transform: scale(1);
  }
  .home-video .container.container--sixteennine {
    position: absolute;
    bottom: 0;
  }
}

.video_bg__play {
  width: 1rem;
  height: 1rem;
  position: absolute;
  bottom: 2rem;
  left: 1rem;
  background: transparent;
}
.video_bg__play .pause {
  display: none;
}
.video_bg__play.playing svg:first-of-type {
  display: none;
}
.video_bg__play.playing .pause {
  display: block;
}
.video_bg__play svg {
  height: 1rem;
}
@media screen and (min-width: 700px) {
  .video_bg__play {
    left: var(--margin);
  }
}

.home-banner {
  height: 98dvh;
  background-size: cover;
  background-position: center bottom;
}
.home-banner .grid {
  padding-top: var(--header-height);
  margin: 0 auto;
  gap: 1rem;
  grid-template-rows: 1fr auto auto auto;
  height: 98dvh;
}
.home-banner .grid .header-logo {
  width: auto;
  margin: 0 auto;
  max-width: 90vw;
  aspect-ratio: 1.3;
}
.home-banner .grid h3 {
  text-align: center;
}
.home-banner .grid .lineup {
  margin: 0;
  padding: 0;
  text-align-last: center;
  text-align: justify;
}
.home-banner .grid .lineup li {
  display: inline;
  margin: 0;
  padding: 0;
}
.home-banner .grid .lineup li a {
  text-decoration: none;
  color: white;
}
.home-banner .grid .lineup li h4 {
  display: inline;
  padding-right: 1rem;
  position: relative;
}
.home-banner .grid .lineup li h4::after {
  content: "";
  background: white;
  width: 1rem;
  height: 1rem;
  display: inline-block;
  margin-left: 1rem;
  border-radius: 50%;
}
.home-banner .grid .lineup li:last-child h4 {
  padding-right: 0;
}
.home-banner .grid .lineup li:last-child h4::after {
  display: none;
}
.home-banner .grid > a.button {
  width: fit-content;
  margin: 0 auto;
  padding: 1rem 4rem;
  font-size: 1.5rem;
  font-family: "Ubuntu";
  text-transform: uppercase;
}

.header-up_next.flex a {
  height: min-content;
}

.cover {
  object-fit: cover;
  line-height: 0;
  position: relative;
}

.page_header_image .header-content {
  width: 900px;
  height: 100%;
  max-height: 40dvh;
  position: absolute;
  bottom: 0;
  right: 0;
}
@media screen and (min-width: 1000px) {
  .page_header_image .header-content {
    max-height: 550px;
  }
}
.page_header_image .header-content > * {
  position: relative;
  z-index: 1;
}
.page_header_image .header-content .header-content__inner.grid {
  width: fit-content;
  max-width: calc(100vw - 2 * var(--margin));
  position: absolute;
  bottom: 1rem;
  right: var(--margin);
}
.page_header_image .header-content .header-content__inner.grid h1 {
  text-align: right;
  font-size: 2rem;
}
.page_header_image .header-content .header-content__inner.grid .breadcrumbs {
  margin-bottom: 0.5rem;
}
.page_header_image .header-content .header-content__inner.grid .breadcrumbs ol {
  justify-content: flex-end;
}
.page_header_image .header-content .header-content__inner.grid .breadcrumbs ol a {
  color: white;
}
.page_header_image .header-content .header-content__inner.grid .breadcrumbs ol li::before, .page_header_image .header-content .header-content__inner.grid .breadcrumbs ol li.crumb--current::before {
  color: white;
}
@media screen and (min-width: 1000px) {
  .page_header_image .header-content .header-content__inner.grid {
    bottom: 2rem;
  }
  .page_header_image .header-content .header-content__inner.grid h1 {
    font-size: 3rem;
  }
  .page_header_image .header-content .header-content__inner.grid .breadcrumbs {
    margin-bottom: 2rem;
  }
}

.page_header:not(.page_header_image) h1 {
  margin-bottom: 0;
}
.page_header:not(.page_header_image) .breadcrumbs ol li a {
  color: #0E1B2F;
}

.event_header h1 {
  margin-top: 2rem;
}
.event_header .event_header_text {
  display: grid;
}
.event_header .breadcrumbs {
  width: fit-content;
  margin: 0 auto;
}
.event_header .breadcrumbs a, .event_header .breadcrumbs ::before {
  color: white;
}
.event_header h3 {
  margin-top: 0;
}
.event_header .venue a {
  color: #DDA2C1;
  text-decoration: none;
}
.event_header .price {
  font-size: 1.2rem;
  padding: 2rem 0;
}
.event_header .event_header_buttons a {
  width: fit-content;
  padding: 1rem 2rem;
  margin: 0 auto;
  text-transform: uppercase;
  font-family: "Ubuntu", sans-serif;
  transition: box-shadow var(--transition) ease;
}
.event_header .event_header_buttons a:hover {
  box-shadow: 8px 8px 0 #C3BC32;
}
.event_header .event_header_buttons a + a {
  margin-top: 1rem;
}
.event_header .venue_details .venue_date {
  display: block;
  font-size: 0.8rem;
  font-family: "Karla";
}
.event_header .down_arrow a {
  padding-right: 0;
  padding-bottom: 2rem;
}
.event_header .down_arrow a::after {
  top: unset;
  bottom: 0;
  right: calc(50% - 0.5rem);
}

@media screen and (min-width: 1000px) {
  .image_clip::after {
    mask-image: url(/wp-content/themes/karoo/assets/masks/wave_vertical.svg);
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: bottom right;
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #0E1B2F;
    content: "";
    right: -1px;
    top: 0;
  }
}
.artist_header .breadcrumbs {
  margin-bottom: 1rem;
}
.artist_header .breadcrumbs a, .artist_header .breadcrumbs ::before {
  color: #550C2F;
}
.artist_header h1 {
  text-align: center;
}
.artist_header .title {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: end;
  gap: 2rem;
}
.artist_header a.pink {
  color: #DDA2C1;
  text-decoration: none;
}
.artist_header a.pink:visited {
  color: #DDA2C1;
}

.line_up_header .breadcrumbs a, .line_up_header .breadcrumbs ::before {
  color: #550C2F;
}
.line_up_header h1 {
  text-align: center;
}
.line_up_header p {
  text-align: center;
  max-width: 680px;
  margin: 0 auto 1rem;
}

.header-post {
  padding-bottom: 0;
}
.header-post .breadcrumbs a, .header-post .breadcrumbs ::before {
  color: #550C2F;
}
.header-post h1, .header-post h4 {
  color: #0E1B2F;
}
.header-post h4 {
  font-family: "Karla", sans-serif;
  font-size: 1rem;
}

.venue_header .breadcrumbs ol a, .venue_header .breadcrumbs ol ::before {
  color: #fff;
}
.venue_header h1 {
  text-align: center;
}

.title_grid {
  margin-bottom: 1rem;
}
@media screen and (min-width: 1000px) {
  .title_grid {
    margin-bottom: 0;
  }
}

/**
 * Swiper 11.1.9
 * Most modern mobile touch slider and framework with hardware accelerated transitions
 * https://swiperjs.com
 *
 * Copyright 2014-2024 Vladimir Kharlampidi
 *
 * Released under the MIT License
 *
 * Released on: July 31, 2024
 */
@font-face {
  font-family: "swiper-icons";
  src: url("data:application/font-woff;charset=utf-8;base64, d09GRgABAAAAAAZgABAAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAGRAAAABoAAAAci6qHkUdERUYAAAWgAAAAIwAAACQAYABXR1BPUwAABhQAAAAuAAAANuAY7+xHU1VCAAAFxAAAAFAAAABm2fPczU9TLzIAAAHcAAAASgAAAGBP9V5RY21hcAAAAkQAAACIAAABYt6F0cBjdnQgAAACzAAAAAQAAAAEABEBRGdhc3AAAAWYAAAACAAAAAj//wADZ2x5ZgAAAywAAADMAAAD2MHtryVoZWFkAAABbAAAADAAAAA2E2+eoWhoZWEAAAGcAAAAHwAAACQC9gDzaG10eAAAAigAAAAZAAAArgJkABFsb2NhAAAC0AAAAFoAAABaFQAUGG1heHAAAAG8AAAAHwAAACAAcABAbmFtZQAAA/gAAAE5AAACXvFdBwlwb3N0AAAFNAAAAGIAAACE5s74hXjaY2BkYGAAYpf5Hu/j+W2+MnAzMYDAzaX6QjD6/4//Bxj5GA8AuRwMYGkAPywL13jaY2BkYGA88P8Agx4j+/8fQDYfA1AEBWgDAIB2BOoAeNpjYGRgYNBh4GdgYgABEMnIABJzYNADCQAACWgAsQB42mNgYfzCOIGBlYGB0YcxjYGBwR1Kf2WQZGhhYGBiYGVmgAFGBiQQkOaawtDAoMBQxXjg/wEGPcYDDA4wNUA2CCgwsAAAO4EL6gAAeNpj2M0gyAACqxgGNWBkZ2D4/wMA+xkDdgAAAHjaY2BgYGaAYBkGRgYQiAHyGMF8FgYHIM3DwMHABGQrMOgyWDLEM1T9/w8UBfEMgLzE////P/5//f/V/xv+r4eaAAeMbAxwIUYmIMHEgKYAYjUcsDAwsLKxc3BycfPw8jEQA/gZBASFhEVExcQlJKWkZWTl5BUUlZRVVNXUNTQZBgMAAMR+E+gAEQFEAAAAKgAqACoANAA+AEgAUgBcAGYAcAB6AIQAjgCYAKIArAC2AMAAygDUAN4A6ADyAPwBBgEQARoBJAEuATgBQgFMAVYBYAFqAXQBfgGIAZIBnAGmAbIBzgHsAAB42u2NMQ6CUAyGW568x9AneYYgm4MJbhKFaExIOAVX8ApewSt4Bic4AfeAid3VOBixDxfPYEza5O+Xfi04YADggiUIULCuEJK8VhO4bSvpdnktHI5QCYtdi2sl8ZnXaHlqUrNKzdKcT8cjlq+rwZSvIVczNiezsfnP/uznmfPFBNODM2K7MTQ45YEAZqGP81AmGGcF3iPqOop0r1SPTaTbVkfUe4HXj97wYE+yNwWYxwWu4v1ugWHgo3S1XdZEVqWM7ET0cfnLGxWfkgR42o2PvWrDMBSFj/IHLaF0zKjRgdiVMwScNRAoWUoH78Y2icB/yIY09An6AH2Bdu/UB+yxopYshQiEvnvu0dURgDt8QeC8PDw7Fpji3fEA4z/PEJ6YOB5hKh4dj3EvXhxPqH/SKUY3rJ7srZ4FZnh1PMAtPhwP6fl2PMJMPDgeQ4rY8YT6Gzao0eAEA409DuggmTnFnOcSCiEiLMgxCiTI6Cq5DZUd3Qmp10vO0LaLTd2cjN4fOumlc7lUYbSQcZFkutRG7g6JKZKy0RmdLY680CDnEJ+UMkpFFe1RN7nxdVpXrC4aTtnaurOnYercZg2YVmLN/d/gczfEimrE/fs/bOuq29Zmn8tloORaXgZgGa78yO9/cnXm2BpaGvq25Dv9S4E9+5SIc9PqupJKhYFSSl47+Qcr1mYNAAAAeNptw0cKwkAAAMDZJA8Q7OUJvkLsPfZ6zFVERPy8qHh2YER+3i/BP83vIBLLySsoKimrqKqpa2hp6+jq6RsYGhmbmJqZSy0sraxtbO3sHRydnEMU4uR6yx7JJXveP7WrDycAAAAAAAH//wACeNpjYGRgYOABYhkgZgJCZgZNBkYGLQZtIJsFLMYAAAw3ALgAeNolizEKgDAQBCchRbC2sFER0YD6qVQiBCv/H9ezGI6Z5XBAw8CBK/m5iQQVauVbXLnOrMZv2oLdKFa8Pjuru2hJzGabmOSLzNMzvutpB3N42mNgZGBg4GKQYzBhYMxJLMlj4GBgAYow/P/PAJJhLM6sSoWKfWCAAwDAjgbRAAB42mNgYGBkAIIbCZo5IPrmUn0hGA0AO8EFTQAA") format("woff");
  font-weight: 400;
  font-style: normal;
}
:root {
  --swiper-theme-color: #007aff;
  /*
  --swiper-preloader-color: var(--swiper-theme-color);
  --swiper-wrapper-transition-timing-function: initial;
  */
}

:host {
  position: relative;
  display: block;
  margin-left: auto;
  margin-right: auto;
  z-index: 1;
}

.swiper {
  margin-left: auto;
  margin-right: auto;
  position: relative;
  overflow: hidden;
  list-style: none;
  padding: 0;
  /* Fix of Webkit flickering */
  z-index: 1;
  display: block;
}

.swiper-vertical > .swiper-wrapper {
  flex-direction: column;
}

.swiper-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 1;
  display: flex;
  transition-property: transform;
  transition-timing-function: var(--swiper-wrapper-transition-timing-function, initial);
  box-sizing: content-box;
}

.swiper-android .swiper-slide,
.swiper-ios .swiper-slide,
.swiper-wrapper {
  transform: translate3d(0px, 0, 0);
}

.swiper-horizontal {
  touch-action: pan-y;
}

.swiper-vertical {
  touch-action: pan-x;
}

.swiper-slide {
  flex-shrink: 0;
  width: 100%;
  height: 100%;
  position: relative;
  transition-property: transform;
  display: block;
}

.swiper-slide-invisible-blank {
  visibility: hidden;
}

/* Auto Height */
.swiper-autoheight,
.swiper-autoheight .swiper-slide {
  height: auto;
}

.swiper-autoheight .swiper-wrapper {
  align-items: flex-start;
  transition-property: transform, height;
}

.swiper-backface-hidden .swiper-slide {
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* 3D Effects */
.swiper-3d.swiper-css-mode .swiper-wrapper {
  perspective: 1200px;
}

.swiper-3d .swiper-wrapper {
  transform-style: preserve-3d;
}

.swiper-3d {
  perspective: 1200px;
}
.swiper-3d .swiper-slide,
.swiper-3d .swiper-cube-shadow {
  transform-style: preserve-3d;
}

/* CSS Mode */
.swiper-css-mode > .swiper-wrapper {
  overflow: auto;
  scrollbar-width: none; /* For Firefox */
  -ms-overflow-style: none; /* For Internet Explorer and Edge */
}
.swiper-css-mode > .swiper-wrapper::-webkit-scrollbar {
  display: none;
}
.swiper-css-mode > .swiper-wrapper > .swiper-slide {
  scroll-snap-align: start start;
}
.swiper-css-mode.swiper-horizontal > .swiper-wrapper {
  scroll-snap-type: x mandatory;
}
.swiper-css-mode.swiper-vertical > .swiper-wrapper {
  scroll-snap-type: y mandatory;
}
.swiper-css-mode.swiper-free-mode > .swiper-wrapper {
  scroll-snap-type: none;
}
.swiper-css-mode.swiper-free-mode > .swiper-wrapper > .swiper-slide {
  scroll-snap-align: none;
}
.swiper-css-mode.swiper-centered > .swiper-wrapper::before {
  content: "";
  flex-shrink: 0;
  order: 9999;
}
.swiper-css-mode.swiper-centered > .swiper-wrapper > .swiper-slide {
  scroll-snap-align: center center;
  scroll-snap-stop: always;
}
.swiper-css-mode.swiper-centered.swiper-horizontal > .swiper-wrapper > .swiper-slide:first-child {
  margin-inline-start: var(--swiper-centered-offset-before);
}
.swiper-css-mode.swiper-centered.swiper-horizontal > .swiper-wrapper::before {
  height: 100%;
  min-height: 1px;
  width: var(--swiper-centered-offset-after);
}
.swiper-css-mode.swiper-centered.swiper-vertical > .swiper-wrapper > .swiper-slide:first-child {
  margin-block-start: var(--swiper-centered-offset-before);
}
.swiper-css-mode.swiper-centered.swiper-vertical > .swiper-wrapper::before {
  width: 100%;
  min-width: 1px;
  height: var(--swiper-centered-offset-after);
}

/* Slide styles start */
/* 3D Shadows */
.swiper-3d .swiper-slide-shadow,
.swiper-3d .swiper-slide-shadow-left,
.swiper-3d .swiper-slide-shadow-right,
.swiper-3d .swiper-slide-shadow-top,
.swiper-3d .swiper-slide-shadow-bottom,
.swiper-3d .swiper-slide-shadow,
.swiper-3d .swiper-slide-shadow-left,
.swiper-3d .swiper-slide-shadow-right,
.swiper-3d .swiper-slide-shadow-top,
.swiper-3d .swiper-slide-shadow-bottom {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 10;
}
.swiper-3d .swiper-slide-shadow {
  background: rgba(0, 0, 0, 0.15);
}
.swiper-3d .swiper-slide-shadow-left {
  background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}
.swiper-3d .swiper-slide-shadow-right {
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}
.swiper-3d .swiper-slide-shadow-top {
  background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}
.swiper-3d .swiper-slide-shadow-bottom {
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}

.swiper-lazy-preloader {
  width: 42px;
  height: 42px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -21px;
  margin-top: -21px;
  z-index: 10;
  transform-origin: 50%;
  box-sizing: border-box;
  border: 4px solid var(--swiper-preloader-color, var(--swiper-theme-color));
  border-radius: 50%;
  border-top-color: transparent;
}

.swiper:not(.swiper-watch-progress) .swiper-lazy-preloader,
.swiper-watch-progress .swiper-slide-visible .swiper-lazy-preloader {
  animation: swiper-preloader-spin 1s infinite linear;
}

.swiper-lazy-preloader-white {
  --swiper-preloader-color: #fff;
}

.swiper-lazy-preloader-black {
  --swiper-preloader-color: #000;
}

@keyframes swiper-preloader-spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
/* Slide styles end */
/* ===============================
=            Choices            =
=============================== */
.choices {
  position: relative;
  overflow: hidden;
  margin-bottom: 24px;
  font-size: 16px;
}
.choices:focus {
  outline: none;
}
.choices:last-child {
  margin-bottom: 0;
}
.choices.is-open {
  overflow: visible;
}
.choices.is-disabled .choices__inner,
.choices.is-disabled .choices__input {
  background-color: #eaeaea;
  cursor: not-allowed;
  user-select: none;
}
.choices.is-disabled .choices__item {
  cursor: not-allowed;
}
.choices [hidden] {
  display: none !important;
}

.choices[data-type*=select-one] {
  cursor: pointer;
}
.choices[data-type*=select-one] .choices__inner {
  padding-bottom: 7.5px;
}
.choices[data-type*=select-one] .choices__input {
  display: block;
  width: 100%;
  padding: 10px;
  border-bottom: 1px solid #ddd;
  background-color: #fff;
  margin: 0;
}
.choices[data-type*=select-one] .choices__button {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMSAyMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjMDAwIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0yLjU5Mi4wNDRsMTguMzY0IDE4LjM2NC0yLjU0OCAyLjU0OEwuMDQ0IDIuNTkyeiIvPjxwYXRoIGQ9Ik0wIDE4LjM2NEwxOC4zNjQgMGwyLjU0OCAyLjU0OEwyLjU0OCAyMC45MTJ6Ii8+PC9nPjwvc3ZnPg==");
  padding: 0;
  background-size: 8px;
  position: absolute;
  top: 50%;
  right: 0;
  margin-top: -10px;
  margin-right: 25px;
  height: 20px;
  width: 20px;
  border-radius: 10em;
  opacity: 0.25;
}
.choices[data-type*=select-one] .choices__button:hover, .choices[data-type*=select-one] .choices__button:focus {
  opacity: 1;
}
.choices[data-type*=select-one] .choices__button:focus {
  box-shadow: 0 0 0 2px #005F75;
}
.choices[data-type*=select-one] .choices__item[data-placeholder] .choices__button {
  display: none;
}
.choices[data-type*=select-one]::after {
  content: "";
  height: 0;
  width: 0;
  border-style: solid;
  border-color: #333 transparent transparent transparent;
  border-width: 5px;
  position: absolute;
  right: 11.5px;
  top: 50%;
  margin-top: -2.5px;
  pointer-events: none;
}
.choices[data-type*=select-one].is-open::after {
  border-color: transparent transparent #333;
  margin-top: -7.5px;
}
.choices[data-type*=select-one][dir=rtl]::after {
  left: 11.5px;
  right: auto;
}
.choices[data-type*=select-one][dir=rtl] .choices__button {
  right: auto;
  left: 0;
  margin-left: 25px;
  margin-right: 0;
}

.choices[data-type*=select-multiple] .choices__inner,
.choices[data-type*=text] .choices__inner {
  cursor: text;
}
.choices[data-type*=select-multiple] .choices__button,
.choices[data-type*=text] .choices__button {
  position: relative;
  display: inline-block;
  margin-top: 0;
  margin-right: -4px;
  margin-bottom: 0;
  margin-left: 8px;
  padding-left: 16px;
  border-left: 1px solid #003642;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMSAyMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjRkZGIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0yLjU5Mi4wNDRsMTguMzY0IDE4LjM2NC0yLjU0OCAyLjU0OEwuMDQ0IDIuNTkyeiIvPjxwYXRoIGQ9Ik0wIDE4LjM2NEwxOC4zNjQgMGwyLjU0OCAyLjU0OEwyLjU0OCAyMC45MTJ6Ii8+PC9nPjwvc3ZnPg==");
  background-size: 8px;
  width: 8px;
  line-height: 1;
  opacity: 0.75;
  border-radius: 0;
}
.choices[data-type*=select-multiple] .choices__button:hover, .choices[data-type*=select-multiple] .choices__button:focus,
.choices[data-type*=text] .choices__button:hover,
.choices[data-type*=text] .choices__button:focus {
  opacity: 1;
}

.choices__inner {
  display: inline-block;
  vertical-align: top;
  width: 100%;
  background-color: #f9f9f9;
  padding: 7.5px 7.5px 3.75px;
  border: 1px solid #ddd;
  border-radius: 2.5px;
  font-size: 14px;
  min-height: 44px;
  overflow: hidden;
}
.is-focused .choices__inner, .is-open .choices__inner {
  border-color: #b7b7b7;
}
.is-open .choices__inner {
  border-radius: 2.5px 2.5px 0 0;
}
.is-flipped.is-open .choices__inner {
  border-radius: 0 0 2.5px 2.5px;
}

.choices__list {
  margin: 0;
  padding-left: 0;
  list-style: none;
}
.choices__list--single {
  display: inline-block;
  padding: 4px 16px 4px 4px;
  width: 100%;
}
[dir=rtl] .choices__list--single {
  padding-right: 4px;
  padding-left: 16px;
}
.choices__list--single .choices__item {
  width: 100%;
}

.choices__list--multiple {
  display: inline;
}
.choices__list--multiple .choices__item {
  display: inline-block;
  vertical-align: middle;
  border-radius: 20px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 500;
  margin-right: 3.75px;
  margin-bottom: 3.75px;
  background-color: #005F75;
  border: 1px solid #004a5c;
  color: #fff;
  word-break: break-all;
  box-sizing: border-box;
}
.choices__list--multiple .choices__item[data-deletable] {
  padding-right: 5px;
}
[dir=rtl] .choices__list--multiple .choices__item {
  margin-right: 0;
  margin-left: 3.75px;
}
.choices__list--multiple .choices__item.is-highlighted {
  background-color: #004a5c;
  border: 1px solid #003642;
}
.is-disabled .choices__list--multiple .choices__item {
  background-color: #aaaaaa;
  border: 1px solid #919191;
}

.choices__list--dropdown, .choices__list[aria-expanded] {
  display: none;
  z-index: 1;
  position: absolute;
  width: 100%;
  background-color: #fff;
  border: 1px solid #ddd;
  top: 100%;
  margin-top: -1px;
  border-bottom-left-radius: 2.5px;
  border-bottom-right-radius: 2.5px;
  overflow: hidden;
  word-break: break-all;
}
.is-active.choices__list--dropdown, .is-active.choices__list[aria-expanded] {
  display: block;
}
.is-open .choices__list--dropdown, .is-open .choices__list[aria-expanded] {
  border-color: #b7b7b7;
}
.is-flipped .choices__list--dropdown, .is-flipped .choices__list[aria-expanded] {
  top: auto;
  bottom: 100%;
  margin-top: 0;
  margin-bottom: -1px;
  border-radius: 0.25rem 0.25rem 0 0;
}
.choices__list--dropdown .choices__list, .choices__list[aria-expanded] .choices__list {
  position: relative;
  max-height: 300px;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  will-change: scroll-position;
}
.choices__list--dropdown .choices__item, .choices__list[aria-expanded] .choices__item {
  position: relative;
  padding: 10px;
  font-size: 14px;
}
[dir=rtl] .choices__list--dropdown .choices__item, [dir=rtl] .choices__list[aria-expanded] .choices__item {
  text-align: right;
}
@media (min-width: 640px) {
  .choices__list--dropdown .choices__item--selectable[data-select-text], .choices__list[aria-expanded] .choices__item--selectable[data-select-text] {
    padding-right: 100px;
  }
  .choices__list--dropdown .choices__item--selectable[data-select-text]::after, .choices__list[aria-expanded] .choices__item--selectable[data-select-text]::after {
    content: attr(data-select-text);
    font-size: 12px;
    opacity: 0;
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
  }
  [dir=rtl] .choices__list--dropdown .choices__item--selectable[data-select-text], [dir=rtl] .choices__list[aria-expanded] .choices__item--selectable[data-select-text] {
    text-align: right;
    padding-left: 100px;
    padding-right: 10px;
  }
  [dir=rtl] .choices__list--dropdown .choices__item--selectable[data-select-text]::after, [dir=rtl] .choices__list[aria-expanded] .choices__item--selectable[data-select-text]::after {
    right: auto;
    left: 10px;
  }
}
.choices__list--dropdown .choices__item--selectable.is-highlighted, .choices__list[aria-expanded] .choices__item--selectable.is-highlighted {
  background-color: #f2f2f2;
}
.choices__list--dropdown .choices__item--selectable.is-highlighted::after, .choices__list[aria-expanded] .choices__item--selectable.is-highlighted::after {
  opacity: 0.5;
}

.choices__item {
  cursor: default;
}

.choices__item--selectable {
  cursor: pointer;
}

.choices__item--disabled {
  cursor: not-allowed;
  user-select: none;
  opacity: 0.5;
}

.choices__heading {
  font-weight: 600;
  font-size: 12px;
  padding: 10px;
  border-bottom: 1px solid #f7f7f7;
  color: gray;
}

.choices__button {
  text-indent: -9999px;
  appearance: none;
  border: 0;
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: center;
  cursor: pointer;
}
.choices__button:focus {
  outline: none;
}

.choices__input {
  display: inline-block;
  vertical-align: baseline;
  background-color: #f9f9f9;
  font-size: 14px;
  margin-bottom: 5px;
  border: 0;
  border-radius: 0;
  max-width: 100%;
  padding: 4px 0 4px 2px;
}
.choices__input:focus {
  outline: 0;
}
.choices__input::-webkit-search-decoration, .choices__input::-webkit-search-cancel-button, .choices__input::-webkit-search-results-button, .choices__input::-webkit-search-results-decoration {
  display: none;
}
.choices__input::-ms-clear, .choices__input::-ms-reveal {
  display: none;
  width: 0;
  height: 0;
}
[dir=rtl] .choices__input {
  padding-right: 2px;
  padding-left: 0;
}

.choices__placeholder {
  opacity: 0.5;
}

/* =====  End of Choices  ====== */
.choices__inner, .choices[data-type*=select-one] .choices__inner {
  background-color: #C3BC32;
  padding: 1rem 2rem;
  border: 0;
  border-radius: 0;
  font-size: 1rem;
  line-height: 100%;
}
.choices__inner .choices__list--single, .choices[data-type*=select-one] .choices__inner .choices__list--single {
  color: #0E1B2F;
  text-transform: uppercase;
  text-decoration: none;
  font-family: "Ubuntu", sans-serif;
  padding: 0;
  line-height: 100%;
}
.choices__inner .choices__placeholder, .choices[data-type*=select-one] .choices__inner .choices__placeholder {
  opacity: 1;
}

.choices.is-focused, .choices.is-open {
  box-shadow: 5px 5px 0 #57ABB9;
}

.choices__list--dropdown, .choices__list[aria-expanded] {
  border: none;
  background-color: #C3BC32;
  border-radius: 0;
  word-break: normal;
}
.choices__list--dropdown.is-active, .choices__list[aria-expanded].is-active {
  box-shadow: 5px 5px 0 #57ABB9;
}
.choices__list--dropdown .choices__item--selectable.is-highlighted, .choices__list[aria-expanded] .choices__item--selectable.is-highlighted {
  background-color: #782B50;
  color: #fff;
}
.choices__list--dropdown .is-selected, .choices__list[aria-expanded] .is-selected {
  background-color: #57ABB9;
}
.choices__list--dropdown .is-selected.is-highlighted, .choices__list[aria-expanded] .is-selected.is-highlighted {
  background-color: #782B50;
}
.choices__list--dropdown .choices__item, .choices__list[aria-expanded] .choices__item {
  color: #0E1B2F;
  text-transform: uppercase;
  text-decoration: none;
  font-family: "Ubuntu", sans-serif;
  line-height: 100%;
  padding: 1rem 2rem;
}
.choices__list--dropdown .choices__item.choices__placeholder, .choices__list[aria-expanded] .choices__item.choices__placeholder {
  opacity: 1;
}

.button--prev,
.button--next {
  cursor: pointer;
}

.carousel--highlights .card--event, .carousel--highlights .swiper-slide {
  max-width: 320px;
}
.carousel--highlights .swiper-slide .sticker {
  opacity: 0;
  transform: scale(0);
  transition: transform var(--transition);
}
.carousel--highlights .swiper-slide-active .container--fivefour {
  position: relative;
  width: 100%;
  overflow: hidden;
}
@supports (aspect-ratio: 16/9) {
  .carousel--highlights .swiper-slide-active .container--fivefour {
    aspect-ratio: 1;
  }
}
@supports not (aspect-ratio: 16/9) {
  .carousel--highlights .swiper-slide-active .container--fivefour {
    padding-top: 100%;
    height: 0;
  }
}
.carousel--highlights .swiper-slide-active .sticker {
  transform: scale(1);
  opacity: 1;
}

.block:has(.carousel) {
  position: relative;
}
.block:has(.carousel) h2 {
  max-width: calc(100vw - 6rem);
}

.button--prev_next {
  position: relative;
  line-height: 0;
  margin-left: auto;
  margin-right: var(--margin);
  width: fit-content;
  z-index: 10;
}
.button--prev_next path {
  transition: fill var(--transition) ease;
}
.button--prev_next:hover path {
  fill: #C3BC32;
}
@media screen and (min-width: 1000px) {
  .button--prev_next {
    position: absolute;
    top: 2rem;
    margin: 0;
  }
}

.bg_lime .button--prev_next:hover path {
  fill: #0E1B2F;
}

.button--prev {
  right: 3rem;
  top: 2.9rem;
}
@media screen and (min-width: 1000px) {
  .button--prev {
    top: 2rem;
    right: calc(var(--margin) + 3rem);
  }
}

.button--next {
  transform: rotate(180deg);
}
@media screen and (min-width: 1000px) {
  .button--next {
    right: var(--margin);
  }
}

.swiper-button-disabled {
  opacity: 0.5;
  cursor: default;
}

.swiper-button-lock {
  display: none;
}

.carousel--generic .swiper-slide {
  height: auto;
}
.carousel--generic .swiper-slide .card--generic {
  height: 100%;
  box-sizing: border-box;
}

.block.event_highlights h2 {
  max-width: 100vw;
}
.block.event_highlights h2 + h3 {
  margin-bottom: 2rem;
}
.block.event_highlights a.wave:visited {
  color: #0E1B2F;
}

.current_filters p:has(~ div:empty) {
  display: none;
}

.current_filters div:empty ~ #clear {
  display: none;
}

.search_header input[type=search] + input[type=submit] {
  background-color: #fff;
  color: #550C2F;
}
.search_header input[type=search] + input[type=submit]:hover {
  background-color: #57ABB9;
  color: #fff;
}

.listing_filter {
  position: relative;
  z-index: 10;
}
.listing_filter form {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}
@media screen and (min-width: 1000px) {
  .listing_filter form {
    gap: 2rem;
  }
}
.listing_filter input[type=reset] {
  height: fit-content;
  padding: 0.75rem 2rem;
  border: 1px solid #57ABB9;
  color: #57ABB9;
  font-weight: 400;
  border-radius: 10px;
  background-color: #fff;
  align-self: flex-end;
}
.listing_filter input[type=reset]:hover {
  background-color: #57ABB9;
  color: #fff;
}

.sort {
  flex-basis: 100%;
  justify-content: flex-start;
  gap: 2rem;
  align-items: center;
}

.filter_wrapper {
  position: relative;
  min-width: 15rem;
}
.filter_wrapper:first-of-type {
  z-index: 11;
}

#filter_form input[type=reset] {
  padding: 1rem 2rem;
  text-transform: uppercase;
  text-decoration: none;
  width: fit-content;
  height: fit-content;
  font-family: "Ubuntu", sans-serif;
}

article.no_more {
  grid-column: 1/-1;
  font-size: 1.5rem;
  font-weight: 700;
}

#calendar_view {
  padding: 1rem 2rem;
  background-color: #DDA2C1;
  color: #0E1B2F;
  text-transform: uppercase;
  text-decoration: none;
  width: fit-content;
  height: fit-content;
  font-family: "Ubuntu", sans-serif;
  justify-self: flex-end;
  line-height: 100%;
  transition: box-shadow var(--transition) ease;
}
#calendar_view:hover {
  box-shadow: 8px 8px 0 #C3BC32;
}

#calendar .month h2 {
  font-size: 1.5rem;
  color: #0E1B2F;
}
@media screen and (min-width: 700px) {
  #calendar .month h2 {
    text-align: right;
  }
}
#calendar .calendar_day h2 {
  display: flex;
  justify-content: space-between;
  padding: 1rem;
  margin-bottom: 0;
}
#calendar .calendar_day h2 .day {
  font-size: 1.5rem;
}
#calendar .calendar_time {
  padding: 1rem;
}
#calendar .calendar_time h3 {
  font-size: 1.2rem;
}
#calendar .calendar_time ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
#calendar .calendar_time ul li {
  margin-bottom: 1rem;
  position: relative;
}
#calendar .calendar_time ul li button:not(.close) {
  color: #0E1B2F;
  background-color: transparent;
  padding: 0;
}

.blank_1, .blank_2 {
  display: none;
}

@media screen and (min-width: 1000px) {
  .blank_1 {
    display: block;
  }
}
@media screen and (min-width: 1200px) {
  .blank_2 {
    display: block;
  }
}
.grid_4_1:has(> #filter_form) {
  margin-bottom: 3rem;
}

/*General rules for cards*/
.card {
  text-decoration: none;
}
.card img {
  transition: transform var(--transition) ease;
  transform: scale(1);
  transform-origin: center;
}
.card:hover img, .card:focus img {
  transform: scale(1.05);
}
.card .inner-padding, .card.inner-padding {
  padding: 1rem;
}

.card_empty {
  background-color: #fff;
}

.sticker {
  position: absolute;
  top: -10px;
  right: -10px;
  width: 100px;
  height: 100px;
  padding: 1rem;
  color: #fff;
  font-size: 1.2rem;
  font-family: "Ubuntu", sans-serif;
  line-height: 1.55rem;
  text-transform: uppercase;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  z-index: 10;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}
@media screen and (min-width: 1000px) {
  .sticker {
    top: -30px;
    right: -30px;
    width: 120px;
    height: 120px;
    font-size: 1.5rem;
  }
}
.sticker.selling_fast {
  background-color: #DDA2C1;
  transform: rotate(5deg);
}
.sticker.sold-out {
  background-color: #57ABB9;
}
.sticker.free {
  background-color: #C3BC32;
  transform: rotate(-10deg);
}
.sticker.not_to_be_missed {
  background-color: #782B50;
  transform: rotate(3deg);
}
.sticker.past {
  background-color: #0E1B2F;
}
.sticker.up_next {
  background-color: #57ABB9;
  transform: rotate(2deg);
}

.masonry__item {
  padding: 0.5rem;
  line-height: 0;
}
@media screen and (min-width: 700px) {
  .masonry__item {
    width: calc((98.5vw - 1rem) / 3);
  }
}

.masonry {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.card--event, .card--generic, .card--post-recent, .card--event-featured {
  text-align: center;
  position: relative;
}
.card--event h3, .card--generic h3, .card--post-recent h3, .card--event-featured h3 {
  font-size: 1.5rem;
  text-transform: uppercase;
}
.card--event h4, .card--generic h4, .card--post-recent h4, .card--event-featured h4 {
  font-size: 1rem;
  font-family: "Karla", sans-serif;
}
.card--event.bg_charcoal h3, .card--event.bg_charcoal h4, .card--event.bg_charcoal h5, .card--generic.bg_charcoal h3, .card--generic.bg_charcoal h4, .card--generic.bg_charcoal h5, .card--post-recent.bg_charcoal h3, .card--post-recent.bg_charcoal h4, .card--post-recent.bg_charcoal h5, .card--event-featured.bg_charcoal h3, .card--event-featured.bg_charcoal h4, .card--event-featured.bg_charcoal h5 {
  color: #fff;
}
.card--event a, .card--generic a, .card--post-recent a, .card--event-featured a {
  text-decoration: none;
}

.card--post-recent {
  text-align: right;
}

.card--generic {
  display: grid;
  gap: 1rem;
  grid-template-rows: auto 1fr;
}

.card--event-featured {
  grid-column: 1/-1;
}
.card--event-featured .inner-padding {
  padding: 2rem;
  grid-template-rows: auto auto auto auto 1fr;
}
.card--event-featured .sticker {
  display: none;
}
@media screen and (min-width: 700px) {
  .card--event-featured .sticker {
    display: grid;
    top: 30px;
    right: 30px;
  }
}
@media screen and (min-width: 700px) {
  .card--event-featured h3 {
    font-size: 2.5rem;
  }
}
.card--event-featured h4 {
  margin-top: 0;
}
.card--event-featured p {
  text-align: justify;
}
@media screen and (min-width: 700px) {
  .card--event-featured p {
    padding: 4rem 0;
  }
}
.card--event-featured .buttons {
  max-width: 550px;
  align-self: end;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  font-family: "Ubuntu", sans-serif;
  font-size: 1.2rem;
  justify-content: center;
}
@media screen and (min-width: 700px) {
  .card--event-featured .buttons {
    justify-content: space-between;
  }
}
.card--event-featured .buttons a {
  transition: box-shadow var(--transition) ease;
  text-align: center;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}
.card--event-featured .buttons a span {
  font-size: 0.8rem;
  font-weight: 400;
  font-family: "Karla";
}
.card--event-featured .buttons a:hover {
  box-shadow: 8px 8px 0 #C3BC32;
}

.card--artist a {
  text-decoration: none;
}
.card--artist h3 {
  color: #fff;
  text-align: center;
}

.card--location .inner-padding {
  padding: 3rem;
}
.card--location h3 {
  margin-bottom: 2rem;
}

.card--post h3 {
  text-align: center;
}
.card--post h3 a, .card--post h3 a:visited {
  color: #0E1B2F;
  text-decoration: none;
}
.card--post .inner-padding {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.card--post-featured .inner-padding {
  padding: 3rem;
}
.card--post-featured h3 {
  font-size: 2rem;
}

.partner {
  background-color: white;
  padding: 1rem;
  border-radius: 1rem;
}

.partner, .partner a {
  display: flex;
  align-items: center;
  justify-content: center;
}

.circle {
  border-radius: 50%;
}

.image_revealer_images {
  margin-top: 1rem;
}
.image_revealer_images img {
  opacity: 0;
  transform: scale(0);
  transition: all var(--transition) ease;
  border-radius: 50%;
}
.image_revealer_images img.active {
  opacity: 1;
  transform: scale(1);
}
@media screen and (min-width: 1000px) {
  .image_revealer_images {
    margin-top: 0;
  }
}

.image_revealer a {
  font-size: 1.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-family: "Ubuntu", sans-serif;
  transition: background-color var(--transition) ease;
}
.image_revealer a:visited {
  color: #0E1B2F;
}
.image_revealer a:hover {
  background-color: #57ABB9;
}

.stay_in_touch .socials {
  display: grid;
  grid-template-rows: 1fr auto;
}
.stay_in_touch .socials .so-me {
  justify-content: right;
}
.stay_in_touch h2 {
  font-size: 2rem;
  text-align: right;
}
@media screen and (min-width: 1000px) {
  .stay_in_touch .so-me, .stay_in_touch .socials h2 {
    padding-right: 5rem;
  }
  .stay_in_touch .socials h2 {
    text-align: left;
  }
}
@media screen and (min-width: 1200px) {
  .stay_in_touch h2 {
    font-size: 3rem;
  }
}

.mc4wp-form-fields, .mc4wp-form-fields .flex {
  display: flex;
  flex-direction: column;
  align-items: end;
  justify-content: end;
}

@media screen and (min-width: 1000px) {
  .mc4wp-form-fields .flex {
    flex-direction: row;
    gap: 1rem;
  }
  .mc4wp-form-fields input[type=email] {
    width: calc(44ch + 1rem);
  }
  .mc4wp-form-fields input[type=text] {
    width: 22ch;
  }
}
.donations .grid {
  gap: 0;
}
.donations .inner-padding {
  display: grid;
  grid-template-rows: 1fr auto auto;
}
.donations .donations .button {
  width: fit-content;
  padding: 1rem 4rem;
  font-size: 1.5rem;
  text-transform: uppercase;
  font-weight: bold;
  height: min-content;
  align-self: flex-end;
  line-height: 2.2rem;
  transition: box-shadow var(--transition) ease;
}
.donations .donations .button:hover {
  box-shadow: 8px 8px 0 #C3BC32;
}

div#donation_block {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}
div#donation_block input {
  margin-bottom: 0;
  padding: 0.9rem;
  font-size: 1.5rem;
}
div#donation_block span.woocommerce-Price-currencySymbol {
  font-size: 1.5rem;
}
div#donation_block label {
  font-weight: 700;
  margin-bottom: 1rem;
  visibility: hidden;
}

.banner .grid {
  gap: 0;
}
.banner .inner-padding > * {
  max-width: 90vw;
  text-align: center;
  margin: 0 auto 2rem;
  display: block;
}
@media screen and (min-width: 1200px) {
  .banner .inner-padding > * {
    width: 520px;
  }
}
.banner .inner-padding p {
  text-align: justify;
}
.banner .inner-padding a {
  width: fit-content;
}

.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transform: translateX(-110%);
  transition: opacity 400ms ease-in;
  z-index: 100;
  background-color: rgba(0, 0, 0, 0.7);
}
.modal.open {
  opacity: 1;
  transform: translateX(0);
}
.modal .close {
  position: absolute;
  top: 1rem;
  right: var(--margin);
}
@media screen and (min-width: 1000px) {
  .modal .close {
    top: 2rem;
  }
}
.modal.video_modal .close {
  background-color: transparent;
}
.modal .modal_inner {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: var(--margin);
  width: calc(100vw - 2 * var(--margin));
  height: fit-content;
  display: block;
  overflow: auto;
  padding-right: 1rem;
}
.modal .modal_inner::-webkit-scrollbar {
  width: 10px;
}
.modal .modal_inner::-webkit-scrollbar-thumb {
  background-color: #57ABB9;
  border-radius: 10px;
}
.modal .modal_inner::-webkit-scrollbar-track {
  background-color: transparent;
  margin-top: 2rem;
  margin-bottom: 2rem;
}
.modal .modal_inner .column--two.inner-padding {
  padding: 0;
}
@media screen and (min-width: 1000px) {
  .modal .modal_inner {
    width: 50vw;
    display: grid;
    min-width: 320px;
    left: 25vw;
    overflow: auto;
    max-height: 90vh;
  }
  .modal .modal_inner .column--two.inner-padding {
    padding: 2rem;
  }
}
.modal .modal_inner .modal_content {
  overflow: auto;
}

form.loading + #spinner {
  display: block;
}

form + #spinner {
  display: none;
  position: absolute;
  top: calc(50% - 25px);
  left: calc(50% - 25px);
  width: 50px;
  height: 50px;
  border: 10px solid #0E1B2F;
  border-bottom: 10px solid transparent;
  border-radius: 50%;
  animation: spin 800ms ease-in-out 0ms infinite;
}

.positioned_modal .modal_inner {
  background-color: #fff;
  box-shadow: 5px 5px 0 #550C2F;
  padding-right: 0;
}

@media screen and (min-width: 1000px) {
  .positioned_modal {
    position: absolute;
    width: 100%;
    height: auto;
    background-color: transparent;
    top: 50%;
    transform: translate(-100vw);
    left: 50%;
    background-color: #fff;
    box-shadow: 5px 5px 0 #550C2F;
  }
  .positioned_modal .modal_inner {
    position: static;
    width: 100%;
    min-width: unset;
    left: unset;
    max-height: unset;
    transform: none;
    padding-right: 0;
    box-shadow: none;
  }
  .positioned_modal.open {
    transform: translate(0, -66%);
  }
  .positioned_modal .close {
    z-index: 10;
    background-color: #C3BC32;
    top: 1rem;
    left: unset;
    right: 1rem;
    border-radius: 50%;
    width: 50px;
    height: 50px;
  }
  .positioned_modal::before {
    content: "";
    position: absolute;
    right: 100%;
    top: 60%;
    width: 0;
    height: 0;
    border: 1.5rem solid transparent;
    border-right: 1.5rem solid #fff;
  }
  .calendar_day:nth-child(3n+7) .positioned_modal {
    left: unset;
    right: 100%;
  }
  .calendar_day:nth-child(3n+7) .positioned_modal::before {
    right: unset;
    left: 100%;
    border-right: 1.5rem solid transparent;
    border-left: 1.5rem solid #fff;
  }
}
@media screen and (min-width: 1200px) {
  .calendar_day:nth-child(3n+7) .positioned_modal {
    right: unset;
    left: 50%;
  }
  .calendar_day:nth-child(3n+7) .positioned_modal::before {
    left: unset;
    right: 100%;
    border-left: 1.5rem solid transparent;
    border-right: 1.5rem solid #fff;
  }
  .calendar_day:nth-child(4n+8) .positioned_modal {
    left: unset;
    right: 50%;
  }
  .calendar_day:nth-child(4n+8) .positioned_modal::before {
    right: unset;
    left: 100%;
  }
}
[role=tablist] {
  position: relative;
  z-index: 10;
}
[role=tablist] a {
  text-decoration: none;
}

[role=tab],
[role=tab]:focus,
[role=tab]:hover {
  display: block;
  position: relative;
  z-index: 10;
  padding: 0 0 0.2rem 0;
  margin: 0;
  margin-bottom: 1rem;
  margin-top: 4px;
  background: #fff;
  outline: none;
  font-weight: 400;
  text-align: left;
  cursor: pointer;
  transition: color var(--transition) ease-out;
}
@media screen and (min-width: 1000px) {
  [role=tab],
  [role=tab]:focus,
  [role=tab]:hover {
    padding: 0 0 1rem 0;
    margin-bottom: unset;
  }
}
[role=tab]::after,
[role=tab]:focus::after,
[role=tab]:hover::after {
  content: "";
  width: 100%;
  height: 0.25rem;
  background: #550C2F;
  position: absolute;
  bottom: -0.125rem;
  z-index: 10;
  left: 0;
  transition: transform var(--transition) ease-out;
  transform: scaleX(0);
}
@media screen and (min-width: 1000px) {
  [role=tab],
  [role=tab]:focus,
  [role=tab]:hover {
    display: inline-block;
  }
  [role=tab] + [role=tab], [role=tab] + a,
  [role=tab]:focus + [role=tab],
  [role=tab]:focus + a,
  [role=tab]:hover + [role=tab],
  [role=tab]:hover + a {
    margin-left: 3rem;
  }
}

[role=tab][aria-selected=true] {
  color: #550C2F;
  font-weight: 500;
}
[role=tab][aria-selected=true]::after {
  transform: scaleX(1);
}

[role=tabpanel] {
  padding: 2rem 0 0;
  border-top: 1px solid #57ABB9;
  min-height: 10em;
  width: 100%;
  overflow: auto;
  transition: transform var(--transition) ease-out;
  position: relative;
}

.tab_panel.is-hidden {
  position: absolute;
  top: 0;
  z-index: 10;
  transform: translateX(-100%);
}

.tab_panel_container {
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  position: relative;
}
.tab_panel_container.tab_panel {
  grid-column: 1/2;
  grid-row: 1/2;
}

.users_inner {
  max-width: 780px;
}
.users_inner > button {
  margin-left: auto;
  margin-bottom: 2rem;
  width: fit-content;
  padding: 12px 42px;
  border-radius: 44px;
}
.users_inner #message_area {
  position: absolute;
  top: 0;
  left: 0;
  max-width: calc(100% - 155px);
}

.user_table {
  border-collapse: collapse;
}
.user_table thead {
  display: none;
}
@media screen and (min-width: 1000px) {
  .user_table thead {
    display: table-header-group;
  }
}
.user_table tr {
  display: grid;
  margin-bottom: 2rem;
}
@media screen and (min-width: 1000px) {
  .user_table tr {
    display: table-row;
  }
}
.user_table tr td {
  padding: 0.5rem;
  border-bottom: 1px solid #57ABB9;
}
.user_table tr td:nth-child(2) {
  word-break: break-word;
}
.user_table tr td:empty {
  display: none;
}
@media screen and (min-width: 1000px) {
  .user_table tr td:empty {
    display: table-cell;
    padding: 1rem;
  }
}
.user_table tr th {
  text-align: left;
  padding: 0.5rem;
}
.user_table button {
  background-color: #f8f8f8;
  color: black;
  text-decoration: underline;
}
.user_table button svg {
  margin-right: 1rem;
}
.user_table .button_container {
  margin: 0.5rem 0;
  flex-wrap: nowrap;
}
.user_table .button_container button {
  padding: 0;
}
.user_table .button_container button svg {
  margin: 0;
}

svg.deactivate, svg.activate {
  height: 1.1rem;
}

.my_account_tabs .form_container {
  max-width: 100%;
}

#tab_content_my_details .button_container {
  margin-bottom: 0;
}
#tab_content_my_details .button_container .arrow {
  padding: 12px 42px;
}
#tab_content_my_details .button_container .arrow::after {
  display: none;
}

.feedback_table {
  width: fit-content;
  min-width: 50%;
  max-width: 75%;
  border-spacing: 0;
}
.feedback_table tr:nth-child(2n) {
  background: #550C2F;
}
.feedback_table td {
  height: 100px;
  vertical-align: middle;
  text-align: center;
  max-width: 40rem;
  padding: 1rem;
  border-collapse: collapse;
  border: 0;
}
.feedback_table td a {
  display: flex;
  gap: 1rem;
  align-items: center;
  justify-content: center;
  min-width: 100px;
  width: fit-content;
  margin: 0 auto;
  flex-direction: column;
}
.feedback_table td a:has(img) {
  padding-left: 0;
}
.feedback_table td img {
  height: 100px;
  width: auto;
}

.play:not(.video_button--play) {
  background-color: transparent;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: auto;
  padding: 0;
  z-index: 10;
  width: 100%;
  height: 100%;
}
.play:not(.video_button--play) span:first-child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.play:not(.video_button--play) svg path {
  transition: fill var(--transition) ease;
}

.player_container.autoplay .play_button,
.player_container.autoplay .volume_button {
  position: absolute;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background-color: #fff;
  bottom: 4rem;
  left: unset;
  position: absolute;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background-color: #fff;
  bottom: 4rem;
  left: unset;
  z-index: 50;
  filter: drop-shadow(0 3px 21px rgba(0, 0, 0, 0.3607843137));
}
.player_container.autoplay .play_button svg,
.player_container.autoplay .volume_button svg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 1.2rem;
  height: 1.2rem;
}
.player_container.autoplay .play_button svg path,
.player_container.autoplay .volume_button svg path {
  fill: #1a1a1a;
}
.player_container.autoplay .play_button {
  right: var(--margin);
  bottom: 4rem;
}
@media screen and (min-width: 1400px) {
  .player_container.autoplay .play_button {
    bottom: 8rem;
  }
}
@media screen and (min-width: 1600px) {
  .player_container.autoplay .play_button {
    bottom: 6rem;
  }
}
.player_container.autoplay .volume_button {
  right: calc(var(--margin) + 4rem);
  bottom: 4rem;
}
@media screen and (min-width: 1400px) {
  .player_container.autoplay .volume_button {
    bottom: 8rem;
  }
}
@media screen and (min-width: 1600px) {
  .player_container.autoplay .volume_button {
    bottom: 6rem;
  }
}
.player_container.autoplay span {
  transition: opacity var(--transition) ease;
}
.player_container.autoplay .pause_icon {
  opacity: 0;
}
.player_container.autoplay .mute_icon {
  opacity: 0;
}
.player_container.autoplay.playing .play_icon {
  opacity: 0;
}
.player_container.autoplay.playing .pause_icon {
  opacity: 1;
}
.player_container.autoplay.volume_on .mute_icon {
  opacity: 1;
}
.player_container.autoplay.volume_on .volume_icon {
  opacity: 0;
}

.container iframe, .container video {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  object-fit: cover;
}

.play svg path {
  fill: #fff;
  opacity: 1;
  transition: fill var(--transition) ease, opacity var(--transition) ease-in;
}
.play svg:hover path {
  fill: #fff;
  opacity: 0.6;
}
.play svg:hover circle {
  fill: #1a1a1a;
}
.play svg circle {
  fill: #fff;
  opacity: 1;
}

/* .muted {
	.play {
		svg {
			path {
				fill: $color_white;
				transition: fill var(--transition) ease;
			}
			&:hover {
				path {
					fill: $color_secondary;
				}
				circle {
					fill: $color_white;
				}
			}
			circle {
				fill: $color_secondary;
				opacity: 1;
				transition: fill var(--transition) ease;
			}
		}
	}
} */
.block-image p.caption, .block-image + figcaption p.caption {
  position: absolute;
  bottom: 0;
  margin: 0;
  display: block;
  padding: 0.2rem 0.75rem;
  background: #1a1a1a;
  color: #fff;
}

figure {
  line-height: 0;
}

.progress-bar {
  height: 0.5rem;
  background-color: #fff;
  position: absolute;
  z-index: 9;
  width: 100%;
  bottom: 1rem;
  width: 90%;
  left: 5%;
}
.progress-bar:has(.progress[style="width:0%"]) {
  display: none;
}
@media screen and (min-width: 1000px) {
  .progress-bar {
    height: 1rem;
  }
}

.progress {
  height: 0.5rem;
  background-color: #550C2F;
}
@media screen and (min-width: 1000px) {
  .progress {
    height: 1rem;
  }
}

.vimeo_player.container,
.player_container {
  cursor: pointer;
  position: relative;
  height: 100%;
}
.vimeo_player.container:has(> .open),
.player_container:has(> .open) {
  cursor: default;
}
.vimeo_player.container .progress-bar,
.player_container .progress-bar {
  opacity: 0;
  transition: opacity var(--transition) ease-in;
}
.vimeo_player.container .play,
.player_container .play {
  opacity: 0;
  transition: opacity var(--transition) ease-in;
}
.vimeo_player.container::after,
.player_container::after {
  content: "";
  background: rgba(0, 0, 0, 0.2);
  height: 100%;
  width: 100%;
  position: absolute;
  display: block;
  opacity: 0;
  transition: opacity var(--transition) ease-in;
  top: 0;
  left: 0;
}
.vimeo_player.container:hover .progress-bar,
.player_container:hover .progress-bar {
  opacity: 1;
}
.vimeo_player.container:hover .play,
.player_container:hover .play {
  opacity: 1;
}
.vimeo_player.container:hover::after,
.player_container:hover::after {
  opacity: 1;
}
.vimeo_player.container.playing::after,
.player_container.playing::after {
  display: none;
}

.video_modal {
  position: relative;
  width: 100%;
  overflow: hidden;
}
@supports (aspect-ratio: 16/9) {
  .video_modal {
    aspect-ratio: 1.7777777778;
  }
}
@supports not (aspect-ratio: 16/9) {
  .video_modal {
    padding-top: 56.25%;
    height: 0;
  }
}

.video_modal {
  position: fixed;
  overflow: visible;
  width: calc(100vw - 2 * var(--margin));
  top: 50%;
  left: var(--margin);
  z-index: -1;
  transform: translateY(-50%);
  opacity: 0;
  transition: opacity;
  max-height: calc(100dvh - 7rem);
}
.video_modal::before {
  content: "";
  width: 100vw;
  height: calc(var(--vh) * 100);
  position: absolute;
  top: 50%;
  left: calc(var(--margin) * -1);
  background-color: transparent;
  transform: translateY(-50%);
  transition: all 600ms ease-in 100ms;
}
.video_modal iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 35%;
}
.video_modal .close_video {
  position: absolute;
  top: -3.5rem;
  right: 0;
  width: fit-content;
  padding: 0.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  color: #fff;
  font-family: "Karla", sans-serif;
  font-weight: 500;
  font-size: 1.2rem;
  line-height: 1.5rem;
  text-transform: none;
}
.video_modal .close_video svg {
  height: 18px;
  width: 18px;
}
.video_modal .close_video svg path {
  stroke: #fff;
}

.open .video_modal {
  animation: opacity_and_z 600ms ease-in 0ms 1 normal forwards;
}
.open .video_modal::before {
  background-color: rgba(0, 0, 0, 0.6);
}

.open.video_modal {
  animation: opacity_and_z 600ms ease-in 0ms 1 normal forwards;
}
.open.video_modal::before {
  background-color: rgba(0, 0, 0, 0.6);
}

.close .video_modal {
  z-index: 100;
  opacity: 1;
  animation: opacity_and_z_reverse 600ms ease-in 0ms 1 normal forwards;
}
.close .video_modal::before {
  background-color: rgba(0, 0, 0, 0.6);
}

button.video_toggle {
  background-color: transparent;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: auto;
  padding: 0;
  z-index: 11;
}
button.video_toggle svg {
  display: block;
  width: 14.2857142857vw;
  height: auto;
}
@media screen and (min-width: 1200px) {
  button.video_toggle svg {
    width: 5.5555555556vw;
  }
}
button.video_toggle svg path {
  fill: #fff;
  opacity: 0.5;
  transition: all 400ms ease;
}

.ready button.video_toggle svg path {
  fill: #fff;
  opacity: 0.7;
}
.ready button.video_toggle:hover svg path {
  fill: #fff;
  opacity: 0.5;
}

.video.ready {
  position: relative;
}

@keyframes opacity_and_z {
  0% {
    z-index: -1;
    opacity: 0;
    display: none;
  }
  1% {
    z-index: 10000;
    opacity: 0;
    display: block;
  }
  100% {
    z-index: 10000;
    opacity: 1;
  }
}
@keyframes opacity_and_z_reverse {
  0% {
    z-index: 10000;
    opacity: 1;
  }
  99% {
    z-index: 10000;
    opacity: 0;
  }
  100% {
    z-index: -1;
    opacity: 0;
    display: none;
  }
}
.block-video .video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.block-video .video .play {
  background-color: transparent;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: auto;
  padding: 0;
  opacity: 0;
  z-index: 10;
  width: 150px;
}
.block-video .video .play svg path {
  transition: fill var(--transition) ease;
}
.block-video .video.ready .play {
  opacity: 1;
}
.block-video .video img {
  transition: opacity var(--transition) ease;
  z-index: 10;
}
.block-video .video.playing img,
.block-video .video.playing .play {
  opacity: 0;
  transform: translateX(-200vw);
  visibility: hidden;
}
.block-video .video.playing iframe {
  visibility: visible;
}
.block-video .video iframe {
  visibility: hidden;
}

/*If content is added to a page outside of the KAROO blocks*/
.type-page > ul, .type-page > ol, .type-page > p, .type-page > h2, .type-page > h3, .type-page > h4, .type-page > h5 {
  width: 680px;
  max-width: 90vw;
  margin-left: auto;
  margin-right: auto;
}

.artist_event .grid {
  margin-bottom: 2rem;
}
.artist_event .grid .inner-padding {
  padding: 2rem;
  grid-template-rows: auto auto 1fr auto auto;
}
.artist_event .grid .inner-padding h3, .artist_event .grid .inner-padding h4 {
  margin-top: 0;
  text-align: center;
}
.artist_event .grid .inner-padding h4 {
  font-size: 1.2rem;
  font-family: "Karla", sans-serif;
}
.artist_event .grid .inner-padding a {
  width: fit-content;
  padding: 1rem 2rem;
  margin: 0 auto 1rem;
  text-transform: uppercase;
  font-family: "Ubuntu", sans-serif;
  display: block;
  transition: box-shadow var(--transition) ease;
  font-size: 1.5rem;
}
.artist_event .grid .inner-padding a:hover {
  box-shadow: 8px 8px 0 #C3BC32;
}

#footer {
  background-image: url("/wp-content/themes/karoo/assets/landscape.svg");
  background-size: contain;
  background-position: center bottom;
  background-repeat: no-repeat;
  position: relative;
  aspect-ratio: 1;
}
@media screen and (min-width: 700px) {
  #footer {
    aspect-ratio: 2;
  }
}
@media screen and (min-width: 1000px) {
  #footer {
    aspect-ratio: 2.33;
  }
}
#footer::before {
  content: "";
  width: 100%;
  height: 3rem;
  position: absolute;
  top: -3rem;
  left: 0;
  background-image: linear-gradient(180deg, transparent, #DDA2C1);
}
@media screen and (min-width: 700px) {
  #footer::before {
    height: 5rem;
    top: -5rem;
    background-image: linear-gradient(180deg, transparent 0%, #DDA2C1 50%);
  }
}
@media screen and (min-width: 1200px) {
  #footer::before {
    height: 9rem;
    top: -9rem;
  }
}
#footer .grid.footer_grid {
  height: 100%;
  align-items: end;
  grid-template-rows: 2fr auto auto 1fr;
}
@media screen and (min-width: 700px) {
  #footer .grid.footer_grid {
    width: 35vw;
  }
}
#footer ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: 1rem;
}
#footer ul li {
  margin-bottom: 0.5rem;
}
#footer ul li a {
  color: #fff;
  text-decoration: none;
  text-transform: uppercase;
  font-family: "Ubuntu", sans-serif;
}
#footer ul li a:hover {
  text-decoration: underline;
}

#primary .block:last-child, #primary :not(.grid--two-column > .column--one) > .content:last-child {
  padding-bottom: 3rem;
}
@media screen and (min-width: 700px) {
  #primary .block:last-child, #primary :not(.grid--two-column > .column--one) > .content:last-child {
    padding-bottom: 5rem;
  }
}
@media screen and (min-width: 1200px) {
  #primary .block:last-child, #primary :not(.grid--two-column > .column--one) > .content:last-child {
    padding-bottom: 9rem;
  }
}

.so-me a {
  width: 2rem;
  height: 2rem;
}
.so-me a svg {
  height: 2rem;
}
.so-me a svg path {
  fill: white;
}

#footer .so-me {
  justify-content: flex-start;
  gap: 1rem;
}

.video_modal .container {
  width: 80vw;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#os_map {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}

div#map {
  position: relative;
  display: grid;
}
div#map svg > g {
  cursor: pointer;
  transform-origin: center;
  transform-box: fill-box;
  transform: scale(1.5);
}
@media screen and (min-width: 1000px) {
  div#map svg > g {
    transform: scale(1);
  }
}

g#venue_11 > path {
  transform: translate(30px, -113px);
}

.map_bars {
  list-style: none;
  padding: 0;
  margin: 0;
}
.map_bars li button {
  padding: 0.5rem 0;
  display: grid;
  align-items: center;
  text-transform: uppercase;
  gap: 1.5rem;
  font-weight: 800;
  font-size: 1.2rem;
  background-color: transparent;
  font-family: "Ubuntu", sans-serif;
  grid-template-columns: 2rem auto;
}
.map_bars li button .number {
  display: flex;
  align-items: center;
  width: 2rem;
  height: 2rem;
  justify-content: center;
  border: 3px solid currentColor;
  border-radius: 1rem;
  line-height: 0;
  font-family: "Ubuntu", sans-serif;
}

.map_venues .map_bars .number {
  color: #550C2F;
  background-color: #DDA2C1;
}

.map_poi .map_bars .number {
  color: #550C2F;
  border-color: #57ABB9;
  background-color: #C3BC32;
}

.map_venues, .map_poi {
  padding-left: var(--margin);
  padding-right: var(--margin);
  margin-bottom: 1rem;
}
.map_venues h3, .map_poi h3 {
  font-size: 1.4rem;
}

#map_modal {
  position: fixed;
  z-index: 1000;
  width: 390px;
  height: 560px;
  max-height: calc(var(--vh) * 90);
  max-width: 90vw;
  top: 50%;
  left: 50%;
  opacity: 1;
  transition: opacity calc(var(--transition) / 2) ease-in-out, transform var(--transition) ease-in-out, filter var(--transition) ease-in;
  display: grid;
  grid-template-columns: 100%;
  grid-template-rows: auto 1fr;
  border: 1px solid #0E1B2F;
  filter: drop-shadow(4px 4px 10px rgba(0, 0, 0, 0));
}
#map_modal::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100vw;
  height: calc(var(--vh) * 100);
  transform: translate(-50%, -50%);
  background-color: rgba(26, 26, 26, 0.75);
  z-index: -1;
  opacity: 0;
  transition: opacity var(--transition) ease-in-out;
}
#map_modal.closed {
  opacity: 0;
  transform: translate(-200vw, 0);
}
#map_modal.open {
  filter: drop-shadow(4px 4px 10px rgba(0, 0, 0, 0.8));
  transform: translate(-50%, -50%);
}
#map_modal.open::before {
  opacity: 1;
}
#map_modal .map_image *, #map_modal .bg_white * {
  opacity: 1;
  transition: opacity calc(var(--transition) / 2) ease-in-out;
}
#map_modal .bg_white {
  padding: 1rem;
  display: grid;
  grid-template-columns: 100%;
  grid-template-rows: 55px auto 1fr;
  gap: 1rem;
}
#map_modal .bg_white svg {
  height: 55px;
}
#map_modal .bg_white p {
  margin: 0;
}
#map_modal.loading .map_image *, #map_modal.loading .bg_body * {
  opacity: 0;
}

#map_close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 10;
  width: 2rem;
  height: 2rem;
  padding: 0;
  background: transparent;
  display: flex;
  z-index: 20;
}

#map_image {
  z-index: 1;
}

@media screen and (min-width: 1000px) {
  #map {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 200px 1fr 1fr 200px;
  }
  #map svg {
    grid-row: 1/-1;
    grid-column: 1/-1;
  }
  .map_venues {
    grid-column: -2/-1;
    grid-row: 2/3;
  }
  .map_poi {
    grid-column: 1/2;
    grid-row: -3/-2;
  }
  .map_venues {
    grid-column: -2/-1;
    grid-row: 2/3;
    padding-left: 1rem;
  }
  .map_poi {
    grid-column: 1/2;
    grid-row: -3/-2;
    padding-right: 1rem;
  }
}
@media screen and (min-width: 1200px) {
  #map {
    grid-template-rows: 300px 1fr 1fr 200px;
    max-width: 1400px;
    margin: 0 auto;
  }
  #map_modal {
    position: absolute;
    z-index: 10;
    width: 445px;
    height: 640px;
    transform: scale(0, 0) translate(0, 0);
    top: 0;
    left: 0;
  }
  #map_modal::before {
    display: none;
  }
  #map_modal.closed {
    transform: scale(0, 0) translate(0, 0);
  }
  #map_indicator {
    position: absolute;
    top: 0;
    left: 0;
    width: 36px;
    height: 58px;
    border: 29px solid transparent;
    border-left: 36px solid currentColor;
    transition: transform var(--transition) ease-in-out, border-color var(--transition) ease-in-out;
  }
  #map_border {
    position: absolute;
    top: 0;
    left: 0;
    width: 6px;
    height: 100%;
    background-color: currentColor;
    transition: background-color var(--transition) ease-in-out;
    z-index: 10;
  }
  .left #map_indicator {
    left: calc(99% + 5px);
  }
  .left #map_border {
    left: 99%;
  }
  .right #map_indicator {
    border-left: 29px solid transparent;
    border-right: 36px solid currentColor;
    left: unset;
    right: calc(99% + 5px);
  }
  .right #map_border {
    left: unset;
    right: 99%;
  }
}
/*--------------------------------------------------------------
# Plugins
--------------------------------------------------------------*/
/*--------------------------------------------------------------
# Utilities
--------------------------------------------------------------*/
/* Accessibility
--------------------------------------------- */
/* Text meant only for screen readers. */
.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute !important;
  width: 1px;
  word-wrap: normal !important;
}
.screen-reader-text:focus {
  background-color: #f1f1f1;
  border-radius: 3px;
  box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
  clip: auto !important;
  clip-path: none;
  color: #21759b;
  display: block;
  font-size: 0.875rem;
  font-weight: 700;
  height: auto;
  left: 5px;
  line-height: normal;
  padding: 15px 23px 14px;
  text-decoration: none;
  top: 5px;
  width: auto;
  z-index: 100000;
}

/* Do not show the outline on the skip link target. */
#primary[tabindex="-1"]:focus {
  outline: 0;
}

/* Alignments
--------------------------------------------- */
.alignleft {
  /*rtl:ignore*/
  float: left;
  /*rtl:ignore*/
  margin-right: 1.5em;
  margin-bottom: 1.5em;
}

.alignright {
  /*rtl:ignore*/
  float: right;
  /*rtl:ignore*/
  margin-left: 1.5em;
  margin-bottom: 1.5em;
}

@media screen and (max-width: 700px) {
  .alignright, .alignleft {
    margin: 0 auto 1.5rem;
    float: none;
    display: block;
  }
}
.aligncenter {
  clear: both;
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 1.5em;
}
/*# sourceMappingURL=style.css.map */