/* Custom Stylesheet */
/**
 * Use this file to override Materialize files so you can update
 * the core Materialize files in the future
 *
 * Made By MaterializeCSS.com
 */

body{

/*background-color: #3c3f4d;*/

}

a{
  color: #64ffda ;
}

.icon-block {
  padding: 0 15px;
}
.icon-block .material-icons {
	font-size: inherit;
}

.resp-container{

	position: relative; 
  padding-bottom: 56.25%; /* ratio 16x9 */
  height: 0; 
  overflow: hidden; 
  width: 100%;
  height: auto;
}

.resp-iframe{

	position: absolute; 
  top: 0; 
  left: 0; 
  width: 100%; 
  height: 100%; 
}

.vid_bg{
  position: absolute;
  z-index: -2;
}

.app-container {
  position: relative;
  padding-bottom: 26.04%;
  /*padding-bottom: 56.25%;*/
  /*padding-top: 35px;*/
  height: 0;
  overflow: hidden;
}

.app-container iframe {
  position: absolute;
  top:0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  

}



.overlay2:before{
  background-image: url('../img/white-dots3.png');
  opacity: 0.4;
  background-repeat: repeat;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  content: '';
}

.button_container{
  position: absolute;
  left: 50%;
  top: 75%
}

.button_container_free{
  position: relative;
  left: 50%;
  
}

.button_c_self{
  position: relative;
  left: -50%;
  top: -75%;
  width: 250px
}

.vertical-center {
  margin: 0;
  position: relative;
  top: 50%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}


@media only screen and (min-width: 1018px) {
  .container-X{

  display: flex;

  align-items: stretch;
  position: relative;

  -webkit-box-shadow: inset 0px 0px 2.5px 0.5px rgba(0,0,0,0.75);
  -moz-box-shadow: inset 0px 0px 2.5px 0.5px rgba(0,0,0,0.75);
  box-shadow: inset 0px 0px 2.5px 0.5px rgba(0,0,0,0.75);

  }

  .mob-img{

    display: none;

  }

  .childo{
    display: flex;
    position: relative;
    
    width: 40%;
    
    background-size: cover;

  -webkit-box-shadow: 0.5px 0px 2.5px 0px rgba(0,0,0,0.6);
  -moz-box-shadow: 0.5px 0px 2.5px 0px rgba(0,0,0,0.6);
  box-shadow: 0.5px 0px 2.5px 0px rgba(0,0,0,0.6);
  }



  .childo:before{
    
    position: relative;
    width: 100%;
    background-image: url('../img/white-dots3.png') ;
      opacity: 0.5;
      background-repeat: repeat; 
      content: '';
    
  }

  .sb1{
    background: url("../img/segment-bg.jpg") center;
  }

  .sb2{
    background: url("../img/segment-bg2.jpg") center;
  }

  .sb3{
    background: url("../img/segment-bg3.jpg") center;
  }

  .sb4{
    background: url("../img/segment-bg42.jpg") center;
  }

  .sb5{
    background: url("../img/segment-bg5.jpg") center;
  }

  .sb6{
    background: url("../img/segment-bg6.jpg") center;
  }

  .sb7{
    background: url("../img/segment-bg7.jpg") center;
  }


    .sb8{
    background: url("../img/segment-bg8.jpg") center;
  }




  .childo2{
    
    flex-wrap: wrap;  
    width: 60%;
    position: relative;
    padding-left: 7.25%;
    padding-right: 7.25%;

  }

  .title{

  position: absolute;
  right: 0;
  margin-top: 5%;
  margin-right: 10%;



  }

  .title-content{

  font-size: 3.5vw;
  color: #FFF;
  background-color: rgba(31, 36, 38, 0.96);
  padding-left: 4%;
  padding-right: 5%;
  padding-top:2.5%;
  font-family: 'Comfortaa', bold;
  text-align: right;


  }


  .video-container2 {
    position: relative;
    padding-bottom: 56.25%;
    /*padding-top: 35px;*/
    height: 0;
    overflow: hidden;
    width: 100%;
  }

  .video-container2 iframe {
    position: absolute;
    top:0;
    left: 0;
    width: 100%;
    height: 100%;
  }



  .video-container {
      position: relative;
      padding-bottom: 56.25%;
      
      height: 0;
      overflow: hidden;
  }

  .video-container iframe,
  .video-container object,
  .video-container embed {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
  }

  .contentu{
    float: left;
    color: #FFF;
    width: 35%;


  }

  .contentu2{
    
    color: #FFF;
    width: 60%;


  }


  .fontSize{
    font-size: 1em;"
  }

  .infoblock{
    display: flex;
    align-items: stretch;
    position: relative;
  }

  .c-title{

    font-size: 1.3em;
    color: #FFF;

    

  }

  .c-text{
    
    font-size: 1em;
    color: #FFF; 
    padding-bottom: 5%;
    padding-right: 5%;

  }

  .f-text{
   
    font-size: 1em;
    color: #FFF; 
    width: 100%;
    


  }
}

