.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;
       
    }
}





/* BANNER HERO */
.ccc-banner-hero {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    position: relative;
    width: 100%;
    padding: 100px;
    z-index: 8
}


.ccc-banner-hero .btns-cnt {
      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: center;
      -ms-flex-align: center;
      align-items: center;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: center;
      gap:1rem;
      & a {
        width:100%;
      }
 }

.ccc-banner-hero:after {

  position: absolute;
    content: "";
    bottom: 0;
    left: 0;
    width: 100%;
    height: 24px;
    background:var(--ccc-theme-gradient);
    /* background: -webkit-gradient(linear,right top,left top,from(#0155b8),to(#003584));
    background: -webkit-linear-gradient(right,#0155b8,#003584);
    background: -o-linear-gradient(right,#0155b8 0,#003584 100%);
    background: linear-gradient(270deg,#0155b8,#003584); */
    z-index: 7
}

@media only screen and (max-width: 1023px) and (min-width:1px) {
    .ccc-banner-hero {
        padding:50px
    }

    .ccc-banner-hero:after {
        height: 24px
    }
}

@media only screen and (max-width: 767px) and (min-width:1px) {
    .ccc-banner-hero {
        padding:0 0 20px
    }

    .ccc-banner-hero:after {
        height: 17px
    }
}

.ccc-banner-hero .max-width {
    position: relative;
    z-index: 5;
    display: block;
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
}

.ccc-banner-hero .ccc-banner-hero-box {
    background: #fff;
    /* padding: 70px; */
    padding: 50px; 
    max-width: 680px;
     box-shadow:var(--ccc-shadow-elevation-3);
}

@media only screen and (max-width: 1023px) and (min-width:1px) {
    .ccc-banner-hero .ccc-banner-hero-box {
        padding:40px;
        max-width: 420px
    }
}

@media only screen and (max-width: 767px) and (min-width:1px) {
    .ccc-banner-hero .ccc-banner-hero-box {
        padding:22px 20px 47px;
        max-width: 100%
    }
}

.ccc-banner-hero .ccc-banner-hero-box .logo {
    position: relative;
    width: 335px;
    height: 79px;
    margin: 0 0 40px
}

@media only screen and (max-width: 1023px) and (min-width:1px) {
    .ccc-banner-hero .ccc-banner-hero-box .logo {
        width:182px;
        height: auto;
        margin: 0
    }
}

@media only screen and (max-width: 767px) and (min-width:1px) {
    .ccc-banner-hero .ccc-banner-hero-box .logo {
        width:150px;
        height: auto;
        display: none
    }
}

.ccc-banner-hero .ccc-banner-hero-box .logo span {
    position: absolute;
    top: 0;
    left: 0;
    text-indent: -9999px
}

.ccc-banner-hero .ccc-banner-hero-box .logo img,.ccc-banner-hero .ccc-banner-hero-box .logo svg {
    width: 335px;
    height: 79px
}

@media only screen and (max-width: 1023px) and (min-width:1px) {
    .ccc-banner-hero .ccc-banner-hero-box .logo img,.ccc-banner-hero .ccc-banner-hero-box .logo svg {
        width:182px;
        height: auto
    }
}

@media only screen and (max-width: 767px) and (min-width:1px) {
    .ccc-banner-hero .ccc-banner-hero-box .logo img,.ccc-banner-hero .ccc-banner-hero-box .logo svg {
        width:150px;
        height: auto
    }
}

.ccc-banner-hero .ccc-banner-hero-box h1 {
    /* font-family: MARTIN;
    font-size: 105px ;
    font-size: 6.5625rem !important;
    line-height: 95px;
    line-height: 5.9375rem !important; */
    font-family: var(--ccc-font-family-bioRhyme);
    font-size: 4rem !important;
    line-height: 1 !important;
    text-transform: unset;

    color: #0055b8;
    padding-right: 120px;
    margin-bottom: 30px;
    /* text-transform: uppercase; */
    margin-block-start: 0 !important;
    margin-block-end: 0 !important;
}

@media only screen and (max-width: 1023px) and (min-width:1px) {
    .ccc-banner-hero .ccc-banner-hero-box h1 {
        font-size:67px;
        font-size: 4.1875rem !important;
        line-height: 54px;
        line-height: 3.375rem !important;
        padding-right: 65px;
        margin-bottom: 20px
    }
}

