/*****************************************************
LESS compilation failed due a JavaScript error!

Input: /apps/ticshared/components/content/carousel/carousel-hero/clientlib/css/carousel-hero.less
Error: RuntimeError: No matching definition was found for `.skew(-20deg)` in /apps/ticshared/components/content/carousel/carousel-hero/clientlib/css/carousel-hero.less on line 153, column 21:
152                     background: linear-gradient(transparent, @teal 0);
153                     .skew(-20deg);
154                     &.transparent {


(uncompiled LESS src is included below)
*****************************************************/
@import (reference) "/apps/settings/wcm/designs/icop/ico/clientlib-site/css/base.less";
@import (reference) "/apps/settings/wcm/designs/ticshared/clientlib-site/css/mixins.less";
@gradSettings: 108deg, transparent 190px;
@teal: rgba(1, 89, 111, 1);
@red: rgba(220, 52, 43, 1);
@grey: rgba(50, 50, 50, 1);
@tealT: rgba(1, 89, 111, .85);
@redT: rgba(220, 52, 43, .85);
@greyT: rgba(50, 50, 50, .85);

/* ICO-3702: Once changes are implemented on ICA, this style can be moved out of the #ico namespace. Line ~267 */
#ico .campaign-carousel.component {
    .carousel-inner {
        .item {
            overflow: hidden;

            @media @xs-only {
                .hero-image {
                    height: 100%;
                    max-height: 100%;
                    div:not([data-media]) {
                        height: 100%;
                        max-height: 100%; 
                    }
                }
            }
            .hero-image div[data-picture] img {
                margin-left: auto;
                margin-right: auto;
                display: block;

                @media @xs-only {
                    left: 50%;
                    top: 50%;
                    min-height: 100%;
                    max-height: 100%;
                    max-width: none;
                    min-width: 100%;
                    width: unset;
                    -webkit-transform: translate(-50%,-50%);
                    -ms-transform: translate(-50%,-50%);
                    transform: translate(-50%,-50%);
                    object-fit: cover;
                }
                @media @sm {
                    max-width: 100%;
                }
            }
            &.modalVideo {
                &.herovideo360:after {
                    font-weight: bold;
                }
            }
        }
    }
}

