@font-face {
    font-family: "SegoeUI";
    src:
        url("/webfont/fonts/SegoeUI.woff2") format("woff2"),
        url("/webfont/fonts/SegoeUI.woff") format("woff");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "SegoeUI";
    src:
        url("/webfont/fonts/SegoeUI-Bold.woff2") format("woff2"),
        url("/webfont/fonts/SegoeUI-Bold.woff") format("woff");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "SegoeUI";
    src:
        url("/webfont/fonts/SegoeUIBlack.woff2") format("woff2"),
        url("/webfont/fonts/SegoeUIBlack.woff") format("woff");
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Montserrat";
    src:
        url("/webfont/fonts/Montserrat-Light.woff2") format("woff2"),
        url("/webfont/fonts/Montserrat-Light.woff") format("woff");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Montserrat";
    src:
        url("/webfont/fonts/Montserrat-Regular.woff2") format("woff2"),
        url("/webfont/fonts/Montserrat-Regular.woff") format("woff");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Montserrat";
    src:
        url("/webfont/fonts/Montserrat-SemiBold.woff2") format("woff2"),
        url("/webfont/fonts/Montserrat-SemiBold.woff") format("woff");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Montserrat";
    src:
        url("/webfont/fonts/Montserrat-Bold.woff2") format("woff2"),
        url("/webfont/fonts/Montserrat-Bold.woff") format("woff");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}



body {background-color: #f6f6f6;}
.wrapper {background-color: #f6f6f6;}
section.bc0 {background-color: #f6f6f6;}

body {background-color: #000000;}
.wrapper {background-color: #000000;}
section.bc0 {background-color: #000000;}

section#section-1 .videoshow {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.videoshow video {  
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
}

@media screen and (orientation: portrait) {
	.videoshow video {  
		width: 100%;
		height: 64%;
	}
}
/*
@media screen and (orientation: landscape) {
	.videoshow video {  
		width: 100%;
		height: 60%;
	}
}
*/


section .slide-txt {
	position: fixed;
	width: 900px;
	margin: 0 auto;
	left: 50%;
	right: auto;
	max-width: 100%;
	-webkit-transform: translateX(-50%);	
	transform: translateX(-50%);	
	
}

section .slide-txt .txt h1 {width: 900px;}
section .slide-txt .txt h3 {width: 900px;}

section .slide-txt .txt .url-outer {position: relative; text-align: center; margin-top: 20px;}
section .slide-txt .txt .url-outer .url.btnfx {	background-color: rgba(0, 0, 0, 0.45); opacity: 0;}
section .slide-txt .txt .url-outer .url.btnfx:before {border: #ffffff solid 1px;}


section .slide-txt .txt .sep {
  background-color: #ffffff;
	height: 1px;
	margin: 5px auto 20px;
	text-align: center;
	width: 1%;
	max-width: 300px;
	display: block;
	font-size: 0;
	opacity: 1;
	-webkit-transition: width 1s ease 0.4s;
	transition: width 1s ease 0.4s;
}
section .slide-txt .txt.on .sep {width: 70%;}

.navRight {margin-top: -75px;}

.layer-ink-top {
  font-size: 0;
	bottom: -4px;
  font-size: 0;
  position: absolute;
  z-index: 999;
	width: 100%;
}
.layer-ink-top img {
	width:100%;
}
.dark-bg-top,
.dark-bg-bottom {
		background-color:#FFF;
}

section .section-inner .sep-hori {
	margin-top:30px;
	margin-bottom:30px;
}

section.dark-bg-top.mgTop,
section.dark-bg-bottom.mgTop {
	margin-top:-200px;
	background-color:transparent;
}

.home-all {
	margin: 0 auto;
	width: 1230px;
	height:100%;
}
.home-all ul.home-ul {
	float: left;
	padding: 0 20px 40px;
	min-height: 290px;
	width: 370px;
	overflow: hidden;
}
.home-all ul.home-ul li {
	text-align: center;
	list-style-type: none;
	padding: 7px;
}

img.logo-since1998 {
	clear: both;
	display: block;
	width: 40.3%;
	min-width:260px;
	margin: 40px auto 0 auto;
}

section.jobs {
	padding-bottom:200px;
	padding-top: 60px;
}

section.jobs h4, section.jobs h5, section.jobs h6 {
	margin: 0 auto;
	font-family: 'Ronnia-CondLight';
	letter-spacing: 1.4px;
	font-size: 18px;
	line-height: 25px;
}

section.jobs .jobs-btn {
	margin:auto;
	margin-top:40px;
	margin-bottom:30px;
	text-align: center;
}

section#section-1 .slideshow {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
section#section-1 .slideshow .img{
	height: 100%;
	position: fixed;
	width: 100%;
}

section#section-1 .slideshow img.off,
section#section-1 .slideshow img.on {
	-webkit-transition: opacity 1.5s ease;
	-moz-transition: opacity 1.5s ease;
	-ms-transition: opacity 1.5s ease;
	-o-transition: opacity 1.5s ease;
	transition: opacity 1.5s ease;
}
section#section-1 .slideshow img.off {opacity: 0 !important;}
section#section-1 .slideshow img.on  {opacity: 1;}

section#section-1 .slideshow img.on.bld  {
	opacity: 0.5;
	-webkit-transition: opacity 1.5s ease;
	-moz-transition: opacity 1.5s ease;
	-ms-transition: opacity 1.5s ease;
	-o-transition: opacity 1.5s ease;
	transition: opacity 1.5s ease;
}

section#section-33 { padding-bottom: 80px;}

#section-33 .section-inner {clear: both; overflow: hidden; padding: 0;}
#section-33 .section-inner-wrap{clear: both; overflow: hidden; padding: 0; width: 100%; overflow: hidden;}

.img.colm-2 {
	width: 50% !important;
}

#section-33 .section-inner-full {
    clear: both;
    overflow: hidden;
    padding: 0;
    width: 100%;
}

section#section-33 .img {
	position:relative;
	width:100%;
	margin: 0;
	font-size: 0;
}
section#section-33 .img.clr{clear: both; z-index: 1;}
section#section-33 .img img {width:100%; height:auto;}
section#section-33 .img.colm-1 img {width: 99.6%;	height:auto;}
section#section-33 .section-inner-full .img.colm-1 img {width: 100%;	height:auto;}
section#section-33 .img.colm-2 {width:100%;}
section#section-33 .img.colm-2 img { float: left; height: auto; width: 48.9%;}
section#section-33 .img.colm-3 {width:100%;}
section#section-33 .img.colm-3 img {width:32.51%;	height:auto; float:left;}
section#section-33 .img.colm-4 {width:100%;}
section#section-33 .img.colm-4 img {width:65.5%;	height:auto;float:left;}
section#section-33 .img.colm-5 {width:32.333%;}
section#section-33 .img.colm-5 img {width:100%;	height:auto;overflow:hidden;float:left;}
section#section-33 .img.colm-6 {width:65.666%;}
section#section-33 .img.colm-6 img {width:100%;	height:auto;overflow:hidden;float:left;}


#section-2 {
  min-height: 0 !important;
}

