/* Banner */
.page-banner{ padding: 40px 70px; height: 300px; min-height: 18vw; background: $black; position: relative; text-align: left; display: flex; align-items: flex-end;

    .overlay{background: $black; opacity: 0.5;}
    &-bg-image{@include bgcover();}

    .page-banner-content{position: relative;}

    &:not(.page-banner-large){
        h1{font-size: 75px; margin: 0;}
    }

    &-bg-video{overflow:hidden;
        video { background-size: cover; height: auto; left: 50%; min-height: 100%; min-width: 100%; position: absolute; top: 50%; transform: translateX(-50%) translateY(-50%); width: auto; }
    }

    &-large{ min-height: 760px; justify-content: flex-end; padding: 200px 0 0;
        .overlay{display: none;}
        .page-banner-content{padding: 50px 150px 50px 120px; max-width:860px; margin: 0 -100px -50px 0; position: relative;
            &:before{content:""; @include fullblock(); background: $black url(images/bg-wave.png); transform: skewX(-15deg);}
            &-inner{position: relative;}
            .h1{font-size: 45px;}
            .lead{color: $white; margin: 20px 0 25px; font-size: 17px;
                a{color: $blue;}
            }
        }
    }

    .scroll-indicator{ height: 50px; width: 34px; border: 3px solid $white; border-radius: 30px; position: absolute; bottom: 50px; left: 30px; color: $white; text-align: center;
        &:before{content:""; position: absolute; left: 50%; top: 10px; width: 4px; height: 6px; border-radius: 10px; background: $white; margin-left: -2px; animation: scrollline infinite ease-in-out 2s;}
        &:after{content:"Scroll"; font-family: $title; text-transform: uppercase; position: absolute; left: -10px; right: -10px; bottom: -20px; font-size: 9px;}
    }

}

@keyframes scrollline {
  0%, 100% {transform:translate3d(0,0,0);}
  70%  {transform:translate3d(0,10px,0);}
}