*{
	cursor:crosshair;
}



body{
  cursor:crosshair;
  margin: 0 auto;
  background-color: #e8e8e8;
  font-size: 100%;
  line-height: 100%;

 }






/*scrollbar*/


::-webkit-scrollbar
{
  width: 0px;  /* for vertical scrollbars */
  height: 0px; /* for horizontal scrollbars */
}

::-webkit-scrollbar-track
{
  background: #39373a;
}

::-webkit-scrollbar-thumb
{
  background: #767077;
}



@font-face {
    font-family: Nimbus;
    src: url(../data/Nimbus.woff);
}


@font-face {
    font-family: TTNorms;
    src: url(../data/TTNorms.woff);
}

@font-face {
    font-family: TTNormsLight;
    src: url(../data/TTNorms-Light.woff);
}

@font-face {
    font-family: TTNormsBold;
    src: url(../data/TTNorms-Bold.woff);
}


h1{	
  font-family: TTnorms;
	font-size: 25px;
	margin: 0;
	letter-spacing: 1px;
  text-transform: uppercase;

}

h2{

  font-family: TTnorms;
  font-size: 50px;
  letter-spacing: 5px;
  text-transform: uppercase;
  color: #1b1b1c;
  
}

h3{

  font-family: TTnorms;
  font-size: 35px;
  letter-spacing: 5px;
  text-transform: uppercase;
  
}

h4{

  font-family: TTnorms;
  font-size: 20px;
  letter-spacing: 5px;
  text-transform: uppercase;
      margin-bottom: 6px;
    margin-top: 46px;
  
}

h5{

  font-family: TTnorms;
  font-size: 20px;
  letter-spacing: 5px;
  text-transform: uppercase;
      margin-bottom: 6px;
    margin-top: 46px;
  
}


p{
 font-family: TTNorms;
 color: #1b1b1c;
 font-size: 17px;
 line-height: 22px;

  -ms-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto;

  -webkit-margin-before: 0em;
  -webkit-margin-after: 0em;


}

a{color: white;
text-decoration: none;
font-family: TTNorms;
 
 font-size: 15px;
line-height: 18px}



/*AUSTELLUNG TABELLE*/


td{
  font-family: TTNorms;
  font-size: 17px;
  line-height: 1.5em;
  color: #1b1b1c;
  


}


tr:hover .bold{
  color: #1b1b1c;

}


.bold{
  font-family: TTNormsBold;
  letter-spacing: 2px;
  padding-right: 80px;
  position: relative;
  display: block;

}



.bold:before {
  content: '';
  position: absolute;
  width: 60px;
  right: 14px;
  height: 2px;
  top: 50%;
  margin-top: -0.5px;
  background: #2f2d32;

 -webkit-transform: translate(0px, 0%);
    -ms-transform: translate(0px, 0%);
    transform: translate(0px, 0%);

     -webkit-transition: transform 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
  -moz-transition: transform 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
  -o-transition: transform 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
  transition: transform 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
}


tr:hover .bold:before{
   width:60px;
   -webkit-transform: translate(20px, 0%);
    -ms-transform: translate(20px, 0%);
    transform: translate(20px, 0%);
     -webkit-transition: transform 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
  -moz-transition: transform 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
  -o-transition: transform 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
  transition: transform 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
}


.location{


   -webkit-transition: all 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
  -moz-transition: all 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
  -o-transition: all 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
    transition: all 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
}

tr:hover .location{

    -webkit-transform: translate(20px, 0%);
    -ms-transform: translate(20px, 0%);
    transform: translate(20px, 0%);

         -webkit-transition: transform 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
  -moz-transition: transform 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
  -o-transition: transform 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
  transition: transform 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
  transition: transform 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
}




/*RAND*/


.left{
position: fixed;
background-color: #1b1b1c;
width: 25px;
height: 100%;
top:0px;
left:0px;
z-index: 99998;
}

.top{
position: fixed;
background-color: #1b1b1c;
width: 100%;
height: 25px;
top:0px;
left:0px;
z-index: 99998;
}


.right{
position: fixed;
background-color: #1b1b1c;
width: 25px;
height: 100%;
top:0px;
right:0px;
z-index: 99998;
}

.bottom{
position: fixed;
background-color: #1b1b1c;
width: 100%;
height: 25px;
bottom:0px;
left:0px;
z-index: 99998;
}



/*STARTUP*/

.logo{
  position: fixed;
  left:17%;
  top:21%;
  width:28%;
  z-index: 55;

}

.info{
  position: fixed;
  left:17%;
  top:48%;
  text-align: justify;
  width: 28%;
  z-index: 55;
}

.form{

  position: fixed;
  height: 100%;
  right:0;
  z-index: 54;
  pointer-events:none;
}

.bg{
  height: 100%;
  width: 100%;
  z-index: 53;

}