@media screen and (max-width: 700px){
	section#section-33 .img.colm-1,
	section#section-33 .img.colm-2 {
		clear: both;
		float: none;
		width: 100% !important;}

	section#section-33 .img.colm-1 img,
	section#section-33 .img.colm-2 img {width: 100% !important;}	
}





section#section-33 .img.pano {}
section#section-33 .img.pano .pano-wrapper {
	float: left;
	height: 100%;
	overflow: hidden;
	position: absolute;
	top: 0;
	left: 0;
 width: 100%;
}

section#section-33 .img.colm-1.pano {float: none;}
section#section-33 .img.colm-1.pano img { width: 99.9%}

section#section-33 .img.colm-2.pano {float: left; width: 49.68%;}
section#section-33 .img.colm-2.pano .pano-wrapper {width: 100%;left: 0; right: auto;}
section#section-33 .img.colm-2.pano img.pano-img{ width: 100%; margin: 0; opacity: 0;}

section#section-33 .img.pano .pano-wrapper img.pano-img {position: absolute; z-index: 0; left: 0; top: 0; opacity: 0;}
section#section-33 .img.pano .pano-wrapper iframe.pano-frame {position: absolute; left: 0; top: 0; z-index: 1; width: 100%; height: 99.1%; opacity: 0;}
section#section-33 .img.pano .pano-wrapper .pano-sign {position: absolute; left: 0; top: 0; z-index: 2; width: 100%; height: 100%;}
section#section-33 .img.pano .pano-wrapper .pano-sign a {display: block; width: 100%; height: 100%; opacity: 1; position: relative;}
section#section-33 .img.pano .pano-wrapper .pano-sign a:hover {opacity: 1}
section#section-33 .img.pano .pano-wrapper .pano-sign a span {
	display: block; position: relative; top: 50%; left: 50%; margin-left: -100px; margin-top: -100px; height: 200px; width: 200px;
	background-image: url("../images/icons/pano_playbutton.png"); background-position: 0 0; background-repeat: no-repeat;}
section#section-33 .img.pano .pano-wrapper .pano-sign a:hover span {background-position: 0 -225px;}

.img.pano.colm-2:nth-child(even) img.pano-img, .img.colm-2.pano:nth-child(even) .pano-wrapper {margin-left: 0.255%;}
.img.pano.grid-img {margin-right: 0;}

.img.pano.grid-img {margin-right: 0;}
.section-inner-full .grid-img {margin-left: 0; margin-right: 0;}
.img.pano.colm-2:nth-child(even) img.pano-img, .img.colm-2.pano:nth-child(even) .pano-wrapper {margin-left: 0.255%;}

section#section-2 .section-inner{max-width: 1240px}
section#section-2 .section-inner .section-panorama-header{max-width: 800px; margin: 0 auto; padding-bottom: 50px;}

.footer-btn.vpA,
footer.bc3 .footer-inner .footer-btn.vpA,
.jobs-btn.vpA {
	opacity: 0;
	-webkit-transform:scale(1);
	-moz-transform:scale(1);
	-ms-transform:scale(1);
	-o-transform:scale(1);
	transform:scale(1);
}


