html {
  scroll-behavior: smooth;
}
body {
  font-family: 'Lato', sans-serif;
  background-color: #000000;
}

main {
  background-color: #1C1E1E7A;
}

section {
  margin-top: 0;
}

*, ::after, ::before {
  box-sizing: border-box;
}

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

/* table styling */
th {
  border-bottom: 1px solid #A40D3D;
}

th, td {
  padding: 15px;
  text-align: left;
}

tr {
  border-bottom: 1px solid #A40D3D;
}

tr:last-of-type {
  border-bottom: none;
}

tbody tr:hover {
  background-color: #1C1E1E;
}

.text-center {
  text-align:center;
}

.scroll_icon_left, .scroll_icon_right {
  filter: invert(16%) sepia(85%) saturate(4038%) hue-rotate(331deg) brightness(78%) contrast(111%);
  /* filter: invert(100%) sepia(15%) saturate(7500%) hue-rotate(188deg) brightness(119%) contrast(100%); */
}

hr.red {
  border: 1px solid transparent;
  border-bottom: 1px solid #CD0142;
}

/* event cards */
.category-name {
  display: flex;
  align-content: stretch;
  color: #cd0142;
}

h2.category-name {
  font-size: 1rem;
  font-family: 'Stolzl Light';
  font-weight: normal;
}

.category-name > .redline {
  width: 100%;
  height: 1em;
  border-bottom: 1px solid #cd0142;
  margin-left: 0.5em; }

.color-white {
  color: #e9e9e9;
}


.event-group {
  width: 100%;
  height: 450px;
  padding: 0 1em 0 1em;
  display: flex;
  flex-wrap: nowrap;
}

.event-container {
  width: 99%;
  height: 450px;
  margin: 0;
  overflow-x: scroll;
  overflow-y: hidden;
  position: relative;
}

.event-slide {
  height: 400px;
  display: flex;
  flex-wrap: nowrap;
  position: absolute;
  z-index: 1;
  left: 0;
  transition: all 0.2s ease;
}

.card {
  background-color:#FFFFFF;
  position: relative;
  margin: 12px;
  width: 300px;
  height: 400px;
  overflow: hidden;
  /* box-shadow: 3px 3px rgba(255, 255, 255, 0.5); */
  cursor:pointer;
  color: #777;
}

.card-title {
  text-align: center;
  margin-bottom:3px;
  height:35px;
}

.card-location {
  color:#888888;
  text-align: center;
  display:block;
}

.card-body,
.card-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.card-img img {
  width: 100%;
}

.card-body {
  position: relative;
}

.overlay {
  position: relative;
  width: 100%;
  height: 300px;
  background-color: rgba(229, 11, 67, 0.5);
  opacity: 0;
  transition: height linear 0.4s, opacity linear 0.2s;
}

.card:hover .overlay {
  opacity: 1;
  height: 100px;
}

.card-info {
  background-color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 8px;
  height: 300px;
}

.card-title,
.card-price {
  color: #E50B43;
  font-size: 1rem;
  font-weight: bold;
  letter-spacing: 1px;
}

.card-separator {
  margin: 0 auto;
  width: 20%;
  height: 3px;
  background-color: #E50B43;
}

.card-additional {
  margin-top: 12px;
  padding: 0 20px;
  height:200px;
}

.card-additional-info {
  letter-spacing: 0.5px;
  margin-bottom: 6px;
  text-align: left;
  font-size: 0.9em;
}

.card-additional-info > .material-symbols-outlined {
  color: #E50B43;
  font-size: 0.85em;
  margin-right: 5px;
}

.card-additional-info span {
  color: #E50B43;
  font-weight: bolder;
}

span.card-black {
  color:#575757;
}

.action {
  color: #fff;
  border: 2px solid #fff;
  background-color: transparent;
  position: absolute;
  top: -100px;
  left: 50%;
  transform: translateX(-50%);
  width: 60%;
  outline: none;
  cursor: pointer;
  padding: 12px;
  text-transform: uppercase;
  text-align: center;
  font-size: 1rem;
  font-weight: bold;
  letter-spacing: 2px;
  transition: background-color 0.4s, top 0.4s;
}

.card:hover .action {
  top: 25px;
}

.action:hover {
  color: #E50B43;
  background-color: rgba(255, 255, 255, 1);
}

/* collapse */
.collapse {
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
}

.active, .collapse:hover {
  background-color: #1C1E1E;
}

.collapse:after {
  content: '\002B';
  color: white;
  font-weight: bold;
  float: right;
  margin-left: 5px;
}

.active:after {
  content: "\2212";
}

.collapse-content {
  padding: 0 18px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.7s ease-out;
}

