@import "mixins.less";
@import "admin.less";
@import "gallery.less";
@import "virtual.less";

// COLOR SCHEME
@grey: #D0CCD0;
@white: #FBFCFF;
@darkgrey: #605856;
@blue: #084D6F;
@darkblue: #274156;
@paleblue: #5594c8;
@red: #dc3b3b;
@green: #4ac84a;

@yellow: #e8e68a;

@health: #1C6E8C;
@environment: #4ea950;
@energy: #f07a25;

/*
Barlow+Condensed:wght@100;300;400;600;700
PT+Serif:ital,wght@0,400;0,700;1,400;1,700
Roboto: 300,400,700
*/

.font(@weight: 400) {
  font-family: 'PT Serif', serif;
  font-weight: @weight;
}
.title(@weight: 300) {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: @weight;
}
.system(@weight: 300) {
  font-family: 'Roboto', sans-serif;
  font-weight: @weight;
}

body,
html {
  margin: 0;
  padding: 0;
  .font;
  // background: @white;
}

html {
  scroll-behavior: smooth;
}

& a.jmodedit {
  display: none!important;
  & + div[role="tooltip"] {
    display: none;
  }
}

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

input:focus, textarea:focus, select:focus{
  outline: none;
}

/*
  5000: gallery pane
  2000: side menu
  1010: yacht preview
  1009: Sticky title
  1008: Sticky filters
  1000: gya perma bar
  992: menu button
  990: header
  980: filters
*/