.itch{

  float: right;
  padding-bottom: 4%;

}

.footer-c{

  text-align: right;
  padding-right: 7.25%;
  padding-bottom: 1%;

}




.intro-text{

  position: relative;
  font-family: 'Comfortaa', bold;
  font-size: 1.5em;
  color: #FFF;
  
}



@media only screen and (max-width: 1017px) {
  .container-X{

  
  position: relative;

  -webkit-box-shadow: inset 0px 0px 2.5px 0.5px rgba(0,0,0,0.75);
  -moz-box-shadow: inset 0px 0px 2.5px 0.5px rgba(0,0,0,0.75);
  box-shadow: inset 0px 0px 2.5px 0.5px rgba(0,0,0,0.75);

  }

  

   .childo{
    display: flex;
    position: relative;
    
    
    
    background-size: contain;

  -webkit-box-shadow: 0.5px 0px 2.5px 0px rgba(0,0,0,0.6);
  -moz-box-shadow: 0.5px 0px 2.5px 0px rgba(0,0,0,0.6);
  box-shadow: 0.5px 0px 2.5px 0px rgba(0,0,0,0.6);
  }



  .childo:before{
    
    position: relative;
    width: 100%;
    background-image: url('../img/white-dots3.png') ;
      opacity: 0.5;
      background-repeat: repeat; 
      content: '';
    
  }

  .sb1{
    background: url("../img/segment-bg.jpg") center;
  }

  .sb2{
    background: url("../img/segment-bg2.jpg") center;
  }

  .sb3{
    background: url("../img/segment-bg3.jpg") center;
  }

  .sb4{
    background: url("../img/segment-bg42.jpg") center;
  }

  .sb5{
    background: url("../img/segment-bg5.jpg") center;
  }

  .sb6{
    background: url("../img/segment-bg6.jpg") center;
  }

  .sb7{
    background: url("../img/segment-bg7.jpg") center;
  }

   .sb8{
    background: url("../img/segment-bg8.jpg") center;
  }



  .childo2{
    
    
    width: 100%;
    position: relative;
    padding-left: 7.25%;
    padding-right: 7.25%;

  }

  .title{

  position: absolute;
  left: : 0;
  margin-top: 5%;
  margin-left: 5%;
  height: 200px;



  }

  .title-content{

  font-size: 3em;
  color: #FFF;
  background-color: rgba(31, 36, 38, 0.96);
  padding-left: 4%;
  padding-right: 5%;
  padding-top:2.5%;
  font-family: 'Comfortaa', bold;
  text-align: right;


  }


  .video-container2 {
    position: relative;
    padding-bottom: 56.25%;
    /*padding-top: 35px;*/
    height: 0;
    overflow: hidden;
    width: 100%;
  }

  .video-container2 iframe {
    position: absolute;
    top:0;
    left: 0;
    width: 100%;
    height: 100%;
  }



  .video-container {
      position: relative;
      padding-bottom: 56.25%;
      
      height: 0;
      overflow: hidden;
  }

  .video-container iframe,
  .video-container object,
  .video-container embed {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
  }

  .contentu{
    
    color: #FFF;
    width: 35%;


  }

  .contentu2{
    position: relative;
    display: flex;
    color: #FFF;
    width: 100%;


  }

.content-spacer{
position: relative;
width: 100%;
padding-right: 5%;
text-align: center;
padding-bottom: 5%;

}


.content-spacer-klein{
position: relative;

padding-right: 5%;
text-align: center;
padding-bottom: 5%;

}

.content-spacer-ciao{
display: none;

}



  .fontSize{
    font-size: 1em;"
  }

  .infoblock{
    
    position: relative;
  }

  .c-title{

    font-size: 1.3em;
    color: #FFF;

    

  }

  .c-text{
    
    font-size: 1em;
    color: #FFF; 
    padding-bottom: 5%;

  }

  .f-text{
   
    font-size: 1em;
    color: #FFF; 
    width: 100%;
    


  }

  .mob-img{
    position: relative;
    height: 150px;    

  }

  .mob-img-peter{
    position: relative;
    height: 220px;    

  }


}




