/*

TemplateMo 583 Festava Live

https://templatemo.com/tm-583-festava-live

*/

/*---------------------------------------
  CUSTOM PROPERTIES ( VARIABLES )             
-----------------------------------------*/
:root {
  --white-color: #ffffff;
  --primary-color: #e39128;
  --secondary-color: #e73824;
  --section-bg-color: #fbf3e9;
  --custom-btn-bg-color: #e73824;
  --custom-btn-bg-hover-color: #c01f27;
  --dark-color: #2e2e2e;
  --p-color: #717275;
  --border-color: #faf4fd;
  --link-hover-color: #e73824;

  --body-font-family: "Outfit", sans-serif;

  --h1-font-size: 74px;
  --h2-font-size: 46px;
  --h3-font-size: 28px;
  --h4-font-size: 26px;
  --h5-font-size: 24px;
  --h6-font-size: 22px;
  --p-font-size: 18px;
  --btn-font-size: 14px;
  --copyright-font-size: 16px;

  --border-radius-large: 100px;
  --border-radius-medium: 20px;
  --border-radius-small: 10px;

  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-bold: 700;

  /* tables */
  --separator-border: #C4C4C4;
  --light-color: #fbf3e9;

  --icon-rating-star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' data-name='Layer 1' viewBox='0 0 16.627 15.888'%3E%3Cg data-name='Group 15'%3E%3Cpath d='M12.074 15.152c-.227 0-.455-.055-.659-.161L8.31 13.359l-3.102 1.63A1.42 1.42 0 0 1 3.15 13.5l.593-3.455-2.513-2.451a1.423 1.423 0 0 1-.016-2.01c.215-.218.498-.36.798-.406l3.473-.504 1.551-3.147A1.423 1.423 0 0 1 8.94.882c.277.138.504.366.64.64l1.555 3.15 3.468.504c.372.053.705.249.932.551.228.303.324.676.272 1.052a1.424 1.424 0 0 1-.42.823l-.002-.002-2.504 2.438.59 3.459a1.418 1.418 0 0 1-1.396 1.655Zm2.298-8.38h.002-.002Z' data-name='Path 47' style='fill:%23fbe269;stroke-width:0'/%3E%3C/g%3E%3C/svg%3E");
}

body {
  background-color: var(--white-color);
  font-family: var(--body-font-family);
}

/*---------------------------------------
  TYPOGRAPHY               
-----------------------------------------*/

h2,
h3,
h4,
h5,
h6 {
  color: var(--dark-color);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: var(--font-weight-bold);
  scroll-margin-top: 86px;
}

h2 {
  margin-top: 30px;
}

h3 {
  font-size: var(--h3-font-size);
}

h4 {
  font-size: var(--h4-font-size);
}

h5, .h5 {
  font-size: var(--h5-font-size);
}

