@media screen and (min-width: 1921px) {
  .IntroText h1 {
    font-size: 88px;
    line-height: 88px;
    letter-spacing: -3.78px;
  }
  .contactWrapper h1 {
    font-size: 58px;
    line-height: 66px;
    letter-spacing: -2.49px;
  }
}
@media screen and (min-width: 0px) and (max-width: 1365px) {
  body {
    padding: 50px;
  }
  .contactWrapper h1 {
    font-size: 3.02vw /*58px*/;
    line-height: 3.43vw /*66px*/;
    letter-spacing: -0.12vw /*2.49*/;
    margin-bottom: 30px;
  }
  .IntroText h1 {
    font-size: 4.58vw /*88px*/;
    line-height: 4.58vw /*88px*/;
    letter-spacing: -0.19vw /*-3.78px*/;
  }
  .outerBox,
  .contenWrapper {
    width: calc(100% - 100px);
    height: calc(100% - 100px);
    top: 50px;
    left: 50px;
  }

  @-webkit-keyframes line2 {
    0% {
      bottom: 70vh;
      height: 60vh;
      opacity: 1;
    }
    50% {
      bottom: 63px;
      height: 60vh;
      opacity: 1;
    }
    95% {
      bottom: 63px;
      height: 16.5vh;
      opacity: 1;
    }
    100% {
      bottom: 63px;
      height: 16.5vh;
      opacity: 0;
    }
  }
  @keyframes line2 {
    0% {
      bottom: 70vh;
      height: 60vh;
      opacity: 1;
    }
    50% {
      bottom: 63px;
      height: 60vh;
      opacity: 1;
    }
    95% {
      bottom: 63px;
      height: 16.5vh;
      opacity: 1;
    }
    100% {
      bottom: 63px;
      height: 16.5vh;
      opacity: 0;
    }
  }

  @-webkit-keyframes line13 {
    0% {
      top: 70vh;
      height: 60vh;
      opacity: 1;
    }
    50% {
      top: 63px;
      height: 60vh;
      opacity: 1;
    }
    95% {
      top: 63px;
      height: 16.5vh;
      opacity: 1;
    }
    100% {
      top: 63px;
      height: 16.5vh;
      opacity: 0;
    }
  }
  @keyframes line13 {
    0% {
      top: 70vh;
      height: 60vh;
      opacity: 1;
    }
    50% {
      top: 63px;
      height: 60vh;
      opacity: 1;
    }
    95% {
      top: 63px;
      height: 16.5vh;
      opacity: 1;
    }
    100% {
      top: 63px;
      height: 16.5vh;
      opacity: 0;
    }
  }
  @-webkit-keyframes appearbox {
    0% {
      opacity: 0;
      background-position: 50% 100%, 0% 100%, 100% 100%, 100% 0%, 0% 0%;
    }
    20%,
    70% {
      opacity: 1;
      background-position: 50% 100%, 0% 100%, 100% 100%, 100% 0%, 0% 0%;
    }
    100% {
      opacity: 1;
      background-position: 50% 100%, 0% 100%, 100% 100%, calc(100% + 7.4vw) 0%,
        -7.4vw 0%;
    }
  }
  @keyframes appearbox {
    0% {
      opacity: 0;
      background-position: 50% 100%, 0% 100%, 100% 100%, 100% 0%, 0% 0%;
    }
    20%,
    70% {
      opacity: 1;
      background-position: 50% 100%, 0% 100%, 100% 100%, 100% 0%, 0% 0%;
    }
    100% {
      opacity: 1;
      background-position: 50% 100%, 0% 100%, 100% 100%, calc(100% + 7.4vw) 0%,
        -7.4vw 0%;
    }
  }

  /* .gallerySlider, .mapWrapper, .contactWrapper, .legacyContent {
      width: calc(100vw - 104px) !important;
      height: calc(100vh - 104px) !important;
  } */
  .footerLogo {
    margin-top: -82px;
  }
}
@media screen and (min-width: 0px) and (max-width: 1023px) {
  h2 {
    font-size: 28px;
    line-height: 32px;
  }
  .contactWrapper h1 {
    font-size: 5.02vw /*58px*/;
    line-height: 5.43vw /*66px*/;
    margin-bottom: 20px;
  }
  .legacyContent {
    padding: 20px;
  }
  body {
    padding: 30px;
  }
  .outerBox,
  .contenWrapper {
    width: calc(100% - 60px);
    height: calc(100% - 60px);
    top: 30px;
    left: 30px;
  }
  .linebox {
    width: 180px;
    height: 180px;
  }
  .linebox span {
    width: 7px;
  }
  .logo {
    width: 180px;
    height: 180px;
    margin-top: -90px;
    margin-left: -90px;
  }
  @-webkit-keyframes movelogo {
    0% {
      width: 180px;
      height: 180px;
      margin-top: -90px;
      margin-left: -90px;
      top: 50%;
    }
    20%,
    80% {
      width: 110px;
      height: 110px;
      margin-top: -80px;
      margin-left: -55px;
      top: 50%;
    }
    100% {
      width: 50px;
      height: 50px;
      margin-top: -25px;
      top: 100%;
      margin-left: -25px;
    }
  }
  @keyframes movelogo {
    0% {
      width: 180px;
      height: 180px;
      margin-top: -90px;
      margin-left: -90px;
      top: 50%;
    }
    20%,
    80% {
      width: 110px;
      height: 110px;
      margin-top: -80px;
      margin-left: -55px;
      top: 50%;
    }
    100% {
      width: 50px;
      height: 50px;
      margin-top: -25px;
      top: 100%;
      margin-left: -25px;
    }
  }
  .footerLogo {
    width: 50px;
    height: 50px;
    margin-top: -55px;
    margin-left: -25px;
  }

  .linebox span:nth-child(1) {
    left: 40px;
  }
  .linebox span:nth-child(2) {
    left: 84px;
  }
  .linebox span:nth-child(3) {
    left: 107px;
  }
  @-webkit-keyframes line2 {
    0% {
      bottom: 70vh;
      height: 60vh;
      opacity: 1;
    }
    50% {
      bottom: 45px;
      height: 60vh;
      opacity: 1;
    }
    95% {
      bottom: 45px;
      height: 22vh;
      opacity: 1;
    }
    100% {
      bottom: 45px;
      height: 22vh;
      opacity: 0;
    }
  }
  @keyframes line2 {
    0% {
      bottom: 70vh;
      height: 60vh;
      opacity: 1;
    }
    50% {
      bottom: 45px;
      height: 60vh;
      opacity: 1;
    }
    95% {
      bottom: 45px;
      height: 22vh;
      opacity: 1;
    }
    100% {
      bottom: 45px;
      height: 22vh;
      opacity: 0;
    }
  }

  @-webkit-keyframes line13 {
    0% {
      top: 70vh;
      height: 60vh;
      opacity: 1;
    }
    50% {
      top: 45px;
      height: 60vh;
      opacity: 1;
    }
    95% {
      top: 45px;
      height: 22vh;
      opacity: 1;
    }
    100% {
      top: 45px;
      height: 22vh;
      opacity: 0;
    }
  }
  @keyframes line13 {
    0% {
      top: 70vh;
      height: 60vh;
      opacity: 1;
    }
    50% {
      top: 45px;
      height: 60vh;
      opacity: 1;
    }
    95% {
      top: 45px;
      height: 22vh;
      opacity: 1;
    }
    100% {
      top: 45px;
      height: 22vh;
      opacity: 0;
    }
  }
  @-webkit-keyframes appearbox {
    0% {
      opacity: 0;
      background-position: 50% 100%, 0% 100%, 100% 100%, 100% 0%, 0% 0%;
    }
    20%,
    70% {
      opacity: 1;
      background-position: 50% 100%, 0% 100%, 100% 100%, 100% 0%, 0% 0%;
    }
    100% {
      opacity: 1;
      background-position: 50% 100%, 0% 100%, 100% 100%, calc(100% + 10vw) 0%,
        -10vw 0%;
    }
  }
  @keyframes appearbox {
    0% {
      opacity: 0;
      background-position: 50% 100%, 0% 100%, 100% 100%, 100% 0%, 0% 0%;
    }
    20%,
    70% {
      opacity: 1;
      background-position: 50% 100%, 0% 100%, 100% 100%, 100% 0%, 0% 0%;
    }
    100% {
      opacity: 1;
      background-position: 50% 100%, 0% 100%, 100% 100%, calc(100% + 10vw) 0%,
        -10vw 0%;
    }
  }

  /* .gallerySlider, .mapWrapper, .contactWrapper, .legacyContent {
    width: calc(100vw - 64px) !important;
    height: calc(100vh - 140px) !important;

} */
  /* .screenLocation, .screenGallery, .screenContact
{
  top:30px;
} */
}