.campaign-carousel.component {
    position: relative;
    max-width: 1440px;
    margin: 0 auto 40px;
    &.no-margin {
        margin: 0 auto 0;
    }
    &.fullWidth {
        max-width: none;
    }
    &.overlap {
        margin: 0 auto -60px;
        .carousel-inner {
            // height: 620px;
        }
    }
    .vid-container {
        position: relative;
        height: 55.56%;
        background-color: black;
        @media @md {
            height: 100%;
        }
    }
    .vid-wrap {
        width: 100%;
        height: 100%;
        //border: solid 1px orange;
        background-color: @color-brand-black;
    }

    .vid-swiper-horizontal,
    .vid-swiper-vertical {
        display: none;
    }

    .vid-spacer {
        height: 22.11%;
        background-color: @color-brand-black;
        color: darkgrey;
        @media @md {
            height: 0;
        }
    }
    .carousel-inner {
        position: relative;
        width: 100%;
        //height: 560px;
        overflow: hidden;
        .item {
            height: 100%;
            position: absolute;
            width: 100%;
            background-size: 100%;
            background-position: center;
            &.gradient{
                img{
                    .box-shadow(black 8px 150px 0px);
                }
            }
            iframe {
                border: 0;
                width: 100%;
                height: 100%;
                display: none;
                @media @md {
                    height: 100%;
                }
            }
            &.active {
                iframe {
                    display: block;
                    //height: auto;
                }
            }
            .hero-image{
                div[data-picture]{
                    position:relative;
                    height: 100%;
                    width: auto;
                    img{
                        position: absolute;
                        left: 50%;
                        .transform(translateX(-50%));
                    }
                }
            }
            .caption {
                display: block;
                width: 60%;
                height: 100%;
                right: -113px;
                position: absolute;
                &.teal {
                    background: linear-gradient(transparent, @teal 0);
                    .skew(-20deg);
                    &.transparent {
                        background: linear-gradient(transparent, @tealT 0);
                        .skew(-20deg);
                        //box-shadow: 0 0 1px @tealT;
                    }
                    &.noOverlap {
                        background-repeat: no-repeat;
                    }
                    a {
                        &:hover {
                            color: @color-brand-red;
                            text-decoration: underline;
                        }
                    }
                }
                &.red {
                    background: linear-gradient(transparent, @red 0);
                    .skew(-20deg);
                    &.transparent {
                        background: linear-gradient(transparent, @redT 0);
                        .skew(-20deg);
                        //box-shadow: 0 0 1px @redT;
                    }
                    a {
                        &:hover {
                            color: @color-brand-black;
                            text-decoration: underline;
                        }
                    }
                }
                &.grey {

                    background: linear-gradient(transparent, @grey 0);
                    .skew(-20deg);
                    &.transparent {
                        background: linear-gradient(transparent, @greyT 0);
                        .skew(-20deg);
                        //box-shadow: 0 0 1px @greyT;
                    }
                    a {
                        &:hover {
                            color: @color-brand-red;
                            text-decoration: underline;
                        }
                    }
                }
                &.none {
                    .caption-inner {
                        .carousel-caption {
                            .skew(0deg) !important;
                        }
                    }
                }

                &[data-center-caption="true"] {
                    width: 100%;
                    right: auto;
                    position: relative;
                    .carousel-caption.carousel-caption.carousel-caption {
                        width: 100%;
                        max-width: 787px;
                        margin: auto;
                        position: relative;
                        right: auto;
                        left: auto;
                        top: 45%;
                        bottom: auto;
                        h1 {
                            font-size: 5.4rem;
                            /*ICO-3253: adjusting for mobile*/
                            @media @xs-only {
                                font-size:7vw;
                            }
                        }
                        p {
                            font-size: 2.2rem;
                            line-height: 2.8rem;
                            /*ICO-3253: adjusting for mobile*/
                            @media @xs-only {
                                font-size:5vw
                            }
                        }
                    }
                }

                .caption-inner {
                    display: table;
                    height: 100%;
                    width: 100%;
                    .carousel-caption {
                        position: relative;
                        width: auto;
                        //margin:0 10%;
                        display: table-cell;
                        text-align: center;
                        vertical-align: middle;
                        padding: 0 15% 0 30%;
                        left: -113px;
                        bottom: 0;
                        right: 0;
                        text-align: center;
                        top: 0;
                        z-index: 2;
                        .skew(20deg);
                        h1,
                        h2,
                        h3 {
                            text-align: center;
                            transform: none;
                            position: static;

                            &:before,
                            &:after {
                                content: none;
                            }
                        }
                        a {
                            color: @color-brand-white;
                            text-decoration: underline;
                            &:hover {
                                text-decoration: underline;
                            }
                        }
                    }
                }
            }
            &.modalVideo {
                cursor: pointer;
                &.herovideo:after {
                    content: '\e904';
                    font-family: @icomoon;
                    color: #555;
                    font-size: 22px;
                    font-style: normal;
                    text-align: center;
                    background: @color-brand-white;
                    padding: 10px;
                    border-radius: 50%;
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    margin-left: -31px;
                    margin-top: -31px;
                    height: 62px;
                    width: 62px;
                    padding-top: 20px;
                }
                &.herovideo360:after {
                    .font-secondary-regular;
                    background: @color-brand-white;
                    color: @color-brand-black;
                    display: inline;
                    content: "View 360° Tour";
                    font-size: 1.4rem;
                    letter-spacing: 2px;
                    padding: 15px 45px;
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    text-transform: uppercase;
                    .translate(-50%, -50%);
                }
            }
        }
    }
    .carousel-control {
        color: @color-brand-medium-gray;
        width: 9%;
        background: none;
        top: 40%;
        bottom: 40%;
        span {
            font-family: @icomoon;
            display: block;
            top: 50%;
            z-index: 5;
            height: 30px;
            width: 30px;
            margin: -10px 30px;
            font-size: 30px;
            position: absolute;
            visibility: hidden;
            color: @color-brand-white;
            &.chevron-right:after {
                content: '\e904';
            }
            &.chevron-left:after {
                content: '\e903';
            }
        }
        &:hover {
            span {
                visibility: visible;
            }
        }
    }   
    .chevronVisible {
    	visibility: visible !important;   /*ICO-4070 */ 
    }
    
    .carousel-indicators {
        width: auto;
        left: 50%;
        margin-left: auto;
        z-index: 2;
        transform: translateX(-50%);

        li[data-slide-to] {
            border: 1px solid #A2A2A2;
            background: #cccccc;
            width: 10px;
            height: 10px;
            margin: 0 10px 0 0;
            &:last-of-type {
                margin-right: 0;
            }
            &.active {
                border: 1px solid #da291c;
                background-color: #da291c;
                margin: 0 10px 0 0;
                width: 10px;
                height: 10px;
                &:last-of-type {
                    margin-right: 0;
                }
            }
        }
    }
    &.overlap .carousel-indicators {
        margin-bottom: 30px;
        @media @sm {
            margin-bottom: 60px;
        }
    }
}

