/* styling for different carousels */

/* carousel styles for theme 3 */

.carousel-theme-3,
.carousel-theme-4 {
    position: relative;
  img {
    width: 100%;
  }
  .carousel-inner {
    max-height: 600px;
  }
  .carousel-indicators {
    text-align: center;
  }
}

.carousel-theme-3-mask {
    width: 100%;
    height: 20px;
    position: relative;
    bottom: 20px;
    z-index: 10;
    background: url("img/theme-3-mask.png") repeat-x;
}

@media (max-width: 767px) {
  .carousel-theme-3,
  .carousel-theme-4 {
  margin-left: -20px;
  margin-right: -20px;
  }
}

@media (min-width: 980px) {
  .carousel-theme-3 {
    max-height: 400px;
    overflow: hidden;
    .carousel-tagline {
        width: 36%;
        position: relative;
        bottom: 300px;
        min-height: 300px;
        z-index: 5;
        float: right;
        border-style: solid;
        text-align: left;
        border-width: 44px 40px 42px 45px;
        -moz-border-image: url("img/theme-3-tagline-mask.png") 44 40 42 45 repeat;
        -webkit-border-image: url("img/theme-3-tagline-mask.png") 44 40 42 45 repeat;
        -o-border-image: url("img/theme-3-tagline-mask.png") 44 40 42 45 repeat;
        border-image: url("img/theme-3-tagline-mask.png") 44 40 42 45 fill repeat;
    }
  }
  .carousel-theme-4 {
    max-height: 400px;
    overflow: hidden;
    .carousel-tagline {
        position: relative;
        z-index: 5;
        bottom: 150px;
        text-align: center;
        color: @white;
    }
  }
}

@media (min-width: 1280px) {
  .carousel-theme-3,
  .carousel-theme-4 {
    max-height: 600px;
    overflow: hidden;
  }
}

/* styles for carousels on theme 1 and 2 */

.css-carousel-slider {
    margin-top: -20px;
    max-height: 360px;
}

@media (min-width: 979px) {
    .css-gallery-slider .carousel-inner {
        -webkit-transform: translateY(-25%);
        -ms-transform: translateY(-25%);
        transform: translateY(-25%);
    }
}

.circle .carousel {
    position: absolute;
    img {
        max-width: 100%;
        position: relative;
    }
}

/* New welcome page slider styling */

.css-cmsplugin_gallery {
    margin-bottom: 0;
    .carousel-indicators {
        left: 20px;
        bottom: 20px;
        top: inherit;
        > li {
            margin-right: 10px;
            margin-left: 0;
            height: 20px;
            width: 20px;
            float: left;
            .border-radius(50%);
            opacity: 0.75;
            background-color: greyscale(@themeColor);
            border: 1px solid white;
            cursor: pointer;
            &:last-child {
                margin-right: 0;
            }
        }
        .active {
            background-color: @themeColor;
        }
    }
}

// gallery container
.css-gallery-slider {
    position: relative;
    img {
        min-height: 250px;
    }
}

/* styles for theme 2 */

// gallery description
.css-carousel-description {
    position: absolute;
    top: 0;
    right: 0;
    height: 360px;
    width: 31.6%;
    min-width: 250px;
    overflow: hidden;
    color: @white;
    font-size: @fontSizeLarge;
    >.css-carousel-description-background {
        width: 100%;
        height: 100%;
        background-color: @themeColor;
        opacity: 0.75;
    }
    >.css-carousel-description-text {
        padding: 20px;
        position: absolute;
        top: 0px;
        color: @white;
        > h1, h2, h3, h4 {
        color: @white;
        }
    }
}
