/***********************************************/
/* PARALLAX SETUP noTouch */
/***********************************************/

/* IMPORTANT FOR CHROME + FF; set only for .noTouch css! */
/*html, */ body.noTouch {
  overflow: hidden;
  /*  scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;*/
}

.background {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  overflow: hidden;
  will-change: transform;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  height: 130vh;
  position: fixed;
  width: 100%;
background-color: var(--color-bg);
  transform: translateY(30vh);
  transition: all 1.2s cubic-bezier(0.22, 0.44, 0, 1);
    
   /* margin-bottom: 8vh;*/padding-bottom: 8vh;
}

/*.background {        
    box-sizing: border-box;
    box-shadow: 0 1px 1px rgba(0, 0, 0, .3), 0 -1px 1px rgba(0, 0, 0, .3);
    border: none;
    
    box-shadow: 3px 3px 6px -3px rgba(0, 0, 0, .3),
                3px -3px 6px -3px rgba(0, 0, 0, .3);
        }*/

.background:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  /*background-color: rgba(0, 0, 0, 0.3);*/
}
/*.background:first-child*/
.background.intro {
  background-image: url(../images/divers/drops.jpg);
    background-color: var(--color-bg);
  transform: translateY(-15vh);
    z-index: 8;
}
/*.background:first-child .content-wrapper*/
.background.intro .content-wrapper {
  transform: translateY(15vh);
}
/*.background:nth-child(2)*/
#section1 {
  background-image: url(../images/samples/coatings.jpg); 
    z-index: 7;
}
/*.background:nth-child(3)*/
#section2 {
  background-image: url(../images/strikeFace.jpg);
    background-image: url(../images/structureLacquer/speakerDetail.jpg); 
    z-index: 6;
}

/*.background:nth-child(4)*/
#section3 {
  background-image: url(../images/production/druckbehaelter.jpg);
    z-index: 5;
}

/*'.background:nth-child(5)*/
#section4 {
  background-image: url(../images/production/speakerEnclosures.jpg);
    z-index: 4;
}

/*'.background:nth-child(6)*/
#section5 {
  background-image: url(../images/speakerEnclosures/speakerEnclosureSmooth.jpg);
    z-index: 3;
} 

/*'.background:nth-child(7)*/
#section6 {
  background-image: url(../images/production/lackierpistole.jpg);
    z-index: 2;
} 

.last, #sectionLast {
    background-color: var(--color-red);
    background-color: var(--color-grey); 
    background-image: url(../images/bg-title.jpg);
   /* background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;*/
    z-index: 1;
}

/*.last .content-wrapper {
            background-color: rgba(255, 255, 255, 0.2);
          
        }*/

#footer.background:before {
    background-color: transparent;
    z-index: 1;
}

/*.background:before:nth-child(6) */
/*.background.last:before {
  background-color: rgba(0, 0, 0, 0.0);
    background: transparent;
}*/

#footer {
   /*position: absolute;
    top:1;*/
    height: auto!important;
    overflow: visible;
    height: 200%!important;
}

 /*.content-wrapper {
	background-color: rgba(0, 0, 0, 0.2);
    padding: 0.5rem; padding: 1rem;
}*/
      /*#splash {
          width: 90vw;
      }*/

/* @media only screen and (max-width: 414px)*/
  @media only screen and (max-width: 678px) {
      
      .content-wrapper {
	background-color: rgba(0, 0, 0, 0.2);
    padding: 0.5rem; padding: 1rem;
}
      body.touch .content-wrapper h1 {
  text-transform: none;
    max-width: 560px; max-width: 540px;

}
      
       .darker {
            background-color: rgba(0, 0, 0, 0.4);
        }
      #splash {
          width: 90vw;
      }
      /*
      .transparent {
	background-color: rgba(0, 0, 0, 0.2)!important;
    padding: 0.5rem; padding: 1rem;
}
      */
       .transparency {
            /* background-color: rgba(0, 0, 0, 0.2);
    padding: 0.5rem; padding: 1rem;*/
           background-color: transparent;
           padding: 0;
        }
   
  }


/* Set stacking context of slides */
/*.background:nth-child(1) {
  z-index: 6;
}

.background:nth-child(2) {
  z-index: 5;
}

.background:nth-child(3) {
  z-index: 4;
}

.background:nth-child(4) {
  z-index: 3;
}

.background:nth-child(5) {
  z-index: 2;
}

.background:nth-child(6) {
  z-index: 1;
    background: transparent!important;
}*/
 


.content-wrapper {
  height: 100vh;
   /* width: 80vw;*/
  display: flex;
  justify-content: center; /*justify-content: flex-end;*/
  text-align: center; text-align: left;
  flex-flow: column nowrap;
  color: #fff;
  text-transform: uppercase;
  transform: translateY(40vh);
  will-change: transform;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  transition: all 1.7s cubic-bezier(0.22, 0.44, 0, 1);
    
    margin-left: 3vw; margin-right: 3vw;
     /*transform: translateY(-40vh);*/
            transform: translateY(-30vh);
/*background-color: cadetblue;*/
}

 .content-wrapper2 {
            display: flex;
flex-flow: row;
           /* align-items: flex-start;
    align-content: flex-end;*/
            justify-content: flex-start;
  height: auto;
     max-height: 40vh;
}

@media only screen and (max-width: 414px) {
      
      .content-wrapper2 {
            /* background-color: lightblue;*/
     height: auto;
     max-height: 30vh;
        }
}

.card-wrapper {
    align-self: flex-start;
    height: 380px;
    width: 380px;
   /* background-color: beige;*/
}
  
.content-h4 {
    /*text-transform: uppercase;
    position: absolute;
    bottom: 3vh;*/
    /*margin-left: 6vw;*/
    /*max-width: 760px;*/
    /*align-self: flex-end;*/
  /*  align-items: flex-end;
    align-content: flex-end;
    padding-right: 3vw;*/
}

h4.content-h4 {
    align-self: flex-end;
    padding-right: 3vw;
    /*background-color: pink;*/
}

.content-subtitle {
    max-width: 760px;
    align-self: flex-end;
    padding-right: 3vw;
}

.background:last-child p {
  text-transform: none;
    max-width: 560px;
    padding-right: 3vw;
    justify-content: flex-end;
}


.background.up-scroll {
  transform: translate3d(0, -15vh, 0);
}
.background.up-scroll .content-wrapper {
  transform: translateY(15vh);
}
.background.up-scroll + .background {
  transform: translate3d(0, 30vh, 0);
}
.background.up-scroll + .background .content-wrapper {
  transform: translateY(30vh);
}

.background.down-scroll {
  transform: translate3d(0, -130vh, 0);
}
.background.down-scroll .content-wrapper {
  transform: translateY(40vh);
}
.background.down-scroll + .background:not(.down-scroll) {
  transform: translate3d(0, -15vh, 0);
}
.background.down-scroll + .background:not(.down-scroll) .content-wrapper {
  transform: translateY(15vh);
}