@media only screen and (max-width: 767px) and (min-width:1px) {
    .ccc-banner-hero .ccc-banner-hero-box h1 {
        font-size:70px;
        font-size: 4.375rem !important;
        line-height: 60px;
        line-height: 3.75rem !important;
        padding-right: 0;
        margin-bottom: 25px;
        margin-top: 0
    }
}

.ccc-banner-hero .ccc-banner-hero-box .subheader {
    font-family: var(--ccc-font-family-bioRhyme);
    font-size: 30px;
    font-size: 1.875rem;
    line-height: 41px;
    line-height: 2.5625rem;
    color: #0055b8;
    margin-top: 30px
}

@media only screen and (max-width: 1023px) and (min-width:1px) {
    .ccc-banner-hero .ccc-banner-hero-box .subheader {
        font-size:20px;
        font-size: 1.25rem;
        line-height: 22px;
        line-height: 1.375rem;
        margin-top: 20px;
        display: none
    }
}

@media only screen and (max-width: 767px) and (min-width:1px) {
    .ccc-banner-hero .ccc-banner-hero-box .subheader {
        font-size:13px;
        font-size: .8125rem;
        line-height: 16px;
        line-height: 1rem;
        display: none
    }
}

.ccc-banner-hero .ccc-banner-hero-box .warning {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    position: relative;
    margin: 15px auto 55px 0;
    padding: 8px 18px 8px 38px;
    /* background: -webkit-gradient(linear,left top,right top,color-stop(25%,#cddb00),color-stop(96%,#cddb00));
    background: -webkit-linear-gradient(left,#cddb00 25%,#cddb00 96%);
    background: -o-linear-gradient(left,#cddb00 25%,#cddb00 96%);
    background: linear-gradient(90deg,#cddb00 25%,#cddb00 96%); */
    font-family: 'Gibson','Open Sans';
    font-size: 17px;
    font-size: 1.0625rem;
    line-height: 23px;
    line-height: 1.4375rem;
    color: #000;
    border-radius: 4px
}

@media only screen and (max-width: 1023px) and (min-width:1px) {
    .ccc-banner-hero .ccc-banner-hero-box .warning {
        font-size:13px;
        font-size: .8125rem;
        line-height: 19px;
        line-height: 1.1875rem;
        margin: 15px auto 30px 0
    }
}

@media only screen and (max-width: 767px) and (min-width:1px) {
    .ccc-banner-hero .ccc-banner-hero-box .warning {
        font-size:12px;
        font-size: .75rem;
        line-height: 17px;
        line-height: 1.0625rem;
        width: 100%;
        margin: 33px 0 15px;
        padding: 9px 8px 8px 22px
    }
}

.ccc-banner-hero .ccc-banner-hero-box .warning:before {
    position: absolute;
    content: "";
    top: 50%;
    left: 8px;
    -webkit-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);

    font-family: "Font Awesome 5 Free";
    content: "\f05a";
    color: var(--ccc-color-unity);
    font-weight: bold; 

}

@media only screen and (max-width: 767px) and (min-width:1px) {
    .ccc-banner-hero .ccc-banner-hero-box .warning:before {
        width:14px;
        height: 14px;
        left: 4px;
        background-size: 100%
    }
}

@media only screen and (max-width: 1023px) and (min-width:1px) {
    .ccc-banner-hero .ccc-banner-hero-box .btns-cnt {
        -webkit-box-orient:vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        max-width: 270px
    }

    .ccc-banner-hero .ccc-banner-hero-box .btns-cnt .btn {
        width: 100%
    }

    .ccc-banner-hero .ccc-banner-hero-box .btns-cnt .btn:first-child {
        margin: 0 0 20px!important
    }

    .ccc-banner-hero .ccc-banner-hero-box .btns-cnt .btn:last-child {
        margin: 0!important
    }
}

@media only screen and (max-width: 767px) and (min-width:1px) {
    .ccc-banner-hero .ccc-banner-hero-box .btns-cnt {
        max-width:none;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column
    }

    .ccc-banner-hero .ccc-banner-hero-box .btns-cnt .btn {
        width: 100%;
        margin-bottom: 8px
    }

    .ccc-banner-hero .ccc-banner-hero-box .btns-cnt a:first-child {
        margin: 0 0 8px!important
    }

    .ccc-banner-hero .ccc-banner-hero-box .btns-cnt a:last-child {
        margin: 0!important
    }
}


.ccc-banner-hero .bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    -o-object-fit: cover;
    object-fit: cover
}

@media only screen and (max-width: 767px) and (min-width:1px) {
    .ccc-banner-hero .bg {
        display:none
    }
}