@font-face {
  font-family: 'regular';
  src:url(Monotype_Modern_Extended.woff2);
}

@font-face {
  font-family: 'regular';
  src:url(Monotype_Modern_Extended.woff);
}

@font-face {
  font-family: 'italic';
  src:url(Monotype_Modern_Italic.woff2);
}

@font-face {
  font-family: 'italic';
  src:url(Monotype_Modern_Italic.woff);
}

@font-face {
  font-family: 'grotesk';
  src:url(Grotesque.woff2f);
}


  ::-moz-selection {color: white; background: black; /* Firefox */}
  ::selection {color: white; background: black; /* Safari */}
  a{text-decoration: none;}
  a:link {color:#000000;}       /*unvisited link */
  a:visited {color:#000000;}  /* visited link */
  a.parent{color: #000000;}
  a:hover{font-family: 'italic', Arial, Helvetica;
}

body{
/*  font-size: calc(5em + (19 - 5.3) * ((100vw - 375px) / (1024 - 375)));
*//*  transition:font-size 0.3s ease-out;
*/ /*5.3em  font-size: 22.5vw;*/
  font-kerning: auto;
  font-family: 'regular', Arial, Helvetica;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin: 0;
}

:root{
  scroll-behavior: smooth;
}

/* Mobile small */
@media only screen and (min-width: 320px){

body{
  transition:font-size 0.3s ease-out;
  font-family: 'regular', Arial, Helvetica;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin: 0;
}
}

p.h1{
  letter-spacing: 0.9px;
  line-height: 1em;
  margin: 0;
}

p.h3{
  text-align: left;
  font-size: 39px;
  letter-spacing:0.01em;
  line-height: 42px;
  margin: 0;
}


p.h4{
  font-family:'grotesk', Arial, Helvetica;
  text-align: left;
  font-size: 45px;
  letter-spacing:0px;
  line-height: 42px;
  margin: 0;
}


p.copy{
  -ms-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto;
  hyphenate-limit-chars: 6 3 3;
  font-family: 'regular', Arial, Helvetica;
  text-align: left;
  color: #000000;
  font-size: 17px;
  letter-spacing:-0.01em;
  line-height: 21px;
  margin: 0;
}

p.copy-none{
  -ms-hyphens: none;
  -webkit-hyphens: none;
  hyphens: none;
  font-family: 'regular', Arial, Helvetica;
  text-align: left;
  color: #000000;
  font-size: 17px;
  letter-spacing:-0.01em;
  line-height: 21px;
  margin: 0;
}

p.imprint-hl{
  -ms-hyphens: none;
  -webkit-hyphens: none;
  hyphens: none;
  font-family: 'regular', Arial, Helvetica;
  color: #000000;
  font-size: 17px;
  letter-spacing:-0.01em;
  line-height: 21px;
  margin-bottom: 15px;
  margin-top: 15px;
}

p.copy-c{
  font-family: 'regular', Arial, Helvetica;
  text-align: center;
  color: #000000;
  font-size: 17px;
  letter-spacing:-0.01em;
  line-height: 21px;
  margin-bottom: 20px;
  margin-top: 0px;
}

p.small{
  font-family: 'regular', Arial, Helvetica;
  color: #000000;
  font-size: 13px;
  letter-spacing:0.02em;
  line-height: 1.25em;
  margin: 0;
}

p.imprint-copy{
    -ms-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto;
  hyphenate-limit-chars: 6 3 3;
  font-family: 'regular', Arial, Helvetica;
  text-align: left;
  color: #000000;
  font-size: 12px;
  letter-spacing:-0.01em;
  line-height: 17px;
  margin: 0;
}

p.indent{
  -ms-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto;
  hyphenate-limit-chars: 6 3 3;
  font-family: 'regular', Arial, Helvetica;
  text-indent: 2em;
  font-size: 17px;
  letter-spacing:-0.01em;
  line-height: 1.25em;
  margin: 0;
}

p.number{
  font-size: 17px;
  letter-spacing:-0.01em;
  line-height: 1.25em;
  margin: 0;
}

p.number-past{
  opacity: 0.3;
  font-size: 17px;
  letter-spacing:-0.01em;
  line-height: 1.25em;
  margin: 0;
}

p.location{
  font-family: 'regular', Arial, Helvetica;
  font-size: 17px;
  text-align: center;
  letter-spacing: -0.01em;
  line-height: 1.2em;
  margin-top: -20px;
  margin-bottom: 40px;
}

p.button{
  font-family: 'regular', Arial, Helvetica;
  text-align: center;
  color: #000000;
  font-size: 15px;
  letter-spacing:+0.01em;
  line-height: 24px;
  margin-bottom: 0px;
  margin-top: 0px;
}

p.tiny{
  font-family: 'regular', Arial, Helvetica;
  text-align: center;
  color: #000000;
  font-size: 11px;
  letter-spacing: +0.01em;
  line-height: 13px;
  margin-bottom: 5px;
  margin-top: 5px;
}

p.tiny-left{
  font-family: 'regular', Arial, Helvetica;
  text-align: left;
  color: #000000;
  font-size: 11px;
  letter-spacing: +0.01em;
  line-height: 15px;
}

.mini{
z-index: 999;
position: fixed;
bottom: 20px;
left: 20px;
}

.mini a{
  color: white;
}

p.youtube-link{
  font-family: 'regular', Arial, Helvetica;
  text-align: left;
  color: white;
  font-size: 11px;
  letter-spacing: +0.01em;
  line-height: 15px;
}

hr{
  height: 1px;
  background-color: black;
  border-style: none;
  margin-top: 20px;
  margin-bottom: 20px;
}

.italic{
  font-family: 'italic', Arial, Helvetica;
  letter-spacing: 0.005em;
  line-height: 1.25em;
}

.opener {
  margin-top: 48vh;
  text-align: center;
  }

.opener p{
  color: white;
}

.wrapper{
  z-index: 100;
  width: 100vw;
  height: auto;
  display: block;
  overflow: hidden;
}

#ticker{
  width: 100vw;
  position: fixed;
  bottom: 0;
  padding: 5px;
  text-align: center;
  background: #f6f22b;
  height: auto;
}

#hide{
cursor: pointer;
}

.navi-wrapper{
  z-index: 100;
  top: 0;
  height: auto;
  position: fixed;
  width: 100vw;
  display: none;
  overflow: hidden;
}

.navigation {
  padding-right: 5px;
  padding-left: 5px;
  height: 30px;
  column-count: 4;
  background-color: white;
  text-align: center;
}

.navigation p{
  padding-top: 4px;
  text-align: center;
  font-family: 'regular', Arial, Helvetica;
  color: #000000;
  font-size: 15px;
  letter-spacing:0.02em;
  margin-bottom: 0;
  margin-top: 0;
}

#nav-bio{
  top: -180px;
  position: relative;
}

