.u-section-1 {
  background-image: linear-gradient(0deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.55));
  background-position: 50% 50%;
  min-height: 1035px;
}

.u-section-1 .u-video-1 {
  height: 1035px;
  margin-top: 0;
  margin-bottom: 0;
  width: 100%;
  box-shadow: 5px 5px 20px 0 rgba(0,0,0,0.4);
  filter: brightness(0.8);
}

.u-section-1 .u-text-1 {
  margin: -285px auto 0 calc(((100% - 1140px) / 2));
}

.u-section-1 .u-text-2 {
  font-weight: 400;
  font-size: 1.375rem;
  font-family: Allerta;
  margin: 0 auto 60px calc(((100% - 1140px) / 2));
}

@media (max-width: 1199px) {
  .u-section-1 .u-video-1 {
    margin-right: auto;
    margin-left: 0;
  }

  .u-section-1 .u-text-1 {
    margin-left: calc(((100% - 940px) / 2));
  }

  .u-section-1 .u-text-2 {
    margin-left: calc(((100% - 940px) / 2));
  }
}

@media (max-width: 991px) {
  .u-section-1 .u-text-1 {
    margin-left: calc(((100% - 720px) / 2));
  }

  .u-section-1 .u-text-2 {
    margin-left: calc(((100% - 720px) / 2));
  }
}

@media (max-width: 767px) {
  .u-section-1 .u-video-1 {
    width: 533px;
    margin-left: calc(((100% - 540px) / 2)  + -158px);
  }

  .u-section-1 .u-text-1 {
    margin-left: calc(((100% - 540px) / 2)  + 615px);
  }

  .u-section-1 .u-text-2 {
    font-size: 1.222222222222222rem;
    margin-left: calc(((100% - 540px) / 2)  + 615px);
  }
}

@media (max-width: 575px) {
   .u-section-1 {
    min-height: 875px;
  }

  .u-section-1 .u-video-1 {
    height: 875px;
    width: 100%;
    margin-left: 0;
  }

  .u-section-1 .u-text-1 {
    width: auto;
    margin-top: -261px;
    margin-right: calc(((100% - 340px) / 2)  + 104px);
    margin-left: calc(((100% - 340px) / 2));
  }

  .u-section-1 .u-text-2 {
    width: 338px;
    margin-left: auto;
  }
} .u-section-2 {
  min-height: 1245px;
}

.u-section-2 .u-text-1 {
  width: 900px;
  margin: 117px auto 0;
}

.u-section-2 .u-text-2 {
  font-size: 2.6875rem;
  text-transform: uppercase;
  margin: 143px calc(((100% - 1140px) / 2)  + 552px) 0 calc(((100% - 1140px) / 2)  + 204px);
}

.u-section-2 .u-custom-html-1 {
  margin-top: 16px;
  margin-bottom: 0;
  height: auto;
  min-height: 208px;
}

.u-section-2 .u-text-3 {
  font-size: 2.6875rem;
  text-transform: uppercase;
  margin: 117px calc(((100% - 1140px) / 2)) 0 calc(((100% - 1140px) / 2)  + 691px);
}

.u-section-2 .u-custom-html-2 {
  margin-top: 53px;
  margin-bottom: 27px;
  height: auto;
  min-height: 249px;
}

@media (max-width: 1199px) {
  .u-section-2 .u-text-2 {
    margin-right: calc(((100% - 940px) / 2) + 452px);
    margin-left: calc(((100% - 940px) / 2) + 104px);
  }

  .u-section-2 .u-text-3 {
    margin-right: calc(((100% - 940px) / 2));
    margin-left: calc(((100% - 940px) / 2) + 491px);
  }
}

@media (max-width: 991px) {
  .u-section-2 .u-text-1 {
    width: 720px;
  }

  .u-section-2 .u-text-2 {
    margin-right: calc(((100% - 720px) / 2) + 336px);
    margin-left: calc(((100% - 720px) / 2));
  }

  .u-section-2 .u-text-3 {
    margin-right: calc(((100% - 720px) / 2));
    margin-left: calc(((100% - 720px) / 2) + 271px);
  }
}

@media (max-width: 767px) {
  .u-section-2 .u-text-1 {
    width: 540px;
    margin-top: 60px;
  }

  .u-section-2 .u-text-2 {
    font-size: 2.25rem;
    margin-right: calc(((100% - 540px) / 2) + 156px);
    margin-left: calc(((100% - 540px) / 2));
  }

  .u-section-2 .u-text-3 {
    font-size: 2.25rem;
    margin-right: calc(((100% - 540px) / 2));
    margin-left: calc(((100% - 540px) / 2) + 91px);
  }
}

@media (max-width: 575px) {
  .u-section-2 .u-text-1 {
    width: 340px;
  }

  .u-section-2 .u-text-2 {
    font-size: 1.875rem;
    margin-right: calc(((100% - 340px) / 2));
    margin-left: calc(((100% - 340px) / 2));
  }

  .u-section-2 .u-text-3 {
    font-size: 1.875rem;
    margin-right: calc(((100% - 340px) / 2));
    margin-left: calc(((100% - 340px) / 2));
  }
} .u-section-3 {
  min-height: 609px;
}

