// /**
//  * Copyright © Magento, Inc. All rights reserved.
//  * See COPYING.txt for license details.
//  */

//
//  Common
//  _____________________________________________

& when (@media-common = true) {   
    .std .ox-banner,
    .ox-banner{
        display: inline-block;
        max-width: 100%;
        padding: 0;
        margin: 0 auto;
        position: relative;
        contain:paint;
        background:none;
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
        transform: translateZ(0);
        line-height: 0;
        &.big-border{
            border: 15px solid;
        }
        :is(img,video,picture){
            display:block;
            max-width: 100%;
            height: auto;
            &.hover-image{
                position: absolute;
                top: 0;
                left: 0;
                bottom: 0;
                right: 0;
                display:none;
            }
        }
        &:hover{
            :is(img,video,picture){
                &.hover-image{
                    display:block;
                }
            }
        }
        a.ox-banner-link{
            padding: 0;
            background:none;
            display: block;
            width:100%;
        }
        &.ox-img-zoom-hover{
             overflow: visible;
        }
        &.ox-img-zoom-hover-masked{
            contain:paint;
        }
        &:hover{
            .link {
                transform: translateX(10px);
            }
        }
        .link{
            margin-top: 8px;
            line-height: 1;
            display: inline-block;
            padding: 8px 10px;
            font-weight: 800;
            font-size: 14px;
            font-style: normal;
            .lib-css(transition, ~"all 256ms cubic-bezier(0.330, 0.975, 0.245, 0.910)", @_prefix: 1);
            will-change:transform;
        }
    }
    .ox-zoom-hover,
    .ox-zoom-out-hover{
            transition:all 0.6s ease-in-out;            
    }
    .ox-img-zoom-out-hover,
    .ox-img-zoom-hover-masked,
    .ox-img-zoom-hover{
        :is(img,video,picture){
            transition:0.4s ease-in-out;
            transition-property: transform, opacity;
            will-change:transform;
        }
    }
    .ox-img-zoom-hover-masked,
    .ox-img-zoom-hover{
        &:hover{
            :is(img,video,picture){
                transition:all 0.4s ease;
                transform:scale3d(1.04,1.04,1.04);
            }
        }
    }
    .ox-zoom-hover{
        &:hover{
            transition:all 0.4s ease;
            transform:scale3d(1.04,1.04,1.04);
        }
    }
    .ox-zoom-out-hover{
        &:hover{
            transform:scale3d(0.96,0.96,0.96);
        }
    }
    .ox-img-zoom-out-hover {
        &:hover{
            :is(img,video,picture){
                transform:scale3d(0.96,0.96,0.96);
            }
        }
    }

    .ox-banner-text-below{
        .ox-banner-content{
            margin:40px 0;
            line-height: 1.43;
            span{
                text-transform:uppercase;
                font-weight:600;
            }
        }
    }
    .row.ox-links-block,
    .ox-links-block{
        font-size: 13px;
        padding: 100px 30px 0 30px;
        max-width: 1000px;
        margin: 0 auto;
        ul{
            list-style:none;
        }
        a{
            padding:2px 6px 3px;
            margin-left:-3px;
        }
    }
    .fullwidth-background-block{
        background-color: #f6f6f6;
        position: relative;
        &:before{
            content: '';
            position: absolute;
            left: -200%;
            right: -200%;
            top: 0px;
            bottom: 0px;
            display: block;
            background-color: inherit;
        }
        > *{
            position:relative;
            z-index:1;
        }
    }
    

    .owl-carousel{
        .ox-banner{
            &.image-auto{
                width: 100%;
                :is(img,video,picture){
                    width: auto;
                    margin: 0 auto;
                }
            }
        }
    }

    .ox-banner{
        &.image-auto{
            width: 100%;
            :is(img,video,picture){
                width: auto;
                margin: 0 auto;
            }
        }
        &.image-auto-v{
            :is(img,video,picture){
                margin:auto!important;
            }
        }
        &.image-cover{
            display:block;
            width: 100%;
            :is(img,video,picture,.ox-video-wrapper){
                object-fit: cover;
                height: 100%;
                min-width: 100%;
            }
        }
        &.ox-banner-image-bg{
            :is(img,video,picture){
                position:absolute;
            }
            .ox-banner-container{
                display: block;
                padding: 40px;
                position: relative;
            }
            &.v-top {
                .ox-banner-link {
                    display: flex;
                }
                .ox-banner-container{
                    margin-top: auto; 
                }
            }
        }
        &.banner-stretch{
            display:block;
            width: 100%;
            .ox-banner-link{
                width: 100%;
            }
            :is(img,video,picture,.ox-video-wrapper){
                width: 100%;
            }
        }
        &.banner-stretch-v,
        &.banner-stretch-vertical{
            display: flex;

            align-items: stretch;
            height: 100%;
            flex: 1;
            .ox-banner-link{
                height: 100%;
            }
        }
        .ox-banner-link{
            position:relative;
            .overlay-layer{
                display: block;
                position: absolute;
                top: 0;
                left: 0;
                background: rgba(0,0,0,.5);
                opacity:0;
                width: 100%;
                height: 100%;

                transition: opacity .4s ease-in-out;
            }
        }
        &:focus,
        &:hover{
            .ox-banner-link{                    
                .overlay-layer{
                   opacity:1;
                }
            }
        }

        &.ox-banner-content-overlay{
            .ox-banner-container{
                z-index: 2; 
                margin: 0;
                padding: 40px;
                display: block; 
                position: absolute;
                .button + .button{
                    margin-left:3px;
                }
                &.bottom{
                    bottom: 0!important;
                    top: auto!important;
                }
                &.top{
                    top: 0!important;
                    bottom: auto!important;
                }
                &.right{
                    right: 0!important;
                    left: auto!important;
                }
            }
            &.h-center{
                .ox-banner-container{
                    text-align: center; 
                    left: 0; 
                    right: 0;
                    margin-left: auto; 
                    margin-right: auto; 
                }
            }
            &.h-left{
                .ox-banner-container{
                    left: 0; 
                }            
            }
            &.h-right{
                .ox-banner-container{
                    right: 0;
                    text-align: right;
                }
            }
            &.v-top {
                .ox-banner-container{
                    top: 0; 
                }
            }
            &.v-center{
                .ox-banner-link{
                    display: flex !important;
                    align-content: center !important;
                    align-items: center !important;
                }
                .ox-banner-container{
                    top: 50%;
                    transform: translateY(-50%);
                }
            }
            &.v-bottom {
                .ox-banner-container{
                    bottom: 0; 
                }
            }
        }
        .ox-grad-overlay{
            font-size: 0;
            line-height: 0;
            color: transparent;
            text-indent: -9999px;
            width: 100%;
            height: 50%;
            background: linear-gradient(0deg, rgba(40, 40, 40, 0.5) 0%, rgba(40, 40, 40, 0) 100%);
            position: absolute;
            bottom: 0;
            left: 0;
            pointer-events: none;
        }
        .ox-show-hover{
            visibility: hidden;
            opacity: 0;

            transition: all .3s ease-in-out;
        }
        .ox-moveup-hover{
            display:inline-block;

            transition: all .3s ease-in-out;
            transform:translateY(20px) translateZ(0)!important;
        }
        .ox-hideup-hover{
            transition: 0.3s ease;
        }
        &:hover{
            .ox-hideup-hover {
                transform: translateY(-20px);
                opacity: 0;
            }
            .ox-show-hover{
                visibility: visible;
                opacity: 1;
            }
            .ox-moveup-hover{                
                transform:translateY(0) translateZ(0)!important;
            }
        }
    }
    .animated-text--bg{
        padding: 10px 12px;
        position: relative;
        z-index: 1;
        display: inline-block;
        contain:paint;
        white-space: nowrap;
        &:after{
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            transform: scaleX(0);
            transform-origin: left;
            z-index: -1;



            transition: all 256ms cubic-bezier(0.330, 0.975, 0.245, 0.910);
            background:#ffffff;
        }
        &.accent{
            &:after{
                background:@main-color;
            }
        }
        &.animated{
            &:after{
                transform: scaleX(1);
            }
        }
        &.animate-me{
            &:after{
                animation: scalein 0.75s forwards cubic-bezier(0.85,0,0.12,1);                
            }
        }
        > *{
            display:inline-block;
            line-height:0.9; 
            margin:0;
        }
    }
    rs-slide{
        a.button{
            line-height:16px!important;
        }
    }
    rs-slide[data-isactiveslide="true"],
    .active-rs-slide,
    .active-revslide{
        .animated-text--bg{
            &:after{
                transition-delay: 300ms;
                transform: scaleX(1);
            }
        }
    }
    .owl-carousel{
        .product-item{
            .ox-banner{
               width:100%;
               :is(img,video,picture){
                   width:auto;
                   margin: 0 auto;
               }
               &.banner-stretch{
                :is(img,video,picture,.ox-video-wrapper){
                    width:100%;
                }
               }
            }
        }
    }
    .abs-h-center{
        position: absolute;
        left: 50%;
        right:auto;
        translate: -50%;
    }
    .abs-v-center{
        position:absolute;
        top: 50%;
        bottom:auto;
        transform: translateY(-50%);
    }
    .gradient-bg{
        background: rgb(117, 233, 234);
        background: linear-gradient(34deg, rgba(117, 233, 234, 1) 0%, rgba(132, 246, 192, 1) 100%);
    }
    .rubber-tag-m{
        padding: ~"calc(14px + var(--r-padding-m)) var(--r-padding-m)";
        max-width: ~"clamp(130px, calc(6.4vw + 100px), 220px)";
        .-value{
            font-size: var(--r-fs-big);
        }
        .-desc{
            font-size: ~"clamp(13px, calc(0.9vw + 6px), 18px)";
        }
    }
    .abs-negative{
        position: absolute;
        z-index: 3;
        left: ~"calc(-1* clamp(20px, 2.5vw, 55px))";
    }
    .rubber-tag{
        padding: ~"calc(14px + var(--r-padding-s)) var(--r-padding-s)";
        max-width: ~"clamp(100px, calc(6vw + 50px), 160px)";
        font-weight: 500;
        line-height: 1.3;
        .-value{
            display: flex;
            align-items: baseline;
            font-size: var(--r-fs-big);
        }
        .-desc{
            font-size: ~"clamp(12px, calc(0.9vw + 6px), 14px)";
            letter-spacing:0.01em;
        }
    }
    .ox-block-long{
        padding: var(--r-padding);
        row-gap: 20px;
        position: relative;
        display: flex;
        flex-wrap: wrap;
        align-items:center;
    }
}

