/* #
#
#
#
GLOABL SETTINGS
#
#
#
# */

@brand-primary: #FF7A00;
@brand-secondary: #333;
@color-on-brand-primary: white;
@color-on-brand-secondary: white;
@global-space: 10px;
@xtlive-block-space: @global-space * 2;



.transition (@transition) {
    -webkit-transition: @transition;
    -moz-transition: @transition;
    -ms-transition: @transition;
    -o-transition: @transition;
}

.transform(@string) {
    -webkit-transform: @string;
    -moz-transform: @string;
    -ms-transform: @string;
    -o-transform: @string;
}

.xtlive {
    .xtlive-wrap {
        width: @container-lg;
        margin: 0 auto;
        @media @md {
            width: @container-md;
        }
        @media @sm {
            width: @container-sm;
        }
        @media @xs {
            width: auto;
        }
    }
}

.xtlive.xtlive-fluid {
    .xtlive-wrap {
        width: auto!important;
        .container-fluid {
            padding-left: 0;
            padding-right: 0;
        }
    }
    .jumbo-inner {
        width: @container-lg - @grid-gutter-width;
        margin: 0 auto;
        @media @md {
            width: @container-md - @grid-gutter-width;
        }
        @media @sm {
            width: @container-sm - @grid-gutter-width;
        }
        @media @xs {
            width: auto;
        }
    }
}

.container+.xtlive-slider-fluid {
    margin-top: -31px;
}

.xtlive {
    .img-responsive {
        width: 100%;
    }
}

.btn-xtlive {
    &:extend(.btn all);
    &:extend(.btn-primary all);
}

.btn-xtlive-big {
    &:extend(.btn all);
    &:extend(.btn-primary all);
    &:extend(.btn-lg all);
}

