.logo {
  position: absolute;
  bottom: 5%;
    right: 70px;
    z-index: 34;
    height: 100px;
}
.logo img {
  width: 236px;
  height: auto;
  position: absolute;
  top: 0;
  left: 0;
}
#text_logo {
    color: #fff;
    position: relative;
    top: 50px;
    font-size: 14px;  
}

#mouse_left_to_right,
#text_scroll {
    color: #fff;
    left: 0%;
    position: fixed;
    bottom: 5%;
  -webkit-transform: scale(0,0) translate(0, -200px);
  -ms-transform: scale(0,0) translate(0, -200px);
  transform: scale(0,0) translate(0, -200px); 
  transition: transform 300ms cubic-bezier(0.645, 0.045, 0.355, 1.000), translate 300ms cubic-bezier(0.645, 0.045, 0.355, 1.000), scale 300ms cubic-bezier(0.645, 0.045, 0.355, 1.000);     

}
#mouse_left_to_right {
  bottom: 15px;
}
#mouse_left_to_right.show_text,
#text_scroll.show_text {
    -webkit-transform: scale(1,1) translate(0, 0); 
  -ms-transform: scale(1,1) translate(0, 0); 
  transform: scale(1,1) translate(0, 0); 
  transition: transform 300ms cubic-bezier(0.645, 0.045, 0.355, 1.000), translate 300ms cubic-bezier(0.645, 0.045, 0.355, 1.000), scale 300ms cubic-bezier(0.645, 0.045, 0.355, 1.000);      

}
.scene_1 {
  height: 6000px;
  width: 100vw;
  background-color: #656565; 
  position: absolute;
  left: 0;  
  transition: 1s all ease-in;
      z-index: 222;
}
.scene_1.night {
  background-color: #121212;
  transition: 1s all ease-in;
  z-index: 222;
}
.scene_2 {
  width: 100vw;
  height: 100vh;
  background: #000;
  position: absolute;
  top: 5000px;
  left: 0; 
  z-index:222;
}

.scene_3 {
  position: absolute;
  top: 12000px;
  left: 0;
  height: 6000px;
  width: 100vw;
  transition: 1s all ease-in;  
/* 
  width: 100vw;
  height: 100vh;
  background: #000;
  position: absolute;
  top: 15000px;
  left: 0; 
  z-index:222;*/
}
.scene_4 {
  position: absolute;
  top: 23000px;
  left: 0;
  height: 4000px;
  width: 100vw;
  background-color: #fff; 
  transition: 1s all ease-in;  
}
.scene_5 {
  position: absolute;
  top: 28000px;
  left: 0;
  height: 6000px;
  width: 100vw;
  background: linear-gradient(90deg, rgba(15,19,77,1) 0%, rgba(130,185,225,1) 0%, rgba(0,155,119,1) 49%);
  transition: 1s all ease-in;    
}


.notvis {
  display: none;
}

.halfopacity {
  opacity: .1;
}
.actions {
  margin: 0 !important;
}

/*
#figur {
    width: 40px;
    position: absolute;
    left: 1370px;
    top: 540px;
  display: none;
}
*/

.text_container p {
  overflow: hidden; /* Ensures the content is not revealed until the animation */
  white-space: nowrap; /* Keeps the content on a single line */
  margin: 0 auto; /* Gives that scrolling effect as the typing happens */
  /*letter-spacing: .15em; /* Adjust as needed */
  opacity: 0;
}
#one.opacity_on,
#two.opacity_on,
#three.opacity_on,
#four.opacity_on,
#five.opacity_on,
#six.opacity_on {
  opacity: 1;
}
#one.animation_on {
  opacity: 1;
  border-right: 5px solid #fff; /* The typwriter cursor */
    animation: 
    typing 1.5s steps(40, end),
    blink-caret .75s step-end infinite;
}
#two.animation_on {
  opacity: 1;
  border-right: 5px solid #fff; /* The typwriter cursor */  
  animation: 
    typing 1.5s steps(40, end),
    blink-caret .75s step-end infinite
}
#three.animation_on {
  opacity: 1;
  border-right: 5px solid #fff; /* The typwriter cursor */
  animation: 
    typing 1.5s steps(40, end),
    blink-caret .75s step-end infinite
}
#four.animation_on {
  opacity: 1;
  border-right: 5px solid #fff; /* The typwriter cursor */
  animation: 
    typing 1.5s steps(40, end),
    blink-caret .75s step-end infinite
}
#five.animation_on {
  opacity: 1;
  border-right: 5px solid #fff; /* The typwriter cursor */
  animation: 
    typing 1.5s steps(40, end),
    blink-caret .75s step-end infinite
}
#six.animation_on {
  opacity: 1;
  border-right: 5px solid #fff; /* The typwriter cursor */
  animation: 
    typing 1.5s steps(40, end),
    blink-caret .75s step-end infinite
}
/* The typing effect */
@keyframes typing {
  from { width: 0 }
  to { width: 100% }
}

/* The typewriter cursor effect */
@keyframes blink-caret {
  from, to { border-color: transparent }
  50% { border-color: #fff; }
}

.text_container {
  z-index: 23;
  position: fixed;
  left: 30%;
  top: 400px;
  width: 600px;
  background: #c6c6c6;
  padding: 50px;
  border-radius: 5px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-300px);
  transition: .5s all ease-in;
}
.text_container.fade_in {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);  
  transition: .5s all ease-in;
}
.text_container p {
  margin: 0 !important;
}
.ground {
  height: 30%;
  background: #000;
}
.sky_form,
.sky_gewerbe,
.sky_privat,
.sky {
  height: 75%;
  background: background: rgb(15,19,77);
  background: linear-gradient(90deg, rgba(15,19,77,1) 0%, rgba(130,185,225,1) 0%, rgba(0,155,119,1) 49%);
  transition: 1s all ease-in;
  z-index: 222;
} 
.sky_gewerbe {
   background-image: url(https://9489756.fs1.hubspotusercontent-na1.net/hubfs/9489756/background_blau.png);
   background-size: cover;
   background-position: 100% 100%;
}
.sky_privat {
   background-image: url(https://9489756.fs1.hubspotusercontent-na1.net/hubfs/9489756/background_gruen.png);
   background-size: cover;
   background-position: 100% 100%;
}


#elektriker_gewerbe {
  width: 300px;
  position: fixed;
  bottom: 20%;
  right: 3%; 
}
#elektriker_gewerbe2 {
  width: 300px;
  position: fixed;
  bottom: 20%;
  left: 4%; 
  z-index: 2;
  display: none;
}
#elektriker_privat {
  width: 300px;
  position: fixed;
  bottom: 20%;
  left: 0;  
}

.sky.night {
  background: #121212;
  transition: 1s all ease-in;
}
#shine_bright p,
.sky_gewerbe p,
.sky_privat p,
.sky p {
  color: #fff;
  font-size: 22px !important;
  font-weight: 500;
  position: fixed;
  bottom: 65px;
  left: 40px; 
} 
#claim { 
  color: #fff;
  font-size: 22px !important;
  font-weight: 500;
  position: fixed;
  bottom: 5%;
  left: 40px; 
  z-index: 333;
}
.scene_2_text_container,
.ground p {
  color: #fff;
  font-size: 14px !important;
  font-weight: 500;
  position: fixed;
  bottom: 40px;
  right: 66px;
  width: 600px;
  z-index: 3;
}
.scene_2_text_container {
  bottom: 20px;  
}
.scene_2_text_container.not_visible {
  display: none;
}
.buffer {
    height: 4000px;
    width: 100%;
    background: #000;
    position: absolute;
    top: 17000px;
    left: 0;
    z-index: 2;
}
.buffer2 {
    height: 800px;
    width: 100%;
    background: #000;
    position: absolute;
    top: 28000px;
    left: 0;
    z-index: 2;
}
.background_container {
  top: 0%;
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 1;
}
.form_container {
  background: #656565;
  padding: 50px;
  position: fixed;
  position: relative;
  top: 100px;
  left: 31%;
  width: 600px;
  height: 760px;
  z-index: 1;
  border-radius: 16px;
}

.footer.footer,
.header {
  display: none;
}
.dnd_area-row-0-padding {
  padding: 0 !important;
}
#moon,
#sun {
  z-index: 2;
}

.motionsensor_container {
    left: 33%;
    top: 33%;
    position: fixed;
    width: 700px;
    z-index: 3; 
} 
.family_container {
   left: 33%;
    top: 33%;
    position: fixed;
    width: 700px;
    z-index: 2;
    transform: scale(1);
    transition: 1s ease-in;    
}
.lighting_container {
    left: 33%;
    top: 27%;
    position: fixed;
    width: 700px;
    z-index: 2;
    transform: scale(1);
    transition: 1s ease-in;  
}
.lighting_container.scale_on {
    top: 20%;
  transform: scale(1.3);
  transition: 1s transform ease-in;
}
#familie_mandulis_square,
#familie_mandulis_circle,
#familie_amatera_shift,
#mandulis_square,
#mandulis_circle,
#amatera_shift {
  position: absolute;
  transform: translateX(0);
  transform: translateY(0);
/*  transform: scale(.8); */
  transition: 1s transform ease-in;
  opacity: 1;
  visibility: visible;
}
#familie_mandulis_square,
#familie_mandulis_circle,
#familie_amatera_shift {
  top: -100px;
  left: -200px;
}


#scene_2_text_container_one,
#scene_2_text_container_two,
#scene_2_text_container_three {
  transform: translateX(0);
  transition: .5s transform ease-in;
  opacity: 1;
  visibility: visible;
}
#scene_2_text_container_one.not_visible,
#scene_2_text_container_two.not_visible,
#scene_2_text_container_three.not_visible {
  visibility: hidden;
  opacity: 0;
  transform: translateX(500px);
  transition: .5s transform ease-in;
}

#familie_mandulis_square.not_visible,
#mandulis_square.not_visible {
  visibility: hidden;
  opacity: 0;
  transform: translateY(-2000px);
  transition: .5s transform ease-in;

}
#familie_mandulis_circle.not_visible,
#mandulis_circle.not_visible {
  visibility: hidden;
  opacity: 0;
  transform: translateX(-2000px);
  transition: .5s transform ease-in;
}
#familie_amatera_shift.not_visible,
#amatera_shift.not_visible {
  visibility: hidden;
  opacity: 0;
  transform: translateX(2000px);
  transition: .5s transform ease-in;
}
/*
#Ebene_1 {
  transform: scale(.8);
  transition: 1s transform ease-in;
}
#Ebene_1.scale_on {
  position: relative;
    top: -120px;
  transform: scale(1.7);
  transition: 1s transform ease-in;
}
*/
#_Shine_Mandulis_SQUARE_Wand_,
#_Shine_Mandulis_SQUARE_60_,
#_Shine_Mandulis_SQUARE_100_ {
   visibility: visible;
  opacity: 1;
  transition: 1s all ease-in; 
}
#_Shine_Mandulis_SQUARE_Wand_.not_visible,
#_Shine_Mandulis_SQUARE_60_.not_visible,
#_Shine_Mandulis_SQUARE_100_.not_visible {
  visibility: hidden;
  opacity: 0;
  transition: 1s all ease-in;
}

.info_container {
  margin: 0 auto;
  background-color: #c6c6c6;
  width: 1280px;
  position: relative;
  top: 200px;
  padding: 50px;  
}

.feature_container {
  position: fixed;
  left: 0%;
  bottom: 90%;
  visibility: hidden;
  opacity: 0;  
  z-index: 33;
}
.feature_container.active {
  visibility: visible;
  opacity: 1;
  transition: 1s all ease-in;
}
.wrap_container {
  position: relative;
  left: 0;
  top: 435px;
  z-index: 23;
}
.feature_wrap {
      width: 5000px;
    flex-direction: row;
    margin-top: 60px;
    display: flex;
    overflow: hidden;
  position: relative;
  
}
.feature_block {
    width: 290px;
    height: 80px;
    background-color: #fff;
    border-radius: 20px;
    flex-direction: column;
    margin-right: 10px;
    padding: 20px;
    display: flex;
    position: relative;  
}

p.feature_copy {
    color: #000;
    text-align: center;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 16px;
    line-height: 1.4;
    width: 100%;
    margin-bottom: 0 !important;
}
p.feature_headline {
  font-size: 16px !important;
  font-weight: 600;
  margin-bottom: 0 !important; 
  text-align: center;
}
.first_line {
   display: flex;
   flex-direction: row;
   margin-left: auto;
   margin-right: auto;
   transform: none;
   position: absolute;
   top: 0;
   left: -1500px;
  }

.second_line {
   display: flex;
   flex-direction: row;
   margin-top: 10px;
   transform: none;
   position: absolute;
   top: 80px;
}
/*.feature_outer {
    background-color: #c6c6c6;
    border-radius: 5px;
    box-shadow: 1px 1px 5px 0px;
    margin: 40px 0px;
    padding: 20px;
    text-align: center;
    width: 300px;
} */


#accu.feature_outer,
#modi.feature_outer,
#lebensdauer.feature_outer,
#laufzeit.feature_outer,
#bewegegungsmelder.feature_outer {
  visibility: hidden;
  opacity: 0;
}
#accu.feature_outer.active,
#modi.feature_outer.active,
#lebensdauer.feature_outer.active,
#laufzeit.feature_outer.active,
#bewegegungsmelder.feature_outer.active {
  transform: translateX(200px);
  transition: 1s all ease-in;
  opacity: 1;
  visibility: visible;
}
#sun { 
  position: fixed; 
  top: 100px; 
  left: 10px; 
/*   width: 200px;
  height: 200px;
  border-radius: 50%;
  background-color: #FDB813;*/
} 
#moon { 
  position: fixed; 
  top: 10px; 
  left: -200px; 
  width: 150px;
  height: 150px;
  border-radius: 50%;
