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.3;
}
@media (min-height:900px) {
  body {
    font-size: 20px;
  }
}
body * {
  overflow:hidden;
}
h1 {
  font-size: 4vh;
  line-height: 1.1;
}
@media(min-height:900px) {
  h1 {
    font-size:36px;
  }
}
#site-container {
  position: relative;
  max-width:100vw;
  overflow-x:hidden;
}
#hand-icon {
  position: absolute;
  top: 3vh;
  right: 5vh;
  width: 10vh;
  height: auto;
  z-index: 2;
}
.scrolling-container {
  overflow-x:hidden;
  position: fixed;
  width:100%;
}
.swiper {
  height:100vh;
  width:100vw;
  top:0;
  left:0;
}
.swiper-wrapper {
  overflow-x: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;
  top:5vh;
  right:0;
  display: flex;
  flex-wrap: wrap;
  z-index: 2;
}
#dev-logos img, #dev-logos picture {
  height:10vh;
  width:auto;
}
#dev-logos p {
  width:100%;
  font-size:2vh;
  margin-bottom: 0;
}
#curves {
  position: absolute;
  width: 195vh;
  z-index: 2;
  top: 0;
  left: 0;
  mix-blend-mode: multiply;
  overflow: hidden;
  pointer-events:none;
}
#curves img {
  width:100%;
  height:auto;
}
.uppercase {
  text-transform:uppercase;
}
.light {
  font-weight:200;
}
.aqua {
  color:#78ADCD;
}
.beige {
  color:#C8C5B8;
}
.mt0 {
  margin-top:0;
}
.m0 {
  margin:0;
}
.small-text {
  font-size:2vh;
}
.med-text {
  font-size:3.5vh;
}
.big-text {
  font-size:9.5vh;
  line-height: 1.1;
}
#site-content {
  position: relative;
  z-index:3;
  padding:8vh 8vh 0;
  width: 135vh;
  max-width: 100vw;
  pointer-events:none;
  overflow-x:hidden;
}
.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:75vh;
}
@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;
}
.agent .aqua {
  font-weight: 400;
  font-size: 2.8vh;
}
@media(min-height:900px) {
  .agent .aqua {
    font-size:26px;
  }
}
#contacts .row {
  width:100vh;
}
#contacts img, #contacts picture {
  width: 30vh;
  height: auto;
}
#contacts .three-words img, #contacts .three-words picture {
  height: 10vh;
  width: auto;
}
@media(min-height:900px) {
  #contacts .three-words img, #contacts .three-words picture {
    height:75px;
  }
}
.btn {
  padding:2vh 3vh;
  background-color:rgba(56,56,74,0.8);
  border:2px solid #99b094;
}
#contacts span.btn {
  display: block;
  width: 55%;
  margin-bottom: 5vh;
}
@media (min-height:900px) {
  #contacts span.btn {
    width:800px;
  }
}
#buttons {
  display: flex;
  margin:4vh 0 10vh;
}
#buttons a.btn {
  font-size:2vh;
  margin-right: 2vh;
  padding-right: 8vh;
  position: relative;
}
@media(min-height:900px) {
  #buttons a.btn {
    font-size:20px;
    margin-right:18px;
  }
}
#buttons a.btn:after {
  content: '';
  position: absolute;
  background-image: url('./img/btn-arrow.svg');
  background-size: contain;
  background-repeat: no-repeat;
  height: 50%;
  top: 25%;
  right: 4%;
  width: 10%;
}

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

@media (max-width:1100px) {
  .hfs {
    display: none !important;
  }
  .sfs {
    display: block !important;
  }
  .w100 {
    width:100vw;
  }

  #mob-super {
    width:100%;
    position: fixed;
    top:0;
    left:0;
    z-index: 2;
    pointer-events: none;
  }
  #mob-super img {
    width: 100%;
    height:auto;
  }

  #mob-logo {
    position: absolute;
    width: 30vw;
    top:2vh;
    left:4vh;
  }
  #mob-logo img, #mob-logo picture {
    width:100%;
    height: auto;
  }

  #mittelweser-header-portrait {
    position: fixed;
    z-index: 2;
    top:0;
    left:0;
  }
  #body-bg {
    height: 195vh;
    object-fit: cover;
    object-position: bottom;
  }
  .scrolling-container {
    position: absolute;
    top:35vw;
  }
  .swiper {
    height:40vh;
    width:100vw;
  }
  .swiper-wrapper img, .swiper-wrapper picture {
    width:100%;
    height: 80vw;
  }
  #site-content {
    position: absolute;
    z-index: 2;
    top: 80vw;
    padding: 4vh 3vh;
    width:100vw;
    max-width: 100vw;
    overflow-x:hidden;
  }
  #holding-intro {
    width:100%;
  }
  #intro-aqua {
    margin-top:1vh;
    margin-bottom:8vh;
  }
  body {
    font-size: 1.6vh;
    overflow-x:hidden;
  }
  h1 {
    font-size: 2.4vh;
  }
  #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:5.5vh;
  }
  #features {
    width:100%;
  }
  #features .col {
    width:18%;
    font-size: 1vh;
    margin-right:0;
    margin-bottom:2vh;
    padding-right: 3vh;
  }
  .med-text {
    font-size:4.5vh;
  }
  #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 {
    height: 8vh;
    width: auto;
    margin-left: 0vh;
  }
  #buttons {
    flex-wrap:wrap;
  }
  #buttons a.btn {
    margin-bottom:2vh;
    font-size: 1.5vh;
  }
}