@charset "utf-8";
/* CSS Document */
@font-face {
  src: url(fonts/Raleway-Regular.ttf);
  font-family: "Raleway";
}
@font-face {
  src: url(fonts/JosefinSans-Light.ttf);
  font-family: "Josef";
}
@font-face {
  src: url(fonts/Gudea-Regular.ttf);
  font-family: "Eco";
}
@font-face {
  src: url(fonts/Anton-Regular.ttf);
  font-family: "Anton";
}
@font-face {
  src: url(fonts/fontello.ttf);
  font-family: "fontello";
}
:root {
	--primary: 		#17191a;
	--accent:		#8C5D6E;
  --accenttrans:		#8C5D6E70;
  --accent2:		#5c233a;
  --accent2trans:		#5c233a70;
  --accent3:	#F2D0DD;
  --accent3trans:	#F2D0DD70;
	--white:		#F2F2F2;
  --del:      #AB3544;
  --einf:     #365944;

}

img {
    pointer-events: none;
}
.header-logo{
  pointer-events: all;
}

body{
  background: var(--primary);
    overflow-x: hidden;
}
body, html{
  overflow-x: hidden !important;
position: relative;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
  }
  @media screen and (min-color-index:0) and(-webkit-min-device-pixel-ratio:0)
  { @media {
      .boxnl, .boxnr{
        -webkit-transform: translateX(-50%);
        -moz-transform: translateX(-50%);
        transform: translateX(-50%);
      }}}




.btn{
  background-color: var(--accent2);
  color: var(--white);
  padding: 0.6rem 1.3rem;
  text-decoration: none;
  font-family: "Eco", Calibri;
  border: 0;
  transition: 0.5s;
  cursor: pointer;
}
.btndel{
    background-color: var(--del);
}
.btneinf{
    background-color: var(--einf);
}
.btn:hover{
  background-color: var(--white);
  color: var(--accent);
}
.parallax-container .interval, .interval-backdrop{
z-index: 2;

}

/* interval */

.interval {
  width: 200vw;
  height: 50vh;
  transform: rotateZ(-1deg) translateX(-25%) translateY(-1vw);
  box-shadow: 0 0 40px #000;
  background-color: var(--primary);
  position: relative;
  display: flex;
  z-index: 15;
  justify-content: center;
}

.interval-backdrop{
  width: 200vw;
  height: 50vh;
  transform: rotateZ(1.8deg) translateX(-25%) translateY(1vw);
  box-shadow: 0 0 40px #000;
  background-color: var(--primary);
  position: absolute;
  display: block;
  z-index: 15;
  display: flex;
  justify-content: center;
}

/* Box*/

.interval-showcase-left{
  display: grid;
	grid-template-areas: 'box description-text';
  height: 100%;
  width: 100vw;
transform: translateZ(100px);
-moz-transform: translateZ(100px);
-webkit-transform: translateZ(100px);
  }

.interval-showcase-right{
  display: grid;
	grid-template-areas: 'description-text box';
  height: 100%;
  width: 100vw;
transform: translateZ(100px);
-moz-transform: translateZ(100px);
-webkit-transform: translateZ(100px);
  }

.description-text{
  width: 60vw;
  color: var(--white);
  font-family: "Raleway", Calibri;
  height: 100%;
  position: relative;
}
.description-content{
  position: absolute;
  transform: translateY(-50%);
  left: 5vw;
  top: 50%;
}
.description-text h1{
  font-size: 2rem;
  padding-bottom: 10px;
  color: var(--accent);
}
.description-text p{
  font-size: 1.5rem;
}
.interval-showcase-left .description-text p{
  padding-right: 50px;
}

.box{
  display: grid;
  width: 40vw;
  height: 100%;
  position: relative;
}

.boxnl{
  background-blend-mode: darken;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  background-color: rgba(0, 0, 0, 0.4);
  width: 45%;
  height: 77.5%;
  position: absolute;
  display: flex;
  top: 12.5%;
  align-items: center;
  transition-duration: 0.5s;
  transition-timing-function:cubic-bezier(.57,-0.01,.46,1.01);
  min-width: 225px;
  box-shadow: -10px 10px 20px #1a1a1a;
  right: 22.5%;
  transform: rotateX(20deg) rotateY(10deg) rotateZ(-2.6deg);
  -moz-transform: rotateX(20deg) rotateY(10deg) rotateZ(-2.6deg);
  -webkit-transform: rotateX(20deg) rotateY(10deg) rotateZ(-2.6deg);
  z-index: 10;
  flex: auto;
}
.boxnr{
  background-blend-mode: darken;
  background-size: cover;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  background-color: rgba(0, 0, 0, 0.4);
  width: 45%;
  height: 77.5%;
  position: absolute;
  display: flex;
  top: 12.5%;
  align-items: center;
  transition-duration: 0.5s;
  transition-timing-function:cubic-bezier(.57,-0.01,.46,1.01);
  min-width: 225px;
  box-shadow: 10px 10px 20px #1a1a1a;
  right: 22.5%;
  transform: rotateX(20deg) rotateY(-10deg) rotateZ(4deg);
  -moz-transform: rotateX(20deg) rotateY(-10deg) rotateZ(4deg);
  -webkit-transform: rotateX(20deg) rotateY(-10deg) rotateZ(4deg);
  z-index: 10;
  flex: auto;
}


