/* This file is used as dependency in:
   ../../modules/sec-device-mockup.module/module.html */

.pwr-sec-mockup {
    padding: 140px 0;
    overflow: hidden;
    position: relative;
    z-index: 0;
}

.pwr-sec-mockup__content {
    width: 40%;
    left: 60%;
    position: relative;
}

.pwr-sec-mockup__content--left {
    left: 0;
}

.pwr-sec-mockup__cta-container {
    margin-top: 40px;
}

.pwr-sec-mockup__title-intro {
    z-index: 1;
}

.pwr-sec-mockup__title + .pwr-sec-mockup__desc {
    margin-top: 20px;
}

.pwr-sec-mockup__title + .pwr-sec-mockup__form {
    margin-top: 40px;
}

.pwr-sec-mockup__desc + .pwr-sec-mockup__form {
    margin-top: 40px;
}

.pwr-sec-mockup__form .hs-submit {
    margin-top: 10px;
}

.pwr-sec-mockup__mockup-wrapper {
    display: flex;
    flex-direction: column;
}

.pwr-sec-mockup__content {
    display: flex;
    flex-direction: column;
}

.pwr-sec-mockup__mockup-wrapper--top {
    justify-content: flex-start;
}

.pwr-sec-mockup__content--top {
    justify-content: flex-start;
}

.pwr-sec-mockup__mockup-wrapper--center {
    justify-content: center;
}

.pwr-sec-mockup__content--center {
    justify-content: center;
}

.pwr-sec-mockup__mockup-wrapper--bottom {
    justify-content: flex-end;
}

.pwr-sec-mockup__content--bottom {
    justify-content: flex-end;
}

.pwr-sec-mockup--mockup-bottom .pwr-sec-mockup__content {
    left: auto;
    width: 100% !important;
}

.pwr-sec-mockup__mockup {
    width: 55vw;
}

.pwr-sec-mockup__mockup--not-fw {
    width: 50%;
}

.pwr-sec-mockup__mockup--right {
    margin-left: auto;
    width: 50vw;
}
.pwr-sec-mockup--mockup-bottom .pwr-sec-mockup__mockup {
    padding-top:80px;
}

.pwr-sec-mockup__mockup-img {
    max-width: 100vw;
    width: 100%;
}


@media (min-width: 992px) {
    .pwr-sec-mockup__content--pos-vert {
        position: absolute;
        z-index: 1;
        top: 50%;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
        width: 100%;
    }
}

@media (max-width: 991px ) {
    .pwr-sec-mockup {
        padding: calc(140px * var(--sp-reduction-factor)) 0;
    }

    .pwr-sec-mockup__mockup--hide-mobile {
        display: none;
    }

    .pwr-sec-mockup--flipped.pwr--flip-container {
        display: flex;
        flex-direction: column-reverse;
    }

    .pwr-sec-mockup__content {
        left: 0 !important;
        text-align: center;
        width: 100% !important;
    }

    .pwr-sec-mockup__cta-container {
        margin-top: calc(40px * var(--sp-reduction-factor));
    }

    .pwr-sec-mockup__title + .pwr-sec-mockup__desc {
        margin-top: calc(20px * var(--sp-reduction-factor));
    }

    .pwr-sec-mockup__mockup {
        margin: 50px auto 0;
    }

    .pwr-sec-mockup--flipped.pwr--flip-container .pwr-sec-mockup__mockup {
        margin: 0 auto 50px;
    }

    .pwr-sec-mockup__mockup--mobile-align-right {
        margin: 50px 0 0 auto;
    }

    .pwr-sec-mockup__mockup--mobile-align-left {
        margin: 50px auto 0 0;
    }

    /* 22.11.23: #1183: Overwrite height set by match height on mobile. */
    .pwr-sec-mockup [data-pwr-mh='sec-mockup-content-height'] {
        height: auto !important;
    }
}

@media (max-width: 575px ) {
    .pwr-sec-mockup__mockup {
        width: 100% !important;
    }
    .pwr-sec-mockup--mockup-bottom .pwr-sec-mockup__mockup {
        padding-top:40px;
    }
}


.pwr-ratio-box {
    position: relative;
    height: 0;
    display: block;
    width: 100%; /* padding-bottom is calculated and rendered in to HTML */
}

.pwr-ratio-box img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
}

.pwr-ratio-box iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
}

.pwr-ratio-box video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
}