@charset "utf-8";

/** Stage container **/


.stage{
    /* margin: 0 133px 0; */
    /* background: #222; */
}

.connected-carousels{position: relative;}
.connected-carousels .stage {position: relative;}
.carousel-stage li{min-height:319px;text-align: center;line-height: 404px;}
.carousel-stage li{background-size: 100% !important;}
.carousel-stage img{position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; object-fit: contain;}
.connected-carousels .photo-credits {
    position:absolute;
    right: 15px;
    bottom: 0;
    font-size: 13px;
    color: #fff;
    text-shadow: 0 0 1px rgba(0, 0, 0, 0.85);
    opacity: .66;
}

.connected-carousels .photo-credits a {
    color: #fff;
}


/** Navigation carousel specific styles **/
.connected-carousels .navigation {
    display: none;
    position: relative;
    z-index: 20;
    margin: 0 40px 40px;
}
.movieMore .connected-carousels .navigation{margin-bottom: 0;margin-top: 50px;}
.movieMore .connected-carousels .navigation li{width: 141px;height: 98px;margin-left: 5.5px;}
.connected-carousels .carousel-navigation {}
.connected-carousels .carousel-navigation img{vertical-align: middle;}
.connected-carousels .carousel-navigation li {
    cursor: pointer;
    position:relative;
    overflow: hidden;
    width: 176px;
    height: 100px;
}

.connected-carousels .carousel-navigation li.active{line-height: 68;border: 2px solid #fa5454;box-sizing:border-box;}

.connected-carousels .carousel-navigation li:after{
    display: block;
    content: '';
    position: absolute;
    width: 100%;
    /* background: url(/assets/img/sub/coverBlack.png) repeat 0 0; */
    background-color: hsla(120, 100%, 100%, 0.3);
    left: 0;
    top: 0;
    z-index: 10;
    height: 100%
}

.connected-carousels .carousel-navigation li img {
    /* width: 100%; */
    display: block;
    position: relative;
    z-index: 11;
    left: 50%;
    transform: translateX(-50%);

}

.connected-carousels .carousel-navigation li.active:after{
    background: none;
}


/** Navigation carousel controls **/


.connected-carousels .arrow{position: absolute; top: 50%; width: 100%; z-index: 9999; left: 0;}

.connected-carousels .arrow a{
    display: block;
    width: 15px;
    height: 20px;
    width: 20px;
    border: 1px solid #eee;
    text-indent: -9999em;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    padding: 5px;
    border-radius: calc(1px / 0);
    background-color: #fff;
}
.connected-carousels .next-navigation {
    background:url(/assets/img/sub/nextcut2.png) no-repeat center center / 100% 100%;
    background-size: 20px;
    right: 20px;
}

.connected-carousels .prev-navigation {
    background:url(/assets/img/sub/prevcut2.png) no-repeat center center / 100% 100%;
    background-size: 20px;
    left: 20px;
    
}

.connected-carousels .prev-navigation.inactive, 
.connected-carousels .next-navigation.inactive {opacity: .2;cursor: default;}
.connected-carousels .arrow02{display: none; top: -90px;}
.movieMore .connected-carousels .arrow02{top: 100%;margin-top: 60px;}
.connected-carousels .arrow02 .prev-navigation.inactive, 
.connected-carousels .arrow02 .next-navigation.inactive {opacity: 1;cursor: pointer;}
.connected-carousels .arrow02 a{width: 40px;height: 100px; position: absolute; top: 50%; transform: translateY(-50%); z-index: 9999;}
.connected-carousels .arrow02 .next-navigation{right: 0; background:url(/assets/img/sub/nextcut2.png) no-repeat 0 0;}
.connected-carousels .arrow02 .prev-navigation{left: 0; background:url(/assets/img/sub/prevcut2.png) no-repeat 0 0;}
.connected-carousels .carousel-navigation li{position: relative;}
.connected-carousels .carousel-navigation span.play{z-index: 25;position: absolute;bottom: 10px;left: 10px;background: url(/assets/img/main/play.png) no-repeat 0 0;display: block;width: 30px;height: 30px;}


.trailer .carousel-stage li{min-height: unset;}

.trailer.connected-carousels .navigation li{width: 178px; height: 100px;}
.trailer.connected-carousels .arrow02{ top: -150px;}


/** Shared carousel styles **/

.connected-carousels .carousel {
    overflow: hidden;
    position: relative;
    z-index: 20   
}



.connected-carousels .carousel ul {

    width: 20000em;

    position: relative;

    list-style: none;

    margin: 0;

    padding: 0;

}



.connected-carousels .carousel li {float: left; position:relative;}
.connected-carousels .carousel li div{position: relative; padding-top: 56.25%;}


/** Stage carousel specific styles **/







/** Stage carousel controls **/



.connected-carousels .prev-stage,

.connected-carousels .next-stage {
    display: block;
    position: absolute;
    top: 0;
    width: 305px;
    height: 410px;
}



.connected-carousels .prev-stage {
    background:url(/assets/img/sub/pre_btn.png) no-repeat;
    left: 0;

}



.connected-carousels .next-stage {

    right: 0;

}



.connected-carousels .prev-stage.inactive,
.connected-carousels .next-stage.inactive {
    display: none;
}



.connected-carousels .prev-stage span,

.connected-carousels .next-stage span {

    display: none;

    position: absolute;

    top: 50%;

    width: 30px;

    height: 30px;

    text-align: center;

    background: #4E443C;

    color: #fff;

    text-decoration: none;

    text-shadow: 0 0 1px #000;

    font: 24px/27px Arial, sans-serif;

    -webkit-border-radius: 30px;

       -moz-border-radius: 30px;

            border-radius: 30px;

    -webkit-box-shadow: 0 0 2px #999;

       -moz-box-shadow: 0 0 2px #999;

            box-shadow: 0 0 2px #999;

}



.connected-carousels .prev-stage span {

    left: 20px;

}



.connected-carousels .next-stage span {

    right: 20px;

}



.connected-carousels .prev-stage:hover span,

.connected-carousels .next-stage:hover span {

    display: block;

}