﻿/* CAROUSEL (for example styles of travel) */
.carousel-container {
    background: #e3e5e3;
}
.carousel-container.transparent-pane {
    background: transparent;
}
.carousel-container img {
    width: 100%;
}
.carousel-inner {
    overflow: hidden;
}
.carousel-inner img {
    width: auto;
}
.carousel-inner .item .small-image,
.carousel-inner .item .main-image {
    overflow: hidden;
    float: left;
    min-height: 100%;
}
.carousel-inner .item .small-image .slide-content {
    height: 430px;
}
.carousel-inner .item .small-image .image {
    height: 200px;
}
.carousel-inner .item .main-image {
    height: 430px;
}
.carousel-inner .item .small-image img,
.carousel-inner .item .main-image img {
    width: auto;
    -moz-min-width: 100%;
    -ms-min-width: 100%;
    -o-min-width: 100%;
    -webkit-min-width: 100%;
    min-width: 100%;
    min-height: 100%;
}
.carousel-inner .item .small-image {
    -moz-min-width: 230px;
    -ms-min-width: 230px;
    -o-min-width: 230px;
    -webkit-min-width: 230px;
    min-width: 230px;
}
.carousel-inner .item .main-image {
    -moz-min-width: 300px;
    -ms-min-width: 300px;
    -o-min-width: 300px;
    -webkit-min-width: 300px;
    min-width: 300px;
}
.carousel-inner .item .main-image >div.overflow-hid {
    height: inherit;
}
.carousel-container .item.active {
    -moz-min-width: 1000px;
    -ms-min-width: 1000px;
    -o-min-width: 1000px;
    -webkit-min-width: 1000px;
    min-width: 1000px;
}
.carousel-container .multi-control.left, .carousel-container .multi-control.right {
    width: 4%;
    margin-left: 0;
    background-image: none;
    z-index: 3;
    background: transparent; /* 14/02/2015 */
    -ms-opacity: 1; /* 14/02/2015 */
    opacity: 1; /* 14/02/2015 */
    width: 9%;
}
.carousel-container .multi-control .prev-arr, .carousel-container .multi-control .next-arr {
    position: absolute;
    top: 50%;
    margin-top: -30px;
    z-index: 60;
    height: 60px;
    width: 30px;
    background-image: url("../_images/sprite.png");
    -ms-text-shadow: 0 0 0;
    text-shadow: 0 0 0;
    -ms-opacity: 1;
    opacity: 1;
    display: block;
}
.carousel-container .multi-control .next-arr {
    background-position: -206px -100px;
    right: 30px;
}
.carousel-container .multi-control .prev-arr {
    left: 30px;
    background-position: -176px -100px;
}
.carousel-container .single-holiday .more a {
    line-height: 18px;
}

@media (min-width: 992px ) {
	.multi-inner .active.left { left: -20%; }
	.multi-inner .active.right { left: 20%; }
	.multi-inner .next { left:  20%; }
	.multi-inner .prev { left: -20%; }
    .multi-item > div {
        width: 20%; /* 14/02/2015 */
        float: left;
        position: relative;
        min-height: 1px;
        padding-right: 15px;
        padding-left: 15px;
    }
    .multi-item > div:first-child {
        margin-left: -10%; /* 14/02/2015 */
    }
    .multi-item > div:last-child {
        margin-right: -13%;
    }
    .carousel-inner .multi-item img {
        max-width: 100%;
        width: auto;
        height: auto;
        max-height: 300px;
    }
    .multi-control.left, .multi-control.right {
        width: 8.5%; /* 14/02/2015 */
    }
    
    .carousel-inner .item .small-image .image {
        height: 260px;
    }
    /*Added*/
    /* 14/02/2015 */
    .item.multi-item.active > div:first-child,
    .item.multi-item.active > div:last-child {
        opacity: 0.2;
    }
    .item.multi-item.active > div:first-child .single-holiday:hover,
    .item.multi-item.active > div:last-child .single-holiday:hover {
        opacity: 1;

    }
}
@media (min-width: 767px) and (max-width: 1120px) {
    .carousel-container .item.active { /* 20/02/2015 */
        -moz-min-width: 500px;
        -ms-min-width: 500px;
        -o-min-width: 500px;
        -webkit-min-width: 500px;
        min-width: 500px;
        padding: 0;
    }
    .carousel-container.transparent-pane {
        padding: 0 15px;
    }
}
@media (min-width: 767px) and (max-width: 992px ) {
	.multi-inner .active.left { left: -33.3%; } /* 20/02/2015 */
	.multi-inner .active.right { left: 33.3%; } /* 20/02/2015 */
	.multi-inner .next { left:  33.3%; } /* 20/02/2015 */
	.multi-inner .prev { left:-33.3%} /* 20/02/2015 */
	.active.multi-item > div { display:none; }
	.active.multi-item > div:first-child,
	.active.multi-item > div:first-child + div,
	.active.multi-item > div:first-child + div + div { display:block; }
    .multi-item >div {
        width: 33.3%;
        float: left;
        position: relative;
        min-height: 1px;
        padding-right: 15px;
        padding-left: 15px;
    }
    .multi-item >div:first-child,
    .multi-item >div:last-child {
        width: 33.3%;
    }
    .carousel-inner .multi-item img {
        width: auto;
        height: 100%;
        max-height: 240px;
    }
}
@media (min-width: 767px) and (max-width:1023px) {
    #carousel-form .form-wrapper {
        width: 20000px;
        height: 900px;
    }
    #carousel-form .item,
    #carousel-form .item.active.steps {
        z-index: 12;
        width: 550px;
        height: 900px;
        background: #fffbfb;
        margin-left: 0;
        float: left;
        display: block;
    }
    #carousel-form .item.step-1,
    #carousel-form .item.active.step-1 {
        margin-left: 0;
    }
    #carousel-form .item.active.step-1 {
        margin-right: 150px;
    }
    #carousel-form .steps.item {
        -ms-opacity: 0.5;
        opacity: 0.5;
