@font-face {
  font-family: "Forum";
  src: url("../font/Forum.eot");
  src: url("../font/Forum.eot?#iefix") format("embedded-opentype"),
    url("../font/Forum.woff2") format("woff2"),
    url("../font/Forum.woff") format("woff"),
    url("../font/Forum.ttf") format("truetype"),
    url("../font/Forum.svg#Forum") format("svg");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Cinzel";
  src: url("../font/Cinzel-Regular.eot");
  src: url("../font/Cinzel-Regular.eot?#iefix") format("embedded-opentype"),
    url("../font/Cinzel-Regular.woff2") format("woff2"),
    url("../font/Cinzel-Regular.woff") format("woff"),
    url("../font/Cinzel-Regular.ttf") format("truetype"),
    url("../font/Cinzel-Regular.svg#Cinzel-Regular") format("svg");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Cinzel";
  src: url("../font/Cinzel-Bold.eot");
  src: url("../font/Cinzel-Bold.eot?#iefix") format("embedded-opentype"),
    url("../font/Cinzel-Bold.woff2") format("woff2"),
    url("../font/Cinzel-Bold.woff") format("woff"),
    url("../font/Cinzel-Bold.ttf") format("truetype"),
    url("../font/Cinzel-Bold.svg#Cinzel-Bold") format("svg");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

:root {
  --site1: #7e1618;
  --site1-rgb: 126, 22, 24;
  --site1-light: #f4bfbf;
  --site2: #d3a252;
  --site2-rgb: 211, 162, 82;
  --site2-light: #f9ecd7;
  --site3: white;
  --green: #157d32;
  --green-rgb: 21, 125, 50;

  --navbar-height: 162px;
  --navbar-height-sm: 144px;
  --event-nav-height: 82px;
}

body {
  font-family: "Forum";
  font-weight: normal;
  overflow-x: hidden;
  color: var(--site1);
  background-color: var(--site2-light);
  font-size: 1.25rem;
}
h1 {
  font-family: "Cinzel";
  font-weight: bold;
  text-transform: uppercase;
  text-align: center;
}
strong {
  font-weight: 700;
}
.body {
  color: white;
  background-color: var(--site1);
}
.fas.fa-spinner.fa-3x.fa-pulse {
  color: var(--site1) !important;
}
.stuck {
  position: relative;
}
.stuck > div {
  position: sticky;
  top: 0;
}

button[name="ajaxLink"]::before {
  content: "\f004";
  font: var(--fa-font-regular);
}
button[name="ajaxLink"].linked::before {
  content: "\f004";
  font: var(--fa-font-solid);
}

.alert-site {
  background-color: rgba(var(--site1-rgb), 0.2)!important;
  color:var(--site1)!important;
  border-radius: .25rem!important;
}
.nav-link.alert-site:hover {color:var(--site1)!important;cursor: pointer;}
.nav-link.alert-site form {position: relative;z-index: 1;}
.alert-site1 {background: var(--site1-light);}
.alert-green {background: rgba(var(--green-rgb),.8);}

.bg-site1 {
  background-color: var(--site1);
}
.bg-site2 {
  background-color: var(--site2);
  color: var(--site1);
}
.bg-site2 hr,
#wines hr {
  border-color: var(--site1);
}
.btn {
  border-radius: 0.125rem;
}
.btn-site,
.btn-file {
  color: white !important;
  background-color: var(--site1);
  margin-bottom: 0.5rem;
}
.btn-site:hover,
.btn-file:hover {
  background-color: rgba(var(--site1-rgb), 0.6);
  border-color: rgba(var(--site1-rgb), 0.6);
}
.btn-off-site {
  color: var(--site1) !important;
  border-color: var(--site1) !important;
  background-color: transparent;
  margin-bottom: 0.5rem;
}
.btn-off-site:hover, .btn-off-site.active {color: white !important;background-color: var(--site1);}
.btn-site2 {
  color: var(--site1) !important;
  background-color: var(--site2);
}
.btn-site2:hover,
.btn-site2.active {
  color: white !important;
  background-color: var(--site1);
  border-color: var(--site1);
}
.badge-site {
  color: white;
  background-color: var(--site1);
}
.btn-outline-site {
  color: white !important;
  background-color: var(--site1);
  border-color: white;
  padding: 0.25rem 1rem;
  font-family: "Cinzel";
  font-weight: bold;
}
.btn-outline-site:hover,
.btn-outline-site.active {
  background-color: var(--site2);
}
.btn-tag {
  background: var(--site2);
  border-radius: 0.5rem;
  color: var(--site1) !important;
  padding: 0 0.5rem;
}
.btn-circle {
  color: var(--site1) !important;
  border: 2px solid var(--site1);
  border-radius: 50%;
  padding: 0;
  width: 2.25rem;
  height: 2.25rem;
  align-content: center;
  margin-left: 1rem;
}
.bg-site1 .btn-circle {
  color: var(--site2) !important;
  border-color: var(--site2);
}
.btn-place {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border: none;
  border-radius: .5rem;
  padding: .5rem; /* space for roof overlap */
  cursor: pointer;
  text-align: center;
}
.btn-free, .alert-free {background:var(--success);color:white}
.btn-occupied, .alert-occupied {background:var(--info);color:white}
.btn-booked, .alert-booked {background:var(--warning);color:white}
.btn-sold, .alert-sold {background:var(--site1);color:white}

