/*  div{
    border-color: red;
    border-style: solid;
    border-width: 1px;
  }*/

#notsurecontainer{
  position: relative;
  left: 100px;
}

body {
/*   -webkit-backface-visibility: hidden; 
-webkit-transform: translateZ(0);*/
/*  -webkit-transform: none !important;
transform: none !important;*/
  cursor: url(images/cursor.png), auto;
  margin: 0;
    
}

#main{
  transition: 0.5s;
}

#infoindex{
  z-index: 10;
 position:fixed;
 bottom: 10px;
 left: 30px;
 width: 200px;
}

 #zeitfensterinfo, img, a, iframe:hover{
  cursor: url(images/cursor_pointer.png), auto;
}


 img:hover{
  cursor: url(images/cursor_pointer.png), auto;
}

#loading{
  width: 100vw;
  height: 100vh;
  position: absolute;
  top: 0;
  left: 0;
  /*background-color: rgba(0,200,0,.5);*/
}

#innerpreload{
  width: 120px;
  height: 120px;
  position: relative;
  top: calc(50vh - 70px);
  left: calc(50vw - 70px);
 -webkit-animation-name: spin;
  -webkit-animation-duration: 2000ms;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  -moz-animation-name: spin;
  -moz-animation-duration: 2000ms;
  -moz-animation-iteration-count: infinite;
  -moz-animation-timing-function: linear;
  -ms-animation-name: spin;
  -ms-animation-duration: 2000ms;
  -ms-animation-iteration-count: infinite;
  -ms-animation-timing-function: linear;
  animation-name: spin;
  animation-duration: 2000ms;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

@-ms-keyframes spin {
  from {
    -ms-transform: rotate(0deg);
  }
  to {
    -ms-transform: rotate(360deg);
  }
}

@-moz-keyframes spin {
  from {
    -moz-transform: rotate(0deg);
  }
  to {
    -moz-transform: rotate(360deg);
  }
}

@-webkit-keyframes spin {
  from {
    -webkit-transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
  }
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

circle { mix-blend-mode: multiply;}

#fullback{

   position: fixed;
   top: 0;
z-index: -1;
  overflow: hidden;
  width: 100vw;
  height: 100vh;
  /*background-image: url('images/juliana0025-3_bx800.jpg');
   -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;*/
}

#fullback img{
     transition: 1.5s;
 max-width: 800px;
  position: absolute;
    margin: 0 auto;
    top: 60px;
    right: 100px;
    bottom: 0;
}


h1{
  font-family: helvetica;
  font-size: 200;
  font-weight: 700;
  color: black;
  line-height: 1;
  margin: 0;
}

h2{
  font-family: Courier;
  font-size: 100;
  padding: 5px;
}

p{
  font-family: lato;
  font-size: 14px;

  line-height: 20px;
}

a{
  text-decoration: none;
  color: black;
  font-family: Courier;
}

a:hover{
  cursor: pointer;
text-decoration: underline;
text-decoration-color: rgb(0,255,0);
}

#centerblock{
/*  outline: 2px solid black;*/
z-index: 100;
  max-width: 800px;
  margin: 0 auto;
  padding: 80px 10px 30px 10px;
  margin-top: 100vh;
}

#centerblock img{
  width: 100%;
  margin-top: 50px;
}

.axis{
  display: none;
}

#stage {
 
position: absolute;
z-index: 1;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: 0 auto;
  cursor: grab;
  cursor: -moz-grab;
  cursor: -webkit-grab;
}

#me_stage {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
 /*   border-color: red;
    border-style: solid;
    border-width: 1px;
position: absolute;
margin: 0 auto;*/
}

#kugelstage {
position: sticky;
position: -webkit-sticky;
/*z-index: -1;*/
  top: 0;
  left: 0;
 /* cursor: grab;
  cursor: -moz-grab;
  cursor: -webkit-grab;*/
}

#kugelcontainer{
/*position: fixed;*/
top: 0px;
left: 0px;
}

canvas#kugel{
position: sticky;
position: -webkit-sticky;