section#section-44 {
	position: relative;
	display: inline-block;
	padding: 3rem 0;
	width: 100%;
	height: 100vh;	
	background: none;
}

body:not(.ios) section#section-44 {
	background-image: url(/images/home/company/dreipunkt_office.jpg);
	background-attachment: fixed;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
}

body.ios section#section-44:before {
	content: "";
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0; left: 0;
	background: none;
	background-image: url(/images/home/company/dreipunkt_office.jpg);
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;	
}

section#section-44 .layer-ink-top,
section#section-44 .layer-ink-bottom {
	position: absolute;
	left: 0;
	z-index: 5;
	display: inline-block;
	width: 100%;
	font-size: 0;
}
section#section-44 .layer-ink-top {top: -4px;}
section#section-44 .layer-ink-bottom {bottom: -4px;}


.section-inner-wrap .url-outer.b2 {
	text-align: center;	
}
.section-inner-wrap .url-outer.b2 .url {
	margin-right: 0.97vw;
}

.section-inner-wrap .url-outer.b2 .url.btnfx {
  background-color: transparent;
  color: #fff;
	font-weight: 200;
}
.section-inner-wrap .url-outer.b2 .url.btnfx:before {border-width: 1px;}


#value-creation  {
	position: relative;
	width: 540px;
	height: 430px;
	left: 50%;
  margin: 0 0 0 -270px;
	overflow: hidden;
	-webkit-transform:scale(0.8);
	-moz-transform:scale(0.8);
	-ms-transform:scale(0.8);
	-o-transform:scale(0.8);
	transform:scale(0.8);
/*
	-webkit-transform-origin: 50% 0;
	-moz-transform-origin: 50% 0;
	-ms-transform-origin: 50% 0;
	-o-transform-origin: 50% 0;
	transform-origin: 50% 0;
*/
}
#value-creation.vpAOn {
	opacity: 1;
	-webkit-transform:scale(0.8);
	-moz-transform:scale(0.8);
	-ms-transform:scale(0.8);
	-o-transform:scale(0.8);
	transform:scale(0.8);
}
#value-creation .sign {
	width: 540px;
	height: 430px;
	position: absolute;
	left: 0;
	top: 0;
	opacity: 0;
	z-index: 6;
}
#value-creation .sign img{position: absolute; z-index: 1; left: 0; top: 0;  display: block; width: 100%; height: auto;}

#value-creation.vpAOn .sign {
	opacity: 1;
	-webkit-transition: opacity 0.9s ease 2.2s;
	-moz-transition: opacity 0.9s ease 2.2s;
	-ms-transition: opacity 0.9s ease 2.2s;
	-o-transition: opacity 0.9s ease 2.2s;
	transition: opacity 0.9s ease 2.2s;
}

#value-creation .b1,
#value-creation .b2,
#value-creation .b3,
#value-creation .b4,
#value-creation .b5 {position: absolute; left: 0; background-position: 0 0; background-repeat: no-repeat;}

#value-creation .b1 {z-index: 5; top: 0; margin-left: 68px; width: 378px; height: 133px;}
#value-creation .b2 {z-index: 4; top: 82px; margin-left: 8px; width: 531px; height: 140px;}
#value-creation .b3 {z-index: 3; top: 149px; margin-left: 8px; width: 538px; height: 108px;}
#value-creation .b4 {z-index: 2; top: 205px; margin-left: 8px; width: 542px; height: 171px;}
#value-creation .b5 {z-index: 1; top: 292px; margin-left: 68px; width: 414px; height: 132px;}

#value-creation .ov {position: absolute; top: 0; left: 0; height: 100%; width: 100%; display: block; background-position: 0 0; background-repeat: no-repeat;}

#value-creation .b1 {	background-image: url(../images/home/value/value_brush_1.png);}
#value-creation .b2 {	background-image: url(../images/home/value/value_brush_2.png);}
#value-creation .b3 {	background-image: url(../images/home/value/value_brush_3.png);}
#value-creation .b4 {	background-image: url(../images/home/value/value_brush_4.png);}
#value-creation .b5 {	background-image: url(../images/home/value/value_brush_5.png);}

#value-creation .b1 .ov {	background-image: url(../images/home/value/value_brush_1_w.png);}
#value-creation .b2 .ov {	background-image: url(../images/home/value/value_brush_2_w.png);}
#value-creation .b3 .ov {	background-image: url(../images/home/value/value_brush_3_w.png);}
#value-creation .b4 .ov {	background-image: url(../images/home/value/value_brush_4_w.png);}
#value-creation .b5 .ov{	background-image: url(../images/home/value/value_brush_5_w.png);}