#box1{
  background-image: url("../pics/Display/VideosPannel.jpg");
}

#box2{
  background-image: url("../pics/Display/MusikPannel.jpg");
}

#box3{
  background-image: url("../pics/Display/TeamPannel.jpg");
}
.boxnl:hover{
  cursor: pointer;
  box-shadow: 0px 0px 50px #1a1a1a;
  transform: scale(1.1) rotateX(0) rotateY(0) rotateZ(1.5deg);
  -webkit-transform: scale(1.1) rotateX(0) rotateY(0) rotateZ(1.5deg);
  -moz-transform: scale(1.1) rotateX(0) rotateY(0) rotateZ(1.5deg);
  top: 10.8%;

}
.boxnr:hover{
 cursor: pointer;
 box-shadow: 0px 0px 50px #1a1a1a;
 transform: scale(1.1) rotateX(0) rotateY(0) rotateZ(1.5deg);
 -webkit-transform: scale(1.1) rotateX(0) rotateY(0) rotateZ(1.5deg);
 -moz-transform: scale(1.1) rotateX(0) rotateY(0) rotateZ(1.5deg);
 top: 10.8%;
}
.bild-titel{
  text-align: center;
  color: var(--white);
  font-family: "Raleway", Calibri;
  font-size: 3.8rem;
  font-style: bold;
  width: 100%;
}

/*slider*/

#dbw{

  font-family: "Raleway", Calibri;
  color: var(--white);
  font-size: 3.5rem;
  text-align: center;


  text-shadow: #000 0 0 15px;
  z-index: 3;
}
#btn-slide{
  top:30vh;
  position: relative;

}
#slider-content{
  position: absolute;
  top: 15vh;
  z-index: 3;
  text-align: center;
  width: 100vw;
}
.teile h2{
  position: relative;
  text-align: center;
  height: auto;
  width: 100%;
  font-family: "Eco", Calibri;
  color: var(--white);
  font-size: 3rem;
  top: 50%;
  transform: translateY(-50%);
      text-shadow: #000 0 0 15px;
}
.but-move{
  position: relative;
  top: 60%;
}
.but-move a{
  position: absolute;
  color: white;
  font-family: "Eco", Calibri;
  left: 49.75vw;
  transform: translateX(-55%) translateY(-100%);

}
.teil1{

  position: relative;
  background-image: url(../pics/Display/BG1.jpg);
  background-color: rgba(0, 0, 0, 0.4);
  background-position: center;
  background-size: cover;
  background-blend-mode: darken;

}
.teil2{

  position: relative;
  background-image: url(../pics/Display/BG2.jpg);
  background-color: rgba(0, 0, 0, 0.4);
  background-position: center;
  background-size: cover;
  background-blend-mode: darken;
}
.teil3{

  position: relative;
  background-image: url(../pics/Display/BG3.jpg);
  background-color: rgba(0, 0, 0, 0.4);
  background-position: center;
  background-size: cover;
  background-blend-mode: darken;
}



#Team {
 display: flex;
 vertical-align: middle;
  user-select: none;
}
#Team-left{
margin-left: 0;
}
#Team-right{
margin-right: 0;
}
.mid-section-team{
  top: 0;
  width: 9vw;
}


#Team-left, #Team-right{
  width: 40%;
  height: 70vh;
 display: inline-block;
 position: relative;
}

#Team-left img, #Team-right img{

 display: inline-block;
 margin-top: 10vh;
 bottom: 0;
}

.mid-section-team{
  width: 100%;
  height: 100%;
  position: relative;
  display: inline-block;
  text-align: center;
  margin-top: 0;
  z-index: 4;
}