/*  background-color: #F6F1D5; 
    transform: translateX(-200px);  */
} 


.sun { 
  position: relative;
	top:0;
	left:0;
	right:0;
	bottom:0;
	margin: auto;  
	width:70px;
	height:70px;
	border-radius:50%;	
	background: #FDB813;
	opacity:0.9;			
	box-shadow: 0px 0px 40px 15px white;  
}

.ray_box {
  position: absolute;
  margin: auto;
	top:0px;
	left:0;
	right:0;
	bottom:0;	
  width:70px;  
  -webkit-animation: ray_anim 20s linear infinite;
  animation: ray_anim 20s linear infinite;
}
.ray {  
    background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 50%, rgba(255,255,255,0) 100%);
		background: linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 50%, rgba(255,255,255,0) 100%); 
    margin-left:10px;
    border-radius:80% 80% 0 0;
    position:absolute;
    opacity:0.1;
}

.ray1 {    
    height:170px;
    width:30px;
   -webkit-transform: rotate(180deg);
    top:-175px;
    left: 15px;
}
.ray2 {
    height:100px;
    width:8px;
   -webkit-transform: rotate(220deg);
    top:-90px;
    left: 75px;
}
.ray3 {
    height:170px;
    width:50px;
   -webkit-transform: rotate(250deg);
    top:-80px;
    left: 100px;
}
.ray4 {
    height:120px;
    width:14px;
   -webkit-transform: rotate(305deg);
    top:30px;
    left: 100px;
}
.ray5 {
    height:140px;
    width:30px;
   -webkit-transform: rotate(-15deg);
    top:60px;
    left: 40px;
}
.ray6 {
    height:90px;
    width:50px;
   -webkit-transform: rotate(30deg);
    top:60px;
    left: -40px;
}
.ray7 {
    height:180px;
    width:10px;
   -webkit-transform: rotate(70deg);
    top:-35px;
    left: -40px;
}
.ray8 {
    height:120px;
    width:30px;
   -webkit-transform: rotate(100deg);
    top:-45px;
    left:-90px;
}
.ray9 {
    height:80px;
    width:10px;
   -webkit-transform: rotate(120deg);
    top:-65px;
    left:-60px;
}
.ray10 {
    height:190px;
    width:23px;
   -webkit-transform: rotate(150deg);
    top:-185px;
    left: -60px;
}


@-webkit-keyframes ray_anim { 
		0% { -webkit-transform: rotate(0deg); transform: rotate(0deg);}    
    100% { -webkit-transform: rotate(360deg); transform: rotate(360deg);}
}


.moon {
  background-color: #f5f5f5;
  height: 8em;
  width: 8em;
  border-radius: 50%;
  position: absolute;
  margin: auto;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  box-shadow: 0 0 0 0.6em rgba(255, 255, 255, 0.05),
    0 0 0 1.2em rgba(255, 255, 255, 0.05), 0 0 0 1.8em rgba(255, 255, 255, 0.05);
}
.moon:after {
  position: absolute;
  content: "";
  background-color: #e6e6e6;
  height: 0.9em;
  width: 0.9em;
  border-radius: 50%;
  top: 3.75em;
  left: 1.25em;
  box-shadow: 0.9em -2.1em 0 0.2em #e6e6e6, 1.5em -0.3em 0 -0.06em #e6e6e6;
}

#battery {
  height: 350px;
  width: 350px;
  position: fixed;
  top: 68%;
  left: 42%;
  z-index: 3;
}


.container {
  height: 350px;
  width: 350px;
  position: relative;
}
.container * {
  position: absolute;
}

.battery {
  top: 50%;
  left: 42%;
  transform: translate(-50%, -50%);
  height: 85px;
  width: 190px;
  border: 5px solid #F1F1F1;
  border-radius: 7px;
  padding: 5px;
}
.battery::before {
  content: '';
  position: absolute;
  height: 30px;
  width: 10px;
  background: #F1F1F1;
  left: 185px;
  top: 50%;
  transform: translateY(-50%);
  border-radius: 0 3px 3px 0;
}
.part {
/*  background: #0F0;*/
  background: #FDB813;
  top: 5px;
  left: 5px;
  bottom: 5px;
  border-radius: 3px;
  width: 9px;
}

@keyframes animate {
  0% {
    width: 0%;
    background: #F00;
  }
  50% {
    width: 48%;
    background:orange;
  }
  100% {
    width: 95%;
    background: #0F0;
  }
}
#features_mode_0.show_text,
#features_mode_1.show_text,
#features_mode_2.show_text,
#features_mode_3.show_text,
#features_mode_4.show_text,
#features_amatera_shift.show_text,
#features_mandulis_circle.show_text,
#features_mandulis_square.show_text,
#text_amatera_shift_100.show_text,
#text_amatera_shift_60.show_text,
#text_amatera_shift_wand.show_text,
#text_mandulis_circle_100.show_text,
#text_mandulis_circle_60.show_text,
#text_mandulis_circle_wand.show_text,
#text_mandulis_square_100.show_text,
#text_mandulis_square_60.show_text,
#text_mandulis_square_wand.show_text {
/*  opacity: 0;
  visibility: hidden;
  transition: .2s all ease-in;
*/
  -webkit-transform: scale(1,1) translate(0, 0); 
  -ms-transform: scale(1,1) translate(0, 0); 
  transform: scale(1,1) translate(0, 0); 
  transition: transform 300ms cubic-bezier(0.645, 0.045, 0.355, 1.000), translate 300ms cubic-bezier(0.645, 0.045, 0.355, 1.000), scale 300ms cubic-bezier(0.645, 0.045, 0.355, 1.000);      
  
}
#features_mode_0,
#features_mode_1,
#features_mode_2,
#features_mode_3,
#features_mode_4,
#features_amatera_shift,
#features_mandulis_circle,
#features_mandulis_square,
#text_amatera_shift_100,
#text_amatera_shift_60,
#text_amatera_shift_wand,
#text_mandulis_circle_100,
#text_mandulis_circle_60,
#text_mandulis_circle_wand,
#text_mandulis_square_100,
#text_mandulis_square_60,
#text_mandulis_square_wand {
  
  position: fixed;  
  opacity: 1;
  visibility: visible;
  z-index: 2;
  font-size: 20px;
  font-weight: 600;
  font-family: 'Montserrat';  
  transition: .2s all ease-in;
  background: #000;
  padding: 10px;
  border-radius: 16px;
  color: #fff;  

  -webkit-transform: scale(0,0) translate(0, -200px);
  -ms-transform: scale(0,0) translate(0, -200px);
  transform: scale(0,0) translate(0, -200px); 
  transition: transform 300ms cubic-bezier(0.645, 0.045, 0.355, 1.000), translate 300ms cubic-bezier(0.645, 0.045, 0.355, 1.000), scale 300ms cubic-bezier(0.645, 0.045, 0.355, 1.000);     
  
  
}

#text_amatera_shift_100:hover,
#text_amatera_shift_60:hover,
#text_amatera_shift_wand:hover,
#text_mandulis_circle_100:hover,
#text_mandulis_circle_60:hover,
#text_mandulis_circle_wand:hover,
#text_mandulis_square_100:hover,
#text_mandulis_square_60:hover,
#text_mandulis_square_wand:hover {
  background: #0091ff;
  cursor: pointer;
}


#text_amatera_shift_100,
#text_mandulis_circle_100,
#text_mandulis_square_100 {
  left: 48.3%;
  top: 29.3%;
}
#text_amatera_shift_60,
#text_mandulis_circle_60,
#text_mandulis_square_60 {
    left: 60.5%;
    top: 40.8%;
}
#text_amatera_shift_wand,
#text_mandulis_circle_wand,
#text_mandulis_square_wand {
    left: 72%;
    top: 51.9%;
}

#features_amatera_shift,
#features_mandulis_circle,
#features_mandulis_square {
  right: 1%;
  top: 14%;
}
#feature_mode_0,
#feature_mode_1,
#feature_mode_2,
#feature_mode_3,
#feature_mode_4,
#feature_amatera_shift,
#feature_mandulis_circle,
#feature_mandulis_square {
  background: none;
  width: 400px;
  color: #fff;
  text-align: left;
}
#feature_mode_0 .feature_copy,
#feature_mode_1 .feature_copy,
#feature_mode_2 .feature_copy,
#feature_mode_3 .feature_copy,
#feature_mode_4 .feature_copy,
#feature_amatera_shift .feature_copy,
#feature_mandulis_circle .feature_copy,
#feature_mandulis_square .feature_copy,
#feature_mode_0 .feature_headline, 
#feature_mode_1 .feature_headline, 
#feature_mode_2 .feature_headline, 
#feature_mode_3 .feature_headline, 
#feature_mode_4 .feature_headline, 
#feature_amatera_shift .feature_headline,
#feature_mandulis_circle .feature_headline,
#feature_mandulis_square .feature_headline {
  color: #fff;
  text-align: left; 

}
#feature_mode_0 .feature_copy,
#feature_mode_1 .feature_copy,
#feature_mode_2 .feature_copy,
#feature_mode_3 .feature_copy,
#feature_mode_4 .feature_copy,
#feature_amatera_shift .feature_copy,
#feature_mandulis_circle .feature_copy,
#feature_mandulis_square .feature_copy {
  font-weight: 500;
}
#feature_mode_0.feature_block,
#feature_mode_1.feature_block,
#feature_mode_2.feature_block,
#feature_mode_3.feature_block,
#feature_mode_4.feature_block,
#feature_amatera_shift.feature_block,
#feature_mandulis_circle.feature_block,
#feature_mandulis_square.feature_block {
  height: auto;
  background: none;
}
#features_mode_0,
#features_mode_1,
#features_mode_2,
#features_mode_3,
#features_mode_4 {
  right: 5%;
  top: 10%;
}

/***************************************************
 * Generated by SVG Artista on 4/21/2023, 7:37:05 AM
 * MIT license (https://opensource.org/licenses/MIT)
 * W. https://svgartista.net
 **************************************************/

svg .svg-elem-1 {
  stroke-dashoffset: 5452.02197265625px;
  stroke-dasharray: 5452.02197265625px;
  -webkit-transition: stroke-dashoffset 2s cubic-bezier(0.47, 0, 0.745, 0.715) 0s,
                        fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.8s;
          transition: stroke-dashoffset 2s cubic-bezier(0.47, 0, 0.745, 0.715) 0s,
                fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.8s;
}

svg.active .svg-elem-1 {
  stroke-dashoffset: 0;
}

svg .svg-elem-2 {
  stroke-dashoffset: 4131.8623046875px;
  stroke-dasharray: 4131.8623046875px;
  -webkit-transition: stroke-dashoffset 2s cubic-bezier(0.47, 0, 0.745, 0.715) 0.12s,
                        fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.9s;
          transition: stroke-dashoffset 2s cubic-bezier(0.47, 0, 0.745, 0.715) 0.12s,
                fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.9s;
}

svg.active .svg-elem-2 {
  stroke-dashoffset: 0;
}

svg .svg-elem-3 {
  stroke-dashoffset: 2557.77490234375px;
  stroke-dasharray: 2557.77490234375px;
  -webkit-transition: stroke-dashoffset 2s cubic-bezier(0.47, 0, 0.745, 0.715) 0.24s,
                        fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1s;
          transition: stroke-dashoffset 2s cubic-bezier(0.47, 0, 0.745, 0.715) 0.24s,
                fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1s;
}

svg.active .svg-elem-3 {
  stroke-dashoffset: 0;
}

svg .svg-elem-4 {
  stroke-dashoffset: 1842.528564453125px;
  stroke-dasharray: 1842.528564453125px;
  fill: transparent;
  -webkit-transition: stroke-dashoffset 2s cubic-bezier(0.47, 0, 0.745, 0.715) 0.36s,
                        fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.1s;
          transition: stroke-dashoffset 2s cubic-bezier(0.47, 0, 0.745, 0.715) 0.36s,
                fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.1s;
}

svg.active .svg-elem-4 {
  stroke-dashoffset: 0;
  fill: rgb(0, 0, 0);
}

svg .svg-elem-5 {
  stroke-dashoffset: 267.8634033203125px;
  stroke-dasharray: 267.8634033203125px;
  fill: transparent;
  -webkit-transition: stroke-dashoffset 2s cubic-bezier(0.47, 0, 0.745, 0.715) 0.48s,
                        fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.2000000000000002s;
          transition: stroke-dashoffset 2s cubic-bezier(0.47, 0, 0.745, 0.715) 0.48s,
                fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.2000000000000002s;
}

svg.active .svg-elem-5 {
  stroke-dashoffset: 0;
  fill: rgb(0, 0, 0);
}

svg .svg-elem-6 {
  stroke-dashoffset: 1291.8299560546875px;
  stroke-dasharray: 1291.8299560546875px;
  -webkit-transition: stroke-dashoffset 2s cubic-bezier(0.47, 0, 0.745, 0.715) 0.6s,
                        fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.3s;
          transition: stroke-dashoffset 2s cubic-bezier(0.47, 0, 0.745, 0.715) 0.6s,
                fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.3s;
}

svg.active .svg-elem-6 {
  stroke-dashoffset: 0;
}

svg .svg-elem-7 {
  stroke-dashoffset: 1291.8299560546875px;
  stroke-dasharray: 1291.8299560546875px;
  -webkit-transition: stroke-dashoffset 2s cubic-bezier(0.47, 0, 0.745, 0.715) 0.72s,
                        fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.4000000000000001s;
          transition: stroke-dashoffset 2s cubic-bezier(0.47, 0, 0.745, 0.715) 0.72s,
                fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.4000000000000001s;
}

svg.active .svg-elem-7 {
  stroke-dashoffset: 0;
}

