body {
  padding:0;
  margin:0;
  background-color:#d9d9d9;
  color:#fff;
  font-family:'brother-1816', sans-serif;
  font-weight: 200;
  font-size:2.5vh;
  line-height: 1.5;
}
@media (min-height:900px) {
  body {
    font-size: 20px;
  }
}
h1 {
  font-size: 4vh;
  line-height: 1.1;
}
@media(min-height:900px) {
  h1 {
    font-size:36px;
  }
}
#site-container {
  position: relative;
  max-width:100vw;
}
#hand-icon {
  position: absolute;
  top: 3vh;
  right: 5vh;
  width: 10vh;
  height: auto;
  z-index: 2;
}
.scrolling-container {
  overflow:hidden;
  position: fixed;
  width:100%;
  pointer-events: none;
}
.swiper {
  height:100vh;
  width:100vw;
  top:0;
  left:0;
}
.dt-bg {
  position: absolute;
  width: 60%;
  mix-blend-mode: multiply;
  min-width: 1000px;
  pointer-events: none;
  top: 0;
  left: 0;
  z-index: -1;
}
.swiper-wrapper {
  overflow:hidden;
  display: flex;
  width: 300vw;
}
.swiper-wrapper img, .swiper-wrapper picture {
  height:100%;
  width:100%;
  object-fit: cover;
  object-position: bottom;
}
#dev-logos {
  position: absolute;
  bottom:5vh;
  right:5vh;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  z-index: 2;
}
#dev-logos img, #dev-logos picture {
  width:auto;
}
.bgo-logo {
  height:6vh;
}
.prodac-logo {
  height:10vh;
}
.uppercase {
  text-transform:uppercase;
}
.logo {
  width: 40vh;
}
.light {
  font-weight:200;
}
.turquoise {
  color:#97EAD2;
}
.yellow {
  color:#F2DF74;
}
.mt0 {
  margin-top:0;
}
.m0 {
  margin:0;
}
.small-text {
  font-size:2vh;
}
.med-text {
  font-size:3.5vh;
}
.big-text {
  font-size:14vh;
  line-height: 1.1;
}

@media (min-height: 900px) {
  .big-text {
    font-size: 90px;
  }
}

#site-content {
  position: relative;
  z-index: 3;
  padding: 8vh 8vh 0;
  width: 135vh;
  max-width: 100vw;
  pointer-events: none;
  overflow-x: hidden;
  top: 0;
  left: 0;
}
.row {
  display: flex;
}
.col.half {
  width:50%;
}
img.btn {
  width:30vh;
  height:auto;
  margin-bottom:2vh;
  text-decoration:none !important;
}
img.btn, a {
  pointer-events:all;
  text-decoration:none;
  color:#fff;
}
a:hover {
  text-decoration:underline;
}
#mittelweser-logo {
  width: 35vh;
  margin-bottom: 8vh;
  opacity: 0.8;
}
@media (min-height:900px) {
  #mittelweser-logo {
    width:350px;
    margin-bottom:70px;
  }
}
#mittelweser-logo picture, #mittelweser-logo img {
  width:100%;
  height:auto;
}
#holding-intro {
  width:90vh;
}
@media (min-height:900px) {
  #holding-intro {
    width:700px;
  }
}
#holding-intro .col:last-child {
  text-align: right;
  width: 60%;
}
#intro-aqua {
  margin:1vh 0 7vh;
}
#features {
  margin:3vh 0;
  width:75%;
}
#features .col {
  font-size:1.7vh;
  margin-right:2vh
}
#features picture, #features img {
  height:6vh;
  width:auto;
}
.sfs {
  display: none !important;
}

.btn {
    padding: 1vh 3vh;
    background-color: #97EAD2;
    border: 2px solid #97EAD2;
    border-radius: 100px;
    color: #173354;
    line-height: 1;
    font-weight: bold;
    text-decoration: none !important;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    white-space: nowrap;
}
.btn span {
    font-size: 0.8vw;
    text-align: left;
    width: 100%;
}
.btn.dark {
  background-color: #365477;
  border-color:#365477;
  color:#fff;
}
.btn.dark:after {
  filter:brightness(0) invert(1);
}
#buttons {
  display: flex;
  flex-wrap:wrap;
  text-align: right;
  align-items: center;
}
#buttons a.btn {
    font-size: 1vw;
    padding-right: 2vw;
    position: relative;
    height: 2vw;
    width: 15vw;
    margin: 0.5vw 0 0.5vw 0.5vw;
}

