body {
  font-family: 'Roboto', sans-serif;
  overflow-x: hidden;
  margin: 0;
  padding: 0;

}

*{
  box-sizing: border-box;
}


h1 {
    font-size: 2em;
	font-family: 'Roboto', sans-serif;
	color: #000;	
	font-weight: 700;
}


h2, h3, h4 {
	font-family: 'Roboto', sans-serif;
	color: #1E3547;	
	font-weight: 300;
    word-wrap: break-word;
}


h2 {
	font-size: 1.8em;
}

h3 {
	font-size: 1.6em;
}

h4 {
	font-size: 1.4em;
    color: #1E3547;
    font-weight: 300;
}

p {
    
    font-family: 'Roboto', sans-serif;
	color: #000;
    font-size: 1.1em;
	font-weight: 300;
}

.specialchar {
    color: #ED61D8;
}


.loader{
  background: #1E3547;
  color: white;
  position: absolute;
  width: 100%;
  height: 100vh;
  display: flex;
    flex-direction: column;
  justify-content: center;
  align-content: center;
  align-items: center;
  z-index: 2;
    pointer-events:none;
}

.progress{
  position: absolute;
  height: 4px;
  width: 90%;
  transform: scaleX(0);
  background-color: #ED61D8;
  transition: all 1s ease;
}

.progressborder {
  display: flex;
  position: absolute;
  top: 52%;
  height: 2px;
  width: 20%;
    min-width:250px;
  padding: 20px;
  border: 1px solid #fff;
    border-radius: 6px;
  justify-content: center;
  align-content: center;
  align-items: center;
}

.nav--bar{
 
  display: flex;
  align-content: space-between;
  width: 100%;
  justify-content: space-between;
  margin-top: 0px;
    

}

.logo{
   /* position: absolute; 
    margin: 60px 0 0 0;
    width: 480px;
    opacity:0;
    padding: 22px;
    */
    
    /* position: absolute; */
    margin: 5px 0 0 0;
    width: 400px;
    opacity: 0;
    padding: 22px;
    align-self: center;
}

}

.section{
  display: flex;
  padding: 2vh;
}



.first h1{
  font-size: 10rem;
  line-height: 8rem;
  letter-spacing: -0.3rem;
  width: 50%;
  margin: 0 0 30px -10px;
}

.button--hero{
  background: #F2CE6E;
  color: black;
  border: none;
  font-weight: 600;
  border-radius: 50px;
  padding: 15px 30px;
  margin-top: 24px;
  margin-right: 40px;
  font-size: 0.6rem;
  cursor: pointer;
  transition: all 0.8s ease;
}

.button--customize{
  background: #F2CE6E;
  color: black;
  border: none;
  font-weight: 600;
  border-radius: 50px;
  padding: 15px 30px;
  margin-top: 24px;
  margin-right: 40px;
  font-size: 0.6rem;
  cursor: pointer;
  transition: all 0.8s ease;
}
.button--hero:hover{
  background: black;
  color: white;
}

.button--navbar{
  background: black;
  color: white;
  border: none;
  border-radius: 50px;
  padding: 10px 30px;
  margin-right: 40px;
  font-size: 0.6rem;
}

.myButton {
	
	background: #ED61D8;
	background-color:#ED61D8;
	border-radius:8px;
	
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:15px;
	padding:16px 23px;
	text-decoration:none;
	text-shadow:0px 1px 0px #263666;
}
.myButton:hover {
	background:linear-gradient(to bottom, #415989 5%, #2e466e 100%);
	background-color:#415989;
}
.myButton:active {
	position:relative;
	top:1px;
}


.second{
 /* justify-content: flex-start; */
  position: relative;
}

.section--two--container{
  width: 360px;
  margin-right: 10%;
  z-index: 1;
}

.section--third--container{
  width: 360px;
  margin-left: 10%;
  z-index: 1;
}

.stoerer {

    opacity:0;
    cursor: pointer;
   /*  position: absolute; */
    width: 200px;
    height: auto;
    text-align: end;
    bottom: -2%;
    right: 4%;

}

#stoererdiv {
    text-align: right;
    padding: 40px;
    margin-top: -320px;
    margin-left: auto;
    margin-right: auto;
    max-width: 1700px;
    /* Damit der Abstand des Contents unten wieder stimmt */
    margin-bottom: 48px;
}




.custom--bg{
  width: 100%;
  height: 800px;
  background: #1E3547;
    /*
  -webkit-transform: skew(2deg);
  -moz-transform: skew(2deg);
  -o-transform: skew(2deg);
  transform: skew(2deg) rotate(2deg);
    */
  position: absolute;
  top: 0;
  left: 0;
}