#nav-projects{
  top: -30px;
  position: relative;
}

#nav-presse{
  top: -30px;
  position: relative;
}

#nav-trippie{
  top: -30px;
  position: relative;
}

#nav-contact{
  top: -30px;
  position: relative;
}

.introduction {
  margin-top: 70vh;
  padding: 2vw;
}

.introduction p{
  -ms-hyphens: none;
  -webkit-hyphens: none;
  hyphens: none;
}

.showcase{
  width: 100vw;
  z-index: -999;
  position: fixed;
  bottom: 0vw;
  opacity: 1;
  overflow: hidden;
}

.showcase img{
  margin: auto;
  display: block;
  max-width: 94vw;
  max-height: 65vh;
}

.showcase video{
  margin: auto;
  display: block;
  min-width: 100vw;
  height: 100vh;
  width: 100vw;
  object-fit: cover;
}


.news{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 50vh;
  text-align: center;
  padding-left: 6vw;
  padding-right: 6vw;
}


.bio{
  padding: 2vw;
  column-count: 1;
  column-gap: 10px;
  text-align: left;
  padding-bottom: 40px;
}

.theater{
  min-height: 40vh;
  background-color: #f7fcd9;
  height: auto;
  padding: 2vw;
}

.film{
  min-height: 40vh;
  background-color:  #f7fcd9;
  height: auto;
  padding: 2vw;
}