@media screen and (max-width: 896px) and (max-height: 600px) {
  @media all and (orientation: portrait) {
    .contactWrapper {
      align-items: flex-start;
      justify-content: flex-start;
      padding-top: 40px;
    }
  }
}
@media screen and (min-width: 0px) and (max-width: 896px) {
  @media all and (orientation: landscape) {
    .mainMenu li {
      margin: 10px 10px;
    }

    .IntroText h1 {
      font-size: 4.4vw /*88px*/;
      line-height: 4.4vw /*88px*/;
      letter-spacing: -0.19vw /*-3.78px*/;
      margin-bottom: 10px;
    }
    .IntroText h4 {
      font-size: 20px;
      line-height: 24px;
    }
    .mainTitle {
      max-width: 45%;
    }
    .contactWrapper > div {
      height: 85%;
    }
    @-webkit-keyframes appearbox {
      0% {
        opacity: 0;
        background-position: 50% 100%, 0% 100%, 100% 100%, 100% 0%, 0% 0%;
      }
      20%,
      70% {
        opacity: 1;
        background-position: 50% 100%, 0% 100%, 100% 100%, 100% 0%, 0% 0%;
      }
      100% {
        opacity: 1;
        background-position: 50% 100%, 0% 100%, 100% 100%, calc(100% + 8vw) 0%,
          -8vw 0%;
      }
    }
    @keyframes appearbox {
      0% {
        opacity: 0;
        background-position: 50% 100%, 0% 100%, 100% 100%, 100% 0%, 0% 0%;
      }
      20%,
      70% {
        opacity: 1;
        background-position: 50% 100%, 0% 100%, 100% 100%, 100% 0%, 0% 0%;
      }
      100% {
        opacity: 1;
        background-position: 50% 100%, 0% 100%, 100% 100%, calc(100% + 8vw) 0%,
          -8vw 0%;
      }
    }
  }
  @media all and (orientation: portrait) {
    /* .gallerySlider, .mapWrapper, .contactWrapper, .legacyContent {
        width: calc(100vw - 64px) !important;
        height: calc(100vh - 120px) !important;

    }
    .screenLocation, .screenGallery, .screenContact, .legacyContent
    {
      top:58px;
    } */
    .IntroText h1,
    .contactWrapper h1 {
      font-size: 8.58vw /*88px*/;
      line-height: 9.58vw /*88px*/;
      letter-spacing: -0.19vw /*-3.78px*/;
    }
    .IntroText h4 {
      font-size: 18px;
      line-height: 24px;
      letter-spacing: 1px;
    }

    @-webkit-keyframes line2 {
      0% {
        bottom: 70vh;
        height: 60vh;
        opacity: 1;
      }
      50% {
        bottom: 45px;
        height: 60vh;
        opacity: 1;
      }
      95% {
        bottom: 45px;
        height: 14vh;
        opacity: 1;
      }
      100% {
        bottom: 45px;
        height: 14vh;
        opacity: 0;
      }
    }
    @keyframes line2 {
      0% {
        bottom: 70vh;
        height: 60vh;
        opacity: 1;
      }
      50% {
        bottom: 45px;
        height: 60vh;
        opacity: 1;
      }
      95% {
        bottom: 45px;
        height: 14vh;
        opacity: 1;
      }
      100% {
        bottom: 45px;
        height: 14vh;
        opacity: 0;
      }
    }

    @-webkit-keyframes line13 {
      0% {
        top: 70vh;
        height: 60vh;
        opacity: 1;
      }
      50% {
        top: 45px;
        height: 60vh;
        opacity: 1;
      }
      95% {
        top: 45px;
        height: 14vh;
        opacity: 1;
      }
      100% {
        top: 45px;
        height: 14vh;
        opacity: 0;
      }
    }
    @keyframes line13 {
      0% {
        top: 70vh;
        height: 60vh;
        opacity: 1;
      }
      50% {
        top: 45px;
        height: 60vh;
        opacity: 1;
      }
      95% {
        top: 45px;
        height: 14vh;
        opacity: 1;
      }
      100% {
        top: 45px;
        height: 14vh;
        opacity: 0;
      }
    }
  }
}