//
//  Mobile
//  _____________________________________________

.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__sm) {
    .abs-negative{
        left:0;
    }
    .ox-links-block {
        [class*="col-sm-"] {
            margin-bottom:30px;
        }
    }
    .ox-banner{
        &.sm-content-normal{
            &.ox-banner-content-overlay {
                .ox-banner-container{
                    transform:none;
                    position: relative;
                    top:0;
                }
            }
        }
        &.sm-h-center{
            text-align: center;
            margin-left: auto;
            margin-right: auto;
        }
    }
}
.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__s) {
    .ox-banner{
        &.s-content-normal{
            &.ox-banner-content-overlay {
                .ox-banner-container{
                    transform:none;
                    position: relative;
                    top:0;
                }
            }
        }
        &.s-h-center{
            text-align: center;
            margin-left: auto;
            margin-right: auto;
        }
    }
}


.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__s) {
    .std .ox-banner,
    .ox-banner{
        &.big-border{
            border: 30px solid;
        }
    }
}

.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__sm) {
    .ox-banner.ox-banner-content-overlay .ox-banner-container{
        &.medium-padding{
            padding:50px;
        }
        &.big-padding{
            padding:60px;
        }
    }
}
//
//  Desktop
//  _____________________________________________

.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) {
    .ox-banner.ox-banner-content-overlay .ox-banner-container{
        &.medium-padding{
            padding:60px;
        }
        &.big-padding{
            padding:80px;
        }
    }
}