h6 {
  font-size: var(--h6-font-size);
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
ol {
  hyphens: auto;
  overflow-wrap: break-word;
}

p {
  color: var(--p-color);
  font-size: var(--p-font-size);
  font-weight: var(--font-weight-light);
}

ul li {
  color: var(--p-color);
  font-size: var(--p-font-size);
  font-weight: var(--font-weight-light);
}

a,
button {
  touch-action: manipulation;
  transition: all 0.3s;
}

a {
  display: inline-block;
  color: var(--primary-color);
  text-decoration: none;
}

a:hover {
  /* color: var(--link-hover-color); */
  opacity: 0.8;
}

footer a:hover {
  color: var(--white-color);
}

b,
strong {
  font-weight: var(--font-weight-bold);
}

.link-fx-1 {
  color: var(--white-color);
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 6px;
  text-decoration: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.link-fx-1:hover {
  color: var(--link-hover-color);
}

.link-fx-1:hover::before {
  transform: translateX(17px) scaleX(0);
  transition: transform 0.2s;
}

.link-fx-1:hover .icon circle {
  stroke-dashoffset: 200;
  transition: stroke-dashoffset 0.2s 0.1s;
}

.link-fx-1:hover .icon line {
  transform: rotate(-180deg);
}

.link-fx-1:hover .icon line:last-child {
  transform: rotate(180deg);
}

.link-fx-1::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: currentColor;
  transform-origin: right center;
  transition: transform 0.2s 0.1s;
}

.link-fx-1 .icon {
  position: absolute;
  right: 0;
  bottom: 0;
  transform: translateX(100%) rotate(90deg);
  font-size: 32px;
}

.icon {
  --size: 1em;
  height: var(--size);
  width: var(--size);
  display: inline-block;
  color: inherit;
  fill: currentColor;
  line-height: 1;
  flex-shrink: 0;
  max-width: initial;
}

.link-fx-1 .icon circle {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  transition: stroke-dashoffset 0.2s;
}

.link-fx-1 .icon line {
  transition: transform 0.4s;
  transform-origin: 13px 15px;
}

.link-fx-1 .icon line:last-child {
  transform-origin: 19px 15px;
}

/*---------------------------------------
  SECTION               
-----------------------------------------*/
.section-padding {
  padding-top: 100px;
  padding-bottom: 100px;
}

.section-bg {
  background-color: var(--section-bg-color);
}

.section-overlay {
  background-color: var(--dark-color);
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  width: 100%;
  height: 100%;
  opacity: 0.35;
}

.section-overlay + .container {
  position: relative;
}

.tab-content {
  background-color: var(--white-color);
  border-radius: var(--border-radius-medium);
  padding: 45px;
}

.nav-tabs {
  background-color: var(--section-bg-color);
  border-radius: var(--border-radius-large);
  border-bottom: 0;
  padding: 15px;
}

.nav-tabs .nav-link {
  border-radius: var(--border-radius-large);
  border: 0;
  padding: 15px 25px;
  transition: all 0.3s;
}

.nav-tabs .nav-link:first-child {
  margin-right: 15px;
}

.nav-tabs .nav-item.show .nav-link,
.nav-tabs .nav-link.active,
.nav-tabs .nav-link:focus,
.nav-tabs .nav-link:hover {
  background: var(--white-color);
  box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175);
  color: var(--primary-color);
}

.nav-tabs h5 {
  color: var(--p-color);
  margin-bottom: 0;
}

.nav-tabs .nav-link.active h5,
.nav-tabs .nav-link:focus h5,
.nav-tabs .nav-link:hover h5 {
  color: var(--primary-color);
}

/*---------------------------------------
  CUSTOM ICON COLOR               
-----------------------------------------*/
.custom-icon {
  color: var(--secondary-color);
}

/*---------------------------------------
  CUSTOM BUTTON               
-----------------------------------------*/
.custom-btn {
  background: var(--custom-btn-bg-color);
  border: 2px solid transparent;
  border-radius: var(--border-radius-large);
  color: var(--white-color);
  font-size: var(--btn-font-size);
  font-weight: var(--font-weight-bold);
  line-height: normal;
  transition: all 0.3s;
  padding: 10px 20px;
}

.custom-btn:hover {
  background: var(--custom-btn-bg-hover-color);
  color: var(--white-color);
}

.custom-border-btn {
  background: transparent;
  border: 2px solid var(--custom-btn-bg-color);
  color: var(--custom-btn-bg-color);
}

.navbar-expand-lg .navbar-nav .nav-link.custom-btn:hover,
.custom-border-btn:hover {
  background: var(--custom-btn-bg-hover-color);
  border-color: transparent;
  color: black;
}

.custom-btn-bg-white {
  border-color: var(--white-color);
  color: var(--white-color);
}

/*---------------------------------------
  VIDEO              
-----------------------------------------*/
.video-wrap {
  z-index: -100;
}

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

/*---------------------------------------
  SITE HEADER              
-----------------------------------------*/
.site-header {
  background-color: var(--primary-color);
  padding-top: 12px;
  padding-bottom: 12px;
}

/*---------------------------------------
  NAVIGATION              
-----------------------------------------*/
.sticky-wrapper {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  /* margin-top: 51px; */
}

.sticky-wrapper.is-sticky .navbar {
  background-color: var(--dark-color);
}

.navbar {
  background: transparent;
  z-index: 9;
}

.navbar-brand,
.navbar-brand:hover {
  color: var(--white-color);
  font-size: var(--h5-font-size);
  font-weight: var(--font-weight-bold);
}
.navbar-brand img {border-radius: 0;}