#value-creation.vpAOn .b1 .ov {
	-webkit-animation: valecreation_1_ani 0.3s ease 1s 1 forwards;
	-moz-animation: valecreation_1_ani 0.3s ease 1s 1 forwards;
	-ms-animation: valecreation_1_ani 0.3s ease 1s 1 forwards;
	-o-animation: valecreation_1_ani 0.3s ease 1s 1 forwards;
	animation: valecreation_1_ani 0.3s ease 1s 1 forwards;
}
#value-creation.vpAOn .b2 .ov {
	-webkit-animation: valecreation_2_ani 0.3s ease 1.3s 1 forwards;
	-moz-animation: valecreation_2_ani 0.3s ease 1.3s 1 forwards;
	-ms-animation: valecreation_2_ani 0.3s ease 1.3s 1 forwards;
	-o-animation: valecreation_2_ani 0.3s ease 1.3s 1 forwards;
	animation: valecreation_2_ani 0.3s ease 1.3s 1 forwards;
}
#value-creation.vpAOn .b3 .ov {
	-webkit-animation: valecreation_1_ani 0.3s ease 1.6s 1 forwards;
	-moz-animation: valecreation_1_ani 0.3s ease 1.6s 1 forwards;
	-ms-animation: valecreation_1_ani 0.3s ease 1.6s 1 forwards;
	-o-animation: valecreation_1_ani 0.3s ease 1.6s 1 forwards;
	animation: valecreation_1_ani 0.3s ease 1.6s 1 forwards;
}
#value-creation.vpAOn .b4 .ov {
	-webkit-animation: valecreation_2_ani 0.3s ease 1.9s 1 forwards;
	-moz-animation: valecreation_2_ani 0.3s ease 1.9s 1 forwards;
	-ms-animation: valecreation_2_ani 0.3s ease 1.9s 1 forwards;
	-o-animation: valecreation_2_ani 0.3s ease 1.9s 1 forwards;
	animation: valecreation_2_ani 0.3s ease 1.9s 1 forwards;
}
#value-creation.vpAOn .b5 .ov {
	-webkit-animation: valecreation_1_ani 0.3s ease 2.2s 1 forwards;
	-moz-animation: valecreation_1_ani 0.3s ease 2.2s 1 forwards;
	-ms-animation: valecreation_1_ani 0.3s ease 2.2s 1 forwards;
	-o-animation: valecreation_1_ani 0.3s ease 2.2s 1 forwards;
	animation: valecreation_1_ani 0.3s ease 2.2s 1 forwards;
}

@keyframes valecreation_1_ani {
	from {left: 0%;}
	to {left: 115%;}
}
@keyframes valecreation_2_ani {
	from {left: 0%;}
	to {left: -115%;}
}


@-webkit-keyframes valecreation_1_ani {
	from {left: 0%;}
	to {left: 115%;}
}
@-webkit-keyframes valecreation_2_ani {
	from {left: 0%;}
	to {left: -115%;}
}


@-o-keyframes valecreation_1_ani {
	from {left: 0%;}
	to {left: 115%;}
}
@-o-keyframes valecreation_2_ani {
	from {left: 0%;}
	to {left: -115%;}
}


@-ms-keyframes valecreation_1_ani {
	from {left: 0%;}
	to {left: 115%;}
}
@-ms-keyframes valecreation_2_ani {
	from {left: 0%;}
	to {left: -115%;}
}


section#section-13 .section-inner{max-width: 1240px}

.profil-all {
	margin: 0 auto;
	padding-top: 40px;
	padding-bottom: 60px;
	width: 1230px;
	height:100%;
	margin-bottom:112px;
}
.profil-all ul.profil-ul {
	float: left;
	padding: 0 20px 40px;
	min-height: 290px;
	width: 370px;
	overflow: hidden;
}
.profil-all ul.profil-ul li {
	text-align: center;
	list-style-type: none;
	padding: 7px;
	text-transform: uppercase;
	color: #e1e1e1;
}
.profil-all ul.profil-ul li:last-child {
	border: none;
}

.profil-all ul.profil-ul li.dotted-line {
	background-image: url("../images/profil/dotted-line-white.png");
  opacity: 0.3;
	height: 1px;
	padding: 0;
	width: 100%;
}

.profil-all ul.profil-ul li h3 {padding: 0;}

.profil-all ul.profil-ul li h3 a:hover,
.profil-all ul.profil-ul li .h3 a:hover{
	color: #008b85 !important;
}

.profil-all ul.profil-ul li:first-child h3 a:hover {
	color: #fff !important;
}


@media screen and (orientation: portrait) and (min-height: 700px) {
	section#section-1 .slideshow .img {height: 58%;}
}

@media screen and (max-width: 1460px){
	section#section-2 .section-inner {max-width: 100%; width: 100%;}
	.home-all  {width: 100%;}
	.home-all ul.home-ul {clear: both; float: none; width: 100%; max-width: 800px; min-height: 100px; padding: 0 0 40px; margin: 0 auto;}

	section#section-13 .section-inner {max-width: 100%; width: 100%;}
	section#section-13 .profil-all  {width: 820px;}
}