footer{
 background: #1E3547; 
 min-height: 900px;
}

.button--footer{

  cursor: pointer;
  transition: all 0.8s ease;
}

.blink {
    animation-name: animation_blink;
    animation-timing-function: ease-in;
    animation-duration: 1s; 
    animation-iteration-count: infinite;            
}

@keyframes animation_blink {
    0% { opacity: 1; }
    50% { opacity: 0.3; }
    100% { opacity: 1; }    
}



#webgi-canvas {
  width: 100%;
  height: 100%;
  position: fixed;
  
  top: 0; 
}


#webgi-canvas-container{

  pointer-events: none; 
 
  display: flex;
  justify-content: flex-end;
  flex-direction: column;
  align-items: center; 
}


.stopFixed {
    position: relative;

}

/* Lottie Animationen */


.button--exit{
  width: 90px;
  margin-bottom: 5%;
  z-index: 5;
  position: fixed;
  bottom: 0;
  display: none;
}

.customizer--container{
  position: fixed;
  top: 50%;
  display: none;
  transform: translateY(-50%);
}

.strap--colors{
  list-style: none;
}

.button--colors{
  width: 30px;
  height: 30px;
  border-radius: 50px;
  border: 1px solid white;
  padding: 0;
  margin-bottom: 10px;
  cursor: pointer;
  transition: all 0.8s ease;
}

.button--colors:hover{
  filter: drop-shadow(0 0 0.75rem rgba(28, 17, 52, 0.704));
  transform: scale(1.5);
}

.yellow{
  background-color: #F0D56C;
}

.red{
  background-color: rgb(231, 34, 34);
}

.black{
  background-color: rgb(74, 76, 79);
}



/* OPENSUN CSS */


.claim {
    display: flex;
    flex-direction: row;
    line-height: 220px;
    font-size: 20rem;
	font-family: 'Roboto', sans-serif;
	color: #fff;	
    opacity: 1;


}



.contentcontainer {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    max-width: 1200px;
    padding: 0 30px 0 30px
}

.teaserwidth{
		max-width:60%;
}


     
.lottie-bg {

    }

.heroimage {
    display: flex;
    flex-direction: column;
    margin: 0 auto;
    justify-content: space-between;
    text-align: center;
    top: 0;
    width: 100%;
    background: #fff;
    background-image: url("../assets/images/hero_november.jpg"); 

    background-size: cover;
    background-position: bottom center; 
    border: solid 12px white; 
    border-radius: 22px;
    opacity: 0;
    

    height: 96vh;
    min-height: 800px;
    
    max-width: 1700px;
    
  
    z-index: 2;
}

.rightbackground {
   
    background: rgb(30,53,71);
    background-image: url("../assets/images/opsun_background_right.svg"); 
    background-size: cover;
    background-repeat: no-repeat;
    background-position: right bottom;
 

}

.leftbackground {
   
    background: rgb(30,53,71);
    background-image: url("../assets/images/opsun_background_left.svg"); 
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left center;
 

}


#navmenu {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
   /*  margin-top: 70vh;*/
 
   
    width: 600px;
    background-color:  rgb(30,53,71);
    align-self: center;
    border-radius: 12px; 
    opacity: 0;
    
    
        margin-top: -48px;
    max-width: 1700px;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    
}

#navmenu a {
    display: flex;
    flex-direction: row;
    text-decoration: none;
}


#navmenu a: hover {
    color: red;

}

#navmenu p {
     color: #fff;
    line-height: 8px;
}


.opsconti {
    position: absolute;
    text-align: center;
    bottom: -100px;
    
}
.opsimage {
    width: 70%;
    height: auto;
}

.imagbut {
    padding: 12px;
    display: flex;
    flex-direction: row;

}

#but1,#but2,#but3 {
    opacity: 0;
}


.imagbut img {
    width: 30px;
    height: auto;
    padding: 0 12px 0 0;
}

.imagbut:hover {
    color: #fff;
    text-decoration: underline;
}
.systemimage {
    width: 100%;
    height: auto;
    margin-top: -30px;
    margin-right: -40px;
}

#S, #o, #l, #a, #r {
    z-index: 1;
    display: inline;
    opacity: 0;
    font-size: 60px;
    padding: 0 10px 0 10px;
    text-shadow: 3px 0px 3px rgba(17, 91, 128, 0.7);
    background: rgba(30,51,71,0.8);
}

