﻿.container3dcarousal {
    margin: 0 auto;
    width: 120px;
    height: 80px;
    position: relative;
    perspective: 1000px;
}

.carousal {
    height: 100%;
    width: 100%;
    position: absolute;
    transform-style: preserve-3d;
    -ms-transform-style: none;
    transition: transform 1s;
}

.item {
    display: block;
    position: absolute;
    background: #000;
    width: 120px;
    height: 96px;
    line-height: 96px;
    font-size: 5em;
    text-align: center;
    color: #FFF;
    opacity: 0.95;
    border-radius: 0px;
}

.img-carousel {
    max-height: 96px;
    max-width: 120px;
    width: 120px;
    height: 96px;
    margin-bottom: 10px;
}

.a {
    transform: rotateY(0deg) translateZ(120px);
    /*background: #ed1c24;*/
    background: #FFF;
}

.b {
    transform: rotateY(60deg) translateZ(120px);
    /*background: #0072bc;*/
    background: #FFF;
    
}

.c {
    transform: rotateY(120deg) translateZ(120px);
    /*background: #39b54a;*/
    background: #FFF;
}

.d {
    transform: rotateY(180deg) translateZ(120px);
    /*background: #f26522;*/
    background: #FFF;
}

.e {
    transform: rotateY(240deg) translateZ(120px);
    /*background: #630460;*/
    background: #FFF;
}

.f {
    transform: rotateY(300deg) translateZ(120px);
    /*background: #8c6239;*/
    background: #FFF;
}

.next, .prev {
    color: #444;
    position: absolute;
    top: 100px;
    padding: 1em 2em;
    cursor: pointer;
    background: #CCC;
    border-radius: 5px;
    border-top: 1px solid #FFF;
    box-shadow: 0 5px 0 #999;
    transition: box-shadow 0.1s, top 0.1s;
}

    .next:hover, .prev:hover {
        color: #000;
    }

    .next:active, .prev:active {
        top: 104px;
        box-shadow: 0 1px 0 #999;
    }

.next {
    right: 5em;
}

.prev {
    left: 5em;
}