z-index: -1;
  top: 0;
  left: 0;
  /*background-color: black;*/
   width: 100vw;
  height: 100vh;
 /* cursor: grab;
  cursor: -moz-grab;
  cursor: -webkit-grab;*/
}

#drawpad{
  z-index: -1;
  position: fixed;
  top: 0;
  left: 0;
}

#stage:active {
  cursor: grabbing;
  cursor: -moz-grabbing;
  cursor: -webkit-grabbing;
}

#projektheadline{
transition: 0.5s;
  z-index: 100;
  position: absolute;
  bottom: 0;
  left: 0;
width: 265px;
  padding: 20px 20px 20px 20px;
}

#projektheadline h1{

  font-size: 100;
  font-weight: 700;
  line-height: 1;
  /*margin: 0;*/
}

#projektheadline h2{
  font-weight: 100;
  font-size: 20px;
  /*margin-top: -1vh;*/
 margin: 0;
}

#projektheadline p{
  max-width: 600px;
}



#projektheadline a{
  text-decoration: none;
  color: white;
  font-family: Courier;
  font-size: 20px;
}

#projektheadline a:hover {
  cursor: pointer;
  color: rgb(0,255,0);
text-decoration: underline !important;
text-decoration-color: rgb(0,255,0) !important;
}


#projektinfo{
  transition: 0.5s;
  position: absolute;
  bottom: 15px;
  left: 265px;
  
  max-width: 300px;
}

ul li {
  list-style: none;
}

ul li a:hover{
  list-style: none;
  text-decoration: underline;
}

/*GRID*/
    #gridcontainer{
      padding-top: 96vh;
      position: relative;
      max-width: 1000px;
      margin: 0 auto 10vh auto;
      /*margin-top: 100vh;*/
    }

    /*  SECTIONS  */
    .section {
      clear: both;
      padding: 0px;
      margin: 0px;
    }

    /*  COLUMN SETUP  */
    .col {
      display: block;
      float:left;
      margin: 1% 1% 0% 0%;
    }

    .col img{
        margin: 2% 0% 0% 0%;
      width: 100%;
      /*border-style: solid;
      border-width: 5px;
      border-color: white;*/
    }

   /* .col img:hover{
      width: 200%;
    }*/

    .resp_iframe_container {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding-top: 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
}

    .resp_iframe{
     position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  border: none;
    }

    .col:first-child { margin-left: 0; }

    /*  GROUPING  */
    .group:before,
    .group:after { content:""; display:table; }
    .group:after { clear:both;}
  .group { zoom:1; /* For IE 6/7 */ }
  /*  GRID OF TWO  */

  .span_2_of_2 {
   
    width: 100%;
  }
  .span_1_of_2 {
    width: 49%;
  }
  .span_1_of_3{
    width: 32%;
  }
  .span_2_of_3{
    width: 65%
  }
  /*GRID ENDE*/

/*##########  G E S C H Ä F T S  B E R I C H T   ##########*/
.zumtobelbilder img{
  filter: saturate(0%);
  animation-name: example;
  -webkit-animation: saturate 3s infinite;
}

@-webkit-keyframes saturate {
  0% { -webkit-filter: saturate(none); }
  25% { -webkit-filter: saturate(1.2); }
  /*66% { -webkit-filter: saturate(0.5); }*/
  100% { -webkit-filter: saturate(none); }

}

.zumtobelbilder img:hover{
  -webkit-filter: saturate(1.2);
}
/*##########  G E S C H Ä F T S B E R I C H T   E N D E  ##########*/

/*##########  K A M M E R F L I M M E R N  ##########*/
#fixedbackground{
position: fixed;
background-color: rgb(242,242,240);
  top: 0px;
  left: 0px;
}
/*##########  K A M M E R F L I M M E R N   E N D E  ##########*/

/* ZEITFENSTER */
#zeitfensterinfo{
  z-index: 10000000;
  position: fixed;
  bottom: 0px; 
  left: 20px;
    font-weight: 100;

}