.navbar-expand-lg .navbar-nav .nav-link {
  border-radius: var(--border-radius-large);
  margin: 10px;
  padding: 10px 20px;
  /* color: black; */
}

.navbar-nav .nav-link {
  display: inline-block;
  color: var(--white-color);
  font-size: var(--p-font-size);
  font-weight: var(--font-weight-normal);
  position: relative;
  padding-top: 15px;
  padding-bottom: 15px;
}

.navbar-nav .nav-link.active,
.navbar-nav .nav-link:hover {
  color: var(--secondary-color);
  opacity: 1;
}

.navbar-toggler {
  border: 0;
  padding: 10px;
  cursor: pointer;
  margin: 0;
  width: auto;
  height: 35px;
  outline: none;
}

.navbar-toggler:focus {
  outline: none;
  box-shadow: none;
}

.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon {
  background: transparent;
}

.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon:before,
.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon:after {
  transition: top 300ms 50ms ease, -webkit-transform 300ms 350ms ease;
  transition: top 300ms 50ms ease, transform 300ms 350ms ease;
  transition: top 300ms 50ms ease, transform 300ms 350ms ease,
    -webkit-transform 300ms 350ms ease;
  top: 0;
}

.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon:before {
  transform: rotate(45deg);
}

.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon:after {
  transform: rotate(-45deg);
}

.navbar-toggler .navbar-toggler-icon {
  background: var(--white-color);
  transition: background 10ms 300ms ease;
  display: block;
  width: 30px;
  height: 2px;
  position: relative;
}

.navbar-toggler .navbar-toggler-icon:before,
.navbar-toggler .navbar-toggler-icon:after {
  transition: top 300ms 350ms ease, -webkit-transform 300ms 50ms ease;
  transition: top 300ms 350ms ease, transform 300ms 50ms ease;
  transition: top 300ms 350ms ease, transform 300ms 50ms ease,
    -webkit-transform 300ms 50ms ease;
  position: absolute;
  right: 0;
  left: 0;
  background: var(--white-color);
  width: 30px;
  height: 2px;
  content: "";
}

.navbar-toggler .navbar-toggler-icon::before {
  top: -8px;
}

.navbar-toggler .navbar-toggler-icon::after {
  top: 8px;
}

/*---------------------------------------
  HERO        
-----------------------------------------*/
.hero-section {
  position: relative;
  overflow: hidden;
  padding-top: 100px;
  height: calc(100vh - 51px);
}

.hero-section small {
  color: var(--white-color);
  text-transform: uppercase;
}

.hero-section .section-overlay {
  z-index: 2;
  opacity: 0.45;
}

.hero-section .container {
  position: relative;
  z-index: 2;
  height: 100%;
  padding-bottom: 50px;
}

.hero-section .container .row {
  height: 100%;
}

