* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box; }

@font-face {
  font-family: "HKGrotesk-Bold";
  src: url("../inc/fonts/HKGrotesk-Bold.otf"); }

@font-face {
  font-family: "HK Grotesk";
  src: url("../inc/fonts/HKGrotesk.otf"); }

@-webkit-keyframes pulseerib {
  0%, 13%, 40%, 75%, 100% {
    -webkit-transform: scale(1);
            transform: scale(1); }
  27% {
    -webkit-transform: scale(1.05);
            transform: scale(1.05); }
  53% {
    -webkit-transform: scale(1.04);
            transform: scale(1.04); }
  67% {
    -webkit-transform: scale(0.99);
            transform: scale(0.99); } }

@keyframes pulseerib {
  0%, 13%, 40%, 75%, 100% {
    -webkit-transform: scale(1);
            transform: scale(1); }
  27% {
    -webkit-transform: scale(1.05);
            transform: scale(1.05); }
  53% {
    -webkit-transform: scale(1.04);
            transform: scale(1.04); }
  67% {
    -webkit-transform: scale(0.99);
            transform: scale(0.99); } }

.see_kuu .def_active {
  -webkit-animation: pulseerib 3s infinite ease-in-out;
          animation: pulseerib 3s infinite ease-in-out; }

/* The Modal (background) */
.modal {
  display: none;
  /* Hidden by default */
  position: fixed;
  /* Stay in place */
  z-index: 1;
  /* Sit on top */
  left: 0;
  top: 0;
  width: 100%;
  /* Full width */
  height: 100%;
  /* Full height */
  overflow: auto;
  /* Enable scroll if needed */
  background-color: black;
  /* Fallback color */
  background-color: rgba(0, 0, 0, 0.4);
  /* Black w/ opacity */ }

#popupModal {
  z-index: 10;
  padding: 20px; }

#popupModalClose,
#popupModalImage {
  cursor: pointer; }

/* Modal Content/Box */
.modal-content {
  z-index: 10;
  position: relative;
  background-color: transparent;
  background-color: #fff;
  margin: auto;
  /* 15% from the top and centered */ }
  .modal-content img {
    max-width: 464px;
    max-height: 90vh;
    -o-object-fit: contain;
       object-fit: contain;
    padding: 0 22.59px; }

/* The Close Button */
.close {
  position: absolute;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  top: -22.59px;
  right: -22.59px;
  top: -7.5%;
  right: -6.5%;
  top: -6%;
  right: -5%;
  color: #aaa;
  color: #fff;
  background: black;
  border-radius: 100%;
  width: 45.18px;
  height: 45.18px;
  float: right;
  font-size: 28px;
  font-weight: 100; }

.close:hover,
.close:focus {
  color: #aaa;
  text-decoration: none;
  cursor: pointer; }