svg .svg-elem-8 {
  stroke-dashoffset: 1291.8299560546875px;
  stroke-dasharray: 1291.8299560546875px;
  -webkit-transition: stroke-dashoffset 2s cubic-bezier(0.47, 0, 0.745, 0.715) 0.84s,
                        fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.5s;
          transition: stroke-dashoffset 2s cubic-bezier(0.47, 0, 0.745, 0.715) 0.84s,
                fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.5s;
}

svg.active .svg-elem-8 {
  stroke-dashoffset: 0;
}

svg .svg-elem-9 {
  stroke-dashoffset: 529.7607421875px;
  stroke-dasharray: 529.7607421875px;
  fill: transparent;
  -webkit-transition: stroke-dashoffset 2s cubic-bezier(0.47, 0, 0.745, 0.715) 0.96s,
                        fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.6s;
          transition: stroke-dashoffset 2s cubic-bezier(0.47, 0, 0.745, 0.715) 0.96s,
                fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.6s;
}

svg.active .svg-elem-9 {
  stroke-dashoffset: 0;
  fill: rgb(216, 152, 39);
}

svg .svg-elem-10 {
  stroke-dashoffset: 391.7054748535156px;
  stroke-dasharray: 391.7054748535156px;
  fill: transparent;
  -webkit-transition: stroke-dashoffset 2s cubic-bezier(0.47, 0, 0.745, 0.715) 1.08s,
                        fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.7000000000000002s;
          transition: stroke-dashoffset 2s cubic-bezier(0.47, 0, 0.745, 0.715) 1.08s,
                fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.7000000000000002s;
}

svg.active .svg-elem-10 {
  stroke-dashoffset: 0;
  fill: rgb(24, 23, 22);
}

svg .svg-elem-11 {
  stroke-dashoffset: 482.4316711425781px;
  stroke-dasharray: 482.4316711425781px;
  fill: transparent;
  -webkit-transition: stroke-dashoffset 2s cubic-bezier(0.47, 0, 0.745, 0.715) 1.2s,
                        fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.8s;
          transition: stroke-dashoffset 2s cubic-bezier(0.47, 0, 0.745, 0.715) 1.2s,
                fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.8s;
}

svg.active .svg-elem-11 {
  stroke-dashoffset: 0;
  fill: rgb(24, 23, 22);
}

svg .svg-elem-12 {
  stroke-dashoffset: 362.397705078125px;
  stroke-dasharray: 362.397705078125px;
  fill: transparent;
  -webkit-transition: stroke-dashoffset 2s cubic-bezier(0.47, 0, 0.745, 0.715) 1.3199999999999998s,
                        fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.9000000000000001s;
          transition: stroke-dashoffset 2s cubic-bezier(0.47, 0, 0.745, 0.715) 1.3199999999999998s,
                fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.9000000000000001s;
}

svg.active .svg-elem-12 {
  stroke-dashoffset: 0;
  fill: rgb(24, 23, 22);
}

svg .svg-elem-13 {
  stroke-dashoffset: 482.43115234375px;
  stroke-dasharray: 482.43115234375px;
  fill: transparent;
  -webkit-transition: stroke-dashoffset 2s cubic-bezier(0.47, 0, 0.745, 0.715) 1.44s,
                        fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2s;
          transition: stroke-dashoffset 2s cubic-bezier(0.47, 0, 0.745, 0.715) 1.44s,
                fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2s;
}

svg.active .svg-elem-13 {
  stroke-dashoffset: 0;
  fill: rgb(24, 23, 22);
}

svg .svg-elem-14 {
  stroke-dashoffset: 647.5850830078125px;
  stroke-dasharray: 647.5850830078125px;
  fill: transparent;
  -webkit-transition: stroke-dashoffset 2s cubic-bezier(0.47, 0, 0.745, 0.715) 1.56s,
                        fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2.1s;
          transition: stroke-dashoffset 2s cubic-bezier(0.47, 0, 0.745, 0.715) 1.56s,
                fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2.1s;
}

svg.active .svg-elem-14 {
  stroke-dashoffset: 0;
  fill: rgb(24, 23, 22);
}

svg .svg-elem-15 {
  stroke-dashoffset: 379.7796630859375px;
  stroke-dasharray: 379.7796630859375px;
  fill: transparent;
  -webkit-transition: stroke-dashoffset 2s cubic-bezier(0.47, 0, 0.745, 0.715) 1.68s,
                        fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2.2s;
          transition: stroke-dashoffset 2s cubic-bezier(0.47, 0, 0.745, 0.715) 1.68s,
                fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2.2s;
}

svg.active .svg-elem-15 {
  stroke-dashoffset: 0;
  fill: rgb(24, 23, 22);
}

svg .svg-elem-16 {
  stroke-dashoffset: 303.58319091796875px;
  stroke-dasharray: 303.58319091796875px;
  fill: transparent;
  -webkit-transition: stroke-dashoffset 2s cubic-bezier(0.47, 0, 0.745, 0.715) 1.7999999999999998s,
                        fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2.3s;
          transition: stroke-dashoffset 2s cubic-bezier(0.47, 0, 0.745, 0.715) 1.7999999999999998s,
                fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2.3s;
}

svg.active .svg-elem-16 {
  stroke-dashoffset: 0;
  fill: rgb(24, 23, 22);
}

svg .svg-elem-17 {
  stroke-dashoffset: 52.36016845703125px;
  stroke-dasharray: 52.36016845703125px;
  fill: transparent;
  -webkit-transition: stroke-dashoffset 2s cubic-bezier(0.47, 0, 0.745, 0.715) 1.92s,
                        fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2.4000000000000004s;
          transition: stroke-dashoffset 2s cubic-bezier(0.47, 0, 0.745, 0.715) 1.92s,
                fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2.4000000000000004s;
}

svg.active .svg-elem-17 {
  stroke-dashoffset: 0;
  fill: rgb(24, 23, 22);
}

svg .svg-elem-18 {
  stroke-dashoffset: 436.9314270019531px;
  stroke-dasharray: 436.9314270019531px;
  fill: transparent;
  -webkit-transition: stroke-dashoffset 2s cubic-bezier(0.47, 0, 0.745, 0.715) 2.04s,
                        fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2.5s;
          transition: stroke-dashoffset 2s cubic-bezier(0.47, 0, 0.745, 0.715) 2.04s,
                fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2.5s;
}

svg.active .svg-elem-18 {
  stroke-dashoffset: 0;
  fill: rgb(24, 23, 22);
}

svg .svg-elem-19 {
  stroke-dashoffset: 482.4311828613281px;
  stroke-dasharray: 482.4311828613281px;
  fill: transparent;
  -webkit-transition: stroke-dashoffset 2s cubic-bezier(0.47, 0, 0.745, 0.715) 2.16s,
                        fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2.6s;
          transition: stroke-dashoffset 2s cubic-bezier(0.47, 0, 0.745, 0.715) 2.16s,
                fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2.6s;
}

svg.active .svg-elem-19 {
  stroke-dashoffset: 0;
  fill: rgb(24, 23, 22);
}

svg .svg-elem-20 {
  stroke-dashoffset: 625.200439453125px;
  stroke-dasharray: 625.200439453125px;
  fill: transparent;
  -webkit-transition: stroke-dashoffset 2s cubic-bezier(0.47, 0, 0.745, 0.715) 2.28s,
                        fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2.7s;
          transition: stroke-dashoffset 2s cubic-bezier(0.47, 0, 0.745, 0.715) 2.28s,
                fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2.7s;
}

svg.active .svg-elem-20 {
  stroke-dashoffset: 0;
  fill: rgb(24, 23, 22);
}

svg .svg-elem-21 {
  stroke-dashoffset: 391.7044982910156px;
  stroke-dasharray: 391.7044982910156px;
  fill: transparent;
  -webkit-transition: stroke-dashoffset 2s cubic-bezier(0.47, 0, 0.745, 0.715) 2.4s,
                        fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2.8s;
          transition: stroke-dashoffset 2s cubic-bezier(0.47, 0, 0.745, 0.715) 2.4s,
                fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2.8s;
}

svg.active .svg-elem-21 {
  stroke-dashoffset: 0;
  fill: rgb(24, 23, 22);
}

svg .svg-elem-22 {
  stroke-dashoffset: 482.43084716796875px;
  stroke-dasharray: 482.43084716796875px;
  fill: transparent;
  -webkit-transition: stroke-dashoffset 2s cubic-bezier(0.47, 0, 0.745, 0.715) 2.52s,
                        fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2.9000000000000004s;
          transition: stroke-dashoffset 2s cubic-bezier(0.47, 0, 0.745, 0.715) 2.52s,
                fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2.9000000000000004s;
}

svg.active .svg-elem-22 {
  stroke-dashoffset: 0;
  fill: rgb(24, 23, 22);
}

svg .svg-elem-23 {
  stroke-dashoffset: 625.20068359375px;
  stroke-dasharray: 625.20068359375px;
  fill: transparent;
  -webkit-transition: stroke-dashoffset 2s cubic-bezier(0.47, 0, 0.745, 0.715) 2.6399999999999997s,
                        fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 3s;
          transition: stroke-dashoffset 2s cubic-bezier(0.47, 0, 0.745, 0.715) 2.6399999999999997s,
                fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 3s;
}

svg.active .svg-elem-23 {
  stroke-dashoffset: 0;
  fill: rgb(24, 23, 22);
}

svg .svg-elem-24 {
  stroke-dashoffset: 437.4671936035156px;
  stroke-dasharray: 437.4671936035156px;
  fill: transparent;
  -webkit-transition: stroke-dashoffset 2s cubic-bezier(0.47, 0, 0.745, 0.715) 2.76s,
                        fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 3.1000000000000005s;
          transition: stroke-dashoffset 2s cubic-bezier(0.47, 0, 0.745, 0.715) 2.76s,
                fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 3.1000000000000005s;
}

svg.active .svg-elem-24 {
  stroke-dashoffset: 0;
  fill: rgb(24, 23, 22);
}

svg .svg-elem-25 {
  stroke-dashoffset: 482.43096923828125px;
  stroke-dasharray: 482.43096923828125px;
  fill: transparent;
  -webkit-transition: stroke-dashoffset 2s cubic-bezier(0.47, 0, 0.745, 0.715) 2.88s,
                        fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 3.2s;
          transition: stroke-dashoffset 2s cubic-bezier(0.47, 0, 0.745, 0.715) 2.88s,
                fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 3.2s;
}

svg.active .svg-elem-25 {
  stroke-dashoffset: 0;
  fill: rgb(24, 23, 22);
}

svg .svg-elem-26 {
  stroke-dashoffset: 625.20068359375px;
  stroke-dasharray: 625.20068359375px;
  fill: transparent;
  -webkit-transition: stroke-dashoffset 2s cubic-bezier(0.47, 0, 0.745, 0.715) 3s,
                        fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 3.3s;
          transition: stroke-dashoffset 2s cubic-bezier(0.47, 0, 0.745, 0.715) 3s,
                fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 3.3s;
}

svg.active .svg-elem-26 {
  stroke-dashoffset: 0;
  fill: rgb(24, 23, 22);
}

svg .svg-elem-27 {
  stroke-dashoffset: 216.19297790527344px;
  stroke-dasharray: 216.19297790527344px;
  fill: transparent;
  -webkit-transition: stroke-dashoffset 2s cubic-bezier(0.47, 0, 0.745, 0.715) 3.12s,
                        fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 3.4000000000000004s;
          transition: stroke-dashoffset 2s cubic-bezier(0.47, 0, 0.745, 0.715) 3.12s,
                fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 3.4000000000000004s;
}

svg.active .svg-elem-27 {
  stroke-dashoffset: 0;
  fill: rgb(24, 23, 22);
}

svg .svg-elem-28 {
  stroke-dashoffset: 391.704833984375px;
  stroke-dasharray: 391.704833984375px;
  fill: transparent;
  -webkit-transition: stroke-dashoffset 2s cubic-bezier(0.47, 0, 0.745, 0.715) 3.2399999999999998s,
                        fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.5s;
          transition: stroke-dashoffset 2s cubic-bezier(0.47, 0, 0.745, 0.715) 3.2399999999999998s,
                fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.5s;
}

svg.active .svg-elem-28 {
  stroke-dashoffset: 0;
  fill: rgb(24, 23, 22);
}

svg .svg-elem-29 {
  stroke-dashoffset: 482.4316711425781px;
  stroke-dasharray: 482.4316711425781px;
  fill: transparent;
  -webkit-transition: stroke-dashoffset 2s cubic-bezier(0.47, 0, 0.745, 0.715) 3.36s,
                        fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 3.6000000000000005s;
          transition: stroke-dashoffset 2s cubic-bezier(0.47, 0, 0.745, 0.715) 3.36s,
                fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 3.6000000000000005s;
}

svg.active .svg-elem-29 {
  stroke-dashoffset: 0;
  fill: rgb(24, 23, 22);
}
#scene_6_headline,
#scene_5_headline,
#scene_4_headline,
#scene_3_headline,
#scene_2_headline {
  position:relative;
	padding:16px 24px;
	color: #fff; 
  background: #000;
	border-radius:16px;
  z-index: 10; 
  box-shadow: 0px 0px 10px 10px rgba(0,0,0,.1);
  position: fixed;
  visibility: hidden;
  opacity: 0;
/*  top: 20px;
  left: 30%; */
 /* animation-fill-mode: forward;    */
  -webkit-transform: scale(0,0) translate(0, -200px);
  -ms-transform: scale(0,0) translate(0, -200px);
  transform: scale(0,0) translate(0, -200px); 
  transition: transform 300ms cubic-bezier(0.645, 0.045, 0.355, 1.000), translate 300ms cubic-bezier(0.645, 0.045, 0.355, 1.000), scale 300ms cubic-bezier(0.645, 0.045, 0.355, 1.000);     

    left: 50%;
    top: 0%;
    transform: translate(-50%, 10%);
 
  
}



