header {
  h2 {
    font-size: 1rem;
    @include media-breakpoint-up(sm) {
      font-size: 1.5rem;
    }
    @include media-breakpoint-up(lg) {
      font-size: 1.7rem;
    }
  }

  h1 {
    font-size: 2rem;
    @include media-breakpoint-up(sm) {
      font-size: 4rem;
    }
  }

  h1,
  h2 {
    color: $white;
    text-shadow: 0 0 10px #000;
  }
}

.page-header {
  height: 300px;
  background-color: $primary2;
  background-image: url("/bg_tips.webp");
  background-size: auto 130%;
  background-size: cover;
  background-position: center bottom;
  position: relative;

  &.bg-img-none{
    background-image: none;
  }

  .header-headings {
    margin-top: 25%;
  }

  &.dynamic-background {
    &:before {
      position: absolute;
      content: "";
      background-color: $primary;
      height: 100%;
      width: 100%;
      z-index: 0;
      opacity: .15;
    }
  }

  @include media-breakpoint-up(lg) {
    height: 350px;
    background-size: 100% auto;
    .header-headings {
      margin-top: 15%;
    }
  }
  @include media-breakpoint-up(xl) {
    height: 450px;
  }

  button {
    border-color: white;
    color: white;
    margin-top: $size-medium;
    text-transform: lowercase;
    text-shadow: 0 0 2px #000;

    &:active, &:hover, &:focus {
      background-color: white;
      color: $primary;
      border-color: white;
      text-shadow: none;
    }
  }
}

.page-header,
.landing-header {
  background-repeat: no-repeat;
  position: relative;
  overflow: visible;

  > .container {
    position: relative;
    height: 100%;
  }
}

.landing-header {
  height: 65vh;
  min-height: 450px;
  background-color: $primary2;
  background-repeat: no-repeat;
  @include media-breakpoint-up(lg) {
    height: 100vh;
  }

  h1, h2 {
    transition: all .3s ease-in-out;
    text-shadow: none;
  }

  h1 {
    background-color: rgba($primary, .75);
    padding: 2.25rem;
    @include media-breakpoint-down(lg) {
      padding: 1rem;
    }
  }

  h2 {
    background-color: rgba(white, .75);
    padding: 2rem;
    color: black;
    @include media-breakpoint-down(lg) {
      padding: .9rem;
    }
  }

  .header-headings-outer {
    top: 0;
    left: 0;
    right: 0;
  }

  .video-outer {
    height: 100%;
    overflow: hidden;
    opacity: .9;
  }

  video {
    height: 100%;
    width: auto;
    //@include media-breakpoint-up(lg) {
    @media screen and (min-width: 1024px) {
      height: auto;
      width: 100%;
    }
    @media (orientation: landscape) and (max-width: 1024px) {
      height: auto;
      width: 100%;
    }
  }

  .header-headings {
    margin-top: 5%;

    &:hover {
      h1 {
        background-color: rgba($primary2, 0);
        padding: 1.25rem;
      }

      h2 {
        background-color: rgba($primary, 0);
        padding: 1rem;
        color: white;
      }
    }
  }

  /*
    &:before,
    &:after {
      content: "";
      position: absolute;
      background-repeat: no-repeat;
      opacity: .15;
      width: 100%;
    }
    &:before{
      height: 100%;
      background-color: rgba(2, 128, 144, .15);
      background-image: url("/contour_1.png");
      background-position: right bottom;
      background-size: auto 100%;
      z-index: 0;
    }
    &:after{
      height: 140%;
      top: 0;
      background-image: url("/contour_2.png");
      background-position: right top;
      background-size: auto 100%;
      z-index: -1;
      @include media-breakpoint-down(lg){
        opacity: .1;
      }
    }
    */
}

.icon-scroll,
.icon-scroll:before {
  position: absolute;
  left: 50%;
}

.icon-scroll {
  width: 40px;
  height: 70px;
  margin-left: -20px;
  bottom: 10px;
  margin-top: -35px;
  box-shadow: inset 0 0 0 1px #fff;
  border-radius: 25px;

  &:before {
    content: '';
    width: 8px;
    height: 8px;
    background: #fff;
    margin-left: -4px;
    top: 8px;
    border-radius: 4px;
    animation-duration: 1.5s;
    animation-iteration-count: infinite;
    animation-name: scroll;
  }
}

@-moz-keyframes scroll {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateY(46px);
  }
}

@-webkit-keyframes scroll {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateY(46px);
  }
}

@-o-keyframes scroll {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateY(46px);
  }
}

@keyframes scroll {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateY(46px);
  }
}