.backimage{
  position: absolute;
height: 100%!important;
  top: 50%;
left: 90%;
    -webkit-transform: translate(17%, -13%);
    -ms-transform: translate(17%, -13%);
    transform: translate(17%, -13%);
    z-index: 5;
    opacity: 0.7;
    
   


}


.backimagestatic{
z-index: 4;
  position: absolute;
height: 100%!important;
  top: 0%;
right: 0%;
 
   
}

.one{
   z-index: 53;
}

.two{
  z-index: 52;
}

.three{
  z-index: 51;
}

canvas[resize] {
position: fixed;
    width: 100%;
    height: 100%;
    z-index: 53;

}



/*MENU*/



.NAV{
  position: fixed;
  width: 60px;
  left:24px;
  top: 24px;
 bottom: 24px;
  z-index: 666;
  -webkit-transition: width 1s, color 0.2s;
  -moz-transition: width 1s, color 0.2s;
  -o-transition: width 1s, color 0.2s;
  transition: width 1s, color 0.2s;
  color: rgba(255,255,255,0);
}

.navstart{
   width: 150px;
    color: rgba(255,255,255,1);
}

.NAV:hover{
   -webkit-transition: width 1s, color 0.2s;
  -moz-transition: width 1s, color 0.2s;
  -o-transition: width 1s, color 0.2s;
  transition: width 1s, color 0.2s;
    width: 150px;
    color: rgba(255,255,255,1);
}

 @media screen and (min-width: 1024px) { 
.item h1{

  font-size: 12px;
  position: absolute;
  bottom: 10px;
  right:10px;
  letter-spacing: 1px;

}}

.container {
  flex-basis: auto;
  display: flex;
  flex-direction: column; 
  height: 100%;
  background: #1b1b1c;
}

.item {
  position: relative;
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: auto;
     -webkit-transition: all 1s;
  -moz-transition: all 1s ;
  -o-transition: all 1s ;
  transition: all 1s;
  cursor: alias;
}



.item:hover{
flex-grow: 2!important;


}


.bilder{
background-color: #232223;
}
.ausstellung{
background-color: #323133;
}
.bio{
  background-color: #626163;

}
.zeitung{
background-color: #323133;
}
.katalog{
background-color: #4a494b;
}
.kontakt{
background-color: #272628;
}



.back:hover{
  color:white!important;
  cursor: w-resize;
}



/*CONTENT*/

iframe{
  width: 100vw;
  height: 100vh;
}
.window{

   position: absolute;
  top: 25px;
  bottom: 25px;
  right: 25px;
  left:84px;
  z-index: 100;
  display: none;

}





  .ausstellungtext{
  padding: 5% 15% 9% 24%;
  background-color: #e8e8e8;


   }


.biotext{
  padding: 9% 15% 10% 19%;
  text-align: justify;
  background-color: #e8e8e8;
}



.kontakttext{
  background-color: #e8e8e8;
  padding: 5% 44% 10% 21%;
  min-height: 100%;
  text-align: justify;
}

.contact{
  padding: 5px 10px 5px 20px;
  background-color: #272628;
  color:white;
  letter-spacing: 2px;
  margin-top: 20px;
  margin-right: 35px;
  cursor: pointer;

    -webkit-transition: all 0.6s;
  -moz-transition: .6s;
  -o-transition: .6s;
   transition:all 0.6s;
 
}

.contact:hover{
     -webkit-transition: all 1s;
  -moz-transition: all 1s;
  -o-transition: all 1s;
  transition:all 1s;
  padding: 5px 10px 5px 50px;
  background-color: #4a494b;}

  .insta{
    height: 35px;
 
  margin-top: 30px;
  padding-right: 20px;
   
    cursor: pointer;
       -webkit-transition: all .5s;
  -moz-transition: all .5s;
  -o-transition: all .5s;
     transition:all 0.5s;
  }



.columns{

    -webkit-column-count: 2;
    -moz-column-count: 2;
    column-count: 2;

    -webkit-column-width: 200px;
    -moz-column-width: 200px;
    column-width: 200px;

    -webkit-column-gap: 25px;
    -moz-column-gap: 25px;
    column-gap: 25px;

    padding-bottom: 20px;
}


.erinnerung{
  background-color: #323133;
  padding: 10px 25px 10px 25px;
  margin-bottom: 30px;
  color: white!important;
  position: absolute;


}

.erinnerung p{
  letter-spacing: 0.8px;
}

.erinnerung a{
   transition: all 0.2s;
cursor: pointer;
letter-spacing: 3px;
background-color: #4a494b;
  padding: 12px 10px 12px 10px;
  position: absolute;
  right:-90px;
  top:0px;
  text-transform: uppercase;
  width: 64px;

}

.erinnerung a:hover{
  transition: all 0.2s;
background-color: #b8b7b9;
}


/* Preloader */
#preloader {
  position: fixed;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background-color:#1b1b1c; /* change if the mask should have another color then white */
  z-index:999999; /* makes sure it stays on top */
}