#scene_4_headline {
    background: none;
    text-align: center;
/*    left: 32%; */
}
#scene_6_headline,
#scene_5_headline,
#scene_3_headline,
#scene_2_headline {
  background: #000;
  color: #fff;
 /* left: 31%; */
  text-align: center;
}
#scene_5_headline .headline,
#scene_6_headline .headline,
#scene_3_headline .headline,
#scene_2_headline .headline {
  text-transform: uppercase;
}
#scene_3_headline {
    text-align: center;
 /*   left: 33%;  */
}
#scene_6_headline {
  max-width: 1220px;
  width: 100%;
}
#scene_5_headline {
 /* left: 40%; */
}

#scene_2_headline {
 /* left: 44%;  */  
}
.headline1 {
  font-size: 40px !important;
}
h3.headline {
  font-size: 30px !important;
  margin: 0;
}
.headline2,
h3.subheadline {
  font-size: 20px !important;
    margin: 0;
}
#scene_6_headline.show_text,
#scene_5_headline.show_text,
#scene_4_headline.show_text,
#scene_3_headline.show_text,
#scene_2_headline.show_text {
  visibility: visible;
  opacity: 1;
  -webkit-transform: scale(1,1) translate(-50%, 10%); 
  -ms-transform: scale(1,1) translate(-50%, 10%); 
  transform: scale(1,1) translate(-50%, 10%); 
  transition: transform 300ms cubic-bezier(0.645, 0.045, 0.355, 1.000), translate 300ms cubic-bezier(0.645, 0.045, 0.355, 1.000), scale 300ms cubic-bezier(0.645, 0.045, 0.355, 1.000);      
}
/* Announcement-Box */
.announcement-box.show_text {
  /*  -webkit-animation: msg-zoom-in .5s;
  animation: msg-zoom-in .5s; 
  
  -webkit-animation-fill-mode: forward;
  animation-fill-mode: forward;  
*/
  -webkit-transform: scale(1,1) translate(0, 0); 
  -ms-transform: scale(1,1) translate(0, 0); 
  transform: scale(1,1) translate(0, 0); 
  transition: transform 300ms cubic-bezier(0.645, 0.045, 0.355, 1.000), translate 300ms cubic-bezier(0.645, 0.045, 0.355, 1.000), scale 300ms cubic-bezier(0.645, 0.045, 0.355, 1.000);      
}
.announcement-box {
  position:relative;
	padding:16px 24px;
	color: #fff; 
	border-radius:16px;
  z-index: 10; 
  box-shadow: 0px 0px 10px 10px rgba(0,0,0,.1);
  width: 600px;
  position: relative;
  bottom: 50%;
  left: 60%;
 /* animation-fill-mode: forward;    */
  -webkit-transform: scale(0,0) translate(0, -200px);
  -ms-transform: scale(0,0) translate(0, -200px);
  transform: scale(0,0) translate(0, -200px); 
  transition: transform 300ms cubic-bezier(0.645, 0.045, 0.355, 1.000), translate 300ms cubic-bezier(0.645, 0.045, 0.355, 1.000), scale 300ms cubic-bezier(0.645, 0.045, 0.355, 1.000);     
}

@-webkit-keyframes msg-zoom-in {
    100% {
        -webkit-transform: scale(1,1) translate(0, 0); 
        -ms-transform: scale(1,1) translate(0, 0); 
        transform: scale(1,1) translate(0, 0); 
        transition: all 300ms cubic-bezier(0.645, 0.045, 0.355, 1.000); 
    }
}
@keyframes msg-zoom-in {
    100% {
        -webkit-transform: scale(1,1) translate(0, 0);
        -ms-transform: scale(1,1) translate(0, 0);
        transform: scale(1,1) translate(0, 0);
        transition: all 300ms cubic-bezier(0.645, 0.045, 0.355, 1.000); 
    }
}


.announcement-box .text {
 /* color: #222222; */
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  line-height: 1.4em;
}
.announcement-box.show_text{
  left: 60%;
  position: fixed;
  background: none;
  box-shadow: none;
  color: #fff;
  height: auto; 
}
#scene_1_text_1.announcement-box.show_text {
  top: 4%;
  left: 28%;
  width: 740px;
  font-size: 40px;
  text-align: center;
  
    top: 3%;
    left: 40%;
    width: 340px;
    font-size: 40px;
    text-align: center;
    background: #000;
    height: 120px;  
}
.text.title {
  font-size: 20px;
    font-weight: 600;
}
.text.copy {
  font-size: 14px;
}
#scene_1_text_2.announcement-box.show_text {
  top: 15%; 
  left: 28%;  
  width: 740px;
  text-align: center;  
  
    top: 50%;
    left: 34%;
    width: 600px;
    text-align: left;
    background: #000;
    height: 130px;  
  
}
#scene_1_text_1.announcement-box.show_text.night,
#scene_1_text_2.announcement-box.show_text.night {
  background-color: #fff;
  color: #000;
}

#scene_1_text_3.announcement-box.show_text {
    top: 100px;
    left: 29%;
    font-size: 20px;
    text-align: left;
    width: 760px;
    height: 60px;
    font-weight: 500;
    text-transform: uppercase;
    background: #fff;
    border-radius: 15px;
}


#scene_5_text_1.announcement-box.show_text,
#scene_5_text_2.announcement-box.show_text,
#scene_5_text_3.announcement-box.show_text,
#scene_5_text_4.announcement-box.show_text,
#scene_5_text_5.announcement-box.show_text {
  bottom: unset;
  top: 14%;
  left: 1%;
  color: #000;  
	background:#E5E5EA;
  width: 450px;
  height: 110px;
}
#scene_5_text_2.announcement-box.show_text {
  top: 27%;
}
#scene_5_text_3.announcement-box.show_text {
  top: 40%;    
}
#scene_5_text_4.announcement-box.show_text {
  top: 53%;
}
#scene_5_text_5.announcement-box.show_text {
  top: 66%;   
  height: 80px;  
}

#scene_2_text_1.announcement-box.show_text {
  bottom: 87%;
  left: 2%; 
  color: #000;  
	background:#E5E5EA; 
}
#scene_2_text_2.announcement-box.show_text {
  bottom: 57%;
  color: #000;  
	background:#E5E5EA;
}
#scene_2_text_3.announcement-box.show_text {
  bottom: 42%;
  color: #000;  
	background:#E5E5EA;  
}
#scene_2_text_4.announcement-box.show_text {
  bottom: 27%;
  color: #000;  
	background:#E5E5EA;  
}/*
#scene_2_text_5.announcement-box.show_text {
    bottom: 87%;
    left: 2%;  
  color: #000;  
	background:#E5E5EA;  
}*/
#scene_2_text_5.announcement-box.show_text {
    bottom: 67%;
    left: 2%; 
  color: #000;  
	background:#E5E5EA;  
}
#scene_2_text_7.announcement-box.show_text {
    bottom: 65%;
    left: 2%;
  color: #000;  
	background:#E5E5EA;  
}
#scene_2_text_8.announcement-box.show_text {
  bottom: 53%;
  left: 2%;  
  color: #000;  
	background:#E5E5EA;  
}
#scene_2_text_9.announcement-box.show_text,
#scene_2_text_10.announcement-box.show_text,
#scene_2_text_11.announcement-box.show_text {
    bottom: 87%;
    left: 61.3%;  
    color: #fff;
    background: #000;
    width: 75px;
    text-align: center;
    padding: 10px; 
}
#scene_2_text_10.announcement-box.show_text {
   bottom: 72%;
   left: 49%;  
}
#scene_2_text_11.announcement-box.show_text {
    bottom: 56%;
    left: 35.5%;
}
 
.announcement-box.business_text.show_text,
.announcement-box.private_text.show_text {
  position: fixed;
  background: none;
  box-shadow: none;
  color: #fff;
}
.announcement-box.private_text.show_text {
  left: 19%;  
}
.announcement-box.business_text.show_text {
  left: unset; 
  right: 22%;
  width: 700px;
} 
 

#scene_3_text_private_1.announcement-box.show_text {
  position: fixed;  
  top: 14%;
  bottom: unset;
  color: #fff;  
  background-color: #248bf5; 
  width: 300px;
}
#scene_3_text_private_2.announcement-box.show_text {
  position: fixed;  
  top: 28%;
  bottom: unset;
  color: #fff; 
  background-color: #248bf5;
  width: 300px;  
}
#scene_3_text_private_3.announcement-box.show_text  {
  position: fixed;  
  top: 42%;
  bottom: unset;
  color: #fff;
  background-color: #248bf5;  
  width: 300px;  
}
#scene_3_text_private_4.announcement-box.show_text  {
  position: fixed;  
  top: 56%;
  bottom: unset; 
  color: #fff;
  background-color: #248bf5;  
  width: 300px;  
}
#scene_3_text_business_1.announcement-box.show_text {
  position: fixed;  
  top: 14%;
  bottom: unset;
  color: #000;  
  background-color: #e5e5ea; 
}
#scene_3_text_business_2.announcement-box.show_text {
  position: fixed;  
  top: 28%;
  bottom: unset;
  color: #000; 
  background-color: #e5e5ea;
}
#scene_3_text_business_3.announcement-box.show_text  {
  position: fixed;  
  top: 42%;
  bottom: unset;
  color: #000;
  background-color: #e5e5ea;  
}
#scene_3_text_business_4.announcement-box.show_text  {
  position: fixed;  
  top: 56%;
  bottom: unset;  
  color: #000;
  background-color: #e5e5ea;  
}

#scene_3_text_private_1.announcement-box.show_text:before,
#scene_3_text_private_2.announcement-box.show_text:before,
#scene_3_text_private_3.announcement-box.show_text:before,
#scene_3_text_private_4.announcement-box.show_text:before {
  content: "";
  position: absolute;

  -webkit-animation: msg-zoom-in .8s;
  animation: msg-zoom-in .8s;

  -webkit-animation-delay: .3s;
  animation-delay: .3s; 

  -webkit-transform: scale(0,0) translate(0, 20px); 
  -ms-transform: scale(0,0) translate(0, 20px); 
  transform: scale(0,0), translate(0, 20px);

  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;

  z-index:2;
  bottom:-4px;
  left:-6px;
  height:18px;
  border-right:18px solid #248bf5;
  border-bottom-right-radius: 16px;
}

#scene_3_text_business_1.announcement-box.show_text:before,
#scene_3_text_business_2.announcement-box.show_text:before,
#scene_3_text_business_3.announcement-box.show_text:before,
#scene_3_text_business_4.announcement-box.show_text:before {
  bottom: -0.1rem;
  content: "";
  height: 1rem;
  position: absolute;

  -webkit-animation: msg-zoom-in .8s;
  animation: msg-zoom-in .8s;

  -webkit-animation-delay: .3s;
  animation-delay: .3s; 

  -webkit-transform: scale(0,0) translate(0, 20px); 
  -ms-transform: scale(0,0) translate(0, 20px); 
  transform: scale(0,0), translate(0, 20px);
/*
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
*/
  border-bottom-left-radius: 0.8rem 0.7rem;
  border-right: 2rem solid #e5e5ea;
  right: -0.35rem;
  transform: translate(0, -0.1rem);
}

#scene_3_text_private_1.announcement-box.show_text:after,
#scene_3_text_private_2.announcement-box.show_text:after,
#scene_3_text_private_3.announcement-box.show_text:after,
#scene_3_text_private_4.announcement-box.show_text:after {
    content: "";
    position: absolute;
		z-index:3;
		bottom:-4px;
		left:-10px;
		width:10px;
		height:30px;
		background:#ffffff;
		border-bottom-right-radius: 10px;
}
#scene_3_text_business_1.announcement-box.show_text:after,
#scene_3_text_business_2.announcement-box.show_text:after,
#scene_3_text_business_3.announcement-box.show_text:after,
#scene_3_text_business_4.announcement-box.show_text:after {
  bottom: -0.1rem;
  content: "";
  height: 1rem;
  position: absolute;
		z-index:3;
  background-color: #fff;
  border-bottom-left-radius: 0.5rem;
  right: -40px;
  transform:translate(-30px, -2px);
  width: 10px;
}

/*
#scene_3_text_private_1.announcement-box.show_text:before {
   border-right:18px solid #fff; 
}
#scene_3_text_private_2.announcement-box.show_text:before {
   border-right:18px solid #c6c6c6; 
}
#scene_3_text_private_3.announcement-box.show_text:before {
   border-right:18px solid #656565; 
}
#scene_3_text_private_4.announcement-box.show_text:before {
   border-right:18px solid #656565; 
}


#scene_3_text_business_1.announcement-box.show_text:before {
   border-right:18px solid #fff; 
}
#scene_3_text_business_2.announcement-box.show_text:before {
   border-right:18px solid #c6c6c6; 
}
#scene_3_text_business_3.announcement-box.show_text:before {
   border-right:18px solid #656565; 
}
#scene_3_text_business_4.announcement-box.show_text:before {
   border-right:18px solid #656565; 
}
*/

#scene_3_text_private_1.announcement-box.show_text:after {
    height: 18px;
    background: #009472;  
}
#scene_3_text_private_2.announcement-box.show_text:after {
    height: 18px;
    background: #45e1bd;  
}
#scene_3_text_private_3.announcement-box.show_text:after {
    height: 18px;
    background: #009c77;  
}
#scene_3_text_private_4.announcement-box.show_text:after {
    height: 18px;
    background: #009c77;  
}

#scene_3_text_business_1.announcement-box.show_text:after {
    height: 18px;
    background: #009c77;  
}
#scene_3_text_business_2.announcement-box.show_text:after {
    height: 18px;
    background: #009c77;  
}
#scene_3_text_business_3.announcement-box.show_text:after {
    height: 18px;
    background: #009c77;  
}
#scene_3_text_business_4.announcement-box.show_text:after {
    height: 18px;
    background: #009c77;  
}


