/* This file is used as dependency in:
   ../../modules/sub-video-box.module/module.html 
   ../../modules/sec-video.module/module.html 
   ../../modules/sec-video-boxes.module/module.html */

.pwr-sec-video {
    overflow: hidden;
    position: relative;
    z-index: 0;
}

.pwr-sec-video__wrapper--content {
    padding: 100px 0 130px;
}

.pwr-sec-video__content {
    display: inline-block;
    left: 50%;
    max-width: calc( 50% - 20px);
    padding-right: 20px;
    position: relative;
}

.pwr-sec-video__link {
    color: var(--clr-text-lt);
    cursor: pointer;
    display: inline-block;
}

.pwr-sec-video__link:hover {
    color: var(--clr-text-lt);
    display: inline-block;
}

.pwr-sec-video__link--layout-title {
    padding: 50px 80px;
}

.pwr--dark .pwr-sec-video__link {
    color: var(--clr-text-dk);
}

.pwr--dark .pwr-sec-video__link:hover {
    color: var(--clr-text-dk);
}

.pwr-sec-video__button {
    background-color: var(--clr-base-lt);
    border-radius: 100%;
    cursor: pointer;
    font-size: 32px;
    height: 140px;
    left: 50%;
    line-height: 140px;
    position: absolute;
    text-align: center;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: 140px;
}

.pwr-sec-video__button--small {
    font-size: 27px;
    height: 120px;
    line-height: 120px;
    width: 120px;
}

.pwr-sec-video__button--left {
    left: 25%;
}

.pwr-sec-video__icon {
    display: inline-block;
    fill: currentColor;
}

.pwr-sec-video__icon--as-button {
    color: var(--clr-primary);
    vertical-align: middle;
}

.pwr-sec-video__wrapper .pwr-sec-video__button:hover {
    -webkit-transform: translate(-50%, -50%) scale(1.25);
    transform: translate(-50%, -50%) scale(1.25);
}

.pwr-sec-video__title {
    font-family: var(--ff-accent);
    font-size: 24px;
    font-weight: 700;
    line-height: 1.4em;
}

.pwr-sec-video__title:before {
    content: '|';
    font-size: 34px;
    font-weight: 500;
    padding: 0 20px;
    position: relative;
    top: 1px;
}

.pwr-sec-video-boxes {
    padding: 135px 0;
    position: relative;
    z-index: 1;
}

.pwr-sec-video-boxes__intro-sec {
    margin-bottom: 70px;
    position: relative;
}

.pwr-sec-video-boxes:not(.pwr-sec-video-boxes--pagination) .swiper-button-next {
    top: 50% !important;
}

.pwr-sec-video-boxes:not(.pwr-sec-video-boxes--pagination) .swiper-button-prev {
    top: 50% !important;
}


@media (max-width: 767px ) {
    .pwr-sec-video__link--layout-title {
        padding: 40px;
    }

    .pwr-sec-video__wrapper--content {
        padding: calc(100px * var(--sp-reduction-factor)) 0 calc(130px * var(--sp-reduction-factor));
    }

    .pwr-sec-video__content {
        left: 0;
        margin: 0 40px;
        max-width: 100%;
    }

    .pwr-sec-video__wrapper--content .pwr-sec-video__link {
        width: 100%;
    }

    .pwr-sec-video__wrapper--content .pwr-sec-video__button--left {
        margin: 60px 0 20px;
        left: 50%;
        position: relative;
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
        top: auto;
    }

    .pwr-sec-video-boxes {
        padding: calc(135px * var(--sp-reduction-factor)) 0;
    }

    .pwr-sec-video-boxes__intro-sec {
        margin-bottom: calc(70px * var(--sp-reduction-factor));
    }
}

@media (max-width: 575px ) {
    .pwr-sec-video__wrapper--title {
        max-height: 300px;
    }

    .pwr-sec-video__wrapper--button {
        max-height: 300px;
    }

    .pwr-sec-video__button {
        font-size: 27px;
        height: 100px;
        line-height: 100px;
        width: 100px;
    }

    .pwr-sec-video__button--small {
        font-size: 27px;
        height: 100px;
        line-height: 100px;
        width: 100px;
    }
}