.gallery-img img {
  object-fit: contain;
  width: 100%;
  height: 100%;
}
.flame::before {
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  -webkit-font-smoothing: antialiased;
  content: "\f06d";
  margin-right: 0.25rem;
  color: var(--site1);
}
.energy::before {
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  -webkit-font-smoothing: antialiased;
  content: "\f1e6";
  margin-right: 0.25rem;
  color: var(--green);
}

/* youtube */
#video > div {
  position: relative;
  padding: 3rem;
}
#video > div > [class*="io"] {
  position: absolute;
  width: 12rem;
  height: auto;
  z-index: 1;
}
#video > div > .io1 {
  top: 0.5rem;
  left: 0.5rem;
}
#video > div > .io2 {
  bottom: 0.5rem;
  right: 0.5rem;
  transform: rotate(180deg);
}
.youtube {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  max-width: 100%;
}
.youtube iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* navbar */
header .navbar {
  padding: 1rem;
}
header #nav-top {
  background-color: var(--site1);
  font-size: 1.5rem;
  font-weight: 400;
  z-index: 1041;
}
header #nav-bottom .nav-link {
  color: var(--site1) !important;
  font-size: 1.25rem;
}
header #nav-top .nav-link {
  color: white !important;
}
header #nav-top .nav-text li {
  padding: 0 3rem;
  text-transform: uppercase;
}
header #nav-bottom .nav-text li {
  padding: 0 2rem;
  text-transform: uppercase;
}
header .navbar-brand {
  margin: 0;
  width: 10.5rem;
  height: 10.5rem;
  border-radius: 50%;
  border: 3px solid white;
  position: absolute;
  top: 0;
  left: calc(50vw - 5.25rem);
  background-color: var(--site1);
  display: grid;
  justify-content: center;
  align-items: center;
}
header .navbar-brand svg#logo {
  width: 8rem;
  height: auto;
}
header .navbar-brand svg path {
  fill: white !important;
}
header .navbar-brand:hover {
  opacity: 1;
}
header .navbar-brand-i {
  margin: 0;
  width: 8.5rem;
  height: 8.5rem;
  position: absolute;
  top: 0.5rem;
  left: calc(50vw - 4.25rem);
  display: grid;
  justify-content: center;
  align-items: center;
}
header .navbar .nav-left {
  justify-content: flex-end;
}
header .navbar .nav-right {
  justify-content: flex-end;
}
header #nav-top button {
  font-size: 1.5rem;
}
header .navbar .nav-text {
  padding-left: 4rem;
}
header .navbar .nav-left {
  padding-right: 4rem;
  padding-left: 0;
}
header .navbar .nav-item.social a {
  display: inline-block;
  margin-right: 0.5rem;
}
header .search {
  display: inline-block;
  width: 3rem;
  height: 3rem;
  font-size: 2.5rem;
  text-align: center;
}
header .navbar-toggler {
  color: var(--site1) !important;
  font-size: 2.5rem;
  width: 3rem;
  height: 3rem;
  text-align: center;
  padding: 0;
}
#contract-nav .btn-circle {
  font-size: 0.875rem;
}
#contract-nav .nav-link {
  color: var(--site2);
}
#contract-nav > .row {
  margin: 0;
}

/* leaflet */
.leaflet-interactive {
  fill-opacity: 0.8 !important;
}
.leaflet-interactive.disabled {
  pointer-events: none!important;
  cursor: not-allowed;
  fill: var(--gray);
  stroke: var(--gray);
}
.leaflet-interactive.tmp-disabled {
  pointer-events: none!important;
  cursor: not-allowed;
  fill: var(--gray);
  stroke: var(--gray);
}
.leaflet-interactive.selected {
  fill: #7e1618;
}
/*.leaflet-pane .leaflet-marker-pane, */
.leaflet-popup-pane {
  display: none;
}
.leaflet-tooltip {
  border: 1px solid white !important;
  background: rgba(255, 255, 255, 1) !important;
  box-shadow: none !important;
  font-size: 0.75rem;
  font-weight: normal;
}
.building-marker {
  background: transparent;
  border: none;
  display: grid;
  align-items: end;
}
.building-wrapper img {
  width: 50px;
  height: auto;
  display: block;
  pointer-events: auto;
}
.building-wrapper a {
  display: block;
}

/* dropzone */
.dropzone {
  padding: 0 !important;
  border: 0 none !important;
}
[id*="dropzoneArea-"] {
  min-height: 10rem;
}
.dz-image img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}
.dropzone .dz-message {
  margin: 0 !important;
  padding: 3em 0;
}

/* application */
#application-desc {
  padding: 1rem;
  margin: 2rem 0;
}
#draft-editor {
  margin-top: 3rem;
}
#draft-editor input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
#draft-editor input[type="radio"]:checked + .radio-btn,
.radio-btn.active {
  background-color: var(--site1);
  color: white;
}
.radio-btn {
  background-color: var(--site2);
  border-color: var(--site2);
  color: var(--site1);
  transition: all 0.3s ease;
  user-select: none;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  height: 100%;
  display: grid;
  align-items: center;
}
.radio-btn:hover {
  background-color: var(--site1);
  border-color: var(--site1);
  color: white;
}
#email-input-error a,
#alert-modal a {
  text-decoration: underline;
}