@media screen and (max-width: 1300px){
	section#section-33 .section-inner-full {max-width: 1485px; width: 77%;}
	section#section-33 .section-inner-full .img.colm-1 img {width: 99.6%;}
	section#section-33 .img.colm-1 img {width: 98.2%;}
	section#section-33 .img.colm-2 img {width: 48.2%;}
	section#section-33 .img.colm-3 img {width: 32.2%;}
	section#section-33 .img.colm-4 img {width: 65.1%;}
	section#section-33 .img.pano .pano-wrapper iframe.pano-frame {height: 98.8%;}
	section .slide-txt {top: 25%;}
	section .slide-txt .txt h1 {width: 750px; max-width: 98%;}
	section .slide-txt .txt h3 {width: 700px; max-width: 98%;}
	section#section-33 .img.pano .pano-wrapper .pano-sign {
		-webkit-transform: scale(0.6);
		transform: scale(0.6);
	}
}

@media screen and (max-width: 940px) {
	section#section-13 .profil-all  {width: 100%;}
	.profil-all ul.profil-ul {float: none;  min-height: 200px; padding: 0 0 40px; margin: 0 auto;}
}

@media screen and (max-height: 800px){
	section .slide-txt {top: 15%;}
}

@media screen and (max-width: 1272px) and (orientation: portrait){
	section .slide-txt {top: 12%;}
}

@media screen and (max-width: 700px) {
	section#section-33 .img.pano {display: none;}
	section .slide-txt .txt h1 {width: 545px;}
	section .slide-txt .txt h3 {width: 545px;}
}

@media screen and (orientation: portrait) and (min-height: 700px) and (max-height: 1100px) {
	section .slide-txt .txt .url-outer   {display: none;}
}

@media screen and (max-width: 480px) {
	.home-all ul.home-ul {width: 100%;}
	section .slide-txt .txt h1,
	section .slide-txt .txt h3 {
		width: 322px;
		max-width: 322px;
		padding: 0 4%;
	}
	section .slide-txt .txt .sep {margin-top: 15px; }

	.profil-all ul.profil-ul {width: 280px;}
}

@media screen and (max-width:360px){
	h2.h2mobile {
		font-size:26px;
	}
	section .slide-txt .txt h1,
	section .slide-txt .txt h3 {
		width: 300px;
		max-width: 90%;
	}
	.profil-all ul.profil-ul {width: 260px;}
}

/* PANORAMA  */


section#section-21{ padding-bottom: 40px;}


section#section-21 .img {
	position:relative;
	width:100%;
	margin: 0;
	font-size: 0;
	line-height: 0;
}
section#section-21 .img.clr{clear: both; z-index: 1;}
section#section-21 .img .web {position: relative; float: left; width: 98%; margin: 2% 0 8% 0;}

section#section-21 .img img {width:100%; height:auto;}

section#section-21 .img.colm-1.monitor .web {left: 50%; margin-left: -49.3%; width: 96%;}
section#section-21 .img.colm-1.ipad_portrait .web {left: 50%; margin-left: -25.5%; width: 50%;}
section#section-21 .img.colm-1.ipad_landscape .web {left: 50%; margin-left: -35%; width: 70%;}
section#section-21 .img.colm-1.iphone_landscape .web {left: 50%; margin-left: -25%; margin-top: 15%; width: 50%;}
section#section-21 .img.colm-1.iphone_portrait .web {left: 50%; margin-left: -13%; width: 27%; margin-top: 50px;}

section#section-21 .img.colm-1 img {width: 99.6%;	height:auto;}
section#section-21 .section-inner-full .img.colm-1 img {width: 100%;	height:auto;}

section#section-21 .img.colm-2 {width:100%;}

section#section-21 .img.colm-2 .web {width:45%; margin: 10% 2% 2%;}
section#section-21 .img.colm-2.iphone_portrait .web {margin: 15% 12%; width: 25%;}

section#section-21 .img.colm-2 img { float: left; height: auto; width: 48.7%;}

section#section-21 .img.colm-3 {	width:100%;}
section#section-21 .img.colm-3 .web {margin: 0; width: 30%;}
section#section-21 .img.colm-3.ipad_portrait .web {width: 30%;}
section#section-21 .img.colm-3.ipad_landscape .web {width: 30%;}

section#section-21 .img.colm-3.iphone_portrait {margin: 0 2%;}
section#section-21 .img.colm-3.iphone_landscape {margin: 0 2%;}
section#section-21 .img.colm-3.iphone_portrait .web {margin: 6.5% 8%; width: 14%;}
section#section-21 .img.colm-3.iphone_landscape .web {margin: 6.5% 8%; width: 14%;}

section#section-21 .img.colm-3 img {width:32.5%;	height:auto; float:left;}

section#section-21 .img.colm-4 {width:100%;}

section#section-21 .img.colm-4 .web {width:65.9%; margin:0.25%;}

section#section-21 .img.colm-4 img {width:65.5%;	height:auto;float:left;}

section#section-21 .img.colm-5 {width:32.333%;}

section#section-21 .img.colm-5 .web {width:32.333%; margin-left:-0.25%;}

section#section-21 .img.colm-5 img {width:100%;	height:auto;overflow:hidden;float:left;}


section#section-21 .img.colm-6 {width:65.666%;}

section#section-21 .img.colm-6 .web {width:65.666%; margin-left:-0.25%;}

section#section-21 .img.colm-6 img {width:100%;	height:auto;overflow:hidden;float:left;}