/* added for ICO-3046 */
#ico .campaign-carousel.component .carousel-control {
    top: 0;
    bottom: 0;
    width: 100px;

    .chevron-left {
        left: 0;
    }

    .chevron-right {
        right: 0;
    }
}

/* modal styles */

.hc-modal {
    text-align: center;
    padding: 0!important;

    &:before {
        content: '';
        display: inline-block;
        height: 100%;
        vertical-align: middle;
        margin-right: -25px;
    }
    .modal-dialog {
        height: 90%;
        margin: 0 auto;
        width: 100%;
        display: inline-block;
        text-align: left;
        vertical-align: middle;
    }
    .modal-content {
        background: transparent;
        border: none;
        box-shadow: none;
        height: 100%;
    }
    .modal-header {
        border: none;
        position: absolute;
        top: 0;
        text-align: center;
        width: 100%;
        z-index: 10;
        button.close {
            background: transparent;
            border: none;
            color: @color-brand-white;
            font-size: 30px;
            margin: 0;
            padding: 20px 20px 10px;
        ;
            &:before {
                font-size: 1.6rem;
            }
        }
    }
    .modal-body {
        height: 100%;
        position: absolute;
        top: 85px;
        width: 100%;
        text-align: center;
        > * {
            width: 100%;
        }
        > .loading-icon {
            background: transparent url('../../../../../../etc.clientlibs/settings/wcm/designs/ticshared/clientlib-site/resources/images/load_icon_darkbg.gif') center center no-repeat;
            border-radius: 50%;
            height: 50px;
            position: absolute;
            top: 50%;
            left: 50%;
            .translate(-50%, -50%);
            width: 50px;
            z-index: -1;
        }
    }
}

@media @xs-only {
    /*@xs-only: ~"screen and (max-width: 767px)";*/
    .campaign-carousel.component {
        &.overlap {
            margin: 0 auto -35px;
            .carousel-inner {
                height: 70vw;
                max-width: initial;
                .carousel-indicators {
                    margin-bottom: 30px;
                    z-index: 2;
                }
            }
        }
        .carousel-inner {
            height: 250px;
            max-width: 400px;
            margin: 0 auto;
            .item {
                .hero-image{
                    div[data-picture]{
                        max-height: 250px;
                        img{
                            width:100%;
                        }
                    }
                }
                .caption {
                    margin: 0 auto;
                    display: block;
                    width: 100%;
                    .caption-inner {
                        display: table;
                        height: 100%;
                        width: 100%;
                        .carousel-caption {
                            padding: 0 1%;
                            right: 0;
                            p {
                                // display: none;
                            }
                            h2 {
                                margin-top: -11%;
                            }

                        }
                    }
                }
            }
            .carousel-indicators {
                margin-bottom: 0;
                z-index: 2;
            }
        }
        .carousel-control {
            display: none;
        }
    }
    .hc-modal .modal-dialog {
        max-width: 400px;
        margin: 5px auto;
        max-height: 220px !important;
    }
}


#ico.home-page .campaign-carousel.component > .carousel-indicators {
    bottom: 50px;
}

@media @sm {
    /*@sm: ~"screen and (min-width: 768px)";*/
    .campaign-carousel.component {
        .carousel-inner {
            .item {
                background-repeat: no-repeat;
                background-size: cover;
                &.noOverlap {
                    background-size: auto 100%;
                    background-position: bottom left;
                }
            }
        }
    }
    .hc-modal .modal-dialog {
        max-width: 750px;
        margin: 18px auto;
        max-height: 420px;
    }
}

@media @md {
    /*@md: ~"screen and (min-width: 992px)";*/
    .campaign-carousel.component {
        &.fullWidth {
            .carousel-inner {
                .item{
                    .hero-image{
                        div[data-picture]{
                            position:relative;
                            height: 100%;
                            width: auto;
                            img{
                                height: auto;
                            }
                        }
                    }
                }
            }
        }
        .carousel-inner {
            .item {
                &.noOverlap {
                    background-size: 750px auto;
                }
            }
        }
    }
    .hc-modal .modal-dialog {
        height: 100%;
        width: 100%;
        max-height: 700px;
        max-width: 1200px;
    }
}