.nav-pills .nav-link {
  border-radius: 0;
  color: var(--site1);
  background-color: var(--site2);
}
.nav-pills .nav-link:hover,
.nav-pills .nav-link.active {
  background-color: var(--site1);
  color: white;
}
.bg-site1 .nav-pills .nav-link {
  border: 1px solid var(--site2);
}
.bg-site1 .nav-pills .nav-link:hover,
.bg-site1 .nav-pills .nav-link.active {
  border-color: var(--site2);
}
.btn-new {
  font-size: 2rem !important;
  line-height: 1;
}
.place-list .place-div {
  margin-bottom: 1rem;
}
.place-list .place-div .col-8 {
  background-color: var(--site2);
}
.place-list .place-div .col-4 {
  display: grid;
  align-items: center;
}
.place-list .place-div .col-4 > div {
  display: flex;
  flex-direction: row;
  margin-left: auto;
}
.place-list .place-div .col-4 button {
  margin-right: 0.5rem;
}
.place-list .place-div h6 {
  font-size: 1.25rem;
  font-weight: bold;
  margin-top: 0.25rem;
}
#order-list strong {
  font-family: "Cinzel";
  font-weight: bold;
}
#order-list .col-3 {
  display: grid;
  align-items: center;
}
#order-list .price {
  text-align: right;
  font-size: 1.5rem;
  font-weight: bold;
}
#order-list > div {
  border-bottom: 1px solid var(--site1);
  padding: 0.5rem 0;
}
#order-list .total {
  border: 0 none;
  margin-top: 1rem;
}
#application-nav {
  flex-direction: column;
  position: sticky;
  top: 0;
}
#application-nav .nav-link {
  position: relative;
  padding-left: 1rem;
  padding-right: 1rem;
  display: block;
  width: 100%;
  text-align: left;
}
#application-nav .nav-link > span {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  display: grid;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  z-index: 1;
  background-color: var(--site1);
  color: white;
  justify-content: center;
  align-items: center;
  border: 1px solid white;
}
#application-nav .nav-link > span.success {
  background-color: var(--green);
}
.app-content {
  border: 3px solid var(--site1);
  background: white;
  padding: 1.5rem;
}
.product-line {
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--site1);
}
[id*="-help"] {
  margin: 0.5rem 0;
}
.fa-circle-check {
  color: var(--green);
}
.fa-circle-xmark {
  color: var(--site1);
}
.contract-link {
  color: var(--site1) !important;
  text-decoration: underline;
}
/*.map-container .leaflet-interactive {fill:var(--green)}*/
#type {
  margin-bottom: 2rem;
}
#customer-editor > div {
  margin-top: 1rem;
}
#customer-editor h3,
#customer-editor h4 {
  margin-top: 2rem;
}
form[id^=contractform-] .form-check, form[id^=contractform-] .se-wrapper {margin-bottom:1rem}
#products i.fa-circle-check {vertical-align:middle;}
#place-list .nav-item.d-block, #products-list .nav-item.d-block {width:100%;margin-bottom:1rem}

.help-text {
  background-color: rgba(var(--site2-rgb), 0.2);
  border: 0 none!important;
  padding: 1rem!important
}
.help-text h2 {
  padding-bottom: 1rem;
}
.help-text a {
  text-decoration: underline;
  display: block;
}
.help-text:empty {
  padding: 0;
}

body.applications .filter-nav .group-name-general-filter,
body.applications .filter-nav .group-name-has-filter {
  display: inline-block;
  margin: 0;
}

#contract-user-list hr {
  border-color: var(--site1);
}

/* form */
.form-control.is-invalid,
.was-validated .form-control:invalid {
  border-color: var(--site1) !important;
}
.text-danger,
.invalid-feedback {
  color: var(--site1) !important;
}
.form-control.is-valid,
.was-validated .form-control:valid {
  border-color: var(--green) !important;
}
.text-success {
  color: var(--green) !important;
}
.text-site1 {color:var(--site1)!important;}
input {
  border-radius: 0.25rem !important;
  border-top: 0 !important;
  border-left: 0 !important;
  border-right: 0 !important;
  border-bottom-width: 2px !important;
  border-color: var(--site2) !important;
  background-color: transparent !important;
  font-size: 1.25rem !important;
}
input::placeholder {
  color: rgba(var(--site1-rgb), 0.5) !important;
  font-size: 1.125rem;
}
form h3,
#form h3,
h3.form {
  font-family: "Cinzel";
  font-weight: bold;
  text-transform: uppercase;
  text-align: center;
}
#form form {
  margin-bottom: 1rem;
}
form .td-text {
  text-justify: auto;
}
.radio-btn > span {
  font-size: 1.25rem;
  text-transform: uppercase;
  font-family: "Cinzel";
  font-weight: bold;
}
.custom-check,
.custom-radio {
  font-size: 1.25rem;
}
.form-check {
  padding-left: 0;
}
.btn {
  font-size: 1.25rem;
}
.custom-check input ~ .checkmark,
.custom-radio input ~ .checkmark,
.custom-check:hover input ~ .checkmark,
.custom-radio:hover input ~ .checkmark {
  border: 1px solid var(--site2);
}
.custom-radio .checkmark::after {
  background: var(--site2);
}
.hidden-input {
  width: 0;
  height: 0;
  border: 0;
  font-size: 0;
}
.hidden-input input {
  padding: 0 !important;
  font-size: 0 !important;
  width: 0;
  height: 0;
  border: 0;
}
.hidden-input input::placeholder {
  display: none;
}
.summary-title {
  background: rgba(var(--site1-rgb), 0.2);
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  margin-bottom: 0.5rem;
}
#summary-editor hr {
  margin: 0.5rem 0;
  opacity: 0.25;
}

/* wysiwyg editor */
.contenteditable-required {
  margin: 1rem 0;
}
.contenteditable-required .error {
  font-size: 1.125rem;
}
.se-toolbar {
  background: white;
  border-bottom: 2px solid var(--site1);
}
.se-toolbar button {
  color: var(--site1);
}
.se-toolbar button:hover {
  background: rgba(var(--site1-rgb), 0.2);
}
.se-editor.is-invalid {
  border: 3px solid rgba(var(--site1-rgb), 0.4);
  border-radius: 0.25rem;
}