/*JT transition values were all 0 and gave W3 validation error, changed to 1s, but could delete these lines? */
        -webkit-transition: 1s ease-in-out left;
        -moz-transition: 1s ease-in-out left;
        -o-transition: 1s ease-in-out left;
        -ms-transition: 1s ease-in-out left;
        transition: 1s ease-in-out left;
        padding: 0 40px 0 20px;
        margin-left: 50px;
    }
    #carousel-form .steps.item.active {
        background: #fffbfb;
        z-index: 13;
        -ms-opacity: 1;
        opacity: 1;
    }
    #carousel-form .steps.step-1.active {
        margin-left: 0 !important;
    }
    #carousel-form .steps.step-2.active {
        margin-left: 50px !important;
    }
    #carousel-form .steps.step-3.active {
        margin-left: 0 !important;
    }
    #carousel-form .item.step-1.active + .item.step-2 {
        margin-left: -50px !important;
    }
    #carousel-form .carousel-control:hover, #carousel-form .carousel-control:focus,
    #carousel-form .carousel-control {
        z-index: 14;
        background: transparent;
        -ms-opacity: 1;
        opacity: 1;
        width: 30px;
    }
    #carousel-form .carousel-control .icon {
        position: absolute;
        top: 30%;
        margin-top: -15px;
        float: none;
    }
    #carousel-form .carousel-control.right {margin-right: 23%}
    #carousel-form .carousel-control span.right-arr {
        left: auto;
        right: 5px;
        background-position: -57px -100px;
        width: 30px;
        height: 60px;
    }
    #carousel-form .carousel-control span.left-arr {
        right: auto;
        left: 5px;
        background-position: -27px -100px;
        width: 30px;
        height: 60px;
    }
}
@media (max-width:767px) {
    .multi-inner .active.left {
        left: -100%;
    }

    .multi-inner .next {
        left: 100%;
    }

    .multi-inner .prev {
        left: -100%;
    }

    .multi-item.active > div {
        display: none;
    }

        .multi-item.active > div:first-child {
            display: block;
        }

    .multi-item > div {
        width: 100%;
        float: left;
        position: relative;
        min-height: 1px;
        padding-right: 15px;
        padding-left: 15px;
    }

        .multi-item > div:first-child,
        .multi-item > div:last-child {
            width: 100%;
        }

    .carousel-inner .multi-item .single-holiday img {
        width: 50%;
        float: left;
        height: auto;
    }

    .carousel-inner .multi-item .single-holiday .bottom-details {
        width: 50%;
        float: left;
    }
    .carousel-inner .multi-item .single-holiday:after {
        content: ".";
        display: block;
        clear: both;
        visibility: hidden;
        line-height: 0;
        height: 0;
    }

    .carousel-inner .multi-item.active {
        -moz-min-width: 100%;
        -ms-min-width: 100%;
        -o-min-width: 100%;
        -webkit-min-width: 100%;
        min-width: 100%;
    }

    .carousel-inner .multi-item img {
        width: auto;
        height: 100%;
        max-height: 480px;
    }

    .multi-control {
        display: none;
    }
}
@media (max-width:769px) {
    .carousel-container .more {
        padding: 10px 0;
    }
    .carousel-inner.container {padding:0}
}
@media (min-width: 767px) and (max-width:850px) {
    .standard-carousel .main-image { width: 310px;}
}
@media (max-width:767px) {
    #carousel-form .item.active {
        -moz-min-width: 300px;
        -ms-min-width: 300px;
        -o-min-width: 300px;
        -webkit-min-width: 300px;
        min-width: 300px;
    }
    #carousel-form .carousel-indicators {
        top: 3px;
    }
    #carousel-form .item,
    #carousel-form .item.active.steps {
        z-index: 12;
        width: 100%;
        background: #fffbfb;
        margin-left: 0;
        float: left;
    }
    #carousel-form .item {
        display: none;
    }
    #carousel-form .item.active.steps {
        display: block;
    }
}

/*missing styles for carousel indicators*/
/* 20/02/2015 */
.carousel-indicators {
    position: absolute;
    bottom: auto;
    left: auto;
    z-index: 15;
    width: auto;
    padding-left: 0;
    margin-left: 0;
    text-align: center;
    list-style: none;
    top: -20px;
    right: 15px;
}
.carousel-indicators li {
    display: inline-block;
    width: 13px;
    height: 13px;
    margin: 0 2px;
    text-indent: -9999px;
    cursor: pointer;
    background-color: #ededed;
    border: 0;
    -ms-border-radius: 13px;
    border-radius: 13px;
}
.carousel-indicators li:hover,
.carousel-indicators .active {
    width: 13px;
    height: 13px;
    margin: 0 2px;
    background-color: #7bc143;
}