.hwg{
  min-height: 40vh;
  background-color: #fcdbd9;/* #d1681e*/;
  height: auto;
  padding: 2vw;
}

.terra{
  min-height: 40vh;
  background-color: #d9effc; /*#5a77f5;*/
  height: auto;
  padding: 2vw;
}

.wetter{
  min-height: 40vh;
  background-color: #615d87; /*#5a77f5;*/
  height: auto;
  padding: 2vw;
}

.col{
  overflow: hidden;
}

.col-25{
  overflow: hidden;
}

.col-25-text{
  padding: 2vw;
  min-height: 40vh;
}


.col-25 img{
  display: block;
  width: 100%;
  height: auto;
}

.col-25 video{
  display: block;
  width: 100%;
  height: auto;
}

.col-50{
  overflow: hidden;
}

.col-50 img{
  display: block;
  width: 100%;
  height: auto;
}

.col img{
  display: block;
  max-width: 100vw;
  height: auto;
}

.col-50 video{
  display: block;
  max-width: 100vw;
  height: auto;
}

.moderation{
  min-height: 40vh;
  overflow: hidden;
  padding: 2vw;
  background: #d8daeb;/* #f1c8da;*/
}

.presse{
  min-height: 40vh;
  padding: 2vw;
  background-color:#d8daeb; /*#e61e46;*/
  min-height: 40vh;
}

.presse p{
    hyphens: none !important;
}

.gigs{
  min-height: 40vh;
  hyphens: none;
  background-color: #d6d6d6;
  padding: 2vw;
}

.trippie{
  min-height: 40vh;
  background-color: #d6d6d6;
  padding: 2vw;
}

.gigs-trippie{
  height: auto; 
  min-height: 40vh; 
  hyphens: none;
  background-color:  #d6d6d6;/* #6428BE;*/
  padding: 2vw;
}

.mixes{
  background-color: #767676;
  padding: 2vw;
}

#player, 
#player2,
#player3 {
  margin-top: 10px;
  margin-bottom: 10px;
  margin-right: auto;
  margin-left: auto;
  display: block;
  height: 40px;
  border: 0;
  background-color: white;
  font-family: 'regular', Arial, Helvetica;
  font-color: #BEBEBE;
  font-size: 17px;
  letter-spacing: 0.05em;
}

.insta{
  width: 100vw;  
  height: calc(100vh / 3);
  background-color: #white;
  display: flex;
  justify-content: center;
  align-items: center;
  border-style: solid;
  border-width: 0px 0px 0.5px 0px;

}


.spot {
  width: 100vw;  
  height: calc(100vh / 3);
  background-color: #white;
  display: flex;
  justify-content: center;
  align-items: center;
  border-style: solid;
  border-width: 0px 0px 0.5px 0px;

}

.youtube {
  width: 100vw;  
  height: calc(100vh / 3);
  background-color: #white;
  display: flex;
  justify-content: center;
  align-items: center;
  border-style: solid;
  border-width: 0px 0px 0.5px 0px;
}

.mail{
  width: 100vw;  
  background-color:  #white;
  height: calc(100vh / 3);
  display: flex;
  justify-content: center;
  align-items: center;
  border-style: solid;
  border-width: 0px 0px 0.5px 0px;

}

.imprint{
  width: 100vw;  
  background-color: #white;
  height: calc(100vh / 3);
  display: flex;
  justify-content: center;
  align-items: center;
}

