.overlay-video {
  position: absolute;
  right: 0;
  bottom: 0;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background-size: 100% 100%;
  background-color: black; /* in case the video doesn't fit the whole page*/
  /* background-image: our video ; */
  background-position: center center;
  background-size: cover;
  object-fit: cover; /*cover video background */
  z-index: -100;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* Layer with position absolute in order to have it over the video */
#section0 .layer {
  /*
            * Preventing flicker on some browsers
            * See http://stackoverflow.com/a/36671466/1081396  or issue #183
            */
  -webkit-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

.section-hero .button{
   margin-top: 10px;
}

.hero-wrapper {
   margin: 0 10%;
   text-align: center;
}

.hero-wrapper h1 {
  color: #0080A4;
  text-transform: uppercase;
  font-weight: 600;
  font-size: 2.5rem;
  margin: 0;
}

.hero-wrapper h3 {
color: #404040;
  text-transform: uppercase;
   margin: 0;
}

/* Планшеты (и чуть больше) — начиная с 576px */
@media only screen and (min-width: 576px) {

}

/* Планшеты и небольшие десктопы — начиная с 768px */
@media only screen and (min-width: 768px) {
.hero-wrapper h1 {
	font-size: 4rem;
}
}

/* Десктопы — начиная с 992px */
@media only screen and (min-width: 992px) {
.hero-wrapper {
   margin: 0 30%;
}
}
/* Большие десктопы — начиная с 1200px */
@media only screen and (min-width: 1200px) {
.hero-wrapper h1 {
	font-size: 6rem;
}
}