.canvas { 
  -webkit-animation: fadeIn 2s;
  -moz-animation: fadeIn 2s;
  -o-animation: fadeIn 2s;
  -ms-animation: fadeIn 2s;
  animation: fadeIn 2s;
  
  display: block; 
  top: 0;
  position: fixed;
  z-index: -100;
}

@keyframes fadeIn {
  0% {opacity:0;}
  100% {opacity:1;}
}

canvas { 
  width: 100vw; 
  height: 100vh;
}


.overlay-v {
  text-align: center;
  background: #080808;
  background: linear-gradient(0deg, 
    #080808 0%, 
    #080808 5%, 
    rgba(8,8,8,0.0) 20%, 
    rgba(8,8,8,0.0) 100%); 
    /*#080808 95%, */
    /*#080808 100%);*/

  background-position: center center;
  background-size: cover;

  height: 100%;
  width: 100%;
  position: absolute;
  right: 0;
  top: 0;
}

.overlay-h {}


@media (min-width: 992px) {
  .overlay-h {
    text-align: center;
    background: #080808;
    background: linear-gradient(90deg, 
      #080808 0%, 
      #080808 2%, 
      rgba(0,0,0,0) 15%, 
      rgba(0,0,0,0) 85%, 
      #080808 98%, 
      #080808 100%);

    background-position: center center;
    background-size: cover;

    height: 100%;
    width: 100%;
    position: absolute;
    right: 0;
    top: 0;
  }
}