/* Circle Animation */

@keyframes animateIn {
	 from {
		 opacity: 0.5;
		 transform: scale(0);
	}
	 to {
		 opacity: 1;
		 transform: scale(1);
	}
}


 html,
 body {
	 background-color: #000;
}
 .wrapper {
	 width: 100%;
	 height: auto;
}
 .center {
	 width: 450px;
	 height: 450px;
	 position: relative;
   top: 170px; 
}
 .bubble {
	 width: 150px;
	 height: 5px;
	 top: 350px;
	 border-radius: 100%;
	 position: absolute;
	 transform-origin: 400px;
   transition: 5ms all; 
	 z-index: 0;
}
 .bubble.bubble--big {
	 z-index: 10;
}
/*
.bubble--big.hover_bubble {
  font-weight: 600;
}
*/
 .bubble.bubble--center {
	 background: #0091ff;
   height: 200px;
   width: 200px;
   left: 300px;
   right: 0;
   bottom: 0;
   top: 350px;
	 margin: auto;
	 transition: 200ms all;
	 text-align: center;
	 color: #fff;
	 z-index: 20;
	 transform-origin: 50% 50%;
}
 .bubble.bubble--center.hover_bubble,
 .bubble.bubble--center:hover {
	 height: 300px;
	 width: 300px;
   left: 250px;
}
#bubble_center {
    width: 225px;
    padding: 10px;
    color: #fff;
    text-align: center;
    position: relative;
    top: 60px;
    left: 40px;  
   /* transition: .3s all ease-in; */
  -webkit-transform: scale(0,0) translate(0, -200px);
  -ms-transform: scale(0,0) translate(0, -200px);
  transform: scale(0,0) translate(0, -200px); 
  transition: transform 300ms cubic-bezier(0.645, 0.045, 0.355, 1.000), translate 300ms cubic-bezier(0.645, 0.045, 0.355, 1.000), scale 300ms cubic-bezier(0.645, 0.045, 0.355, 1.000);     
  
}
#bubble_center.show_text {
  -webkit-transform: scale(1,1) translate(0, 0); 
  -ms-transform: scale(1,1) translate(0, 0); 
  transform: scale(1,1) translate(0, 0); 
  transition: transform 300ms cubic-bezier(0.645, 0.045, 0.355, 1.000), translate 300ms cubic-bezier(0.645, 0.045, 0.355, 1.000), scale 300ms cubic-bezier(0.645, 0.045, 0.355, 1.000);       
}
.transition-wrapper {
  overflow: hidden;
}

.element1 {
  transition: 1s;
  font-size: 20px;
  line-height: 1;
  transform: translateY(18px);
}

.transition-wrapper:hover .element1 {
  transform: none;
}

 .bubble span, .bubble .bubble__wrapper {
	 position: absolute;
	 left: 0;
	 top: 0;
	 bottom: 0;
	 margin: auto;
	 border-radius: 200%;
	 background: #fff;
	 width: 5px;
	 height: 5px;
	 transition: 300ms all;
	 display: inline-block;
	 transform-origin: 50% 50%;
	 text-align: center;
}
 .bubble span .bubble__content, .bubble .bubble__wrapper .bubble__content {
	 opacity: 0;
	 display: none;
}
/*
 .bubble.bubble--0 {
	 transform: rotate(0deg);
}
 .bubble.bubble--0 span, .bubble.bubble--0 .bubble__wrapper {
	 transform: rotate(0deg);
}
*/
.bubble.bubble--1,
.bubble.bubble--2,
.bubble.bubble--3,
.bubble.bubble--4,
.bubble.bubble--5,
.bubble.bubble--6,
.bubble.bubble--7,
.bubble.bubble--8,
.bubble.bubble--9,
.bubble.bubble--10 {
  opacity: 0;
  visibility: hidden;
}
 .bubble.bubble--1.bubble_on {
    opacity: 1;
  visibility: visible; 
  transform: rotate(90deg);
  transition: .5s all ease-in;
}
 .bubble.bubble--1 span, .bubble.bubble--1 .bubble__wrapper {
	 transform: rotate(-90deg);
}
 .bubble.bubble--2.bubble_on {
     opacity: 1;
  visibility: visible;
	 transform: rotate(126deg);
      transition: .5s all ease-in;
}
 .bubble.bubble--2 span, .bubble.bubble--2 .bubble__wrapper {
	 transform: rotate(-126deg);
}
 .bubble.bubble--3.bubble_on {
     opacity: 1;
  visibility: visible;
	 transform: rotate(162deg);
      transition: .5s all ease-in;
}
 .bubble.bubble--3 span, .bubble.bubble--3 .bubble__wrapper {
   	 transform: rotate(-162deg);
}
 .bubble.bubble--4.bubble_on {
     opacity: 1;
  visibility: visible;
	 transform: rotate(198deg);
      transition: .5s all ease-in;
}
 .bubble.bubble--4 span, .bubble.bubble--4 .bubble__wrapper {
	 transform: rotate(-198deg);
}
 .bubble.bubble--5.bubble_on {
     opacity: 1;
  visibility: visible;
	 transform: rotate(234deg);
      transition: .5s all ease-in;
}
 .bubble.bubble--5 span, .bubble.bubble--5 .bubble__wrapper {
	 transform: rotate(-234deg);
}
.bubble.bubble--6.bubble_on {
    opacity: 1;
  visibility: visible;
	 transform: rotate(270deg);
      transition: .5s all ease-in;  
} 
 .bubble.bubble--6 span, .bubble.bubble--6 .bubble__wrapper {
	 transform: rotate(-270deg);
}
 .bubble.bubble--7.bubble_on {
     opacity: 1;
  visibility: visible;
	 transform: rotate(306deg);
      transition: .5s all ease-in;   
}
 .bubble.bubble--7 span, .bubble.bubble--7 .bubble__wrapper {
	 transform: rotate(-306deg);
}
 .bubble.bubble--8.bubble_on {
     opacity: 1;
  visibility: visible;
	 transform: rotate(342deg);
      transition: .5s all ease-in;   
}
 .bubble.bubble--8 span, .bubble.bubble--8 .bubble__wrapper {
	 transform: rotate(-342deg);
}
 .bubble.bubble--9.bubble_on {
     opacity: 1;
  visibility: visible;
	 transform: rotate(378deg);
      transition: .5s all ease-in;   
}
 .bubble.bubble--9 span, .bubble.bubble--9 .bubble__wrapper {
	 transform: rotate(-378deg);
}
 .bubble.bubble--10.bubble_on {
     opacity: 1;
  visibility: visible;
	 transform: rotate(414deg);
      transition: .5s all ease-in;   
}
 .bubble.bubble--10 span, .bubble.bubble--10 .bubble__wrapper {
	 transform: rotate(-414deg); 
}
 .bubble-holder {
	 transform-origin: 50% 50%;
	 width: 300px;
	 height: 300px;
/*	 animation: animateIn 2s cubic-bezier(0.77, 0, 0.175, 1); */
	 position: absolute;
   left: 120%;
   top: 0;    
   display: none;
}
 .bubble-holder.is-animated .bubble--big span, .bubble-holder.is-animated .bubble--big .bubble__wrapper {
	 padding: 15px;
}
 .bubble-holder.is-animated .bubble--big:hover {
	 z-index: 30;
 /*   font-weight: 600; */
}
 .bubble-holder.is-animated .bubble--big:hover span, 
 .bubble-holder.is-animated .bubble--big:hover .bubble__wrapper {
	 width: 130px;
	 height: 130px;
/*	 left: -30px; */
   left: 0;
}    
     
 .bubble-holder.is-animated .bubble--big span, .bubble-holder.is-animated .bubble--big .bubble__wrapper {
	 width: 130px;
	 height: 130px;  
/*	 left: -30px; */
   left: 0;
}
   


/***************************************************
 * Generated by SVG Artista on 5/1/2023, 5:25:55 PM
 * MIT license (https://opensource.org/licenses/MIT)
 * W. https://svgartista.net
 **************************************************/

svg .svg-elem-1 {
  stroke-dashoffset: 161.9095916748047px;
  stroke-dasharray: 161.9095916748047px;
  -webkit-transition: stroke-dashoffset 1.5s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
          transition: stroke-dashoffset 1.5s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
}

svg.active .svg-elem-1 {
  stroke-dashoffset: 0;
}

svg .svg-elem-2 {
  stroke-dashoffset: 180.5955810546875px;
  stroke-dasharray: 180.5955810546875px;
  -webkit-transition: stroke-dashoffset 1.5s cubic-bezier(0.47, 0, 0.745, 0.715) 1s;
          transition: stroke-dashoffset 1.5s cubic-bezier(0.47, 0, 0.745, 0.715) 1s;
}

svg.active .svg-elem-2 {
  stroke-dashoffset: 0;
}

svg .svg-elem-3 {
  stroke-dashoffset: 177.95664978027344px;
  stroke-dasharray: 177.95664978027344px;
  -webkit-transition: stroke-dashoffset 1.5s cubic-bezier(0.47, 0, 0.745, 0.715) 2s;
          transition: stroke-dashoffset 1.5s cubic-bezier(0.47, 0, 0.745, 0.715) 2s;
}

svg.active .svg-elem-3 {
  stroke-dashoffset: 0;
}









.scroll_scrollanimation {
     
	 display: none;
	 align-items: center;
	 justify-content: center;
   position: fixed;
   bottom: 0;
   left: 42%;
   left: 49%;
   z-index: 333;
}
 .field {
	 display: flex;
	 align-items: center;
	 justify-content: space-around;
	 width: 300px;
}
 .mouse {
	 width: 50px;
	 height: 90px;
	 border: 3px solid #fff;
	 border-radius: 60px;
	 position: relative;
}
 .mouse::before {
	 content: '';
	 width: 12px;
	 height: 12px;
	 position: absolute;
	 top: 10px;
	 left: 50%;
	 transform: translateX(-50%);
	 background-color: #fff;
	 border-radius: 50%;
	 opacity: 1;
	 animation: wheel 2s infinite;
	 -webkit-animation: wheel 2s infinite;
}
 @keyframes wheel {
	 to {
		 opacity: 0;
		 top: 60px;
	}
}
 @-webkit-keyframes wheel {
	 to {
		 opacity: 0;
		 top: 60px;
	}
}
 .scroll {
	 width: 60px;
	 height: 60px;
	 position: relative;
	 animation: down 1.5s infinite;
	 -webkit-animation: down 1.5s infinite;
   transition: .5s transform ease-in;   
}
.scroll.hover_bubble {
/*  transform: rotate(180deg); */
  animation: up 1.5s infinite;
	 -webkit-animation: up 1.5s infinite;
  
}
.scroll:hover {
  cursor: pointer;
  transform: scale(1.1);
  transition: .3s all ease-in;
}
 .scroll::before,
 .scroll.scroll_inverted::before {
	 content: '';
	 position: absolute;
	 top: 15px;
	 left: 18px;
	 width: 18px;
	 height: 18px;
	 border-left: 2px solid #fff;
	 border-bottom: 2px solid #fff;
	 transform: rotate(-45deg);
   transition: .5s transform ease-in;
}
.scroll.scroll_inverted::before {
 	 transform: rotate(135deg); 
   top: 20px;
}
 @keyframes down {
	 0% {
		 transform: translate(0);
	}
	 20% {
		 transform: translateY(15px);
	}
	 40% {
		 transform: translate(0);
	}
}
 @-webkit-keyframes down {
	 0% {
		 transform: translate(0);
	}
	 20% {
		 transform: translateY(15px);
	}
	 40% {
		 transform: translate(0);
	}
}

@keyframes up {
	 0% {
		 transform: translate(0);
	}
	 20% {
		 transform: translateY(-15px);
	}
	 40% {
		 transform: translate(0);
	}
}
 @-webkit-keyframes up {
	 0% {
		 transform: translate(0);
	}
	 20% {
		 transform: translateY(-15px);
	}
	 40% {
		 transform: translate(0);
	}
}

 .arrow {
	 width: 0;
	 height: 40px;
	 border: 1px solid #fff;
	 position: relative;
	 animation: scroll 1.5s infinite;
	 -webkit-animation: scroll 1.5s infinite;
}
 .arrow::after {
	 content: '';
	 display: block;
	 position: absolute;
	 top: 100%;
	 left: -5px;
	 width: 1px;
	 height: 10px;
	 border-top: 10px solid #fff;
	 border-left: 5px solid transparent;
	 border-right: 5px solid transparent;
}
 @keyframes scroll {
	 0% {
		 height: 40px;
	}
	 30% {
		 height: 70px;
	}
	 60% {
		 height: 40px;
	}
}
 @-webkit-keyframes scroll {
	 0% {
		 height: 40px;
	}
	 30% {
		 height: 70px;
	}
	 60% {
		 height: 40px;
	}
}
 








/***************************************************
 * Generated by SVG Artista on 5/1/2023, 9:22:16 PM
 * MIT license (https://opensource.org/licenses/MIT)
 * W. https://svgartista.net
 **************************************************/

svg .svg-element-1 {
  stroke-dashoffset: 211.4097442626953px;
  stroke-dasharray: 211.4097442626953px;
  -webkit-transition: stroke-dashoffset 2s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
          transition: stroke-dashoffset 2s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
}

svg.active .svg-element-1 {
  stroke-dashoffset: 0;
}

svg .svg-element-2 {
  stroke-dashoffset: 211.40988159179688px;
  stroke-dasharray: 211.40988159179688px;
  -webkit-transition: stroke-dashoffset 2s cubic-bezier(0.47, 0, 0.745, 0.715) 0.12s;
          transition: stroke-dashoffset 2s cubic-bezier(0.47, 0, 0.745, 0.715) 0.12s;
}

svg.active .svg-element-2 {
  stroke-dashoffset: 0;
}

