.hero {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    position: relative;
    width: 100%;
    z-index: 8;
    margin: 0 0 50px
}

@media only screen and (max-width: 1024px) and (min-width:1px) {
    .hero {
        -webkit-box-orient:vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        margin: 0 0 40px
    }
}

@media only screen and (max-width: 767px) and (min-width:1px) {
    .hero {
        margin:0 0 32px
    }
}




.hero:after {
    position: absolute;
    content: "";
    top: 40px;
    left: 0;
    width: calc(100% - 426px);
    height: calc(100% - 40px);
    
    background:var(--ccc-hero-gradient);
    z-index: 1
}

@media only screen and (max-width: 1300px) and (min-width:1px) {
    .hero:after {
        width:calc(100% - 326px)
    }
}

@media only screen and (max-width: 1200px) and (min-width:1px) {
    .hero:after {
        width:calc(100% - 226px)
    }
}

@media only screen and (max-width: 1080px) and (min-width:1px) {
    .hero:after {
        width:calc(100% - 126px)
    }
}

@media only screen and (max-width: 1024px) and (min-width:1px) {
    .hero:after {
        top:0;
        width: 100%
    }
}

.hero .hero-content {
    position: relative;
    z-index: 5;
    padding: 120px 75px 80px 120px;
    width: 100%
}

@media only screen and (max-width: 1080px) and (min-width:1px) {
    .hero .hero-content {
        padding:64px
    }
}

@media only screen and (max-width: 767px) and (min-width:1px) {
    .hero .hero-content {
        padding:40px 32px
    }
}

.hero .hero-content h1 {
    color: #fff;
    margin-bottom: 30px;
    line-height: 4.3125rem !important;
}

@media only screen and (max-width: 1200px) and (min-width:1px) {
    .hero .hero-content h1 {
        font-size:56px;
        font-size: 3.5rem !important;
        line-height: 70px;
        line-height: 4.375rem !important;
    }
}

@media only screen and (max-width: 767px) and (min-width:1px) {
    .hero .hero-content h1 {
        font-size:48px;
        font-size: 3rem !important;
        line-height: 60px;
        line-height: 3.75rem
    }
}

.hero .hero-content .subheader {
    color: #fff;
    margin-bottom: 16px
}

.hero .hero-content .copy,.hero .hero-content .copy p {
    color: #fff
}

.hero-video .hero-content .subheader,
.hero-video .hero-content .copy,
.hero-vido .hero-content .copy p {
    color: #fff
}

.hero-content .btn-cnt {
    margin-top: 40px;;
    display: inline-flex;
    flex-direction: row;
    align-items: stretch;
    column-gap:15px;        
}



.hero .photo {
    position: relative;
    z-index: 6;
    width: 100%;
    min-width: 630px;
    max-width: 630px;
    -webkit-clip-path: polygon(32% 0,100% 0,100% 90%,32% 90%,0 100%,0 16%);
    clip-path: polygon(32% 0,100% 0,100% 90%,32% 90%,0 100%,0 16%)
}

@media only screen and (max-width: 1300px) and (min-width:1px) {
    .hero .photo {
        min-width:530px
    }
}

@media only screen and (max-width: 1200px) and (min-width:1px) {
    .hero .photo {
        min-width:430px
    }
}

@media only screen and (max-width: 1080px) and (min-width:1px) {
    .hero .photo {
        min-width:330px
    }
}

@media only screen and (max-width: 1024px) and (min-width:1px) {
    .hero .photo {
        min-width:100%;
        height: 310px;
        -webkit-clip-path: none;
        clip-path: none
    }
}

.hero .photo img {
    width: 100%;
    height: 100%;
    z-index: 1;
    -o-object-fit: cover;
    object-fit: cover
}

.hero-video {
    position: relative
}

.hero-video .pause-play {
    position: absolute;
    bottom: 256px;
    right: 120px;
    width: 78px;
    height: 78px;
    border-radius: 100%;
    padding: 0;
    background: transparent;
    border: 4px solid #fff;
    z-index: 5;
    -webkit-transition: .4s;
    -o-transition: .4s;
    transition: .4s;
    cursor: pointer
}

@media only screen and (max-width: 1280px) and (min-width:1px) {
    .hero-video .pause-play {
        right:64px
    }
}

@media only screen and (max-width: 1024px) and (min-width:1px) {
    .hero-video .pause-play {
        bottom:32px
    }
}

@media only screen and (max-width: 1080px) and (min-width:1px) {
    .hero-video .pause-play {
        right:8px;
        -webkit-transform: scale(.7);
        -o-transform: scale(.7);
        transform: scale(.7)
    }
}

@media only screen and (max-width: 767px) and (min-width:1px) {
    .hero-video .pause-play {
        bottom:62px;
        -webkit-transform: scale(.5);
        -o-transform: scale(.5);
        transform: scale(.5)
    }
}

.hero-video .pause-play:hover {
    opacity: .6
}

.hero-video .pause-play span {
    position: absolute;
    top: 0;
    left: 0;
    text-indent: -9999px
}

.hero-video .pause-play.playing:before {
    position: absolute;
    content: "";
    top: 17px;
    left: 22px;
    width: 8px;
    height: 37px;
    background: #fff
}

.hero-video .pause-play.playing:after {
    position: absolute;
    content: "";
    top: 17px;
    right: 22px;
    width: 8px;
    height: 37px;
    background: #fff
}

.hero-video .pause-play.paused:before {
    position: absolute;
    content: "";
    top: 50%;
    left: calc(50% + 2px);
    width: 0;
    height: 0;
    border-top: 15px solid transparent;
    border-left: 23px solid #fff;
    border-bottom: 15px solid transparent;
    -webkit-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%)
}

