.main-hero {
    position: relative;
}
.main-hero__col {
    padding: 0;
}
.main-hero__figure {
    position: relative;
}
.main-hero__figure::before {
    content: "";
    width: 100%;
    height: 100%;
    display: inline-block;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0.18;
    background-color: #000000;
    pointer-events: none;
}
.main-hero__content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    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;
    pointer-events: none;
}
.main-hero .bttn {
    pointer-events: all;
}
.main-hero__figure {
    font-size: 0;
}

.main-hero__videourl {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    display: inline-block;
}
@media only screen
and (min-width : 961px) {
    .main-hero__content-text {
        max-width: 69.44%;
        margin: 0 auto;
        text-align: center;
    }
    .main-hero__title {
        margin-bottom: 3rem;
    }
    .main-hero .bttn--tpt-white {
        /* width: 19.1rem; */
        height: 6.5rem;
        padding: 0 3rem;
    }
    .main-hero__figure {
        height: 76.8rem;
    }
    .main-hero .icon-arrow {
        margin-left: .9rem;
    }
}
@media only screen
and (max-width : 960px) {
    .main-hero__content-text {
        max-width: 33.5rem;
        margin: 0 auto;
        text-align: center;
    }
    .main-hero__title {
        margin-bottom: 3rem;
    }
    .main-hero .bttn--tpt-white {
        /* width: 17.5rem; */
        height: 6rem;
        padding: 0 2rem;
    }
    .main-hero__figure {
        height: 64.5rem;
    }
    .main-hero .icon-arrow {
        margin-left: 1.2rem;
    }
}