@media(min-height:800px) {
  #buttons a.btn {
    font-size:16px;
    margin-left:16px;
  }
  a.btn span {
    font-size:14px;
  }
}
#buttons a.btn:after {
  content: '';
  position: absolute;
  background-image: url('./img/btn-arrow.svg');
  background-size: contain;
  background-repeat: no-repeat;
  height: 40%;
  top: 30%;
  right: 0;
  width: 10%;
}

.address {
  font-size:3.5vh;
  width:90vw
}
@media(min-height:900px) {
  .address {
    font-size:26px;
  }
}

#icons {
  margin:5vh 0 1vh;
  width:85%;
}
.icon {
    padding: 0 2vh 0 0;
    text-align: center;
    min-width: 10vh;
    max-width: 14vh;
}
.icon img {
  height: 5vh;
  width: auto;
}
.icon p {
    font-size: 1vh;
}

.swiper-slide {
  height: 100vh;
}

@media (max-width:1199px) {
  .swiper-slide {
    height: auto;
  }
  .hfs {
    display: none !important;
  }
  .sfs {
    display: block !important;
  }
  .w100 {
    width:100vw;
  }

  

  #mob-logo {
    position: relative;
    width: 100%;
    z-index: 2;
    pointer-events: none;
  }
  #mob-logo img, #mob-logo picture {
    width:100%;
    height: auto;
  }

  #mittelweser-header-portrait {
    position: fixed;
    z-index: 2;
    top:0;
    left:0;
  }
  #body-bg {
    width: 100%;
    position: absolute;
    z-index: 2;
    height: auto;
    mix-blend-mode: multiply;
    top: -14vw;
    pointer-events: none;
  }
  .scrolling-container {
    position: absolute;
    top:25vw;
    z-index: 1;
  }
  .swiper {
    height:70vw;
  }
  .swiper-wrapper img, .swiper-wrapper picture {
    width:100%;
    height: 70vw;
  }
  #site-content {
      position: relative;
      z-index: 2;
      top: 14vw;
      padding: 4vh 3vh;
      width: 100vw;
      max-width: 100vw;
      overflow-x: hidden;
      box-sizing: border-box;
  }
  #holding-intro {
    width:100%;
    padding-top:15vw;
  }
  #holding-intro .col.half {
    width:100%;
  }
  #intro-aqua {
    margin-top:1vh;
    margin-bottom:1vh;
  }
  body {
    font-size: 3vw;
    overflow-x:hidden;
  }
  h1 {
    font-size:5vw;
  }
  #contacts .row {
    padding: 2vh;
    background-color: rgba(56,56,74,0.8);
    border: 2px solid #99b094;
    width: calc(100vw - 12vh);
  }
  .row {
    flex-wrap:wrap;
  }
  #contacts .col {
    width:100%;
  }
  #contacts span.btn {
    border:none;
    background-color:transparent;
  }
  #contacts img, #contacts picture {
    width:15vh;
  }
  #contacts .three-words img, #contacts .three-words picture {
    height:5vh;
  }
  .agent .aqua, #contacts .beige, .address {
    font-size:2vh;
  }
  #media .col {
    width:100% !important;
    text-align: left !important;
  }
  .big-text {
    font-size: 12vw;
  }
  #features {
    width:100%;
  }
  #features .col {
    width:18%;
    font-size: 1vh;
    margin-right:0;
    margin-bottom:2vh;
    padding-right: 3vh;
  }
  .med-text {
    font-size:2.2vh;
    white-space: nowrap;
  }
  #contacts p.med-text strong {
    display: block;
    padding-right:15vh;
  }
  #dev-logos {
    position: static;
    justify-content: flex-start;
    margin:4vh 0;
  }
  #dev-logos img, #dev-logos picture {
    width: auto;
    margin-left: 0vh;
  }
  #buttons {
    flex-wrap:wrap;
  }
  #buttons a.btn {
    margin-bottom:4vw;
    font-size: 3vw;
    width:55vw;
    height: 6vw;
    margin-left: 0;

  }
  #buttons a.btn span {
    font-size:2vw;
  }
  #icons {
    width:100%;
  }
  .icon {
    width: 25%;
    margin-bottom: 2vh;
    min-width: unset;
  }
  .icon img {
    height:8vw;
  }
  .icon p {
    font-size:1.7vw;
  }
}