svg .svg-element-3 {
  stroke-dashoffset: 211.40994262695312px;
  stroke-dasharray: 211.40994262695312px;
  -webkit-transition: stroke-dashoffset 2s cubic-bezier(0.47, 0, 0.745, 0.715) 0.24s;
          transition: stroke-dashoffset 2s cubic-bezier(0.47, 0, 0.745, 0.715) 0.24s;
}

svg.active .svg-element-3 {
  stroke-dashoffset: 0;
}

.form {
    width: 800px;
    margin: 0 auto;
    text-align: left;  
}


form label {
  display: block;
}

.field {
  width: 100%;
  display: block;
}
form input[type=email], form input[type=file], form input[type=number], form input[type=password], form input[type=tel], form input[type=text], form select, form textarea {
    background: #fff !important;
    border-radius: 15px !important;
    margin-bottom: 15px !important;
    padding: 15px !important;
  -webkit-appearance: none;
}
#hsForm_f6a4212d-6c51-4794-bca7-66bba29bd08b > fieldset:nth-child(7) > div > div.hs-richtext > p,
#hsForm_c2aff91a-19dd-4772-8212-417d70a2b3a3 > fieldset:nth-child(6) > div > div.hs-richtext > p,
#hsForm_45b32da6-6103-4718-b3c2-c13c1ee45684 > fieldset:nth-child(6) > div > div.hs-richtext > p { 
    color: #fff!important;
    font-size: 9px !important;
    margin-bottom: 0; 
}

/* required */
#label-termin_solarleuchten_datum-f6a4212d-6c51-4794-bca7-66bba29bd08b > span.hs-form-required {
    position: relative;
    left: 355px;
    top: 15px;
    z-index: 1;
    height: 0;
    display: block;
}
/* 3 columns */ 
#hsForm_45b32da6-6103-4718-b3c2-c13c1ee45684 > fieldset:nth-child(3) > div.hs_firstname.hs-firstname.hs-fieldtype-text.field.hs-form-field, 
#hsForm_45b32da6-6103-4718-b3c2-c13c1ee45684 > fieldset:nth-child(3) > div.hs_lastname.hs-lastname.hs-fieldtype-text.field.hs-form-field,
#hsForm_45b32da6-6103-4718-b3c2-c13c1ee45684 > fieldset:nth-child(3) > div.hs_email.hs-email.hs-fieldtype-text.field.hs-form-field,
#hsForm_45b32da6-6103-4718-b3c2-c13c1ee45684 > fieldset:nth-child(4) > div.hs_zip.hs-zip.hs-fieldtype-text.field.hs-form-field, 
#hsForm_45b32da6-6103-4718-b3c2-c13c1ee45684 > fieldset:nth-child(4) > div.hs_address.hs-address.hs-fieldtype-text.field.hs-form-field,
#hsForm_45b32da6-6103-4718-b3c2-c13c1ee45684 > fieldset:nth-child(4) > div.hs_city.hs-city.hs-fieldtype-text.field.hs-form-field {
  width: 33.3%;   
} 
        

[id^=message-] {
    height: 60px !important;
    margin-bottom: 0px !important;
}
[id^=label-ihr_bevorzugter_gro_handel] {
    margin-bottom: 10px!important;
    color: #fff;
}
.legal-consent-container .hs-form-booleancheckbox-display>span {
    display: block;
    margin-left: 20px;
    color: #fff;
}
.hs-richtext > p > a {
     color: #fff;
    text-decoration: underline;
}

form input[type=text], form input[type=email], form input[type=password], form input[type=tel], form input[type=number], form input[type=file], form select, form textarea {
  color: #858585 !important;
}
.accordion_wrap {
 /* display: flex;*/

}

.accordion_container {
  width: 100%;
  max-width: 600px;
  margin: 100px;
/*  box-shadow: 0px 0px 30px 10px rgb(0 0 0); */
  position: relative;
  top: 100px;  
  z-index: 1;
}
button.accordion h2 {
  margin: 0;
}
button.accordion {
  width: 100%;
  background-color: #fff;
  border: none;
  outline: none;
  text-align: left;
  padding: 25px 20px;
  font-size: 18px;
  color: #000;
  cursor: pointer;
  transition: background-color 0.2s linear;
  margin: 0px 0;
  line-height: .1;
  font-weight: 600;
}

button.accordion.black:after {
    content: "\f107";
    font-family: Font Awesome\ 5 Free;
    font-size: 24px;
  float: right;
  font-weight: 900;
}

button.accordion.black.is-open:after {
  content: "\f106";
  font-family: "Font Awesome 5 Free";
  font-size: 24px;
  float: right;
  font-weight: 900;
}

button.accordion:hover, button.accordion.is-open {
   /* background-image: linear-gradient(55deg, #000, #000 37.1%, #fff 0); 
    color: #fff;*/
}

.accordion-content {
  background-color: white;
/*  border-left: 1px solid whitesmoke;
  border-right: 1px solid whitesmoke; */
 /* padding: 0 20px; */
   padding: 0 0px;
  max-height: 0;
  overflow: hidden;
  transition: max-height .5s ease-in-out;
  margin-bottom: 0px;
}

.accordion-p {
  margin: 20px 0;
}
.flex_wrap {
  display:flex; 
  width: 600px;
  margin: 0 auto;
}
.flex_wrap_left {
  padding: 0px;
}
.flex_wrap_left,
.flex_wrap_right {
 width: 50%;
 position: relative;
}
.button_right {
  position: absolute;
  right: 50px;
  bottom: 50px;
}
.button_left {
  position: absolute;
  left: 50px;
  bottom: 50px;
}

.accordion.black:hover {
      transform: scale(1.02);   
}
.accordion.black:active {
      transform: scale(0.98);   
}
.accordion {
/*  background-color: #c6c6c6;  */
}



.greybox {
  padding: 50px;
  background: #656565;
  border-radius: 5px;  
}




.accordion {
  cursor: auto !important;
    background: #656565;

}
.accordion.black {
  background-color: #000;
  color: #fff;
  cursor: pointer !important;
  width: 163px;
  width: 213px;
  font-size: 14px;
}



.accordion-content {
  position: relative;
  top: -10px;
}
            .accordion {
              margin: 0 10px;
            }
            .accordion-content {
              margin: 0 10px;
              background-color: #c6c6c6;
            }
            .button_right,
            .button_left {
                position: relative;
                left: 0;
                bottom: 0;
            }    
            .greybox {
              height: 100% !important;
            }
            .flex_wrap_left .greybox,
            .flex_wrap_right .greybox {
              padding: 0;
            }
            .flex_wrap_right img.feature_image, 
            .flex_wrap_left img.feature_image,
            img.feature_image,
            .accordion-content {
              border-radius: 5px;
            }
img.feature_image {
  width: 280px;
  height: auto;
}

            .features_text h3,
            .slider_wrap_header h3, 
            .features_text-right h3, 
            .features_text-left h3 {
              margin: 10px 0;
              font-size: 25px !important;
            }
            img.product-image {
              background-color: #fff;
            }
            .greybox h3 {
              margin-left: 0;
            }
            button.accordion {
              box-shadow: none;
            }


.card_container {
      position: fixed;
    left: 19%;
    width: 1280px;
    /*z-index: 1;*/
    top: 20%;
  left: 50%;
top: 40%;
transform: translate(-50%, -50%);  
}

.cards {
display: flex;
flex-wrap: wrap;
justify-content: center;
padding-top: 0;
}
.cards a,
.cards a:hover {
text-decoration: none;
color: #000;
}



.card-lightgrey-solarleuchten {
align-items: left;
text-align: center;
border-radius: 15px;
/* border: 1px solid rgba(0,0,0,.125);*/
box-shadow: 0 2px 20px 0 rgba(0, 0, 0, 0.12);
display: flex;
flex-direction: column;
/*padding: 1.5rem 0.75rem;*/
padding: 0 0;
transform: scale(1);
transition: box-shadow 0.3s;
transition: scale 0.3s ease-in-out;
/*width: 20%;*/
max-width: 370px;
background: linear-gradient(180deg, rgba(198,198,198,1) 0%, rgba(198,198,198,1) 70%, rgba(0,0,0,1) 70%);
  margin: 20px; 
}
  .card__image img {
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
  }
.card-lightgrey-solarleuchten:hover,
.card-lightgrey-solarleuchten:focus {
  box-shadow:  0 0 20px 0;
  transform: scale(1.02) !important;
  transition: none !important;

}

.card-lightgrey-solarleuchten:active {
  transform: scale(1.05) !important;
  transition: none !important;

}


@media screen and (max-width: 767px) {
.card-lightgrey-solarleuchten {
margin: 1rem 0;
width: auto;

}

.cards {
flex-direction: column;

}
/*
.card a::before {
top: -20px;

}*/
}
/*
.card__title {
text-align: center;
font-weight: bold;
}
*/




.card__image img {
height: auto;
max-width: 100%;
}

.card__button {
font-size: 14px;
margin-top: 1rem;
}
.card__text {
  /*  background: #000;*/
    height: 84px;
    color: #fff;
    font-weight: 600;
    border-radius: 5px;
    padding: 20px;
    text-align: left;
}

/*
.card a::before {
display: inline-block;
font-style: normal;
font-variant: normal;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f138";
color: #0091ff;
background-color: transparent;
font-size: 25px;
position: relative;
top: -200px;

}

        /* Caption text */
        .caption-container {
          text-align: center;
          height: 100%;
          max-height: 330px;
          background-color: #c6c6c6;
          padding: 2px 16px;
          color: #000;
       /*   box-shadow: 0 2px 20px 0 rgba(0, 0, 0, 0.80); */
          border-radius: 16px;
          position: relative;
          margin: auto;
          padding: 0;
          width: 100%;
          max-width: 1280px;
          font-size: 14px;
        }
       .caption-container.caption-container_Termin,
       .caption-container.caption-container_Messe,
       .caption-container.caption-container_Produktvorstellung {
          max-height: 710px;
         background: #000;
         color: #fff;
        }
 
       
        .caption-container.caption-container_leasing {
          max-height: 800px;
        }
        .caption-container.caption-container_info,
        .caption-container.caption-container_data {
        visibility: hidden;
        opacity: 0;  
        z-index: 1;
        background: #c6c6c6;
        height: 800px;
        position: absolute;        
        top: 0px;
        transition: 1s;          
        }
        

        .caption-container.caption-container_contact {
          max-height: 800px;
          z-index: 2;
        }
        button.button {
          position: relative;
          top: 20px;
        }


        .modal {
          display: none;
          position: fixed;
          z-index: 1;
          padding-top: 400px;
          left: 0;
          top: 0;
          width: 100%;
          height: 100%;
          overflow: auto;
          
        }
        .modal.modal_Termin,
        .modal.modal_Messe,
        .modal.modal_Produktvorstellung {
            padding-top: 10px;
            z-index: 15;
        
        }    

        /* The Close Button */
        .close_ {
          color: #fff;
          position: absolute;
          top: 0;
          right: 10px;
          font-size: 40px;
          font-weight: 100;
          z-index: 1;
        }
      
        .close_:hover,
        .close_:focus {
          color: #0091ff;
          text-decoration: none;
          cursor: pointer;
        } 

        .meetings-iframe-container {
            position: fixed;
            top: 20px;
            width: 800px;
            left: 30%;
        }
.header_download {
  padding-top: 20px;
}
.header_download h3 {
  font-size: 30px;  
  margin: 0;
}
.header_download p {
  font-size: 20px !important;
}


.pulse {
  background: white;
  box-shadow: 0 0 0 0 rgba(0, 145, 255, 1);
  animation: pulse 1s infinite;
  animation-iteration-count: 1;
}
.pulse2 {
  background: white;
  animation: pulse2 2s infinite;
  animation-iteration-count: 3;
}
.pulse3 {
  animation: pulse3 2s infinite;
  animation-iteration-count: 3;
}        
@keyframes pulse {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.7);
  }
  
  70% {
    transform: scale(1);
    box-shadow: 0 0 0 10px rgba(0, 0, 0, 0);
  }
  
  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
  }
}
 
        
        
@keyframes pulse2 {
  0% {
    transform: scale(0.95);
    fill: #000;
  }
  
  70% {
    transform: scale(1);
    fill: #0091ff;
  }
  
  100% {
    transform: scale(0.95);
    fill: #0091ff;
  }
}    
@keyframes pulse3 {
  0% {
    transform: scale(0.95);
  }
  
  70% {
    transform: scale(1.2);
  }
  
  100% {
    transform: scale(1);
  }
}   









@media (max-width: 1900px) {
  #scene_2_text_9.announcement-box.show_text {
    bottom: 88%;
  } 
  #scene_2_text_10.announcement-box.show_text {
    bottom: 76%;
  } 
  #scene_2_text_11.announcement-box.show_text {
    bottom: 62%;
  }/*
  #scene_2_headline {
      left: 42%;
  }  */
  #scene_3_text_business_1.announcement-box.show_text:after {
      background: #64e6c8;
  }  
  #scene_3_text_private_2.announcement-box.show_text:after {
      background: #009472;
  }  
  #scene_3_text_business_3.announcement-box.show_text:after {
    background: #51e6c3;
  }
  /*
  .card_container {
    left: 15%;
  }
  *//*
  #scene_6_headline {
    left: 9%;
  }
  */
  
  
}





.portrait {
  display: none;
}
.rotate {
  padding: 40px;
}

#scene_1_text_3_scroll_mobile {
  display: none;
}
#scene_1_text_3_scroll {
  color: #0091ff;
}



@media screen and (min-width: 768px) and (max-width: 1400px) {
 /* required */   
#label-termin_solarleuchten_datum-f6a4212d-6c51-4794-bca7-66bba29bd08b > span.hs-form-required {
    left: 79px;
    top: 0px;
}      
   
