body {
  /* background-image: url(../img/bg.png); */
  background: black;
  -webkit-user-select: none;
  overflow: hidden;
}

#background {
  width: 100%;
  height: 100%;
  cursor: url(../img/cursor-point.png) 50 50, default;
  background: black;
  position:absolute;
  left: 0;
  top: 0;
}

#welcome-panel {
  color: #ddd;
  position: absolute;
  left: 50%;
  top: 50%;
  width: 400px;
  height: 500px;
  margin-left: -200px;
  margin-top: -170px;
  line-height: 60px;  


  font-size: 28px;
  letter-spacing: 0px;

  
  z-index: 100;
  font-family: 'Special Elite','Cinzel Decorative', 'Italianno', serif;

  text-align: left;
  text-shadow: 0 0 4px rgba(255,255,255,1), 0 0 6px rgba(255,255,255,1);
  cursor: url(../img/cursor-point.png) 50 50, default;
  transition: opacity 1s;
  -moz-transition: opacity 1s; /* Firefox 4 */
  -webkit-transition: opacity 1s; /* Safari and Chrome */
  -o-transition: opacity 1s; /* Opera */
}

#welcome-panel b {
  cursor: url(../img/cursor-exit.png) 50 50, default;
  color: white;
}


#credits-panel {
  color: white;
  position: absolute;
  left: 50%;
  top: 50%;
  width: 400px;
  height: 500px;
  margin-left: -200px;
  margin-top: -170px;
  line-height: 60px;  


  font-size: 28px;
  letter-spacing: 0px;

  
  z-index: 100;
  font-family: 'Special Elite','Cinzel Decorative', 'Italianno', serif;

  text-align: left;
  text-shadow: 0 0 4px rgba(255,255,255,1), 0 0 6px rgba(255,255,255,1);
  cursor: url(../img/cursor-point.png) 50 50, default;
  transition: opacity 3s;
  -moz-transition: opacity 3s; /* Firefox 4 */
  -webkit-transition: opacity 3s; /* Safari and Chrome */
  -o-transition: opacity 3s; /* Opera */
  
  pointer-events: none;
  z-index:6000;
}

#credits-panel.hidden {
  opacity: 0;
}

#canvas-panel {
  border: none;
  padding: 0;
  position: absolute !important;
  left: 50%;
  top: 50%;
  margin-left: -640px;
  margin-top: -360px;
  width: 1280px;
  height: 960px;
  z-index: 50;
  background: black;
  cursor: url(../img/cursor-point.png) 50 50, default;
   transition: opacity 5s;
  -moz-transition: opacity 5s; /* Firefox 4 */
  -webkit-transition: opacity 5s; /* Safari and Chrome */
  -o-transition: opacity 5s; /* Opera */
}

.canvas-panel-faded-in {
  opacity: 1;
}

.canvas-panel-faded-out {
  opacity: 0;
}

#overlay {  
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -640px;
  margin-top: -480px;
  color: white;
  z-index: 100;
  width: 1280px;
  height: 960px;
  font-family: 'Special Elite', 'Parisienne', 'Italianno', serif;
  font-size: 30px;
  z-index: 100;
  text-align: center;
  transition: opacity 1.5s;
  text-shadow: 0 0 4px rgba(255,255,255,1), 0 0 6px rgba(255,255,255,1);
  pointer-events: none;
}
.overlay-faded-in {
  opacity: 1;
}

.overlay-faded-out {
  opacity: 0;
}

#overlay #title {
  margin-top: 460px;
  margin-left: -40px;
  font-size: 100px;
}

#text-panel-a {
  visibility: hidden;
  white-space: pre-line;
  position: absolute;
  color: white;
  z-index: 100;
  width: 960px;
  margin-top: 20px;
  font-family: 'Special Elite', 'Parisienne', 'Italianno', serif;
  font-size: 30px;
  text-align: center;
  text-shadow: 0 0 4px rgba(255,255,255,1), 0 0 6px rgba(255,255,255,1);
  cursor: url(../img/cursor-point.png) 50 50, default;
}

#text-panel-b {
  
  visibility: hidden;
  white-space: pre-line;
  position: absolute;
  color: white;
  z-index: 100;
  width: 960px;
  margin-top: 20px;
  font-family: 'Special Elite', 'Parisienne', 'Italianno', serif;
  font-size: 30px;
  text-align: center;
  text-shadow: 0 0 4px rgba(255,255,255,1), 0 0 6px rgba(255,255,255,1);
  cursor: url(../img/cursor-point.png) 50 50, default;
}

#button-fullscreen {
  display: none;
}

.text-faded-out {
  opacity: 0;
  transition: opacity .6s;
  -moz-transition: opacity .6s; /* Firefox 4 */
  -webkit-transition: opacity .6s; /* Safari and Chrome */
  -o-transition: opacity .6s; /* Opera */
}

.text-faded-in {
  opacity: .5;
  transition: opacity 3s;
  -moz-transition: opacity 3s; /* Firefox 4 */
  -webkit-transition: opacity 3s; /* Safari and Chrome */
  -o-transition: opacity 3s; /* Opera */
}

#logo {
  background-image: none;
  background-position: center center;
  background-repeat: no-repeat;
  width: 30%;
  height: 33px;
  position: absolute;
  left: 70%;
  top: 20px;
  opacity: .2;
  z-index: 100;
  text-align: right;
  transition: opacity 2s;
  -moz-transition: opacity 2s; /* Firefox 4 */
  -webkit-transition: opacity 2s; /* Safari and Chrome */
  -o-transition: opacity 2s; /* Opera */
}

#logo:hover {
  opacity: 1;
}

#logo img {
  margin-right: 20px;
  cursor: pointer;
}

#filmgrain {
  border: none;
  padding: 0;
  position: absolute;
  width: 960px;
  height: 540px;
  left: 50%;
  top: 50%;
  margin-left: -480px;
  margin-top: -270px;
  z-index: 0;
}

#game-canvas {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1280px;
  
  margin-left: -640px;
  margin-top: -480px;
  z-index: 100;
  width: 1280px;
  
  height: 960px;
  cursor: url(../img/cursor-point.png) 50 50, default;
  transition: opacity 1.5s;
  -moz-transition: opacity 1.5s; /* Firefox 4 */
  -webkit-transition: opacity 1.5s; /* Safari and Chrome */
  -o-transition: opacity 1.5s; /* Opera */
}

.canvas-faded-in {
  opacity: 1;
}

.canvas-faded-out {
  opacity: 0;
}

#icon-sounds {
  visibility: hidden;
  position: absolute;
  width: 40px;
  height: 40px;
  background-image: url(../img/sound.png);
  z-index: 9000;
  opacity: .1;
  cursor: pointer;
}

#icon-sounds:hover {
  transition: opacity .5s;
  -moz-transition: opacity .5s; /* Firefox 4 */
  -webkit-transition: opacity .5s; /* Safari and Chrome */
  -o-transition: opacity .5s; /* Opera */
  opacity: .5;
}

.slide {
  color: white;
  position: absolute;

  margin-top: 200px;
  margin-left: 100px;
  z-index: 99;
  cursor: url(../img/cursor-point.png) 50 50, default;
  transition: opacity 1s;
  -moz-transition: opacity 1s; /* Firefox 4 */
  -webkit-transition: opacity 1s; /* Safari and Chrome */
  -o-transition: opacity 1s; /* Opera */
  cursor: url(../img/cursor-look.png) 50 50, default;
  display: none;
  opacity: 0;
}

.slide-faded-out {
  opacity: 0;
  display: block;
}

.slide-faded-in {
  opacity: 1;
  display: block;
}