.xtlive {
    .xtlive-block {
        overflow-wrap: break-word;
        word-wrap: break-word;
        -webkit-hyphens: auto;
        -moz-hyphens: auto;
        -ms-hyphens: auto;
        hyphens: auto;
        display: inline-block;
        display: block;
        margin-bottom: @xtlive-block-space;
    }
    .xtlive-block>:last-child,
    .xtlive-block>:last-child>:last-child,
    .xtlive-block>:last-child>:last-child>:last-child {
        margin-bottom: 0!important;
    }
    .xtlive-block>.h1:first-child,
    .xtlive-block>.h2:first-child,
    .xtlive-block>.h3:first-child,
    .xtlive-block>.h4:first-child,
    .xtlive-block>.h5:first-child,
    .xtlive-block>.h6:first-child,
    .xtlive-block>h1:first-child,
    .xtlive-block>h2:first-child,
    .xtlive-block>h3:first-child,
    .xtlive-block>h4:first-child,
    .xtlive-block>h5:first-child,
    .xtlive-block>h6:first-child {
        margin-top: 0;
    }
    .xtlive-block>span:first-child {
        margin-top: 0;
    }
    .xtlive-block {
        .xtlive-block {
            margin-bottom: @xtlive-block-space / 2;
        }
    }
    img+p,
    a+p {
        margin-top: @global-space / 2;
    }
    img+h2,
    img+h3,
    img+h4,
    img+h5,
    img+h6 {
        margin-top: @global-space;
    }
    a+h2,
    a+h3,
    a+h4,
    a+h5,
    a+h6 {
        margin-top: @global-space;
    }
    .kat-box-col {
        .make-xs-column(6);
        .make-sm-column(4);
        .make-md-column(3);
        .make-lg-column(3);
    }
    .slider {
        .kat-box-col {
            width: 100%;
            .section {
                margin-bottom: 0;
                .title {
                    padding-left: 40px !important;
                    padding-right: 40px !important;
                }
            }
        }
    }
    .xtlive-element {
        margin-top: @global-space * 3 + @xtlive-block-space;
        margin-bottom: @global-space * 3;
        @media @xs {
            margin-top: @global-space * 1 + @xtlive-block-space;
            margin-bottom: @global-space * 1;
        }
    }
    .embed-responsive {
        background-color: whitesmoke;
        margin-bottom: @global-space;
    }
    .hover-list-badge {
        width: 150px;
        z-index: 10;
        position: absolute;
        right: -10px;
        top: -10px;
        @media @sm {
            right: 0;
            top: 0;
            width: 100px;
        }
    }
    .vid-loading {
        z-index: -2;
        &:after {
            content: "video loading...";
            position: absolute;
            left: 50%;
            top: 50%;
            .transform(translate(-50%, -50%));
            z-index: 0;
        }
    }
    .embed-responsive-item {
        z-index: 5;
    }
    .xtlive-img-fig {
        font-size: 0.8em;
        color: @gray-light;
    }
    .lead {
        font-size: 1.2em;
    }
    .bigger {
        h2 {
            font-size: 5em;
            line-height: 0.9;
            @media @xs {
                font-size: 40px;
            }
        }
    }
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        margin-top: 0;
    }
    /* CAROUSEL TITEL */
    .xtlive-carousel-titel {
        position: absolute;
        left: 50px;
        bottom: 30px;
        padding-right: 50%;
        @media @sm {
            bottom: 10px;
            padding-right: 30%;
        }
        @media @xs {
            padding-right: 30%;
        }
        h2 {
            margin-bottom: 10px;
            line-height: 1.3;
            @media @xs {
                line-height: 0.6;
            }
        }
        h2.xtlive-carousel-titel-big>span {
            color: @color-on-brand-primary;
            box-shadow: -10px 0 0 0 @brand-primary, 10px 0 0 0 @brand-primary;
            background: @brand-primary;
            position: relative;
            -webkit-box-decoration-break: clone;
            box-decoration-break: clone;
            padding: 1px;
            margin: 0;
            @media @xs {
                font-size: 14px;
            }
        }
        p.xtlive-carousel-titel-small>span {
            color: @color-on-brand-secondary;
            box-shadow: -10px 0 0 0 @brand-secondary, 10px 0 0 0 @brand-secondary;
            background: @brand-secondary;
            position: relative;
            -webkit-box-decoration-break: clone;
            box-decoration-break: clone;
            padding: 1px;
            margin: 0;
            @media @xs {
                display: none;
            }
        }
    }
    .grid {
        .grid-item {
            width: 20%;
            padding: 0px;
            background-color: white;
            box-shadow: 0 0 20px rgba(128, 128, 128, 0.30);
            @media @sm {
                width: 25%;
            }
            @media @xs {
                width: 50%;
            }
        }
        .grid-item:hover {
            .grid-hover-box {
                opacity: 1;
            }
            img {
                opacity: 0.85;
            }
        }
    }
    .grid-hover-box {
        background: rgb(255, 255, 255);
        background: rgba(255, 255, 255, 0.8);
        position: absolute;
        bottom: 5px;
        left: 5px;
        right: 5px;
        padding: 15px;
        opacity: 0;

        .transition (all 0.3s ease-in-out);
        @media @sm {
            opacity: 1;
            padding: 5px;
        }
        .h4 {
            margin-top: 0;
            color: #555555;
            word-wrap: break-word;
            -webkit-hyphens: auto;
            -moz-hyphens: auto;
            -ms-hyphens: auto;
            -o-hyphens: auto;
            hyphens: auto;
            @media @sm {
                margin-bottom: 0;
            }
        }
        .footer-buttons {
            @media @sm {
                display: none;
            }
            .btn {
                min-width: 45%;
                text-align: center;
                font-size: 14px;
                line-height: 1;
            }
        }
    }
}

.xtlive.bg-ws {
    background-color: whitesmoke;
}

.xtlive {
    &.bg-ws {
        background-color: whitesmoke;
    }
}

.xtlive.bg {
    background-color: fade(@brand-primary, 90%);
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    p {
        color: @color-on-brand-primary;
    }
    .btn-xtlive,
    .btn-xtlive-big {
        .button-variant(@brand-primary;
        @color-on-brand-primary;
        @brand-primary);
    }
    .product-listing,
    {
        h1,
        h2,
        h3,
        h4,
        h5,
        h6,
        p {
            color: inherit;
        }
    }
}

.bg-image {

    .transition (all 0.47s);
    width: 100%!important;
    background-repeat: no-repeat;
    background-position-x: center;
    background-position-y: center;
    background-size: cover;
    background-attachment: inherit!important;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
}

.xtlive-slider.xtlive-fluid,
.xtlive-jumbo {
    .xtlive-element {
        margin-top: 0;
        margin-bottom: 0;
    }
}