/* blog-view, info view */
.blog-title, .info-title {
  color: #CD0142;
  text-transform: uppercase;
  margin: 15px 10px 5px 10px;
}

.blog-lead, .info-lead {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-direction: row;
  padding: 10px 2px;
}

/* event view */
.event-title {
  color: #E50B43;
  text-transform: uppercase;
  margin-bottom:5px;
}

.event-lead {
  font-size: 0.9rem;
  color:white;
  margin-top:5px;
}

.event-desc {
  position:relative;
  margin-top: 15px;
  padding: 10px 0px;
  overflow-y:auto;
  /* height: 280px; */
  height: auto;
}

.age-limit {
  float: right;
  margin: 3px 10px;
  color: black;
  background-color: #FFCB03;
  border: 2px solid black;
  border-radius: 25px;
  padding: 3px 3px 2px 2px;
  font-size: 9px;
  font-weight: bolder;
}

.age-limit-red {
  background-color: #BD1C1C;
}

pre {
  font-family: 'Lato', sans-serif!important;
  white-space: pre-wrap;       /* Since CSS 2.1 */
  white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
  white-space: -pre-wrap;      /* Opera 4-6 */
  white-space: -o-pre-wrap;    /* Opera 7 */
  word-wrap: break-word;       /* Internet Explorer 5.5+ */
}

pre a {
  color: #4499EE;
}

pre img {
  width:unset;
  height:unset;
  /* padding: 1rem; */
}

.event-link {
  padding:1rem;
}

/* dates view */
.dates-view {
  margin: 0 auto;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-top:25px;
}

.event-dates {
  width: 100%;
  margin-left: 25px;
  margin-right: 25px;
}

.event-dates h3 {
  text-transform: uppercase;
}

.event-dates small {
  color: #716C6D;
}

.btn-prevent {
  display: inline-block;
}

#main {
  transition: margin-left .5s;
  padding: 16px;
}

/* info page */
.info-view {
  margin: 0 auto;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-top:100px;
  background-color: #47484A;
  border-top-left-radius: 25px;
  border-top-right-radius: 25px;
}

.info-details {
  position:relative;
  width:100%;
}

.info-desc {
  position:relative;
  margin: 25px;
  padding: 10px 0px;
}

/* sidemenu */
.sidemenu {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 9999;
  top: 0;
  left: 0;
  background-color: #1c1e1e;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 60px;
}

.sidemenu a {
  padding: 8px;
  text-decoration: none;
  font-size: 18px;
  display: block;
  transition: 0.3s;
  text-align: center
}

.sidemenu a > span {
  color: #FFFFFF;
  border-bottom: 1px solid #1c1e1e;
}

.sidemenu a > span:hover {
  border-bottom: 1px solid #CD0142;
}

#sidemenu {
  width: 250px;
}

#main, #footer {
  margin-left:250px;
}

#open-menu, #close-menu {
  position: absolute;
  font-size: 36px;
}

#open-menu {
  top: 0;
  left: 3px;
  z-index:1;
  display:none;
}

#close-menu {
  top: 0;
  right: 5px;
  padding:unset;
  display:none;
}

hr.black {
  border: 1px solid transparent;
  border-bottom: 1px solid #383838;
  width: 85%;
}

/* sidemenu user */
.sidemenu-user {
  padding: 1em 0;
}

.sidemenu-user .user-img {
  width: 3em;
  margin: auto;
  margin-bottom: auto;
  margin-bottom: 1em;
  display: block;
  border-radius: 1.5rem;
}

.sidemenu-user p {
  width: 100%;
  text-align: center;
  margin-bottom: 1em;
}

.sidemenu-user .set-icon {
  width: 100%;
  display: inline-flex;
  justify-content: center;
}

.user-set {
  display:none;
}

.sidemenu-user:hover > .user-set {
  display: block;
}

.sidemenu-user .set-icon img {
  width: 1.5em;
  height: 1.5em;
  margin: 0.3em;
}

.sidemenu-user .set-icon a p {
  margin: 0;
  text-align: center;
  /* margin-top:0px; */
}

/* blog block on home*/
.blog-block {
  background: #454649;
  width: 17em;
  height: 17em;
  margin: 1em 2em 1em 0;
  border-radius: 1.5em;
  display: inline-block;
}

.blog-block-poster {
  width: 13em;
  height: 13em;
  margin: 0 auto;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  position: relative;
  top: -1rem;
  display: block;
  border: 2px solid #CD0142;
}

.blog-block-title {
  font-family: 'Stolzl Regular';
  line-height: 150%;
  font-weight: 100;
  font-size: 1em;
  color: white;
  text-align: center;
  margin:0;
}

.blog-block-info {
  font-weight: 100;
  font-size: 1rem;
  color: white;
  text-align: center;
  margin:0;
}

