﻿/* Carousel */

.carousel-wrapper {
    position: relative;
}

    .carousel-wrapper .nav {
        -moz-transition: opacity 0.2s ease-in-out;
        -webkit-transition: opacity 0.2s ease-in-out;
        -ms-transition: opacity 0.2s ease-in-out;
        transition: opacity 0.2s ease-in-out;
        background: url("images/overlay.png");
        background: rgba(24, 24, 24, 0.75);
        /*height: 100%;*/
        /* added aj*/ height: 300px;
        opacity: 0;
        position: absolute;
        top: 0;
        width: 5em;
        z-index: 1;
    }

        .carousel-wrapper .nav:before {
            -moz-transition: opacity 0.2s ease-in-out;
            -webkit-transition: opacity 0.2s ease-in-out;
            -ms-transition: opacity 0.2s ease-in-out;
            transition: opacity 0.2s ease-in-out;
            background-image: url("images/arrow.svg");
            background-position: center center;
            background-repeat: no-repeat;
            background-size: 85%;
            content: '';
            display: block;
            height: 100%;
            opacity: 0;
            position: absolute;
            width: 100%;
        }

        .carousel-wrapper .nav.left {
            left: 0;
        }

            .carousel-wrapper .nav.left:before {
                -moz-transform: scaleX(-1);
                -webkit-transform: scaleX(-1);
                -ms-transform: scaleX(-1);
                transform: scaleX(-1);
                -ms-filter: "FlipH";
                filter: FlipH;
            }

        .carousel-wrapper .nav.right {
            right: 0;
        }

    .carousel-wrapper:hover .nav {
        opacity: 1;
    }

        .carousel-wrapper:hover .nav:before {
            opacity: 0.75;
        }

        .carousel-wrapper:hover .nav:hover:before {
            opacity: 1;
        }

    .carousel-wrapper.no-scroll .nav {
        display: none;
    }

.carousel {
    -webkit-overflow-scrolling: touch;
    line-height: 0;
    margin-bottom: 4em;
    overflow-x: auto;
    overflow-y: hidden;
    position: relative;
    text-align: center;
    white-space: nowrap;
    width: 100%;
}

    .carousel article {
        display: inline-block;
    }

        .carousel article img {
            border-radius: 0;
            width: 22em;
            /* added aj height: 22em;*/
        }