/*---------------------------------------
  ABOUT              
-----------------------------------------*/
.about-section {
  background-image: url("../images/edward-unsplash-blur.jpg");
  background-color: #704010;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}

.about-image {
  border-radius: var(--border-radius-medium);
  display: block;
}

.about-text-wrap {
  position: relative;
}

.about-text-icon {
  background: var(--primary-color);
  border-radius: 100%;
  font-size: var(--h3-font-size);
  width: 70px;
  height: 70px;
  line-height: 70px;
  text-align: center;
}

.about-text-info {
  backdrop-filter: blur(5px) saturate(180%);
  -webkit-backdrop-filter: blur(5px) saturate(180%);
  background-color: rgba(255, 255, 255, 0.75);
  border-radius: var(--border-radius-medium);
  border: 1px solid rgba(209, 213, 219, 0.3);
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;
  margin: 20px;
  padding: 35px;
}

/*---------------------------------------
  TICKET               
-----------------------------------------*/
.ticket-section {
  background-image: url("../images/nicholas-green-unsplash-blur.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  padding-top: 130px;
}

.ticket-form {
  background: var(--white-color);
  border-radius: var(--border-radius-medium);
  padding: 50px;
}

.ticket-form .form-check {
  position: relative;
  min-height: 52px;
  padding-left: 35px;
}

.ticket-form .form-check .form-check-label {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin-top: 12px;
  margin-left: 35px;
  width: 100%;
  height: 100%;
}

/*---------------------------------------
  ARTISTS              
-----------------------------------------*/
.artists-thumb {
  position: relative;
  overflow: hidden;
  margin-bottom: 30px;
}

.artists-image {
  border-radius: var(--border-radius-medium);
  display: block;
  width: 100%;
}

.artists-thumb:hover .artists-hover {
  transform: translateY(0);
  opacity: 1;
}

.artists-hover {
  background-color: var(--primary-color);
  background-color: rgba(248, 203, 46, 0.75);
  border-radius: var(--border-radius-medium);
  backdrop-filter: blur(5px) saturate(180%);
  -webkit-backdrop-filter: blur(5px) saturate(180%);
  margin: 20px;
  padding: 35px;
  transition: all 0.5s ease;
  transform: translateY(100%);
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;
  opacity: 0;
}

.artists-hover p strong {
  color: var(--white-color);
  display: inline-block;
  min-width: 180px;
  margin-right: 20px;
}

.artists-hover p a {
  color: var(--secondary-color);
}

.artists-hover p a:hover {
  color: var(--white-color);
}

.artists-hover hr {
  margin: 1.5rem 0;
}

/*---------------------------------------
  SCHEDULE              
-----------------------------------------*/
.schedule-section {
  background-image: url("../images/nainoa-shizuru-unsplash-blur.jpg");
  background-color: #242424;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
/* .table-responsive {
  filter: drop-shadow(2px 2px 4px #606060);
} */

.schedule-table {
  border-radius: var(--border-radius-medium);
  position: relative;
  overflow: hidden;
}

.schedule-table .bg-warning {
  background: #f0a5a5 !important;
}

.schedule-table thead th {
  background-color: var(--secondary-color);
}

.schedule-table th,
.schedule-table tr,
.schedule-table td {
  border-bottom-color: #363a3e;
  padding: 30px;
}

.schedule-table tr:last-child th,
.schedule-table tr:last-child td {
  border-bottom-color: transparent;
}

.schedule-table thead th {
  border-right: 1px solid #c7460a;
  border-bottom-color: transparent;
}

.schedule-table th + td {
  border-bottom: 0;
}

.schedule-table thead th:last-child {
  border-right-color: transparent;
}

.schedule-table .pop-background-image {
  background-image: url("../images/artists/joecalih-UmTZqmMvQcw-unsplash.jpg");
}

.schedule-table .rock-background-image {
  background-image: url("../images/artists/abstral-official-bdlMO9z5yco-unsplash.jpg");
}

.schedule-table .country-background-image {
  background-image: url("../images/artists/soundtrap-rAT6FJ6wltE-unsplash.jpg");
}

.table-background-image-wrap {
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  box-shadow: none;
  position: relative;
}

.schedule-table h3,
.schedule-table p {
  color: var(--white-color);
  position: relative;
  z-index: 2;
}

/*---------------------------------------
  PRICING              
-----------------------------------------*/
.pricing-thumb {
  border: 5px dotted var(--dark-color);
  border-radius: var(--border-radius-medium);
  padding: 20px;
  position: relative;
  overflow: hidden;
  text-align: center;
}

.pricing-thumb h3 small {
  display: inline-block;
  font-size: var(--p-font-size);
  margin-right: 15px;
}

.pricing-list {
  column-count: 2;
  padding-left: 20px;
}

.pricing-list-item {
  line-height: normal;
  margin-right: 10px;
  margin-bottom: 10px;
}

.pricing-tag {
  background-color: var(--secondary-color);
  border-radius: var(--border-radius-large);
  color: var(--white-color);
  font-weight: var(--font-weight-bold);
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 120px;
  height: 120px;
  position: absolute;
  top: 0;
  right: 0;
  margin: 20px;
}

.pricing-tag span {
  font-size: 180%;
  line-height: normal;
}

.pricing-thumb .link-fx-1 {
  color: var(--primary-color);
}

.pricing-thumb .link-fx-1:hover {
  color: var(--link-hover-color);
}

/*---------------------------------------
  CONTACT               
-----------------------------------------*/
.google-map {
  border-radius: var(--border-radius-medium);
}

/*---------------------------------------
  CUSTOM FORM               
-----------------------------------------*/
.custom-form .form-control {
  color: var(--p-color);
  margin-bottom: 24px;
  padding-top: 13px;
  padding-bottom: 13px;
  outline: none;
}

.custom-form button[type="submit"] {
  background: var(--custom-btn-bg-color);
  border: none;
  border-radius: var(--border-radius-large);
  color: var(--white-color);
  font-size: var(--p-font-size);
  font-weight: var(--font-weight-medium);
  transition: all 0.3s;
  margin-bottom: 0;
}

.custom-form button[type="submit"]:hover,
.custom-form button[type="submit"]:focus {
  background: var(--custom-btn-bg-hover-color);
  border-color: transparent;
}

/*---------------------------------------
  SITE FOOTER              
-----------------------------------------*/
.site-footer {
  background-color: var(--dark-color);
  position: relative;
  overflow: hidden;
  padding-bottom: 30px
}

.site-footer p:not(.site-footer-title, .copyright-text) {
  color: white;
}

.site-footer-top {
  background-color: #d1e1ef;
  padding-top: 30px;
  padding-bottom: 30px;
}

.site-footer-bottom {
  border-top: 1px solid #4e4949;
  margin-top: 20px;
}

.site-footer-title {
  color: var(--primary-color);
  font-weight: bold;
}

.site-footer-link:not(.footer-disclaimer .site-footer-link),
.copyright-text {
  color: var(--white-color);
}

.site-footer-links {
  padding-left: 0;
}

.site-footer-link-item {
  list-style: none;
  /* display: inline-block;
  margin-right: 15px; */
}

.site-footer .footer-disclaimer :is(.copyright-text, .site-footer-link-item) {
  font-size: var(--copyright-font-size);
}
p.copyright-text {color: var(--separator-border);}

/*---------------------------------------
  SOCIAL ICON               
-----------------------------------------*/
.social-icon {
  margin: 0;
  padding: 0;
}

.social-icon-item {
  list-style: none;
  display: inline-block;
  vertical-align: top;
}

.social-icon-link {
  background: var(--secondary-color);
  border-radius: var(--border-radius-large);
  color: var(--white-color);
  font-size: var(--copyright-font-size);
  display: block;
  margin-right: 10px;
  text-align: center;
  width: 35px;
  height: 35px;
  line-height: 36px;
  transition: background 0.2s, color 0.2s;
}

.social-icon-link:hover {
  background: var(--primary-color);
  color: var(--white-color);
}

.social-icon-link span {
  display: block;
}

.social-icon-link span:hover::before {
  animation: spinAround 2s linear infinite;
}

@keyframes spinAround {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/*---------------------------------------
  RESPONSIVE STYLES               
-----------------------------------------*/
@media screen and (max-width: 991px) {
  h1 {
    font-size: 35px;
  }

  h2 {
    font-size: 30px;
  }

  h3 {
    font-size: 28px;
  }

  h4 {
    font-size: 28px;
  }

  h5 {
    font-size: 20px;
  }

  h6 {
    font-size: 18px;
  }

  .section-padding {
    padding-top: 50px;
    padding-bottom: 50px;
  }

  .navbar {
    background-color: var(--dark-color);
  }

  .navbar-expand-lg .navbar-nav {
    padding-bottom: 30px;
  }

  .navbar-expand-lg .navbar-nav .nav-link {
    padding: 0;
  }

  .hero-section {
    padding-top: 150px;
  }

  .pricing-thumb {
    padding: 5px;
  }

  .schedule-table h3 {
    font-size: 22px;
  }

  .schedule-table th {
    padding: 20px;
  }

  .schedule-table tr,
  .schedule-table td {
    padding: 25px;
  }

  .ticket-section {
    padding-top: 130px;
  }

  .ticket-form {
    padding: 30px;
  }
}

@media screen and (max-width: 767px) {
  .custom-btn {
    font-size: 14px;
    padding: 10px 20px;
  }
}

@media screen and (max-width: 480px) {
  h1 {
    font-size: 35px;
  }

  h2 {
    font-size: 28px;
  }

  h3 {
    font-size: 26px;
  }

  h4 {
    font-size: 22px;
  }

  h5 {
    font-size: 20px;
  }
}

.pt-120 {
  padding-top: 120px;
}

.navbar {
  background: var(--dark-color);
  z-index: 9;
}

[type="button"]:not(:disabled),
[type="reset"]:not(:disabled),
[type="submit"]:not(:disabled),
button:not(:disabled) {
  background-color: #000000;
}

.bg {
  background: linear-gradient(#f3f3f3c2, #d6e2eb6b), url(/images/fehler.jpg);
  height: 90vh;
  width: 100%;
  max-width: 100%;
  background-size: cover;
  background-position: center;
  display: grid;
  justify-content: center;
  align-items: flex-start;
}

@media (max-width: 600px) {
  .bg {
    height: 65vh;
  }
}

img {
  border-radius: 5px;
}

/* ------------------------ */
.primary-table-wrapper {max-width: 1100px; margin: 0 auto;}
.primary-table .special-terms, .primary-table ~ .special-terms { padding: 0 10px 20px; margin-top: -10px; font-size: 12px; }
.primary-table ~ .special-terms { text-align: right; }

[class*=logo-] { width: 130px; margin: 0 auto; display: block; text-indent: -9999px; background-size: contain; background-position: center center; background-repeat: no-repeat; max-width: 100%; height: 100%; }
:is(a, span).cta-btn { font-weight: 600; font-size: 14px; padding: 10px 5px; text-align: center; border-radius: 6px; text-transform: uppercase; text-decoration: none; background: var(--secondary-color); color: var(--white-color); }
:is(a, span).cta-btn:hover { background: var(--cta-btn-hover-color); color: var(--dark-color); text-decoration: none; }
:is(a, span).cta-btn:not(.not-active):hover { outline: 1px solid var(--secondary-color); }
:is(a, span).cta-btn.review-btn { background: none; border: 1px solid var(--border-color); color: var(--dark-color);}
:is(a, span).cta-btn.review-btn:hover:not(.not-active) { background: var(--white); }
:is(a, span).cta-btn.review-btn.not-active {  color: var(--dark-color); font-weight: normal; border: 1px solid var(--border-color); }
:is(a, span).cta-btn.single {  width: 300px; max-width: 100%; }

.primary-table .table-row { border: 1px solid var(--secondary-color); border-radius: 6px; background: none;}
.primary-table .table-row:first-of-type { background: var(--light-color); border-width: 2px; }
.primary-table .brand-logo { border-radius: 4px 0 0 4px; }
.primary-table .brand-rating { border-right: 1px solid var(--separator-border); }
.brand-rating :is(h3, .brand-score, .brand-name) { font-family: var(--main-font); color: var(--dark-color); font-size: 16px; text-transform: uppercase; font-weight: bold; }
.brand-rating h3::before { all: unset; }
.brand-score { gap: 5px; }
.rating-star { width: 17px; height: 16px; background: center / contain no-repeat var(--icon-rating-star); position: relative; }
.brand-bonus { color: var(--bonus-color); font-weight: 600; line-height: 1.2; min-height: 90px; }
.bonus-amount { font-size: 27px; }
.bonus-before { font-size: 22px; }
.bonus-after { font-size: 18px; }
.primary-table .brand-cta { gap: 8px; }
.special-terms {padding: 0 10px 20px; margin-top: -10px; font-size: 10px; }
@media screen and (min-width: 768px) {
	.primary-table .table-row { height: 110px; }
}
@media screen and (max-width:767px) {
	.primary-table { max-width: 350px; }
	.primary-table .brand-logo { border-radius: 4px 4px 0 0; display: block; height: 65px;}
	.primary-table .brand-rating { border-right: none; border-bottom: 1px solid var(--separator-border); padding: 12px 0;}
	.primary-table .brand-bonus { padding: 12px 0; }
	.primary-table .brand-cta { gap: 12px; }
	.primary-table :is(.brand-rating, .brand-bonus, .brand-cta) {max-width: 300px;}
}
#show-more { display: none; }
#show-more ~ #hide-btn { display: none; }
#show-more:checked ~ #show-btn { display: none; }
#show-more:checked ~ #hide-btn { display: block; }
#show-more:checked ~ #hide-btn, label[for=show-more] { cursor: pointer; margin: 0 auto 2rem; position: relative; }
.primary-table ~ #show-btn, .primary-table ~ #show-btn ~ #hide-btn { width: 285px; padding: 10px 0; border-radius: 6px; border: 2px solid var(--border-color); background: var(--primary-color); color: var(--white-color); font-weight: 600; font-size: 14px; text-align: center; transition: all 0.3s;}
.primary-table ~ #show-btn:hover, .primary-table ~ #show-btn ~ #hide-btn:hover { background: var(--cta-btn-bg-color); border-color: var(--primary-color); color: var(--cta-btn-text-color); }
.primary-table ~ #show-btn span, .primary-table ~ #show-btn ~ #hide-btn span { position: relative; }
.primary-table ~ #show-btn i, .primary-table ~ #show-btn ~ #hide-btn i { margin-left: 5px; font-size: 12px; }
.primary-table .row-hidden { display: none; }
#show-more:checked + .primary-table .row-hidden { display: flex; }

.popup-wrapper { display: none; z-index: 99999; left: 0; top: 0; background-color: rgb(from var(--dark-color) r g b / 0.7); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.popup-wrapper .table-row { background: var(--white-color); }
.popup-wrapper .close-btn { font-size: 22px; font-weight: bold; line-height: 20px; color: var(--secondary-color); position: absolute; top: -30px; right: 2%; cursor: pointer; }
.popup-wrapper .close-btn:hover { color: var(--cta-btn-bg-hover-color); }
.popup-wrapper .popup-title { font-size: var(--h2-font-size); text-align: center; color: var(--white-color); margin-bottom: 15px; }
.popup-wrapper .special-terms {color: var(--white-color);}
@media screen and (min-width:768px) {
	.popup-wrapper .popup-box { min-width: 660px;  transform: translate(-50%, -50%); left: 50%; top: 50%; }
}
@media screen and (max-width:767px) {
	.popup-wrapper .popup-box { max-height: 100vh; width: 100%; max-width: 100%; padding: 40px 15px 15px; margin-top: 20px; }
	.popup-wrapper .primary-table ~ .special-terms { text-align: center; max-width: 350px; margin: -10px auto 0; font-size: 10px; }
	.popup-wrapper .primary-table .special-terms { padding: 0 10px 10px; margin-top: -10px; font-size: 10px; line-height: normal; }
	.popup-wrapper .primary-table .cta-btn { width: 250px; padding: 10px 0; }
	.popup-wrapper .primary-table .bonus-before { font-size: 20px; }
	.popup-wrapper .primary-table .bonus-amount { font-size: 25px; }
	.popup-wrapper .primary-table .bonus-after { font-size: 16px; }
	.popup-wrapper .popup-title { font-size: 23px; }
	.popup-wrapper .close-btn { top: 1%; right: 3%; }
}
:is(ul, ol):is(.two-col, .three-col, .two-col-lg) li {
	break-inside: avoid-column;
}
@media only screen and (min-width:768px) {
  .two-col, .three-col { columns: 2; -webkit-columns: 2; -moz-columns: 2; -o-columns: 2; }
  .primary-table .table-row { height: 110px; }
}
@media only screen and (min-width:992px) {
  .three-col { columns: 3; -webkit-columns: 3; -moz-columns: 3; -o-columns: 3; margin-bottom: 15px; }
  .two-col-lg { columns: 2; -webkit-columns: 2; -moz-columns: 2; -o-columns: 2; }
}

#faq-element h3 { font-size: 18px; }
#faq-element .accordion-button:not(.collapsed) { background-color: unset; color: var(--secondary-color); }
#faq-element .accordion-header { cursor: pointer; }

:is(.list-pros, .list-cons) li{position: relative;}
:is(.list-pros, .list-cons) li:before {
  display: inline-block;
  vertical-align: middle;
  margin-top: -5px;
  margin-right: 10px;
  font: 900 18px 'bootstrap-icons';
}
:is(.ul-checks, .list-pros) li:before {
  content: '\f4fa';
  color: #198754;
}
:is(.ul-minuses, .list-cons) li:before {
  content: '\f2e6';
  color: #dc3545;
}
/* Breadcrumbs ============= */
/* .breadcrumbs-wrapper {background: #756cc4;} */
.brdcmb-el {position: relative; width: 100%; margin: 0 auto;}
.brdcmb-el .breadcrumb{	padding: 0; margin: 0; list-style: none; border-radius: 0; font-size: 14px;}
.brdcmb-el .breadcrumb li {	vertical-align: middle; display: inline-block;}
.brdcmb-el .breadcrumb li a {color: var(--secondary-color);}
.brdcmb-el .breadcrumb li a:not(:first-of-type), .brdcmb-el .breadcrumb li:last-child, .breadcrumb-item+.breadcrumb-item{padding-left: 20px;}
.brdcmb-el .breadcrumb li:last-child {top: 1px;position: relative;}
.brdcmb-el .breadcrumb>li+li::before {content:none;}
.brdcmb-el .breadcrumb li a:after {position: absolute; content: "\f285"; font: 900 10px 'bootstrap-icons'; color: var(--p-color); top: 50%; transform: translateY(-50%);right: -15px; padding: 0;}
.brdcmb-el .breadcrumb li a{position: relative;	text-decoration: none;   transition: all 0.3s ease-in-out;    -webkit-transition: all 0.3s ease-in-out;    -o-transition: all 0.3s ease-in-out;}
/* .brdcmb-el .breadcrumb .breadcrumb-item.active {color: #fff;} */
@media screen and (max-width: 575px) {
	.brdcmb-el .breadcrumb{padding: 5px;overflow-x: auto;	display: block;	white-space: nowrap; position: relative;}
	.brdcmb-el .breadcrumb::-webkit-scrollbar-thumb { background-color: var(--primary-color); border-radius: 5px; }
  .brdcmb-el .breadcrumb::-webkit-scrollbar { height: 0.25rem; background: #f3f3f3; }
}
/* ============= */

.quick-nav {background: var(--primary-color);}
.quick-nav .list-group { max-width: fit-content; width: 90%; }
.quick-nav .list-group li.list-group-item { min-width: 250px; font-size: 16px; text-align: center; border: none; border-right: 1px solid rgb(247 255 247 / 70%); background: transparent; }
.quick-nav .list-group li.list-group-item:last-child { border-right: none; }
.quick-nav .list-group li a { color: var(--white-color); text-decoration: none; }
.quick-nav .list-group li a:hover { opacity: 0.8; text-decoration: none; }
.quick-nav .list-group::-webkit-scrollbar { height: 4px; background: rgb(247 255 247 / 45%); border-radius: 6px; }
.quick-nav .list-group::-webkit-scrollbar-thumb { background: rgb(247 255 247 / 70%); border-radius: 6px; }
.quick-nav i { margin-left: 5px; vertical-align: middle; filter: var(--header-icons-f);}
@media screen and (max-width: 767px) {
	.quick-nav .list-group { width: 100%; }
}

.simple-box {
  /* background: var(--section-bg-color); */
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}
.main-wrapper {margin-top: 86px;}
.bi::before, [class^="bi-"]::before, [class*=" bi-"]::before {filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(0%) hue-rotate(345deg) brightness(102%) contrast(102%);}
table.table :is(th) {vertical-align: text-top;}
table.table :is(th, td).brand-name {min-width: 100px; max-width: 100%;}

.footer-regulation [class*=logo-] {height: 30px;}
.logo-mga {background-image: var(--logo-mga);}
.logo-check-dein-spiel {background-image: var(--logo-check-dein-spiel);}
.logo-bioeg {background-image: url(/images/logos/bioeg.svg);}
.logo-ggl {background-image: url(/images/logos/ggl.svg);}
.footer-regulation .logo-check-dein-spiel {width: 73px;}
.footer-regulation .logo-ggl {width: 119px;}
.footer-regulation .logo-bioeg {width: 85px;}
.footer-regulation .logo-mga {width: 97px;}