.heroclaim {
    z-index: 1;
    text-align: center;
    opacity: 0;
    font-size: 52px;
    display: block;
    margin-top: 140px;
    /* background: rgba(30,51,71,0.8); */
}

	.vertical_marg { 

		height: 144px;
		width: 100%;
		
	}

.subheadmargin {
	margin-bottom: -24px;

}

.white {
    color: #fff;
    
}


/* Button nach Oben */

.totop {
    position: absolute;
    width: 40px;
    height: 40px;
    margin-top: -20px;
    padding: 2px;
    background-color: #E7EEF0;
    border-radius: 2;
}

.totop:hover {
    background-color: #fff;
}

.totop img {
    padding: 2px;
    margin: 8px 7px 8px 7px;
}

/* Flexbox Dreispalte */

.flexcontainer {
  display: flex; /* or inline-flex */
  gap: 20px;
}


.halbspalte {
 width: 50%;
}

.halbspaltenpadding {
 padding: 0 22px 0 22px;
}

.tleft {
    text-align: left;
}

.tright {
    text-align: right;
}


.halbspalteback {
    /* background-color: #F7F7F7; */
    background-image: linear-gradient(to top, white 50%, #F7F7F7 50%)

}

.halbspaltebackgradient {
    /* background-color: #F7F7F7; */
    background-image: linear-gradient(to top, white 0%, #F7F7F7 50%)

}

.drittelspalte {
    display: flex;
    justify-content: space-between;
    flex-direction: column;    
}

.viertelspalte {
    width: 25%;
    background-color: #F7F7F7;
    border-radius: 6px;
    padding: 32px 12px 12px 12px;
    text-align: center;
}


.drittelspalte img {
    text-align: center;
    width: 100%;
   
}

.viertelspalte img {
    width: 90%;
    height: auto;
    margin-bottom: 20px;
}

#dimensionimage {
    position: absolute;
    margin: 350px 0 0 0;
    width: 48vw;
    max-width: 600px;
    height: auto;
    opacity: 0;   
    z-index: 1;  
}

#dimensionimage2 {
    position: absolute;
    margin: 215px 0 0 0;
    width: 48vw;
    max-width: 600px;
    height: auto;
    opacity: 0;
    z-index: 1;  
}


.image_pos {
    margin-right: auto;
    margin-left: auto;
}

.image_right {
    right: 0;
}
/* Slider */

.mySwiper {
    z-index: 1;
    overflow: visible;
}

.swiper-container p {
    margin: 0px;
    padding: 0px;
}
  swiper-container {
      width: 100%;
      height: 100%;

    }

    swiper-slide {
      background-position: center;
      background-size: cover;
    }

    swiper-slide img {
      display: block;
      width: 100%;
     margin-left: auto;
     margin-right: auto;
    }


:root {
    --swiper-theme-color: #1E3547;
}


#opensunoverlay {
    position: relative !important;
    width:100%;
    margin-top: -39%;
    z-index:  2;
    pointer-events: none;
}

.slidetext {
    position: absolute;

    border: 0px #ededed solid;
    border-radius: 12px;
  
    max-width: 90%;

    text-align: center;
    
    left: 0;
    right: 0;
    margin: 0 auto;
  

}

.slidetext p {
    margin: 0;
    padding: 0;
}
/* Formular */

.cr_form-input{
    max-width: 280px;
}

/* Slider 2 */

.swiper1 {

  overflow: visible !important;
height: 520px;

}

.swiper-slide {
background-color: #fff;
}

.swiper-slide img{
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
	border: solid #BDBDBD 0.5px; 
	box-shadow: 5px 5px 7px rgba(0, 0, 0, 0.1)  ; 
	-webkit-box-shadow: 5px 5px 7px rgba(0, 0, 0, 0.1)  ; 
	-moz-box-shadow: 5px 5px 7px rgba(0, 0, 0, 0.1)  ;
}



.swiper1, swiper-container {
    margin-left: 0px !important;
    margin-right: 0px !important;
    position: relative;
}

.swiper-scrollbar {
   left: 0px;
   width: 100% !important;
   bottom: -12% !important;
}

.swiper-horizontal>.swiper-scrollbar, .swiper-scrollbar.swiper-scrollbar-horizontal {

    left: var(--swiper-scrollbar-sides-offset,0%) !important;

}


/*////////*/
/* Footer */
/*////////*/



#footer {
	position:relative;
 	overflow:hidden;
	min-height: 760px;
	background-color: #1E3547;
}