.juubel__container {
  background-color: black;
  padding-bottom: 9.38%;
  height: -webkit-max-content;
  height: -moz-max-content;
  height: max-content; }
  .juubel__container--header {
    width: 100%;
    text-align: center;
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    padding-top: 28%;
    padding-top: clamp(30px, 28%, 90px);
    height: 1px; }
    .juubel__container--header img {
      width: 100%;
      position: absolute;
      padding: 0 1rem;
      margin: auto;
      top: 0;
      bottom: 0;
      left: 15.39%;
      left: 0;
      right: 13.41%;
      right: 0;
      width: 100%;
      max-width: 267px; }
    .juubel__container--header h3 {
      color: #FFFFFF;
      font-family: "HK Grotesk";
      font-size: 28px;
      font-weight: bold;
      letter-spacing: 0.03px;
      line-height: 33px;
      text-align: center; }
  .juubel__container--body {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 100%;
    height: -webkit-max-content;
    height: -moz-max-content;
    height: max-content; }
    .juubel__container--body .desktop {
      display: none; }
    .juubel__container--body img {
      width: 100%; }
    .juubel__container--body .t_card, .juubel__container--body .m_card, .juubel__container--body .t_cards .greep, .juubel__container--body .m_card .greep {
      -webkit-transition: all 200ms ease-in-out;
      transition: all 200ms ease-in-out; }
      .juubel__container--body .t_card img, .juubel__container--body .m_card img, .juubel__container--body .t_cards .greep img, .juubel__container--body .m_card .greep img {
        -webkit-transition: all 200ms ease-in-out;
        transition: all 200ms ease-in-out; }
      .juubel__container--body .t_card svg, .juubel__container--body .m_card svg, .juubel__container--body .t_cards .greep svg, .juubel__container--body .m_card .greep svg {
        width: 100%;
        height: -webkit-max-content;
        height: -moz-max-content;
        height: max-content; }
      .juubel__container--body .t_card .def_hidden, .juubel__container--body .m_card .def_hidden, .juubel__container--body .t_cards .greep .def_hidden, .juubel__container--body .m_card .greep .def_hidden {
        opacity: 0;
        left: 0;
        top: 0; }
      .juubel__container--body .t_card.active, .juubel__container--body .m_card.active, .juubel__container--body .t_cards .greep.active, .juubel__container--body .m_card .greep.active {
        -webkit-transition: all 200ms ease-in-out;
        transition: all 200ms ease-in-out; }
        .juubel__container--body .t_card.active .def_hidden, .juubel__container--body .m_card.active .def_hidden, .juubel__container--body .t_cards .greep.active .def_hidden, .juubel__container--body .m_card .greep.active .def_hidden {
          opacity: 1; }
        .juubel__container--body .t_card.active .def_active, .juubel__container--body .m_card.active .def_active, .juubel__container--body .t_cards .greep.active .def_active, .juubel__container--body .m_card .greep.active .def_active {
          opacity: 0; }
    .juubel__container--body .t_cards svg {
      width: 100%;
      height: -webkit-max-content;
      height: -moz-max-content;
      height: max-content; }
    .juubel__container--body p {
      position: absolute;
      color: white;
      text-align: center;
      height: 1.22%;
      width: 4.53%;
      font-family: "HK Grotesk";
      font-size: 10px;
      font-weight: bold;
      letter-spacing: 0;
      line-height: 12px;
      text-align: center; }
    .juubel__container--body .mai {
      top: 10.32%;
      right: 19.38%;
      bottom: 53.89%;
      left: 67.2%; }
    .juubel__container--body .mobile {
      max-width: 500px;
      width: 100%;
      margin: auto;
      position: absolute;
      display: block;
      position: relative;
      left: 0;
      right: 0;
      top: 0; }
      .juubel__container--body .mobile .bk-group {
        padding-left: 6.67%;
        padding-right: 3.73%; }
      .juubel__container--body .mobile #mobileSVG {
        z-index: 1;
        padding-left: 5.67%;
        padding-right: 3.73%;
        position: absolute;
        left: 0;
        right: 0;
        top: -3px;
        max-width: 500px;
        margin: auto;
        height: 104%;
        width: 100%; }
      .juubel__container--body .mobile #t_4 {
        top: 31.39%;
        right: 3.552%;
        bottom: 94.68%;
        left: 60.18%; }
      .juubel__container--body .mobile #t_5 {
        top: 0;
        right: 7.496%;
        bottom: 80.42%;
        left: 57.57%; }
      .juubel__container--body .mobile #t_6 {
        top: 15.69%;
        right: 57.62%;
        bottom: 63.91%;
        left: 6.53%; }
      .juubel__container--body .mobile #t_7 {
        top: 31.71%;
        right: 37.376%;
        bottom: 45.14%;
        left: 21.632%; }
      .juubel__container--body .mobile #t_8 {
        top: 58.58%;
        right: 57.05%;
        bottom: 21.52%;
        left: 7.75%; }
      .juubel__container--body .mobile #t_9 {
        top: 56.8%;
        right: 4.66%;
        bottom: 25.24%;
        left: 63.67%; }
      .juubel__container--body .mobile #t_10 {
        top: 84.95%;
        right: 62.91%;
        bottom: -2.91%;
        left: 5.33%; }
      .juubel__container--body .mobile #t_11 {
        top: 73.95%;
        right: 32.74%;
        bottom: 6.8%;
        left: 33.32%; }
      .juubel__container--body .mobile #t_12 {
        top: 83.33%;
        right: 3.92%;
        bottom: -1.94%;
        left: 62.93%; }
    .juubel__container--body .t_abs {
      position: absolute; }
      .juubel__container--body .t_abs p {
        margin: auto; }
    .juubel__container--body .main {
      position: relative;
      height: 1px;
      padding-bottom: 189%; }
      .juubel__container--body .main svg {
        position: absolute;
        height: 100%;
        width: 100%; }
        .juubel__container--body .main svg .triangle {
          -webkit-transition: all 200ms ease-in-out;
          transition: all 200ms ease-in-out; }
          .juubel__container--body .main svg .triangle:hover {
            fill: white;
            opacity: 1; }
        .juubel__container--body .main svg #Artboard:hover text {
          fill: #CCA877; }
        .juubel__container--body .main svg #Artboard:hover .triangle {
          fill: white;
          opacity: 1; }
      .juubel__container--body .main #Page-1 {
        position: relative; }
    .juubel__container--body .bk-group {
      max-width: 500px;
      margin: auto;
      height: 100%; }
    .juubel__container--body .bk-group-d {
      display: none; }

