@charset "utf-8"; /** Stage container **/ .carousel-stage ul { } .carousel-stage ul li { max-width:800px; width:100%; text-align:center; } @media all and (max-width:640px) { .carousel-stage ul li { max-width:500px;} } .connected-carousels .stage { margin: 20px auto; position: relative; } .connected-carousels .stage li { position:relative; width:100%; } .connected-carousels .stage li .script { margin-top:20px; line-height:1.7; } .connected-carousels .stage li .script h3 { font-size:25px; font-weight:600; color:#000; } .connected-carousels .photo-credits { position: absolute; right: 25px; bottom: 25px; font-size: 15px; color: #fff; text-shadow: 0 0 1px rgba(0, 0, 0, 0.85); opacity: .66; } .connected-carousels .photo-credits a { color: #fff; } /** Navigation container **/ .connected-carousels .navigation { width: 1040px; margin: 50px 0 0 -120px; position: relative; } @media all and (max-width:640px) { .connected-carousels .navigation { width:500px; margin: 0px;} } /** Shared carousel styles **/ .connected-carousels .carousel { overflow: hidden; position: relative; } .connected-carousels .carousel ul { width: 10000em; position: relative; list-style: none; margin: 0; padding: 0;} .connected-carousels .carousel li { float: left;} /** Stage carousel specific styles **/ .connected-carousels .carousel-stage {} /** Navigation carousel specific styles **/ .connected-carousels .carousel-navigation { height: 150px; background: #fff; } .connected-carousels .carousel-navigation li { cursor: pointer; } .connected-carousels .carousel-navigation li img { display: block; border: 5px solid #fff; } .connected-carousels .carousel-navigation li.active img { border-color: #ef6451; } /** Stage carousel controls **/ .connected-carousels .prev-stage, .connected-carousels .next-stage { display: block; position: absolute; top: 15px; width: 35px; height: 410px; color: #fff; } .connected-carousels .prev-stage { 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; } /** Navigation carousel controls **/ .connected-carousels .prev-navigation, .connected-carousels .next-navigation { display: block; position: absolute; width: 30px; height: 30px; /* background: #4E443C; */ /* color: #fff; */ text-decoration: none; /* text-shadow: 0 0 1px #000; */ font: 35px 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-navigation { left: -25px; top: 55px; text-indent: 6px; } .connected-carousels .next-navigation { right: -25px; top: 55px; text-indent: 20px; } .connected-carousels .prev-navigation.inactive, .connected-carousels .next-navigation.inactive { opacity: 1; cursor: default; }