/* modal */
.modal-title {
  display: grid;
  align-self: center;
}
#alert-modal .modal-title {
  display: block;
}
.modal h4,
.modal h5 {
  font-family: "Cinzel";
  font-weight: bold;
  font-size: 1.5rem;
  margin: 0;
}
.modal h5 {
  font-size: 1.125rem;
  margin-top: 1rem;
}
.modal-content {
  background-color: var(--site2-light);
}
.modal .close {
  font-size: 2rem;
  color: var(--site1);
}
.modal-header,
.modal-footer {
  border: 0 none;
}
body.application .modal .form {
  background: white;
  border: 3px solid var(--site1);
  padding: 1rem;
}
body.application .modal form#login-form {
  background: none;
  border: 0 none;
  padding: 0;
}
/* room modal */
#room-modal h2 {
  font-family: "Cinzel";
  font-weight: bold;
  font-size: 1.5rem;
}
#room-modal h5 {
  background-color: var(--site1);
  color: var(--site2);
  padding: 0.25rem 0.5rem;
  margin: 0;
}
#room-modal h5 a {
  color: var(--site2);
  font-family: "Cinzel";
  font-weight: bold;
}
#room-modal h4,
#room-modal h3 {
  display: inline-block;
}
#room-modal h4 {
  margin-right: 0.5rem;
}
#room-modal .img-div {
  margin-bottom: 0.5rem;
}
#room-modal .event:nth-child(2n) {
  background: rgba(var(--site1-rgb), 0.1);
}
#room-modal .event.row {
  margin: 0;
}
#room-modal .event.row .col-lg-3 {
  padding: 0;
}
#room-modal .event.row .col-lg-9 {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
#room-modal .event > h3 {
  padding: 0.5rem 15px;
}
/* quiz modal */
#quiz-modal h5 {
  display: inline;
  color: var(--site1);
}
#quiz-modal .modal-header,
#quiz-modal .modal-content {
  border-radius: 1rem;
  padding: 1rem;
}
#quiz-modal .alert-secondary {
  background: rgba(var(--site1-rgb), 0.2);
  border: 0 none;
}
#quiz-modal .point {
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: var(--site1);
  color: white;
  text-align: center;
  line-height: 1;
}
#quiz-modal .form-check {
  margin-bottom: 2rem;
}
#quiz-editor .correct {
  color: var(--success);
}
#quiz-editor .wrong {
  color: var(--danger);
}
.form-check.disabled.correct .custom-check input ~ .checkmark,
.form-check.disabled.correct .custom-radio input ~ .checkmark,
.form-check.disabled.correct .custom-check:hover input ~ .checkmark,
.form-check.disabled.correct .custom-radio:hover input ~ .checkmark {
  background-color: var(--alert-success);
  border-color: var(--alert-success-color);
}
.form-check.disabled.wrong .custom-check input ~ .checkmark,
.form-check.disabled.wrong .custom-radio input ~ .checkmark,
.form-check.disabled.wrong .custom-check:hover input ~ .checkmark,
.form-check.disabled.wrong .custom-radio:hover input ~ .checkmark {
  background-color: var(--alert-danger);
  border-color: var(--alert-danger-color);
}
.form-check.disabled.correct.ok .checkmark:after {
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  content: "\f058";
  background: white;
  line-height: 1;
  font-size: 1rem;
}
.form-check.disabled.wrong .checkmark:after {
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  content: "\f057";
  background: white;
  line-height: 1;
  font-size: 1rem;
}

/* login */
#login-div {
  color: var(--site1);
}
#login-div #pills-tab button.active,
#login-div #pills-tab a.active {
  border: 0 none;
  background: var(--site1);
  color: white !important;
}
#login-div #pills-tab button,
#login-div #pills-tab a {
  background: transparent;
  color: var(--site1) !important;
  border-radius: 0;
  cursor: pointer;
}