@media only screen and (min-width: 600px) {
  .juubel__container {
    padding: 0;
    padding-right: 0;
    padding-left: 0;
    padding-bottom: 0; }
    .juubel__container--header {
      display: none; }
    .juubel__container--body .bk-group {
      display: none; }
    .juubel__container--body .bk-group-d {
      display: block;
      max-width: none;
      margin: auto; }
    .juubel__container--body .kinni {
      display: none; }
    .juubel__container--body .mobile {
      display: none; }
    .juubel__container--body .desktop {
      display: block;
      padding-top: 3.145%;
      padding-right: 2.89%;
      padding-bottom: 4.09%;
      padding-left: 2.93%;
      max-width: 1400px;
      margin: 0 auto;
      position: relative; }
      .juubel__container--body .desktop .d_aprsept {
        z-index: 3;
        top: 32.73%;
        right: 61.71%;
        left: 13.71%; }
      .juubel__container--body .desktop .d_apr {
        top: 32.73%;
        right: 68.42%;
        left: 13.71%; }
      .juubel__container--body .desktop .d_mai {
        top: 52.5%;
        right: 23.35%;
        left: 61%; }
      .juubel__container--body .desktop .d_jun {
        top: 7.16%;
        right: 41.35%;
        left: 41%; }
      .juubel__container--body .desktop .d_jul {
        top: 8%;
        right: 21.07%;
        left: 58.71%; }
      .juubel__container--body .desktop .d_aug {
        z-index: 3;
        top: 57.06%;
        right: 82.2%;
        left: 2.21%;
        bottom: 4.5%;
        bottom: 10.24%; }
      .juubel__container--body .desktop .d_sept {
        top: 48.72%;
        right: 61.71%;
        left: 22.57%; }
      .juubel__container--body .desktop .d_okt {
        top: 55.47%;
        right: 41.71%;
        left: 41%; }
      .juubel__container--body .desktop .d_nov {
        top: 59.77%;
        right: 4.71%;
        left: 81.28%; }
      .juubel__container--body .desktop .d_dets {
        top: 7.16%;
        right: 2.92%;
        left: 80.78%; }
    .juubel__container--body .desk-text {
      position: absolute;
      width: 100%;
      height: -webkit-max-content;
      height: -moz-max-content;
      height: max-content;
      font-family: "HK Grotesk";
      font-size: 40.07px;
      font-size: 30.07px;
      font-weight: bold;
      letter-spacing: 0.05px;
      line-height: 48px;
      max-width: 28%;
      color: white; } }

svg text {
  font-family: HKGrotesk-Bold, Arial, Helvetica, sans-serif; }