body, html { overflow-x:hidden; }
.banner { height: 100%; position: relative; background-position:center; background-size:contain; }
.banner .caption { position: absolute; right: 15%; left: 15%; padding-top: 1.25rem; padding-bottom: 1.25rem; text-align: center; top: 25%; z-index: 1; }
.banner h1 { margin-bottom: 5%; }
.banner h3 strong { font-weight: bold; }
.banner p { color: var(--dark-green); font-size: 17px; font-weight: normal; line-height:26px; }
.banner .direct { bottom: 10%; clear: both; left: 0; width: 100%; z-index: 1; margin-top:10%; }
.banner .arow { height: 95px; margin: 0px auto; width: 95px; }
.banner > img {opacity:0;}
.banner:after { content:''; position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0; background:rgba(255, 255, 255, 0.9); opacity:1; transition:all 0.4s ease-in-out; }
.banner.playing:after{ opacity:0; }

#feature { display:flex; }
#feature-ow #feature-iw { margin-left: 0px; }
#feature-ow { position: relative; z-index:0; }
.feature .items { background-color: var(--deep-green); ; padding: 80px 30px 40px; }
.feature .items:nth-child(2n+2) { background-color: var(--light-green); }
.feature .items h4, .feature .items p { color: var(--bs-white); }
.feature .items h4 { font-size: 19px; font-weight: normal; margin-bottom: 15px; text-transform: initial; }
.feature .items p { margin-bottom: 75px; }
.feature .items a { color: var(--yellow); display: inline-block; font-size: 13px; font-weight: 500; text-transform: uppercase; margin-top:auto; }
.feature .items a figure { display: inline-block; margin: 0px 5px 0px 0px; vertical-align: bottom; height: 25px; width: 32px; }
.feature .items a figure img { height: 25px; width: 29px; transition:all 0.3s ease-in-out; }
.feature .items a:hover figure img { height: 25px; width: 32px; }
#feature > .tns-item { display:flex; flex-direction:column; }

.fcards [aria-controls] { background-color: rgba(255, 255, 255, 0.7); border: none; height: 100%; text-indent: -9999px; width: 80px; opacity:0; transition:opacity 0.3s ease-in-out; position:absolute; top:0; left:0; }
.fcards .btnP { background-image: url("../images/aro_lft.svg"); background-repeat: no-repeat; background-position: center; float: left; }
.fcards .btnN { background-image: url("../images/aro_rgt.svg"); background-repeat: no-repeat; background-position: center; float: right;  left:initial; right:0; }
.fcards:hover [aria-controls] { opacity:1; }
.fcards .btnP[disabled], .fcards .btnN[disabled] { opacity: 0; }
.fcards { position:relative; }

.object { background: url("../images/obj_bg.png") no-repeat bottom right; clear: both; padding: 7% 0px; width: 100%; }
.object h1 { margin-bottom: 3%; }
.object h4 { font-weight: normal; margin-bottom: 2.5%; text-transform: initial; }
.object p { margin-bottom: 3%; max-width: 900px; }
.object ul {list-style: none; margin: 0; padding: 0; display: flex; flex-flow: row wrap; justify-content: space-between; }
.object ul li { border-top: 1px solid var(--deep-green); color: var(--deep-green); font-size: 16px; font-weight: normal; padding: 20px 0px; flex: 0 1 32%; }
.object ul li a { color: var(--deep-green); display: flex; }
.object ul li a figure { display: inline-block; margin: 0px 3px 0px 0px; vertical-align: bottom; height: 25px; min-width: 32px; margin-right: 5px; }
.object ul li a figure img { height: 25px; width: 29px; transition:all 0.3s ease-in-out; }
.object ul li a:hover figure img { height: 25px; width: 32px; }
.object ul li:nth-last-child(-n+3) { border-bottom: 1px solid var(--deep-green); }


.smodal { background: rgba(255, 255, 255, 0.75); }
.smodal .btn-close { background: transparent; position: absolute; height: 24px; top: 25px; right: 40px; opacity: 1; width: 24px; }
.smodal .btn-close img { transform: rotate(0deg); transition-duration: 0.8s; }
.smodal .btn-close:hover img { transform: rotate(180deg); transition-duration: 0.8s; }
.smodal .modal-dialog { max-width: 920px; }
.smodal .modal-content { background: url("../images/sp_pup_bg.png") no-repeat left top / cover; border: none; border-radius: 0px; }
.smodal .modal-body { padding: 100px 50px; }
.smodal .modal-body h3, .smodal .modal-body h4 { color: var(--bs-white); text-transform: initial; margin-bottom: 25px; }
.smodal .modal-body p { color: var(--bs-white); margin-bottom: 40px; max-width: 330px; }
.smodal a { color: var(--yellow); display: inline-block; font-size: 13px; font-weight: 500; text-transform: uppercase; }
.smodal a figure { display: inline-block; margin: 0px 5px 0px 0px; vertical-align: bottom; height: 25px; width: 32px; }
.smodal a figure img { height: 25px; width: 29px; transition:all 0.3s ease-in-out; }
.smodal a:hover figure img { height: 25px; width: 32px; }

