/*
+----------------------------------------------------------------+
    Carousel
+----------------------------------------------------------------+
*/
.carousel {
    margin: 0 auto;
    position: relative;
    /*width: 960px;*/
	width: 970px;
}

.carousel-wrapper {height: 430px}

.carousel-box {
    background-color: #CFCFCF;
    height: 124px;
    left: 50%;
    list-style: none;
    overflow: hidden;
    position: absolute;
    top: 50%;
    margin: -62px 0 0 -100px;
    width: 200px;
    z-index: -1;

    -webkit-box-shadow: 0px 0px 10px 4px rgba(44, 42, 41, 0.05);
       -moz-box-shadow: 0px 0px 10px 4px rgba(44, 42, 41, 0.05);
        -ms-box-shadow: 0px 0px 10px 4px rgba(44, 42, 41, 0.05);
         -o-box-shadow: 0px 0px 10px 4px rgba(44, 42, 41, 0.05);
            box-shadow: 0px 0px 10px 4px rgba(44, 42, 41, 0.05);

    -webkit-transition: 0.5s ease-out;
       -moz-transition: 0.5s ease-out;
        -ms-transition: 0.5s ease-out;
         -o-transition: 0.5s ease-out;
            transition: 0.5s ease-out;
}

.carousel-box.is-active {
    z-index: 4;
    width:500px;
    height: 350px;
    left: 43%;
    margin: 40px 0 0 -192px;
    top: 0;
}

.carousel-box.left,
.carousel-box.right {
    width: 385px;
    height: 250px;
}

.carousel-box.left {
    left: 4%;
    margin: 0;
    top: 90px;
    z-index: 2;
    transform: perspective(600px) rotateY(20deg);
    -webkit-transform: perspective(600) rotateY(20deg);
}

.carousel-box.right {
    left: 56%;
    margin: 0;
    top: 90px;
    z-index: 2;
    transform: perspective(600px) rotateY(-20deg);
    -webkit-transform: perspective(600) rotateY(-20deg);
}

.nav-left,
.nav-right {
    background: url('arrow.png') no-repeat left 5px;
    cursor: pointer;
    height: 60px;
    position: absolute;
    top: 185px;
    width: 44px;
}

.nav-left { left: -5px }

.nav-right {
    right: -5px;
    background-position: right -121px;
}

@media only screen and (min-width: 1170px) {
	.carousel {
		width: 1170px;
	}
	
	.nav-left { left: -2px }

	.nav-right {
		right: 12px;
		background-position: right -121px;
	}
	
	.carousel-box.right {
		left: 62%;
	}
}

@media only screen and (min-width: 1281px) {
	.carousel {
		width: 1280px;
	}
	
	.nav-right {
		right: 13px;
	}
	
	.carousel-box.right {
		left: 65%;
	}
	
	
	.carousel-box.is-active {
		width: 710px;
		height: 450px;
		left: 38%;
	}

	.carousel-box.left,
	.carousel-box.right {
		width: 385px;
		height: 310px;
		top: 100px;
	}
	
	.nav-left,
	.nav-right {
		top: 215px;
	}
}



/*@media only screen and (max-width : 1919px) {
	.carousel-box.is-active {
		z-index: 4;
		width: 710px;
		height: 450px;
		left: 38%;
		margin: 35px 0 0 -192px;
		top: 0;
	}

	.carousel-box.left,
	.carousel-box.right {
		width: 385px;
		height: 310px;
	}
	
	.carousel-box.left {
		left: 7%;
		margin: 0;
		top: 110px;
		z-index: 2;
		transform: perspective(600px) rotateY(20deg);
		-webkit-transform: perspective(600) rotateY(20deg);
	}

	.carousel-box.right {
		left: 66%;
		margin: 0;
		top: 110px;
		z-index: 2;
		transform: perspective(600px) rotateY(-20deg);
		-webkit-transform: perspective(600) rotateY(-20deg);
	}
}

@media only screen and (max-width : 1280px) {
	.carousel-box.is-active {
		z-index: 4;
		width: 550px;
		height: 360px;
		left: 38%;
		margin: 35px 0 0 -192px;
		top: 0;
	}

	.carousel-box.left,
	.carousel-box.right {
		width: 335px;
		height: 260px;
	}
	
	.carousel-box.left {
		left: -7%;
		margin: 0;
		top: 80px;
		z-index: 2;
		transform: perspective(600px) rotateY(20deg);
		-webkit-transform: perspective(600) rotateY(20deg);
	}

	.carousel-box.right {
		left: 66%;
		margin: 0;
		top: 80px;
		z-index: 2;
		transform: perspective(600px) rotateY(-20deg);
		-webkit-transform: perspective(600) rotateY(-20deg);
	}
	
	.nav-left { 
		left: -100px;
		top: 180px; 
	}

	.nav-right {
		right: -100px;
		background-position: right -121px;
		top: 180px;
	}
}*/