#loading{

  z-index: 10;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

}

/* 2026-10-16: placeholder image fills the header box on wide/4K screens instead of stopping at its 1920px native width */
#loading img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.loading-container{

  position: absolute;
  
  top: 50%;
  left: 50%;

  margin-top: -40px;
  margin-left: -40px;

}

.lds-ring {
  display: inline-block;
  position: relative;
  width: 80px;
  height: 80px;

}
.lds-ring div {
  box-sizing: border-box;
  display: block;
  position: absolute;
  width: 64px;
  height: 64px;
  margin: 8px;
  border: 8px solid #fff;
  border-radius: 50%;
  animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  border-color: #fff transparent transparent transparent;

}
.lds-ring div:nth-child(1) {
  animation-delay: -0.45s;
}
.lds-ring div:nth-child(2) {
  animation-delay: -0.3s;
}
.lds-ring div:nth-child(3) {
  animation-delay: -0.15s;
}
@keyframes lds-ring {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}







@media only screen and (max-width: 1600px) and (min-width: 1279px){

  .logo-txt{

  display: none

  }

}

@media only screen and (min-width: 1280px) /*and (min-width: 1279px)*/{

  .logo-img{


  position: relative; 
  padding-top: 6.5px;

}

.logo-txt{

  position: absolute; 
  padding-left: 15px;
  padding-top: 2px;

}

}



@media only screen and (max-width: 1279px) and (min-width: 614px){

  .logo-img{


  position: relative; 
  padding-top: 6.5px;
  margin-left: -85px;

}

.logo-txt{

  position: absolute; 
  padding-left: 15px;
  padding-top: 4px;

}


}



@media only screen and (max-width: 613px) /*and (min-width: 1279px)*/{

  .logo-img{

    position: absolute;
  padding-top: 3px;
  padding-bottom: 3px;
  margin-left: -85px;

  }


  .logo-txt{

  position: absolute; 
  margin-left: -20px;
  padding-top: 4px;

  }


}

.lang-c{
  z-index: 100;
  position: fixed;
  right: 0;
  bottom: 0;
  margin-bottom: 15px;
  margin-right: 15px;
  
}

.toppo{
  z-index: 100;
  position: fixed;
  right: 0;
  bottom: 0;
  margin-bottom: 60px;
  margin-right: 15px;
  display: none;
  
}

.btn-text{
  position: relative;
  font-size: 1.3em;
  color: black;
  margin-left: 
  margin: 0 auto;
  font-family: 'Comfortaa', bold;
  text-align: center;

}

.en{

display: none;

}

#switch{

  display: none;

}