/* ==============================================================================================
This copyright notice must be kept untouched in the stylesheet at all times.
The original version of this stylesheet and the associated (x)html
is available at http://www.script-tutorials.com/night-sky-with-twinkling-stars/
Copyright (c) Script Tutorials. All rights reserved.
This stylesheet and the associated (x)html may be modified in any way to fit your requirements.
================================================================================================= */
* {
    margin: 0;
    padding: 0;
}


@keyframes move-twink-back {
    from {background-position:0 0;}
    to {background-position:-10000px 5000px;}
}
@-webkit-keyframes move-twink-back {
    from {background-position:0 0;}
    to {background-position:-10000px 5000px;}
}
@-moz-keyframes move-twink-back {
    from {background-position:0 0;}
    to {background-position:-10000px 5000px;}
}
@-ms-keyframes move-twink-back {
    from {background-position:0 0;}
    to {background-position:-10000px 5000px;}
}

@keyframes move-clouds-back {
    from {background-position:0 0;}
    to {background-position:10000px 0;}
}
@-webkit-keyframes move-clouds-back {
    from {background-position:0 0;}
    to {background-position:10000px 0;}
}
@-moz-keyframes move-clouds-back {
    from {background-position:0 0;}
    to {background-position:10000px 0;}
}
@-ms-keyframes move-clouds-back {
    from {background-position: 0;}
    to {background-position:10000px 0;}
}

.stars, .twinkling, .clouds, .logo, .container {
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  width:100%;
  height:100%;
  display:block;
}

.stars {
  background:#000 url(images/stars.png) repeat top center;
  z-index:0;
}

.container {
  background: url();
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
  background-size: 50%;
  z-index:2;
  -vendor-animation-duration: 0.2s;
  -vendor-animation-delay: 0s;
  color: #cccccc;
  text-align: center;
  font-family: "Courier New";
  font-size: 40px;

}

.impressum {
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
  background-size: 40%;
  z-index:30;
  -vendor-animation-duration: 0.2s;
  -vendor-animation-delay: 0s;
  color: #cccccc;
  text-align: center;
  font-family: "Courier New";
  font-size: 40px;

}

.logo {
  background: url(images/logo.png);
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
  background-size: 40%;
  z-index:30;
  -vendor-animation-duration: 0.2s;
  -vendor-animation-delay: 0s;
  color: #cccccc;
  text-align: center;
  font-family: "Courier New";
  font-size: 40px;

}

@media only screen and (max-device-width: 800px) {
  .logo {
    background-size: 60%;
    font-size: 70px;
  }
  .container {
    font-size: 70px;
  }
  .footer {
    font-size: 70px;
    height: 140px;
  }
  .bgdoorleft {
    width: 1%;
  }
  .bgdoorright {
    width: 1%;
  }
  .footerlink{
    color: #cccccc;
  }
  a {
    color: #cccccc;
  }
}

.footerlink {
  font-size:15px;
}

.text {
    text-align: center;
    position: relative;
    top: 50%;
    -ms-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    z-index: 100;
}


.privateklub {

  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
  z-index:5;
}

.fotoverboten {
  background: url(images/fotoverboten.png);
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
  z-index:7;
}

.twinkling{
  background:transparent url(images/twinkling.png) repeat top center;
  z-index:-3;

  -moz-animation:move-twink-back 200s linear infinite;
  -ms-animation:move-twink-back 200s linear infinite;
  -o-animation:move-twink-back 200s linear infinite;
  -webkit-animation:move-twink-back 200s linear infinite;
  animation:move-twink-back 200s linear infinite;
}

.clouds{
    background:transparent url(images/clouds.png) repeat top center;
    z-index:3;

  -moz-animation:move-clouds-back 800s linear infinite;
  -ms-animation:move-clouds-back 800s linear infinite;
  -o-animation:move-clouds-back 800s linear infinite;
  -webkit-animation:move-clouds-back 800s linear infinite;
  animation:move-clouds-back 800s linear infinite;
  opacity: 0.25;
  cursor: pointer;

}

body { background-color: #444; }

.content {
    position: relative;
    z-index:0;
}

.footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100px;
    color: #333;
    text-align: center;
    font-family: "Courier New";
    font-size: 40px;
    padding-bottom: 40px;
    z-index:33;
}

#mutebtn:hover{
  color: #cccccc
}

a {
  text-decoration: none;
  color: #333;
}


a:hover {
  text-decoration: underline;
  color: #ccc;
}

#light {
    top: 50%;
    left: 50%;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    position: absolute;
    opacity: 0;
    z-index:6;
    background:#2f3233 url(images/darkroom.jpg) repeat top center;
    filter: url(css/grayscale.svg#greyscale);
     -webkit-filter: grayscale(1);
     -moz-filter: grayscale(100%);
     -ms-filter: grayscale(100%);
     -o-filter: grayscale(100%);
}

video::-webkit-media-controls-panel,
video::-webkit-media-controls-start-playback-button {
    display: none !important;
}

.magictime {
-webkit-animation-duration: 0.5s;
-moz-animation-duration: 0.5s;
-o-animation-duration: 0.5s;
animation-duration: 0.5s;
}

.bgdoorleft {
   position: fixed;
   width: 1%;
   height: 100%;
   top: 0;
   left: 0;
   background: rgba(30,30,30,1);
   z-index: 10;

}

.bgdoorright {
   position: fixed;
   width: 1%;
   height: 100%;
   top: 0;
   right: 0;
   background: rgba(30,30,30,1);
   z-index: 10;

}

.bgdoorcontainer {
   position: fixed;
   width: 100%;
   height: 100%;
   margin: 0 auto;
   top: 0;
   z-index: 2;

}