.con-hero {
  width: 100%;
  height: 100vh;
  position: relative;
  overflow: hidden;
}
    #backgroundCanvas {
        width: 100vw;
        height: 100vh;
        z-index: -1;
    }

.hero-overlay {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
    -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
  filter: grayscale(100%);
opacity: 0.6;
display: none;
}
.hero-logo {
  font-size: 5rem;
  font-family: 'Cinzel', 'Cormorant', times, serif;
  text-transform: lowercase;
  line-height: 1;
  letter-spacing: -3px;
  position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);
}
.hero-text {
  position: absolute;
  top: 1rem;
  left: 1rem;
}

@media only screen and (min-width: 40em) {
  .hero-logo {
  font-size: 8rem;
  letter-spacing: -5px;
}
.hero-text {
  position: absolute;
  top: 1rem;
  left: 1rem;
}
}
@media only screen and (min-width: 64em) {
  .hero-logo {
  font-size: 10rem;
  letter-spacing: -7px;
}
.hero-text {
  position: absolute;
  top: 2rem;
  left: 2rem;
}
}


/*  Hero-2

#backgroundCanvas {
  width: 100vw;
  height: 100vh;
  position: relative;
  overflow: hidden;
}

.hero-overlay {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  opacity: 0.6;
  filter: grayscale(100%);
}


.hero-overlay canvas {
  width: 100% !important;
  height: 100% !important;
  display: block;
}


.hero-logo {
  font-size: 5rem;
  font-family: 'Cinzel', 'Cormorant', times, serif;
  text-transform: lowercase;
  line-height: 1;
  letter-spacing: -3px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
}


.hero-text {
  position: absolute;
  top: 1rem;
  left: 1rem;
  z-index: 1;
}
*/