@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%;}
  }
}