.u-section-3 .u-text-1 {
  font-size: 2.6875rem;
  text-transform: uppercase;
  margin: 150px calc(((100% - 1140px) / 2)  + 524px) 0 calc(((100% - 1140px) / 2)  + -21px);
}

.u-section-3 .u-custom-html-1 {
  margin-top: 16px;
  margin-bottom: 60px;
  height: auto;
  min-height: 226px;
}

@media (max-width: 1199px) {
  .u-section-3 .u-text-1 {
    margin-right: calc(((100% - 940px) / 2) + 324px);
    margin-left: calc(((100% - 940px) / 2) + -21px);
  }
}

@media (max-width: 991px) {
  .u-section-3 .u-text-1 {
    margin-right: calc(((100% - 720px) / 2) + 104px);
    margin-left: calc(((100% - 720px) / 2) + -21px);
  }
}

@media (max-width: 767px) {
  .u-section-3 .u-text-1 {
    font-size: 2.25rem;
    margin-top: 60px;
    margin-right: calc(((100% - 540px) / 2));
    margin-left: calc(((100% - 540px) / 2));
  }
}

@media (max-width: 575px) {
  .u-section-3 .u-text-1 {
    font-size: 1.875rem;
    margin-right: calc(((100% - 340px) / 2));
    margin-left: calc(((100% - 340px) / 2));
  }
} .u-section-4 {
  min-height: 614px;
}

.u-section-4 .u-text-1 {
  font-size: 2.6875rem;
  text-transform: uppercase;
  margin: 117px calc(((100% - 1140px) / 2)  + 734px) 0 calc(((100% - 1140px) / 2)  + -21px);
}

.u-section-4 .u-custom-html-1 {
  margin-top: 16px;
  margin-bottom: 0;
  height: auto;
  min-height: 226px;
}

.u-section-4 .u-text-2 {
  font-size: 0.9375rem;
  line-height: 1.4;
  margin: 16px 106px 60px;
}

@media (max-width: 1199px) {
  .u-section-4 .u-text-1 {
    margin-top: 1171px;
    margin-right: calc(((100% - 940px) / 2));
    margin-left: calc(((100% - 940px) / 2)  + 498px);
  }

  .u-section-4 .u-text-2 {
    margin-top: 78px;
    margin-left: 6px;
    margin-right: 6px;
  }
}

@media (max-width: 991px) {
  .u-section-4 .u-text-1 {
    margin-right: calc(((100% - 720px) / 2));
    margin-left: calc(((100% - 720px) / 2)  + 278px);
  }

  .u-section-4 .u-text-2 {
    margin-left: 0;
    margin-right: 0;
  }
}

@media (max-width: 767px) {
  .u-section-4 .u-text-1 {
    font-size: 2.25rem;
    margin-top: 1297px;
    margin-right: calc(((100% - 540px) / 2));
    margin-left: calc(((100% - 540px) / 2)  + 98px);
  }

  .u-section-4 .u-text-2 {
    margin-top: 151px;
  }
}

@media (max-width: 575px) {
   .u-section-4 {
    min-height: 875px;
  }

  .u-section-4 .u-text-1 {
    font-size: 1.875rem;
    margin-top: 91px;
    margin-left: calc(((100% - 340px) / 2));
    margin-right: calc(((100% - 340px) / 2));
  }

  .u-section-4 .u-text-2 {
    width: 340px;
    margin-top: 175px;
    margin-left: auto;
    margin-right: auto;
  }
} grimsel panorama
  
    
  
  .pano-section{
    width:100%;
    margin:0;
    padding:0;
  }
  .pano-title{
    text-align:center;
    font-size:64px;
    line-height:1.1;
    margin:0 0 24px 0;
    font-weight:500;
  }
  .pano-scroll{
    width:100vw;
    margin-left:calc(50% - 50vw);
    overflow-x:auto;
    overflow-y:hidden;
    cursor:grab;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:thin;
  }
  .pano-scroll:active{
    cursor:grabbing;
  }
  .pano-scroll img{
    display:block;
    height:420px;
    width:auto;
    max-width:none;
    user-select:none;
    -webkit-user-drag:none;
    pointer-events:none;
  }
  @media (max-width: 1199px){
    .pano-title{font-size:52px;}
    .pano-scroll img{height:340px;}
  }
  @media (max-width: 767px){
    .pano-title{font-size:38px;}
    .pano-scroll img{height:240px;}
  }
  @media (max-width: 575px){
    .pano-title{font-size:30px;}
    .pano-scroll img{height:180px;}
  }
  const slider = document.getElementById('panoScroll1');
  let isDown = false;
  let startX = 0;
  let scrollLeft = 0;
  slider.addEventListener('mousedown', e => {
    isDown = true;
    startX = e.pageX - slider.offsetLeft;
    scrollLeft = slider.scrollLeft;
  });
  slider.addEventListener('mouseleave', () => {
    isDown = false;
  });
  slider.addEventListener('mouseup', () => {
    isDown = false;
  });
  slider.addEventListener('mousemove', e => {
    if (!isDown) return;
    e.preventDefault();
    const x = e.pageX - slider.offsetLeft;
    const walk = (x - startX) * 1.5;
    slider.scrollLeft = scrollLeft - walk;
  });
.pano {
}