section#section-21 .img .web-hardware {
	position: relative;
	z-Index: 99;
	left: 0;
	top: 0;
	width: 100%;
	height: auto;
}
section#section-21 .img .web-hardware a {cursor: default;}
section#section-21 .img .web-hardware.cursor a {cursor: pointer;}

section#section-21 .img .web-hardware img {
	width: 100%;
	position: relative;
	top: 0;
	left: 0;
	opacity: 1;
}

section#section-21 .img .web-image {
	height: auto;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
	z-index: 98;
	text-align: center;
	overflow: hidden;
	background-color: #333333;
}

section#section-21 .img .web-image img {
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
	height: auto;
	opacity: 1;
	margin: 0;
}
section#section-21 .img .web-image img.off {
	-webkit-animation: web-hardware-mobile-off 0.6s ease forwards;
	-moz-animation: web-hardware-mobile-off 0.6s ease forwards;
	-ms-animation: web-hardware-mobile-off 0.6s ease forwards;
	-o-animation: web-hardware-mobile-off 0.6s ease forwards;
	animation: web-hardware-mobile-off 0.6s ease forwards;
}
section#section-21 .img .web-image img.on {
	-webkit-animation: web-hardware-mobile-on 0.6s ease forwards;
	-moz-animation: web-hardware-mobile-on 0.6s ease forwards;
	-ms-animation: web-hardware-mobile-on 0.6s ease forwards;
	-o-animation: web-hardware-mobile-on 0.6s ease forwards;
	animation: web-hardware-mobile-on 0.6s ease forwards;
}

@-webkit-keyframes web-hardware-mobile-off {
 from { left: 0; }
 to { left: -100%; }
}
@-moz-keyframes web-hardware-mobile-off {
 from { left: 0; }
 to { left: -100%; }
}
@-o-keyframes web-hardware-mobile-off {
 from { left: 0; }
 to { left: -100%; }
}
@keyframes web-hardware-mobile-off {
 from { left: 0; }
 to { left: -100%; }
}

@-webkit-keyframes web-hardware-mobile-on {
 from { left: 100%; }
 to { left: 0; }
}
@-moz-keyframes web-hardware-mobile-on {
 from { left: 100%; }
 to { left: 0; }
}
@-o-keyframes web-hardware-mobile-on {
 from { left: 100%; }
 to { left: 0; }
}
@keyframes web-hardware-mobile-on {
 from { left: 100%; }
 to { left: 0; }
}


section#section-21 .img .web-image.backward img.off {
	-webkit-animation: web-hardware-mobile-backward-off 0.6s ease forwards;
	-moz-animation: web-hardware-mobile-backward-off 0.6s ease forwards;
	-ms-animation: web-hardware-mobile-backward-off 0.6s ease forwards;
	-o-animation: web-hardware-mobile-backward-off 0.6s ease forwards;
	animation: web-hardware-mobile-backward-off 0.6s ease forwards;
}
section#section-21 .img .web-image.backward img.on {
	-webkit-animation: web-hardware-mobile-backward-on 0.6s ease forwards;
	-moz-animation: web-hardware-mobile-backward-on 0.6s ease forwards;
	-ms-animation: web-hardware-mobile-backward-on 0.6s ease forwards;
	-o-animation: web-hardware-mobile-backward-on 0.6s ease forwards;
	animation: web-hardware-mobile-backward-on 0.6s ease forwards;
}

@-webkit-keyframes web-hardware-mobile-backward-off {
 from { left: 0; }
 to { left: 100%; }
}
@-moz-keyframes web-hardware-mobile-backward-off {
 from { left: 0; }
 to { left: 100%; }
}
@-o-keyframes web-hardware-mobile-backward-off {
 from { left: 0; }
 to { left: 100%; }
}
@keyframes web-hardware-mobile-backward-off {
 from { left: 0; }
 to { left: 100%; }
}

@-webkit-keyframes web-hardware-mobile-backward-on {
 from { left: -100%; }
 to { left: 0; }
}
@-moz-keyframes web-hardware-mobile-backward-on {
 from { left: -100%; }
 to { left: 0; }
}
@-o-keyframes web-hardware-mobile-backward-on {
 from { left: -100%; }
 to { left: 0; }
}
@keyframes web-hardware-mobile-backward-on {
 from { left: -100%; }
 to { left: 0; }
}



section#section-21 .img.monitor .web-image img.off, section#section-21 .img.monitor .web-image img.on,
section#section-21 .img.macbookair .web-image img.off, section#section-21 .img.macbookair .web-image img.on,
section#section-21 .img.macbookpro .web-image img.off, section#section-21 .img.macbookpro .web-image img.on {
	-webkit-animation: 0;
	-moz-animation: 0;
	-ms-animation: 0;
	-o-animation: 0;
	animation: 0;
	-webkit-transition: opacity 1.5s ease;
	-moz-transition: opacity 1.5s ease;
	-ms-transition: opacity 1.5s ease;
	-o-transition: opacity 1.5s ease;
	transition: opacity 1.5s ease;
}
section#section-21 .img.monitor .web-image img.off,
section#section-21 .img.macbookair .web-image img.off,
section#section-21 .img.macbookpro .web-image img.off {opacity: 0 !important;}
section#section-21 .img.monitor .web-image img.on,
section#section-21 .img.macbookair .web-image img.on ,
section#section-21 .img.macbookpro .web-image img.on {opacity: 1 !important;}