@media screen and (min-width: 0px) and (max-width: 480px) {
  .mainMenu li a {
    font-size: 11px;
  }
}
@media all and (device-width: 1024px) and (device-height: 1366px) and (orientation: portrait),
  all and (device-width: 768px) and (device-height: 1024px) and (orientation: portrait),
  all and (device-width: 820px) and (device-height: 1180px) and (orientation: portrait),
  all and (device-width: 834px) and (device-height: 1194px) and (orientation: portrait),
  all and (device-width: 810px) and (device-height: 1080px) and (orientation: portrait) {
  @-webkit-keyframes line2 {
    0% {
      bottom: 70vh;
      height: 60vh;
      opacity: 1;
    }
    50% {
      bottom: 63px;
      height: 60vh;
      opacity: 1;
    }
    95% {
      bottom: 44px;
      height: 9vh;
      opacity: 1;
    }
    100% {
      bottom: 44px;
      height: 9vh;
      opacity: 0;
    }
  }
  @keyframes line2 {
    0% {
      bottom: 70vh;
      height: 60vh;
      opacity: 1;
    }
    50% {
      bottom: 44px;
      height: 60vh;
      opacity: 1;
    }
    95% {
      bottom: 44px;
      height: 9vh;
      opacity: 1;
    }
    100% {
      bottom: 44px;
      height: 9vh;
      opacity: 0;
    }
  }

  @-webkit-keyframes line13 {
    0% {
      top: 70vh;
      height: 60vh;
      opacity: 1;
    }
    50% {
      top: 44px;
      height: 60vh;
      opacity: 1;
    }
    95% {
      top: 44px;
      height: 9vh;
      opacity: 1;
    }
    100% {
      top: 44px;
      height: 9vh;
      opacity: 0;
    }
  }
  @keyframes line13 {
    0% {
      top: 70vh;
      height: 60vh;
      opacity: 1;
    }
    50% {
      top: 44px;
      height: 60vh;
      opacity: 1;
    }
    95% {
      top: 44px;
      height: 9vh;
      opacity: 1;
    }
    100% {
      top: 44px;
      height: 9vh;
      opacity: 0;
    }
  }

  @-webkit-keyframes appearbox {
    0% {
      opacity: 0;
      background-position: 50% 100%, 0% 100%, 100% 100%, 100% 0%, 0% 0%;
    }
    20%,
    70% {
      opacity: 1;
      background-position: 50% 100%, 0% 100%, 100% 100%, 100% 0%, 0% 0%;
    }
    100% {
      opacity: 1;
      background-position: 50% 100%, 0% 100%, 100% 100%, calc(100% + 8vw) 0%,
        -8vw 0%;
    }
  }
  @keyframes appearbox {
    0% {
      opacity: 0;
      background-position: 50% 100%, 0% 100%, 100% 100%, 100% 0%, 0% 0%;
    }
    20%,
    70% {
      opacity: 1;
      background-position: 50% 100%, 0% 100%, 100% 100%, 100% 0%, 0% 0%;
    }
    100% {
      opacity: 1;
      background-position: 50% 100%, 0% 100%, 100% 100%, calc(100% + 8vw) 0%,
        -8vw 0%;
    }
  }
}