body {
  overflow-x: hidden;
  .customBarThin;
  @media @ipad {
    width: 100vw;
    position: relative;
  }
  @media @pad-l {
    overflow: hidden;
  }
  @media @mobile-p {
    width: 100vw;
    overflow-x: hidden;
    position: relative;
  }
  @media @mobile-l {
    overflow: hidden;
  }

  &.locked {
    overflow-y: hidden;
  }

  & h1, h2, h3, h4, h5, h6 {
    .title;
  }

  & .yacht-preview {
    position: fixed;
    z-index: 1010;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: white;

    & .preloader {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 60px;
      height: 60px;
      border: 2px solid @paleblue;
      .translate(-50%,-100%,0);

      &::after {
        content: '';
        position: absolute;
        top: -4px;
        left: -4px;
        width: 8px;
        height: 8px;
        background: @paleblue;
        .radius(4px);
        animation: preloader 2s linear infinite; /* Adjust the animation duration as needed */
      }

      & img {
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
      }
    }

    & .yacht-preview-details {
      position: absolute;
      z-index: 1011;
      left: 50%;
      bottom: -50vh;
      padding: 10px 45px 20px;
      // width: 40%;
      // margin-left: -20%;
      color: white;
      text-align: center;
      .transition(all 0.5s ease);
      background: white;
      .translate(-50%,0,0);
      @media @pad {
        width: 90%;
      }
      @media @ipad-p {
        width: auto;
        padding-bottom: 40px;
      }
      @media @mobile-p {
        width: 90%;
      }

      &.active {
        bottom: -2px;
      }

      & .name {
        .title(700);
        font-size: 28px;
        margin-bottom: 10px;
        color: @blue;
        @media @laptop {
          font-size: 25px;
        }
      }

      & .detail {
        .title(600);
        font-size: 16px;
        color: black;
        @media @laptop {
          font-size: 15px;
        }
        @media @ipad {
          white-space: nowrap;
        }

        & a {
          .title(600);
          text-decoration: none;
          color: @blue;
        }
      }
    }

    & .close-preview {
      position: absolute;
      top: 0;
      right: 0;
      display: flex;
      align-items: center;
      .transition;
      background: @darkblue;
      color: white;
      padding: 10px 10px 10px 20px;
      gap: 10px;
      .title(600);
      font-size: 18px;
      cursor: pointer;
      z-index: 2;
      @media @laptop {
        font-size: 16px;
      }
      @media @ipad {
        top: 20px;
        right: 20px;
      }

      &:hover {
        color: @paleblue;
      }
    }
    & .zoom-preview {
      position: absolute;
      top: 0;
      left: 0;
      align-items: center;
      .transition;
      background: @darkblue;
      color: white;
      padding: 10px 20px 10px 10px;
      gap: 10px;
      .title(600);
      font-size: 18px;
      cursor: pointer;
      z-index: 3;
      display: none;
      @media @pad {
        font-size: 16px;
        display: flex;
      }
      @media @ipad {
        display: none;
      }
      @media @mobile-p {
        font-size: 16px;
        display: flex;
      }
    }

    & img {
      position: absolute;
      top: 20px;
      left: 20px;
      width: calc(~"100vw - 40px");
      height: calc(~"100vh - 40px");
      bottom: 20px;
      object-fit: contain;
    }

    &.zoomed {
      overflow: auto;
      .customBarThin;
      .customBarThinHorizontal;
      
      & .zoom-preview {
        display: none;
      }
      & .yacht-preview-details {
        display: none;
      }
      & .close-preview {
        position: fixed;
      }
      
      &.landscape {
        & img {
          width: auto;
          min-height: 100%;
        }
      }

      & img {
        width: auto;
        height: auto;
        min-width: 100%;
        top: 0px;
        left: 0px;
      }
    }
  }

  &.scrolled {
    & div.gya-perma {
      height: 50px;
      @media @laptop {
        height: 40px;
      }
      @media @mobile-p {
        right: 0;
        height: 50px;
      }
    }
    & .side-menu {
      & .menu-button {
        left: -60px;
        .transition(all 0.3s ease);
      }
    }
    & header {
      height: 50px;
      @media @laptop {
        height: 40px;
      }
      @media @pad {
        height: 40px;
        background-color: #000;
      }
      @media @mobile-p {
        height: 50px;
        background-color: #000;
      }
      &.black {
        background: black;
      }
      & .medys-logo {
        display: none;
      }
      & .medys-logo-minified {
        opacity: 1;
        .transition(all 0.3s ease 0.3s);
        .translate(0,0,0);
      }
      & .minified-menu-button {
        left: 4px;
        .transition(all 0.3s ease 0.5s);
        opacity: 1;
        @media @mobile-p {
          left: 9px;
        }
      }
    }
    & .new-menu-trigger {
      .transition(all 0.3s ease);
      right: -200px;
      @media @mobile-p {
        right: 0;
        display: none;
      }
    }
    & stickytitle {
      .translate(-50%,0,0);
      @media @pad {
        .translate(0,0,0);
      }
      @media @ipad {
        .translate(0,0,0);
      }
      @media @mobile-p {
        .translate(0,0,0);
      }
      @media @mobile-l {
        .translate(0,0,0);
      }
    }
    & content {
      & .program {
        & .counter, & .program-output {
          top: 35vh;
          @media @pad {
            top: 200px;
          }
          @media @ipad {
            top: 35vh;
          }
          @media @pad-l {
            top: 200px;
          }
          @media @mobile-p {
            top: 170px;
          }
          @media @mobile-l {
            top: 130px;
          }
        }
        & .program-output {
          @media @pad {
            top: 300px;
          }
          @media @ipad {
            top: 35vh;
          }
          @media @pad-l {
            top: 170px;
          }
          @media @mobile-p {
            top: 240px;
          }
          @media @mobile-l {
            top: 112px;
          }
        }
      }
    }
  }

  & div.gya-perma {
    position: fixed;
    z-index: 1000;
    width: 50vw;
    height: 50px;
    top: 0;
    right: 0;
    padding: 0 20px;
    background: linear-gradient(to right, rgba(30, 87, 153, 0) 0%, rgba(19, 61, 103, 0) 44%, black 100%);
    @media print {
      display: none;
    }
    @media @laptop {
      height: 40px;
    }
    @media @ipad {
      right: auto;
      left: 100vw;
      height: 50px;
      transform: translate3d(-100%,0,0);
    }
    @media @pad-p {
      height: 40px;
    }
    @media @pad-l {
      height: 40px;
    }
    @media @mobile-p {
      height: 50px;
      right: 80px;
    }

    & div.social {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 10px;
      height: 100%;

      & a.gya {
        .title(700);
        font-size: 16px;
        white-space: nowrap;
        display: block;
        color: white;
        text-decoration: none;
        .transition;
        opacity: 0.6;

        &.mobile {
          display: none;
          @media @mobile-p {
            display: block;
          }
        }

        @media @laptop {
          font-size: 15px;
        }
        @media @ipad {
          font-size: 16px;
        }
        @media @mobile-p {
          display: none;
        }

        &:hover {
          opacity: 1;
        }
      }

      & a {
        display: block;
        .transition;
        opacity: 0.6;
        color: white;
        text-decoration: none;

        &:hover {
          opacity: 1;
        }

        & i {
          font-size: 23px;
          @media @laptop {
            font-size: 20px;
          }
          @media @ipad {
            font-size: 23px;
          }
        }
      }
    }
  }

  & header {
    position: fixed;
    top: 0;
    width: 100vw;
    z-index: 990;
    .transition(all 0.3s ease);
    overflow-x: hidden;
    height: 120px;
    background: transparent;
    @media print {
      display: none;
    }
    @media @pad {
      height: 120px;
    }
    @media @ipad {
      height: 120px;
    }

    & .medys-logo-minified {
      position: absolute;
      top: 16px;
      left: 55px;
      .transition(all 0.3s ease);
      .translate(-200px,0,0);
      opacity: 0;
      @media @laptop {
        top: 11px;
        left: 45px;
      }
      @media @mobile-p {
        top: 15px;
        left: 50px;
      }

      & img {
        width: 105px;
      }
    }

    & .medys-logo {
      position: absolute;
      top: 20px;
      left: 0px;
      .transition;

      & img {
        width: 237px;
        height: auto;
        .transition;
        filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.3));
        @media @laptop {
          width: 200px;
        }
        @media @pad {
          width: 170px;
        }
        @media @ipad {
          width: 200px;
        }
        @media @mobile-p {
          width: 170px;
        }
      }
    }

    & > ul {
      display: flex;
      align-items: flex-start;
      justify-content: flex-end;
      list-style: none;
      margin: 0;
      padding: 0 20px;
      width: 100%;

      & > li {
        .title;
        font-size: 19px;
        color: white;
        cursor: pointer;
        flex: 0 0 145px;
        text-align: center;
        .transition;
        position: relative;

        &.active {
          & > span, & > a {
            color: @yellow;
          }
        }

        & > span, & > a {
          text-decoration: none;
          cursor: pointer;
          text-align: center;
          display: block;
          padding-bottom: 10px;
          .transition;
          position: relative;
          font-weight: 600;
          white-space: nowrap;

          &::before {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 0;
            height: 2px;
            border-top: thin solid @yellow;
            .transition;
          }
        }

        &:hover {

          & > span, & > a {
            color: @yellow;
            &::before {
              width: 200px;
            }
          }

          & > ul {
            display: block;
            max-height: 400px;
            padding-top: 10px;
            padding-bottom: 10px;

            & > li {

              &.active {
                & > span, & > a {
                  color: @yellow;
                }
              }

              &:hover {
                & > span, & > a {
                  color: @yellow;
                }
              }
            }
          }
        }

        & > ul {
          max-height: 0;
          overflow: hidden;
          text-align: left;
          list-style: none;
          margin: 0;
          padding: 0;
          .alpha(50,0,0,0);
          position: absolute;
          width: 200px;
          .transition;

          & > li {
            width: 100%;
            text-align: left;
            padding: 5px 10px;

            & span, a {
              text-decoration: none;
              cursor: pointer;
              text-align: left;
              color: white;
              font-size: 18px;
            }

          }
        }
      }
    }

    & .minified-menu-button {
      position: absolute;
      top: 4px;
      left: -50px;
      width: 36px;
      height: 36px;
      border: thin solid #4e97d2;
      cursor: pointer;
      .transition(all 0.3s ease);
      opacity: 0;
      @media @laptop {
        width: 32px;
        height: 32px;
      }
      @media @mobile-p {
        top: 9px;
      }

      & .line {
        position: absolute;
        top: 50%;
        margin-top: -1px;
        height: 2px;
        width: 50%;
        left: 25%;
        background: #85c9f0;
        .origin(0,50%);

        &.line-top {
          .translate(0,-7px,0);
        }
        &.line-bottom {
          .translate(0,7px,0);
        }
      }
    }
  }

  & .new-menu-trigger {
    position: absolute;
    top: 75px;
    .transition(all 0.3s ease 0.5s);
    right: 30px;
    backdrop-filter: blur(5px);
    .alpha(20,255,255,255);
    z-index: 992;
    .title(700);
    font-size: 20px;
    letter-spacing: 0.5px;
    color: white;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    width: 100px;
    cursor: pointer;
    .transition(all 0.3s ease);
    .radius(4px);
    @media print {
      display: none;
    }
    @media @laptop {
      font-size: 18px;
      padding: 8px;
      width: 90px;
      top: 60px;
    }
    @media @pad {
      top: 50px;
      right: 20px;
      font-size: 16px;
      padding: 5px 8px 5px 5px;
      width: 81px;
    }
    @media @ipad-p {
      top: 70px;
      right: 22px;
    }
    @media @mobile-p {
      top: 0;
      right: 0;
      background: black;
      .radius(0);
      height: 50px;
    }

    &.black {
      background: black;
    }

    &.active {
      & .donut {
        & .line {
          &.middle {
            width: 0!important;
            left: 50%;
          }
          &.top {
            width: 100%!important;
            -ms-transform: translate(0, 0) rotate(45deg);
            -webkit-transform: translate3d(0, 0, 0) rotate(45deg);
            -moz-transform: translate3d(0, 0, 0) rotate(45deg);
            -ms-transform: translate3d(0, 0, 0) rotate(45deg);
            -o-transform: translate3d(0, 0, 0) rotate(45deg);
            transform: translate3d(0, 0, 0) rotate(45deg);
          }
          &.bottom {
            width: 100%!important;
            -ms-transform: translate(0, 0) rotate(-45deg);
            -webkit-transform: translate3d(0, 0, 0) rotate(-45deg);
            -moz-transform: translate3d(0, 0, 0) rotate(-45deg);
            -ms-transform: translate3d(0, 0, 0) rotate(-45deg);
            -o-transform: translate3d(0, 0, 0) rotate(-45deg);
            transform: translate3d(0, 0, 0) rotate(-45deg);
          }
        }
      }
    }

    &:hover {
      .radius(0px);
      .alpha(50,0,0,0);
      & .donut {
        & .line {
          width: 100%!important;
        }
      }
    }

    & .label {
      color: white;
    }

    & .donut {
      flex: 0 0 20px;
      height: 30px;
      position: relative;

      & .line {
        position: absolute;
        top: 50%;
        left: 0%;
        width: 100%;
        height: 2px;
        margin-top: -1px;
        background: white;
        width: 85%;
        .transition(all 0.3s ease);

        &.top {
          .translate(0,-8px,0);
          width: 70%;
          @media @laptop {
            .translate(0,-7px,0);
          }
        }
        &.bottom {
          width: 100%;
          .translate(0,8px,0);
          @media @laptop {
            .translate(0,7px,0);
          }
        }
      }
    }
  }

  & .side-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 0;
    height: 100vh;
    z-index: 2000;
    @media print {
      display: none;
    }

    &.active {
      width: 100vw;

      & .back {
        width: 100%;
        cursor: pointer;
        .transition(all 0.2s ease);
      }
      & .decor {
        .translate(0,0,0);
        cursor: pointer;
        .transition(all 0.3s ease-in-out 0.3s);
      }
      & .menu-block {
        .translate(0,0,0);
        .transition(all 0.3s ease-in-out 0.5s);
      }
      & .menu-button {
        left: -60px;
        .transition(all 0.3s ease);
      }
    }

    & .menu-button {
      .alpha(20,255,255,255);
      position: absolute;
      width: 40px;
      height: 40px;
      top: 30px;
      left: 30px;
      backdrop-filter: blur(5px);
      border: thin solid aliceblue;
      cursor: pointer;
      .transition(all 0.3s ease 0.6s);

      &:hover {
        & .line {
          opacity: 1;
          left: 20%;
          width: 60%!important;
        }
      }

      & .line {
        position: absolute;
        top: 50%;
        left: 0;
        width: 50%;
        height: 4px;
        background: aliceblue;
        margin-top: -1px;
        .transition(all 0.2s ease);
        opacity: 0.6;

        &.line-top {
          width: 40%;
          margin-top: -11px;
        }
        &.line-bottom {
          width: 60%;
          margin-top: 8px;
        }
      }
    }

    & .back {
      width: 0;
      height: 100%;
      .alpha(60,255,255,255);
      position: absolute;
      top: 0;
      right: 0;
      .transition(all 0.3s ease-in-out);
    }

    & .decor {
      background: white;
      position: absolute;
      top: 0;
      left: 0;
      height: 100vh;
      overflow: hidden;
      .transition(all 0.3s ease-in-out 0.1s);
      width: 50vw;
      .translate(-50vw,0,0);

      @media @laptop {
        width: 45vw;
      }
      @media @pad {
        width: 80vw;
        .translate(-81vw,0,0);
      }
      @media @pad-l {
        width: 70vw;
        .translate(-71vw,0,0);
      }
      @media @ipad {
        width: 60vw;
        .translate(-61vw,0,0);
      }
      @media @mobile-p {
        width: 100vw;
        .translate(-101vw,0,0);
      }
      @media @mobile-l {
        width: 70vw;
        .translate(-71vw,0,0);
      }

      & .decor-inner {
        position: absolute;
        top: 0;
        right: 0;
        width: 100%;
        height: 100%;
        background-image: url(images/menu.jpg);
        background-position: right center;
        background-repeat: no-repeat;
        background-size: cover;
        animation: decor 60s linear infinite;
        @media @mobile-l {
          animation: none;
        }
      }
    }

    & .menu-block {
      position: absolute;
      top: 0;
      left: 0;
      width: 30vw;
      height: 100vh;
      background: -webkit-linear-gradient(to bottom, #004e92, #000428);
      background: linear-gradient(to bottom, #004e92, #000428);
      .transition(all 0.3s ease-in-out 0.2s);
      .translate(-30vw,0,0);
      @media @pad {
        width: 55vw;
        .translate(-56vw,0,0);
      }
      @media @pad-l {
        width: 50vw;
        display: flex;
        align-items: stretch;
        .translate(-51vw,0,0);
      }
      @media @ipad {
        width: 40vw;
        .translate(-41vw,0,0);
      }
      @media @pad-l {
        width: 60vw;
        display: flex;
        align-items: stretch;
        .translate(-61vw,0,0);
      }
      @media @mobile-p {
        width: 80vw;
        display: flex;
        align-items: stretch;
        .translate(-81vw,0,0);
      }
      @media @mobile-l {
        width: 50vw;
        .translate(-51vw,0,0);
      }

      & .block-title {
        color: ghostwhite;
        margin: 20px 0 0 20px;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 10px;
        cursor: pointer;
        @media @pad-l {
          align-items: flex-start;
          background: black;
          margin: 0;
          padding: 20px;
        }
        @media @mobile-p {
          align-items: flex-start;
          background: black;
          margin: 0;
          padding: 20px;
        }

        &:hover {
          & i {
            color: @yellow;
          }
        }

        & span {
          display: block;
          .title(700);
          font-size: 40px;
          color: @paleblue;
          @media @laptop {
            font-size: 36px;
          }
          @media @pad {
            font-size: 32px;
          }
          @media @pad-l {
            display: none;
          }
          @media @mobile-p {
            display: none;
          }
        }

        & i {
          display: block;
          font-size: 16px;
          .transition(all 0.3s ease);
          @media @pad-l {
            font-size: 25px;
          }
          @media @mobile-p {
            font-size: 25px;
          }
        }
      }

      & > ul {
        margin: 20px 0 0 20px;
        padding: 0;
        list-style: none;
        @media @mobile-l {
          margin: 10px 0 0 10px;
        }

        & > li {
          margin: 10px 0;
          color: ghostwhite;
          cursor: pointer;
          .title(700);
          font-size: 22px;
          @media @laptop {
            font-size: 20px;
            margin: 7px 0;
          }
          @media @pad {
            font-size: 19px;
            margin: 5px 0;
          }
          @media @mobile-l {
            font-size: 17px;
          }

          &:not(.deeper) {
            &::before {
              opacity: 0;
            }
          }

          & a {
            color: white;
            text-decoration: none;
          }

          &::before {
            content: "\ea13";
            font-family: remixicon!important;
            font-style: normal;
            -webkit-font-smoothing: antialiased;
            margin-right: 10px;
            font-size: 14px;
            .translate(0,-2px,0);
            display: inline-block;
          }

          &.active {
            color: #00bbff;

            & > a {
              color: #00bbff;
            }

            &::before {
              content: "\f1af";
            }

            & > ul {
              max-height: 220px;
              padding: 0 0 10px 18px;
              border-left: thin solid #00bbff;
              margin: 15px 0 20px 25px;
              transition: max-height 0.3s ease-in-out;
              @media @laptop {
                padding: 0 0 5px 15px;
                margin: 12px 0 16px 24px;
              }

              & > li {
                opacity: 1;
                .translate(0,0,0);
              }
            }
          }

          & > ul {
            margin: 0 0 0 25px;
            padding: 0;
            list-style: none;
            padding: 0 0 0 18px;
            overflow: hidden;
            max-height: 0;
            transition: max-height 0.3s ease-in-out 0.3s;

            & li {
              margin: 0 0 10px 0;
              .font(400);
              font-size: 17px;
              opacity: 0;
              .translate(20px,0,0);
              position: relative;
              color: white;
              @media @laptop {
                font-size: 16px;
                margin: 0 0 6px 0;
              }
              @media @pad {
                font-size: 14px;
                margin: 0 0 4px 0;
              }

              &:nth-child(1) { transition: transform 0.3s ease, opacity 0.3s ease, color 0.3s ease; }
              &:nth-child(2) { transition: transform 0.3s ease 0.1s, opacity 0.3s ease 0.1s, color 0.3s ease; }
              &:nth-child(3) { transition: transform 0.3s ease 0.2s, opacity 0.3s ease 0.2s, color 0.3s ease; }
              &:nth-child(4) { transition: transform 0.3s ease 0.3s, opacity 0.3s ease 0.3s, color 0.3s ease; }
              &:nth-child(5) { transition: transform 0.3s ease 0.4s, opacity 0.3s ease 0.4s, color 0.3s ease; }
              &:nth-child(6) { transition: transform 0.3s ease 0.5s, opacity 0.3s ease 0.5s, color 0.3s ease; }
              &:nth-child(7) { transition: transform 0.3s ease 0.6s, opacity 0.3s ease 0.6s, color 0.3s ease; }
              &:nth-child(8) { transition: transform 0.3s ease 0.7s, opacity 0.3s ease 0.7s, color 0.3s ease; }

              &.active, &:hover {
                & a {
                  color: #00bbff;
                }
              }
            }

            & a {
              text-decoration: none;
              color: ghostwhite;
            }
          }
        }
      }
    }

  }

  & hero {
    position: relative;
    display: block;
    width: 100vw;
    height: 100vh;
    .blueGradient;
    overflow: hidden;
    .noselect;
    .transition;
    @media @ipad {
      width: 100vw;
      height: 100vh;
      overflow: hidden;
    }
    @media @mobile-p {
      width: 100vw;
      height: 100vh;
      overflow: hidden;
    }

    &.loaded {
      background: transparent;
    }

    & #medysmedia {
      position: fixed;
      z-index: -1;
      display: none;
      @media @pad {
        position: absolute;
        top: 0!important;
        left: 50%!important;
        .translate(-50%,0,0);
      }
      @media @ipad {
        position: sticky;
        top: 0;
      }
      @media @mobile-p {
        position: absolute;
        top: 0!important;
        left: 50%!important;
        .translate(-50%,0,0);
      }
    }

    & .startup {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: -1;
      .blueGradient;
    }

    & .preloader {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 60px;
      height: 60px;
      border: 2px solid white;
      .translate(-50%,-100%,0);
      @media @laptop {
        width: 50px;
        height: 50px;
      }
      @media @pad {
        top: 40%;
        width: 40px;
        height: 40px;
      }
      @media @ipad {
        top: 35%;
      }
      @media @mobile-p {
        top: 30%;
        width: 40px;
        height: 40px;
      }

      &::after {
        content: '';
        position: absolute;
        top: -4px;
        left: -4px;
        width: 8px;
        height: 8px;
        background: white;
        .radius(4px);
        background: white;
        animation: preloader 2s linear infinite; /* Adjust the animation duration as needed */
      }

      & img {
        width: 100%;
        height: 100%;
      }
    }

    & #canvas {
      // position: absolute;
      // top: 0;
      // left: 0;
      // width: 100%;
      // height: 100%;
      // z-index: 3;
      display: none;
    }

    & .show-medys {
      position: absolute;
      bottom: 76px;
      width: 350px;
      .title(300);
      color: #e8e68a;
      margin-left: -175px;
      left: 50%;
      font-size: 24px;
      text-align: center;
      letter-spacing: 1px;
      cursor: pointer;
      @media @laptop {
        bottom: 95px;
        font-size: 23px;
      }
      @media @pad-l {
        bottom: 100px;
        font-size: 26px;
      }
      @media @ipad {
        bottom: 150px;
        font-size: 30px;
      }
      @media @mobile-p {
        bottom: 130px;
      }

      &::after {
        position: absolute;
        width: 40px;
        height: 40px;
        .radius(20px);
        content: '';
        bottom: -51px;
        left: 50%;
        margin-left: -20px;
        border: thin solid #e8e68a;
        @media @laptop {
          width: 36px;
          height: 36px;
        }
        @media @ipad {
          width: 40px;
          height: 40px;
        }
      }

      &::before {
        position: absolute;
        content: '';
        width: 16px;
        height: 16px;
        content: '';
        bottom: -35px;
        left: 50%;
        margin-left: -8px;
        border-left: thin solid #e8e68a;
        border-bottom: thin solid #e8e68a;
        .rotate(-45deg);
        @media @laptop {
          width: 14px;
          height: 14px;
          bottom: -36px;
          margin-left: -9px;
        }
        @media @laptop {
          width: 16px;
          height: 16px;
          bottom: -35px;
          margin-left: -8px;
        }
      }
    }

    & .details {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100vw;
      height: 250px;
      background-color: rgba(0, 0, 0, 0.2);
      // backdrop-filter: blur(5px); /* Adjust the blur radius as needed */
      background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8));
      // border-top: thin solid white;
      overflow: hidden;
      .transition(all 0.3s ease 0.5s);
      @media @pad {
        height: 55vh;
      }
      @media @ipad {
        height: 60vh;
      }
      @media @mobile-p {
        height: 50vh;
      }

      &.active {
        background: transparent;
      }

      &.hidden {
        height: 0;
        .transition(all 0.3s ease);
      }

      & .item {
        position: absolute;
        top: -20px;
        left: 0;
        text-align: center;
        width: 100%;
        .title(900);
        color: white;
        font-size: 100px;
        @media @laptop {
          font-size: 90px;
          top: 0;
        }
        @media @pad {
          font-size: 65px;
          line-height: 65px;
        }
        @media @pad-l {
          font-size: 55px;
          line-height: 55px;
        }
        @media @ipad {
          font-size: 90px;
          line-height: 90px;
        }
        @media @mobile-p {
          font-size: 55px;
          line-height: 55px;
        }

        &.active {
          & span {
            &.span1 {
              .transition(all 0.3s ease 0.2s);
              .translate(0,0,0);
              opacity: 1;
            }
            &.span2 {
              .transition(all 0.4s ease 0.4s);
              .translate(0,0,0);
              opacity: 1;
            }
          }
        }

        & span {
          display: inline-block;
          &.span1 {
            .transition(all 0.4s ease);
            .translate(-100px,0,0);
            opacity: 0;
            letter-spacing: 2px;
          }
          &.span2 {
            padding-left: 10px;
            letter-spacing: 2px;
            // .title(100);
            .transition(all 0.4s ease);
            .translate(100px,0,0);
            opacity: 0;
          }
        }
      }
    }
  }

  & display {
    display: block;
    position: relative;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    @media print {
      display: none;
    }

    & .medysbutton {
      .medysButton(@textcolor1: white, @textcolor2: white, @radius: 25px, @border: white, @fontweight: 700, @fontsize: 20px, @arrow: white, @borderhover: white, @arrowhover: white);
      display: inline-block;
      margin-top: 40px;
    }

    &.narrow {
      height: 120px!important;
    }

    &.video {
      &.loaded {
        background: transparent;
      }

      & videocontainer {
        width: 100vw;
        height: 100vh;
        position: relative;
        display: block;
        overflow: hidden;

        & video {
          height: 100%;
          width: 100%;
          object-fit: cover;
          position: fixed;
          top: 0%;
          left: 0;
          z-index: -1;
          @media @ipad-p {
            height: 100%;
            width: auto;
          }
        }
      }
    }

    &.half {
      height: 70vh;
      @media @laptop {
        height: 60vh;
      }
      @media @pad-p {
        height: 55vh;
      }
      @media @ipad {
        height: 50vh;
      }
    }

    &.common {
      &.video {
        height: 200px;
        @media @laptop {
          height: 170px;
        }
        @media @pad-p {
          height: 130px;
        }
        @media @pad-l {
          height: 130px;
        }
        @media @ipad-p {
          height: 170px;
        }
        @media @ipad-l {
          height: 140px;
        }
        @media @mobile-p {
          height: 130px;
        }
        @media @mobile-l {
          height: 110px;
        }

        & videocontainer {
          display: block;
          width: 100vw;
          height: 100%;
          overflow: hidden;
          position: relative;
          // https://www.pond5.com/stock-footage/item/51970387-high-quality-perfectly-seamless-loop-deep-blue-ocean-waves-u

          &.narrow {
            height: 120px;
          }

          &.white {
            &::after {
              background: -webkit-linear-gradient(to bottom, transparent, white);
              background: linear-gradient(to bottom, transparent, white);
            }
          }

          &::after {
            content: '';
            position: absolute;
            left: 0;
            bottom: 0;
            width: 100%;
            height: 65%;
            background: -webkit-linear-gradient(to bottom, transparent, #18436c);
            background: linear-gradient(to bottom, transparent, #18436c);
          }

          &::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            backdrop-filter: url(filters.svg#filter) blur(5px) saturate(110%) brightness(90%);
          }

          & video {
            width: 100vw;
            height: auto;
          }
        }
      }
    }

    &.blue {
      & .mask {
        .blueGradient;
      }
    }

    &.still {
      & .moving {
        animation-name: none!important;
      }
    }

    &.fixed {
      & .moving {
        position: fixed;
        z-index: -1;
      }
    }

    & .mask {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: white;
    }

    & .moving {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      .cover;
      .origin(50%,50%);

      &.anime {
        animation: slide 30s linear infinite;
      }
    }

    & .inner {
      position: absolute;
      top: 50%;
      .translate(0, -50%, 0);
      left: 0;
      width: 100%;
      text-align: center;

      & h1 {
        .title(900);
        font-size: 110px;
        color: white;
        text-transform: uppercase;
        margin: 0;
        .noselect;
        text-shadow: 0 0 3px black;
        padding: 0 10%;
        @media @laptop {
          font-size: 88px;
        }
        @media @pad-p {
          font-size: 55px;
          line-height: 55px;
          padding: 20px 40px 0;
        }
        @media @ipad-p {
          font-size: 70px;
          line-height: 70px;
          padding: 20px 20% 0;
        }
        @media @pad-l {
          font-size: 55px;
          line-height: 55px;
          padding: 20px 40px 0;
        }
        @media @mobile-p {
          font-size: 55px;
          line-height: 55px;
          padding: 20px 40px 0;
        }
      }

      & .medys-share {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        padding: 0 40px 15px;
        margin-bottom: 10px;
        @media @pad-p {
          margin-top: 10px;
        }
        @media @ipad {
          margin-top: 10px;
          margin-bottom: 0;
        }
        @media @pad-l {
          margin-top: 10px;
        }
        @media @mobile-p {
          margin-top: 10px;
        }

        & h3 {
          display: none;
        }

        & a {
          color: white;
          text-decoration: none;
          .transition(all 0.3s ease);
          font-size: 20px;
          text-shadow: 0 0 3px black;
          @media @laptop {
            font-size: 18px;
          }

          &:hover {
            color: black;
            text-shadow: 0 0 3px white;
          }
        }
      }

      & .description {
        width: 100%;
        padding: 0 20vw;
        text-align: center;
        .transition(opacity 0.5s ease 0.1s);
        opacity: 1;
        @media @pad-p {
          padding: 0 40px;
        }
        @media @ipad {
          padding: 0 12vw;
        }
        @media @pad-l {
          padding: 0 40px;
        }
        @media @mobile-p {
          padding: 0 40px;
        }

        &.faded {
          .transition(opacity 0.5s ease);
          opacity: 0;
        }

        & p {
          margin: 0;
          color: white;
          font-size: 22px;
          line-height: 37px;
          text-shadow: 0 0 2px black, 0 0 5px black, 0 0 10px black;
          @media @laptop {
            font-size: 19px;
            line-height: 28px;
          }
          @media @pad-p {
            font-size: 17px;
            line-height: 23px;
          }
          @media @ipad {
            font-size: 18px;
            line-height: 25px;
          }
          @media @pad-l {
            font-size: 17px;
            line-height: 23px;
          }
          @media @mobile-p {
            font-size: 17px;
            line-height: 23px;
          }
          @media @mobile-l {
            font-size: 16px;
            line-height: 21px;
          }
        }
      }

      & .competition-archive {
        margin-top: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 20px;
        text-shadow: 0 0 2px black, 0 0 5px black, 0 0 10px black;
        @media @laptop {
          gap: 15px;
        }
        @media @pad-p {
          flex-wrap: wrap;
        }
        @media @ipad {
          flex-wrap: wrap;
        }
        @media @mobile-p {
          flex-wrap: wrap;
        }

        & span {
          font-size: 20px;
          color: white;
          @media @laptop {
            font-size: 17px;
          }
          @media @pad-p {
            flex: 0 0 100%;
          }
          @media @mobile-p {
            flex: 0 0 100%;
          }
        }

        & a {
          .title(900);
          padding: 10px;
          border: thin solid white;
          color: white;
          text-decoration: none;
          .radius(4px);
          .transition;
          @media @laptop {
            padding: 8px;
          }

          &:hover {
            background: black;
            border: thin solid black;
          }
        }
      }

    }
  }

  & slide {
    display: block;
    position: relative;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    .blueGradient;

    & videocontainer {
      width: 100vw;
      height: 100vh;
      position: relative;
      display: block;

      & video {
        width: 100%;
        position: absolute;
        top: 50%;
        left: 50%;
        .translate(-50%,-50%,0);
      }
    }

    &.brokers {
      height: 90vh;

      & h1 {
        top: 50%;
        .translate(0,-100%,0);
      }
    }

    &.half {
      height: 60vh;
      background: transparent;

      & .moving {
        position: fixed;
        z-index: -1;
      }

      & h1 {
        top: 50%;
        .translate(0,-50%,0);
        padding: 0 20%;
        line-height: 100px;
      }
      & .medys-share {
        .translate(-50%,50px,0);
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 0;
        border: none;
        margin-top: 45px;

        & h3 {
          display: none;
        }

        & a {
          color: white;
          text-decoration: none;
          .transition(all 0.3s ease);
          font-size: 20px;
          font-weight: normal;

          &:hover {
            color: black;
          }
        }
      }
    }

    &.full {
      height: 100vh;
    }

    &.exhibitors {
      height: 60vh;
    }

    &.dark {
      & h1 {
        text-shadow:
          0 0 2px black, /* First shadow layer */
          0 0 5px black, /* Second shadow layer */
          0 0 10px black; /* Third shadow layer */
        bottom: 0;
      }
    }

    & .moving {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      .cover;
      .origin(50%,50%);
      animation: slide 30s linear infinite;
    }

    & .top-part {
      position: absolute;
      top: 0;
      left: 0;
      width: 100vw;
      height: 45vh;
      overflow: hidden;
      & h1 {
        // left: 0;
        bottom: -22px;
      }
    }

    & .bottom-part {
      position: absolute;
      top: 45vh;
      height: 55vh;
      left: 0;
      width: 100vw;
      overflow: hidden;

      & h1 {
        bottom: auto;
        top: -23px;
        transform: rotateX(180deg);
        background-clip: padding-box;
        background-image: linear-gradient(0deg, #ffffff 0, transparent 85%);
        -webkit-background-clip: text;
        color: transparent;
        -webkit-animation: titlewave 10s linear infinite;
        animation: titlewave 5s linear infinite;
      }
    }

    & h1 {
      position: absolute;
      left: 0;
      // top: 35vh;
      width: 100%;
      text-align: center;
      .title(900);
      font-size: 110px;
      color: white;
      text-transform: uppercase;
      margin: 0;
      .noselect;

      &::after {
        content: attr(data-text);
        position: absolute;
        top: -45px;
        left: 0;
        transform-origin: bottom;
        transform: rotateX(180deg);
        background-clip: padding-box;
        background-image: linear-gradient(0deg, #ffffff 0, transparent 85%);
        -webkit-background-clip: text;
        color: transparent;
        -webkit-animation: titlewave 10s linear infinite;
        animation: titlewave 5s linear infinite;
        width: 100%;
      }
    }

    & .description {
      position: absolute;
      bottom: 22vh;
      left: 0;
      width: 100%;
      padding: 0 20vw;
      text-align: center;
      .transition(opacity 0.5s ease 0.1s);
      opacity: 1;

      &.faded {
        .transition(opacity 0.5s ease);
        opacity: 0;
      }

      & p {
        margin: 0;
        font-size: 22px;
        line-height: 37px;
        color: white;
        text-shadow:
          0 0 2px black, /* First shadow layer */
          0 0 5px black, /* Second shadow layer */
          0 0 10px black; /* Third shadow layer */
      }
    }

    & .medys-share {
      position: absolute;
      top: 50%;
      left: 50%;
      z-index: 5;
      .translate(-50%,8px,0);
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 0 40px 15px;

      & h3 {
        display: none;
      }

      & a {
        color: white;
        text-decoration: none;
        .transition(all 0.3s ease);
        font-size: 20px;

        &:hover {
          color: black;
        }
      }
    }
  }

  & stickytitle {
    display: block;
    position: fixed;
    top: 0;
    left: 50%;
    .translate(-50%,-100%,0);
    .transition(all 0.3s ease);
    color: white;
    .title(700);
    font-size: 40px;
    z-index: 1009;
    text-transform: uppercase;
    @media print {
      display: none;
    }
    @media @laptop {
      font-size: 33px;
    }
    @media @pad {
      top: 40px;
      left: 0;
      .translate(0,-200px,0);
      width: 100%;
      background-color: @blue;
      text-align: center;
      padding: 10px 0 10px;
      font-size: 23px;
    }
    @media @ipad {
      top: 40px;
      left: 0;
      .translate(0,-200px,0);
      width: 100%;
      background-color: @blue;
      text-align: center;
      padding: 20px 0 10px;
      font-size: 40px;
    }
    @media @pad-l {
      padding: 10px 0 10px;
      font-size: 23px;
    }
    @media @mobile-p {
      top: 50px;
      left: 0;
      .translate(0,-200px,0);
      width: 100%;
      background-color: @blue;
      text-align: center;
      padding: 10px 0 10px;
      font-size: 23px;
    }

    & .medys-share {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      margin-left: 15px;
      .translate(0,-7px,0);
      @media @laptop {
        .translate(0,-4px,0);
      }
      @media @pad {
        .translate(0,-2px,0);
      }
      @media @ipad {
        .translate(0,-6px,0);
      }
      @media @pad-l {
        .translate(0,-2px,0);
      }
      @media @mobile-p {
        .translate(0,-2px,0);
      }

      & h3 {
        display: none;
      }

      & a {
        color: grey;
        text-decoration: none;
        .transition(all 0.3s ease);
        font-size: 20px;
        @media @laptop {
          font-size: 18px;
        }
        @media @pad {
          color: @paleblue;
          font-size: 16px;
        }
        @media @ipad {
          color: @paleblue;
          font-size: 20px;
        }
        @media @pad-l {
          color: @paleblue;
          font-size: 16px;
        }
        @media @mobile-p {
          color: @paleblue;
          font-size: 16px;
        }

        &:hover {
          color: @paleblue;
        }
      }
    }
  }

  & content {
    display: block;
    width: 100vw;
    overflow: hidden;
    @media print {
      display: none;
    }

    & .row {
      padding: 60px 10% 60px;
      text-align: center;
      @media @pad-l {
        padding: 1px 30px 60px;
      }
      @media @mobile-p {
        padding: 1px 20px 60px;
      }

      &.full {
        min-height: calc(~"100vh - 200px");
        @media @pad {
          min-height: 50vh;
        }
        @media @ipad {
          min-height: 50vh;
        }
      }

      &.dark {
        background: #18436c;
        background: -webkit-linear-gradient(to top, #0f1137, #18436c);
        background: linear-gradient(to top, #0f1137, #18436c);

        & h1 {
          font-size: 65px;
          color: white;
          .transition(all 0.4s ease 0.2s);
          margin: 0;
          margin-bottom: 18px;
          .title(900);
          text-transform: uppercase;
          font-size: 95px;
          @media @laptop {
            font-size: 70px;
          }
          @media @pad-p {
            font-size: 60px;
          }
          @media @ipad {
            font-size: 70px;
          }
          @media @mobile-p {
            font-size: 60px;
          }
        }

        & p {
          color: #a9cfff;
          .font;
          font-size: 19px;
          line-height: 27px;
          @media @laptop {
            font-size: 17px;
          }
          @media @pad-p {
            font-size: 16px;
          }
          @media @ipad {
            font-size: 17px;
          }
          @media @mobile-p {
            font-size: 16px;
          }
        }

        &.article {

          & h1 {
            font-size: 45px;
            color: white;
            margin: 0;
            margin-bottom: 18px;
            color: #a9cfff;
          }

          & p {
            color: white;
            text-align: left;
            .font;
            font-size: 16px;
            & strong {
              color: #a9cfff;
            }
          }
        }
      }

      &.notop {
        padding-top: 0;
      }

      &.narrow {
        padding-left: 25%;
        padding-right: 25%;
        @media @pad-p {
          padding-left: 30px;
          padding-right: 30px;
        }
        @media @ipad {
          padding-left: 25%;
          padding-right: 25%;
        }
        @media @mobile-p {
          padding-left: 30px;
          padding-right: 30px;
        }
      }

      &.homemoto {
        padding: 60px 20% 100px;
        @media @pad {
          padding: 40px 5% 100px;
        }
        @media @ipad {
          padding: 60px 20% 100px;
        }
        @media @mobile-p {
          padding: 50px 20px 100px;
        }

        & .medys-share {
          position: absolute;
          margin-left: 0;
          .translate(-50%,-72px,0);
          border: none;
          padding: 0;
          @media @laptop {
            .translate(-50%,-55px,0);
          }
          @media @pad {
            transform: translate3d(-50%, -40px, 0);
          }
          @media @pad-l {
            transform: translate3d(-50%, -30px, 0);
          }
          @media @ipad {
            .translate(-50%,-55px,0);
          }
          @media @mobile-p {
            .translate(-50%,-25px,0);
          }

          & h3 {
            display: none;
          }

          & a {
            color: white;
            text-decoration: none;
            .transition(all 0.3s ease);
            font-size: 20px;

            &:hover {
              color: black;
            }
          }
        }

        &.nopad {
          padding: 40px 20%;
          background: white;
          & h1 {
            margin: 0;
            color: black;
          }
        }

        &.blue {
          & h1 {
            color: @blue;
            text-shadow: none;
          }
        }

        &.midi {
          padding-top: 50px;
          padding-bottom: 0;
          @media @pad-p {
            padding: 40px 15px 0;
          }
          @media @pad-l {
            padding: 40px 15px 30px;
          }
          @media @ipad {
            padding: 50px 15px 0;
          }
          @media @mobile-p {
            padding: 40px 15px 30px;
          }
          @media @mobile-l {
            padding-bottom: 0;
          }

          & h1 {
            font-size: 85px;
            .title(700);
            @media @laptop {
              font-size: 78px;
            }
            @media @pad {
              font-size: 55px;
            }
            @media @ipad {
              font-size: 65px;
            }
            @media @mobile-p {
              font-size: 55px;
            }
          }
        }

        &.mini {
          padding-top: 20vh;
          padding-bottom: 10vh;
          @media @laptop {
            padding-top: 15vh;
            padding-bottom: 8vh;
          }
          @media @pad {
            padding-top: 40px;
            padding-bottom: 40px;
          }
          @media @ipad {
            padding-top: 10vh;
            padding-bottom: 8vh;
          }
          @media @mobile-p {
            padding: 40px 20px 30px;
          }

          & h1 {
            font-size: 85px;
            .title(700);
            color: @blue;
            text-shadow: none;
            @media @laptop {
              font-size: 78px;
            }
            @media @pad {
              font-size: 55px;
              line-height: 55px;
            }
            @media @ipad {
              font-size: 78px;
              line-height: 78px;
            }
            @media @mobile-p {
              font-size: 55px;
              line-height: 55px;
            }
          }
        }

        & h1 {
          .title(700);
          font-size: 143px;
          color: white;
          .transition(all 0.4s ease 0.2s);
          opacity: 0;
          .translate(0px,100px,0px);
          text-shadow: 0 0 3px black;
          @media @laptop {
            font-size: 110px;
            line-height: 110px;
          }
          @media @pad {
            font-size: 76px;
            line-height: 76px;
          }
          @media @pad-l {
            font-size: 55px;
          }
          @media @ipad {
            font-size: 98px;
            line-height: 102px;
          }
          @media @mobile-p {
            font-size: 70px;
            line-height: 75px;
          }

          & sup {
            font-size: 47px;
            .translate(0,-10px,0);
            @media @pad {
              font-size: 30px;
            }
            @media @mobile-p {
              font-size: 30px;
            }
          }

        }

        & p {
          font-size: 22px;
          line-height: 37px;
          color: white;
          text-shadow: 0 0 2px black, 0 0 5px black, 0 0 10px black;
          @media @laptop {
            font-size: 20px;
            line-height: 33px;
          }
          @media @pad {
            line-height: 24px;
            margin-top: 70px;
            font-size: 16px;
          }
          @media @pad-l {
            padding: 0 30px;
          }
          @media @ipad {
            line-height: 28px;
            margin-top: 90px;
            font-size: 18px;
          }
          @media @mobile-p {
            font-size: 18px;
            line-height: 27px;
            margin-top: 90px;
          }
        }

        &.aminaready {
          & h1 {
            opacity: 1;
            .translate(0px,0px,0px);
          }
        }
      }

      & p {
        font-size: 16px;
        line-height: 22px;
      }

      &.login {
        padding-top: 0px;

        & .com-users-login__options {
          text-align: center;
          margin-top: 20px;

          & a {
            .title(100);
            color: #a9cfff;
            font-size: 16px;
            text-decoration: none;
            .transition(color 0.5s ease);
            letter-spacing: 3px;

            &:hover {
              color: white;
            }
          }
        }

        & form {
          margin-top: 35px;

          & button[type="submit"] {
            background: none;
            border: none;
            .medysButton(@radius: 30px, @border: #a9cfff, @fontweight: 600, @fontsize: 17px, @arrow: #a9cfff, @borderhover: #a9cfff, @arrowhover: white);
            margin: 35px auto 20px;
            @media @laptop {
              .medysButton(@radius: 22px, @border: #a9cfff, @fontweight: 600, @fontsize: 15px, @arrow: #a9cfff, @borderhover: #a9cfff, @arrowhover: white);
              margin: 25px auto 10px;
            }
          }

          & fieldset {
            border: none;

            & .form-control-feedback {
              display: none!important;
            }

            & label {
              .title(100);
              font-size: 17px;
              letter-spacing: 2px;
              color: #a9cfff;
              text-transform: uppercase;
              @media @laptop {
                font-size: 16px;
              }
            }

            & .control-group {
              display: flex;
              flex-direction: column;
              margin-bottom: 15px;
              @media @laptop {
                margin-bottom: 10px;
              }

              & input {
                background: none!important;
                border: none;
                border-bottom: thin solid #a9cfff;
                .title(100);
                color: white;
                letter-spacing: 1px;
                font-size: 22px;
                text-align: center;
                padding: 10px;
                margin-bottom: 10px;
                @media @laptop {
                  font-size: 20px;
                  padding: 8px;
                }
                @media @pad-p {
                  width: 290px;
                }
                @media @ipad {
                  width: 290px;
                }
                @media @mobile-p {
                  width: 260px;
                }
              }

              & .control-label {
                order: 2;
              }

              & .controls {
                order: 1;

                & .text-muted {
                  color: #a9cfff;
                  .font;
                  font-size: 19px;
                  line-height: 27px;
                  margin-top: -40px;
                  @media @laptop {
                    font-size: 17px;
                  }
                }

                & .password-group {

                  & .text-center {
                    color: white;
                  }

                  & button {
                    background: none;
                    color: transparent;
                    border: none;
                    position: relative;
                    padding: 0;
                    width: 17px;
                    height: 17px;
                    overflow: hidden;
                    cursor: pointer;
                    margin-left: -23px;

                    & i {
                      color: white;
                      font-size: 17px;
                    }
                  }
                }
              }
            }
          }
        }
      }

      & .infoarea {
        width: 80%;
        height: 350px;
        margin: 0 auto;
        .customBarThin;
        border: thin solid @grey;
        .radius(4px);
        overflow-y: scroll;
        font-family: 'Tinos', serif;
        text-align: left;
        font-size: 18px;
        line-height: 23px;
        padding-right: 20px;
        @media @pad-p {
          width: 95%;
          padding: 10px;
          font-size: 15px;
          line-height: 20px;
        }
        @media @ipad {
          font-size: 15px;
          line-height: 20px;
        }
        @media @mobile-p {
          width: 95%;
          padding: 10px;
          font-size: 15px;
          line-height: 20px;
        }

        & ol {
          @media @pad-p {
            padding: 0 20px;
            margin: 0px;
          }
          @media @mobile-p {
            padding: 0 20px;
            margin: 0px;
          }
        }

        & li {
          margin-bottom: 15px;
          padding-left: 10px;

          br {
            display: block;
            width: 100%;
            height: 10px;
          }
        }

        & p {
          padding-left: 20px;
          font-size: 16px;
          line-height: 18px;
          margin-bottom: 8px;
          @media @pad-p {
            font-size: 15px!important;
            line-height: 20px!important;
            padding: 0!important;
          }
          @media @mobile-p {
            font-size: 15px!important;
            line-height: 20px!important;
            padding: 0!important;
            text-align: left!important;
          }
        }

        & h2 {
          font-family: 'Roboto Condensed', sans-serif!important;
          color: @blue;
          padding-left: 20px;
          text-align: center;
          line-height: 21px;
          margin-top: 40px;
          font-size: 21px!important;
          @media @pad-p {
            margin: 30px 0 20px!important;
            font-size: 20px!important;
          }
          @media @mobile-p {
            text-align: left!important;
            padding-left: 0;
            margin-top: 30px!important;
            margin-bottom: 20px!important;
          }
        }

        & h1 {
          color: @blue;
          font-family: 'Roboto Condensed', sans-serif!important;
          font-weight: 700;
          font-size: 25px!important;
          line-height: 25px!important;
          text-align: center;
          margin: 35px 0 20px!important;
          @media @pad-p {
            font-size: 24px!important;
            line-height: 24px!important;
          }
          @media @mobile-p {
            font-size: 24px!important;
            line-height: 24px!important;
            padding-left: 0!important;
          }
        }
      }

      &.administration {
        position: relative;
        min-height: calc(~"100vh - 120px");
      }

      &.captain {
        & h1 {
          margin-top: 0;
          // max-width: 800px;
          margin: 0 auto 20px;
          @media @mobile-p {
            text-align: left!important;
          }
        }
        & p {
          text-align: center!important;
          @media @pad-p {
            text-align: left!important;
          }
          @media @mobile-p {
            text-align: left!important;
          }
        }
        & .medysbutton {
          .medysButton(@textcolor1: @blue, @textcolor2: black, @radius: 22px, @border: black, @fontweight: 600, @fontsize: 19px, @arrow: @blue, @borderhover: @blue, @arrowhover: black);
          display: inline-block;
          margin-top: 30px;
        }
      }

      &.chefs-competition {
        border-bottom: none!important;

        & .teaser {
          .font;
          font-size: 35px;
          color: @blue;
          padding: 50px 20%;
          @media @laptop {
            font-size: 30px;
            line-height: 38px;
          }
          @media @pad-p {
            font-size: 23px;
            line-height: 27px;
            padding: 40px 30px 30px;
          }
          @media @ipad {
            font-size: 25px;
            line-height: 30px;
            padding: 40px 10%;
          }
          @media @mobile-p {
            font-size: 23px;
            line-height: 27px;
            padding: 40px 30px 30px;
          }
        }
      }

    }

    & .new-medys-intro {
      display: flex;
      .alpha(0,0,0,0);
      align-items: stretch;
      .transition(all 1s ease 0.5s);
      @media @pad-p {
        flex-wrap: wrap;
      }
      @media @ipad {
        flex-wrap: nowrap;
      }
      @media @mobile-p {
        flex-wrap: wrap;
      }

      &.aminaready {
        .alpha(100,0,0,0);
        & .col_left {
          & .inner {
            opacity: 1;
          }
        }
        & .col_right {
          & h1 {
            opacity: 1;
            .translate(0,0,0);
          }
          & p {
            opacity: 1;
            .translate(0,0,0);
          }
        }
      }

      & .col_left {
        flex: 0 0 40%;
        position: relative;
        overflow: hidden;
        @media @pad-p {
          flex: 0 0 100%;
          height: 350px;
        }
        @media @ipad {
          flex: 0 0 45%;
          height: auto;
        }
        @media @mobile-p {
          flex: 0 0 100%;
          height: 350px;
        }

        & .inner {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          .cover;
          .origin(50%,50%);
          animation: slide 30s linear infinite;
          .transition(all 1s ease 1s);
          opacity: 0;
          // .translate(-40vw,0,0);
        }

      }

      & .col_right {
        flex: 0 0 60%;
        padding: 40px 10% 60px 40px;
        @media @pad-p {
          flex: 0 0 100%;
          padding: 40px;
        }
        @media @ipad {
          padding: 20px 8% 50px 40px;
          flex: 0 0 55%;
        }
        @media @mobile-p {
          flex: 0 0 100%;
          padding: 40px;
        }

        & h1 {
          color: white;
          color: @paleblue;
          .title(700);
          font-size: 94px;
          .transition(all 0.4s ease 0.2s);
          opacity: 0;
          .translate(100px,0,0);
          @media @laptop {
            font-size: 80px;
            margin-bottom: 0;
          }
          @media @pad-p {
            font-size: 50px;
            margin-bottom: 20px;
            margin-top: 0;
          }
          @media @pad-l {
            font-size: 50px;
          }
          @media @ipad {
            font-size: 65px;
          }
          @media @mobile-p {
            font-size: 55px;
            margin: 20px 0 30px;
          }
        }

        & p {
          color: ghostwhite;
          .font;
          font-size: 17px;
          line-height: 26px;
          margin-bottom: 29px;
          opacity: 0;
          .translate(0,100px,0);
          @media @laptop {
            font-size: 15px;
            line-height: 22px;
            margin-bottom: 19px;
          }
          @media @pad-p {
            font-size: 15px;
            line-height: 22px;
            margin-bottom: 19px;
          }
          @media @pad-l {
            font-size: 14px;
            line-height: 20px;
            margin-bottom: 15px;
          }
          @media @ipad {
            font-size: 14px;
            line-height: 19px;
          }
          @media @mobile-p {
            font-size: 15px;
            line-height: 22px;
            margin-bottom: 19px;
          }

          &:nth-child(2) { .transition(all 0.4s ease 0.4s); }
          &:nth-child(3) { .transition(all 0.4s ease 0.6s); }
          &:nth-child(4) { .transition(all 0.4s ease 0.8s); }
        }

        & .medysbutton {
          .medysButton(@textcolor1: @paleblue, @textcolor2: white, @radius: 20px, @border: @paleblue, @fontweight: 300, @fontsize: 17px, @arrow: @paleblue, @borderhover: @paleblue, @arrowhover: @paleblue);
          display: inline-block;
          margin-top: 20px;
          @media @laptop {
            .medysButton(@textcolor1: @paleblue, @textcolor2: white, @radius: 18px, @border: @paleblue, @fontweight: 300, @fontsize: 16px, @arrow: @paleblue, @borderhover: @paleblue, @arrowhover: @paleblue);
            display: inline-block;
            margin-top: 14px;
          }
        }
      }
    }

    & .registration-teaser {
      height: 90vh;
      text-align: center;
      // background: linear-gradient(to top, rgba(0, 0, 0, 1) 0%, transparent 50%, transparent 50%);
      display: flex;
      align-items: center;
      justify-content: center;
      @media @pad {
        height: 60vh;
        background: url(images/medys-registration-2024-3.jpg) center center no-repeat;
        background-size: cover;
        background-attachment: fixed;
        padding: 0 60px;
      }
      @media @pad-l {
        height: 65vh;
      }
      @media @ipad {
        height: 60vh;
        background: url(images/medys-registration-2024-3.jpg) center center no-repeat;
        background-size: cover;
        background-attachment: fixed;
        padding: 0 80px;
      }
      @media @mobile-p {
        height: 60vh;
        background: url(images/medys-registration-2024-3.jpg) center center no-repeat;
        background-size: cover;
        background-attachment: fixed;
        padding: 0 60px;
      }
      @media @mobile-l {
        height: 85vh;
      }

      & h1 {
        .title(700);
        color: white;
        font-size: 93px;
        margin-bottom: 0;
        text-shadow: 0 0 3px black;
        @media @laptop {
          font-size: 80px;
        }
        @media @pad {
          font-size: 60px;
          line-height: 60px;
        }
        @media @pad-l {
          font-size: 55px;
          line-height: 55px;
        }
        @media @ipad {
          font-size: 70px;
        }
        @media @mobile-p {
          font-size: 55px;
          line-height: 55px;
        }
      }

      & p {
        font-size: 22px;
        line-height: 37px;
        color: white;
        text-shadow:
          0 0 2px black, /* First shadow layer */
          0 0 5px black, /* Second shadow layer */
          0 0 10px black; /* Third shadow layer */
        margin-bottom: 40px;
        padding: 0 10%;
        @media @laptop {
          font-size: 20px;
          line-height: 33px;
          padding: 0 5%;
        }
        @media @pad {
          font-size: 16px;
          line-height: 24px;
          padding: 0 20px;
        }
        @media @ipad {
          line-height: 28px;
          font-size: 18px;
          padding: 0 20px;
        }
        @media @mobile-p {
          font-size: 18px;
          line-height: 27px;
          padding: 0 10px;
        }
      }

      & a {
        .medysButton(@textcolor1: white, @textcolor2: white, @radius: 30px, @border: white, @fontweight: 300, @fontsize: 20px, @arrow: white, @borderhover: white, @arrowhover: white);
        display: inline-block;
        @media @laptop {
          .medysButton(@textcolor1: white, @textcolor2: white, @radius: 26px, @border: white, @fontweight: 700, @fontsize: 19px, @arrow: white, @borderhover: white, @arrowhover: white);
          display: inline-block;
        }
      }

    }

    & .home-attending {
      height: 0;
      overflow: hidden;
      .transition(all 0.5s ease);
      position: relative;
      @media @mobile-p {
        height: auto;
      }
      @media @mobile-l {
        width: 100vw;
        display: flex;
        align-items: center;
      }

      &.aminaready {
        height: 70vh;
        @media @laptop {
          height: 60vh;
        }
        @media @pad-p {
          height: auto;
        }
        @media @ipad {
          height: 50vh;
          background: url(images/medys-program.jpg) center center no-repeat;
          background-size: cover;
          background-attachment: fixed;
        }
        @media @mobile-p {
          height: auto;
        }
      }

      & .item {
        position: absolute;
        top: 0;
        width: 33.3333%;
        height: 100%;
        cursor: pointer;
        .transition(all 0.4s ease);
        @media @pad-p {
          height: auto;
        }
        @media @pad-p {
          position: relative;
          width: 100%;
          height: 250px;
          display: block;
          left: 0!important;
        }
        @media @ipad {
          position: absolute;
          top: 0;
          width: 33.3333%;
          height: 100%;
        }
        @media @mobile-p {
          position: relative;
          width: 100%;
          height: 250px;
          display: block;
          left: 0!important;
        }
        @media @mobile-l {
          position: relative;
          flex: 0 0 33.3333%;
        }

        & .medysbutton {
          .medysButton(@textcolor1: white, @textcolor2: white, @radius: 20px, @border: white, @fontweight: 700, @fontsize: 17px, @arrow: white, @borderhover: white, @arrowhover: white);
          position: absolute;
          .transition(all 0.3s ease 0.3s);
          left: 50%;
          bottom: 50%;
          margin-left: -46px;
          opacity: 0;
          .translate(0,-30px,0);
          @media @pad {
            opacity: 1;
            .translate(0,0,0);
            bottom: 20%;
          }
          @media @pad-l {
            bottom: 18%!important;
          }
          @media @ipad {
            opacity: 1;
            .translate(0,0,0);
            bottom: 22%!important;
          }
          @media @mobile-p {
            opacity: 1;
            .translate(0,0,0);
            bottom: 20%;
          }
        }

        &:hover {
          & .title {
            font-size: 57px;
            .translate(0,-20px,0);
            @media @laptop {
              font-size: 50px;
              .translate(0,-17px,0);
            }
            @media @pad {
              .translate(0,0,0);
            }
            @media @mobile-p {
              .translate(0,0,0);
              font-size: 40px;
            }
          }
          & .details {
            opacity: 1;
            .translate(0,-30px,0);
            @media @laptop {
              .translate(0,-35px,0);
            }
            @media @pad {
              .translate(0,0,0);
            }
            @media @mobile-p {
              .translate(0,0,0);
            }
          }
          & .medysbutton {
            opacity: 1;
            .translate(0,30px,0);
            @media @pad {
              .translate(0,0,0);
            }
            @media @mobile-p {
              .translate(0,0,0);
            }
          }
        }

        &.item1 {
          left: 0;
          @media @pad-p {
            background: #97c6e6;
          }
          @media @ipad {
            background: none;
            left: 0!important;
          }
          @media @mobile-p {
            background: #97c6e6;
          }
          @media @mobile-l {
            background: #97c6e6;
          }
        }
        &.item2 {
          left: 33.3333%;
          @media @pad-p {
            background: #5594c8;
          }
          @media @ipad {
            background: none;
            left: 33.3333%!important;
          }
          @media @mobile-p {
            background: #5594c8;
          }
          @media @mobile-l {
            background: #5594c8;
            left: 0;
          }
        }
        &.item3 {
          left: 66.6667%;
          @media @pad-p {
            background: #024d6f;
          }
          @media @ipad {
            background: none;
            left: 66.6667%!important;
          }
          @media @mobile-p {
            background: #024d6f;
          }
          @media @mobile-l {
            background: #024d6f;
            left: 0;
          }
        }

        // &.blue1 { background: #97c6e6; }
        // &.blue2 { background: #5594c8; }
        // &.blue3 { background: #024d6f; }

        & .title {
          .title(700);
          color: white;
          left: 0;
          bottom: 60%;
          width: 100%;
          text-align: center;
          font-size: 47px;
          position: absolute;
          .transition(all 0.3s ease);
          text-shadow: 0 0 3px black;
          @media @laptop {
            font-size: 47px;
          }
          @media @pad-l {
            font-size: 31px;
            line-height: 31px;
          }
          @media @ipad {
            font-size: 36px;
            line-height: 38px;
            padding: 0 30px;
          }
          @media @mobile-p {
            font-size: 40px;
            line-height: 40px;
          }
          @media @mobile-l {
            font-size: 31px;
            line-height: 31px;
            padding: 0 30px;
          }
        }

        & .details {
          .font;
          color: white;
          font-size: 27px;
          position: absolute;
          width: 100%;
          text-align: center;
          .transition(all 0.3s ease);
          bottom: 50%;
          opacity: 0;
          @media @laptop {
            font-size: 25px;
          }
          @media @pad {
            opacity: 1;
            font-size: 20px;
            bottom: 50%;
          }
          @media @pad-l {
            font-size: 17px;
            bottom: 45%;
          }
          @media @ipad {
            opacity: 1;
            font-size: 17px;
          }
          @media @mobile-p {
            opacity: 1;
            font-size: 20px;
            bottom: 45%;
          }
        }
      }
    }

    & .filters {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr 1fr auto auto;
      grid-column-gap: 20px;
      padding: 30px 20px;
      .blueGradientDuo;
      .noselect;
      width: 100vw;
      .shadow;
      @media @laptop {
        padding: 20px;
      }
      @media @ipad {
        padding: 15px;
        grid-column-gap: 5px;
      }
      
      &.sticky {
        position: fixed;
        top: 50px;
        z-index: 1008;
        @media @laptop {
          top: 40px;
        }
        @media @pad {
          top: 89px;
        }
        @media @ipad {
          top: 118px;
        }
        @media @mobile-p {
          top: 98px;
        }

        &.years {
          @media @pad {
            top: 87px;
          }
          @media @ipad {
            top: 118px;
          }
          @media @mobile-p {
            top: 98px;
          }
        }
      }

      &.years {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0px;
        background: white;
        padding: 0;
        z-index: 988;

        & .title {
          width: 100%;
          font-size: 45px;
          .title(900);
          color: black;
          text-align: center;
          padding-right: 200px;
          @media @laptop {
            font-size: 32px;
          }
          @media @pad-p {
            font-size: 22px;
            padding-right: 0;
            width: 100%;
            text-align: left;
            padding-left: 20px;
          }
          @media @ipad {
            font-size: 32px;
            padding-right: 0;
          }
          @media @mobile-p {
            font-size: 20px;
            padding-right: 0;
            text-align: left;
            padding-left: 10px;
          }
        }

        & .year-button {
          flex: 1;
          font-size: 45px;
          .title(900);
          text-align: center;
          background: white;
          color: grey;
          cursor: pointer;
          padding: 30px 0;
          .transition(all 0.3s ease);
          @media @laptop {
            font-size: 32px;
            padding: 15px 0;
          }
          @media @pad-p {
            font-size: 22px;
            padding: 10px 0;
          }
          @media @ipad {
            font-size: 32px;
            padding: 15px 0;
          }
          @media @mobile-p {
            font-size: 20px;
            padding: 10px 0;
          }

          &.back {
            flex: 0 0 200px;
            @media @pad-p {
              flex: 0 0 120px;
            }
            @media @ipad {
              flex: 0 0 200px;
            }
            @media @mobile-p {
              flex: 0 0 100px;
            }
          }

          &:hover {
            background: @paleblue;
            color: white;
          }

          &.active {
            background: @blue;
            color: white;
          }
        }
      }

      &.white {
        background: white;
        @media @pad-p {
          padding: 5px;
          grid-column-gap: 2px;
        }
        @media @ipad {
          padding: 15px;
          grid-column-gap: 5px;
        }
        @media @mobile-p {
          padding: 5px;
          grid-column-gap: 2px;
          grid-row-gap: 2px;
          grid-template-columns: 1fr 1fr 1fr;
        }

        &.sticky {
          @media @pad-p {
            top: 88px
          }
          @media @ipad {
            top: 118px
          }
        }

        & .buttons {
          color: black;
          @media @pad-p {
            gap: 2px;
          }
          @media @ipad {
            gap: 5px;
          }
          @media @mobile-p {
            gap: 2px;
          }
          & button {
            color: black;
            border: thin solid black;
            .radius(4px);
            @media @pad-p {
              padding: 6px;
            }
            @media @ipad {
              padding: 0px 5px;
              line-height: 30px;
              width: 30px;
            }
            @media @mobile-p {
              flex: 1;
              padding: 9px;
            }

            &:nth-child(3) {
              @media @pad-p {
                display: none;
              }
              @media @ipad {
                display: block;
              }
              @media @mobile-p {
                display: none;
              }
            }

            &.active {
              color: white;
              background: @blue;
              border: thin solid @blue;
            }
          }
        }

        & .filter-item {

          &.active {
            & label {
              color: @blue;
            }
            & select, & input {
              border: thin solid @blue;
              color: @blue;
            }
          }

          & label {
            .title(700);
            font-size: 18px;
            color: black;
            @media @laptop {
              font-size: 17px;
            }
            @media @pad-p {
              display: none;
            }
            @media @ipad {
              display: block;
              font-size: 15px;
            }
            @media @mobile-p {
              display: none;
            }
          }
          & select, & input {
            color: black;
            .title(700);
            font-size: 18px;
            border: thin solid black;
            .radius(4px);
            background: white;
            @media @laptop {
              font-size: 17px;
              padding: 7px;
            }
            @media @pad-p {
              font-size: 14px;
              padding: 4px;
            }
            @media @ipad {
              font-size: 15px;
              padding: 5px;
            }
            @media @mobile-p {
              font-size: 17px;
              padding: 6px;
            }

            & option {
              .title(700);
              font-size: 18px;
              color: black;
              @media @laptop {
                font-size: 17px;
              }
            }
          }
        }
      }

      &.buttons {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        padding: 10px 0;
        @media @pad {
          gap: 5px;
        }
        @media @ipad {
          gap: 10px;
        }
        @media @pad-l {
          gap: 5px;
        }
        @media @mobile-p {
          gap: 0px;
          padding: 0;
        }

        & .button {
          flex: 0 0 90px;
          height: 90px;
          border: thin solid grey;
          .radius(50%);
          .title(700);
          font-size: 25px;
          color: grey;
          display: flex;
          align-items: center;
          justify-content: center;
          position: relative;
          cursor: pointer;
          .transition(all 0.3s ease);
          text-decoration: none;
          @media @laptop {
            flex: 0 0 80px;
            height: 80px;
            font-size: 25px;
          }
          @media @pad-p {
            flex: 0 0 70px;
            height: 70px;
            font-size: 21px;
          }
          @media @ipad {
            flex: 0 0 80px;
            height: 80px;
            font-size: 25px;
          }
          @media @pad-l {
            flex: 0 0 70px;
            height: 70px;
            font-size: 21px;
          }
          @media @mobile-p {
            .radius(0);
            height: 70px;
            flex: 1;
            border: none!important;
            font-size: 21px;
          }
          @media @mobile-l {
            .radius(0);
            height: 40px;
            flex: 1;
            border: none!important;
            font-size: 21px;
            line-height: 38px;
          }

          &.current {
            background: @blue;
            color: white;
            border: thin solid @blue;
          }

          &:hover {
            background: black;
            color: white;
            border: thin solid black;
          }

          & span {
            .translate(0,5px,0);
            @media @mobile-l {
              .translate(0,0,0);
            }
          }

          & .name {
            position: absolute;
            font-size: 15px;
            text-transform: uppercase;
            top: 18px;
            left: 0;
            width: 100%;
            text-align: center;
            .translate(0,0,0);
            @media @laptop {
              font-size: 14px;
              top: 17px;
            }
            @media @pad {
              font-size: 13px;
              top: 15px;
            }
            @media @ipad {
              font-size: 14px;
              top: 17px;
            }
            @media @pad-l {
              font-size: 13px;
              top: 15px;
            }
            @media @mobile-p {
              font-size: 12px;
              top: 15px;
            }
            @media @mobile-l {
              display: none;
            }
          }
        }
      }

      &.brokers {
        grid-template-columns: 1fr 1fr 1fr auto auto;
      }
      &.exhibitors {
        grid-template-columns: 1fr 1fr auto auto;
      }

      & .filter-item {
        display: flex;
        align-items: center;

        &.active select {
          border: thin solid @yellow;
          color: @yellow;
        }

        &.active input {
          border: thin solid @yellow;
          color: @yellow;
        }

        &.active label {
          color: @yellow;
        }

        & label {
          white-space: nowrap;
          .title;
          font-size: 16px;
          color: white;
          padding-right: 10px;
        }

        & input {
          width: 100%;
          background: none;
          border: thin solid white;
          color: white;
          .title;
          font-size: 16px;
          padding: 8px;
        }

        & select {
          width: 100%;
          background: none;
          border: thin solid white;
          color: white;
          .title;
          font-size: 16px;
          padding: 8px;

          & option {
            color: black;
          }
        }
      }

      & .results {
        background-color: @paleblue;
        display: flex;
        justify-content: center;
        align-items: center;
        .title(700);
        color: white;
        padding: 0 20px;
        border-radius: 4px;
        font-size: 22px;
        height: 37px;
        align-self: center;
        border: thin solid @paleblue;
        @media @pad-p {
          padding: 0 5px;
          font-size: 15px;
          height: 29px;
        }
        @media @ipad {
          padding: 0 20px;
          font-size: 15px;
          height: 31px;
        }
        @media @mobile-p {
          padding: 0 5px;
          font-size: 15px;
          height: 35px;
        }
      }

      & .buttons {
        display: flex;
        align-items: center;
        color: white;
        gap: 10px;

        & button {
          background: none;
          border: thin solid white;
          padding: 10px;
          text-align: center;
          color: white;
          cursor: pointer;
          @media @ipad {
            padding: 7px;
          }

          &.active {
            border: thin solid @yellow;
            color: @yellow;
          }
        }
      }
    }

    & .press-releases {

      & .release {
        display: flex;
        align-items: center;
        gap: 60px;
        padding: 20px 30px 20px;
        border-bottom: thin solid grey;
        margin-bottom: 20px;
        position: relative;
        @media @pad-p {
          display: block;
          padding-top: 40px;
        }
        @media @ipad {
          padding-top: 20px;
          display: flex;
        }
        @media @mobile-p {
          display: block;
          padding-top: 40px;
        }

        & .divider {
          position: absolute;
          top: 20px;
          left: 360px;
          height: calc(100% - 40px);
          width: 5px;
          border-left: 5px dotted grey;
          @media @laptop {
            left: 310px;
            border-left: 3px dotted grey;
          }
          @media @pad-p {
            display: none;
          }
          @media @ipad {
            display: block;
            left: 240px;
            border-left: 2px dotted grey;
          }
          @media @mobile-p {
            display: none;
          }
        }

        & .image {
          flex: 0 0 300px;
          height: 300px;
          @media @laptop {
            flex: 0 0 250px;
            height: 250px;
          }
          @media @pad-p {
            width: 150px;
            height: auto;
          }
          @media @ipad {
            width: auto;
            flex: 0 0 180px;
            height: 180px;
          }
          @media @mobile-p {
            width: 150px;
            height: auto;
          }

          & img {
            width: 100%;
            height: 100%;
            object-fit: contain;
            @media @pad-p {
              width: 100%;
              height: auto;
            }
            @media @ipad {
              width: 100%;
              height: 100%;
              object-fit: contain;
            }
            @media @mobile-p {
              width: 100%;
              height: auto;
            }
          }
        }
        & .release-content {

          & h2 {
            font-family: 'Roboto Condensed', sans-serif;
            font-weight: 900;
            font-size: 33px;
            line-height: 33px;
            padding-right: 30%;
            color: @blue;
            margin-bottom: 15px;
            @media @laptop {
              font-size: 28px;
              line-height: 28px;
            }
            @media @pad-p {
              margin-top: 20px;
              font-size: 24px;
              line-height: 26px;
              padding-right: 0;
            }
            @media @ipad {
              margin-top: 10px;
              padding-right: 30%;
              font-size: 25px;
              line-height: 26px;
            }
            @media @mobile-p {
              margin-top: 20px;
              font-size: 24px;
              line-height: 26px;
              padding-right: 0;
            }
          }

          & p {
            font-family: 'Tinos', serif;
            font-size: 19px;
            padding-right: 10%;
            margin-bottom: 7px;
            margin-top: 0;
            @media @laptop {
              font-size: 17px;
              line-height: 21px;
            }
            @media @ipad {
              font-size: 16px;
              line-height: 20px;
            }
          }

          & .link {
            text-align: right;
            padding-right: 10%;
            margin-top: 30px;
            margin-bottom: 25px;

            & .medysbuttoncomp {
              .medysButton(@textcolor1: black, @textcolor2: @blue, @radius: 20px, @border: grey, @fontweight: 900, @fontsize: 20px, @arrow: @blue, @borderhover: black, @arrowhover: @blue);
              display: inline-block;
              & .t1, & .t2 {
                font-family: 'Roboto Condensed', sans-serif;
                font-weight: 900;
              }
              @media @laptop {
                .medysButton(@textcolor1: black, @textcolor2: @blue, @radius: 18px, @border: grey, @fontweight: 900, @fontsize: 18px, @arrow: @blue, @borderhover: black, @arrowhover: @blue);
                display: inline-block;
              }
            }
          }
        }
      }
    }

    & .attending-brokers {
      padding: 0;
      min-height: 400px;

      & .company {
        display: flex;
        align-items: center;
        border-bottom: thin solid @grey;
        padding: 20px 0 20px 20px;
        .transition;
        background: transparent;
        .noselect;
        position: relative;
        overflow: hidden;
        @media @pad-p {
          flex-wrap: wrap;
          align-items: flex-start;
          padding-right: 20px;
        }
        @media @ipad {
          padding-right: 0px;
          align-items: center;
          flex-wrap: nowrap;
        }
        @media @mobile-p {
          flex-wrap: wrap;
          align-items: flex-start;
          padding-right: 20px;
        }

        & .medysbutton {
          .medysButton(@textcolor1: black, @textcolor2: black, @radius: 20px, @border: grey, @fontweight: 700, @fontsize: 17px, @arrow: @blue, @borderhover: grey, @arrowhover: @blue);
          position: absolute;
          right: 40px;
          top: 50%;
          .translate(50px,-50%,0);
          .transition(all 0.5s ease);
          opacity: 0;
          @media @laptop {
            .medysButton(@textcolor1: black, @textcolor2: black, @radius: 18px, @border: grey, @fontweight: 700, @fontsize: 16px, @arrow: @blue, @borderhover: grey, @arrowhover: @blue);
            position: absolute;
            right: 40px;
            top: 50%;
          }
          @media @pad-p {
            .medysButton(@textcolor1: black, @textcolor2: black, @radius: 16px, @border: grey, @fontweight: 700, @fontsize: 13px, @arrow: @blue, @borderhover: grey, @arrowhover: @blue);
            position: absolute;
            right: 0;
            top: 100%;
            .translate(-15px,-120%,0);
            opacity: 1;
          }
          @media @ipad {
            .medysButton(@textcolor1: black, @textcolor2: black, @radius: 16px, @border: grey, @fontweight: 700, @fontsize: 13px, @arrow: @blue, @borderhover: grey, @arrowhover: @blue);
            position: absolute;
            right: 60px;
            top: 50%;
            opacity: 1;
            .translate(50px,-50%,0);
          }
          @media @mobile-p {
            .medysButton(@textcolor1: black, @textcolor2: black, @radius: 16px, @border: grey, @fontweight: 700, @fontsize: 13px, @arrow: @blue, @borderhover: grey, @arrowhover: @blue);
            position: absolute;
            right: 0;
            top: 100%;
            .translate(-15px,-120%,0);
            opacity: 1;
          }
        }

        &:hover {
          border: none;
          .shadow;
          // padding: 20px 0;
          padding-right: 100px;
          .scale(1.02);
          .radius(4px);
          // background: ghostwhite;
          .companyGradient;
          @media @pad-p {
            .scale(1);
            padding-right: 20px;
            .radius(0);
            background: transparent;
            .noshadow;
            border-bottom: thin solid @grey;
          }
          @media @ipad {
            .scale(1);
            padding-right: 0;
            .radius(0);
            background: transparent;
            .noshadow;
            border-bottom: thin solid @grey;
          }
          @media @mobile-p {
            .scale(1);
            padding-right: 20px;
            .radius(0);
            background: transparent;
            .noshadow;
            border-bottom: thin solid @grey;
          }

          & .medysbutton {
            .translate(0,-50%,0);
            opacity: 1;
            @media @pad-p {
              .translate(-15px,-120%,0);
            }
            @media @ipad {
              .translate(50px,-50%,0);
            }
            @media @mobile-p {
              .translate(-15px,-120%,0);
            }
          }

          & .name {
            padding-left: 30px;
            color: white;
            @media @pad-p {
              padding-left: 0;
              color: @blue;
            }
            @media @ipad {
              padding-left: 0;
              color: @blue;
            }
            @media @mobile-p {
              padding-left: 0;
              color: @blue;
            }
          }

          & .brokers {
            padding-left: 10px;
            @media @pad-p {
              padding-left: 0;
            }
            @media @ipad {
              padding-left: 0;
            }
            @media @mobile-p {
              padding-left: 0;
            }

            & .broker {
              &:nth-child(1) { .translate(5px,0,0); }
              &:nth-child(2) { .translate(10px,0,0); }
              &:nth-child(3) { .translate(15px,0,0); }
              &:nth-child(4) { .translate(20px,0,0); }
              &:nth-child(5) { .translate(25px,0,0); }
              &:nth-child(6) { .translate(30px,0,0); }
              &:nth-child(7) { .translate(35px,0,0); }
              &:nth-child(8) { .translate(40px,0,0); }
              &:nth-child(9) { .translate(45px,0,0); }
              &:nth-child(10) { .translate(50px,0,0); }
              &:nth-child(11) { .translate(55px,0,0); }
              &:nth-child(12) { .translate(60px,0,0); }
              &:nth-child(13) { .translate(65px,0,0); }
              &:nth-child(14) { .translate(70px,0,0); }
              &:nth-child(15) { .translate(75px,0,0); }
              &:nth-child(16) { .translate(80px,0,0); }
              &:nth-child(17) { .translate(85px,0,0); }
              &:nth-child(18) { .translate(90px,0,0); }
              &:nth-child(19) { .translate(95px,0,0); }
              &:nth-child(20) { .translate(100px,0,0); }
              &:nth-child(21) { .translate(105px,0,0); }
              &:nth-child(22) { .translate(110px,0,0); }
              &:nth-child(23) { .translate(115px,0,0); }
              &:nth-child(24) { .translate(120px,0,0); }
              &:nth-child(25) { .translate(125px,0,0); }
              &:nth-child(26) { .translate(130px,0,0); }
              &:nth-child(27) { .translate(135px,0,0); }
              &:nth-child(28) { .translate(140px,0,0); }
              &:nth-child(29) { .translate(145px,0,0); }
              &:nth-child(30) { .translate(150px,0,0); }
              &:nth-child(31) { .translate(155px,0,0); }
              &:nth-child(32) { .translate(160px,0,0); }
              &:nth-child(33) { .translate(165px,0,0); }
              &:nth-child(34) { .translate(170px,0,0); }
              &:nth-child(35) { .translate(175px,0,0); }
              @media @pad-p {
                .translate(0,0,0)!important;
              }
              @media @ipad {
                .translate(0,0,0)!important;
              }
              @media @mobile-p {
                .translate(0,0,0)!important;
              }
            }
          }
        }

        & .name {
          flex: 0 0 40%;
          .title(700);
          font-size: 22px;
          color: @blue;
          .transition;
          @media @laptop {
            font-size: 20px;
          }
          @media @pad-p {
            flex: 0 0 70%;
            font-size: 19px;
            margin-bottom: 10px;
          }
          @media @ipad-p {
            margin-bottom: 0px;
            font-size: 17px;
            flex: 0 0 25%;
            padding-right: 20px;
          }
          @media @ipad-l {
            margin-bottom: 0px;
            font-size: 18px;
            flex: 0 0 35%;
            padding-right: 20px;
          }
          @media @mobile-p {
            flex: 0 0 70%;
            font-size: 19px;
            margin-bottom: 10px;
          }
        }
        & .brokers {
          width: 100%;
          @media @pad-p {
            order: 3;
          }
          @media @ipad {
            order: 2;
          }
          @media @mobile-p {
            order: 3;
            flex: 0 0 70%;
          }

          & .broker {
            .transition(all 0.3s ease);
            @media @mobile-p {
              word-break: break-word;
            }

            & .brokername {
              .title(700);
              font-size: 19px;
              @media @laptop {
                font-size: 17px;
              }
              @media @pad-p {
                font-size: 15px;
              }
              @media @ipad {
                font-size: 15px;
              }
              @media @mobile-p {
                font-size: 16px;
                white-space: nowrap;
              }
            }

            & .brokeremail {
              color: grey;
              text-decoration: none;
              padding-left: 10px;
              font-style: italic;
              .transition;
              @media @laptop {
                font-size: 15px;
              }
              @media @pad-p {
                font-size: 14px;
              }
              @media @ipad {
                font-size: 14px;
              }
              @media @mobile-p {
                font-size: 15px;
                white-space: nowrap;
              }
              &:hover {
                color: @blue;
              }
            }
          }
        }
        & .country {
          flex: 0 0 20%;
          .title(700);
          font-size: 22px;
          @media @laptop {
            font-size: 20px;
          }
          @media @pad-p {
            flex: 0 0 30%;
            text-align: right;
            order: 2;
            font-size: 19px;
          }
          @media @ipad-p {
            text-align: left;
            order: 3;
            flex: 0 0 33%;
            font-size: 15px;
            padding-right: 110px;
          }
          @media @ipad-l {
            text-align: left;
            order: 3;
            flex: 0 0 30%;
            font-size: 16px;
            padding-right: 110px;
          }
          @media @mobile-p {
            flex: 0 0 30%;
            text-align: right;
            order: 2;
            font-size: 19px;
          }
        }
      }
    }

    & .attending-exhibitors {
      padding: 10px 40px 1px;
      background: white;
      @media @pad-p {
        padding: 10px 5px 1px;
      }
      @media @ipad {
        padding: 10px 20px 1px;
      }
      @media @mobile-p {
        padding: 10px 5px 1px;
      }

      & .exhibitor {
        display: flex;
        align-items: center;
        position: relative;
        padding: 20px;
        .radius(8px);
        border: thin solid @grey;
        margin-bottom: 10px;
        .transition(all 0.3s ease);
        overflow: hidden;
        .noselect;
        @media @pad-p {
          padding: 10px 10px 60px;
          background: #000046;
          background: -webkit-linear-gradient(to right bottom, #fff, #fff, #e5e5ff);
          background: linear-gradient(to right bottom, #fff, #fff, #e5e5ff);
          margin-bottom: 5px;
          display: grid;
          grid-template-columns: 120px 2fr 1fr;
          align-items: start;
        }
        @media @ipad {
          padding: 10px 10px 60px;
          background: #000046;
          background: -webkit-linear-gradient(to right bottom, #fff, #fff, #e5e5ff);
          background: linear-gradient(to right bottom, #fff, #fff, #e5e5ff);
          margin-bottom: 10px;
          display: flex;
          align-items: center;
        }
        @media @mobile-p {
          padding: 10px 10px 60px;
          background: #000046;
          background: -webkit-linear-gradient(to right bottom, #fff, #fff, #e5e5ff);
          background: linear-gradient(to right bottom, #fff, #fff, #e5e5ff);
          margin-bottom: 5px;
          display: grid;
          grid-template-columns: 120px 2fr 1fr;
          align-items: start;
        }

        &:hover {
          // padding: 20px 10px 40px 10px;
          background: #000046;
          background: -webkit-linear-gradient(to right bottom, #fff, #fff, #e5e5ff);
          background: linear-gradient(to right bottom, #fff, #fff, #e5e5ff);
          .shadow;
          @media @pad-p {
            .noshadow;
          }
          @media @ipad {
            .noshadow;
          }
          @media @mobile-p {
            .noshadow;
          }

          & a.url {
            .translate(0,0,0);
            opacity: 1;
          }
        }

        & .logo {
          text-align: center;
          padding: 5px 30px;
          flex: 0 0 200px;
          @media @laptop {
            flex: 0 0 180px;
          }
          @media @pad-p {
            padding: 0 10px 0 0;
            grid-row-start: 1;
            grid-row-end: 3;
          }
          @media @ipad {
            flex: 0 0 130px;
            padding: 0 10px;
          }
          @media @mobile-p {
            padding: 0 10px 0 0;
            grid-row-start: 1;
            grid-row-end: 3;
          }

          & img {
            width: 100%;
            height: auto;
          }
        }

        & .info {
          width: 100%;
          padding-right: 30px;
          @media @laptop {
            padding-right: 10px;
          }
          @media @pad-p {
            grid-column-start: 2;
            grid-column-end: 4;
            margin-bottom: 15px;
          } 
          @media @mobile-p {
            grid-column-start: 2;
            grid-column-end: 4;
            margin-bottom: 15px;
          } 

          & div {
            white-space: pre-line;
            font-size: 16px;
            line-height: 22px;
            @media @laptop {
              font-size: 15px;
              line-height: 21px;
            }
            @media @pad-p {
              font-size: 13px;
              line-height: 17px;
            }
            @media @ipad {
              font-size: 13px;
              line-height: 17px;
            }
            @media @mobile-p {
              font-size: 13px;
              line-height: 17px;
            }
          }

          & h2 {
            .title(700);
            color: @blue;
            margin: 0 0 10px;
            font-size: 25px;
            @media @laptop {
              margin: 0 0 6px;
              font-size: 22px;
            }
            @media @pad-p {
              margin: 0 0 5px;
              font-size: 18px;
            }
            @media @ipad {
              margin: 0 0 5px;
              font-size: 18px;
            }
            @media @mobile-p {
              margin: 0 0 5px;
              font-size: 18px;
            }
          }
        }

        & .contact {
          flex: 0 0 350px;
          align-self: flex-start;
          border-left: thin solid @blue;
          padding-left: 10px;
          @media @pad-p {
            grid-column-start: 2;
            grid-column-end: 4;
          } 
          @media @ipad {
            flex: 0 0 190px;
          }
          @media @mobile-p {
            grid-column-start: 2;
            grid-column-end: 4;
          }

          & .item {
            display: flex;
            align-items: flex-start;

            & i {
              color: @blue;
              margin-top: 3px;
            }

            & span {
              white-space: pre-line;
              font-size: 16px;
              line-height: 22px;
              padding-left: 10px;
              @media @laptop {
                font-size: 15px;
                line-height: 21px;
              }
              @media @pad-p {
                font-size: 13px;
                line-height: 19px;
                overflow-wrap: break-word;
              }
              @media @ipad {
                font-size: 13px;
                line-height: 19px;
                overflow-wrap: break-word;
              }
              @media @mobile-p {
                font-size: 13px;
                line-height: 19px;
                overflow-wrap: break-word;
              }
            }
          }
        }

        & a.url {
          position: absolute;
          right: 20px;
          bottom: 20px;
          .translate(50px,0,0);
          .transition(all 0.3s ease);
          display: block;
          width: 100px;
          height: 40px;
          opacity: 0;
          @media @laptop {
            height: 36px;
          }
          @media @pad-p {
            opacity: 1;
            .translate(0,0,0);
            right: 10px;
            bottom: 10px;
          }
          @media @ipad {
            opacity: 1;
            .translate(0,0,0);
            right: 10px;
            bottom: 10px;
          }
          @media @mobile-p {
            opacity: 1;
            .translate(0,0,0);
            right: 10px;
            bottom: 10px;
          }

          &:hover {
            & .outter {
              width: 40px;
              border: thin solid grey;
            }

            & .t1 {
              opacity: 0;
              .translate(15px,0,0);
            }
            & .t2 {
              opacity: 1;
              .translate(0,0,0);
            }
          }

          & .outter {
            position: absolute;
            top: 0;
            right: 0;
            width: 100%;
            height: 100%;
            .radius(20px);
            border: thin solid @grey;
            .transition(all 0.3s ease);
            @media @laptop {
              .radius(18px);
            }
          }

          & .t1 {
            .title(400);
            padding-right: 10px;
            font-size: 20px;
            letter-spacing: 1px;
            color: black;
            position: absolute;
            text-align: center;
            position: absolute;
            width: 100%;
            height: 100%;
            line-height: 40px;
            .transition(all 0.3s ease);
            opacity: 1;
            @media @laptop {
              font-size: 18px;
              line-height: 36px;
            }
          }

          & .t2 {
            .title(400);
            font-size: 20px;
            letter-spacing: 1px;
            color: black;
            position: absolute;
            text-align: center;
            position: absolute;
            width: 100%;
            height: 100%;
            line-height: 40px;
            padding-right: 35px;
            .transition(all 0.3s ease);
            opacity: 0;
            .translate(-15px,0,0);
            @media @laptop {
              font-size: 18px;
              line-height: 36px;
            }
          }

          & i {
            position: absolute;
            color: @blue;
            right: 11px;
            top: 50%;
            .translate(0,-50%,0);
          }
        }
      }
    }

    & .no-results {
      height: 250px;
      display: flex;
      align-items: center;
      justify-content: center;
      .font(700);
      color: @blue;
      text-align: center;
      font-size: 20px;
      background-color: white;
    }

    & .yachts-grid {
      padding: 0;
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      background: white;
      @media @pad-p {
        grid-template-columns: repeat(2, 1fr);
      }
      @media @ipad-p {
        grid-template-columns: repeat(3, 1fr);
      }
      @media @mobile-p {
        grid-template-columns: repeat(1, 1fr);
      }

      & .yacht {
        .keepScreen;
        position: relative;
        background: @grey;
        overflow: hidden;
        cursor: pointer;
        @media @pad-p {
          .keepBox;
          background: #0d1525;
        }
        @media @ipad {
          .keepBox;
          background: #0d1525;
        }
        @media @mobile-p {
          .keepScreen;
          background: #0d1525;
        }

        &:nth-child(even) {
          & .details {
            @media @mobile-p {
              background: linear-gradient(to left, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 100%)!important;
              left: auto!important;
              right: 0!important;
              text-align: right!important;
            }
          }
        }

        &:hover {
          & .image {
            .scale(1.1);
            @media @pad-p {
              .scale(1);
            }
            @media @ipad {
              .scale(1);
            }
            @media @mobile-p {
              .scale(1);
            }
          }
          & .details {
            position: absolute;
            left: 0;
            top: 0;
            margin-top: 0px;
            .alpha(50,0,0,0);

            & a {
              opacity: 1;
              margin-top: 0;
              .transition(all 0.3s ease 0.1s);
            }
            & .captain {
              opacity: 1;
              margin-top: 0;
              .transition(all 0.3s ease 0.2s);
            }
            & .type {
              opacity: 1;
              margin-top: 0px;
              .transition(all 0.3s ease 0.3s);
            }
            & .loa {
              opacity: 1;
              margin-top: 0px;
              .transition(all 0.3s ease 0.4s);
            }
            & .builder {
              opacity: 1;
              margin-top: 0px;
              .transition(all 0.3s ease 0.5s);
            }
          }
        }

        & .preloader {
          position: absolute;
          top: 50%;
          left: 50%;
          margin-top: -25px;
          margin-left: -25px;

          @keyframes ldio-66ahmp04iyj {
            0% {
              top: 48px;
              left: 48px;
              width: 0;
              height: 0;
              opacity: 1;
            }
            100% {
              top: 9px;
              left: 9px;
              width: 78px;
              height: 78px;
              opacity: 0;
            }
          }
          .ldio-66ahmp04iyj div {
            position: absolute;
            border-width: 2px;
            border-style: solid;
            opacity: 1;
            border-radius: 50%;
            animation: ldio-66ahmp04iyj 0.7092198581560283s cubic-bezier(0,0.2,0.8,1) infinite;
          }
          .ldio-66ahmp04iyj div:nth-child(1) {
            border-color: #000000;
            animation-delay: 0s;
          }
          .ldio-66ahmp04iyj div:nth-child(2) {
            border-color: #319fab;
            animation-delay: -0.35460992907801414s;
          }
          .loadingio-spinner-ripple-mx6prr3b3hr {
            width: 57px;
            height: 57px;
            display: inline-block;
            overflow: hidden;
            background: #ffffff;
          }
          .ldio-66ahmp04iyj {
            width: 100%;
            height: 100%;
            position: relative;
            transform: translateZ(0) scale(0.57);
            backface-visibility: hidden;
            transform-origin: 0 0; /* see note above */
          }
          .ldio-66ahmp04iyj div { box-sizing: content-box; }
        }

        & .loaded {
          position: absolute;
          top: -40px;
        }

        & .image {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          .cover;
          .transition;
          .origin(50%,50%);
          @media @pad-p {
            height: 70%;
          }
          @media @ipad {
            height: 70%;
          }
        }

        & .details {
          position: absolute;
          left: 0;
          top: 100%;
          margin-top: -60px;
          padding: 20px 20px;
          .title(400);
          font-size: 17px;
          line-height: 21px;
          color: white;
          .transition(all 0.4s ease);
          background: transparent;
          width: 100%;
          height: 100%;
          @media @laptop {
            font-size: 16px;
            line-height: 21px;
          }
          @media @pad-p {
            top: auto!important;
            bottom: 0!important;
            margin: 0!important;
            background: transparent!important;
            padding-bottom: 10px;
            height: auto;
          }
          @media @ipad {
            top: auto!important;
            bottom: 0!important;
            margin: 0!important;
            background: transparent!important;
            padding-bottom: 10px;
            height: auto;
          }
          @media @mobile-p {
            bottom: 0!important;
            top: auto!important;
            margin-top: 0!important;
            background: linear-gradient(to right, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 100%)!important;
            width: 70%;
          }

          & .name {
            .title(700);
            color: white;
            font-size: 26px;
            letter-spacing: 1px;
            text-shadow: 0px 0px 3px #000000;
            margin-bottom: 12px;
            @media @laptop {
              font-size: 24px;
              margin-bottom: 10px;
            }
            @media @pad-p {
              font-size: 27px;
              margin-bottom: 20px;
            }
            @media @ipad {
              font-size: 27px;
              margin-bottom: 20px;
            }
            @media @mobile-p {
              font-size: 30px;
              margin-bottom: 20px;
            }
          }

          & a {
            text-decoration: none;
            color: @yellow;
            font-size: 22px;
            line-height: 22px;
            margin-bottom: 8px;
            opacity: 0;
            margin-top: 20px;
            .transition;
            display: block;
            @media @laptop {
              font-size: 20px;
              line-height: 20px;
            }
            @media @pad-p {
              opacity: 1;
              margin-top: 0;
              margin-bottom: 6px;
              font-size: 16px;
            }
            @media @ipad {
              opacity: 1;
              margin-top: 0;
              margin-bottom: 6px;
              font-size: 16px;
            }
            @media @mobile-p {
              opacity: 1;
              margin-top: 0;
            }
          }

          & .captain, & .type, & .loa, & .builder {
            opacity: 0;
            margin-top: 20px;
            .transition;
            @media @pad-p {
              opacity: 1;
              margin-top: 0;
              font-size: 12px;
              line-height: 8px;
            }
            @media @ipad {
              opacity: 1;
              margin-top: 0;
              font-size: 12px;
              line-height: 14px;
            }
            @media @mobile-p {
              opacity: 1;
              margin-top: 0;
            }
          }
          & .type, & .loa, & .builder {
            @media @ipad {
              display: inline-block;
            }
            @media @pad-p {
              display: inline-block;
            }
            @media @mobile-p {
              // display: inline-block;
            }
          }
          & .loa {
            @media @ipad {
              padding: 0 5px;
            }
            @media @pad-p {
              padding: 0 5px;
            }
          }
        }
      }
    }

    & .testimonials {
      display: flex;
      align-items: center;
      gap: 50px;
      padding: 0 20% 100px;
      overflow: hidden;
      background: white;
      @media @pad-p {
        padding: 0 15px 30px;
        gap: 20px;
      }
      @media @pad-l {
        padding: 0 15px 60px;
      }
      @media @ipad {
        padding: 0 5% 30px;
        gap: 30px;
      }
      @media @mobile-p {
        padding: 0 15px 30px;
        gap: 20px;
      }
      @media @mobile-l {
        width: 100vw;
        height: 100vh;
        overflow: hidden;
      }

      & i {
        flex: 0 0 50px;
        height: 50px;
        .radius(50%);
        border: thin solid @blue;
        color: @blue;
        line-height: 50px;
        text-align: center;
        display: block;
        .transition(all 0.3s ease);
        cursor: pointer;
        @media @laptop {
          flex: 0 0 40px;
          height: 40px;
          line-height: 40px;
        }
        @media @pad-p {
          display: none;
        }
        @media @ipad {
          flex: 0 0 40px;
          height: 40px;
          line-height: 40px;
          display: block;
        }
        @media @mobile-p {
          display: none;
        }
        @media @mobile-l {
          display: none;
        }

        &:hover {
          background: @blue;
          color: white;
        }
      }

      & .testimonials-container {
        width: 100%;
        position: relative;
        height: 50vh;
        @media @laptop {
          height: 45vh;
        }
        @media @pad-p {
          height: 50vh;
        }
        @media @ipad {
          height: 35vh;
        }
        @media @mobile-p {
          height: 70vh;
        }

        & .quote {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          // z-index: -1;

          &.active {
            z-index: 100;
            & .image {
              .scale(1,1);
              .transition(all 0.3s ease 0.2s);
            }
            & .details {
              opacity: 1;
              .translate(0,0,0);
              .transition(all 0.3s ease 0.4s);
              & .testimonie {
                & div.name {
                  opacity: 1;
                  .translate(0,0,0);
                  .transition(all 0.3s ease 0.6s);
                }
              }
            }
          }

          & .image {
            position: absolute;
            top: 50%;
            left: 0;
            width: 200px;
            height: 200px;
            margin-top: -100px;
            .cover;
            .radius(50%);
            .scale(0,1);
            .transition(all 0.3s ease);
            @media @laptop {
              width: 180px;
              height: 180px;
              margin-top: -90px;
            }
            @media @pad-p {
              width: 150px;
              height: 150px;
            }
            @media @mobile-p {
              top: 0;
              left: 50%;
              width: 180px;
              height: 180px;
              margin-top: 0;
              margin-left: -90px;
            }
            @media @mobile-l {
              left: 20px;
            }
          }

          & .details {
            position: absolute;
            left: 250px;
            top: 0;
            width: calc(~"100% - 250px");
            color: grey;
            height: 100%;
            display: flex;
            align-items: center;
            .translate(20px,0,0);
            opacity: 0;
            .transition(all 0.3s ease);
            @media @pad-p {
              left: 165px;
              width: calc(~"100% - 165px");
            }
            @media @ipad {
              left: 200px;
              width: calc(~"100% - 200px");
            }
            @media @mobile-p {
              left: 0;
              width: 100%;
              top: 230px;
              display: block;
              height: auto;
              padding: 0 20px;
            }
            @media @mobile-l {
              left: 220px;
            }

            & .testimonie {
              .font;
              color: #636363;
              font-size: 19px;
              line-height: 27px;
              @media @laptop {
                font-size: 16px;
                line-height: 24px;
              }
              @media @pad {
                font-size: 15px;
                line-height: 22px;
              }
              @media @ipad {
                font-size: 16px;
                line-height: 24px;
              }

              & > span {
                .title(700);
                font-size: 16px;
                letter-spacing: 2px;
                color: @blue;
                padding-right: 15px;
                @media @laptop {
                  font-size: 15px;
                  padding-right: 8px;
                }
              }

              & div.name {
                margin-top: 15px;
                .title(700);
                color: @blue;
                font-size: 16px;
                letter-spacing: 0.5px;
                .translate(0,30px,0);
                opacity: 0;
                .transition(all 0.3s ease);
                @media @laptop {
                  font-size: 15px;
                }

                & span {
                  .title(400);
                  color: #636363;
                  padding-left: 8px;
                }
              }
            }
          }
        }
      }
    }

    & .medys-share {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      border-bottom: thin solid @grey;
      padding: 0 40px 15px;
      margin-bottom: 8px;
      .translate(0,-20px,0);
      @media @laptop {
        padding: 0 30px 12px;
      }
      @media @pad-p {
        margin-bottom: 10px;
      }
      @media @ipad {
        margin-bottom: 35px;
        .translate(0,-10px,0);
      }
      @media @pad-l {
        margin-bottom: 10px;
      }
      @media @mobile-l {
        margin-bottom: 10px;
      }

      & h3 {
        .title(700);
        color: grey;
        margin: 0;
        @media @laptop {
          font-size: 17px;
        }
      }

      & a {
        color: grey;
        text-decoration: none;
        .transition(all 0.3s ease);

        &:hover {
          color: black;
        }
      }
    }

    &.common {

      & videocontainer {
        &.white {
          &::after {
            height: 100%;
          }
        }
      }

      & .row {
        padding-top: 0;
        border-bottom: thin solid black;
        background: white;
        @media @pad-p {
          padding: 30px 30px 60px;
        }

        &.article {
          padding-top: 1px;
          @media @pad-p {
            padding-top: 1px;
          }

          &.greek {
            & h1 {
              font-family: 'Roboto Condensed', sans-serif;
              font-size: 60px;
              @media @laptop {
                font-size: 43px;
              }
              @media @ipad {
                font-size: 35px;
                line-height: 38px;
                margin-bottom: 45px;
                margin-top: 35px;
              }
              @media @pad-p {
                margin-top: 0;
                font-size: 31px;
                line-height: 34px;
              }
              @media @pad-l {
                margin-top: 20px;
                font-size: 27px;
                line-height: 32px;
              }
              @media @mobile-p {
                margin-top: 20px;
                font-size: 27px;
                line-height: 32px;
              }
              @media @mobile-l {
                margin-top: 20px;
                font-size: 27px;
                line-height: 32px;
              }
            }
            & h2 {
              font-family: 'Roboto Condensed', sans-serif;
            }
            & p {
              font-family: 'Tinos', serif;
              font-size: 19px;
              @media @laptop {
                font-size: 18px;
              }
              @media @ipad {
                font-size: 16px;
                line-height: 22px;
                margin-bottom: 13px;
              }

              & + h1 {
                margin-top: 50px;
              }
            }
          }

          & .withintro {
            display: flex;
            gap: 40px;
            align-items: stretch;
            @media @ipad {
              display: block;
            }
            @media @pad {
              display: block;
            }
            @media @mobile-p {
              display: block;
            }

            & img.intro {
              width: 350px;
              height: 100%;
              object-fit: contain;
              @media @laptop {
                width: 300px;
              }
              @media @pad-p {
                width: 100%;
                height: auto;
                margin-bottom: 20px;
              }
              @media @ipad {
                float: left;
                width: 220px;
                margin: 0 30px 20px 0;
              }
              @media @ipad-l {
                width: 250px;
              }
              @media @mobile-p {
                width: 100%;
                height: auto;
                margin-bottom: 20px;
              }
              @media @mobile-l {
                float: left;
                width: 220px;
                margin: 0 30px 20px 0;
              }
            }
          }

          & h1 {
            .title(900);
            color: @blue;
            font-size: 80px;
            margin: 0 auto 50px;
            @media @laptop {
              font-size: 60px;
              margin: 0 auto 35px;
            }
            @media @pad-p {
              font-size: 42px;
              line-height: 42px;
              margin-top: 10px;
            }
            @media @ipad-p {
              font-size: 50px;
              line-height: 50px;
              margin: 10px auto 30px;
            }
            @media @ipad-l {
              font-size: 50px;
              line-height: 50px;
              margin: 10px auto 30px;
            }
            @media @pad-l {
              font-size: 42px;
              line-height: 42px;
              margin-top: 0px;
            }
            @media @mobile-p {
              font-size: 42px;
              line-height: 42px;
              margin-top: 10px;
              padding: 0 20px;
            }
            @media @mobile-l {
              font-size: 42px;
              line-height: 42px;
              margin-top: 10px;
              padding: 0 20px;
            }

            &.tiny {
              font-size: 50px;
              @media @pad-p {
                font-size: 30px;
                line-height: 30px;
              }
              @media @mobile-p {
                font-size: 30px;
                line-height: 30px;
                text-align: left;
              }
            }
          }

          & p {
            font-size: 18px;
            line-height: 25px;
            text-align: left;
            margin: 0 0 18px;

            @media @laptop {
              font-size: 16px;
              line-height: 22px;
              margin: 0 0 15px;
            }
            @media @pad {
              font-size: 15px;
              line-height: 21px;
              margin: 0 0 13px;
            }
            @media @ipad {
              font-size: 15px;
              line-height: 21px;
              margin: 0 0 13px;
            }

            & strong {
              color: @blue;
              .font(700);
            }
          }

          & a, & span.pop-up {
            color: @blue;
            text-decoration: none;
            cursor: pointer;
          }

          & h2 {
            .title(600);
            color: @blue;
            font-size: 35px;
            text-align: center;
            border-bottom: thin solid @blue;
            padding-bottom: 20px;
            margin: 70px 0 40px;
            @media @laptop {
              font-size: 26px;
            }
            @media @ipad {
              font-size: 22px;
            }
            @media @pad-p {
              font-size: 20px;
            }
            @media @pad-l {
              font-size: 19px;
            }
            @media @mobile-p {
              font-size: 22px;
            }
            @media @mobile-l {
              font-size: 22px;
            }
          }

          & ul {
            margin: 0;
            padding: 0;
            text-align: left;
            list-style-position: inside;
            @media @pad-p {
              list-style-position: initial;
              padding-left: 10px;
            }
            @media @ipad {
              list-style-position: inside;
              padding-left: 0;
            }
            @media @mobile-p {
              list-style-position: initial;
              padding-left: 20px;
            }

            & li {
              font-size: 18px;
              line-height: 25px;
              text-align: left;
              @media @laptop {
                font-size: 16px;
                line-height: 22px;
              }
              @media @pad-p {
                font-size: 15px;
                line-height: 21px;
              }
              @media @ipad {
                font-size: 15px;
                line-height: 21px;
              }

              & strong {
                color: @blue;
                .font(700);
              }
            }
          }

          & .partner-category {
            & .items {
              display: flex;
              align-items: center;
              justify-content: center;
              gap: 10px;
              flex-wrap: wrap;

              & a {
                padding: 10px;
                .transition;
                border: thin solid white;
                .radius(8px);

                &:hover {
                  border: thin solid @blue;
                }
              }

              & img {
                width: 250px;
                height: 250px;
                object-fit: contain;
                @media @laptop {
                  width: 180px;
                  height: 180px;
                }
                @media @ipad {
                  width: 160px;
                  height: 160px;
                }
              }
            }
          }

          &.contact-form {
            position: relative;
            padding: 0 25%;
            @media @laptop {
              padding:  0 30%;
            }
            @media @pad-p {
              padding: 0 40px;
            }
            @media @ipad {
              padding:  0 15%;
            }
            @media @ipad-l {
              padding:  0 25%;
            }
            @media @mobile-p {
              padding: 0 30px;
            }

            & form {

              & .visually-hidden {
                display: none;
              }

              & fieldset {
                width: 100%;
                border: none;
                margin: 0;
                padding: 40px 0 0;

                & legend {
                  display: none;
                }

                & .control-group {
                  position: relative;
                  width: 100%;
                  height: 60px;
                  @media @laptop {
                    height: 55px;
                  }

                  &:last-child {
                    height: 250px;
                  }


                  & .control-label {
                    width: 100%;
                    text-align: left;

                    & label {
                      position: relative;
                      width: 100%;
                      .font;
                      font-size: 19px;
                      display: block;
                      padding: 8px 0px 0 12px;
                      color: grey;
                      @media @laptop {
                        font-size: 16px;
                      }

                      & span.star {
                        position: absolute;
                        color: @red;
                        .font;
                        font-size: 47px;
                        top: 0;
                        right: 0;
                        @media @laptop {
                          font-size: 40px;
                        }
                      }

                      & span.form-control-feedback {
                        color: @red;
                        .font;
                        font-size: 17px;
                        position: absolute;
                        top: 10px;
                        right: 42px;
                        white-space: nowrap;
                        @media @laptop {
                          font-size: 15px;
                          top: 9px;
                        }
                      }
                    }
                  }

                  & .controls {
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 100%;
                    text-align: left;

                    &.has-danger {
                      & input, & textarea {
                        border: thin solid @red;
                      }
                    }

                    & input, & textarea {
                      .font;
                      font-size: 17px;
                      padding: 10px;
                      .radius(4px);
                      border: thin solid grey;
                      width: calc(100% - 30px);
                      background: none;
                      .transition(all 0.3s ease);
                      @media @laptop {
                        font-size: 15px;
                        padding: 8px;
                      }

                      &:focus {
                        margin-left: 100px;
                        width: calc(100% - 130px);
                      }
                    }

                    & textarea {
                      resize: none;
                    }
                  }
                }
              }

              & .control-group {

                &.field-spacer {
                  display: none;
                }

                & .controls {

                  & .grecaptcha-badge {
                    position: absolute!important;
                    bottom: 40px!important;
                  }

                  & button {
                    .title(900);
                    color: white;
                    background: @blue;
                    border: none;
                    padding: 10px 20px;
                    .radius(4px);
                    cursor: pointer;
                    .transition(all 0.3s ease);
                    font-size: 25px;
                    margin-top: 30px;
                    margin-bottom: 80px;
                    @media @laptop {
                      font-size: 20px;
                      margin-top: 10px;
                    }

                    &:hover {
                      background: black;
                    }
                  }
                }
              }
            }
          }

          &.faqs {
            padding: 50px 10%;
            @media @pad-p {
              padding: 30px 30px;
            }
            @media @ipad {
              padding: 50px 10%;
            }
            @media @mobile-p {
              padding: 30px 20px;
            }

            & .faq {
              text-align: left;
              @media @pad-p {
                margin-bottom: 40px;
              }
              @media @ipad {
                margin-bottom: 0;
              }
              @media @mobile-p {
                margin-bottom: 40px;
              }

              & .question {
                display: flex;
                align-items: center;
                gap: 40px;
                @media @laptop {
                  gap: 30px;
                }
                @media @pad-p {
                  align-items: flex-start;
                  margin-bottom: 10px;
                  gap: 20px;
                }
                @media @ipad {
                  align-items: flex-end;
                  display: flex;
                  margin-bottom: 10px;
                  gap: 20px;
                }
                @media @mobile-p {
                  align-items: flex-start;
                  margin-bottom: 10px;
                  gap: 20px;
                }

                & span.symbol {
                  .font(700);
                  color: @blue;
                  font-size: 80px;
                  @media @laptop {
                    font-size: 75px;
                  }
                  @media @pad-p {
                    font-size: 60px;
                    line-height: 50px;
                  }
                  @media @ipad {
                    font-size: 75px;
                    line-height: 100px;
                  }
                  @media @mobile-p {
                    font-size: 60px;
                    line-height: 50px;
                  }
                }

                & span.question {
                  .title(700);
                  color: black;
                  font-size: 25px;
                  @media @laptop {
                    font-size: 22px;
                    line-height: 24px;
                  }
                  @media @pad-p {
                    font-size: 19px;
                    line-height: 20px;
                  }
                  @media @ipad {
                    font-size: 19px;
                    line-height: 20px;
                  }
                  @media @mobile-p {
                    font-size: 20px;
                    line-height: 23px;
                  }
                }
              }
            }
          }

        }
      }

    }

    & .program {
      width: 100vw;
      position: relative;
      overflow: hidden;
      border-bottom: thin solid black;

      &.events {

        & .counter {
          width: 30%;
          @media @pad-p {
            width: 50%;
          }
          @media @ipad {
            width: 36%;
          }
          @media @mobile-p {
            width: 50%;
          }
        }

        & .program-output {
          position: absolute;
          top: 0;
          left: 30%;
          width: 70%;
          z-index: 500;
          @media @pad-p {
            left: 0;
          }
          @media @ipad {
            left: 36%;
          }
          @media @mobile-p {
            left: 0;
          }

          &.sticky {
            position: fixed;
            top: 37vh;
            @media @mobile-p {
              top: 250px;
            }
            &.hidden {
              z-index: -1;
            }
          }

          & .output {
            display: none;

            &.active {
              display: block;
            }

            & .title {
              position: absolute;
              left: -30vw;
              width: 30vw;
              text-align: right;
              top: 140px;
              padding-right: 42px;
              top: 137px;
              @media @pad-p {
                top: -56px;
                left: 250px;
              }
              @media @ipad {
                left: -30vw;
                top: 85px;
              }
              @media @mobile-p {
                top: -63px;
                left: 215px;
              }
            }

            & p {
              top: 48px;
              @media @pad-p {
                top: 0;
                padding-left: 30px;
              }
              @media @ipad {
                top: 13px;
                padding-left: 0px;
              }
              @media @mobile-p {
                top: 0;
                padding-left: 20px;
              }
            }

            & .social-events {
              display: flex;
              align-items: flex-start;
              gap: 30px;
              justify-content: flex-start;
              @media @pad-p {
                gap: 10px;
                flex-direction: column;
                padding-left: 30px;
                width: 100vw;
                padding-right: 30px;
                padding-top: 10px;
              }
              @media @ipad {
                gap: 30px;
                flex-direction: row;
                flex-wrap: wrap;
                padding-left: 0px;
                padding-top: 0px;
              }
              @media @mobile-p {
                gap: 10px;
                flex-direction: column;
                padding-left: 20px;
                width: 100vw;
                padding-right: 30px;
                padding-top: 10px;
              }

              & .social-event {
                flex: 0 0 300px;
                height: 300px;
                .cover;
                .radius(4px);
                position: relative;
                display: none;
                .noselect;
                @media @pad-p {
                  flex: 0 0 90px;
                  width: 90px;
                }
                @media @ipad {
                  flex: 0 0 200px;
                  height: 200px;
                }
                @media @mobile-p {
                  flex: 0 0 90px;
                  width: 90px;
                }

                & .organizer {
                  .title(900);
                  font-size: 45px;
                  line-height: 45px;
                  padding: 0 20px;
                  text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.7);
                  left: 0;
                  top: 50%;
                  width: 100%;
                  text-align: center;
                  .translate(0,-50%,0);
                  position: absolute;
                  color: white;
                  @media @laptop {
                    font-size: 35px;
                    line-height: 37px;
                  }
                  @media @pad-p {
                    color: @blue;
                    text-shadow: none;
                    top: 0;
                    left: 90px;
                    text-align: left;
                    width: calc(100vw - 110px);
                    font-size: 24px;
                    line-height: 24px;
                    .translate(0,0,0);
                  }
                  @media @ipad {
                    color: white;
                    font-size: 25px;
                    line-height: 25px;
                    text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.7);
                    .translate(0,-50%,0);
                    left: 0;
                    top: 50%;
                    width: 100%;
                    text-align: center;
                  }
                  @media @mobile-p {
                    color: @blue;
                    text-shadow: none;
                    top: 0;
                    left: 90px;
                    text-align: left;
                    width: calc(100vw - 110px);
                    font-size: 24px;
                    line-height: 24px;
                    .translate(0,0,0);
                  }

                  & span {
                    display: block;
                    font-size: 21px;
                    line-height: 24px;
                    margin-top: 4px;
                    @media @laptop {
                      font-size: 19px;
                      line-height: 22px;
                    }
                    @media @pad-p {
                      font-size: 16px;
                      line-height: 16px;
                      color: black;
                    }
                    @media @ipad {
                      font-size: 16px;
                      line-height: 16px;
                      color: white;
                    }
                    @media @mobile-p {
                      font-size: 16px;
                      line-height: 16px;
                      color: black;
                    }
                  }
                }

                & .details {
                  position: absolute;
                  color: white;
                  left: 0;
                  bottom: 0;
                  width: 100%;
                  backdrop-filter: blur(5px);
                  .title(600);
                  color: white;
                  text-align: center;
                  padding: 10px 10px 20px;
                  font-size: 17px;
                  @media @laptop {
                    font-size: 15px;
                  }
                  @media @pad-p {
                    background: none;
                    left: 110px;
                    color: black;
                    text-align: left;
                    font-size: 16px;
                    line-height: 19px;
                    padding: 0;
                    width: calc(100vw - 110px);
                    backdrop-filter: none;
                  }
                  @media @ipad {
                    background: black;
                    left: 0;
                    color: white;
                    text-align: center;
                    font-size: 13px;
                    line-height: 14px;
                    padding: 7px 10px;
                    width: 100%;
                  }
                  @media @mobile-p {
                    background: none;
                    left: 110px;
                    color: black;
                    text-align: left;
                    font-size: 16px;
                    line-height: 19px;
                    padding: 0;
                    width: calc(100vw - 110px);
                    backdrop-filter: none;
                  }

                  & a {
                    text-decoration: none;
                    color: #ffef54;
                    display: block;
                    @media @pad-p {
                      color: @paleblue;
                    }
                    @media @ipad {
                      color: #ffef54;
                    }
                    @media @mobile-p {
                      color: @paleblue;
                    }
                  }
                }
              }
            }
          }
        }

      }

      & .program-output {
        position: fixed;
        top: 35vh;
        height: 60vh;
        left: 50%;
        width: 50%;
        // border: thin solid grey;
        z-index: -1;
        @media @pad-p {
          left: 20px;
          top: 300px;
          width: calc(100% - 40px);
        }
        @media @ipad {
          left: 50%;
          top: 63vh;
          width: 50%;
        }
        @media @pad-l {
          left: 35vw;
          top: 170px;
          width: 65vw;
        }
        @media @mobile-p {
          left: 20px;
          top: 240px;
          width: calc(100% - 40px);
        }
        @media @mobile-l {
          top: 112px;
          left: 225px;
        }

        & .output {
          position: absolute;
          top: 25px;
          left: 0;
          width: 100%;
          height: 100%;

          &.active {
            & .title {
              opacity: 1;
              .translate(0,0,0);
            }
            & p {
              .transition(all 0.3s ease 0.3s);
              opacity: 1;
              .translate(0,0,0);
            }
            & .event {
              .translate(0,0,0);
              opacity: 1;
              &.event-0 { .transition(all 0.3s ease); }
              &.event-1 { .transition(all 0.3s ease 0.1s); }
              &.event-2 { .transition(all 0.3s ease 0.2s); }
              &.event-3 { .transition(all 0.3s ease 0.3s); }
              &.event-4 { .transition(all 0.3s ease 0.4s); }
              &.event-5 { .transition(all 0.3s ease 0.5s); }
              &.event-6 { .transition(all 0.3s ease 0.6s); }
              &.event-7 { .transition(all 0.3s ease 0.7s); }
              &.event-8 { .transition(all 0.3s ease 0.8s); }
              &.event-9 { .transition(all 0.3s ease 0.9s); }
            }
          }

          &.parent {
            & .title {
              opacity: 0;
              .translate(0,-66px,0);
            }
            & p {
              .transition(all 0.3s ease);
              opacity: 0;
              .translate(0,-100%,0);
            }
            & .event {
              opacity: 0;
              &.event-0 { .transition(all 0.3s ease); }
              &.event-1 { .transition(all 0.3s ease 0.1s); }
              &.event-2 { .transition(all 0.3s ease 0.2s); }
              &.event-3 { .transition(all 0.3s ease 0.3s); }
              &.event-4 { .transition(all 0.3s ease 0.4s); }
              &.event-5 { .transition(all 0.3s ease 0.5s); }
              &.event-6 { .transition(all 0.3s ease 0.6s); }
              &.event-7 { .transition(all 0.3s ease 0.7s); }
              &.event-8 { .transition(all 0.3s ease 0.8s); }
              &.event-9 { .transition(all 0.3s ease 0.9s); }
            }
          }
          &.next {
            & .title {
              opacity: 0;
              .translate(0,66px,0);
            }
            & p {
              .transition(all 0.3s ease);
              opacity: 0;
              .translate(0,100%,0);
            }
          }

          & p {
            margin: 0;
            .font(400);
            padding-right: 50%;
            font-size: 18px;
            line-height: 27px;
            position: absolute;
            top: 76px;
            opacity: 0;
            .transition(all 0.3s ease);
            .translate(0,100%,0);
            @media @laptop {
              font-size: 17px;
              line-height: 25px;
            }
            @media @pad-p {
              top: 60px;
              padding-right: 0;
              font-size: 15px;
              line-height: 21px;
            }
            @media @ipad {
              padding-right: 50%;
              font-size: 15px;
              line-height: 21px;
              padding-right: 20%;
              top: 76px;
            }
            @media @pad-l {
              padding-right: 30px;
              top: 60px;
            }
            @media @mobile-p {
              top: 60px;
              padding-right: 0;
              font-size: 15px;
              line-height: 21px;
            }
          }

          & .event {
            .font(400);
            font-size: 18px;
            line-height: 27px;
            top: 76px;
            opacity: 1;
            .transition(all 0.3s ease);
            display: flex;
            align-items: flex-start;
            justify-content: flex-start;
            gap: 5px;
            margin-bottom: 5px;
            padding-right: 30%;
            .transition(all 0.3s ease);
            opacity: 0;
            @media @laptop {
              font-size: 17px;
              line-height: 25px;
            }
            @media @pad {
              padding-right: 0;
            }
            @media @ipad {
              font-size: 15px;
              line-height: 21px;
              margin-bottom: 10px;
              padding-right: 30%;
            }
            @media @pad-l {
              padding-right: 0;
              margin-bottom: 0px;
            }
            @media @mobile-p {
              padding-right: 0;
            }

            &.main {
              color: @blue;
            }

            & .time {
              .title(600);
              font-size: 22px;
              line-height: 27px;
              @media @laptop {
                font-size: 20px;
                line-height: 25px;
              }
              @media @ipad {
                font-size: 21px;
              }
            }

            & .details {
              padding-left: 10px;
            }

            &.event-0 {
              margin-top: 76px;
              @media @pad-p {
                margin-top: 65px;
              }
              @media @ipad {
                margin-top: 76px;
              }
              @media @pad-l {
                margin-top: 60px;
              }
              @media @mobile-p {
                margin-top: 65px;
              }
            }
          }

          & .title {
            .font(400);
            color: @blue;
            font-size: 50px;
            position: absolute;
            top: 0;
            .transition(all 0.3s ease);
            opacity: 0;
            @media @laptop {
              font-size: 43px;
            }
            @media @pad-p {
              font-size: 36px;
            }
            @media @ipad {
              font-size: 36px;
            }
            @media @mobile-p {
              font-size: 36px;
            }
          }
        }
      }

      & .counter {
        position: fixed;
        z-index: -1;
        top: 35vh;
        left: 0;
        width: 50%;
        height: 100%;
        .noselect;
        @media @pad {
          top: 200px;
          left: 20px;
        }
        @media @ipad-p {
          top: 63vh;
          left: 0;
          .transition;
        }
        @media @ipad-l {
          top: 63vh;
          left: 0;
          .transition;
        }
        @media @pad-l {
          top: 200px;
          left: 20px;
          width: 30vw;
        }
        @media @mobile-p {
          top: 170px;
          left: 20px;
        }
        @media @mobile-l {
          top: 130px;
          left: 20px;
        }

        & .display {
          display: flex;
          align-items: center;
          justify-content: flex-end;
          position: absolute;
          top: 0;
          right: 40px;
          gap: 0;
          @media @laptop {
            .origin(100%, 0);
            .scale(0.9);
          }
          @media @pad-p {
            .origin(100%, 0);
            .scale(0.9);
          }
          @media @ipad {
            .origin(100%, 0);
            .scale(0.7);
          }
          @media @pad-l {
            .origin(100%, 0);
            .scale(0.9);
            right: 20px;
          }
          @media @mobile-p {
            .origin(100%, 0);
            .scale(1);
            right: auto;
            left: 0;
          }
          @media @mobile-l {
            .origin(100%, 0);
            .scale(1);
            right: auto;
            left: 0;
          }
          
          & .rotating-font, & .divider {
            // flex: 0 0 30px;
            text-align: center;
            .title(700);
            color: black;
            font-size: 140px;
            height: 180px;
            overflow: hidden;
            @media @pad {
              font-size: 100px;
              height: 140px;
            }
            @media @ipad {
              font-size: 140px;
              height: 180px;
            }
            @media @pad-l {
              font-size: 100px;
              height: 140px;
            }
            @media @mobile-p {
              font-size: 80px;
              height: 110px;
            }
            @media @mobile-l {
              font-size: 80px;
              height: 110px;
            }

            & .dialer {
              .transition(all 0.5s ease);
            }
          }

          & .divider {
            color: @blue;
          }
        }

      }

      & .days {
        width: 100%;

        & .day {
          height: 70vh;
          // border-bottom: thin solid @red;
        }
      }
    }

    & .hotels {
      display: grid;
      grid-template-columns: 1fr 1fr;
      @media @pad-p {
        grid-template-columns: 1fr;
      }
      @media @ipad-p {
        grid-template-columns: 1fr;
      }
      @media @mobile-p {
        grid-template-columns: 1fr;
      }

      & .hotel {
        width: 100%;
        height: 300px;
        overflow: hidden;
        display: flex;
        align-items: stretch;
        // cursor: pointer;

        &:hover {
          & img {
            .scale(1.1);
          }
          & .medysbutton {
            .translate(0,0,0)!important;
          }
        }

        &:nth-child(4n + 3), &:nth-child(4n + 4) {
          & .left {
            order: 2;
          }
          // background: black;
          & .right {
            order: 1;
            & .medysbutton {
              right: auto;
              left: 20px;
              @media @ipad-l {
                left: auto!important;
                right: 20px!important;
              }
            }
            & .details {
              text-align: right;
              & h2 {
                padding: 0 0 0 30%;
              }
              & .info {
                padding: 0 0 0 30%;
                @media @ipad-l {
                  padding: 0!important;
                }
                justify-content: flex-end;
                & i {
                  order: 2;
                }
                & span, & a {
                  order: 1;
                }
              }
            }
          }
        }

        &:nth-child(odd) {
          & .left {
            @media @pad-p {
              order: 1!important;
            }
            @media @ipad-p {
              order: 1!important;
            }
            @media @mobile-p {
              order: 1!important;
            }
          }
          & .right {
            @media @pad-p {
              order: 2!important;
            }
            @media @ipad-p {
              order: 2!important;
            }
            @media @mobile-p {
              order: 2!important;
            }
            & .details {
              @media @pad-p {
                text-align: left!important;
              }
              @media @ipad-p {
                text-align: left!important;
              }
              @media @mobile-p {
                text-align: left!important;
              }
              & h2 {
                @media @pad-p {
                  padding: 0 0 0 0!important;
                }
                @media @ipad-p {
                  padding: 0 30% 0 0!important;
                }
                @media @mobile-p {
                  padding: 0 0 0 0!important;
                }
              }
              & .info {
                @media @pad-p {
                  padding: 0 0 0 0!important;
                  justify-content: flex-start!important;
                }
                @media @ipad-p {
                  padding: 0 30% 0 0!important;
                  justify-content: flex-start!important;
                }
                @media @mobile-p {
                  padding: 0 0 0 0!important;
                  justify-content: flex-start!important;
                }
                & i {
                  @media @pad-p {
                    order: 1!important;
                  }
                  @media @ipad-p {
                    order: 1!important;
                  }
                  @media @mobile-p {
                    order: 1!important;
                  }
                }
                & span, & a {
                  @media @pad-p {
                    order: 2!important;
                  }
                  @media @ipad-p {
                    order: 2!important;
                  }
                  @media @mobile-p {
                    order: 2!important;
                  }
                }
              }
            }
          }
        }
        &:nth-child(even) {
          & .left {
            @media @pad-p {
              order: 2!important;
            }
            @media @ipad-p {
              order: 2!important;
            }
            @media @mobile-p {
              order: 2!important;
            }
          }
          & .right {
            @media @pad-p {
              order: 1!important;
            }
            @media @ipad-p {
              order: 1!important;
            }
            @media @mobile-p {
              order: 1!important;
            }
            & .medysbutton {
              @media @pad-p {
                left: auto!important;
                right: 20px!important;
              }
              @media @ipad-p {
                left: auto!important;
                right: 20px!important;
              }
              @media @mobile-p {
                left: auto!important;
                right: 20px!important;
              }
            }
            & .details {
              @media @pad-p {
                text-align: right!important;
              }
              @media @ipad-p {
                text-align: right!important;
              }
              @media @mobile-p {
                text-align: right!important;
              }
              & h2 {
                @media @pad-p {
                  padding: 0 0 0 0!important;
                }
                @media @ipad-p {
                  padding: 0 0 0 30%!important;
                }
                @media @mobile-p {
                  padding: 0 0 0 0!important;
                }
              }
              & .info {
                @media @pad-p {
                  padding: 0 0 0 0!important;
                  justify-content: flex-end!important;
                }
                @media @ipad-p {
                  padding: 0 0 0 30%!important;
                  justify-content: flex-end!important;
                }
                @media @mobile-p {
                  padding: 0 0 0 0!important;
                  justify-content: flex-end!important;
                }
                & i {
                  @media @pad-p {
                    order: 2;
                  }
                  @media @ipad-p {
                    order: 2;
                  }
                  @media @mobile-p {
                    order: 2;
                  }
                }
                & span, & a {
                  @media @pad-p {
                    order: 1;
                  }
                  @media @ipad-p {
                    order: 1;
                  }
                  @media @mobile-p {
                    order: 1;
                  }
                }
              }
            }
          }
        }

        & .left {
          flex: 0 0 50%;
          background: black;
          position: relative;
          overflow: hidden;
          & img {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            .transition(all 0.3s ease);
            .origin(50%,50%);
          }

        }

        & .right {
          flex: 0 0 50%;
          padding: 30px;
          position: relative;
          overflow: hidden;
          @media @pad-p {
            padding: 20px;
          }
          @media @ipad {
            padding: 20px;
          }
          @media @mobile-p {
            padding: 20px 10px;
          }

          & h2 {
            .title(900);
            font-size: 35px;
            line-height: 35px;
            color: @blue;
            margin: 0 0 20px 0;
            padding: 0 30% 0 0;
            @media @laptop {
              font-size: 28px;
              line-height: 28px;
            }
            @media @pad-p {
              font-size: 21px;
              line-height: 21px;
              padding-right: 15px;
              margin-bottom: 10px;
            }
            @media @ipad {
              font-size: 25px;
              line-height: 25px;
              padding-right: 15px;
              margin-bottom: 10px;
            }
            @media @mobile-p {
              font-size: 20px;
              line-height: 20px;
              padding-right: 15px;
              margin-bottom: 10px;
            }
          }

          & .medysbutton {
            .medysButton(@textcolor1: black, @textcolor2: @blue, @radius: 22px, @border: black, @fontweight: 900, @fontsize: 19px, @arrow: @blue, @borderhover: black, @arrowhover: @blue);
            position: absolute;
            bottom: 20px;
            right: 20px;
            .transition(all 0.3s ease);
            .translate(0,100px,0);
            @media @laptop {
              .medysButton(@textcolor1: black, @textcolor2: @blue, @radius: 18px, @border: black, @fontweight: 900, @fontsize: 16px, @arrow: @blue, @borderhover: black, @arrowhover: @blue);
              position: absolute;
            }
            @media @pad-p {
              .medysButton(@textcolor1: black, @textcolor2: @blue, @radius: 16px, @border: black, @fontweight: 900, @fontsize: 15px, @arrow: @blue, @borderhover: black, @arrowhover: @blue);
              position: absolute;
              .translate(0,0,0);
              left: 20px!important;
              right: auto!important;
            }
            @media @ipad {
              .medysButton(@textcolor1: black, @textcolor2: @blue, @radius: 16px, @border: black, @fontweight: 900, @fontsize: 15px, @arrow: @blue, @borderhover: black, @arrowhover: @blue);
              position: absolute;
              .translate(0,0,0);
              left: 20px!important;
              right: auto!important;
            }
          }

          & .info {
            display: flex;
            align-items: flex-start;
            justify-content: flex-start;
            gap: 10px;
            padding: 0 30% 0 0;
            margin-bottom: 5px;
            font-size: 16px;
            @media @laptop {
              font-size: 15px;
            }
            @media @pad-p {
              font-size: 14px;
            }
            @media @ipad-l {
              font-size: 15px;
              padding: 0;
              margin-bottom: 0;
            }
            @media @mobile-p {
              font-size: 14px;
            }

            & i {
              .translate(0,5px,0);
              @media @pad-p {
                .translate(0,3px,0);
              }
              @media @ipad {
                .translate(0,5px,0);
              }
              @media @mobile-p {
                .translate(0,3px,0);
              }
            }

            & a {
              color: @blue;
              text-decoration: none;
            }
          }
        }
      }
    }

    & .competition-gallery {
      background: white;

      & h1 {
        text-align: center;
        .font;
        font-size: 35px;
        color: @blue;
        padding: 50px 20%;
        margin: 0;
        @media @laptop {
          font-size: 30px;
          padding: 40px 20%;
        }
        @media @pad-p {
          font-size: 23px;
          padding: 30px 30px 10px;
        }
        @media @ipad {
          font-size: 25px;
          padding: 40px 40px 40px;
        }
        @media @mobile-p {
          font-size: 23px;
          padding: 30px 40px 30px;
        }
      }
    }

    & .competition-sponsors {
      background: white;

      & h1 {
        text-align: center;
        .font;
        font-size: 35px;
        color: @blue;
        padding: 50px 20% 20px;
        margin: 0;
        @media @laptop {
          font-size: 30px;
          padding: 40px 20% 20px;
        }
        @media @pad-p {
          font-size: 23px;
          padding: 30px 30px 10px;
        }
        @media @ipad {
          font-size: 25px;
          padding: 40px 40px 20px;
        }
        @media @mobile-p {
          font-size: 23px;
          padding: 30px 40px 10px;
        }
      }

      & .sponsors {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 20px;
        overflow: visible;
        padding: 30px 0;
        height: auto!important;
        @media @pad-p {
          gap: 10px;
          padding: 20px 0;
        }
        @media @ipad {
          padding: 20px 0;
          gap: 20px;
        }
        @media @mobile-p {
          gap: 10px;
          padding: 20px 0;
        }

        & > a {
          flex: 0 0 250px;
          height: 250px;
          position: relative;
          border: thin solid @grey;
          .radius(4px);
          padding: 20px;
          .transition;
          @media @laptop {
            flex: 0 0 200px;
            height: 200px;
          }
          @media @pad-p {
            flex: 0 0 180px;
            height: 180px;
            padding: 10px;
          }
          @media @ipad {
            flex: 0 0 180px;
            height: 180px;
            padding: 10px;
          }
          @media @mobile-p {
            flex: 0 0 180px;
            height: 180px;
            padding: 10px;
          }

          &:hover {
            border: thin solid black;
            & span {
              color: black;
            }
          }

          & span {
            position: absolute;
            background: white;
            bottom: 0;
            left: 50%;
            .translate(-50%, 50%, 0);
            padding: 0 10px;
            font-size: 13px;
            color: @grey;
            white-space: nowrap;
            .title(700);
            .transition;

            & i {
              padding-right: 5px;
            }
          }

          & img {
            width: 100%;
            height: 100%;
            object-fit: contain;
          }
        }

      }
    }

    & .competition-categories {
      background: white;

      & .competition-category {
        display: flex;
        align-items: stretch;
        @media @ipad-p {
          flex-wrap: wrap;
        }
        @media @pad-p {
          flex-wrap: wrap;
        }
        @media @mobile-p {
          flex-wrap: wrap;
        }

        & .title {
          flex: 1;
          height: 300px;
          background: @blue;
          @media @laptop {
            height: 250px;
          }
          @media @ipad {
            height: 180px;
          }
          @media @ipad-p {
            flex: 0 0 100%;
            order: -1;
            height: auto;
            text-align: left!important;
          }
          @media @pad-p {
            flex: 0 0 100%;
            order: -1;
            height: auto;
            text-align: left!important;
          }
          @media @mobile-p {
            flex: 0 0 100%;
            order: -1;
            height: auto;
            text-align: left!important;
          }

          & .name {
            color: white;
            .title(900);
            font-size: 45px;
            padding: 30px;
            @media @laptop {
              font-size: 32px;
            }
            @media @ipad {
              font-size: 26px;
              padding: 20px;
            }
            @media @ipad-p {
              padding: 30px 30px 20px;
            }
            @media @pad-p {
              padding: 30px 30px 20px;
            }
            @media @mobile-p {
              padding: 30px 30px 20px;
            }
          }

          &.right {
            text-align: right;
          }
        }

        & .award {
          flex: 1;
          overflow: hidden;
          position: relative;
          cursor: pointer;
          @media @pad-p {
            .keepBox;
            flex: 0 0 50%;
          }
          @media @ipad-p {
            .keepBox;
            flex: 0 0 33.33333%;
          }
          @media @mobile-p {
            .keepBox;
            flex: 0 0 100%;
          }

          &:hover {
            & img {
              .scale(1.1);
            }
          }

          & img {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center top;
            .transition(all 0.3s ease);
          }
          
          & .inner {
            position: absolute;
            text-align: center;
            width: 100%;
            color: white;
            top: 50%;
            padding: 0 10px;
            .title(900);
            font-size: 22px;
            line-height: 22px;
            text-shadow: 0 0 3px black;
            .translate(0,-50%,0);
            @media @laptop {
              font-size: 20px;
              line-height: 20px;
            }
            @media @pad-p {
              font-size: 18px;
              line-height: 18px;
            }
            @media @ipad-l {
              font-size: 18px;
              line-height: 18px;
            }
            @media @mobile-p {
              font-size: 25px;
              line-height: 25px;
            }

            & i {
              font-weight: normal;
              display: inline-block;
              margin-top: 5px;
            }
          }
        }
      }
    }
  }

  & .newsletter {
    height: 90vh;
    position: relative;
    background: white;
    @media print {
      display: none;
    }
    @media @pad-p {
      height: 100vh;
      padding-bottom: 40px;
    }
    @media @pad-l {
      height: auto;
    }
    @media @ipad {
      height: 70vh;
    }
    @media @ipad-l {
      height: 80vh;
    }
    @media @mobile-p {
      height: auto;
      padding-bottom: 40px;
    }

    &.aminaready {
      background: white;
      & #mc_embed_shell {
        & #mc_embed_signup {
          & form {
            & #mc_embed_signup_scroll {
              & .left-col {
                & h2 {
                  opacity: 1;
                  .translate(0,0,0);
                }
              }
            }
          }
        }
      }
    }

    & #mc_embed_shell {
      & #mc_embed_signup {
        & form {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          margin: 0;
          @media @pad-l {
            position: static;
            height: auto;
            padding: 40px 0;
          }
          @media @ipad {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            padding: 0;
          }
          @media @mobile-p {
            position: static;
          }

          & #mc_embed_signup_scroll {
            display: grid;
            grid-template-columns: 1fr 1fr;
            height: 100%;
            @media @pad-p {
              grid-template-columns: 1fr;
            }
            @media @pad-l {
              grid-template-columns: 2fr 3fr;
            }
            @media @ipad {
              grid-template-columns: 1fr 1fr;
            }
            @media @mobile-p {
              grid-template-columns: 1fr;
            }

            & .indicates-required {
              display: none;
            }

            & .left-col {
              // grid-row-start: 1;
              // grid-row-end: 6;
              display: flex;
              align-items: center;
              justify-content: flex-end;
              padding-right: 40px;
              padding-left: 30%;
              @media @laptop {
                padding-left: 50%;
              }
              @media @pad-p {
                padding: 20px;
                justify-content: center;
              }
              @media @ipad {
                padding-left: 30%;
                justify-content: flex-end;
              }
              @media @mobile-p {
                padding: 20px;
                justify-content: center;
              }

              & h2 {
                .title(700);
                font-size: 107px;
                color: @blue;
                text-align: right;
                line-height: 86px;
                display: flex;
                align-items: center;
                .transition(all 0.5s ease 0.7s);
                opacity: 0;
                .translate(-100px,0,0);
                @media @laptop {
                  font-size: 80px;
                  line-height: 80px;
                }
                @media @pad-p {
                  font-size: 55px;
                  line-height: 55px;
                  text-align: center;
                }
                @media @pad-l {
                  font-size: 55px;
                  line-height: 55px;
                }
                @media @ipad {
                  font-size: 65px;
                  line-height: 59px;
                  text-align: right;
                }
                @media @mobile-p {
                  font-size: 55px;
                  line-height: 55px;
                  text-align: center;
                }
              }
            }

            & .intro {
              display: flex;
              align-items: center;
              @media @pad-p {
                padding: 0 40px;
              }
              @media @mobile-p {
                display: block;
                padding: 0 40px;
              }

              & h2 {
                .font(400);
                color: grey;
                font-size: 40px;
                margin: 0 0 20px;
                @media @laptop {
                  font-size: 30px;
                  margin: 0 0 13px;
                }
                @media @pad {
                  font-size: 23px;
                }
                @media @ipad {
                  font-size: 25px;
                  margin: 0 0 10px;
                }
                @media @mobile-p {
                  font-size: 23px;
                }
              }
              & p {
                font-size: 19px;
                line-height: 24px;
                .font;
                margin: 0;
                padding-right: 20%;
                margin: 0;
                @media @laptop {
                  font-size: 17px;
                  line-height: 22px;
                }
                @media @pad {
                  font-size: 16px;
                  line-height: 21px;
                  padding-right: 0;
                }
                @media @ipad {
                  font-size: 15px;
                  line-height: 19px;
                }
                @media @mobile-p {
                  font-size: 16px;
                  line-height: 21px;
                  padding-right: 0;
                }
              }

              & .mce_inline_error {
                color: @red;
                .font;
                font-size: 16px;
              }

              & .content__gdpr {
                & label {
                  .font(400);
                  color: grey;
                  font-size: 23px;
                  margin: 20px 0 6px;
                  @media @laptop {
                    font-size: 20px;
                  }
                  @media @ipad {
                    font-size: 18px;
                  }

                  &.checkbox {
                    font-size: 17px;
                    color: black;
                    margin: 10px 0 10px;
                  }
                }
              }
              & .clear {
                clear: both;
              }
              & .button-area {
                margin-top: 25px;
                height: auto;

                & .button {
                  .title(700);
                  height: auto;
                  line-height: 20px;
                  padding: 17px;
                  font-size: 20px;
                  @media @laptop {
                    font-size: 18px;
                    padding: 12px;
                  }
                }
              }
              & #mce-responses {
                clear: none;
                float: none;
                overflow: visible;
                height: auto;
                margin: 0;
                padding: 0;

                & .response {
                  float: none;
                  text-align: right;
                  .font;
                  color: @green;
                  font-size: 17px;
                  margin: 10px 0 20px;
                  padding: 0;
                  width: 100%;
                  text-align: left;
                }

              }
              & .mc-field-group {
                margin: 0;
                padding: 0;

                & p {
                  font-size: 17px;
                  line-height: 22px;
                  .font;
                  margin: 0;
                  padding-right: 20%;
                  margin: 0;
                  @media @laptop {
                    font-size: 15px;
                    line-height: 21px;
                  }
                  @media @pad {
                    font-size: 14px;
                    line-height: 19px;
                    padding-right: 0;
                  }
                  @media @ipad {
                    font-size: 14px;
                    line-height: 19px;
                  }
                  @media @mobile-p {
                    padding-right: 0;
                  }
                }

                & input[type="email"] {
                  width: 70%;
                  margin-top: 20px;
                }
              }
            }

          }

        }
      }
    }
  }

  & .medys-map {
    position: relative;
    overflow: hidden;
    height: 0;
    background: #2292c0;
    .transition(all 0.5s ease 0.5s);
    @media print {
      display: none;
    }
    // margin-top: 100px;

    & #map {
      height: 100%;
    }

    &.active {
      height: 100vh;
      @media @laptop {
        height: 80vh;
      }
      @media @pad-l {
        height: 80vh;
      }
      @media @ipad {
        height: 60vh;
      }
    }

    &.aminaready {
      & .directions {
        & h2 {
          .transition(all 0.4s ease 0.3s);
          opacity: 1;
          .translate(0,0,0);
        }
        & form {
          input[type="text"] {
            .transition(all 0.4s ease 0.5s);
            opacity: 1;
            .translate(0,0,0);
          }
          input[type="submit"] {
            .transition(all 0.4s ease 0.7s);
            opacity: 1;
            .translate(0,0,0);
          }
        }
      }
    }

    & .directions {
      position: absolute;
      top: 50px;
      left: 50px;
      display: none;

      & h2 {
        .title(700);
        font-size: 30px;
        letter-spacing: 1px;
        color: white;
        margin: 0 0 15px;
        .transition(all 0.4s ease);
        opacity: 0;
        .translate(-100px,0,0);
      }

      & form {
        & input {
          display: block;
        }
        input[type="text"] {
          .font;
          font-size: 16px;
          border: none;
          background: white;
          padding: 8px 12px;
          .radius(5px);
          margin-bottom: 15px;
          width: 330px;
          .transition(all 0.4s ease);
          opacity: 0;
          .translate(-100px,0,0);
        }
        input[type="submit"] {
          .title;
          font-size: 18px;
          letter-spacing: 1px;
          border: none;
          background: #093c79;
          padding: 8px 15px;
          .radius(5px);
          color: white;
          cursor: pointer;
          .transition;
          .transition(all 0.4s ease);
          opacity: 0;
          .translate(-100px,0,0);
          &:hover {
            background: black;
          }
        }
      }
    }
  }

  & .news-footer {
    height: 400px;
    background: white;
    overflow: hidden;
    @media print {
      display: none;
    }
    @media @laptop {
      height: 360px;
    }
    @media @pad-p {
      height: 610px;
    }
    @media @ipad {
      height: 360px;
    }
    @media @mobile-p {
      height: 610px;
    }

    & .latest-news {
      height: 100%;
      display: flex;
      align-items: stretch;
      gap: 20px;
      padding-right: 20px;
      @media @pad-p {
        flex-wrap: wrap;
        padding: 0;
        gap: 0;
      }
      @media @ipad {
        flex-wrap: nowrap;
        gap: 20px;
      }
      @media @mobile-p {
        flex-wrap: wrap;
        padding: 0;
        gap: 0;
      }

      & .mod-title {
        .title(700);
        color: @paleblue;
        font-size: 60px;
        flex: 0 0 30vw;
        text-align: right;
        border-right: thin solid black;
        padding: 20px 37px 0 0;
        background: black;
        @media @laptop {
          font-size: 53px;
        }
        @media @pad-p {
          flex: 0 0 100vw;
          text-align: center;
          font-size: 55px;
          line-height: 55px;
          padding: 50px 0 40px;
        }
        @media @ipad {
          flex: 0 0 30vw;
          line-height: 44px;
          font-size: 44px;
        }
        @media @mobile-p {
          flex: 0 0 100vw;
          text-align: center;
          font-size: 50px;
          line-height: 50px;
          padding: 40px 0 30px;
        }
        @media @mobile-l {
          font-size: 40px;
          line-height: 40px;
          flex: 0 0 180px;
        }
      }

      & .items {
        width: 100%;
        height: 100%;
        position: relative;
        overflow: hidden;

        & .news-item {
          position: absolute;
          top: 100%;
          left: 0;
          width: 100%;
          display: flex;
          gap: 20px;
          background: white;
          .transition(top 0.3s ease);
          align-items: center;
          @media @pad-p {
            flex-wrap: wrap;
            justify-content: center;
            gap: 0;
          }
          @media @ipad {
            flex-wrap: nowrap;
            justify-content: flex-start;
            gap: 20px;
            align-items: flex-start;
          }
          @media @mobile-p {
            .transition(left 0.3s ease);
            flex-wrap: wrap;
            justify-content: center;
            gap: 0;
            top: 0;
            left: 100vw;
          }
          @media @mobile-l {
            align-items: flex-start;
          }

          &.active {
            top: 0;
            .transition(top 0.5s ease 0.3s);
            @media @mobile-p {
              .transition(left 0.5s ease 0.3s);
              left: 0;
            }
          }

          & img {
            flex: 0 0 230px;
            height: 230px;
            object-fit: contain;
            @media @laptop {
              flex: 0 0 200px;
              height: 200px;
            }
            @media @pad-p {
              flex: 0 0 180px;
              height: 180px;
            }
            @media @ipad {
              flex: 0 0 180px;
              height: 180px;
            }
            @media @mobile-p {
              flex: 0 0 180px;
              height: 180px;
            }
            @media @mobile-l {
              flex: 0 0 150px;
              height: 150px;
            }
          }

          & .details {
            padding-left: 20px;
            @media @pad-p {
              padding: 0;
            }
            @media @ipad {
              padding-left: 20px;
            }
            @media @mobile-p {
              padding: 0;
            }

            & div.title {
              color: @blue;
              .font(700);
              font-size: 30px;
              margin: 20px 0 18px;
              width: 60%;
              line-height: 37px;
              @media @laptop {
                font-size: 26px;
                margin: 30px 0 18px;
                line-height: 31px;
              }
              @media @pad-p {
                text-align: center;
                font-size: 21px;
                line-height: 25px;
                width: 100vw;
                margin: 0;
                padding: 0 20px 30px;
              }
              @media @ipad {
                font-size: 21px;
                margin: 18px 0 11px;
                line-height: 26px;
                width: 90%;
                text-align: left;
                padding-left: 0;
                padding-bottom: 0;
              }
              @media @mobile-p {
                text-align: center;
                font-size: 21px;
                line-height: 25px;
                width: 100vw;
                margin: 0;
                padding: 0 20px 30px;
              }
              @media @mobile-l {
                font-size: 19px;
                line-height: 23px;
                width: 100%;
                padding-right: 20px;
                margin: 20px 0 7px;
              }
            }

            & div.intro {
              .font(400);
              font-size: 18px;
              line-height: 26px;
              width: 80%;
              @media @laptop {
                font-size: 16px;
                line-height: 23px;
              }
              @media @pad-p {
                width: 100%;
                padding: 0 20px 0;
                font-size: 15px;
                line-height: 22px;
              }
              @media @ipad {
                font-size: 14px;
                line-height: 20px;
                width: 90%;
                padding: 0;
              }
              @media @mobile-p {
                width: 100%;
                padding: 0 20px 0;
                font-size: 15px;
                line-height: 22px;
              }
              @media @mobile-l {
                width: 100%;
                padding-right: 20px;
              }
            }

            & .medysbutton {
              .medysButton(@textcolor1: @blue, @textcolor2: black, @radius: 22px, @border: grey, @fontweight: 700, @fontsize: 17px, @arrow: @blue, @borderhover: black, @arrowhover: @blue);
              display: inline-block;
              margin-top: 20px;
              @media @laptop {
                .medysButton(@textcolor1: @blue, @textcolor2: black, @radius: 20px, @border: grey, @fontweight: 700, @fontsize: 16px, @arrow: @blue, @borderhover: black, @arrowhover: @blue);
                display: inline-block;
                margin-top: 20px;
              }
              @media @pad-p {
                margin: 20px auto;
                display: block;
                width: 40%;
              }
              @media @ipad {
                .medysButton(@textcolor1: @blue, @textcolor2: black, @radius: 18px, @border: grey, @fontweight: 700, @fontsize: 14px, @arrow: @blue, @borderhover: black, @arrowhover: @blue);
                display: inline-block;
                margin-top: 20px;
              }
              @media @mobile-p {
                margin: 20px auto;
                display: block;
                width: 40%;
              }
            }
          }

        }
      }
    }
    
  }

  & .nafplion-home {
    text-decoration: none;
    // padding: 40px 0;
    display: flex;
    gap: 40px;
    padding: 40px;
    align-items: center;
    background: url(images/logistics.jpg) center center no-repeat;
    background-size: 100% auto;
    background-attachment: fixed;
    @media print {
      display: none;
    }
    @media @ipad {
      gap: 30px;
      background-attachment: scroll;
      padding: 40px;
      background-size: auto 100%;
      background-attachment: fixed;
      flex-wrap: nowrap;
    }
    @media @pad-p {
      flex-wrap: wrap;
      background-size: auto 100%;
      background-attachment: fixed;
      gap: 0;
      padding: 0;
    }
    @media @pad-l {
      flex-wrap: wrap;
      background-size: 100% auto;
      background-attachment: fixed;
      gap: 0;
      padding: 0;
    }
    @media @mobile-p {
      flex-wrap: wrap;
      background-size: auto 100%;
      background-attachment: fixed;
      gap: 0;
      padding: 0;
    }
    @media @mobile-l {
      flex-wrap: wrap;
      background-size: 100% auto;
      background-attachment: fixed;
      gap: 0;
      padding: 0;
    }

    & h1 {
      width: 100%;
      .title(700);
      text-align: right;
      color: white;
      font-size: 65px;
      margin: 0;
      padding-right: 40px;
      text-shadow: 0 0 3px black;
      @media @laptop {
        font-size: 55px;
      }
      @media @pad-p {
        text-align: center;
        padding: 0;
        font-size: 55px;
        line-height: 55px;
        margin-bottom: 40px;
        margin-top: 50px;
        flex: 0 0 100%;
      }
      @media @ipad {
        font-size: 40px;
        line-height: 40px;
        text-align: right;
        padding-right: 40px;
        margin: 0;
        flex: 1;
      }
      @media @mobile-p {
        text-align: center;
        padding: 0;
        font-size: 55px;
        line-height: 55px;
        margin-bottom: 40px;
        margin-top: 50px;
        flex: 0 0 100%;
      }
      @media @mobile-l {
        text-align: center;
        padding: 0;
        font-size: 55px;
        line-height: 55px;
        margin-bottom: 40px;
        margin-top: 50px;
        flex: 0 0 100%;
      }
    }

    &.aminaready {
      & .logistics {
        opacity: 1;
        .transition(opacity 0.5s ease 0.5s);
        &.item2 {
          .transition(opacity 0.5s ease 0.7s);
        }
        &.item3 {
          .transition(opacity 0.5s ease 0.9s);
        }
      }
    }

    & .logistics {
      color: white;
      .title(700);
      font-size: 26px;
      background: #97C6E6;
      position: relative;
      display: block;
      padding: 20px;
      text-decoration: none;
      .radius(8px);
      flex: 0 0 170px;
      height: 170px;
      @media @laptop {
        font-size: 24px;
        line-height: 25px;
        padding: 18px;
        flex: 0 0 160px;
        height: 160px;
      }
      @media @pad-p {
        .radius(0);
        flex: 0 1 33.3333%;
      }
      @media @pad-l {
        .radius(0);
      }
      @media @ipad {
        font-size: 20px;
        line-height: 22px;
        padding: 14px;
        flex: 0 0 140px;
        height: 138px;
      }
      @media @mobile-p {
        .radius(0);
        flex: 0 1 33.3333%;
      }
      @media @mobile-l {
        .radius(0);
        flex: 0 1 33.3333%;
      }

      &:hover {
        background: black!important;

        & i {
          color: #5594C8!important;
          opacity: 1;
        }
      }

      & i {
        font-size: 50px;
        font-weight: 100;
        position: absolute;
        right: 20px;
        bottom: 20px;
        opacity: 0.2;
        @media @laptop {
          font-size: 42px;
        }
      }

      &.item2 {
        background: #5594C8;
        .transition(opacity 0.5s ease);
      }
      &.item3 {
        background: #024D6F;
        .transition(opacity 0.5s ease);
      }
    }
  }

  & .sponsors {
    display: flex;
    align-items: center;
    height: 200px;
    overflow: hidden;
    gap: 20px;
    padding: 0 20px;
    background: white;
    @media print {
      display: none;
    }
    @media @laptop {
      gap: 30px;
      padding: 0 30px;
    }
    @media @pad-p {
      flex-wrap: wrap;
      gap: 0;
      padding: 0;
      height: auto;
    }
    @media @ipad {
      gap: 10px;
      padding: 0 10px;
      flex-wrap: nowrap;
      gap: 20px;
      padding: 0 20px;
      height: 200px;
    }
    @media @mobile-p {
      flex-wrap: wrap;
      gap: 0;
      padding: 0;
      height: auto;
    }
    @media @mobile-l {
      flex-wrap: wrap;
      gap: 0;
      padding: 0;
      height: auto;
    }

    & .sponsor-category {
      flex: 1;
      position: relative;
      height: 100%;
      @media @pad-p {
        flex: 0 1 33.3333%;
        height: 180px;
      }
      @media @ipad {
        flex: 1;
        height: 100%;
      }
      @media @mobile-p {
        flex: 0 1 50%;
        height: 180px;
      }
      @media @mobile-l {
        flex: 0 1 33.3333333%;
        height: 180px;
      }

      & .title {
        position: absolute;
        left: 0;
        bottom: 0;
        text-align: center;
        width: 100%;
        .title(300);
        color: black;
        font-size: 15px;
        border-top: thin solid grey;
        padding: 10px 0;
        @media @ipad {
          font-weight: 600;
          color: grey;
          font-size: 13px;
          min-height: 55px;
        }
      }

      & .items {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;

        & .sponsor {
          position: absolute;
          top: 30px;
          bottom: 50px;
          left: 30px;
          right: 30px;
          .scale(0,1);
          .transition(all 0.3s ease);
          @media @ipad {
            top: 10px;
            bottom: 30px;
            left: 10px;
            right: 10px;
          }

          &.active {
            .scale(1,1);
            .transition(all 0.5s ease 0.3s);
          }

          & img {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: contain;
          }
        }

      }
    }
  }
}

& footer {
  display: flex;
  background: #0f1137;
  color: white;
  @media print {
    display: none;
  }
  @media @pad-p {
    flex-wrap: wrap;
  }
  @media @ipad {
    flex-wrap: wrap;
  }
  @media @mobile-p {
    flex-wrap: wrap;
  }
  @media @mobile-l {
    flex-wrap: wrap;
  }

  & .col {
    flex: 1;
    padding: 40px 20px;
    margin-bottom: 40px;
    @media @ipad {
      margin-bottom: 0;
      padding: 40px 20px;
    }

    & h2 {
      .title(700);
      font-size: 30px;
      color: @paleblue;
      margin: 0;
      @media @laptop {
        font-size: 26px;
      }
      @media @ipad {
        font-size: 23px;
        margin-bottom: 10px;
      }
    }

    & a.gya {
      .title(700);
      font-size: 30px;
      color: @paleblue;
      margin: 0;
      text-decoration: none;
      display: block;
      .transition;
      @media @laptop {
        font-size: 26px;
      }
      @media @pad-p {
        font-size: 35px;
        margin-bottom: 30px;
      }
      @media @ipad {
        font-size: 23px;
        margin-bottom: 10px;
      }
      @media @mobile-p {
        font-size: 35px;
        margin-bottom: 30px;
      }
      @media @mobile-l {
        font-size: 35px;
        margin-bottom: 30px;
      }

      &:hover {
        color: white;
      }
    }

    & a {
      & span {
        @media @laptop {
          font-size: 15px;
        }
        @media @ipad {
          font-size: 13px;
        }
      }
    }

    & p {
      @media @laptop {
        font-size: 15px;
      }
      @media @ipad {
        font-size: 13px;
        margin: 10px 0 0;
      }
    }

    & .social {
      margin-top: 10px;

      & a {
        color: white;
        text-decoration: none;
        &:hover {
          & i {
            color: @paleblue;
          }
        }

        & i {
          font-size: 30px;
          .transition;
          @media @laptop {
            font-size: 25px;
          }
          @media @pad-p {
            font-size: 35px;
            padding: 0 5px;
          }
          @media @ipad {
            font-size: 25px;
            padding: 0;
          }
          @media @mobile-p {
            font-size: 35px;
            padding: 0 5px;
          }
          @media @mobile-l {
            font-size: 35px;
            padding: 0 5px;
          }
        }
      }

      & + h2 {
        margin-top: 20px; 
        margin-bottom: 20px;
      }
    }

    & h3 {
      .font(700);
      font-size: 25px;
      color: white;
      margin: 0;
      @media @laptop {
        font-size: 20px;
      }
      @media @pad-p {
        font-size: 25px;
      }
      @media @ipad {
        font-size: 18px;
      }
      @media @mobile-p {
        font-size: 25px;
      }
      @media @mobile-l {
        font-size: 25px;
      }
    }

    & img {
      max-width: 250px;
    }

    &.col1 {
      // background: black;
      text-align: right;
      padding: 40px;
      @media @pad-p {
        flex: 0 0 100%;
        padding: 60px 0 40px;
        text-align: center;
        margin: 0;
      }
      @media @ipad {
        flex: 0 0 100%;
        padding: 35px 10px 0px;
        text-align: center;
        margin-bottom: 0;
      }
      @media @mobile-p {
        flex: 0 0 100%;
        padding: 60px 0 40px;
        text-align: center;
        margin: 0;
      }
      @media @mobile-l {
        flex: 0 0 100%;
        padding: 60px 0 40px;
        text-align: center;
        margin: 0;
      }
      
      & img {
        width: 250px;
        height: auto;
        @media @laptop {
          width: 210px;
        }
        @media @pad-p {
          width: 240px;
        }
        @media @ipad {
          width: 210px;
        }
        @media @mobile-p {
          width: 240px;
        }
        @media @mobile-l {
          width: 240px;
        }
      }
    }
    
    &.col2 {
      @media @pad-p {
        flex: 0 0 100%;
        padding: 0;
        text-align: center;
      }
      @media @mobile-p {
        flex: 0 0 100%;
        padding: 0;
        text-align: center;
      }
      @media @mobile-l {
        flex: 0 0 100%;
        padding: 0;
        text-align: center;
      }

      & h2 {
        @media @pad-p {
          font-size: 55px;
          line-height: 55px;
          margin-bottom: 25px;
          margin-top: 20px;
        }
        @media @ipad {
          font-size: 32px;
          line-height: 32px;
          margin: 30px 0 10px;
        }
        @media @ipad-l {
          font-size: 23px;
          margin: 0 0 4px;
        }
        @media @mobile-p {
          font-size: 55px;
          line-height: 55px;
          margin-bottom: 25px;
          margin-top: 20px;
        }
        @media @mobile-l {
          font-size: 55px;
          line-height: 55px;
          margin-bottom: 25px;
          margin-top: 20px;
        }
      }
    }
    
    &.col3 {
      @media @pad-p {
        text-align: right;
        border-right: thin solid @paleblue;
      }
      @media @ipad {
        text-align: left;
        border: none;
      }
      @media @mobile-p {
        text-align: right;
        border-right: thin solid @paleblue;
      }
      @media @mobile-l {
        text-align: right;
        border-right: thin solid @paleblue;
        flex: 0 0 50vw;
      }

      & a {
        display: flex;
        color: white;
        text-decoration: none;
        gap: 10px;
        margin: 10px 0;
        @media @pad-p {
          justify-content: flex-end;
        }
        @media @ipad {
          margin: 10px 0 5px;
          justify-content: flex-start;
        }
        @media @mobile-p {
          justify-content: flex-end;
        }
        @media @mobile-l {
          justify-content: flex-end;
        }

        & i {
          @media @pad-p {
            order: 2;
          }
          @media @ipad {
            order: 1;
          }
          @media @mobile-p {
            order: 2;
          }
          @media @mobile-l {
            order: 2;
          }
        }
        & span {
          @media @pad-p {
            order: 1;
          }
          @media @ipad {
            order: 2;
          }
          @media @mobile-p {
            order: 1;
          }
          @media @mobile-l {
            order: 1;
          }
        }
      }
    }

    &.col4 {
      & img {
        margin-top: 10px;
        width: 170px;
        @media @laptop {
          width: 150px;
        }
        @media @ipad {
          width: 100px;
          margin-top: 0;
        }
        @media @mobile-l {
          flex: 0 0 50vw;
        }
      }
    }

    &.col5 {
      @media @pad-p {
        text-align: center;
        padding-top: 10px;
      }
      @media @ipad {
        text-align: left;
        padding-top: 40px;
      }
      @media @mobile-p {
        text-align: center;
        padding-top: 10px;
      }
      @media @mobile-l {
        text-align: center;
        padding-top: 10px;
      }

      & img {
        max-width: 130px;
      }
    }
  }

}

& div.credits {
  display: flex;
  padding: 20px;
  background: black;
  color: @grey;
  text-align: center;
  align-items: center;
  justify-content: center;
  .font;
  font-size: 15px;
  @media print {
    display: none;
  }
  @media @laptop {
    font-size: 13px;
    padding: 15px;
  }
  @media @ipad {
    font-size: 11px;
  }
}

& span.pop-up {
  color: @blue;
  text-decoration: underline;
}

& div.modalpopup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;

  & .modal-inner {
    background: @blue;
    color: white;
    .radius(8px);
    .shadow;
    width: 800px;
    height: 450px;
    padding: 20px;
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;

    & h1 {
      margin-bottom: 10px!important;
      font-size: 28px!important;
      color: @paleblue!important;
    }

    & .ri-close-line {
      position: absolute;
      top: 10px;
      right: 10px;
      cursor: pointer;
      font-size: 20px;
      .transition;
      &:hover {
        color: black;
      }
    }

    & .content {
      overflow-y: auto;
      .customBarThin;
      padding-right: 20px;
      font-family: 'Tinos', serif;
      text-align: left;
      font-size: 16px;
      line-height: 18px;

      & li {
        margin-bottom: 8px;
      }

      & p {
        padding-left: 20px;
        font-size: 16px;
        line-height: 18px;
        margin-bottom: 8px;
      }

      & h2 {
        font-family: 'Tinos', serif;
        color: @paleblue;
        padding-left: 20px;
        text-align: center;
        line-height: 21px;
        margin-top: 40px;
        font-size: 21px;
      }

      & h1 {
        color: @paleblue;
        font-family: 'Tinos', serif;
        font-weight: 700;
        font-size: 25px;
        line-height: 25px;
        text-align: center;
        margin: 35px 0 20px!important;
      }
    }
  }
}

& slideshow {
  display: block;
  width: 100vw;
  height: 100vh;
  position: relative;
  .noselect;
  overflow: hidden;

  & .slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    &.current {
      z-index: 900;

      & .image {
        .transition(opacity 0.5s ease);
        opacity: 1;
      }

      & .details {
        .transition(all 0.5s ease 0.5s);
        .translate(0,0,0);
        @media @pad-p {
          height: 40%;
        }
        @media @ipad-p {
          height: 30%;
        }
        @media @mobile-p {
          height: 40%;
        }
      }
    }

    & .image {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      .cover;
      .origin(50%,50%);
      animation: slide 30s linear infinite;
      opacity: 0;
      .transition(opacity 0.5s ease 0.5s);
      @media @pad-p {
        height: 60%;
        animation: none;
      }
      @media @ipad-p {
        height: 70%;
        animation: none;
      }
      @media @ipad-l {
        height: 100%;
      }
      @media @mobile-p {
        height: 60%;
        animation: none;
      }
    }

    & .details {
      position: absolute;
      left: 20px;
      bottom: 20px;
      // width: 100vw;
      background-color: rgba(0, 0, 0, 0.2);
      backdrop-filter: blur(5px); /* Adjust the blur radius as needed */
      background: linear-gradient(to bottom, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.6));
      // border-top: thin solid white;
      padding: 15px 25px;
      .radius(4px);
      text-align: center;
      .transition(all 0.5s ease);
      // z-index: 1000;
      .translate(-110%,0,0);
      @media @pad-p {
        background: white;
        backdrop-filter: none;
        bottom: auto;
        top: 60%;
        left: 0;
        width: 100%;
        height: 0;
        overflow: hidden;
        .translate(0,0,0);
        padding: 0;
      }
      @media @ipad-p {
        background: white;
        backdrop-filter: none;
        bottom: auto;
        top: 70%;
        left: 0;
        width: 100%;
        height: 0;
        overflow: hidden;
        .translate(0,0,0);
        padding: 0;
      }
      @media @mobile-p {
        background: white;
        backdrop-filter: none;
        bottom: auto;
        top: 60%;
        left: 0;
        width: 100%;
        height: 0;
        overflow: hidden;
        .translate(0,0,0);
        padding: 0;
      }

      &.active {
        .transition(all 0.3s ease 1s);
        .translate(0,0,0);
      }

      & .name {
        .title(700);
        color: @paleblue;
        font-size: 45px;
        white-space: nowrap;
        @media @laptop {
          font-size: 35px;
        }
        @media @pad-p {
          margin-top: 20px;
          font-size: 43px;
        }
        @media @ipad-p {
          margin-top: 30px;
          font-size: 45px;
        }
        @media @mobile-p {
          margin-top: 20px;
          font-size: 43px;
        }
      }

      & .url {
        .medysButton(white, white, 18px, white, 600, 15px, white, white, white);
        display: inline-block;
        margin: 10px auto;
        @media @laptop {
          .medysButton(white, white, 17px, white, 600, 14px, white, white, white);
          display: inline-block;
          margin: 10px auto;
        }
        @media @pad-p {
          .medysButton(black, @blue, 17px, black, 600, 14px, black, blue, white);
          display: inline-block;
          margin: 10px auto;
        }
        @media @ipad-p {
          .medysButton(black, @blue, 17px, black, 600, 14px, black, blue, white);
          display: inline-block;
          margin: 10px auto;
        }
        @media @mobile-p {
          .medysButton(black, @blue, 17px, black, 600, 14px, black, blue, white);
          display: inline-block;
          margin: 10px auto;
        }
      }

      & .detail {
        color: white;
        .title(600);
        font-size: 16px;
        line-height: 22px;
        @media @laptop {
          font-size: 15px;
          line-height: 20px;
        }
        @media @pad-p {
          color: black;
          font-size: 17px;
          line-height: 22px;
        }
        @media @ipad-p {
          color: black;
          font-size: 17px;
          line-height: 22px;
        }
        @media @mobile-p {
          color: black;
          font-size: 17px;
          line-height: 22px;
        }
      }
    }

  }

  & pauser {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 988;
    display: flex;
    align-items: center;
    justify-content: center;
    .alpha(70,0,0,0);

    & .resume {
      .medysButton(@arrow: white);
    }
  }

  & reorder {
    position: absolute;
    top: 50%;
    left: 50%;
    .translate(-50%,-50%,0);
    .title(400);
    letter-spacing: 2px;
    font-size: 16px;
    color: white;
    z-index: 950;
    padding: 10px 20px;
    background: #0000008a;
    border-radius: 6px;
  }

  & toolbar {
    position: absolute;
    white-space: nowrap;
    right: 20px;
    bottom: 20px;
    z-index: 989;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    background-color: rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(5px); /* Adjust the blur radius as needed */
    padding: 15px;
    .radius(8px);
    .transition(all 0.5s ease);
    .translate(0,80px,0);
    @media @pad-p {
      background: none;
      backdrop-filter: none;
      color: black;
      right: 50%;
      .translate(50%,80px,0);
    }
    @media @ipad-p {
      background: none;
      backdrop-filter: none;
      color: black;
      right: 50%;
      .translate(50%,80px,0);
    }
    @media @mobile-p {
      background: none;
      backdrop-filter: none;
      color: black;
      right: 50%;
      .translate(50%,80px,0);
    }
    
    &.active {
      .transition(all 0.5s ease 1s);
      .translate(0,0,0);
      @media @pad-p {
        .translate(50%,0,0);
      }
      @media @ipad-p {
        .translate(50%,0,0);
      }
      @media @mobile-p {
        .translate(50%,0,0);
      }
    }

    & span {
      .title;
      font-size: 13px;
      border: thin solid white;
      line-height: 27px;
      padding: 0 7px;
      letter-spacing: 1px;
      cursor: pointer;
      @media @pad-p {
        border: thin solid black;
        .title(700);
      }
      @media @ipad-p {
        border: thin solid black;
        .title(700);
      }
      @media @mobile-p {
        border: thin solid black;
        .title(700);
      }
    }

    & i {
      border: thin solid white;
      font-size: 14px;
      padding: 6px;
      cursor: pointer;
      @media @pad-p {
        border: thin solid black;
      }
      @media @ipad-p {
        border: thin solid black;
      }
      @media @mobile-p {
        border: thin solid black;
      }
    }
  }

  & intro {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    .origin(50%,50%);
    .transition(all 1.5s ease);

    &.hide {
      .scale(2.0);
      opacity: 0;
    }

    & .background-image {
      width: 100%;
      height: 100%;
      .blueGradientDuo;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 1;
    }

    & .text-mask {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -60%);
      z-index: 2;
      background-clip: padding-box;
      color: white;
      -webkit-background-clip: text!important;
      -webkit-text-fill-color: transparent;
      background-size: cover!important;
      .title(700);
      font-size: 300px;
      white-space: nowrap;
      background-repeat: no-repeat!important;
      background-position: center bottom!important;
      @media @laptop {
        font-size: 245px;
      }
      @media @pad-p {
        .title(900);
        font-size: 180px;
        line-height: 135px;
        width: 100%;
        word-wrap: break-word;
        /* overflow-wrap: break-word; */
        height: auto;
        white-space: inherit;
        text-align: center;
      }
      @media @ipad-p {
        font-size: 170px;
        line-height: 170px;
      }
      @media @mobile-p {
        .title(900);
        font-size: 150px;
        line-height: 115px;
        width: 100%;
        word-wrap: break-word;
        /* overflow-wrap: break-word; */
        height: auto;
        white-space: inherit;
        text-align: center;
      }
    }

    & .loading {
      position: absolute;
      z-index: 3;
      color: white;
      top: 50%;
      left: 50%;
      transform: translate(-50%, 140px);
      .title(400);
      letter-spacing: 2px;
      font-size: 16px;
      @media @pad-p {
        transform: translate(-50%, 125px);
      }
      @media @ipad-p {
        transform: translate(-50%, 180px);
      }
      @media @mobile-p {
        transform: translate(-50%, 107px);
      }
    }

    & .medysbutton {
      .medysButton(@textcolor1: white, @textcolor2: white, @radius: 25px, @border: white, @fontweight: 700, @fontsize: 20px, @arrow: @blue, @borderhover: white, @arrowhover: white);
      position: absolute;
      top: 68%;
      left: 50%;
      z-index: 2;
      .translate(-50%,0,0);
      @media @laptop {
        .medysButton(@textcolor1: white, @textcolor2: white, @radius: 22px, @border: white, @fontweight: 700, @fontsize: 18px, @arrow: @blue, @borderhover: white, @arrowhover: white);
        position: absolute;
        top: 66%;
      }
      @media @pad-p {
        .medysButton(@textcolor1: white, @textcolor2: white, @radius: 22px, @border: white, @fontweight: 700, @fontsize: 17px, @arrow: @blue, @borderhover: white, @arrowhover: white);
        position: absolute;
        top: 71%;
      }
      @media @ipad-p {
        top: 60%;
      }
      @media @mobile-p {
        .medysButton(@textcolor1: white, @textcolor2: white, @radius: 20px, @border: white, @fontweight: 700, @fontsize: 15px, @arrow: @blue, @borderhover: white, @arrowhover: white);
        position: absolute;
        top: 69%;
      }
    }
  }
}

& competitioncategories, & competitionsponsors, & gallery {
  border: thin solid @grey;
  .radius(8px);
  display: block;
  width: 100%;
  padding: 20px;
  position: relative;

  & .blocker {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    .alpha(50,255,255,255);
    display: flex;
    .system(700);
    font-size: 16px;
    align-items: center;
    justify-content: center;
  }

  & .title {
    .system(700);
    text-align: left;
    font-size: 17px;
    color: @blue;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 10px;

    & span, & .uploader {
      cursor: pointer;
      color: white;
      font-size: 12px;
      padding: 6px 10px;
      font-weight: 400;
      letter-spacing: 1px;
      border-radius: 4px;
      display: flex;
      align-items: center;
      gap: 5px;
      background: @blue;
      .transition;
      &:hover {
        background: black;
      }
    }

    & input[type="file"] {
      display: none;
    }

    & .progress {
      .system(400);
      color: @red;
      font-size: 13px;
    }
  }

  & .categories {
    & .category {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 10px;
      border: thin solid @grey;
      .radius(4px);
      padding: 10px;
      position: relative;

      & .name {
        flex: 0 0 160px;
        .system(700);
        font-size: 14px;
        letter-spacing: 1px;
        text-align: right;
        cursor: pointer;
        .transition;
        margin-right: 10px;
        &:hover {
          color: @blue;
        }
      }

      & .awards {
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        flex-wrap: wrap;
        gap: 10px;

        & .award {
          border: thin solid @grey;
          .radius(4px);
          padding: 10px;
          display: flex;
          align-items: center;
          gap: 10px;
          width: 400px;
          position: relative;
          overflow: hidden;

          & .order {
            position: absolute;
            z-index: 3;
            bottom: 10px;
            right: 10px;
            .system(400);
            font-size: 12px;

            & i {
              font-style: normal;
              cursor: pointer;
            }
          }

          & .busy {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            .alpha(70,255,255,255);
            display: flex;
            align-items: center;
            justify-content: center;
            .system(700);
            font-size: 16px;
            letter-spacing: 1px;
            cursor: not-allowed;
            z-index: 5;

            & span {
              animation: fadeInOut 0.5s linear infinite;
            }
          }

          & .remove {
            position: absolute;
            top: 10px;
            right: 10px;
            background: @grey;
            .system(400);
            font-size: 10px;
            padding: 5px;
            .radius(4px);
            color: white;
            cursor: pointer;
            .transition;
            z-index: 4;
            &:hover {
              background: @red;
            }
          }

          & .image {
            & > .label {
              display: none;
            }
            & .uploader-container {
              height: 90px;
              width: 150px;
              padding: 5px;
              .radius(4px);
            }
            & > i {
              display: none;
            }
          }

          & .details {
            font-size: 15px;
            & >div {
              .system(400);
              line-height: 19px;
              cursor: pointer;
              .transition;
              &:hover {
                color: @blue;
              }
            }
          }
        }
      }

      & .order-cat {
        position: absolute;
        top: 10px;
        right: 10px;
        display: flex;
        align-items: center;
        width: 61px;

        & div {
          height: 20px;
          flex: 0 0 20px;
          .radius(4px);
          .noselect;
          .system(700);
          text-align: center;
          font-size: 12px;
          line-height: 20px;
        }

        & i {
          height: 20px;
          flex: 0 0 20px;
          background: @grey;
          color: white;
          .radius(4px);
          cursor: pointer;
          .transition;
          text-align: center;
          font-size: 15px;
          line-height: 20px;
          &:hover {
            background: @blue;
          }
        }
      }

      & .add-award {
        height: 40px;
        flex: 0 0 40px;
        align-self: flex-end;
        background: @grey;
        color: white;
        .radius(4px);
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 17px;
        cursor: pointer;
        .transition;
        &:hover {
          background: @blue;
        }

        &.critical {
          background: @red;
          &:hover {
            background: black;
          }
        }
      }
    }
  }

  & .sponsors {
    margin-top: 20px;

    & .sponsor {
      width: 150px;
      height: 150px;
      position: relative;
      background: white;
      border: thin solid @grey;
      .radius(4px);
      padding: 5px;
      display: inline-block;
      margin-right: 10px;
      margin-bottom: 10px;
      position: relative;

      & img {
        width: 100%;
        height: 100%;
        object-fit: contain;
      }

      &:hover {
        & i {
          opacity: 1;
        }
      }

      & i {
        position: absolute;
        background: @red;
        color: white;
        width: 30px;
        height: 30px;
        line-height: 30px;
        .radius(15px);
        color: white;
        text-align: center;
        font-size: 17px;
        cursor: pointer;
        top: 5px;
        right: 5px;
        opacity: 0;
        .transition;
      }
    }
  }
}

& div.medys-registration-page {
  position: relative;
  width: 100vw;
  height: 100vh;
  background: white;
  @media @pad-p {
    height: auto;
  }
  @media @ipad {
    height: 100vh;
  }
  @media @mobile-p {
    height: auto;
  }

  & .leftpart {
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    height: 100%;
    overflow: hidden;
    @media @pad-p {
      position: relative;
      width: 100%;
      height: 270px;
    }
    @media @ipad-p {
      position: absolute;
      width: 35%;
      height: 100%;
    }
    @media @mobile-p {
      position: relative;
      width: 100%;
      height: 270px;
    }

    & .image {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      .cover;
      .origin(50%,50%);
      animation: slide 30s linear infinite;
    }

    & h1 {
      .title(900);
      color: white;
      font-size: 95px;
      position: absolute;
      width: 60%;
      top: 50%;
      right: 50px;
      .translate(0,-100%,0);
      text-align: right;
      text-shadow: 0 0 4px black;
      @media @laptop {
        font-size: 78px;
      }
      @media @pad-p {
        font-size: 50px;
        width: 100%;
        right: 0;
        top: 190px;
        line-height: 50px;
        text-align: center;
      }
      @media @ipad {
        font-size: 52px;
        width: 90%;
        right: 20px;
        top: 33%;
        line-height: 52px;
        text-align: right;
      }
      @media @mobile-p {
        font-size: 50px;
        width: 100%;
        right: 0;
        top: 190px;
        line-height: 50px;
        text-align: center;
      }
    }
  }

  & .registration-form {
    position: absolute;
    top: 0;
    left: 50%;
    width: 50%;
    height: 100%;
    display: flex;
    align-items: center;
    padding: 40px;
    @media @pad-p {
      position: relative;
      width: 100%;
      height: auto;
      left: 0;
    }
    @media @ipad-p {
      position: absolute;
      width: 65%;
      height: 100%;
      left: 35%;
    }
    @media @mobile-p {
      position: relative;
      width: 100%;
      height: auto;
      left: 0;
    }

    & .inner {
      width: 65%;
      @media @pad-p {
        width: 100%;
      }
      @media @ipad {
        width: 100%;
      }
      @media @mobile-p {
        width: 100%;
      }
    }

    & h1, & h2 {
      color: @blue;
      .title(600);
      font-size: 27px;
      margin: 0 0 16px;
      @media @laptop {
        font-size: 24px;
      }
      @media @pad-p {
        font-size: 22px;
      }
      @media @ipad {
        font-size: 22px;
      }
      @media @mobile-p {
        font-size: 22px;
      }
    }

    & h2 {
      margin: 30px 0 16px;
    }

    & .strength {

      & .strength-item {
        height: 6px;
        background: @red;
        flex: 1;
        border-radius: 3px;
        .transition(all 0.3s ease 0.2s);

        &.med {
          background: @energy;
        }

        &.strong {
          background: @green;
        }
      }
    }

    & p {
      .font(400);
      font-size: 17px;
      line-height: 22px;
      @media @laptop {
        font-size: 15px;
        line-height: 19px;
      }

      &.busy {
        .font(700);
        color: @red;
        font-size: 27px;
      }

      &.indicator {
        .font(700);
        color: @blue;
        font-size: 15px;
        line-height: 20px;
        font-style: italic;
        margin-bottom: 40px;
      }

      &.alert {
        color: @red;
      }
    }

    & .medysbutton {
      .medysButton(@textcolor1: black, @textcolor2: @blue, @radius: 20px, @border: black, @fontweight: 600, @fontsize: 19px, @arrow: @blue, @borderhover: @blue, @arrowhover: @blue);
      display: inline-block;
      margin-top: 17px;
      @media @laptop {
        .medysButton(@textcolor1: black, @textcolor2: @blue, @radius: 18px, @border: black, @fontweight: 600, @fontsize: 17px, @arrow: @blue, @borderhover: @blue, @arrowhover: @blue);
        display: inline-block;
        margin-top: 12px;
      }
    }

    & div.form {
      & div.control {
        border-bottom: thin solid @grey;
        padding-bottom: 3px;
        margin-bottom: 16px;

        & label {
          display: block;
          .title(600);
          font-size: 21px;
          letter-spacing: 0.5px;
          margin-bottom: 3px;
          @media @laptop {
            font-size: 19px;
          }
          @media @pad-p {
            font-size: 17px;
          }
          @media @ipad {
            font-size: 17px;
          }
          @media @mobile-p {
            font-size: 17px;
          }
        }

        & div.field {
          display: flex;
          align-items: center;

          & i {
            color: @red;
            margin-left: 10px;
          }

          & .error {
            color: @red;
            .font(400);
            white-space: nowrap;
            font-size: 13px;
            margin-left: 3px;
          }

          & stringinput, emailinput {
            display: flex;
            align-items: center;
            width: 100%;
          }

          & input, & select {
            background: none;
            border: none;
            width: 100%;
            display: block;
            .font(400);
            font-size: 17px;
            padding: 3px 0;
            @media @laptop {
              font-size: 15px;
            }

            &:focus {
              color: @blue;
            }
          }

        }
      }
    }
  }
}

// preloader
& div.api-loader {
  position: fixed;
  z-index: 10000000000000000;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

& dialog {
  border: none;
  .radius(4px);
  .shadow;
  max-width: 60vw;
  padding: 40px;

  &.payments {
    max-width: none;
    width: 60vw;
    & div.elements {
      & .element {
        padding: 5px 0;
        border-bottom: thin solid grey;

        & a {
          border: none;
          text-decoration: none;
          color: @blue;
        }

        & .action {
          color: red;
          cursor: pointer;
        }
      }
    }
  }

  &.info {
    padding-top: 20px;

    & div.elements {
      & .element {
        display: flex;
        align-items: center;
        text-decoration: none;
        color: grey;
        gap: 10px;

        &.header {
          background: grey;
          text-align: center!important;
          color: white;
          padding: 5px 0;
          & div {
            text-align: center!important;
          }
        }

        & div.date {
          flex: 0 0 90px;
        }
        & div.broker {
          flex: 0 0 210px;
        }
        & div.amount {
          flex: 0 0 90px;
          text-align: right;
        }
        & div.type {
          width: 100%;
        }

        &:focus {
          outline: none;
        }

        &:hover {
          & span {
            color: @blue;
          }
        }

        & span {
          .transition;
          color: black;
        }
      }
    }
  }

  & i.close-button {
    position: absolute;
    top: 5px;
    right: 5px;
    font-size: 20px;
    .transition;
    cursor: pointer;
    &:hover {
      color: @red;
    }
  }

  &:focus {
    outline: none;
  }

  & h2 {
    color: @blue;
    margin-top: 0;
    border-bottom: thin solid @blue;
    padding-bottom: 7px;
    margin-bottom: 8px;
    .title(600);
    font-size: 38px;
  }

  & div.msg {
    color: black;
    font-size: 16px;
    line-height: 22px;
    margin-bottom: 37px;

    & strong {
      color: @blue;
    }
  }

  & div.buttons {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;

    & button {
      border: none;
      background: @blue;
      color: white;
      .radius(4px);
      .title(600);
      font-size: 17px;
      letter-spacing: 1px;
      padding: 8px 19px;
      cursor: pointer;
      .transition;
      &:hover {
        background: black;
      }
      &:focus {
        outline: none;
        border: none;
      }

      &.cancel {
        background: @grey;
        color: black;
        &:hover {
          background: black;
          color: white;
        }
      }
    }
  }

}

& #cookie_darling {
  position: fixed;
  z-index: 999999999999;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  .alpha(50,0,0,0);
  padding: 25%;
  display: flex;
  align-items: center;
  justify-content: center;
  @media @pad-p {
    padding: 20px;
  }
  @media @pad-l {
    padding: 30px;
  }
  @media @mobile-p {
    padding: 20px;
  }

  & .inner {
    background: @blue;
    .radius(8px);
    text-align: center;
    @media @pad-l {
      width: 100%;
      display: grid;
      grid-template-rows: auto;
      grid-template-columns: 1fr 1fr;
      padding: 30px;
    }

    & h1 {
      .title(700);
      font-size: 50px;
      color: white;
      @media @pad-p {
        font-size: 45px;
        margin: 40px 0 20px;
      }
      @media @pad-l {
        grid-column-start: 1;
        grid-column-end: 2;
        grid-row-start: 1;
        grid-row-end: 4;
        margin: 0;
        padding: 0;
        text-align: right;
        align-self: center;
        padding-right: 20px;
      }
      @media @mobile-p {
        font-size: 45px;
        margin: 40px 0 20px;
      }
    }

    & p {
      .font;
      font-size: 17px;
      line-height: 25px;
      padding: 0 50px;
      color: white;
      @media @pad-p {
        font-size: 16px;
        line-height: 21px;
        padding: 0 40px;
        margin-bottom: 25px;
      }
      @media @pad-l {
        font-size: 16px;
        line-height: 21px;
        margin: 0;
        padding: 0;
        flex: 0 0 50%;
        text-align: left;
        border-left: thin solid @paleblue;
        padding-left: 20px;
      }
      @media @mobile-p {
        font-size: 16px;
        line-height: 21px;
        padding: 0 40px;
        margin-bottom: 25px;
      }

      & + p {
        padding-top: 20px;
      }

    }

    & a.external {
      // display: block;
      text-decoration: none;
      .title(700);
      font-size: 18px;
      .transition;
      color: white;
      @media @pad-p {
        columns: @paleblue;
        line-height: 30px;
      }
      @media @mobile-p {
        columns: @paleblue;
        line-height: 30px;
      }

      &:hover {
        color: @paleblue;
      }
    }

    & .buttons {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 20px;
      margin: 35px 0 50px;
      @media @pad-l {
        padding: 30px 0 0 20px;
        margin: 0;
        border-left: thin solid @paleblue;
        justify-content: flex-start;
      }
      

      & .medysbutton {
        .medysButton(@textcolor1: white, @textcolor2: white, @radius: 20px, @border: white, @fontweight: 300, @fontsize: 17px, @arrow: @paleblue, @borderhover: white, @arrowhover: white);
        display: inline-block;
      }
    }
  }
}

& #digested-cookie {
  background: white;
  display: flex;
  align-items: center;
  padding: 20px 40px;
  .font;
  font-size: 16px;
  @media print {
    display: none;
  }
  @media @laptop {
    padding: 15px 30px;
    font-size: 14px;
  }
  @media @pad-p {
    padding: 20px 0;
    flex-wrap: wrap;
    justify-content: center;
  }
  @media @pad-l {
    padding: 10px;
  }
  @media @ipad {
    padding: 10px 10px 30px;
    font-size: 12px;
    flex-wrap: nowrap;
  }
  @media @mobile-p {
    padding: 20px 0;
    flex-wrap: wrap;
    justify-content: center;
  }
  @media @mobile-l {
    padding: 20px 0;
    flex-wrap: wrap;
    justify-content: center;
  }

  & #spit-the-cookie {
    @media @pad-p {
      text-align: center;
      margin: 20px 0;
      color: @red;
    }
    @media @mobile-p {
      text-align: center;
      margin: 20px 0;
      color: @red;
    }
    @media @mobile-l {
      text-align: center;
      margin: 20px 0;
      color: @red;
    }
  }

  & a {
    display: block;
    white-space: nowrap;
    color: grey;
    text-decoration: none;
    .transition;
    cursor: pointer;
    padding: 0 10px;
    border-left: thin solid grey;
    @media @pad-p {
      padding: 5px 0;
      border: none;
      flex: 0 0 100%;
      text-align: center;
    }
    @media @ipad {
      flex: 1;
      padding: 0 10px;
      border-left: thin solid grey;
    }
    @media @mobile-p {
      padding: 5px 0;
      border: none;
      flex: 0 0 100%;
      text-align: center;
    }
    @media @mobile-l {
      padding: 5px 0;
      border: none;
      flex: 0 0 100%;
      text-align: center;
    }

    &:hover {
      color: @blue;
    }
  }

  & p {
    display: block;
    white-space: nowrap;
    color: grey;
    padding: 0 10px;
    border-left: thin solid grey;
    @media @pad-p {
      padding: 5px 0;
      border: none;
      flex: 0 0 100%;
      text-align: center;
      margin: 0;
    }
    @media @ipad {
      flex: 1;
      padding: 0 10px;
      border-left: thin solid grey;
    }
    @media @mobile-p {
      padding: 5px 0;
      border: none;
      flex: 0 0 100%;
      text-align: center;
      margin: 0;
    }
    @media @mobile-l {
      padding: 5px 0;
      border: none;
      flex: 0 0 100%;
      text-align: center;
      margin: 0;
    }

    &.warning {
      color: @red;
    }
  }

  & div {
    color: black;
    width: 100%;
    text-align: right;
    white-space: nowrap;
    .transition;
    cursor: pointer;
    &:hover {
      color: @blue;
    }
  }
}