.imp{
  float: left;
  width: 100vw; 
  background-color: white;
  height: 30vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.imp-content{
  padding-top: 3vh;
  padding-left: 3vw;
  padding-right: 3vw;
  padding-bottom: 3vh;
  float: left;
  width: 94vw;  
  background-color: #bebebe;
  height: auto;
}

.column {
  float: left;
  width: 100%;
  padding-right: 0%;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

.end{
  width: 100vw;
  height: 98vh;
  overflow: hidden;
}

.end video{
  width: 100vw;
  display: block;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}

.slick-slider{
    width: 100vw;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -khtml-user-select: none;
    -ms-touch-action: pan-y;
    touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
    -webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
    -moz-animation: fadein 2s; /* Firefox < 16 */
    -ms-animation: fadein 2s; /* Internet Explorer */
    -o-animation: fadein 2s; /* Opera < 12.1 */
    animation: fadein 2s;
}

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Firefox < 16 */
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.slick-slide img{ 
    object-position: left;
    max-height: 400px;
}

.slick-slide video {
  object-position: right;
  max-height: 400px;
  object-fit: contain;
}

/* desktop */
@media only screen and (min-width: 1024px){


.navigation {
  text-align: left;
  column-count: 4;
  background-color: white;
}

#ticker{
  position: relative;
}

#ticker p{
  padding-top: 3px;
}

.wrapper{
  width: 100vw;
  height: auto;
  display: flex;
  overflow: hidden;
}

.navigation a:hover{
  font-family: 'italic', Arial, Helvetica;
}

.bio{
  flex: 2;
  float: left; 
  column-count: 2;
  column-gap: 1.5vw;
  padding-left: 1.5vw;
  padding-right: 1.5vw;
}

.showcase{
  width: 100vw;
  left: 0;
  right: 0;
  z-index: -999;
  position: fixed;
  bottom: 0;
  opacity: 1;
  overflow: hidden;
}

.showcase img{
  margin: auto;
  display: block;
  max-width: 94vw;
  max-height: 75vh;
}

.showcase video{
  height: 100vh;
  display: block;
}

.hwg,
.moderation,
.presse,
.mixes,
.resi,
.terra,
.theater,
.film,
.wetter,
.carhartt {
  flex: 1;
  height: auto;
}


.col-25{
width: 25%;
border-right: 1px solid;
border-color: black;
}

.col-25-text{
  padding: 2vw;
  min-height: auto;
}


.col-50{
width: 50%;
}

.col-50 img{
  width: 100%;
  height: 100%;
/*  object-fit: cover;
*/}

.col{
width: 33.333333%;
}

.col img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gigs{
flex:1;
hyphens: none;
}

.trippie{
  float: left;
  flex: 1;
}

.gigs-trippie{
  flex: 1;
  hyphens: none;
}

.insta {
  float: left;
  width: calc(100vw / 5); 
  border-style: solid;
  border-width: 0px 0.5px 0px 0px;

}

.mail{
  float: left;
  width: calc(100vw / 5); 
  border-style: solid;
  border-width: 0px 0.5px 0px 0px;
 
}

.spot {
  float: left;
  width: calc(100vw / 5); 
  border-style: solid;
  border-width: 0px 0.5px 0px 0px;
 
}

.youtube {
  float: left;
  width: calc(100vw / 5); 
  border-style: solid;
  border-width: 0px 0.5px 0px 0px;
 
}

.imprint{
  float: left;
  width: calc(100vw / 5);  
  border-style: solid;
  border-width: 0px 0.5px 0px 0px;

}

.insta:hover{
  background-color: #aed485;
  transition: 0.3s;
}
.spot:hover{
  background-color: #2864c8;
  transition: 0.3s;
}
.youtube:hover{
  background-color: #9267e3;
  transition: 0.3s;
}

.mail:hover{
  background-color: #e61e46;
  transition: 0.3s;
}
.imprint:hover{
  background-color: #6DAFAF;
  transition: 0.3s;
}


.end{  
  height: auto;
  width: 100vw;
  overflow: hidden;
  object align: top; 
}

.end video{
  height: 90vh;
  width: 100%;
  height: auto;
  display: block;
}

.column {
  float: left;
  width: 24%;
  padding-right: 1%;
  height: calc(100vh - 5)
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

.row hr{
  margin-top: 0px;
  background-color: #000000;
}

.imp{
  float: left;
  width: 100vw;  
  height: 30vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.imp-content{
  padding-top: 3vh;
  padding-left: 3vw;
  padding-right: 3vw;
  padding-bottom: 3vh;
  float: left;
  width: 94vw;  
  background-color: #bebebe;
  min-height: 64vh;
}
}