#zeitfensterinfo:hover{
  color: rgb(0,255,0);
}

#detailtext{
  display: none;
  padding: 20px;  
  max-width: 500px;
   max-height: 500px; 
  background-color: white; 
  position: fixed; 
  top: 0; 
  left: 0; 
  bottom: 0; 
  right: 0; 
  margin: auto;
}

/* ZEITFENSTER ENDE */

/* ########## M A G N I F I E R ##########*/
.round {
  margin-right: 20px;
}

/*lupe*/
.glass {
  width: 550px;
  height: 380px;
  position: absolute;
  /*border-radius: 50%;*/
  cursor: crosshair;
  /* Multiple box shadows to achieve the glass effect */
  box-shadow:
  0 0 0 7px rgba(255, 255, 255, 0.85),
  0 0 7px 7px rgba(0, 0, 0, 0.25), 
  inset 0 0 40px 2px rgba(0, 0, 0, 0.25);
  /* hide the glass by default */
  display: none;
}

.magnifier{
  /*background-color: red;*/
  width: 60vw;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin:  auto;
 
  -webkit-box-shadow: 0px 10px 6px 0px rgba(0,0,0,0.75);
  -moz-box-shadow: 0px 10px 6px 0px rgba(0,0,0,0.75);
  box-shadow: 0px 10px 6px 0px rgba(0,0,0,0.75);
}

.magnifier img{
  width: 100%;
}

#myimage{
width: 100%
}
/* ########## M A G N I F L I E R   E N D E ##########*/


/* GRAVITY  S W I T C H */
.switch {
  position: relative; right: -100px; bottom: 0px;
  display: inline-block;
}
.switch-input {
  display: none;
}
.switch-label {
  display: block;
  width: 48px;
  height: 24px;
  text-indent: -215%;
  clip: rect(0 0 0 0);
font-family: Courier;
font-size: 16px;
font-weight: 100;
  /*color: transparent;*/
  color: black;
  user-select: none;
}
.switch-label::before,
.switch-label::after {
  content: "";
  display: block;
  position: absolute;
  cursor: pointer;
}
.switch-label::before {
  width: 100%;
  height: 100%;
  background-color: #dedede;
  border-radius: 9999em;
  -webkit-transition: background-color 0.25s ease;
  transition: background-color 0.25s ease;
}
.switch-label::after {
  top: 0;
  left: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-color: #fff;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.45);
  -webkit-transition: left 0.25s ease;
  transition: left 0.25s ease;
}
.switch-input:checked + .switch-label::before {
  /*background-color: #89c12d;*/
  background-color: rgb(0,255,0);
}
.switch-input:checked + .switch-label::after {
  left: 24px;
}
/* G R A V I T Y  S W I T C H  E N D E */


/* Media Queries */

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

    /*GRID*/
    #gridcontainer{
      padding-top: 100vh;
      position: relative;
      max-width: 90%;
      margin: 0 auto 10vh auto;
      /*margin-top: 100vh;*/
    }
    .col { 
      margin: 2% 1% 0% 0%;
    }
    .col img, iframe{
      margin-top: 40px;
    }
    .span_2_of_2, .span_1_of_2, .span_1_of_3, .span_2_of_3 { 
      width: 100%;
       }
    /*GRID ENDE*/

#infoindex{
  display: none;
}

#projektheadline h1{
  font-size: 45px;
  font-weight: 700;
  line-height: .9;
}

#fullback{
   position: fixed;
   top: 0;
z-index: -1;
  overflow: hidden;
  width: 100vw;
  height: 100vh;
/*  background-image: url('images/juliana0025-3_bx800.jpg');
   -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;*/
}

#fullback img{
 
display: none;
 max-width: 800px;
    height: 100%;
    margin: 0 auto;
}

#infoindex{
  display: none;
}
#projektheadline{
 position: absolute;
 top: 20px;
  padding: 20px;
}
#projektinfo{
  position: absolute;
  bottom: 20px;
  transition: 0.5s;
  left: 20px;
  width: 320px;
}


  }