section#section-21 .img.ipad_landscape .web-image {
	height: 77%;
	left: 10%;
	top: 11%;
	width: 79.9%;
}

section#section-21 .img.ipad_portrait .web-image {
	height: 80%;
	left: 11.8%;
	top: 10%;
	width: 76.15%;
}

xxxsection#section-21 .img.iphone_portrait .web-image {
	height: 62.2%;
	left: 11.2%;
	top: 18.6%;
	width: 78.2%;
}


section#section-21 .img.iphone_portrait .web-image {
	height: 70.9%;
	left: 9.2%;
	top: 14.3%;
	width: 81.6%;
}

section#section-21 .img.iphone_landscape .web-image {
	height: 78%;
	left: 18.6%;
	top: 10%;
	width: 63%;
}

section#section-21 .img.macbookair .web-image {
	height: 79%;
	left: 14.1%;
	top: 7.5%;
	width: 72%;
}

section#section-21 .img.macbookpro .web-image {
	height: 82%;
	left: 14%;
	top: 6%;
	width: 72.2%;
}

section#section-21 .img.monitor .web-image {
	height: 66.7%;
	left: 4.9%;
	top: 5.9%;
	width: 90.1%;
}

section#section-21 .img.pano {}
section#section-21 .img.pano .pano-wrapper {
	float: left;
	height: 100%;
	overflow: hidden;
	position: absolute;
	top: 0;
	left: 0;
 width: 100%;
}

section#section-21 .img.colm-1.pano {float: none;}
section#section-21 .img.colm-1.pano img { width: 99.9%}

section#section-21 .img.colm-2.pano {float: left; width: 49.68%;}
section#section-21 .img.colm-2.pano .pano-wrapper {width: 100%;left: 0; right: auto;}
section#section-21 .img.colm-2.pano img.pano-img{ width: 100%; margin: 0; opacity: 0;}

section#section-21 .img .web-buttons {position: absolute; left: 0; top: auto; z-index: 100; height: 80px; width: 100%; white-space: nowrap; margin: 0 auto; display: block; text-align: center;}

section#section-21 .img .web-buttons a {
	display: inline-block;
	min-height: 10px;
	min-width: 10px;
	padding: 10px;
  overflow: hidden;
  position: relative;
}

section#section-21 .img .web-buttons a span {
	height: 6px;
	width: 6px;
	background: none repeat scroll 0 0 #949494;
	border: 1px solid transparent;
	border-radius: 50%;
	box-shadow: none;
	-webkit-transition: box-shadow 0.3s ease 0s;
	-moz-transition: box-shadow 0.3s ease 0s;
	-ms-transition: box-shadow 0.3s ease 0s;
	-o-transition: box-shadow 0.3s ease 0s;
	transition: box-shadow 0.3s ease 0s;
	position: absolute;
	right: 12px;
	top: 10px;
}

section#section-21 .img .web-buttons a:hover  span {background: none repeat scroll 0 0 #666666;}
section#section-21 .img .web-buttons a.on span {
	background: none repeat scroll 0 0 transparent;
	border: 1px solid #949494;
	cursor: default;
	height: 10px;
	width: 10px;
	right: 10px;
	top: 8px;
}

section#section-21 .img.monitor .web-buttons {bottom: -90px;}
section#section-21 .img.monitor .web-buttons a:first-child {margin-left: 8px;}
section#section-21 .img.macbookair .web-buttons {bottom: -90px;}
section#section-21 .img.macbookpro .web-buttons {bottom: -90px;}
section#section-21 .img.ipad_landscape .web-buttons{bottom: -90px;}
section#section-21 .img.ipad_portrait .web-buttons {bottom: -90px;}
section#section-21 .img.iphone_portrait .web-buttons{bottom: -90px;}
section#section-21 .img.iphone_landscape .web-buttons {bottom: -90px;}

section#section-21 .img.pano .pano-wrapper img.pano-img {position: absolute; z-index: 0; left: 0; top: 0; opacity: 0;}
section#section-21 .img.pano .pano-wrapper iframe.pano-frame {position: absolute; left: 0; top: 0; z-index: 1; width: 100%; height: 100%; opacity: 0;}
section#section-21 .img.pano .pano-wrapper .pano-sign {position: absolute; left: 0; top: 0; z-index: 2; width: 100%; height: 100%;}
section#section-21 .img.pano .pano-wrapper .pano-sign a {display: block; width: 100%; height: 100%; opacity: 1; position: relative;}
section#section-21 .img.pano .pano-wrapper .pano-sign a:hover {opacity: 1}
section#section-21 .img.pano .pano-wrapper .pano-sign a span {
	display: block; position: relative; top: 50%; left: 50%; margin-left: -100px; margin-top: -100px; height: 200px; width: 200px;
	background-image: url("../images/icons/pano_playbutton.png"); background-position: 0 0; background-repeat: no-repeat;}