/* main */
.event-dates {
  text-align: center;
  font-family: "Cinzel";
  font-weight: bold;
  font-size: 3rem;
}
main section {
  height: auto !important;
}
.countdown {
  position: relative;
  overflow: hidden;
}
.countdown article {
  min-height: calc(100vh - var(--navbar-height));
  display: grid;
  align-items: center;
}
.countdown h1 > span {
  font-size: 3rem;
  display: block;
}
.countdown h1 > span:first-child {
  font-weight: normal;
  font-size: 8rem;
  line-height: 1;
}
.time {
  text-align: center;
}
.countdown .time {
  margin: 0 6rem;
}
.nr {
  background-image: url("../images/counter.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  display: inline-block;
  height: 4.5rem;
  width: 3rem;
  text-align: center;
  font-size: 2.25rem;
  line-height: 2;
  font-weight: bold;
}
.countdown .bg1,
.countdown .bg2 {
  position: absolute;
  height: calc(100vh - var(--navbar-height));
  background-repeat: no-repeat;
  background-size: contain;
  width: 45vw;
}
.countdown .bg1 {
  left: 0;
  bottom: 0;
  background-image: url("../images/bg1.png");
  background-position: left bottom;
}
.countdown .bg2 {
  right: 0;
  bottom: 0;
  background-image: url("../images/bg2.png");
  background-position: right bottom;
}
#event {
  padding: 0;
  margin-top: calc((-100vw / 96) * 11);
  position: relative;
  color: white;
}
#event .time {
  display: none;
  padding-top: 2rem;
  padding-bottom: 3rem;
}
#event .event-dates {
  display: none;
}
#event .nr {
  color: var(--site1);
}
#event article {
  background: var(--site1);
  margin-top: -1px;
  padding-bottom: 5rem;
}
#event article .events {
  min-height: calc(0.8 * (100vh - var(--navbar-height)));
}
#event article h2 {
  text-align: center;
  font-weight: bold;
}
#event article h2 a {
  color: white !important;
}
#event .arch1 {
  height: calc((100vw / 96) * 11);
}
#event .arch1 svg {
  width: 100vw;
  height: calc((100vw / 96) * 11);
}
#event .arch1 svg path {
  fill: var(--site1) !important;
}
#event .h-event h2 {
  text-align: left;
  text-transform: uppercase;
  margin-bottom: 0;
}
#event .events img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#event .events .p-location,
#event .events .tags {
  display: inline-block;
}
#event a {
  color: var(--site2);
}
#event .event-row {
  border-top: 2px solid white;
}
#event .event-row .h-event {
  padding-top: 0.5rem;
}
#event .event-row .h-event .info {
  margin-bottom: 0.5rem;
  text-transform: uppercase;
}
#event .event-row .col-lg-4 {
  border-left: 1px solid rgba(255, 255, 255, 0.7);
  border-right: 1px solid rgba(255, 255, 255, 0.7);
}
#event .event-row .ml-auto .h-event {
  border-left: 1px solid rgba(255, 255, 255, 0.5);
}
#event .event-row .mr-auto .h-event {
  border-right: 1px solid rgba(255, 255, 255, 0.5);
}
#event .event-row button {
  color: white;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  border: 1px solid white;
  padding: 0;
  display: grid;
  align-items: center;
  margin-left: auto;
}
#horse-icon {
  width: 8rem;
  height: auto;
}
#event .show-all-event {
  border: 1px solid white;
  border-radius: 1rem;
  padding: 0.5rem 1rem;
  color: white !important;
}

#ticket {
  min-height: calc(875vw / 12);
  position: relative;
  background: var(--site2-light);
  padding: 0;
  overflow: hidden;
}
#ticket .arch3,
#ticket .arch4 {
  position: absolute;
  width: calc(500vw / 6);
  height: auto;
  left: calc(50vw - (250vw / 6));
}
#ticket .arch3 svg path,
#ticket .arch4 svg path {
  fill: var(--site2-light) !important;
}
#ticket .arch3 {
  top: 0;
}
#ticket .arch4 {
  bottom: 0;
}
#ticket .arch5,
#ticket .arch6 {
  position: absolute;
  width: 100vw;
  height: auto;
  left: 0;
  z-index: 3;
}
#ticket .arch5 svg path,
#ticket .arch6 svg path {
  fill: var(--site1) !important;
}
#ticket .arch5 {
  top: 0;
}
#ticket .arch6 {
  bottom: 0;
}
#ticket .amber {
  position: absolute;
  width: 70vw;
  height: auto;
  right: calc(-50vw / 6);
  top: 0;
  z-index: 2;
  opacity: 0.5;
}
#ticket .bg5 {
  position: absolute;
  right: 0;
  bottom: 8vw;
  background-image: url("../images/bg5.png");
  background-position: right bottom;
  background-size: contain;
  background-repeat: no-repeat;
  width: 65vw;
  height: calc(100vw - var(--navbar-height));
  z-index: 2;
}
#ticket article {
  position: relative;
  top: calc(33vw - 1px);
  z-index: 4;
}
#ticket article > div {
  width: calc(500vw / 6);
  margin: 0 calc(50vw / 6);
  min-height: 10px;
}
#ticket article div.row {
  margin: 0 3vw;
}
#ticket article h2 {
  font-size: 4.5vw;
  font-weight: bold;
}
#news {
  min-height: calc(100vh - var(--navbar-height));
  background: var(--site1);
  position: relative;
  top: -1px;
}
#news h2 {
  font-size: 4.5vw;
  font-weight: bold;
  color: white;
  padding-top: 6vw;
}
.news,
.gallery {
  padding-bottom: 3rem;
  color: white;
}
.news h3 a,
.gallery h3 a {
  font-weight: bold;
  font-family: "Cinzel";
  margin-bottom: 0;
  color: white;
}
.news .info {
  margin-bottom: 0.25rem;
}
.news .img-div,
.gallery .img-div {
  padding-top: 66.666666%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  position: relative;
  margin-bottom: 1rem;
}
.news .img-div svg,
.gallery .img-div svg {
  position: absolute;
  top: 1rem;
  left: 1rem;
  width: 10rem;
  height: auto;
}
.btn-news {
  color: white !important;
  border: 1px solid white;
  border-radius: 1.5rem;
}
#news .btn-news {
  margin-bottom: 3rem;
}
.news .youtube {
  padding-bottom: 66%;
  margin-bottom: 1rem;
}
#ad {
  position: relative;
  top: -1px;
  margin-bottom: -2px;
  padding-top: 2rem;
  padding-bottom: 2rem;
}
#ad .article-img p {
  display: none;
}

.event h4 > .btn,
.event h3 > .btn {
  color: var(--site2) !important;
  border: 2px solid var(--site2);
  border-radius: 50%;
  padding: 0;
  width: 2.25rem;
  height: 2.25rem;
  align-content: center;
  margin-left: 0.25rem;
}

/* article */
body.article .info hr {
  margin: 0.5rem 0;
  border-color: rgba(var(--site2-rgb), 0.5);
}

