@font-face {
    font-family: 'k7';
    src:    
            url('fonts/Akz-extended-Regular-Regular.woff') format('woff'),  
            url('fonts/Akz-extended-Regular-Regular.woff2') format('woff2');             /* Moderne Browser */
    font-weight: normal;
    font-style: normal;
}

body {   
  margin: 0;
  background: #000000;
   font-family: 'k7' , sans-serif;
   font-smooth: auto;
     -webkit-font-smoothing: auto;
     -moz-osx-font-smoothing: auto;
     cursor: url('cursor.svg') 10 10, auto;
      scroll-behavior: smooth;
    }   

 body.overflow-hidden2 {
    overflow: hidden; /* Apply overflow: hidden to body when it has the "overflow-hidden2" class */
  }

h1 {
  font-size: 1em;
}
#container {
  position: relative;
  height: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
}

#myDiv {
  position: fixed;
  top: 0;
  left: -100vw;
  width: 100vw;
  height: 100vh;
  background-image: linear-gradient(to right, #000000 30%, #00000000 100%);
    backdrop-filter: blur(10px);
     -webkit-backdrop-filter: blur(10px);
     overflow-x: hidden;
    overflow-y: scroll;
  transition: all 0.8s ease;
  z-index: 1;
  opacity: 0;
}



#cross {
    background-color: #ffffff6b;
     backdrop-filter: blur(10px);
     -webkit-backdrop-filter: blur(10px);
    border-radius: 100%;
    cursor: url('cursor.svg') 10 10, pointer;
 

    
}

#cross:hover {
    background-color: ghostwhite;
    border-radius: 100%;
cursor: url('cursor.svg') 10 10, pointer;
   
   
}


#cross.close, #cross.open {
  position: fixed;
  width: 60px;
  height: 60px;
  z-index: 400;
    cursor:pointer;
  -webkit-transition: 1s;
    transition: 1s; 
  cursor: url('cursor.svg') 10 10, pointer;

  
}

#cross.close, {
    background-color: ghostwhite;
    cursor: url('cursor.svg') 10 10, pointer;
}


#cross.close:hover, #cross.open:hover {
   -webkit-transition: 1s;
    transition: 1s;
    cursor: url('cursor.svg') 10 10, pointer;
    
}
#cross.close:before, #cross.close:after, #cross.open:before, #cross.open:after{
  position: absolute;
  left: 29px;
  top:8px;
  content: ' ';
  height: 45px;
  width: 2px;
  background-color: black;
  -webkit-transition: 0.5s;
    transition: 0.5s;
}
#cross.close:before {
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}
#cross.close:after {
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}
#cross.open:before {
  transform: rotate(0deg);
  -webkit-transform: rotate(0deg);
}
#cross.open:after {
  transform: rotate(-90deg);
  -webkit-transform: rotate(-90deg);
}

#cross.blackcross:before , #cross.blackcross:after {
    background-color: black;
}

#cross.open:hover::before{
  background-color: #000000;
}
#cross.open:hover::after{
  background-color: #000000;
}
#cross.close:hover::before{
  background-color: #000000;
}
#cross.close:hover::after{
  background-color: #000000;
}

#clickableDivContainer {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100vw;
  transition:0.6s;

}

#clickableDivContainer.open {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 60vw;
  transition:0.6s;
}

.clickableDiv {
  margin-top: 80px;
  width: 25%;
  padding: 10px;
  border: 1px solid black;
  cursor: pointer;
  z-index: 0;
  color: #ffffff;
  transition: margin-left 0.6s ;
  display: flex;
  margin-bottom: 15vh;
  cursor: url('cursor.svg') 10 10, auto;
    
}

.clickableDiv:hover{
  margin-left: -6%;
    transition: margin-left 0.6s ;
     cursor: url('cursor.svg') 10 10, pointer;
    
     
}

.clickableDiv.active{
  margin-left: -50%;
    transition: margin-left 0.6s ;
}

