/* classes for the title and description */

.carousel .title {
    color: #0a0299;
}

.carousel .description {
    font-size: 8pt;
}


/* mostly just default settings under this line */

.carousel {
    position: relative;
}

.carousel .btn {
    position: absolute;
    top: 50%;
    cursor: pointer;
    font-size: 20px;
    color: #0a0299;
}

.carousel {
    overflow: scroll;
    width: 1024px;
    height: 400px;
}

/* the container for the title and description */
.carousel .text {
    position: absolute;
    bottom: 0px;
    z-index: 9000;
    width: 100%;
    margin: 0 auto;
    color: #000;
    padding: 5px;
    text-align: center;
    font-family: Sans-Serif;
    font-size: 10pt;
}

/* included for the demo */

.gradient {
    background: #4adee2;
    background: -moz-linear-gradient(top,  #4adee2 50%, #009aff 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(50%,#4adee2), color-stop(100%,#009aff));
    background: -webkit-linear-gradient(top,  #4adee2 50%,#009aff 100%);
    background: -o-linear-gradient(top,  #4adee2 50%,#009aff 100%);
    background: -ms-linear-gradient(top,  #4adee2 50%,#009aff 100%);
    background: linear-gradient(top,  #4adee2 50%,#009aff 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4adee2', endColorstr='#009aff',GradientType=0 );
}

.carousel img {
    box-shadow: 0px 0px 12px #000;
    border: none;
}

.carousel .text div {
    font-weight: bold;
}

.carousel .left {
    right: 10px;
}

.carousel .right {
    left: 10px;
}

.carousel .btn:hover {
    color: #f00;
}