/* sector editor */
#sector-editor {
  position: relative;
}
#sector-editor #map,
#room-editor #map {
  height: 100vh;
}
.draft-map-div {margin-top:1.5rem}

/* wine competition */
#judge-editor > .form-inline {
  justify-content: center;
}
#judge-editor ul.nav,
#competition > ul.nav {
  justify-content: center;
  margin: 1rem 0;
}
#judge-editor .tab-content .col-4.col-lg-2 {
  align-content: center;
}
#result-container div.col-1 {
  align-content: center;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  hyphens: auto;
  text-align: center;
}
#result .result:nth-child(2n) {
  background: rgba(var(--site1-rgb), 0.2);
}
#result .score {
  background: var(--site1);
  color: white;
  font-weight: bold;
  font-size: 1.5rem;
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
}
.fa-medal.diamond {
  color: #b9f2ff;
}
.fa-medal.gold {
  color: #ffd700;
}
.fa-medal.silver {
  color: #c0c0c0;
}
.fa-medal.bronze {
  color: #cd7f32;
}

/* column/gallery/article */
body.column .arch1,
body.gallery .arch1,
body.event .arch1,
body.article .arch1,
body.vehiclepass .arch1,
body.winecompetition .arch1,
body.album .arch1,
body.quiz .arch1 {
  height: calc((100vw / 96) * 11);
}
body.column .arch1 svg,
body.gallery .arch1 svg,
body.event .arch1 svg,
body.article .arch1 svg,
body.vehiclepass .arch1 svg,
body.winecompetition .arch1 svg,
body.album .arch1 svg,
body.quiz .arch1 svg {
  width: 100vw;
  height: calc((100vw / 96) * 11);
}
body.column .arch1 svg path,
body.gallery .arch1 svg path,
body.event .arch1 svg path,
body.article .arch1 svg path,
body.vehiclepass .arch1 svg path,
body.winecompetition .arch1 svg path,
body.album .arch1 svg path,
body.quiz .arch1 svg path {
  fill: var(--site1) !important;
}
body.column h1,
body.gallery h1,
body.event h1,
body.article h1 {
  color: white;
  font-size: 4.5vw;
  font-weight: bold;
  color: white;
  padding-bottom: 1vw;
}
#gallery-year .fa-spinner {
  color: var(--site2) !important;
}
body.article .tags {
  margin-bottom: 0.5rem;
}
body.article .tags a {
  margin-bottom: 0.5rem;
}
body.article button[name="ajaxLink"] {
  padding: 0.125rem 0 0 0;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: var(--site1);
  color: var(--site2);
  margin: 0 0.5rem 0.5rem 0;
  border: 2px solid var(--site2);
}
body.article button[name="ajaxLink"].linked {
  color: var(--site2);
}
body.article article .social {
  font-size: 1.75rem;
  margin: 1rem;
  border: 2px solid var(--site2);
  border-radius: 50%;
  width: 3rem;
  height: 3rem;
  text-align: center;
  display: inline-block;
  padding-top: 0.125rem;
}
body.article .tags .btn-site {
  color: var(--site2) !important;
  font-weight: bold;
}
body.article article p {
  text-align: justify;
}
body.article .h-event .dt-start::before {
  content: "\f017";
  font: var(--fa-font-solid);
  margin-right: 0.5rem;
}
body.article .h-event .p-location::before {
  content: "\f3c5";
  font: var(--fa-font-solid);
  margin-right: 0.5rem;
}
body.article .h-event h2.p-name a {
  color: white;
  font-family: "Cinzel";
  font-weight: bold;
  font-size: 1.5rem;
}
body.article .h-event .info,
body.article .h-event .info a {
  color: var(--site2);
}
body.article .h-event img {
  object-fit: cover;
  width: 100%;
  height: auto;
}
body.article aside hr {
  border-color: var(--site2);
}
body.article .initial {
  font-family: "Cinzel";
  font-weight: bold;
}
body.article .bg-site1,
body.article .bg-site1 a {
  color: white;
}
body.article #article-list h2 {
  font-family: "Cinzel";
  font-weight: bold;
}
body.article #article-list .img-div {
  position: relative;
  padding-top: 66.6666%;
}
body.article #article-list .img-div button[name="ajaxLink"] {
  margin: 0;
  position: absolute;
  top: -0.5rem;
  right: -0.5rem;
}
body.quiz .text-secondary {
  color: white !important;
}

/* event */
.bg-site1 {
  color: white;
}
body.event h1,
body.event #sector h2 {
  text-align: center;
  padding-top: 3rem;
  font-size: 3rem;
}
body.event #sector h2 {
  font-family: "Cinzel";
  font-weight: bold;
}
body.event #event {
  padding: 0;
  margin-top: 0;
  position: relative;
}
body.event #event .event-row {
  border: 0 none;
}
body.event #event .horse {
  border-bottom: 2px solid white;
}
body.event #event h2.p-name a,
body.room h2.p-name a {
  color: white;
}
body.event #event .event-row hr,
body.room .event-row hr {
  border-color: rgba(255, 255, 255, 0.5);
}
body.event #event .h-event img,
body.room .h-event img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
body.event .day-name,
body.room .day-name {
  background: var(--site2);
  margin-top: 0.5rem;
  padding: 0.5rem 1rem;
  color: var(--site1);
  font-family: "Cinzel";
  font-weight: bold;
  font-size: 1.5rem;
}
body.event article {
  color: white;
}
body.event article a {
  color: var(--site2);
}
body.event .td-text {
  text-align: justify;
}
body.event .td-text strong {
  font-family: "Cinzel";
}
body.event #no-result {
  min-height: calc(100vh - var(--navbar-height));
  text-align: center;
  align-items: center;
  display: grid;
}
body.event footer {
  padding-bottom: var(--event-nav-height);
}
/* festival nav */
#festival-nav {
  position: fixed;
  bottom: 0;
  background-color: var(--site1);
  border-top: 2px solid var(--site2);
  padding-top: 1rem;
  padding-bottom: 1rem;
  z-index: 1000;
}
#festival-nav .btn {
  width: 3rem;
  height: 3rem;
  text-align: center;
  align-items: center;
  display: grid;
  border-radius: 50%;
  margin: 0 auto;
}
.room-col a {
  height: 100%;
}
.room-col {
  margin-bottom: 0.5rem;
}

