#video-bg-wrapper {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

#video-bg-inner,
#video-bg-inner iframe  {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-position: center;
  object-position: center;
  -o-object-fit: cover;
  object-fit: cover;
}

@media (max-aspect-ratio: 16 / 9) {
  #video-bg-inner {
    width: 300%;
    left: -100%;
  }
}
@media (min-aspect-ratio: 16/9) {
  #video-bg-inner {
    height: 300%;
    top: -100%;
  }
}
@media (max-width: 420px) {
  #video-bg-inner {
    width: 420%;
  }
}
.content {
  /* position: fixed; */
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  color: #f1f1f1;
  width: 100%;
  padding: 20px;
}

#myBtn {
  width: 200px;
  font-size: 18px;
  padding: 10px;
  border: none;
  background: #000;
  color: #fff;
  cursor: pointer;
}

#myBtn:hover {
  background: #ddd;
  color: black;
}

.embed-responsive iframe {
  pointer-events: none;
}

.embed-responsive {
  position: relative;
}

.embed-responsive iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

.banner-principal .embed-responsive-16by9 {
  height: 635px;
  min-height: 635px;
}

.banner-principal .carousel-caption {
  z-index: 2;
  bottom: 7rem;
}

.banner-principal .carousel-caption .subtitulo,
.banner-principal .carousel-caption .descricao {
  font-size: 31px;
  font-weight: 200;
}

.banner-principal .carousel-caption .titulo {
  font-size: 71px;
  font-weight: 400;
  line-height: 0.8;
  
  /* Ensures the content is not revealed until the animation */
  border-right: .02em solid #D18360;
  /* The typwriter cursor */
  /* Keeps the content on a single line */
  margin: 0 auto 14px;
  /* Gives that scrolling effect as the typing happens */
  animation:
    typing 2.5s steps(8, end),
    blink-caret .5s step-end infinite;
}

/* The typing effect */
@keyframes typing {
  from {
    width: 0
  }

  to {
    width: 100%
  }
}

/* The typewriter cursor effect */
@keyframes blink-caret {

  from,
  to {
    border-color: transparent
  }

  50% {
    border-color: #D18360
  }
}

.banner-principal .nav-down {
  position: absolute;
  bottom: 1rem;
  left: 15%;
  right: 15%;
  margin: 0 auto;
  animation: bounce-down 1.5s infinite;
  display: block;
  margin: 0 auto;
  margin-top: 1rem;
  transition: opacity 0.3s ease;
}

@keyframes bounce-down {

  0%,
  20%,
  50%,
  80%,
  100% {
    transform: translateY(0);
  }

  40% {
    transform: translateY(8px);
  }

  60% {
    transform: translateY(4px);
  }
}

.overlay-container {
  position: relative;
}

.overlay-container iframe,
.overlay-container img {
  display: block;
  width: 100%;
  height: auto;
}

.overlay-bg {
  position: absolute;
  inset: 0;
  background-color: #2A365099;
  z-index: 1;
  pointer-events: none;
}

@media (min-width: 991px) {
  .banner-principal .embed-responsive-16by9 {
    height: 835px;
    min-height: 835px;
  }

  .banner-principal .carousel-caption .subtitulo,
  .banner-principal .carousel-caption .descricao {
    font-size: 36px;
    font-weight: 200;
    line-height: 0.7;
    margin: 0;
  }

  .banner-principal .carousel-caption .titulo {
    font-size: 128px;
    font-weight: 400;
    line-height: 1.5;
	  white-space: nowrap;
	  overflow: hidden;
	  margin: 0 auto;
  }
}