& #redim-cookiehint-modal {
  .alpha(50,0,0,0);
  padding: 25%;
  & #redim-cookiehint {
    background: @blue;
    .radius(8px);

    & .cookiehead {
      .title(700);
      font-size: 50px;
    }

    & .cookiecontent {
      .font;
      font-size: 17px;
      line-height: 25px;
      padding: 0 50px;

      & a {
        display: block;
        text-decoration: none;
        .title(700);
        font-size: 18px;
        .transition;
        &:hover {
          color: @paleblue;
        }
      }
    }
  }
}

& #system-message-container {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 40%;
  .translate(-50%,-50%,0);
  z-index: 100;

  & joomla-alert {
    & .alert-heading {
      display: none;
    }
    & .alert-wrapper {
      padding: 40px;
      text-align: center;
      .font;
      & .alert-message {
        font-size: 21px;
      }
    }
  }
}

& #printout {
  display: none;
  padding: 0cm 1cm 0cm;

  & table {
    width: 100%;

    & thead {
      & tr {
        & td {
          color: @blue;
          .title(700);
          font-size: 0.6cm;
          padding-top: 1cm;
          padding-bottom: 0.3cm;
          border-bottom: thin solid @blue;
          margin-bottom: 0.3cm;
          & img {
            width: 3.5cm;
            margin-right: 1cm;
          }
        }

        & th {
          .title(700);
          font-size: 0.4cm;
          padding: 0.3cm 0 0.3cm;
          color: @blue;
          border-bottom: thin solid @blue;
          margin-bottom: 1cm;
        }
      }
    }

    & tfoot {
      & tr {
        & td {
          .title(700);
          font-size: 0.4cm;
          padding: 0.3cm 0 0.3cm;
          color: @blue;
          border-top: thin solid @blue;
          margin-bottom: 1cm;
          text-align: right;
        }
      }
    }

    & tbody {
      & tr {
        &.broker {
          & td {
            border-bottom: thin solid dimgray;
          }
        }
        &.exhibitor {
          & td {
            border-bottom: thin solid dimgray;
          }
          & td.exhibitor {
            width: 3cm;
            & img {
              width: 3cm;
              height: 3cm;
              object-fit: contain;
              margin: 0;
            }
          }
        }
        & td {
          width: 25%;
          .title(700);
          font-size: 0.35cm;
          padding-top: 0.1cm;
          padding-bottom: 0.1cm;
          &:nth-child(2) {
            padding-left: 0.6cm;
          }
          &.big {
            font-size: 0.4cm;
          }
          &.brokers {
            font-size: 0.35cm;
            width: 50%;
            & a {
              color: dimgray;
              text-decoration: none;
            }
          }
          &:nth-child(4) {
            text-align: right;
          }
          &.exhibitor-info {
            width: 100%;
            padding-left: 0;
            padding-right: 0.5cm;
            & h2 {
              .title(700);
              color: @blue;
              margin: 0 0 0.2cm;
            }
            & p {
              .font(400);
              margin: 0;
            }
          }
          &.info {
            .font(400);
            & div {
              margin-bottom: 0.2cm;
              & i {
                color: @paleblue;
                padding-right: 0.1cm;
              }
            }
          }

          & img {
            width: 100%;
            height: 3cm;
            object-fit: cover;
          }
        }
      }
    }
    
  }

  @media print {
    display: block;
  }
}

& #mobile-blocker {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: @blue;
  z-index: 10000;
  display: none;
  @media @pad-l {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  @media @mobile-l {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  & .inner {
    text-align: center;
    
    & i {
      font-size: 70px;
      color: @paleblue;
    }
    
    & div {
      color: white;
      .title(700);
      font-size: 28px;
      padding: 12px 15% 0;
    }
  }
  
}