#time-modal #begin-picker label,
#time-modal #end-picker label {
  background: var(--site2);
  border-color: var(--site2);
  color: var(--site1);
}

body.event.karnevalsavaria .map-container #map {
  height: calc(80vh - var(--navbar-height));
}
.blinking-polygon {
  animation: pulseBorder 1.5s infinite;
}
@keyframes pulseBorder {
  0% {
    stroke: var(--site1);
    stroke-width: 2;
  }
  50% {
    stroke: var(--site2);
    stroke-width: 5;
  }
  100% {
    stroke: var(--site1);
    stroke-width: 2;
  }
}

[class*="seat-"] {
  border-bottom-left-radius: 0.5rem !important;
  border-bottom-right-radius: 0.5rem !important;
}
[class*="seat-"].btn-success {
  background-color: var(--green);
}
[class*="seat-"].btn-warning {
  background-color: var(--site2);
}
[class*="seat-"].border-light {
  border-color: var(--site2);
}

/* room */
body.room h1 {
  text-align: left;
}
body.room .event-row {
  padding-top: 2rem;
  padding-bottom: 2rem;
}

/* repohar */
#repohar > div.row:nth-child(2n),
#repohar-list > div.row {
  background: rgba(var(--site1-rgb), 0.1);
}
#repohar button {
  margin-bottom: 0 !important;
}
#repohar > div.row > div,
#repohar-list > div.row > div {
  align-content: center;
}
#repohar > div.row > div.col-lg-1,
#repohar-list > div.row > div.col-lg-1 {
  text-align: center;
}
#repohar-editor .modal-body > .row {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
#repohar-editor .modal-body > .row:nth-child(2n) {
  background: rgba(var(--site1-rgb), 0.1);
}
#repohar-modal hr {
  border-color: var(--site1);
}

/* ware */
body.bookmarks footer .arch2 svg path {
  fill: var(--site2-light) !important;
}
.ware-div {
  height: 100%;
  display: grid;
  background: rgba(var(--site1-rgb), 0.05);
  border-radius: 2rem;
  border-top: 2px solid var(--site1);
  border-bottom: 2px solid var(--site1);
}
body.shop .btn-site {
  border: 1px solid var(--site1);
}
body.shop .ware-div {
  border: 0 none;
  display: block;
  padding: 0;
  background: none;
  border-radius: 0;
}
body.shop .ware-div button {
  border-radius: 0;
}
body.shop .ware-div button[data-modelname="ware"] {
  text-align: left;
  padding-left: 0;
}
body.shop .ware-div button[data-modelname="ware"] span {
  font-weight: bold;
  color: var(--danger);
}
.ware-div.discount {
  border-color: var(--danger);
}
.ware-div h2 {
  color: var(--site1);
  font-size: 1.5rem;
  margin: 0.25rem 0 0 0;
  font-weight: bold;
}
.ware-div h3 {
  font-size: 1rem;
  font-weight: 300;
  padding-bottom: 0.5rem;
}
.ware-div h3 a,
.ware-div h3 a:link,
.ware-div h3 a:visited {
  text-decoration: none;
  color: var(--site1);
}
.ware-div h4 {
  background: var(--danger);
  text-align: center;
  color: white;
  margin: -0.5rem -0.5rem 0 -0.5rem;
  font-size: 1.25rem;
  padding: 0.25rem 0;
}
.ware-div h5 {
  font-size: 1rem;
  margin: 0;
  font-weight: 200;
}
.ware-div .product {
  position: relative;
}
.ware-div .product button {
  position: absolute;
  top: -0.5rem;
  right: -0.5rem;
  font-size: 1.5rem;
  border-radius: 50%;
  background: var(--site1);
  width: 4rem;
  height: 4rem;
  color: white;
  z-index: 1;
}
.ware-div .product .edit-btn {
  position: absolute;
  top: 0;
  left: 0;
  padding: 0 0.25rem;
  font-size: 1.5rem;
  border-radius: 50%;
  border: 3px solid var(--site1);
  background: white;
  width: 2.5rem;
  height: 2.5rem;
  color: var(--site1);
}
.ware-div .product .img-link:hover {
  opacity: 1;
}
.ware-div .product .img-div,
.ware-div .product .no-img {
  width: 100%;
  border-radius: 2rem 2rem 0 0;
  padding-top: 100%;
  background-size: cover;
}