.v1 {
		margin-left: 33%;
}

.v2 {
		margin-left: 66%;
}

.vl {
	position: absolute;
  border-left: 1px solid grey;
	opacity: 0.15;
  height: 100%;
}

#footer p {
	color: #fff;
	font-size: 14px;

	
}

#footer a {
	color: #fff;
    text-decoration: none;
}

#footer li{
	margin:0;
	list-style: none;
	
	padding:0;
}

li p{
	margin:2px;
	padding: 0;
}

#socialiconwrapper {
	padding-left: 40px;

}


#submenu {
	position:absolute;
	
	bottom:0;
	
}

	.subnavi
{
		margin-top: 0px; 
	 
}

.logoclaim{
    
    margin-top: -170px;
    display: grid;
    text-align: center;
    margin: 0;
    justify-items: center;
    

      background-image: url('../assets/images/rounded_div_back.svg');
      background-repeat: no-repeat;
      background-position: top center;
      background-size: 100% 100%;
    height: 160px;
    
}

.mobilelogoclaim {
    display: none;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    margin: 0px 0 20px 0;
    justify-items: center;
    
    
}

#subclaim {
 
    color: rgb(30 ,53, 71, 1 );
    margin-top: -30px;
    font-size: 18px;
    letter-spacing: -0.1px;
    padding: 0 0 0 8px;
}

#mobileclaim {
    
    opacity:0;  
    color: rgb(30 ,53, 71, 1 );
    margin-top: -5px;
    font-size: 11px;
    letter-spacing: 1.1px;
    padding: 0 0 0 8px;
}

.myborder {
    border: 1px solid  rgb(30 ,53, 71, 0.1  );
    border-radius: 8px;

    
}

.gradientbackground{
    background-image: linear-gradient(90deg, #ededed 50%, #1E3547 50%);
}


 #elogo {
    width: 120px;
    height: auto;
    margin-left: -5px;
}

#klogo {
    width: 140px;
    height: auto;

}

#social img {
    width: 30px;
}
 
/* Newsletter */

.newsletter {
   min-height: 740px;
    
}

.sib-form, .sib-form-block, #sib-container {
    padding: 0 !important;

}


.sib-form__declaration {

    padding: 0 !important; 

}

.form__label-row--horizontal {
    flex-direction: column !important;

}

.sib-form .input_replaced:checked+.checkbox_tick_positive {
    background: #1E3547 !important;
    border-color: #1E3547 !important;
}

/* Footer Menu */



/* MEHR ZEILEN */

.halfrow {
	
	width: 44%;
	float: left;
	content: ""; 
	position: relative;

	
}	

.unfloater {
	float:none;
}


/*/////////////*/
/* Datenschutz */
/*/////////////*/


/* Style the buttons that are used to open and close the accordion panel */
.accordion {
  margin: 40px 0 0 0;
  background-color: #1E3547;
  color: #fff;
  cursor: pointer;
  padding: 0px 20px 0px 20px;
  border: 0px solid #fff;
  border-left: 0.5px solid #fff;

  outline: none;
  transition: .4s;
}

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active, .accordion:hover {
  background-color: #101D27;

}

/* Style the accordion panel. Note: hidden by default */
.panel {
  padding: 40px;

  background-color: white;
  display: none;
  overflow: hidden;
}

.panel p {
    color: #000 !important;
}

.panel a {
    color: #000 !important;
}

.animationdiv {
    position: absolute;
    
    z-index: 10000;
   
}
#firstLottie {
 
    
}

/* MOBILE ADJUSTMENTS */




@media screen and (max-width:900px) {
 
.slidetext {
    font-size: 10px;
}
    
.heroclaim {
    font-size: 50px;
}
    
#navmenu {
    width: 100%;
  margin-top: 20px;
}
    

    
  html, body, .container, nav{
    overflow-x: hidden;
  }

  .first h1{
    font-size: 4rem;
    line-height: 4rem;
    letter-spacing: -0.1rem;
    width: 50%;
    margin: 0 0 15px 0px;
  }

  .nav--bar{
    margin-top: 0;
    z-index: 1;
    background: #ffffffad;
    padding: 30px 0;
    backdrop-filter: blur(5px);
  }
  
  .section--one--container {
    width: 50%;
  }

  .section--one--container > p {
   
  }

  .second{
    align-items:center;
  }
  
  .section--third--container {
    width: 220px;
    margin-left: 7%;
  }
    
.drittelspalte {
    width: 100%;

}
    