.jumbo-wrap {
    position: relative;
    padding-top: @global-space * 4;
    padding-bottom: @global-space * 4;
    padding-left: 15px;
    padding-right: 15px;
    overflow: hidden;
    @media @xs {
        padding: 15px;
    }
}

.jumbo-inner {
    position: relative;
    -webkit-backface-visibility: hidden;
    .transform(translateZ(0) scale(1.0, 1.0));
    @media @xs {
        .jumbo-content {
            padding: 0 !important;
        }
    }
    &.big-h {
        height: 90vh;
        min-height: 400px;
    }
    &.middle-h {
        height: 40vh;
        min-height: 400px;
    }
    &.small-h {
        height: 30vh;
        min-height: 250px;
    }
    /* LEFT STYLE */
    &.left-middle {
        .jumbo-content {
            text-align: left;
            top: 50%;
            left: 50%;

            .transform(translate(-50%, -50%));
            padding-right: 60%;
            @media @md {
                padding-right: 50%;
            }
        }
    }
    &.left-bottom {
        .jumbo-content {
            text-align: left;
            bottom: 0;
            top: inherit;
            left: 0;

            .transform(inherit);
            padding-right: 60%;
            @media @md {
                padding-right: 50%;
            }
        }
    }
    &.left-top {
        .jumbo-content {
            text-align: left;
            bottom: inherit;
            top: 0;
            left: 0;
            .transform(inherit);
            padding-right: 60%;
            @media @md {
                padding-right: 50%;
            }
        }
    }
    /* CENTER STYLE */
    &.center-middle {
        .jumbo-content {
            text-align: center;
            top: 50%;
            left: 50%;
            .transform(translate(-50%, -50%));
            padding-right: 25%;
            padding-left: 25%;
        }
    }
    &.center-bottom {
        .jumbo-content {
            text-align: center;
            bottom: 0;
            top: inherit;
            left: 0;
            .transform(inherit);
            padding-right: 25%;
            padding-left: 25%;
        }
    }
    &.center-top {
        .jumbo-content {
            text-align: center;
            bottom: inherit;
            top: 0;
            left: 0;
            .transform(inherit);
            padding-right: 25%;
            padding-left: 25%;
        }
    }
    /* RIGHT STYLE */
    &.right-middle {
        .jumbo-content {
            text-align: right;
            top: 50%;
            left: 50%;
            .transform(translate(-50%, -50%));
            padding-left: 60%;
            @media @md {
                padding-left: 50%;
            }
        }
    }
    &.right-bottom {
        .jumbo-content {
            text-align: right;
            bottom: 0;
            top: inherit;
            left: 0;
            .transform(inherit);
            padding-left: 60%;
            @media @md {
                padding-left: 50%;
            }
        }
    }
    &.right-top {
        .jumbo-content {
            text-align: right;
            bottom: inherit;
            top: 0;
            left: 0;
            .transform(inherit);
            padding-left: 60%;
            @media @md {
                padding-left: 50%;
            }
        }
    }
}

.jumbo-content {
    position: absolute;
    z-index: 100;
    width: 100%;
    color: white !important;
    text-shadow: 0 0 20px rgba(0, 0, 0, 0.7);
    .btn {
        text-shadow: none;
    }
    >:last-child {
        margin-bottom: 0;
    }
    h1,
    h2,
    h3 {
        margin-top: 0;
        color: white !important;
    }
}

.xtlive-product-list {
    .product-listing-v1 {
        .products>.col-md-4 {
            @media @lg {
                width: 25%;
            }
            @media @md {
                width: 25%;
            }
            @media @sm {
                width: 33.33333%;
            }
            @media @xs {
                width: 100%;
            }
        }
    }
}


.flexbox {
    position: relative;
    
}

.flexbox-overlay {
    &:after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        top: 0;
        display: block;
        background: black;
        opacity: 0.7;
        z-index: 2;
    }
}

.flexbox-video {
    position: relative;
    padding-bottom: 56.25%;
    /* 16:9 */
}

.flexbox-placeholder-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
}

.flexbox-video-wrap {
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    width: 100%;
    height: 100%;
    max-height: 1075px;
    iframe {
        width: 100%;
        height: 100%;
    }
}