/* 3 columns     */  
#hsForm_45b32da6-6103-4718-b3c2-c13c1ee45684 > fieldset:nth-child(3) > div.hs_firstname.hs-firstname.hs-fieldtype-text.field.hs-form-field, 
#hsForm_45b32da6-6103-4718-b3c2-c13c1ee45684 > fieldset:nth-child(3) > div.hs_lastname.hs-lastname.hs-fieldtype-text.field.hs-form-field,
#hsForm_45b32da6-6103-4718-b3c2-c13c1ee45684 > fieldset:nth-child(3) > div.hs_email.hs-email.hs-fieldtype-text.field.hs-form-field,
#hsForm_45b32da6-6103-4718-b3c2-c13c1ee45684 > fieldset:nth-child(4) > div.hs_zip.hs-zip.hs-fieldtype-text.field.hs-form-field, 
#hsForm_45b32da6-6103-4718-b3c2-c13c1ee45684 > fieldset:nth-child(4) > div.hs_address.hs-address.hs-fieldtype-text.field.hs-form-field,
#hsForm_45b32da6-6103-4718-b3c2-c13c1ee45684 > fieldset:nth-child(4) > div.hs_city.hs-city.hs-fieldtype-text.field.hs-form-field,
#hsForm_c2aff91a-19dd-4772-8212-417d70a2b3a3 > fieldset:nth-child(2) > div.hs_auswahl_anrede.hs-auswahl_anrede.hs-fieldtype-select.field.hs-form-field,
#hsForm_c2aff91a-19dd-4772-8212-417d70a2b3a3 > fieldset:nth-child(2) > div.hs_zugehorigkeit_smartcontent.hs-zugehorigkeit_smartcontent.hs-fieldtype-select.field.hs-form-field,
#hsForm_c2aff91a-19dd-4772-8212-417d70a2b3a3 > fieldset:nth-child(3) > div.hs_email.hs-email.hs-fieldtype-text.field.hs-form-field, 
#hsForm_c2aff91a-19dd-4772-8212-417d70a2b3a3 > fieldset:nth-child(3) > div.hs_zip.hs-zip.hs-fieldtype-text.field.hs-form-field,
#hsForm_c2aff91a-19dd-4772-8212-417d70a2b3a3 > fieldset:nth-child(4) > div.hs_firstname.hs-firstname.hs-fieldtype-text.field.hs-form-field,
#hsForm_c2aff91a-19dd-4772-8212-417d70a2b3a3 > fieldset:nth-child(4) > div.hs_lastname.hs-lastname.hs-fieldtype-text.field.hs-form-field,
#hsForm_f6a4212d-6c51-4794-bca7-66bba29bd08b > fieldset:nth-child(2) > div.hs_auswahl_anrede.hs-auswahl_anrede.hs-fieldtype-select.field.hs-form-field,
#hsForm_f6a4212d-6c51-4794-bca7-66bba29bd08b > fieldset:nth-child(2) > div.hs_zugehorigkeit_smartcontent.hs-zugehorigkeit_smartcontent.hs-fieldtype-select.field.hs-form-field,
#hsForm_f6a4212d-6c51-4794-bca7-66bba29bd08b > fieldset:nth-child(3) > div.hs_email.hs-email.hs-fieldtype-text.field.hs-form-field,
#hsForm_f6a4212d-6c51-4794-bca7-66bba29bd08b > fieldset:nth-child(3) > div.hs_zip.hs-zip.hs-fieldtype-text.field.hs-form-field,
#hsForm_f6a4212d-6c51-4794-bca7-66bba29bd08b > fieldset:nth-child(4) > div.hs_firstname.hs-firstname.hs-fieldtype-text.field.hs-form-field,
#hsForm_f6a4212d-6c51-4794-bca7-66bba29bd08b > fieldset:nth-child(4) > div.hs_lastname.hs-lastname.hs-fieldtype-text.field.hs-form-field,
#hsForm_f6a4212d-6c51-4794-bca7-66bba29bd08b > fieldset:nth-child(5) > div.hs_termin_solarleuchten_datum.hs-termin_solarleuchten_datum.hs-fieldtype-date.field.hs-form-field,
#hsForm_f6a4212d-6c51-4794-bca7-66bba29bd08b > fieldset:nth-child(5) > div.hs_termin_uhrzeit_solarleuchten.hs-termin_uhrzeit_solarleuchten.hs-fieldtype-select.field.hs-form-field {
  width: 50%;   
} 
  fieldset {
    display: flex !important;
  }
  .form-columns-1,
  .form-columns-2 {
    width: 700px !important;
  }
      #hsForm_45b32da6-6103-4718-b3c2-c13c1ee45684 > fieldset:nth-child(3),
    #hsForm_45b32da6-6103-4718-b3c2-c13c1ee45684 > fieldset:nth-child(4),
    .hs-form-45b32da6-6103-4718-b3c2-c13c1ee45684_17b8c6f8-501a-430a-ab6e-e407e648023f fieldset {
        max-width: 700px !important; 
    }
#scene_5_text_1.announcement-box.show_text,
#scene_5_text_2.announcement-box.show_text,
#scene_5_text_3.announcement-box.show_text,
#scene_5_text_4.announcement-box.show_text,
#scene_5_text_5.announcement-box.show_text {
  bottom: unset;
  top: 28%;
  left: 1%;
  color: #000;  
	background:#E5E5EA;
  width: 250px;
  height: 160px;
}
#scene_5_text_5.announcement-box.show_text {
  height: 110px;  
}
#scene_5_text_4.announcement-box.show_text {
  height: 180px;  
} 
  #scene_2_headline.show_text {
    transform: scale(1,1) translate(0%, 10%);

  }
  #scene_5_headline.show_text {
 transform: scale(1,1) translate(3%, 10%);    
    padding: 10px;
    width: 250px;    
  }
  p.advantage_headline {
    font-weight: bold;
    margin: 0 0 10px 0;
  }
  p.advantage_copy {
    font-weight: 500;
    margin: 0;    
  }
  #bubble_center {
    top: 30px;
  }
#bubble_center {
  transform: translateX(-50px);
  transition: all .25s;
  visibility: hidden;
  opacity: 0;    
}
#bubble_center.show_text {
  transform: translateX(0px);
  transition: all .25s, width 0s, padding-top 0s;
  visibility: visible;
  opacity: 1;
}
  .announcement-box.show_text {
  transform: translateX(0px);
  transition: all .25s;         
  visibility: visible;
  opacity: 1;    
  }
  .announcement-box {
  transform: translateX(-50px);
  transition: all .25s;    
  visibility: hidden;
  opacity: 0;    
  }
  .headline1,
  h3.headline  {
    font-size: 20px !important;
}
.headline2, h3.subheadline {
    font-size: 10px !important;
    margin: 0;
}  

  #scene_1_text_1.announcement-box.show_text {
   left: 1%;
    height: 75px;
    width: 180px;
  }  
  #scene_1_text_2.announcement-box.show_text {
   top: 42%;
   left: 1%;
    width: 97%;
    height: 100px;
  }
  #scene_1_text_3.announcement-box.show_text {
    top: 10px;
    left: 28%;
    width: 360px;
    height: 50px;
    background: transparent;
  }
  #claim {
    font-size: 16px !important;
    bottom: 0;
  }
  .lighting_container.scale_on {
    transform: scale(1.6);
    top: 16%;
  }
  .lighting_container {
    width: 300px;
  }
  .logo {
    bottom: 0;
    right: 20px;
    height: 80px;
  }
  .logo img {
    width: 200px;
  }
  #text_logo {
    right: 0;
    bottom: -35px;
    top: unset;
    font-size: 12px;
  }
  #sun {
    top: 20px;
  }
  #moon {
    top: -30px;
  }
  .moon {
    height: 5em;
    width: 5em;
  }
  .scroll_scrollanimation {
    display: none;
  }
  #battery {
    top: 170px;
    left: 32%;
  }
  .battery {
    height: 57px;
    width: 127px;    
  }
  .battery::before {
    left: 121px;
  }
  .scroll_scrollanimation {
    display: none;
  }
  .first_line {
    position: fixed;
    top: 200px;  
  }
  .second_line {
    position: fixed;
    top: 100px;  
  }    
    #scene_2_headline {
    left: 1%;
  }

  #percentage_1,
  #percentage_2,
  #percentage_3 {
    font-size: 14px;
  }  
  #scene_2_text_9.announcement-box.show_text, 
  #scene_2_text_10.announcement-box.show_text, 
  #scene_2_text_11.announcement-box.show_text {
    width: 58px;
    padding: 5px;
  }
  #scene_2_text_9.announcement-box.show_text {
    left: 59.3%;
  }
  #scene_2_text_10.announcement-box.show_text {
    left: 47%;
    bottom: 72%;
  }
  #scene_2_text_11.announcement-box.show_text {
    left: 33.6%;
    bottom: 56%;    
  }
  .text.title {
    font-size: 15px;
  }
  .announcement-box {
    width: 360px;
  }
  .announcement-box.show_text {
    left: 53%;
  }
  
  
  #scene_2_text_1,
  #scene_2_text_2,
  #scene_2_text_3,
  #scene_2_text_4,
  #scene_2_text_5,
  #scene_2_text_6,
  #scene_2_text_7,
  #scene_2_text_8 {
    bottom: 17%;
    left: 53%;
  }  
  #scene_2_text_1.announcement-box.show_text,
  #scene_2_text_2.announcement-box.show_text,
  #scene_2_text_3.announcement-box.show_text,
  #scene_2_text_4.announcement-box.show_text,
  #scene_2_text_5.announcement-box.show_text,
  #scene_2_text_6.announcement-box.show_text,
  #scene_2_text_7.announcement-box.show_text,
  #scene_2_text_8.announcement-box.show_text {
    bottom: 17%;
    left: 53%;
  }

  #scene_4_headline > h3.headline,
  #scene_3_headline > h3.headline {
    font-size: 20px !important;
  }
  #scene_4_headline > h3.subheadline,
  #scene_3_headline > h3.subheadline {
    font-size: 10px !important;
  }
  
  #elektriker_privat {
    width: 120px;
  }
  #elektriker_gewerbe,
  #elektriker_gewerbe2 {
    width: 120px;    
  } 
  
  #scene_3_text_private_1.announcement-box.show_text,
  #scene_3_text_private_2.announcement-box.show_text,
  #scene_3_text_private_3.announcement-box.show_text,
  #scene_3_text_private_4.announcement-box.show_text {
    left: 16%;
    top: 22%;
    width: 550px;
  }

  #scene_3_text_business_1.announcement-box.show_text,
  #scene_3_text_business_2.announcement-box.show_text,
  #scene_3_text_business_3.announcement-box.show_text,
  #scene_3_text_business_4.announcement-box.show_text {
    left: 16%;    
    top: 42%;
    width: 550px;
  }


#scene_3_text_private_3.announcement-box.show_text:after {
    height: 18px;
    background: #77e6cc;  
}
#scene_3_text_private_4.announcement-box.show_text:after {
    height: 18px;
    background: #77e6cc;  
}


#scene_3_text_business_2.announcement-box.show_text:after {
    height: 18px;
    background: #16b18d;  
}
#scene_3_text_business_3.announcement-box.show_text:after {
    height: 18px;
    background: #16b18d;  
}
#scene_3_text_business_4.announcement-box.show_text:after {
    height: 18px;
    background: #000;  
}  
  
  .buffer {
      height: 4000px;
      width: 100%;
      background: #000;
      position: absolute;
      top: 11000px;
      left: 0;
      z-index: 2;
  }
  .buffer2 {
      height: 800px;
      width: 100%;
      background: #000;
      position: absolute;
      top: 21000px;
      left: 0;
      z-index: 2;
  }  
  .bubble.bubble--center {
    left: 100px;
  }
  .center {
    top: -130px;    
  }
  .bubble-holder {
    left: 40%;
    top: -3%;
  }
  .bubble {
    transform-origin: 300px;
    font-size: 10px;
  }
  .bubble-holder.is-animated .bubble--big span, 
  .bubble-holder.is-animated .bubble--big .bubble__wrapper {
    width: 65px;
    height: 65px;
    padding: 0;
    z-index: 4;
  }
  .bubble span, 
  .bubble .bubble__wrapper {
    transform-origin: 280% 60%;
  }

  #scene_4_headline.show_text {
  box-shadow: none;    
  left: unset;
    top: 0px;
    right: 5%;    
  }
  .scene_4 {
    top: 18000px;
    height: 6000px;
  }
  .scene_5 {
  top: 22000px;
  left: 0;
  height: 6000px;
  }
 /*
  .bubble-holder.is-animated .bubble--big:hover {
   left: 165px; 
    top: 290px;
  }
  */
  
  #feature_mandulis_square > p.feature_copy,
  #feature_mandulis_circle > p.feature_copy,
  #feature_amatera_shift > p.feature_copy {
    font-size: 10px !important
  }
  #features_amatera_shift, 
  #features_mandulis_circle, 
  #features_mandulis_square {
    top: 8%;
    width: 260px;
}

  #feature_amatera_shift, 
  #feature_mandulis_circle,
  #feature_mandulis_square {
    width: 250px;
    padding: 0px;
    margin: 0;
  }
  /*
  #familie_mandulis_square > image,
  #familie_mandulis_circle > image,
  #familie_amatera_shift > image {
    width: 400px;
  }
  */
  .family_container {
    top: 0;
        left: 25%;
  }
  #familie_mandulis_square, #familie_mandulis_circle, #familie_amatera_shift {
     width: 400px;
        top: -140px;
    left: 0;
  }
  #features_amatera_shift, #features_mandulis_circle, #features_mandulis_square {
    top: 1%;
    padding: 15px;
  }
  
  #features_mode_0, #features_mode_1, #features_mode_2, #features_mode_3, #features_mode_4, #features_amatera_shift, #features_mandulis_circle, #features_mandulis_square, #text_amatera_shift_100, #text_amatera_shift_60, #text_amatera_shift_wand, #text_mandulis_circle_100, #text_mandulis_circle_60, #text_mandulis_circle_wand, #text_mandulis_square_100, #text_mandulis_square_60, #text_mandulis_square_wand {
    font-size: 10px;
  }
  #text_amatera_shift_100, #text_mandulis_circle_100, #text_mandulis_square_100 {
        top: 19.3%;
  }
  