section#section-21 .img.pano .pano-wrapper .pano-sign a:hover span {background-position: 0 -225px;}


#section-21 .section-inner-full { padding: 0;	width: 100%; clear: both; overflow: hidden; margin: 0 auto;}

#section-21 .category-description {clear: both; display: block; height: auto !important; margin: 0; max-width: 1485px; min-height: 10px; padding: 30px 0; text-align: center;}
#section-21 .category-description p.cat-descr {border: 0 none; display: block; max-width: 800px; overflow: hidden; padding: 50px 0; margin: 0 auto; text-align: center;  width: auto;}

section#section-2 .section-inner{padding-top: 20px; padding-bottom: 0;}
section#section-2 .sep-hori-dark {margin-bottom: 30px; margin-top: 0;}
section#section-21 .section-inner {width: 77%; max-width: 1485px;padding: 0;	clear: both; overflow: hidden;}
section#section-21 .section-inner-wrap{clear: both; overflow: hidden; padding: 0; width: 102%; overflow: hidden;}

section#section-21 .section-inner-full  .section-inner-wrap {width: 100%;}

section#section-21 .section-inner.social-media {padding: 3% 0.7% 0 0; text-align: center;}
section#section-21 .section-inner.social-media a {text-transform: uppercase; padding: 0 20px;}



a.open{
	cursor: pointer;
	margin-left: auto;
	margin-right: auto;
	display: block;	
	color: #fff;
}

a.open + .slide-content-outer {
	display: block;
	max-height: 0;
	overflow: hidden;
	-webkit-transition: max-height 0.9s linear;
	transition: max-height 0.9s linear;
}
a.open.on + .slide-content-outer {
	max-height: none;
}

#section-5 {padding-bottom: 8rem;}

.customers-list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	padding: 0 2rem 0.8rem 2rem;
}

.customers-list > ul {
  list-style-type: none;
  flex: 0 0 calc(33.333333% - 4rem);
	margin: 0 2rem;
	padding: 2rem 0 3rem 0;
	border-top: 1px solid #fff;
}
.customers-list > ul > li {
	list-style-type: none;
	text-align: center;
	display: flex;
	justify-content: center;
	width: 100%;
	padding: 0.3rem 0;
	text-transform: uppercase;
	font-size: 17px;
}


@media screen and (max-width: 999px) {
	.customers-list {padding: 0 1rem 0.8rem 1rem;}		
	.customers-list > ul {
		margin: 0 1rem;		
		flex: 0 0 calc(50% - 2rem);
	}
}
@media screen and (max-width: 600px) {
	.customers-list {padding: 0 0rem 0.8rem 0rem;}	
	.customers-list > ul {
		margin: 0;		
		flex: 0 0 calc(100%);
	}
	.customers-list > ul:not(:first-child) {
		border-top: none;
		padding-top: 0;
	}	
	.customers-list > ul:not(:last-child) {
		padding-bottom: 0;
	}		
}









/* Haupt-Wrapper zum zentrieren auf der Website */
.coming-soon-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 40px 20px;
    box-sizing: border-box;
    font-family: "Montserrat", sans-serif;
		color: #eee !important;
    background: transparent;
    text-align: center;
}

.coming-soon-content {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Texte */
.sub-title {
	text-transform: uppercase;
  font-family: "Montserrat", sans-serif;
	font-size: clamp(0.7rem, 1.5vw, 1.4rem) !important;
	font-weight: 500;
  letter-spacing: 0.75rem !important;
	margin-left: 0.75rem;
	/* color: #008b85 !important; */
	margin-bottom: 10px;
	text-align: center !important;
}

.main-title {
		color: #eee !important;
	  font-family: "Montserrat", sans-serif;
    font-size: clamp(2.02rem, 6vw, 6rem) !important;
    font-weight: 800;
    letter-spacing: 2px;
    margin: 0 0 30px 0;
		text-align: center !important;
}

/* Countdown Boxen */
.countdown-container {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 15px;
}

.countdown-item {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.countdown-number {
	font-size: clamp(34px, 5vw, 80px);
	font-weight: 700;
	line-height: 1;
	min-width: 2.2ch;
	font-variant-numeric: tabular-nums;
}

.countdown-label {
    font-size: clamp(9px, 1.8vw, 13px);
    letter-spacing: 2px;
    margin-top: 8px;
		letter-spacing: 0.25rem !important;
		font-weight: 500;
		text-align: center !important;
}

.countdown-separator {
    font-size: 40px;
    font-weight: 600;
    opacity: 0.6;
    line-height: 0.8;
}

@media (min-width: 1301px) and (orientation: landscape) {
	.coming-soon-wrapper {
		margin-top: -100px;
	}
}
	

@media (max-width: 600px) {
    .countdown-separator {
        font-size: 28px;
    }
    .countdown-container {
        gap: 4px;
    }
}


@media (max-width: 350px) {
    .countdown-number {font-size: 22px;}
    .countdown-label {font-size: 7px;}
}