.flexbox-content {
    position: absolute;
    width: 500px;
    padding: @global-space *4;
    z-index: 3;
    width: auto;
    max-width: 500px;

    @media @sm {
        position: relative !important;
        left: 0 !important;
        right: 0 !important;
        width: auto !important;
        max-width: inherit !important;
        text-align: left !important;
        transform: inherit !important;
        bottom: 0 !important;
        top: 0 !important;
        padding: @global-space *1.5;
        .xtlive-block {
            position: relative !important;
            left: 0 !important;
            right: 0 !important;
            width: auto !important;
            max-width: inherit !important;
            text-align: left !important;
            transform: inherit !important;
            bottom: 0 !important;
            top: 0 !important;
        }
    }
    /* INVERT STYLE */
    &.flexbox-invert {
        .xtlive.bg;
        background-color: transparent;
        @media @sm {
            background-color: fade(@brand-primary, 90%) !important;
        }
    }

    /* BGS */
    &.bg-white {
        background-color: fade(white, 90%);
    }
    &.bg-primary {
        background-color: fade(@brand-primary, 90%);
    }
    &.bg-no {
        background-color: transparent;
    }
    .xtlive-block {
        margin-bottom: 0;
    }
    &.center-center {
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        text-align: center;
    }
    &.left-top {
        left: @global-space *2;
        top: @global-space *2;
    }
    &.left-bottom {
        left: @global-space *2;
        bottom: @global-space *2;
    }
    &.right-top {
        right: @global-space *2;
        top: @global-space *2;
    }
    &.right-bottom {
        right: @global-space *2;
        bottom: @global-space *2;
    }
    /* RIGHT FULL */
    &.right-full {
        right: @global-space *2;
        top: @global-space *2;
        bottom: @global-space *2;
        width: 500px;
        .xtlive-block {
            position: absolute;
            left: @global-space *4;
            right: @global-space *4;
            top: 50%;
            transform: translateY(-50%);
        }
    }
    /* LEFT FULL */
    &.left-full {
        left: @global-space *2;
        top: @global-space *2;
        bottom: @global-space *2;
        width: 500px;
        .xtlive-block {
            position: absolute;
            left: @global-space *4;
            right: @global-space *4;
            top: 50%;
            transform: translateY(-50%);
        }
    }
    /* CENTER FULL */
    &.center-full {
        left: 50%;
        transform: translateX(-50%);
        top: @global-space *2;
        bottom: @global-space *2;
        width: 500px;
        .xtlive-block {
            position: absolute;
            left: @global-space *4;
            right: @global-space *4;
            top: 50%;
            transform: translateY(-50%);
        }
    }
}


/* CUSTOM ELEMENTS */
.xtlive{
    
    /* CUSTOM LIST KATEGORIE */
    .kat-box-list {
        position: relative;
        .kat-box-col-custom {
            position: static !important;
            .make-xs-column(6);
            .make-sm-column(4);
            .make-md-column(3);
            .make-lg-column(3);
            @media (min-width: @screen-lg-min) {
                &:nth-child(4n+1) {
                    clear: left;
                }
            }
            @media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
                &:nth-child(4n+1) {
                    clear: left;
                }
            }
            @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
                &:nth-child(3n+1) {
                    clear: left;
                }
            }
            @media (max-width: @screen-xs-max) {
                &:nth-child(2n+1) {
                    clear: left;
                }
            }
        }
    }


    /* CUSTOM CAROUSEL FLICKITY */
    .xtlive-carousel-flickity {
        .xtlive-carousel-cell {
            width: 100%;
        }
    }

    /* CUSTOM KAT SLIDER FLICKITY */
    .xtlive-kat-flickity {
        .xtlive-carousel-kat {
            
        .make-xs-column(6);
            .make-sm-column(4);
            .make-md-column(3);
            .make-lg-column(3);

        }
    }

     /* CUSTOM PRODUCT SLIDER FLICKITY */
    .xtlive-product-flickity {
        .xtlive-carousel-product {
            
        .make-xs-column(6);
            .make-sm-column(4);
            .make-md-column(3);
            .make-lg-column(3);

        }
    }
	
	&.xtlive-p-slider {
		.img-responsive {
			width: initial;
		}
	}
	
}