#status {

position:fixed;
top: 50%;
left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);

}



    @-webkit-keyframes opacity {
      0% { opacity: 1; }
      100% { opacity: 0; }
    }
    @-moz-keyframes opacity {
      0% { opacity: 1; }
      100% { opacity: 0; }
    }
    
    #loading {
      text-align: center; 
  
    }
    
    #loading span {
      -webkit-animation-name: opacity;
      -webkit-animation-duration: 1s;
      -webkit-animation-iteration-count: infinite;
      
      -moz-animation-name: opacity;
      -moz-animation-duration: 1s;
      -moz-animation-iteration-count: infinite;
    }
    
    #loading span:nth-child(2) {
      -webkit-animation-delay: 100ms;
      -moz-animation-delay: 100ms;
    }
    
    #loading span:nth-child(3) {
      -webkit-animation-delay: 300ms;
      -moz-animation-delay: 300ms;
    }




/*BEFORE MOBILE*/


.mobnavicon{
  display: none;
}

.mobnav{
  display: none;
}


.mobileborder{
  display: none;
}



    /*MOBILE*/
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
    
}

@media

only screen and (max-width: 1000px) {
  body { font-size: 150%; }
    p{ font-size: 200%;
      line-height: 150%;}

      h4{ font-size: 180%;
      line-height: 150%;}

      td{ font-size: 200%;
      line-height: 150%;}

      h2{font-size: 220%;
      line-height: 130%;}


      h5{ font-size: 130%;
      line-height: 150%;}

     
}




 @media screen and (max-width: 1024px) { 

.mobileborder{
  display: block;
}

.window{
  display: none;
  left:24px!important;
}
nav{
  display: none;
  width: 100%!important;
  color: rgba(255,255,255,1)!important;
}

.item h1{

  font-size: 35px;
  position: absolute;
  left: 50px;
  top:50px;
  letter-spacing: 1px;
}

.navinfo{display:none;}
.back{display: none!important;}



.mobnavicon{
display: block;
position: fixed;
z-index: 99999;
width: 150px;
height: 150px;
background-color: #1b1b1c;
top: 24px;
right: 24px;

}



.visible{
  transition: all 2.5s;
opacity: 1;
}






.form{display: none;}
.mouseimage{display: none;}



.logo{
  position: relative;
  z-index: 55;
  padding-top:20%;
padding-left: 15%;
top: 0;
width: 70%;
left: 0;



}

.info{
  position: relative;
  z-index: 55;
  padding: 10% 15% 20% 15%;
  width: 70%;
  top:0;
  left: 0;

}


.biotext{
  position: relative;
  z-index: 55;
  padding: 10% 15% 20% 15%;
  width: 70%;
  top:0;
  left: 0;
   }

.columns{

    -webkit-column-count: 1;
    -moz-column-count: 1;
    column-count: 1;



    padding-bottom: 20px;
}




.kontakttext{
  position: relative;
  z-index: 55;
  padding: 10% 15% 20% 15%;
  width: 70%;
  top:0;
  left: 0;
   }

.insta{

  height:130px;
  margin-right: 50px;
}


.ausstellungtext{
  position: relative;
  z-index: 55;
  padding: 10% 15% 20% 15%!important;
  width: 70%;
  top:0;
  left: 0;
   }



.wrap header label{
  display: block;
 height: 6.66%;
 border-bottom: #1b1b1c 2px solid;
 font-family: TTNormsBold;
 font-size: 30px;
 line-height: 32px;
 padding-top: 15px; 
 vertical-align: center;

 margin-right: 0;

}


.wrap header{
      top: 0px;
    left: 0px;
    width: 100%;
   
    width: 150px;
   bottom:0px;
}


.slide img{
  width: 80%;
  height: auto;
  padding-left: 180px;
  padding-top: 100px;
}


.imgwrap{
position: absolute;
right: 0px;
left:0px;
width: 100%!important;
padding-bottom: 100%;

}
.katalogimg{

  padding-right: 0px!important;
  padding-bottom: 30px;
}


.kataloginfo{
  -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
    filter: grayscale(100%);
  position: fixed;
  bottom: 0px!important;
  left:0px!important;
  background: rgba(232,232,232,0.8);
  width: 100%;
  padding: 10%;
  pointer-events: none;
}
.kataloginfo input{
  pointer-events: all;
width: 30%;}

.erinnerung a{font-size: 200%;
position: relative;}


}




/*KATALOG*/

.imgwrap{
position: absolute;
right: 150px;
width: 500px;

}
.katalogimg{
width: 100%;
 height: auto;;
  padding-right: 30px;
  padding-bottom: 30px;
}


.kataloginfo{
  -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
    filter: grayscale(100%);
  position: fixed;
  bottom: 100px;
  left:180px;
}

.kataloginfo input{
  cursor: pointer;
}