.clickableDiv img{
  width: 100%;
}

.clickableDiv video{
  width: 100%;
}

.desc{
  opacity:0;
  color: #ffffff;
  transition:0.6s ;
  padding-left: 30%;
  position: absolute;
  z-index: -1;
}

.clickableDiv:hover .desc{
  opacity: 1;
   transition:0.6s ;
   padding-left: 27%;
}

#rightDiv {
  position: fixed;
  overflow: auto;
  top: 0;
  right: -101vw;
  width: 70vw;
  height: 100vh;
  background-color: #000000;
  transition: all 0.5s ease;
  border-left: solid 1px white;
  z-index: 2;
}

#projectContent {
  padding: 0;
}



/* artist content */

#artist-content-wrapper {
    color: black;
    width: 90%;
  max-width:1200px;
    margin: 125px 0 0 30px;
  
}
.artist-content{
    color: ghostwhite;
    font-size: 2.5em;
    line-height: 1em;
    -webkit-transition: 1s;
    transition: 1s
}


/* Projects */

#project-content-wrapper {
    width: 100%;
    margin: 0 auto; 
}

#project-content {
    position: absolute;
    top: 120px; 
}


.project-title {
    margin: 0 0 0 20px;
    font-size: 2em;
    color:#ffffff;
  
}
.project-identity{
    margin: 0 0 0 20px;
    font-size: 0.6em;
    color:#ffffff;
  
}
.project-text{
    /*padding-left: 10%;*/
    font-size: 1em;
    margin: 15px 0 60px 20px;
    width:85%;
    color:#ffffff;  
}
#sub-images  {
    text-align: center;
}
#sub-images .img {
    margin: 80px 0;
    text-align: center;
}
#sub-images .img img{
    width: 100%;
}


#title{
    
    font-size: 0.6em;
    margin: 10px;
    color:#ffffff;  
}

.marquee {
  overflow: hidden;
  display: flex;
}

.marquee h1{
  font-size: 0.7em;
  white-space: nowrap;
  color:#ffffff; 
  padding-left: 20px;
}

/* Links */

a {
    text-decoration: none;
    color: #ffffffc7;
    border-bottom: solid 1px;
    -webkit-transition: 0.5s ease-in-out;;
    transition: 200ms ease-in-out;
    display: inline-flex;
}
a:visited {
  color: #ffffffc7;
}
a:hover, a:focus, a:active {
    color: #FFFFFF;;
    -webkit-transition: 0.5s ease-in-out;;
    transition: 200ms ease-in-out;

}
a:focus, a:active {
    outline: 0;
}

main {
  position: relative;
  background: #000000;
  height:auto;
  margin-bottom: 40px;
}

footer {
  position: fixed;
  bottom: 0;
  width: 100vw;
  text-align: center;
  background: #171717;
  color: #727272;
  z-index: -10;
  font-size: 0.7em;
  height: 30px;
}

.imprint{
    border-bottom: none;
    line-height: 1em;
    padding: 5px;
}

/* Styles for smartphones in portrait orientation */

@media only screen and (max-width: 767px) {
  
.clickableDiv {
  width: 60%;
}

#sub-images .img {
    margin: 20px 0;
    text-align: center;
  }

#sub-images  {
    margin-bottom: 50px;
  }  

.clickableDiv:hover .desc{
  opacity: 0;
}
.desc{
  display: none;
}

#myDiv {
  background-image: linear-gradient(to right, #000000 30%, #00000000 120%);
}

.artist-content {
    font-size: 1.3em;
    width: 90%;
  }

#rightDiv {
  width: 100vw;
  }

 #title{
   text-align: center;
 } 

  body.overflow-hidden2 {
    overflow: hidden; /* Apply overflow: hidden to body when it has the "overflow-hidden2" class */
  }
  body.overflow-hidden {
    overflow: hidden; /* Apply overflow: hidden to body when it has the "overflow-hidden" class */
  }
}