.hero-video .hero-content {
    position: absolute;
    bottom: 0;
    left: 100px;
    width: calc(100% - 100px);
    max-width: 810px;
    padding: 72px 72px 72px 0;
    background:var(--ccc-hero-gradient);
    z-index: 6
}

@media only screen and (max-width: 1024px) and (min-width:1px) {
    .hero-video .hero-content {
        position:relative;
        padding: 32px 32px 32px 0;
        width: calc(100% - 80px);
        left: 80px;
        bottom: 46px
    }
}

@media only screen and (max-width: 767px) and (min-width:1px) {
    .hero-video .hero-content {
        padding:24px 24px 24px 0;
        width: calc(100% - 32px);
        left: 32px;
        bottom: 65px
    }
}

.hero-video .hero-content:before {
    position: absolute;
    content: "";
    top: 14px;
    left: -100px;
    width: 101px;
    height: 100%;
     background:var(--ccc-hero-gradient);
    -webkit-transform: skewY(-16deg);
    -o-transform: skewY(-16deg);
    transform: skewY(-16deg)
}

@media only screen and (max-width: 1024px) and (min-width:1px) {
    .hero-video .hero-content:before {
        width:81px;
        left: -80px;
        top: 11px
    }
}

@media only screen and (max-width: 767px) and (min-width:1px) {
    .hero-video .hero-content:before {
        width:33px;
        left: -32px;
        top: 16px;
        -webkit-transform: skewY(-45deg);
        -o-transform: skewY(-45deg);
        transform: skewY(-45deg)
    }
}

.hero-video .hero-content h1 {
    color: #fff;
    margin: 0 0 40px
}

@media only screen and (max-width: 1024px) and (min-width:1px) {
    .hero-video .hero-content h1 {
        font-size:48px;
        font-size: 3rem !important;
        line-height: 64px;
        line-height: 4rem
    }
}

@media only screen and (max-width: 767px) and (min-width:1px) {
    .hero-video .hero-content h1 {
        font-size:32px;
        font-size: 2rem !important;
        line-height: 48px;
        line-height: 3rem
    }
}

.hero-video .video-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 860px;
    max-height: 636px;
    z-index: 5;
    padding-bottom: 224px;
    overflow: hidden
}

@media only screen and (max-width: 1024px) and (min-width:1px) {
    .hero-video .video-wrapper {
        min-height:460px;
        padding-bottom: 24px
    }
}

@media only screen and (max-width: 767px) and (min-width:1px) {
    .hero-video .video-wrapper {
        min-height:268px;
        padding-bottom: 32px
    }
}

.hero-video .video-wrapper .video-cnt {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    min-height: 650px
}

@media only screen and (max-width: 1024px) and (min-width:1px) {
    .hero-video .video-wrapper .video-cnt {
        min-height:436px
    }
}

@media only screen and (max-width: 767px) and (min-width:1px) {
    .hero-video .video-wrapper .video-cnt {
        min-height:236px
    }
}

.hero-video .video-wrapper .video-cnt:after {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: -webkit-gradient(linear,left bottom,left top,from(rgba(52,52,52,.75)),color-stop(65.41%,rgba(52,52,52,0)));
    background: -webkit-linear-gradient(bottom,rgba(52,52,52,.75),rgba(52,52,52,0) 65.41%);
    background: -o-linear-gradient(bottom,rgba(52,52,52,.75) 0,rgba(52,52,52,0) 65.41%);
    background: linear-gradient(1turn,rgba(52,52,52,.75),rgba(52,52,52,0) 65.41%);
    z-index: 3
}

.hero-video .video-wrapper .video-cnt video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    z-index: 2;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    will-change: transform;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden
}

.hero-video .video-wrapper .video-cnt .banner-video {
    background-position: top;
    background-repeat: no-repeat;
    left: 0;
    overflow: hidden;
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0
}

.hero-video .video-wrapper .video-cnt .player-wrapper {
    bottom: 0;
    height: 100%;
    left: 0;
    min-width: 100%;
    overflow: hidden;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 0
}

.hero-video .video-wrapper .video-cnt iframe {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100vw;
    height: 100vh;
    -webkit-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%)
}

@media (min-aspect-ratio: 16/9) {
    .hero-video .video-wrapper .video-cnt .player-wrapper iframe {
        height:56.25vw
    }
}

@media (max-aspect-ratio: 16/9) {
    .hero-video .video-wrapper .video-cnt .player-wrapper iframe {
        width:177.78vh
    }
}

.hero-video .photo {
    position: relative;
    width: 100%;
    height: 860px;
    z-index: 2;
    padding-bottom: 224px
}

@media only screen and (max-width: 1024px) and (min-width:1px) {
    .hero-video .photo {
        height:460px;
        padding-bottom: 0
    }
}

@media only screen and (max-width: 767px) and (min-width:1px) {
    .hero-video .photo {
        height:268px
    }
}

.hero-video .photo img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover
}


/*
.hero .btn-reverse, 
.hero-video .btn-reverse {
    background: #fff;
    border: 2px solid #fff;
    color: var(--ccc-hero-gradient) !important;
}

.hero .btn-reverse:hover,
.hero-video .btn-reverse:hover
 {
    background: transparent;
    color: #fff !important;
    border: 2px solid #fff;
}

.btn-knockout-reverse {
    color: #fff !important;
    background: transparent;
    border: 2px solid #fff;
}
 .btn-knockout-reverse:hover,
 .btn-knockout-reverse:focus,
 .btn-knockout-reverse:hover:focus
  {
    background: #f2f2ef;
    color:  var(--ccc-hero-gradient)!important;
    border: 2px solid #fff;
}
*/

@media only screen and (max-width: 1024px) and (min-width: 1px) {
    .hero-video .video-wrapper {
        height:auto !important;
       
    }
}