@media all and (device-width: 1366px) and (device-height: 1024px) and (orientation: landscape),
  all and (device-width: 1024px) and (device-height: 768px) and (orientation: landscape),
  all and (device-width: 1180px) and (device-height: 820px) and (orientation: landscape),
  all and (device-width: 1194px) and (device-height: 834px) and (orientation: landscape),
  all and (device-width: 1080px) and (device-height: 810px) and (orientation: landscape) {
  .IntroText h1 {
    font-size: 6.58vw /*88px*/;
    line-height: 6.58vw /*88px*/;
    letter-spacing: -0.19vw /*-3.78px*/;
  }
  @-webkit-keyframes appearbox {
    0% {
      opacity: 0;
      background-position: 50% 100%, 0% 100%, 100% 100%, 100% 0%, 0% 0%;
    }
    20%,
    70% {
      opacity: 1;
      background-position: 50% 100%, 0% 100%, 100% 100%, 100% 0%, 0% 0%;
    }
    100% {
      opacity: 1;
      background-position: 50% 100%, 0% 100%, 100% 100%, calc(100% + 8vw) 0%,
        -8vw 0%;
    }
  }
  @keyframes appearbox {
    0% {
      opacity: 0;
      background-position: 50% 100%, 0% 100%, 100% 100%, 100% 0%, 0% 0%;
    }
    20%,
    70% {
      opacity: 1;
      background-position: 50% 100%, 0% 100%, 100% 100%, 100% 0%, 0% 0%;
    }
    100% {
      opacity: 1;
      background-position: 50% 100%, 0% 100%, 100% 100%, calc(100% + 8vw) 0%,
        -8vw 0%;
    }
  }
}
.contactWrapper {
  position: relative;
  padding: 50px 0 50px 0;
  @media (min-width: 767px) {
    padding: 50px 0 50px 0;
  }
}

.contactWrapper .colWrapper {
  display: flex;
  flex-direction: column;
  @media (min-width: 767px) {
    display: flex;
    flex-direction: row;
    position: relative;
    width: 100%;
    justify-content: center;
  }
}
.contactWrapper .col {
  position: relative;
  padding-bottom: 30px;
  @media (min-width: 767px) {
    padding-bottom: 50px;
    width: 350px;
  }
}

.contactWrapper .col + .col + .col {
  margin-top: 5px;
  //align-content: end;
}

.contactWrapper .col p {
  font-size: 16px;

  @media (min-width: 767px) {
    font-size: 17px;
  }
}

.contactWrapper .col img {
  width: 130px;
  height: auto;
  padding-bottom: 20px;
}

.contactWrapper .col ul {
  list-style: none;
  padding: 0;
  margin: 0;
  padding: 30px 0 20px 0;
}

.contactWrapper .col ul li {
  padding: 0;
  margin: 0;
  line-height: 1.8;
}