#mid-section-team-1{
  margin-top: 20vh;
  height: 70%;
  font-family: "Raleway", Calibri;
  color: var(--white);
  font-size: 1.5rem;
  text-shadow: #000 0 0 10px;

}
#mid-section-team-2{
  margin-top: 50vh;
  height: 30%;
  z-index: 200;
  position: relative;

}


#t1, #t6{
  height: 70%;

  position: absolute;

}
#t2, #t5{
  height: 80%;

  position: absolute;
}
#t3, #t4{
  height: 90%;

  position: absolute;
}

#t1{
  left: 5vw;
}
#t2{
  left: 15vw;
}
#t3{
  left: 25vw;
}
#t4{
  right:  25vw;
}
#t5{
  right: 15vw;
}
#t6{
  right: 5vw;
}





footer section{
height: 30vh;
display: grid;
grid-template-areas: 'social-footer info-footer'
                      'Copy Copy';
padding-top: 5%;
padding-left: 15%;
}
footer section li, footer section a{
text-decoration: none;
color: var(--white);
font-family: Arial;
font-size: 1.2rem;
list-style: none;
margin: 5px 0 2px 0;
transition: 0.25s;

}

footer section a:hover{
  color: var(--accent);
}
footer section h3{
  font-family: "Raleway", Calibri;
  color: var(--accent3);
  font-size: 1.5rem;
  margin-bottom: 10px;
}
#social-ul{
  margin-top: 20px;
}
.social-logo{
  width: 20px;
  transform: translateY(20%);
}
#Copy{
width: 300%;
display: grid;
}
#Copy-in{
  height: 2px;
  width: 71vw;
  left: 9vw;
  position: absolute;
  margin-top: 9px;
  background-color: var(--white);

}
#LC{
  position: absolute;
  right: 9vw;
  font-family: Arial;
  color: var(--white);
}


@media only screen and (orientation: portrait){

  .main-showcase{
    display: grid;
    grid-gap: 10px;
    grid-template-areas: 'main-dummy ';

  }
  #dbw{
    font-size:2.5rem;
  }

  .main-dummy{
    width: 100vw;
  }
  .main-dummy img{
    width: 90vw;
    position: relative;
    bottom: -9vh;
  }
  .main-text{
    height: 0;
    width: 0;
    opacity: 0;
  }
  .box{
    width: 100vw;
  }
  .boxnl, .boxnr{
    width: 50%;
    left:50%;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    transform: translateX(-50%);
  }
  .interval, .interval-backdrop{
    left: -8px;
  }
  #t1, #t2, #t5, #t6{
    width: 0;
    height: 0;
    opacity: 0;
  }
  #t3{
    left: 3vh;
  }
  #t4{
    right: 3vh;
  }
  #Copy-in{
    width: 60vw;
  }
  }
  @media only screen and (max-width: 600px){
    footer section{
    height: 45vh;
    display: grid;
    grid-template-areas: 'social-footer' 'info-footer'
                          'Copy';
  }
  #t3{
    opacity: 0;
  }
  #t4{
    opacity: 0;
  }

}

  @media only screen and (max-width: 800px){
body{
  background-color: black;
background-image: url(../pics/Main-Pics/Main-Pic-Blurred.jpg);
background-size: cover;
background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;:
}
footer{
  background: rgb(38,38,38);
  background: linear-gradient(0deg, rgba(38,38,38,.5) 0%, rgba(38,38,38,0) 110%);

}
footer section{
height: 45vh;
}
  .interval-showcase-left,.interval-showcase-right{
    grid-template-areas: 'box description-text';

  }
  .boxnl:hover,.boxnr:hover{
    cursor: pointer;
    box-shadow: 0px 0px 50px #1a1a1a;
    transform: scale(1) rotateX(0) rotateY(0) rotateZ(0);
    -moz-transform: scale(1) rotateX(0) rotateY(0) rotateZ(0);
    -webkit-transform: scale(1) rotateX(0) rotateY(0) rotateZ(0);
    top: 10.8%;
  }

  .box{
    width: 100vw;
  }

.teile h2{
  font-size: 2rem;
}
  .description-text{
    height: 0;
    width: 0;
    opacity: 0;
  }
  .main-text{
    opacity: 0;
  }
  .main-dummy {
opacity: 0
  }
  .mobilebg{
    background-image:  url(..//pics/Logos/logo_white_small.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    height: 100vh !important;
    width: 80vw !important;
    position: absolute;
    left: 50vw;
    transform: translateX(-50%);


  }
  .hide{
    opacity: 0;
  }
  .main-dummy img{
    opacity: 0;
  }


  #Copy-in{
    width: 50vw;
  }
  }