#text_amatera_shift_60, #text_mandulis_circle_60, #text_mandulis_square_60 {
    left: 59.5%;
    top: 30.8%;
}  
#text_amatera_shift_wand, #text_mandulis_circle_wand, #text_mandulis_square_wand {
    left: 70%;
    top: 41.9%;
}
  
  #scene_1_text_3_scroll {
    
    display: none;
  }
  #scene_1_text_3_scroll_mobile {
    font-size: 14px !important;
    display: block;
  }
  
#feature_mode_0 .feature_copy, #feature_mode_1 .feature_copy, #feature_mode_2 .feature_copy, #feature_mode_3 .feature_copy, #feature_mode_4 .feature_copy, #feature_amatera_shift .feature_copy, #feature_mandulis_circle .feature_copy, #feature_mandulis_square .feature_copy {
  font-size: 10px !important;
  }  
.feature_headline, #feature_mode_1 .feature_headline, #feature_mode_2 .feature_headline, #feature_mode_3 .feature_headline, #feature_mode_4 .feature_headline, #feature_amatera_shift .feature_headline, #feature_mandulis_circle .feature_headline, #feature_mandulis_square .feature_headline {
  font-size: 14px !important;
  }  
  #features_mode_0, #features_mode_1, #features_mode_2, #features_mode_3, #features_mode_4 {
    left: 1%;
    top: 38%;
    right: unset;
    
  }
  #scene_5_headline.show_text {
    box-shadow: none;
    left: unset;
    top: 1%;
    padding: 15px;
}
  
  #scene_6_headline {
    max-width: 640px;
    padding: 10px;
}
  .card_container {
    max-width: 100%; 
    top: 48%;
  }
  .card-lightgrey-solarleuchten {
    max-width: 200px;
    margin: 10px;
    border-radius: 15px;
  }
  .card__text {
    padding: 0px 10px 10px 10px;
    font-size: 10px;
    height: 50px;
  }
  
  .card__image {
    width: 200px;
  }
  .card__image img {
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
  }
  .cards {
    justify-content: center;
  }
  
  .caption-container.caption-container_Termin, .caption-container.caption-container_Messe, .caption-container.caption-container_Produktvorstellung {
    max-height: 750px; 
    max-width: 750px;
  }
  #termin_solarleuchten_datum-f6a4212d-6c51-4794-bca7-66bba29bd08b {
    width: 322px;
    height: 43.8px;
    border-radius: 15px;
    color: #858585;
  }
  #label-termin_solarleuchten_datum-f6a4212d-6c51-4794-bca7-66bba29bd08b > span.hs-form-required {
      left: 309px;
      top: 5px;
  }  
  #hsForm_45b32da6-6103-4718-b3c2-c13c1ee45684 > fieldset:nth-child(1) > div > div > div,
  #hsForm_45b32da6-6103-4718-b3c2-c13c1ee45684 > fieldset:nth-child(5) > div > div,
  #hsForm_f6a4212d-6c51-4794-bca7-66bba29bd08b > fieldset:nth-child(6) > div > div,
  #hsForm_f6a4212d-6c51-4794-bca7-66bba29bd08b > fieldset:nth-child(1) > div > div > div,
  #hsForm_c2aff91a-19dd-4772-8212-417d70a2b3a3 > fieldset:nth-child(5) > div > div,
  #hsForm_c2aff91a-19dd-4772-8212-417d70a2b3a3 > fieldset:nth-child(1) > div > div > div {
    margin-right: 25px !important;
  }
  #hsForm_45b32da6-6103-4718-b3c2-c13c1ee45684 > fieldset:nth-child(3),
  #hsForm_45b32da6-6103-4718-b3c2-c13c1ee45684 > fieldset:nth-child(4) {
    margin-right: 20px !important;    
  }
  .header_download h3 {
    font-size: 20px;
    margin: 0;
}
  .header_download p {
    font-size: 10px !important;
}
  

  .form {
    max-width: 100%; 
    margin: 0 auto;
    text-align: left;
    background: #000;
    padding: 0 20px 20px 20px;
  }
  #scene_3_text_private_1.announcement-box.show_text:after {
    background: #73e6cb;
  }
  #scene_3_text_business_1.announcement-box.show_text:after {
    background: #18b591;
  }


  .wrapper {
    background: rgb(0,0,0);
    background: linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 31%, rgba(101,101,101,1) 31%, rgba(101,101,101,1) 100%);
  }
  .bubble.bubble--center {
    background: transparent;
  }
  #bubble_center.show_text {
    width: 400px;
    text-align: left;
    padding-top: 30px;    
  }
    #scene_1_text_2.announcement-box.show_text,
    #scene_1_text_2 {
      top: 42%;
      left: 1%;
      width: 97%;
      height: 100px;
    }

}




 #progressbar {
      position: fixed;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 10px;
      background-color: #f0f0f0;
      z-index: 444;
    }

    #progressbar .fin {
      width: 0%;
      height: 100%;
      background-color: #0091ff;
    }


#button_flyer {
    position: fixed;
    top: 75%;
    left: 50%;
    transform: translate(-50%, 80%);
    z-index: 344;
    display: block;
    padding: 12px;
}
#button_flyer.not_visible {
      display: none;
}
.contact_slider {
  display: none;
}

.card-lightgrey-solarleuchten:hover {
  cursor: pointer;
}




  @media (min-width: 1024px) and (max-width:1400px) {
    #scene_1_text_2.announcement-box.show_text,
    #scene_1_text_2 {
      top: 42%;
      left: 1%;
      width: 97%;
      height: 100px;
    }
    #bubble_center {
      transform: translateX(-200px);
      transition: all .25s;
      visibility: hidden;
      opacity: 0;    
    }
   #bubble_center.show_text {
      transform: translateX(0px);
      transition: all .25s, width 0s, padding-top 0s;
      visibility: visible;
      opacity: 1;
    }
  .announcement-box.show_text {
    transform: translateX(0px);
    transition: all .25s;         
    visibility: visible;
    opacity: 1;    
  }
  .announcement-box {
    transform: translateX(-50px);
    transition: all .25s;    
    visibility: hidden;
    opacity: 0; 
  }
  #features_mode_0, #features_mode_1, #features_mode_2, #features_mode_3, #features_mode_4, #features_amatera_shift, #features_mandulis_circle, #features_mandulis_square, #text_amatera_shift_100, #text_amatera_shift_60, #text_amatera_shift_wand, #text_mandulis_circle_100, #text_mandulis_circle_60, #text_mandulis_circle_wand, #text_mandulis_square_100, #text_mandulis_square_60, #text_mandulis_square_wand {
    transform: translateX(-50px);
    transition: all .25s;    
    visibility: hidden;
    opacity: 0;     
    }    
    
  #features_mode_0.show_text, #features_mode_1.show_text, #features_mode_2.show_text, #features_mode_3.show_text, #features_mode_4.show_text, #features_amatera_shift.show_text, #features_mandulis_circle.show_text, #features_mandulis_square.show_text, #text_amatera_shift_100.show_text, #text_amatera_shift_60.show_text, #text_amatera_shift_wand.show_text, #text_mandulis_circle_100.show_text, #text_mandulis_circle_60.show_text, #text_mandulis_circle_wand.show_text, #text_mandulis_square_100.show_text, #text_mandulis_square_60.show_text, #text_mandulis_square_wand.show_text {
    transform: translateX(0px);
    transition: all .25s, width 0s, padding-top 0s;
    visibility: visible;
    opacity: 1;    
    }    
    
  .container {
    height: 400px;
    width: 500px;
    position: relative;
    top: 300px;
  }  
  .battery {
    top: 60%;    
  }
  #scene_1_text_3.announcement-box.show_text {
    left: 34%;
  }  
  
  .lighting_container {
    left: 23%;
    top: 27%;
    position: fixed;
    width: 700px;
    z-index: 2;
    transform: scale(1);
    transition: 1s ease-in;  
  }
  .lighting_container.scale_on {
    top: 20%;
    transform: scale(1.3);
    transition: 1s transform ease-in;
  }  
    .first_line {
      top: 500px;
    }
    .second_line {
      top: 400px;
    }
    #scene_2_text_1, #scene_2_text_2, #scene_2_text_3, #scene_2_text_4, #scene_2_text_5, #scene_2_text_6, #scene_2_text_7, #scene_2_text_8 {
      left: 63%;
      bottom: 10%;  
      position: absolute;
    }
    #scene_2_text_1.announcement-box.show_text, #scene_2_text_2.announcement-box.show_text, #scene_2_text_3.announcement-box.show_text, #scene_2_text_4.announcement-box.show_text, #scene_2_text_5.announcement-box.show_text, #scene_2_text_6.announcement-box.show_text, #scene_2_text_7.announcement-box.show_text, #scene_2_text_8.announcement-box.show_text {
      left: 63%;
      bottom: 10%;
      position: absolute;      
    }  
    #elektriker_gewerbe, #elektriker_privat {
      bottom: 12%;
      width: 250px;
    }
    #elektriker_gewerbe2 {
      width: 250px;
    }
    #scene_3_text_private_1.announcement-box.show_text, #scene_3_text_private_2.announcement-box.show_text, #scene_3_text_private_3.announcement-box.show_text, #scene_3_text_private_4.announcement-box.show_text {
      left: 18%;
      top: 12%;
      width: 300px;
    }    
    #scene_3_text_business_1.announcement-box.show_text, #scene_3_text_business_2.announcement-box.show_text, #scene_3_text_business_3.announcement-box.show_text, #scene_3_text_business_4.announcement-box.show_text {
      left: 49%;
      top: 12%;
      width: 300px;
    }  
    #scene_3_text_business_1.announcement-box.show_text:after,
    #scene_3_text_business_2.announcement-box.show_text:after,
    #scene_3_text_business_3.announcement-box.show_text:after,
    #scene_3_text_business_4.announcement-box.show_text:after {
      background: #009b77;
    }  
    #scene_3_text_private_2.announcement-box.show_text:after {
    background: #bfe6dd;
    }
    .wrapper {
      height: 100%;
    }  
    .center {
      top: 70px;
      left: 300px;
    }

    #familie_mandulis_square, #familie_mandulis_circle, #familie_amatera_shift {
      width: 700px;
      top: 30px;
      left: -40px;
    }    
    #feature_amatera_shift, #feature_mandulis_circle, #feature_mandulis_square {
      max-width: 100%;
    }
    #features_amatera_shift, #features_mandulis_circle, #features_mandulis_square {
      top: 2% !important;
    }
    #scene_5_text_1.announcement-box.show_text, #scene_5_text_2.announcement-box.show_text, #scene_5_text_3.announcement-box.show_text, #scene_5_text_4.announcement-box.show_text, #scene_5_text_5.announcement-box.show_text {
      height: auto;
    }    
    .card__image,
    .card-lightgrey-solarleuchten {
      width: 100%;
    }
    .card-lightgrey-solarleuchten {
      max-width: 320px;
      background: linear-gradient(180deg, rgba(198,198,198,1) 0%, rgba(198,198,198,1) 78.8%, rgba(0,0,0,1) 78.8%);
    }
    #termin_solarleuchten_datum-f6a4212d-6c51-4794-bca7-66bba29bd08b {
      width: 342px;
      height: 43.8px;
      border-radius: 15px;
      color: #858585;
    }
    #label-termin_solarleuchten_datum-f6a4212d-6c51-4794-bca7-66bba29bd08b > span.hs-form-required {
        left: 35px;
        top: 8px;
        color: #858585;
    }
    #hsForm_45b32da6-6103-4718-b3c2-c13c1ee45684 > fieldset:nth-child(3),
    #hsForm_45b32da6-6103-4718-b3c2-c13c1ee45684 > fieldset:nth-child(4),
    .hs-form-45b32da6-6103-4718-b3c2-c13c1ee45684_17b8c6f8-501a-430a-ab6e-e407e648023f fieldset {
        max-width: 700px !important; 
    }
    .headline2, h3.subheadline, #scene_4_headline > h3.subheadline, #scene_3_headline > h3.subheadline {
      font-size: 14px !important;
    }
    #scene_1_text_1.announcement-box.show_text,
    #scene_2_headline.show_text,
    #scene_5_headline.show_text {
      width: auto;
    }
    .hs-dateinput:before {
      right: 91%;
    }
  .buffer2 {
      height: 800px;
      width: 100%;
      background: #000;
      position: absolute;
      top: 17000px;
      left: 0;
      z-index: 2;
  }  
    .puzzle {
      width: 100px;
      height: 700px;
      position: fixed;
      left: 38%;
      top: 11%;
      border: 1px solid #fff;
    }

}
  




@media (orientation: portrait) {
  body h1 {
    text-align: center;
  }
  .portrait {
  display: block;
  height: 100vh;
  width: 100vw;
  background: linear-gradient(90deg, rgba(15,19,77,1) 0%, rgba(130,185,225,1) 0%, rgba(0,155,119,1) 49%);    
  }
  .logo_mobile {
    display: block;
    padding-top: 50px;
    text-align: center;
  }
  #progressbar {
    display: none;
  }

  .landscape {
    display: none !important;
  }
  .landscape.on {
    display: block;
  }
  .footer.footer,
  .header { 
  display: none;
  }
}
@media (orientation: landscape) {
  .landscape {
    display: block;
  }
  .portrait {
  display: none;
  }
}