.viertelspalte {
    width: 100%;
 }

    
.halbspalte {
        width: 100%;
    }
    
    
 .flexcontainer {

    flex-flow: column;

}
   
    .reverse {
        
        flex-direction: column-reverse;
    }    
    
    
    .teaserwidth{
		max-width:90%;
}
    
.claim {

    line-height: 190px;
    font-size: 16rem;



}
    
    #dimensionimage {
    position: relative;
    margin: 0;
    width: 100%;
    margin-bottom: -80px;


}
    
    #dimensionimage2 {
    position: relative;
    margin: 0;
    width: 100%;
    margin-top: 80px;

        
    }
    
    .image_pos {
    text-align: center;
}
    
    .vertical_marg {
    height: 60px;
    }
    
    
    
.swiper-pagination-fraction {
    display: none !important;
    z-index: -1;
   
}
       
.gradientbackground{
    background-image: linear-gradient(180deg, #ededed 50%, #1E3547 50%);
}
    
.halbspaltenpadding {
 padding: 0;
}

    .viertelspalte img {
    width: 40%;

}
    

}


.heyflow {
    z-index: 100;
   
    margin: 0 auto;
    max-width: 1140px;
    width: 80%;
    height: 600px;
    border-width: 3px;
    border-style: solid;
    border-image: 
    linear-gradient(
      to bottom, 
      #1E3547, 
      rgba(0, 0, 0, 0)
    ) 1 100%;
    border-top: 0px;  
    background-color: #fff;
}


.logobar {
    text-align: center;
   
    width: 100%;
    height: 220px;
    background-color: #1E3547;
    opacity: 0.9;
    padding: 8px 0 8px 0 ;
    margin-left: auto;
    margin-right: auto;
    z-index: -1;
    margin-top: -233px;
}

@media screen and (max-width:1060px) {
    
    /* Störer etwas versetze */
    
    .stoerer {

        width: 180px;

    }
    
    #stoererdiv { 
            margin-top: -380px;
    }
    
    
}


@media screen and (max-width:749px) {
    
    /* 570px */
        
    .logoclaim {
        display: none;
        background-color: #fff;
        padding-bottom: 20px;
      
    }
    
    .mobilelogoclaim {
       display: flex;
       flex-direction: column;
    }
    
    .stoerer {
    width: 160px;
}   
    
       #stoererdiv { 
            margin-top: -280px;
    }
    
    .logobar {
        width: 100%;
    }
    
    .heyflow {
        width: 100%;
    }
    
    .umbruch::after {
        content: '\A';
        white-space: pre;    
    }
    
    .heroclaim {
        font-size: 36px;
    }

     .logo{
   /* position: absolute; */
    margin: 30px 0 0 0;
    width: 280px;
    padding: 12px;
}
   
#subclaim {

    margin-top: -6px;
    font-size: 12px;
    letter-spacing: 0.6px;
    padding: 0px;
    
}
    
    
    #navmenu {
        margin-bottom: -2vh;
    
    }
    
 #navmenu p {

    line-height: 2px;
     font-size: 12px;
}

.heroimage {
    height: 70vh;
    min-height: 600px;
    }
    

    
}

/* Der Slider in den Projhekten */

.swiper-button-next.swiper-button-disabled, .swiper-button-prev.swiper-button-disabled

 {
    opacity: .15;
    height: 48px;
    width: 48px;
    cursor: auto;
    background-color: #E7EEF0;
    pointer-events: none;
}


.swiper-button-prev, .swiper-button-next {
	z-index: 1 !important;
    width: 48px !important;
    height: 48px !important;
    right: var(--swiper-navigation-sides-offset, 10px) !important;
	background-color: #E7EEF0;
	/* margin-top: calc(296px -(var(--swiper-navigation-size) / 2)) !important; */
}


.swiper-button-prev, .swiper-rtl .swiper-button-next {
    left: var(--swiper-navigation-sides-offset, 10px) !important;
    right: auto;
}

.swiper-button-next:after, .swiper-button-prev:after {
    font-size: 24px !important;
    text-transform: none !important;
    letter-spacing: 0;
    font-variant: initial;
    line-height: 1;
    color: #000;
    font-weight: 800 !important;
}



.swiper-button-prev, .swiper-rtl .swiper-button-next {

    left: var(--swiper-navigation-sides-offset, -10px) !important;
    right: auto;
}
.swiper-button-next, .swiper-rtl .swiper-button-prev {

    right: var(--swiper-navigation-sides-offset, -10px) !important;
    left: auto;
}