@import "mixins.less";

// Width variables (appears count calculates by raw css)
@width1: 100%; // Appears 19 times

// Height variables (appears count calculates by raw css)
@height3: 100%; // Appears 14 times

.a3-rslider-container {
    max-width: @width1;
    position:relative;
    .a3-cycle-slideshow>img.cycle-slide {
        max-height:@height3;
        max-width:@width1;
    }
    .a3-cycle-slideshow-dynamic-tall>img.cycle-slide {
        max-height:inherit;
    }
    &:hover {
        .a3-cycle-controls {
            .opacity(1);
        }
        .cycle-pager-container {
            .opacity(1);
        }
    }
    .a3-cycle-slideshow-dynamic-tall {
        .a3-slider-video-slide {
            height:auto;
        }
    }
}
.a3-cycle-slideshow {
    margin: auto;
    overflow:hidden;
    img.a3-rslider-image.lazy-hidden {
        background: transparent;
    }
    .cycle-sentinel {
        position: static !important;
        top: 0px;
        left: 0px;
        z-index: -100;
        .opacity(1);
        display: block;
        visibility: hidden;
        max-width:100% !important;
        height: auto;
        min-height: 150px;
    }
}
.a3-rslider-template-card {
    .a3-cycle-slideshow {
        margin-bottom:0 !important;
    }
    .a3-cycle-controls {
        .cycle-prev {
            left:0px;
        }
        .cycle-next {
            right:0;
        }
    }
    .a3-slider-bg {
        background:url("../images/mobile_slider_bg.png") repeat-x left bottom;
        bottom:0;
        height:16px;
        left:0;
        position:absolute;
        width:@width1;
        z-index:101;
    }
}
.cycle-caption-container {
    max-width:60%;
    position: absolute;
    right: 10px;
    top: 10px;
    width: auto;
    z-index: 700;
}
.cycle-caption {
    position: relative;
}
.cycle-caption-bg {
    .opacity(0.6);
    background: #000000;
    height:@height3;
    left:0;
    position: absolute;
    top:0;
    width:@width1;
}
.cycle-caption-text {
    color:#ffffff !important;
    font-size:14px !important;
    margin:0 !important;
    padding: 10px !important;
    text-align:left;
}
.cycle-overlay-container {
    bottom: 10px;
    left:10px;
    max-width:60%;
    position: absolute;
    width:auto;
    z-index: 600;
}
.cycle-overlay {
    position:relative;
    .cycle-description {
        color: #FFFFFF;
        padding:10px;
        text-align:left;
    }
}
.cycle-overlay-bg {
    .opacity(0.6);
    background: #000000;
    height:@height3;
    left:0;
    position: absolute;
    top:0;
    width:@width1;
}
.a3-cycle-controls {
    .opacity(0);
    -moz-transition: all 1s linear 0s;
    -o-transition: all 1s linear 0s;
    -webkit-transition: all 1s linear 0s;
    margin-top:-25px;
    position: absolute;
    text-align:center;
    top: 50%;
    transition: all 1s linear 0s;
    width: @width1;
    z-index: 1000;
    a {
        background-position:center center;
        background-repeat:no-repeat;
        height:50px;
        position:absolute;
        text-indent:-999em;
        width:50px;
    }
    .cycle-prev {
        background-image: url("../images/playback-prev.png");
        left: 20px;
    }
    .cycle-next {
        background-image: url("../images/playback-next.png");
        right: 20px;
    }
    .cycle-pause {
        background-image: url("../images/playback-pause.png");
        left: 50%;
        margin-left:-25px;
    }
    .cycle-play {
        background-image: url("../images/playback-play.png");
        left: 50%;
        margin-left:-25px;
    }
}
.a3-rslider-template-widget {
    .a3-cycle-controls {
        .cycle-prev {
            left:0px;
        }
        .cycle-next {
            right:0;
        }
    }
}
.cycle-pager-container {
    .opacity(0);
    -moz-transition: all 1s linear 0s;
    -o-transition: all 1s linear 0s;
    -webkit-transition: all 1s linear 0s;
    bottom: 10px;
    position: absolute;
    right: 10px;
    text-align:center;
    transition: all 1s linear 0s;
    z-index: 800;
}
.cycle-pager-inside {
    display: table;
    margin: auto;
    position: relative;
}
.cycle-caption-inside {
    display: table;
    margin: auto;
    position: relative;
}
.cycle-pager-overlay {
    .opacity(0.6);
    .border_radius(4px);
    background: #000000;
    height:@height3;
    left:0;
    position: absolute;
    top:0;
    width:@width1;
}
.cycle-pager {
    display:table;
    padding: 5px;
    position:relative;
    span {
        .border_radius(10px);
        background: transparent;
        border:1px solid #FFFFFF;
        cursor: pointer;
        display: block;
        float: left;
        height: 10px;
        margin: 3px;
        text-indent: -999em;
        width: 10px;
    }
    span.cycle-pager-active {
        background: #FFFFFF;
    }
}
.a3-slider-card-container-mobile {
    .a3-cycle-slideshow>img.cycle-slide {
        height:auto;
        max-height:none !important;
        width:@width1;
    }
    .a3-slider-bg {
        background:url("../images/mobile_slider_bg.png") repeat-x left bottom;
        bottom:0;
        height:16px;
        left:0;
        position:absolute;
        width:@width1;
        z-index:101;
    }
    .a3-slider-video-slide {
        height:auto;
        .video_ojbect_container {
            height:0;
        }
    }
    .a3-slider-video-slide.cycle-slide-active {
        .video_ojbect_container {
            height:@height3;
        }
    }
    .video_ojbect_container {
        iframe {
            height:@height3 !important;
            width:80% !important;
        }
    }
}
body {
    .a3-slider-card-container-basic-mobile-skin {
        margin: 0 !important;
        padding: 0 !important;
    }
}
.a3-slider-card-container-basic-mobile-skin {
    .cycle-caption-container {
        bottom: 15px;
        left: auto;
        position:absolute;
        right: 10px;
        top: auto;
    }
    .cycle-caption-overlay {
        .opacity(0.6);
        .border_radius(10px);
        background-color: #000000 !important;
        height:@height3;
        left:0;
        position:absolute;
        top:0;
        width:@width1;
    }
    .cycle-caption {
        .border_radius(10px);
        color:#FFFFFF !important;
        font:normal 11px Arial, sans-serif !important;
        padding: 2px 5px !important;
    }
    .cycle-template-mobile-overlay {
        display:none;
        .cycle-title {
            color:#6d6d6d !important;
            display:block;
            font:normal 16px Arial, sans-serif !important;
            margin: 5px 10px 5px 10px !important;
            padding:0 !important;
            a {
                color:#6d6d6d !important;
                font:normal 16px Arial, sans-serif !important;
                &:hover {
                    color: #383838 !important;
                }
            }
        }
        .cycle-description {
            color:#666666 !important;
            display:block;
            font:normal 12px Arial, sans-serif !important;
            margin: 10px 10px 5px 10px !important;
        }
    }
}
.a3-slider-video-slide {
    height:@height3;
    width:@width1;
    div.cycle-youtube {
        height:@height3;
        left:0;
        position:absolute;
        top:0;
        width:@width1;
    }
    iframe {
        height:@height3 !important;
        width:@width1 !important;
    }
    object {
        height:@height3 !important;
        width:@width1 !important;
    }
    embed {
        height:@height3 !important;
        width:@width1 !important;
    }
    img.a3-slider-video-space {
        height:auto;
        max-width:@width1;
        position:relative;
        width:@width1;
    }
    .video_ojbect_container {
        background:#000000;
        left:0;
        position:absolute;
        top:0;
        width:@width1;
    }
}
.a3-cycle-lazy-hidden {
}
.lazy-hidden {
    height: @height3;
    position: absolute;
    width: @width1;
    z-index: 9999;
}
.cycle-slideshow-lazyload {
    position: relative;
}
.a3-slider-video-slide.cycle-slide-active {
    div.cycle-youtube {
        height:@height3;
    }
}
@media screen and (max-width :600px) {
    .a3-cycle-slideshow .cycle-overlay-container { display:none !important;}
    .a3-rslider-container .cycle-overlay { display:none !important;}
    .a3-slider-video-slide div.cycle-youtube { height:0;}
    .a3-slider-video-slide.cycle-slide-active div.cycle-youtube { height:100%; }
}