.ware-div .bottom {
  padding: 1rem;
}
.ware-div .bottom button[name="addToCartAjax"] {
  padding-top: 0.125rem;
  padding-bottom: 0.25rem;
  background: var(--site1);
  color: white !important;
  border-radius: 1rem;
}
.price small {
  color: var(--gray);
}
.price {
  position: relative;
}
.price label {
  position: absolute;
  bottom: 0;
  right: 0;
  background: var(--red);
  color: white;
  margin-bottom: 0;
  font-weight: 500;
  padding: 0.125rem 0.25rem;
}
body.default .ware-div button[name="addToCartAjax"],
body.cart .ware-div button[name="addToCartAjax"],
body.checkout .ware-div button[name="addToCartAjax"],
body.ware .ware-div button[name="addToCartAjax"] {
  padding: 0.125rem 0.25rem;
  height: 100%;
}
.ware-div .img-div {
  width: 100%;
  padding-top: 80%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: auto 75%;
}
.ware-div .tags span {
  font-size: 0.75rem;
  background-color: var(--dblue);
  color: white;
  padding: 0.125rem 0.25rem;
}
.ware-div .tag-btn span {
  color: white;
}
.ware-div .q-div {
  text-align: center;
  background-color: var(--lblue);
  height: 100%;
}
.ware-div .q-div button {
  font-size: 0.75rem;
  padding: 0.125rem;
}
.ware-div .q-div .quantity {
  vertical-align: middle;
  line-height: 2;
}
.ware-div button[name="q-plus"] {
  float: right;
}
.ware-div button[name="q-minus"] {
  float: left;
}
.ware-div .no-img svg {
  width: 60%;
  height: 60%;
  margin: 10% 20%;
}

/* footer */
footer {
  margin-top: -1px;
}
footer .row {
  margin-left: 0;
  margin-right: 0;
}
footer .arch2 {
  height: calc((100vw / 96) * 11);
}
footer .arch2 svg {
  width: 100vw;
  height: calc((100vw / 96) * 11);
}
footer .arch2 svg path {
  fill: var(--site1) !important;
}
body.application footer .arch2,
body.applications footer .arch2,
body.login footer .arch2,
body.user footer .arch2,
body.password footer .arch2 {
  display: none;
}
footer h2 {
  text-transform: uppercase;
  font-weight: bold;
  text-align: center;
  margin-top: -10vh;
  font-size: 3rem;
  margin-bottom: 2rem;
}
body.application footer h2,
body.applications footer h2,
body.login footer h2,
body.user footer h2,
body.password footer h2 {
  margin-top: 2rem;
}
footer .article-img p {
  display: none;
}
footer .supporters {
  margin-bottom: 2rem;
}
footer .supporters .row > div {
  display: grid;
  align-items: center;
}

@media screen and (min-width: 992px) {
  header .navbar-brand-i {
    display: none;
  }
  #mnav {
    display: none !important;
  }
}

@media screen and (max-width: 991px) {
  header .navbar-brand {
    display: none;
  }
  #nav-top {
    padding: 0;
  }
  #nav-bottom {
    z-index: 0;
    padding-top: 3rem;
    padding-bottom: 3rem;
  }
  .countdown article {
    min-height: calc(80vh - var(--navbar-height-sm));
  }
  .countdown .bg1,
  .countdown .bg2 {
    height: calc(100vh - var(--navbar-height-sm));
    width: 80vw;
  }
  .countdown .bg1 {
    left: -20vw;
  }
  .countdown .bg2 {
    right: -20vw;
  }
  #video > div {
    padding: 2rem;
  }
  #video > div > [class*="io"] {
    width: 9rem;
  }
}

@media screen and (max-width: 768px) {
  #application-nav .nav-link {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }
  #application-nav .nav-link > strong,
  #application-nav .nav-link > span {
    display: none;
  }
  body.event #event h2.p-name {
    font-size: 1.5rem;
  }
  body.event #event .info {
    font-size: 1rem;
  }
  body.event h1 {
    font-size: 2rem;
  }
  body.event h2.p-location,
  body.event h3.dt-start {
    font-size: 1.25rem;
  }
  #video > div {
    padding: 1.5rem;
  }
  #video > div > [class*="io"] {
    width: 7rem;
  }
}

@media screen and (max-width: 480px) {
  .countdown article {
    min-height: calc(60vh - var(--navbar-height-sm));
  }
  .countdown h1 > span {
    font-size: 1.5rem;
  }
  .countdown h1 > span:first-child {
    font-size: 4rem;
    line-height: 1;
  }
  .countdown .time,
  .countdown .event-dates {
    display: none;
  }
  .countdown .bg1,
  .countdown .bg2 {
    height: calc(100vh - var(--navbar-height-sm));
    width: 80vw;
  }
  .countdown .bg1 {
    left: -20vw;
  }
  .countdown .bg2 {
    right: -20vw;
  }
  #event .time {
    display: flex;
    margin: 0 3rem;
  }
  #event .event-dates {
    display: block;
    font-size: 1.5rem;
    padding-top: 1rem;
  }
  body.event #no-result {
    min-height: calc(100vh - var(--navbar-height-sm));
  }
  footer h2 {
    margin-top: 0;
    font-size: 1.5rem;
  }
  #video > div {
    padding: 1rem;
  }
  #video > div > [class*="io"] {
    width: 5rem;
  }
  #ticket article h2 {
    font-size: 1.75rem;
    margin-top: 1rem;
  }
  #news h2 {
    font-size: 1.75rem;
  }
  .news h3,
  .gallery h3 {
    font-size: 1.5rem;
  }
}

@media (min-aspect-ratio: 2/1) {
  .countdown .col-md-8.col-lg-4 {
    -ms-flex: 0 0 66.666666%;
    flex: 0 0 66.666666%;
    max-width: 66.666666%;
  }
  .countdown h1 > span {
    display: inline-block;
  }
  .countdown h1 > span:first-child {
    display: block;
  }
  .countdown .time {
    margin: 0 5vw;
  }
}