@charset "utf-8";
/* CSS Document */
#animation_popup_section > div > div > div{
	padding-bottom: 80%;
	position: relative;	
}
#animation_popup_section > div > div > div > .et_pb_code_inner{
	height: 100%;
	position: absolute;
	width: 100%;	
}
.custom-code {
    padding-bottom: 80%;
    position: relative;
}


@media (min-width: 1200px) and (max-width: 1130px){
	#animation_popup_section > div > div > div{max-width:1100px;}	
}

@media (min-width: 992px) and (max-width: 1199px){
	#animation_popup_section > div > div > div{max-width:930px; margin-top:100px;}
}

@media (min-width: 768px) and (max-width: 991px){
	#animation_popup_section > div > div > div{max-width:720px; margin-top:150px;}
	.left-text, .right-text{font-size: 12px; line-height: 16px;}
	.left-text{padding:15px 31px 15px 19px; top: 87px;}
	.right-text{padding:15px 19px 15px 27px;  bottom:58px;}
	
}

@media (max-width: 767px){
	#animation_popup_section > div > div > div{max-width:720px; margin-top:150px;}
}

.et_pb_row.et_pb_row_5{z-index:100;}
.map-image{margin:0 auto; width:83.35%; height:100%; text-align:center; position:relative;}
.image-block{position:relative; margin-top:-5px; margin-bottom:15px; display:-md-flexbox; display: -ms-flex; display: flex;}
.st0{fill:#0F68B2;}
.st1{opacity:0.37;}
.st2{fill:url(#SVGID_1_);}
.st3{fill:#FFFFFF;}
.st4{fill:#6E9CD1;}
.st5{fill:url(#SVGID_2_);}
.st6{fill:#2480C2;}
.st7{fill:url(#SVGID_3_);}
.st8{fill:#B5CE43}
.st9{fill:#349937;}

.reveal {
  	opacity: 0;
  	visibility:visible;
  	-webkit-transition: all 0.5s ease-in-out;
	-moz-transition: all 0.5s ease-in-out;
	-ms-transition: all 0.5s ease-in-out;
	-o-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
}
.energie-wandler{transition: opacity 1.2s ease-in-out 0s }
.energie-speicher{transition: opacity 1.2s ease-in-out 0s}
.leichtbau{transition: opacity 1.2s ease-in-out 0s}
.machine-learning{transition: opacity 1.2s ease-in-out 0s}
.machine-learning-r{transition: opacity 1.2s ease-in-out 0s}
.st4,
.additive-fertigung{transition: opacity 1.2s ease-in-out 0s}
.additive-fertigung-m{transition: opacity 1.2s ease-in-out 0s}
.additive-fertigung-r{transition: opacity 1.2s ease-in-out 0s}
.left-text{transition: opacity 1.2s ease-in-out 0s}
.right-text{transition: opacity 1.2s ease-in-out 0s}

.image-animate{ display:-ms-flexbox; display: -ms-flex; display: flex; width:100%;}
.image-animate svg{width: 100%;}

#fade_rect{position:absolute; left:0; top:0; width:100%; height:100%; fill-opacity: 0.5;}
.fade_rect{fill:#FFFFFF;stroke:#000000;stroke-width: 0;}
.image-animate svg a{
	-webkit-transition: all 0.25s ease-in-out;
	-moz-transition: all 0.25s ease-in-out;
	-ms-transition: all 0.25s ease-in-out;
	-o-transition: all 0.25s ease-in-out;
	transition: all 0.25s ease-in-out;	
}
.image-animate.active svg a{fill-opacity:0.5;}
.image-animate.active svg a.active{position:relative; z-index:100; fill-opacity:1;}

.top-shadow{
	cursor:pointer;
	display:inline-block;
	position:relative; 
	left:-6%; 
	width:480px;
}
.top-shadow span{
	position: absolute; 
	left: 50%; 
	top: 51%; 
	width: auto; 
	-webkit-transform: translate(-50%,-50%); 
	transform: translate(-50%,-50%); 
	font-size:18px; 
	line-height:26px;
	font-family: 'OpenSans-ExtraBold';
	cursor:pointer;
	color: #000;
}
.bottom-shadow{
	cursor:pointer;
	position:relative; 
	right:-45%; 
	width:529px; 
}
.bottom-shadow span{
	position: absolute; 
	left: 50%; 
	top: 46%; 
	width: 100%; 
	-webkit-transform: translate(-50%,-50%); 
	transform: translate(-50%,-50%); 
	font-size:18px; 
	line-height:26px;
	font-family: 'OpenSans-ExtraBold';
	cursor:pointer;
	color: #000;
}

.left-text,
.right-text{
	position:absolute; 
	width:182px; 
	font-size:22px; 
	line-height: 1.2;
	text-align:center; 
	font-family: 'OpenSans-Italic';
	color:#4a4a4a;
	background:#d9d9d9;
	padding:14px 26px 14px 26px;
	height:max-content;
	display:-md-flexbox; 
	display: -ms-flex; 
	display: flex;
	-ms-justify-content: center;
	justify-content: center;
	-ms-align-items: center;
	align-items: center;
}
.left-text:before,
.right-text:before{position:absolute; content:''; margin-top:-15px; top:50%;}

.left-text{
	right:calc(100% + 7px); 
	top:114px; 
	margin-right:20px;
}
.right-text{
	-ms-align-self: flex-end;
	align-self: flex-end;
	left:calc(100% + 27px); 
	bottom:26px;
	margin-left:20px;
}
.left-text:before{left:100%;  border-top: 15px solid transparent; border-left: 25px solid #d9d9d9; border-bottom: 15px solid transparent;}
.right-text:before{right:100%; border-top: 15px solid transparent; border-right: 25px solid #d9d9d9; border-bottom: 15px solid transparent;}

.stp0{fill:#309935; animation: flickerAnimation 3s cubic-bezier(.42,-0.18,.5,1.14) infinite 4s;}
.stp1{fill:#41BEE8; animation: flickerAnimation 3s cubic-bezier(.42,-0.18,.5,1.14) infinite 2s;}
.stp2{fill:#B3CD42; animation: flickerAnimation 3s cubic-bezier(.42,-0.18,.5,1.14) infinite 4s;}
.stp3{fill:#DCE8B7; animation: flickerAnimation 3s cubic-bezier(.42,-0.18,.5,1.14) infinite 2s;}
.stp4{fill:#004B8E; animation: flickerAnimation 3s cubic-bezier(.42,-0.18,.5,1.14) infinite 4s;}
.stp5{fill:#D2DDF1; animation: flickerAnimation 3s cubic-bezier(.42,-0.18,.5,1.14) infinite 2s;}
.stp6{fill:#89ACDB; animation: flickerAnimation 3s cubic-bezier(.42,-0.18,.5,1.14) infinite 4s;}

.stb0{fill:#309935; animation: flickerAnimation 3s cubic-bezier(.42,-0.18,.5,1.14) infinite 4s;}
.stb1{fill:#41BEE8; animation: flickerAnimation 3s cubic-bezier(.42,-0.18,.5,1.14) infinite 2s;}
.stb2{fill:#B3CD42; animation: flickerAnimation 3s cubic-bezier(.42,-0.18,.5,1.14) infinite 4s;}
.stb3{fill:#DCE8B7; animation: flickerAnimation 3s cubic-bezier(.42,-0.18,.5,1.14) infinite 2s;}
.stb4{fill:#004B8E; animation: flickerAnimation 3s cubic-bezier(.42,-0.18,.5,1.14) infinite 4s;}
.stb5{fill:#D2DDF1; animation: flickerAnimation 3s cubic-bezier(.42,-0.18,.5,1.14) infinite 2s;}
.stb6{fill:#89ACDB; animation: flickerAnimation 3s cubic-bezier(.42,-0.18,.5,1.14) infinite 4s;}

@-webkit-keyframes flickerAnimation{
  0%   { opacity:1; }
  25%   { opacity:0.5; }
  50%  { opacity:0; }
  75%   { opacity:0.75; }
  100% { opacity:1; }
}

@keyframes flickerAnimation {
  0%   { opacity:1; }
  25%   { opacity:0.5; }
  50%  { opacity:0; }
  75%   { opacity:0.75; }
  100% { opacity:1; }
}

.four {
	opacity:0;
	visibility:hidden;
}

.modal-popup{
	position:absolute; 
	width:95%; 
	opacity:0; 
	visibility:hidden;
	background:#fff; 
	border-radius:3px;
	-webkit-transition: all .3s ease-in-out 0s;
	-moz-transition: all .3s ease-in-out 0s;
	-ms-transition: all .3s ease-in-out 0s;
	-o-transition: all .3s ease-in-out 0s;
	transition: all .3s ease-in-out 0s;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
	-webkit-filter: drop-shadow(0px 0px 14px rgba(0,0,0,0.30));
	-moz-filter: drop-shadow(0px 0px 14px rgba(0,0,0,0.30));
	-ms-filter: drop-shadow(0px 0px 14px rgba(0,0,0,0.30));
	-o-filter: drop-shadow(0px 0px 14px rgba(0,0,0,0.30));
	filter: drop-shadow(0px 0px 14px rgba(0,0,0,0.30));
	padding: 35px 35px !important;	
}
.modal-popup.additive{right:42%; top:37.25%; max-width:678px; }
.modal-popup.machine{right:42%; top:32%; max-width:678px; }
.modal-popup.smarte-materialien{left:72%; bottom:22%; max-width:870px; }
.modal-popup.energie{left:43%; top:24%; max-width:870px; }
.modal-popup.energie-wandler{left:13%; top:55%; max-width:678px; }
.modal-popup.energie-speicher{left:39%; top:55%; max-width:678px; }
.modal-popup.leichtbau{left:46%; top:55%; max-width:678px; }


.modal-popup.additive.open,
.modal-popup.machine.open,
.modal-popup.energie.open,
.modal-popup.smarte-materialien.open,
.modal-popup.energie-wandler.open,
.modal-popup.energie-speicher.open,
.modal-popup.leichtbau.open{opacity:1; visibility:visible;}

.modal-popup .modal-arrow {
    position: absolute;
	top: 14%;
	right: -29px;
	border-color: transparent;
	border-style: solid;
	border-width: 20px 20px 0;
	border-top-color: #fff;
	-webkit-transform: rotate(-90deg);
	transform: rotate(-90deg);
}
.modal-popup.smarte-materialien .modal-arrow{
	top: auto;
	right: auto;		
	left:50%;
	bottom:-19px;
	-webkit-transform: none;
	transform: none;
}
.modal-popup.energie .modal-arrow{
	top: -19px;
	right: auto;		
	left:50%;
	bottom:auto;
	-webkit-transform: rotate(-180deg);
	transform: rotate(-180deg);
}
.modal-popup .modal-close-icon{
	position: absolute;
	right: 30px;
	top: 18px;
	width: 24px;
	height: 24px;
	border: none;
	background: none;
	z-index: 1;
	cursor:pointer;
	padding: 5px;
}
.modal-popup .modal-close-icon .cross-1, 
.modal-popup .modal-close-icon .cross-2 {
    display: block;
    height: 2px;
    background: #000;
}
.modal-popup .modal-close-icon .cross-1 {
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    position: relative;
    top: 2px;
}
.modal-popup .modal-close-icon .cross-2 {
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}
.modal-popup .modal-inner{display:inline-block; width:100%; text-align:left; box-sizing:border-box; /*height: 100vh; max-height:510px;*/ overflow:hidden;}
.modal-popup .modal-inner h2{display:inline-block; width:100%; margin:0; font-size:30px; color: #000;}
.modal-popup .modal-inner h4{display:inline-block; width:100%; margin:0; font-size:22px; color: #000;}
.modal-popup .modal-inner .modal-content{display:-ms-flexbox; display:-ms-flex; display:flex; width:100%; margin:35px 0 0 0; /*height: 100vh; max-height:415px;*/ overflow:auto; float:left; }
.modal-popup.machine .modal-inner .modal-content,
.modal-popup.additive .modal-inner .modal-content{flex-direction:column-reverse;}
.modal-popup .modal-inner .modal-content .modal-text{width:100%; float:left; padding-right:15px;}
.modal-popup.additive .modal-inner .modal-content .modal-text,
.modal-popup.machine .modal-inner .modal-content .modal-text{padding-right:0px;}
.modal-popup.energie .modal-inner .modal-content .modal-text,
.modal-popup.smarte-materialien .modal-inner .modal-content .modal-text{width:50%;}
.modal-popup .modal-inner .modal-content .modal-text p{display:inline-block; width:100%; font-size:14px; font-family: 'OpenSans-Regular'; margin:0; line-height:24px; color:#000;}
.modal-popup .modal-inner .modal-content .modal-text p + p{margin:15px 0 0 0;}
.modal-popup .modal-inner .modal-content .modal-text ul{display:inline-block; width:100%; padding:0; margin:0;}
.modal-popup .modal-inner .modal-content .modal-text ul li{display:inline-block; width:100%; font-size:14px; margin-bottom:5px; position:relative; font-family: 'OpenSans-Regular'; padding-left:10px;}
.modal-popup .modal-inner .modal-content .modal-text ul li:before{position:absolute; left:0px; top:8px; width:5px; height:5px; content:''; background:#B2CD43;}
.modal-popup .modal-inner .modal-content .modal-text a{display:inline-block; width:auto; background:#1d276c; color:#fff; padding:8px 30px; font-size:14px; font-family: 'OpenSans-Regular'; text-decoration:none; margin-top:5px;}
.modal-popup.energie .modal-inner .modal-content .modal-text a,
.modal-popup.smarte-materialien .modal-inner .modal-content .modal-text a{margin-top:50px;}
.modal-popup .modal-inner .modal-content .modal-image{width:100%; float:left; margin-bottom:20px;}
.modal-popup.energie .modal-inner .modal-content .modal-image,
.modal-popup.smarte-materialien .modal-inner .modal-content .modal-image{width:50%;}
.modal-popup .modal-inner .modal-content .modal-image > img{float:left; width:100%;}
.modal-popup .modal-inner .modal-content .modal-image > ul{display:flex; flex-wrap: wrap; width:100%; list-style:none; padding:0px; margin:0px;}
.modal-popup .modal-inner .modal-content .modal-image > ul > li{width:50%; list-style:none; padding:2px 2px;}
.modal-popup .modal-inner .modal-content .modal-image > ul > li > img{float:left; width:100%;}

@media (min-width: 1370px) and (max-width: 1450px) {
	.map-image{max-width:84.5%; width:100%;}
	.bottom-shadow{ right: -46%;}
	.left-text, 
	.right-text{font-size:16px; padding:14px 24px 14px 24px;}
	.left-text{top:119px;}
	.modal-popup.machine{right: auto; left:90px; top:395px; max-width:570px;}
	.modal-popup.additive {right: auto; left:90px; top:443px; max-width:570px;}
	.modal-popup.energie{left:42%; top:23%;}
	.modal-popup.smarte-materialien{left: 70%; bottom: 24%;}
	.modal-popup.smarte-materialien .modal-arrow{left:60%;}
	.modal-popup.energie-wandler{left:13%; top:53%; max-width:678px; }
	.modal-popup.energie-speicher{left:30%; top:53%; max-width:678px; }
	.modal-popup.leichtbau{left:46.5%; top:53%; max-width:678px; }
	
	.modal-popup .modal-arrow{top:116px;}
} 


@media (min-width: 1200px) and (max-width: 1369px) {
	.map-image{max-width:86%; width:100%;}
	.bottom-shadow{ right: -44%;}
	.left-text, 
	.right-text{font-size:16px;}
	.modal-popup.machine{right: auto; left:90px; top:400px; max-width:530px;}
	.modal-popup.additive {right: auto; left:90px; top:451px; max-width:530px;}
	.modal-popup.energie{left:42%;}
	.modal-popup.smarte-materialien{left: 70%; bottom: 25%;}
	.modal-popup.smarte-materialien .modal-arrow{left:60%;}
	.modal-popup.energie-wandler{left:15%; top:53%; max-width:678px; }
	.modal-popup.energie-speicher{left:31%; top:53%; max-width:678px; }
	.modal-popup.leichtbau{left:47.5%; top:53%; max-width:678px; }
	
	.modal-popup .modal-arrow{top:116px;}
	.modal-popup.smarte-materialien,
	.modal-popup.energie{max-width: 800px;}
	
}

@media (min-width: 992px) and (max-width: 1199px) {
	.map-image{max-width:89.25%; width:100%;}
	.left-text:before, .right-text:before{margin-top:-8px;}
	.left-text{right:calc(100% + 6px);}
	.left-text:before {border-top: 8px solid transparent; border-left: 16px solid #d9d9d9; border-bottom: 8px solid transparent;}
	.right-text{left: calc(100% + 6px);}
	.right-text:before {border-top: 8px solid transparent; border-right: 16px solid #d9d9d9; border-bottom: 8px solid transparent;}
	.bottom-shadow{right: -37%;}
	.left-text{top:102px;}
	.left-text, 
	.right-text{font-size:16px; padding:10px 10px 10px 10px}
	
	.modal-popup.machine{left: 50%; top: 50%; max-width: 800px; -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%);}
	.modal-popup.additive {left: 50%; top: 50%; max-width: 800px; -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%);}
	.modal-popup.smarte-materialien{left: 50%; top: 50%; bottom:auto; max-width: 800px; -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%);}
	.modal-popup.energie{left: 50%; top: 50%; max-width: 800px; -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%);}
	.modal-popup.energie-wandler{left: 50%; top: 50%; max-width: 678px; -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%); }
	.modal-popup.energie-speicher{left: 50%; top: 50%; max-width: 678px; -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%); }
	.modal-popup.leichtbau{left: 50%; top: 50%; max-width: 678px; -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%); }
	
	.modal-popup .modal-arrow{display: none;}
	.modal-popup .modal-inner .modal-content{ flex-direction: column-reverse;}
	.modal-popup .modal-inner .modal-content .modal-text a{margin-top:0px;}
}

@media (min-width: 768px) and (max-width: 991px) {
	.map-image{max-width:670; width:65%;}
	.top-shadow{width:320px;}
	.bottom-shadow{right: -32%; width:349px}
	.top-shadow span,
	.bottom-shadow span{font-size:12px; line-height:18px;}
	.left-text{top:43px; left:auto; right:calc(100% - 10px);}
	.right-text{right: auto; bottom: 7px; left:calc(100% + 0px);}
	.left-text:before,
	.right-text:before {margin-top:-8px;}
	.left-text:before {border-top: 8px solid transparent; border-left: 15px solid #d9d9d9; border-bottom: 8px solid transparent;}
	.right-text:before {border-top: 8px solid transparent; border-right: 15px solid #d9d9d9; border-bottom: 8px solid transparent;}
	.left-text, 
	.right-text{font-size:12px; padding: 10px 14px 10px 14px;}
	
	.modal-popup.machine{left: 50%; top: 50%; max-width: 800px; -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%);}
	.modal-popup.additive {left: 50%; top: 50%; max-width: 800px; -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%);}
	.modal-popup.smarte-materialien{left:50%; top:50%; bottom:auto; max-width:800px; -webkit-transform:translate(-50%,-50%); transform:translate(-50%,-50%);}
	.modal-popup.energie{left: 50%; top: 50%; max-width: 800px; -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%);}
	.modal-popup.energie-wandler{left: 50%; top: 50%; max-width: 678px; -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%); }
	.modal-popup.energie-speicher{left: 50%; top: 50%; max-width: 678px; -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%); }
	.modal-popup.leichtbau{left: 50%; top: 50%; max-width: 678px; -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%); }
	
	.modal-popup .modal-arrow{display: none;}
	.modal-popup .modal-inner .modal-content{ flex-direction: column-reverse;}
	.modal-popup .modal-inner .modal-content .modal-text a{margin-top:0px;}
}


@media (max-width: 767px) {
	.map-image{max-width:670px; width:95%; display:none;}
	.bottom-shadow{ right: -52%;}
	.left-text, .right-text{position:relative;}
	.left-text{top:42px; left:0px;}
	.right-text{right: 0px; bottom: 7px; left: auto;}
	.left-text:before,
	.right-text:before {margin-top:-8px;}
	.left-text:before {border-top: 8px solid transparent; border-left: 15px solid #d9d9d9; border-bottom: 8px solid transparent;}
	.right-text:before {border-top: 8px solid transparent; border-right: 15px solid #d9d9d9; border-bottom: 8px solid transparent;}
	.left-text, 
	.right-text{font-size:12px; padding: 10px 14px 10px 14px;}
	
 	.modal-popup.machine{left: 50%; top: 50%; max-width: 800px; -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%);}
	.modal-popup.additive {left: 50%; top: 50%; max-width: 800px; -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%);}
	.modal-popup.smarte-materialien{left: 50%; top: 50%; max-width: 800px; -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%);}
	.modal-popup.energie{left: 50%; top: 50%; max-width: 800px; -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%);}
	.modal-popup.energie-wandler{left: 50%; top: 50%; max-width: 678px; -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%); }
	.modal-popup.energie-speicher{left: 50%; top: 50%; max-width: 678px; -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%); }
	.modal-popup.leichtbau{left: 50%; top: 50%; max-width: 678px; -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%); }
	
	.modal-popup .modal-arrow{display: none;} 
	.modal-popup .modal-inner .modal-content{ flex-direction: column-reverse;}
	.modal-popup .modal-inner .modal-content .modal-text a{margin-top:0px;}
}


@media (min-width: 568px) and (max-width: 767px) {

}


@media (min-width: 240px) and (max-width: 567px) {

}