/*
* @author: INNOV8 Interactive, Michael Lilli
* @author: William Khoe
*/

.featured-brands {
    padding-top: 17px;
}

    .featured-brands > h4 {
        margin: 0 0 17px 0;
        color: #444;
        font-weight: 700;
        font-size: 16px;
    }

    .featured-brands .carousel {
        margin: 0 0 -10px 0;
    }

    .featured-brands .elastislide-wrapper {
        overflow: hidden;
        width: 838px;
    }

    .featured-brands .elastislide-carousel {
        width: 840px;
    }

    .featured-brands .carousel .elastislide-wrapper .elastislide-carousel ul {
        margin: 0 0 0 -2px;
    }

        .featured-brands .carousel .elastislide-wrapper .elastislide-carousel ul li {
            border-left: 1px solid #CCC;
        }

            .featured-brands .carousel .elastislide-wrapper .elastislide-carousel ul li a {
                display: block;
                padding: 10px 9px;
                border-left: 1px solid #EFEFEF;
            }

    .featured-brands > .carousel nav .prev, .featured-brands > .carousel nav .next {
        position: absolute;
        overflow: hidden;
        top: 0;
        z-index: 10;
        width: 25px;
        height: 70px;
        margin: 0;
        padding: 0;
        background: url(/img/ui/icon-sprite.png) no-repeat 0 0;
        text-indent: -9999px;
        opacity: 0.7;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
        filter: alpha(opacity=70);
        cursor: pointer;
    }

    .featured-brands > .carousel nav .prev {
        left: 0;
        background-position: 0 -1266px;
    }

    .featured-brands > .carousel nav .next {
        right: 0;
        background-position: 100% -1183px;
    }

        .featured-brands > .carousel nav .next:hover,
        .featured-brands > .carousel nav .prev:hover {
            opacity: 1.0;
            -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
            filter: alpha(opacity=100);
        }

    .featured-brands > .carousel nav .disabled,
    .featured-brands > .carousel nav .disabled:hover {
        cursor: default;
        opacity: 0.3;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
        filter: alpha(opacity=30);
        pointer-events: none;
    }

/* Tablet Portrait */
@media only screen and (max-width: 1023px) and (min-width: 768px) {
    .featured-brands .elastislide-wrapper {
        overflow: hidden;
        width: 610px;
    }

    .featured-brands .elastislide-carousel {
        width: 612px;
    }

    .featured-brands .carousel .elastislide-wrapper .elastislide-carousel ul li a img {
        width: 100px;
        height: 68px;
    }
}

/* Mobile Portrait & Landscape */

@media only screen and (max-width:767px) {
    .featured-brands {
    }

      .featured-brands > .carousel nav .prev, .featured-brands > .carousel nav .next {
        position: absolute;
        overflow: hidden;
        top: 0;
        z-index: 10;
        width: 25px;
        height: 70px;
        margin: 0;
        padding: 0;
        background: url(/img/ui/icon-sprite.png) no-repeat 0 0;
        text-indent: -9999px;
        opacity: 0.7;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
        filter: alpha(opacity=70);
        cursor: pointer;
    }

    .featured-brands > .carousel nav .prev {
        left: 0;
        background-position: 0 -1266px;
    }

    .featured-brands > .carousel nav .next {
        right: 0;
        background-position: 100% -1183px;
    }

        .featured-brands > .carousel nav .next:hover,
        .featured-brands > .carousel nav .prev:hover {
            opacity: 1.0;
            -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
            filter: alpha(opacity=100);
        }

    .featured-brands > .carousel nav .disabled,
    .featured-brands > .carousel nav .disabled:hover {
        cursor: default;
        opacity: 0.3;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
        filter: alpha(opacity=30);
        pointer-events: none;
    }

        .featured-brands .elastislide-wrapper {
            overflow: hidden;
            width: 530px;
        }

        .featured-brands .elastislide-carousel {
            width: 530px;
        }

        .featured-brands .carousel .elastislide-wrapper .elastislide-carousel ul li a img {
            width: 80px;
            height: 48px;
        }
}

/* Mobile Landscape */

@media only screen and (min-width:321px) and (max-width:767px) {
     .featured-brands .elastislide-wrapper {
            overflow: hidden;
            width: 200px;
        }

        .featured-brands .elastislide-carousel {
            width: 200px;
        }

        .featured-brands .carousel .elastislide-wrapper .elastislide-carousel ul li a img {
            width: 80px;
            height: 48px;
        }
}

/* Mobile Portrait */

@media only screen and (max-width:320px) {

     .featured-brands .elastislide-wrapper {
            overflow: hidden;
            width: 200px;
        }

        .featured-brands .elastislide-carousel {
            width: 200px;
        }

        .featured-brands .carousel .elastislide-wrapper .elastislide-carousel ul li a img {
            width: 80px;
            height: 48px;
        }
}