@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Tenor+Sans&display=swap");
/* -------------------------------------------------------------------------- */
/*                    # pragma Variable and Utility Styling                   */
/* -------------------------------------------------------------------------- */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: Roboto, "Courier New", Courier, monospace; }

body,
html,
main {
  background-color: #2c2c2c; }

body,
main {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center; }

/* -------------------------------------------------------------------------- */
/*                           # pragma Generic Layout                          */
/* -------------------------------------------------------------------------- */
body {
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow-x: hidden; }

.bodyPopup {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  overflow: hidden;
  touch-action: none; }

main {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%; }

.wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 70%; }

@media only screen and (max-width: 1366px) {
  .wrapper {
    width: 95%; } }

i {
  color: #f7cd61;
  transform: scale(0.8); }

.reverse .right {
  order: -1; }

@media only screen and (max-width: 1366px) {
  .reverse .right {
    order: 1; } }

.margin-left {
  margin-left: 20px; }

@media only screen and (max-width: 768px) {
  .margin-left {
    margin-left: 0; } }

/* -------------------------------------------------------------------------- */
/*                             # pragma Typography                            */
/* -------------------------------------------------------------------------- */
p {
  font-family: "Roboto", Courier, monospace;
  font-size: 18px;
  line-height: 40px;
  color: #a8a8a7; }

a {
  font-family: "Roboto", Courier, monospace;
  font-weight: 300;
  font-size: 20px;
  line-height: 34px;
  cursor: pointer;
  text-decoration: none; }

h1,
h2,
h3 {
  text-transform: uppercase;
  font-family: "Tenor Sans", Courier, monospace; }

h1 {
  font-weight: 700;
  font-size: 63px;
  line-height: 3rem;
  color: white; }

h2 {
  font-size: 50px;
  color: #fffbdb;
  text-shadow: 0px 0px 9px #f7cd61;
  font-weight: 100; }

h3 {
  font-weight: 500;
  font-size: 30px;
  color: #a8a8a7; }

h4 {
  font-weight: 600;
  font-size: 15px;
  color: #a8a8a7; }

strong,
mark {
  background-color: transparent;
  color: #f7cd61;
  font-weight: inherit; }

.notice {
  color: #eb3f3f; }

@media only screen and (max-width: 1366px) and (min-width: 1024px) {
  p,
  a {
    font-size: 16px;
    line-height: 30px; }
  h1 {
    font-size: 63px; }
  h2 {
    font-size: 40px;
    line-height: 55px; }
  h3 {
    font-size: 23px; }
  h4 {
    font-size: 12px; } }

@media (max-width: 1024px) {
  p,
  a {
    font-size: 16px;
    line-height: 30px; }
  h1 {
    font-size: 36px; }
  h2 {
    font-size: 35px;
    line-height: 50px; }
  h3 {
    font-size: 18px;
    font-weight: 600; }
  h4 {
    font-size: 12px; } }

/* -------------------------------------------------------------------------- */
/*                              # pragma Button/s                             */
/* -------------------------------------------------------------------------- */
button {
  margin-top: 30px;
  background-color: transparent;
  border: 2px solid rgba(247, 205, 97, 0.5);
  border-radius: 2rem;
  padding: 10px 50px;
  color: #f7cd61;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer; }

button:focus {
  outline: 0; }

/* -------------------------------------------------------------------------- */
/*                                # pragma Hero                               */
/* -------------------------------------------------------------------------- */
.hero {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 80vw;
  height: 100vh; }
  .hero .desktop {
    width: 40vw;
    filter: grayscale(1); }
  .hero .mobileBG {
    display: none; }
  .hero .text h1 {
    font-size: 8rem;
    line-height: 8rem;
    color: #fffbdb;
    text-shadow: 0px 0px 9px #f7cd61; }
  .hero .text h2 {
    color: #a8a8a7;
    font-weight: 100; }

@media only screen and (max-width: 1366px) {
  .hero .text h1 {
    font-size: 100px;
    line-height: 120px; } }

@media only screen and (max-width: 1024px) {
  .hero {
    margin-bottom: 100px;
    overflow: hidden;
    width: 100%;
    background-image: url("/media/heroMobile-min.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat; }
    .hero .desktop {
      display: none; }
    .hero .text {
      position: absolute;
      bottom: 80px;
      left: 20px; }
      .hero .text h1 {
        line-height: normal;
        font-size: 70px; }
      .hero .text h2,
      .hero .text p {
        display: none; }
      .hero .text button {
        margin-top: 20px; } }

@media only screen and (max-width: 768px) {
  .hero .text h1 {
    font-size: 65px; } }

/* -------------------------------------------------------------------------- */
/*                              # pragma Header                               */
/* -------------------------------------------------------------------------- */
header {
  z-index: 10;
  height: 80px;
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: flex-end !important;
  position: fixed;
  top: 0;
  background-color: rgba(0, 0, 0, 0.534);
  backdrop-filter: blur(10px); }
  header ul {
    display: flex;
    margin-right: 10vw;
    list-style: none; }
    header ul li {
      margin-left: 3vw;
      font-size: 18px;
      text-transform: uppercase;
      color: #a8a8a7;
      font-weight: 600;
      cursor: pointer;
      text-shadow: 2px 2px rgba(0, 0, 0, 0.366); }

@media only screen and (max-width: 1366px) {
  header ul li {
    font-size: 15px; } }

/* -------------------------------------------------------------------------- */
/*                              # pragma Footer                               */
/* -------------------------------------------------------------------------- */
footer {
  background-color: #212121;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px; }

/* -------------------------------------------------------------------------- */
/*                      # pragma Specific section styling                     */
/* -------------------------------------------------------------------------- */
.imageBox {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-bottom: 150px; }
  .imageBox .left {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46%;
    overflow: hidden; }
    .imageBox .left img {
      height: 100%;
      box-sizing: border-box;
      max-width: 100%;
      max-height: 100%;
      width: 100%;
      object-fit: cover; }
  .imageBox .right {
    width: 46%; }
    .imageBox .right h2 {
      margin-top: 10px;
      padding: 0px 0 20px 0; }
    .imageBox .right .mark {
      margin-top: 40px;
      color: #f7cd61; }

@media only screen and (max-width: 1024px) {
  .imageBox .left img {
    margin-top: 30px; } }

@media only screen and (max-width: 1024px) and (min-width: 768px) {
  .imageBox .left {
    width: 40%; }
  .imageBox .right {
    width: 52%; } }

@media only screen and (max-width: 768px) {
  .imageBox {
    flex-direction: column-reverse;
    align-items: center; }
    .imageBox .left,
    .imageBox .right {
      padding: 0;
      margin: 0;
      width: 100%; }
      .imageBox .left h2,
      .imageBox .right h2 {
        font-size: 40px;
        padding-top: 20px;
        padding-bottom: 20px; }
      .imageBox .left img,
      .imageBox .right img {
        width: 100%; } }

.titleBox {
  margin-bottom: 150px; }
  .titleBox h2 {
    width: 70%;
    margin-top: 10px; }
  .titleBox img {
    margin-top: 40px;
    width: 85%; }
  .titleBox .chart {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    margin-top: 30px; }
    .titleBox .chart .location {
      display: flex;
      align-items: center;
      margin-top: 40px; }
      .titleBox .chart .location h3 {
        text-transform: none;
        font-family: "Roboto", Courier, monospace;
        font-weight: 300; }
      .titleBox .chart .location .notice {
        margin: 0; }
      .titleBox .chart .location .date {
        margin-right: 15px;
        width: 80px;
        height: 80px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        text-align: center;
        border: 2px solid #a8a8a7;
        flex-shrink: 0; }
        .titleBox .chart .location .date h3 {
          line-height: 0;
          padding-top: 23px;
          text-align: center; }
        .titleBox .chart .location .date p {
          padding-top: 6px;
          text-align: center; }
  .titleBox .playlist {
    display: flex;
    flex-direction: column;
    margin-top: 20px;
    flex-wrap: wrap;
    height: 600px; }
    .titleBox .playlist p {
      margin-top: 40px;
      font-weight: 700; }

.highlight .date {
  border: 2px solid #f7cd61 !important; }

.notice .date {
  border: 2px solid #eb3f3f !important; }

@media only screen and (max-width: 1024px) {
  .titleBox h2 {
    width: 100%; }
  .titleBox .chart h3 {
    font-size: 23px; }
  .titleBox .playlist {
    height: 800px; }
    .titleBox .playlist p {
      margin-top: 20px; } }

@media only screen and (max-width: 768px) {
  .titleBox .notice {
    margin-top: 30px; }
  .titleBox .chart h3 {
    font-size: 22px; } }

@media only screen and (max-width: 640px) {
  .titleBox .chart {
    height: auto; } }

.centerBox {
  margin-bottom: 140px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center; }
  .centerBox h2 {
    margin-bottom: 20px;
    text-align: center; }
  .centerBox .sponsor {
    transform: scale(0.5); }
  .centerBox img {
    width: 35%; }

@media only screen and (max-width: 1366px) {
  .centerBox img {
    width: 50%; } }

@media only screen and (max-width: 768px) {
  .centerBox img {
    width: 90%; } }

#comment {
  font-size: 25px; }

@media only screen and (max-width: 1366px) {
  #comment {
    font-size: 20px; } }

@media only screen and (max-width: 768px) {
  #comment {
    font-size: 15px;
    margin-top: 50px; } }

.popup {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 100;
  width: 100vw;
  height: 100vh;
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.733);
  display: flex;
  align-items: center;
  justify-content: center; }
  .popup img {
    position: absolute;
    top: 20px;
    right: 20px;
    cursor: pointer;
    transform: scale(2); }

@media only screen and (max-width: 1024px) {
  .popup {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0; }
    .popup iframe {
      width: 100%; } }

#new-year h2:last-of-type {
  width: 80%;
  margin-top: 100px; }

#kontaktSection {
  margin-top: 100px; }