/* 
 * Slider CSS
 * The display: inline-block setting for .item.active is the only required CSS 
 * call here. The rest are just to make things look better and show what can 
 * be done.
 *
*/
.slider .item {
    position: relative;
    margin-bottom: 50px;
    text-align: center;
    color: grey;
}
.slider .item.active {
    display: inline-block;
    margin-left: 2.6%;
    margin-right: 2.6%;
}
.slider .item.active:hover { 
    cursor: pointer; 
}
.slider .item.active.focused {
    color: black;
    font-weight: bold;
}
.slider .item span {
    padding-top: 5px;
    margin-top: 5px;
    margin-bottom: 0;
}
.slider .carousel-control:hover,
.slider .carousel-control:focus,
.slider .carousel-control {
    filter: alpha(opacity=100);
    opacity: .5;
    background-image: none !important;
    color: grey;
    top: 36%;
    transform: translateY(-50%);
    cursor: pointer;
}
.slider .carousel-control:hover,
.slider .carousel-control:focus {
    color: black;
}
.slider .carousel-inner {
    text-align: center;
    margin-bottom: 20px;
}
.slider .carousel-indicators {
    bottom: -30px;
    z-index: 3 !important;
}
.slider .carousel-indicators li {
    height: 9px;
    width: 9px;
    border-color: black;
}
.slider .carousel-indicators li.active {
    background-color: black !important;
}