#page-hero{
    background-repeat: no-repeat;
    background-position: center;
    padding: 280px 0 120px 0;
    background-size: cover;
    position: relative;
    color: #ffffff;
}

#page-hero .lazy img{
   min-height: 840px;
   width: auto;
   opacity: 0;
}

#page-hero .lazy span{
    transition: opacity 400ms ease-in-out;
    height: calc(100% + 100px);
    position: absolute;
    overflow: hidden;
    width: 100%;
    opacity: 0;
    left: 0;
    top: 0;
}

#page-hero .lazy span.show-image{
    opacity: 1;
}

#page-hero .lazy span img{
    height: 100%;
    width: 100%;
    opacity: 0;
}

#page-hero .skew{
    background-color: #474b56;
}

#page-hero .mask{
    background-color: #000;
    position: absolute;
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
}

#page-hero svg{
  position: absolute;
  height: 9vw;
  width: 100%;
  z-index: 1;
  bottom: 0;
}

#page-hero h1{
    text-shadow: 0px 2px 8px rgba(0,0,0,0.6);
    margin-bottom: 68px;
    line-height: 58px;
    font-weight: 400;
    font-size: 58px;
}

#page-hero .intro{
    min-height: 270px;
    line-height: 38px;
    font-weight: 400;
    max-width: 900px;
    font-size: 30px;
    margin: 0 auto;
    display: table;
}

#page-hero .intro p{
    text-shadow: 0px 2px 8px rgba(0,0,0,0.6);
    margin: 0 auto 30px 0;
    line-height: 28px;
    max-width: 840px;
    font-size: 22px;
}

#page-hero .intro p:last-child{
    margin-bottom: 0;
}

@media screen and (max-width: 768px) {
    #page-hero{
        padding: 180px 0 70px 0;
    }

    #page-hero .intro p{
        margin: 0 auto 30px auto;
        max-width: 640px;
    }

}

@media screen and (max-width: 680px) {
    #page-hero h1{
        margin-bottom: 30px;
        line-height: 46px;
        font-size: 44px;
    }
}

@media screen and (max-width: 460px) {

}