@font-face {
    font-family: 'gotham';
    src: url('./fonts/gothambold.woff2') format('woff2'),
         url('./fonts/gothambold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
}
@font-face {
    font-family: 'gotham';
    src: url('./fonts/gothamlight.woff2') format('woff2'),
         url('./fonts/gothamlight.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
body, html {
    overflow-x:hidden;
}
body {
  padding:0;
  margin:0;
  background-color:#d9d9d9;
  color:#fff;
  font-family:'gotham', sans-serif;
  font-size:2.5vh;
  line-height: 1.3;
}
h1 {
  font-size: 3.6vh;
  line-height: 1.1;
}
h2 {
  font-weight:normal;
}
#site-container {
  position: relative;
}
#hand-icon {
  position: absolute;
  top: 3vh;
  right: 5vh;
  width: 8vh;
  height: auto;
  z-index: 2;
}
.scrolling-container {
  overflow-x:hidden;
  position: fixed;
  width:100%;
}
.swiper {
  height:100vh;
  width:calc(100vh * 2);
  top:0;
  left:0;
}
.swiper-wrapper img, .swiper-wrapper picture {
  height:100%;
  width:calc(100vh * 2);
  object-fit: cover;
  object-position: bottom;
}
#dev-logos {
  position: absolute;
  bottom:2vh;
  right:3vh;
  display: flex;
  z-index: 2;
}
#dev-logos img, #dev-logos picture {
  height:8vh;
  width:auto;
  margin-left:2vh;
}
#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:normal;
}
.aqua {
  color:#82E6FD
}
.mt0 {
  margin-top:0;
}
.m0 {
  margin:0;
}
.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: calc(100vh * 1.2);
  max-width: 100vw;
  pointer-events:none;
}
.row {
  display: flex;
}
img.btn {
  width:30vh;
  height:auto;
  margin-bottom:2vh;
  text-decoration:none !important;
}
img.btn, a {
  pointer-events:all;
  text-decoration:none;
  color:#fff;
  transition:0.5s opacity;
}
img.btn:hover {
  opacity:0.7;
}
a:hover {
  text-decoration:underline;
}
#mittelweser-logo {
  width: 25vh;
  height: auto;
  margin-bottom: 8vh;
}
#holding-intro {
  width:80vh;
}
#holding-intro .col:last-child {
  text-align: right;
  width: 55%;
}
#intro-aqua {
  margin:7vh 0;
}
#features {
  margin:3vh 0;
  width:75%;
}
#features .col {
  font-size:1.5vh;
  margin-right:2vh;
  width:13%;
}
#features picture, #features img {
  height:6vh;
  width:auto;
}
.sfs {
  display: none !important;
}
.agent span.aqua {
  font-weight:bold;
}


/* COOKIE BANNER */

.cookies-infobar {
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  position: fixed;
  width: 100%;
  left: 0;
  right: 0;
  top: 0;
  padding: 10px;
  text-align: center;
	z-index:9999999;  font-size: 0.5em;

}

.cookies-infobar.cookies-infobar_accepted {
  display: none;
}

.cookies-infobar_wrapper {
  margin: 10px;
	display: inline;
}

.cookies-infobar a {
  color: inherit;
	text-decoration:none;
}

.cookies-infobar_btn {
  display: inline-block;
  padding: 5px 10px;
  background: #28573a;
  text-decoration: none;
  border-radius: 15px;
  color: #fff;
  text-transform: uppercase;
	text-decoration:none;
	transition:all 0.3s ease;
}

.cookies-infobar_btn:hover {

  background: #20442e;

}

/* ENDE COOKIE BANNER */

/* LEGALS */

.legals {font-size:0.5em;}



/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 99999999; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0); /* Black w/ opacity */
background:rgba(0,0,0,0.5) !important;
}

/* Modal Content/Box */
.modal-content {
background-color:rgba(18,39,28,0.9) !important;
  margin: 10% auto; /* 15% from the top and centered */
  padding: 40px;
  border: 0px solid #888;
  width: 80%; /* Could be more or less, depending on screen size */
	font-size:80%;
	border-radius:25px;
}

.modalleft {max-width:35%;float:left;margin-right:5%;overflow:scroll;max-height:600px;}
.modalright {max-width:60%;float:left;overflow:scroll;max-height:600px;}


/* The Close Button */
.close {
  color: #95a861;
  float: right;
  font-size: 28px;
  font-weight: bold;cursor:pointer;
	position: absolute;
	transform: translateY(-100%);
	transition:all 0.3s ease;
}

.close:hover,
.close:focus {
  color: #fff;
  text-decoration: none;
	opacity:1;
}



/* ENDE LEGALS */

@media (max-width:1100px) {
	
	.modalleft {max-width:100% !important;clear:both;margin-right:0% !important;overflow:auto;max-height:none;}
.modalright {max-width:100% !important;clear:both;overflow:auto;max-height:none;}


	
	.cookies-infobar {
 
  bottom: 0 !important;
		top:inherit !important;
 font-size: 0.75em;
  background: rgba(0, 0, 0, 0.75);

}
	
	.cookies-infobar_btn {
  margin-top:0.75em;
}
	
  .hfs {
    display: none !important;
  }
  .sfs {
    display: block !important;
  }
  .w100 {
    width:100vw;
  }
  #mittelweser-header-portrait {
    position: fixed;
    z-index: 3;
    top:0;
    left:0;
  }
  #body-bg {
    height: 138vh;
    object-fit: cover;
    object-position: bottom;
  }
  .scrolling-container {
    position: static;
    display: flex;
    overflow-x:scroll;
    overflow-y:hidden;
  }
  .scrolling-container img, .scrolling-container picture {
    height:60vh;
    width:auto;
  }
  #site-content {
    position: absolute;
    z-index: 2;
    top: 135vw;
    padding: 4vh 3vh;
    width:100%;
    max-width: calc(100vw - 6vh);
  }
  #holding-intro {
    width:100%;
  }
  body {
    font-size: 1.4vh;
  }
  h1 {
    font-size: 2.2vh;
  }
  #intro-aqua {
    margin:3vh 0;
  }
  .row {
    flex-wrap:wrap;
  }
  #media .col {
    width:100% !important;
    text-align: left !important;
  }
  .big-text {
    font-size:5.5vh;
  }
  #features {
    width:100%;
  }
  #features .col {
    width:17%;
    font-size: 1vh;
    margin-right:0;
    margin-bottom:2vh;
    padding-right: 3vh;
  }
  .med-text {
    font-size:4vh;
  }
  #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: 5vh;
    width: auto;
    margin-left: 0vh;
  }
}