@media (min-width: 1100px) and (max-width: 1199px) {
    .campaign-carousel.component {
        .carousel-inner {
            .item {
                &.noOverlap {
                    //background-size: 750px auto;
                    &.gradient {
                        //       background-position: bottom left, top left;
                    }
                }
            }
        }
    }
    .hc-modal .modal-dialog {
        height: 90%;
        width: 90%;
        min-height: 580px;
        min-width: 1020px;
    }
}

@media @lg {
    /*@lg: ~"screen and (min-width: 1200px)";*/
    .campaign-carousel.component {
        &.fullWidth {
            .carousel-inner {
                .item{
                    .hero-image{
                        div[data-picture]{
                            position:relative;
                            height: 100%;
                            width: auto;
                            img{
                                height: auto;
                            }
                        }
                    }
                }

            }
        }
        .carousel-inner {
            .item {
                &.noOverlap {
                    // background-size: 800px auto;
                }
                .caption {
                    //    width:780px;
                }
            }
        }

    }
    iframe.vrvideo {
        max-height: 700px;
        max-width: 1200px;
    }
}


/* ICO 2881 overrides */
.campaign-carousel {
    &.component{
        .carousel-inner {
            .item {
                .caption {
                    .caption-inner {
                        display: block;
                        position: relative;
                        height: 100%;
                        .carousel-caption {
                            display: block;
                            width: 100%;
                            position: absolute;
                            transform: translateY(-50%);
                            left: 0;
                            top: 39%;
                            padding-top: 0;
                            padding-bottom: 0;
                            height: auto;
                            bottom: auto;

                            @media @sm {
                                width: 50%;
                                top: 50%;
                                right: 0;
                                left: auto;
                                padding: 0 !important;
                            }

                            h2 {
                                margin-top: 0;
                                @media @sm {
                                    padding: 0 20px;
                                }
                            }
                        }
                    }
                    &.grey,&.red,&.teal,&.none{
                        &.transparent {

                            background: transparent;
                            transform: none;
                            width: 100%;
                            left: 0;
                            top: 0;
                            right: auto;
                            .caption-inner {
                                display: block;
                                position: relative;
                                height: 100%;
                                &:after {
                                    content:  '';
                                    height: 100%;
                                    .transform(skewX(-20deg));
                                    background: none;
                                    position: absolute;
                                    top: 0;
                                    left: 50%;
                                    width: 150%;
                                }
                            }
                        }
                    }
                    &.red {
                        &.transparent {
                            background: transparent;
                            .caption-inner {
                                &:after {
                                    background: linear-gradient(transparent, @redT 0);
                                }
                            }
                        }
                    }

                    &.teal {
                        &.transparent {
                            background: transparent;
                            .caption-inner {
                                &:after {
                                    background: linear-gradient(transparent, @tealT 0);
                                }
                            }
                        }
                    }
                    &.grey {
                        &.transparent {
                            background: transparent;
                            .caption-inner {
                                &:after {
                                    background: linear-gradient(transparent, @greyT 0);
                                }
                            }
                        }
                    }
                    &.none {
                        &.transparent {
                            background: transparent;
                            .caption-inner {
                                &:after {
                                    background: none;
                                    .transform(skewX(0deg));
                                }
                            }
                        }
                    }

                }
            }
        }
    }
}

.touchevents {
    .campaign-carousel.component {
        .vid-swiper-horizontal {
            display: block;
            &:after {
                content: '';
                position: absolute;
                width: 100%;
                height: 100%;
                top: 0;
                left: 0;
                background-color: transparent;
                z-index: 111;
            }
        }
        /*.vid-swiper-horizontal,
        .vid-swiper-vertical {
            display: block;
            &:after,
            &:before {
                content: '';
                position: absolute;
                width: ~"calc(50% - 40px)";
                height: 100%;
                top: 0;
                left: 0;
                background-color: transparent;
                z-index: 111;
            }

            &:after {
                left: ~"calc(50% + 40px)";
            }
        }

        .vid-swiper-horizontal {
            &:before,
            &:after {
                width: 100%;
                height: ~"calc(50% - 30px)";
                z-index: 110;
            }

            &:after {
                left: 0;
                top: ~"calc(50% + 30px)";
            }
        }*/
    }
}