/* left bar, right bar */
#left-bar, #right-bar {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 4em;
  background-color: #FCFCFC;
  /* background-color: #282626; */
  color: #1C1E1E;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 60px;
}

#left-bar {
  left: 0;
  background-color: #2D2F2F;
}

#right-bar {
  right: 0;
}

#left-bar a, #right-bar a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  color:#E50B43;
  transition: 0.3s;
}

#left-bar a:hover, #right-bar a:hover {
  color: #1C1E1E;
}

#left-bar .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}

#right-bar .closebtn {
  position: absolute;
  top: 0;
  left: 0px;
  font-size: 36px;
}

/* sidemenu */
.sidemenu a {
  text-transform: uppercase;
  maring: 0 auto;
}

/* event info */
.leftbar-img {
  margin: 0 25px;
  /* padding:25px; */
  padding-bottom:0px;
  width:100%;
  max-width:350px;
  display: block;
}

.leftbar-desc {
  margin: 0 25px;
  padding:25px;
  width:100%;
  max-width:350px;
  display: block;
  background-color: #FFFFFF;
  color:#E50B43;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.cartlink {
  cursor:pointer;
  color:#E50B43;
}

.viewmore {
  display:inline;
  cursor:pointer;
  color:#E50B43;
}

/* footer */
footer {
  max-width:inherit;
  background-color: #000000;
}

.footer {
  max-width:80em;
  margin: 0 auto;
  background-color: #000000;
  padding: 0.75rem;
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
}

.footer-box {

}

.footer h2 {
  color: #c9c9c9;
}

.footer h4 {
  color:#E50B43;
}

.footer-eu {
  background:white;
  display:inline-block;
  padding: 0 5px;
}

.footer-eu > img {
  width:auto;
  height:60px;
}

/* app browser controls */

#browser-controls {
  display: none;
  position: fixed;
  bottom: 10px;
  left: 0;
  width: 100%;
  height: 50px;
  background-color: #FFFFFF00;
  justify-content: center;
  align-items: center;
  z-index:1;
}
#browser-controls button {
  display: flex;
  margin: 0 10px;
  padding: 10px;
  border: none;
  border-radius: 5px;
  background-color: #E50B4388;
  color: white;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;

}

/* media queries */
/* Extra large devices (large desktops, 1200px and up) */
@media only screen and (max-width: 1200px) {

}

/* Large devices (desktops, 992px and up) */
@media only screen and (max-width: 992px) {
  .event-img {
    display: none;
  }

  .event-details {
    position: relative;
    width: 100%;
  }

  #open-menu, #close-menu {
    display:block;
  }

  #sidemenu {
    width: 0;
  }
  main, #main, #footer {
    margin-left:0;
    padding: 0px;
  }

  /* event view */
  .event-view, .info-view {
    margin-top:35px;
  }

  .event-title {
    margin-bottom:0;
    padding: 5px;
    border-top-left-radius: 25px;
    border-top-right-radius: 25px;
    font-size: 1rem;
    text-align: center;
    text-transform: uppercase;
  }

  .event-lead {
    padding: 5px;
    padding-top: 0;
    font-size: 0.9rem;
    color:white;
  }

  .event-lead span {
    float:right;
  }

  .age-limit {
    margin: 0 10px;
  }

  .event-desc {
    position: relative;
    margin-top:0;
    padding: 5px 5px;
  }

  .info-desc {
    position: relative;
    margin: 10px;
    margin-top:0;
    padding: 5px 5px;
  }
}

/* Medium devices (tablets, 768px and up) */
@media only screen and (max-width: 768px) {
  #open-menu, #close-menu {
    display:block;
  }

  #sidemenu {
    width: 0;
  }
  main, #main, #footer {
    margin-left:0;
    padding: 0px;
  }

  /* event view */
  .event-view, .info-view {
    margin-top:35px;
  }

  .event-title, .blog-title {
    margin-bottom:0;
    padding: 5px;
    font-size: 1rem;
    text-align: center;
    text-transform: uppercase;
  }

  .event-lead {
    padding: 5px;
    padding-top: 0;
    font-size: 0.9rem;
    color:white;
  }

  .event-lead span {
    float:right;
  }

  .age-limit {
    margin: 0 10px;
  }

  .event-desc {
    position: relative;
    margin-top:0;
    padding: 5px 5px;
  }

  .info-desc {
    position: relative;
    margin: 10px;
    margin-top:0;
    padding: 5px 5px;
  }

  /* blog */

}

/* Small devices (landscape phones, 576px and up) */
@media only screen and (max-width: 576px) {

}

@media only screen and (max-width: 768px) {
  .event-desc {
    height: unset;
  }
}