.smodal ul { list-style: none; margin: 0; padding: 0; }
.smodal ul li {color: var(--yellow); font-size: 13px; font-weight: normal; padding: 7px 0px; }
.smodal ul li a { color: var(--yellow); display: inline-block; display: flex; align-items: center; }
.smodal ul li a figure { display: inline-block; margin: 0px 3px 0px 0px; vertical-align: bottom; height: 25px; min-width: 32px; }
.smodal ul li a figure img { height: 25px; width: 29px; transition:all 0.3s ease-in-out; }
.smodal ul li a:hover figure img { height: 25px; width: 32px; }
.smodal ul li a:before { content: "\e628"; transition: all 0.3s ease-in-out; position: relative; left: 0; font-family: 'themify'; font-size:25px; margin-right:10px; }
.smodal ul li a:hover:before {
    left: 3px;
}


.arrow-container {
  width: 25px;
  /* cubic-bezier-easing = sine / mehr Beispiele: https://easings.net/ */
  animation: bounce 1600ms infinite cubic-bezier(0.445, 0.05, 0.55, 0.95);
  cursor: pointer;
  height: 20px;
}

.arrow-down {
  height: 3px;
  background: #066666;
  transform: rotate(45deg);
  transform-origin: 0% 0%;
  border-radius: 5px;
}
.arrow-down:after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  bottom: 0;
  left: 100%;
  border-radius: 5px;
  background: #066666;
  transform: rotate(-90deg);
  transform-origin: 0% 100%;
}

@keyframes bounce {
50% {
    transform: translateY(-15px);
  }
}



.hoverareas { position:absolute; top:0; left:0; width:100%; height:100%; opacity:0; }
.hoverareas.show { opacity:1; }
.hoverareas .harea { width:15%; height:15%; z-index:1; background-image:url(../images/hover-state.png); position: absolute; background-size: contain; background-repeat: no-repeat; cursor:pointer; opacity:0; transition:opacity 0.3s ease-in-out; mix-blend-mode: multiply; }
.hoverareas .harea:hover { opacity:1; }
.hoverareas .popbox {
	background-color: rgba(255, 255, 255, .75);  
	backdrop-filter: blur(5px);
	padding:40px 30px;
	width:480px;
	top:20%;
	left:20%;
	transition:opacity 0.3s ease-in-out;
	position:absolute;
	opacity:0;
}
.hoverareas .popbox.show { opacity:1; z-index:9;}
.popbox p { color: var(--grey); font: 300 15px var(--main-text-font); line-height:1.5; }
.popbox a { color: var(--deep-green); text-transform:uppercase; }
.popbox h4 { text-transform:initial; }
.popbox .row { align-items: end; margin-bottom:25px; }
.popbox .fullbtn { width:100%; height:100%; left:0; top:0; position: absolute;
    text-indent: -500px;
    overflow: hidden; z-index:9; }


#h_1 { top: 13%; left: 3%; }
#h_2 { top: 9%; left: 33%; }
#h_3 { top: 23%; left: 79%; }
#h_4 { top: 60%; left: 6%; }
#h_5 { top: 52%; left: 29.5%; }
#h_6 { top: 32%; left: 38%; }
#h_7 { top: 31%; left: 53%; }
#h_8 { top: 38%; left: 66%; }
#h_9 { top: 82%; left: 9%; }
#h_10 { top: 82%; left: 39%; }
#h_11 { top: 65%; left: 60%; }
#h_12 { top: 68%; left: 80.7%; }


.pointclick { max-width:60px; cursor:pointer; }

/*-------------------
    Media Query
---------------------------*/

@media screen and (max-width:550px) {
	.banner .direct { display:initial; }

	.banner {
		min-height: 350px;
		background-size:cover;
		background-position:center;
	}
	.banner .w-100 {
		object-fit: cover;
	}
}

@media only screen and (max-width: 767px) {
    .banner h1 { font-size: 22px; }
    .banner h3 { font-size: 16px; }
    .banner p { display: none; }
    .banner .caption { left: 12px; right: 12px; top: 5%; top: 50%; transform: translateY(-50%); }
    .banner .arow { height: 75px; width: 85px; }
    .feature .items { padding: 50px 12px 20px 12px; }
    .feature .items h4 { font-size: 16px; min-height: 38px; }
    .feature .items p { margin-bottom: 37px; }
    .feature .items a { font-size: 11px; }
    .fcards [aria-controls] { width: 65px; }
    .object ul { border-bottom: none; }
    .object ul li { font-size: 15px; padding: 15px 0px; flex: 0 1 100%; }
    .object ul li a figure { min-width: 20px; }
    .smodal .modal-body { padding: 60px 20px; }
    .smodal .modal-body .col:last-child h4 { margin-top: 30px; }
    .smodal .btn-close { right: 20px; top: 20px; }
	.object ul li:nth-last-child(-n+3) { border-bottom:0; }
	.object ul li:last-child { border-bottom: 1px solid var(--deep-green); }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .banner h1 { font-size: 32px; }
    .banner h3 { font-size: 18px; }
    .banner p { font-size: 14px; }
    .banner .caption { left: 12px; right: 12px; top: 5%; }
    .feature .items { height: 330px; padding: 50px 15px 20px 15px !important; }
    .feature .items h4 { min-height: 48px; }
    .fcards [aria-controls] { width: 65px; }
    .object ul li { font-size: 15px; padding: 15px 0px; }
    .object ul li a figure { min-width: 20px; }
    .smodal .modal-dialog { max-width: 700px; }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .banner .caption { top: 8%; }
    .feature .items { padding: 50px 15px 20px 15px !important; }
    .feature .items h4 { min-height: 48px; }
}