/* Width and height of image */
.view {
	width: 500px;
	height: 236px;
	float: left;
	position: relative;
	box-shadow: 1px 1px 2px rgba(0,0,0,0.05);
	background: #333;
	-webkit-perspective: 500px;
	-moz-perspective: 500px;
	-o-perspective: 500px;
	-ms-perspective: 500px;
	perspective: 500px;
}

/* Width slice = widthImage/5 */
.view .slice{
	width: 100px;
	height: 100%;
	z-index: 100;
	background-size: 500px 236px;
    background-repeat: no-repeat;
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	-o-transform-style: preserve-3d;
	-ms-transform-style: preserve-3d;
	transform-style: preserve-3d;
	
	-webkit-transform-origin: left center;
	-moz-transform-origin: left center;
	-o-transform-origin: left center;
	-ms-transform-origin: left center;
	transform-origin: left center;
	
	-webkit-transition: -webkit-transform 150ms ease-in-out;
	-moz-transition: -moz-transform 150ms ease-in-out;
	-o-transition: -o-transform 150ms ease-in-out;
	-ms-transition: -ms-transform 150ms ease-in-out;
	transition: transform 150ms ease-in-out;
		
}

/* Width translate3d of s3, s4, s5 = widthImage/5 */
.view .s2, 
.view .s3, 
.view .s4, 
.view .s5 {
	-webkit-transform: translate3d(100px,0,0);
	-moz-transform: translate3d(100px,0,0);
	-o-transform: translate3d(100px,0,0);
	-ms-transform: translate3d(100px,0,0);
	transform: translate3d(100px,0,0);
}

/* Width background-position -widthImage/5*n (n = 0, 1, 2, 3, 4)  */
.view .s1 {
	background-position: 0px 0px;
}
.view .s2 {
	background-position: -100px 0px;
}
.view .s3 {
	background-position: -200px 0px;
}
.view .s4 {
	background-position: -300px 0px;
}
.view .s5 {
	background-position: -400px 0px;
}

/* Width overlay = widthImage/5 */
.view .overlay {
	width: 100px;
	height: 100%;
	opacity: 0;
	position: absolute;
	-webkit-transition: opacity 150ms ease-in-out;
	-moz-transition: opacity 150ms ease-in-out;
	-o-transition: opacity 150ms ease-in-out;
	-ms-transition: opacity 150ms ease-in-out;
	transition: opacity 150ms ease-in-out;
}

/* Width translate3d of s3, s4, s5 = (widthImage/5 - 1) */
.view:hover .s3{
	-webkit-transform: translate3d(99px,0,0) rotate3d(0,1,0,-55deg);
	-moz-transform: translate3d(99px,0,0) rotate3d(0,1,0,-55deg);
	-o-transform: translate3d(99px,0,0) rotate3d(0,1,0,-55deg);
	-ms-transform: translate3d(99px,0,0) rotate3d(0,1,0,-55deg);
	transform: translate3d(99px,0,0) rotate3d(0,1,0,-55deg);
}

.view:hover .s4{
	-webkit-transform: translate3d(99px,0,0) rotate3d(0,1,0,110deg);
	-moz-transform: translate3d(99px,0,0) rotate3d(0,1,0,110deg);
	-o-transform: translate3d(99px,0,0) rotate3d(0,1,0,110deg);
	-ms-transform: translate3d(99px,0,0) rotate3d(0,1,0,110deg);
	transform: translate3d(99px,0,0) rotate3d(0,1,0,110deg);
}

.view:hover .s5{
	-webkit-transform: translate3d(99px,0,0) rotate3d(0,1,0,-110deg);
	-moz-transform: translate3d(99px,0,0) rotate3d(0,1,0,-110deg);
	-o-transform: translate3d(99px,0,0) rotate3d(0,1,0,-110deg);
	-ms-transform: translate3d(99px,0,0) rotate3d(0,1,0,-110deg);
	transform: translate3d(99px,0,0) rotate3d(0,1,0,-110deg);
}

@media only screen and (min-width: 1024px){
    .view {
        width: 400px;
        height: 195px;
        -webkit-perspective: 400px;
        -moz-perspective: 400px;
        -o-perspective: 400px;
        -ms-perspective: 400px;
        perspective: 400px;
    }

    /* Width slice = widthImage/5 */
    .view .slice{
        width: 80px;
        background-size: 400px 195px;
    }

    /* Width translate3d of s3, s4, s5 = widthImage/5 */
    .view .s2, 
    .view .s3, 
    .view .s4, 
    .view .s5 {
        -webkit-transform: translate3d(80px,0,0);
        -moz-transform: translate3d(80px,0,0);
        -o-transform: translate3d(80px,0,0);
        -ms-transform: translate3d(80px,0,0);
        transform: translate3d(80px,0,0);
    }

    /* Width background-position -widthImage/5*n (n = 0, 1, 2, 3, 4)  */
    .view .s1 {
        background-position: 0px 0px;
    }
    .view .s2 {
        background-position: -80px 0px;
    }
    .view .s3 {
        background-position: -160px 0px;
    }
    .view .s4 {
        background-position: -240px 0px;
    }
    .view .s5 {
        background-position: -320px 0px;
    }

    /* Width overlay = widthImage/5 */
    .view .overlay {
        width: 80px;
    }

    /* Width translate3d of s3, s4, s5 = (widthImage/5 - 1) */
    .view:hover .s3{
        -webkit-transform: translate3d(79px,0,0) rotate3d(0,1,0,-55deg);
        -moz-transform: translate3d(79px,0,0) rotate3d(0,1,0,-55deg);
        -o-transform: translate3d(79px,0,0) rotate3d(0,1,0,-55deg);
        -ms-transform: translate3d(79px,0,0) rotate3d(0,1,0,-55deg);
        transform: translate3d(79px,0,0) rotate3d(0,1,0,-55deg);
    }

    .view:hover .s4{
        -webkit-transform: translate3d(79px,0,0) rotate3d(0,1,0,110deg);
        -moz-transform: translate3d(79px,0,0) rotate3d(0,1,0,110deg);
        -o-transform: translate3d(79px,0,0) rotate3d(0,1,0,110deg);
        -ms-transform: translate3d(79px,0,0) rotate3d(0,1,0,110deg);
        transform: translate3d(79px,0,0) rotate3d(0,1,0,110deg);
    }

    .view:hover .s5{
        -webkit-transform: translate3d(79px,0,0) rotate3d(0,1,0,-110deg);
        -moz-transform: translate3d(79px,0,0) rotate3d(0,1,0,-110deg);
        -o-transform: translate3d(79px,0,0) rotate3d(0,1,0,-110deg);
        -ms-transform: translate3d(79px,0,0) rotate3d(0,1,0,-110deg);
        transform: translate3d(79px,0,0) rotate3d(0,1,0,-110deg);
    } 
}


@media only screen and (min-width: 1366px){
    .view {
        width: 500px;
        height: 250px;
        -webkit-perspective: 500px;
        -moz-perspective: 500px;
        -o-perspective: 500px;
        -ms-perspective: 500px;
        perspective: 500px;
    }

    /* Width slice = widthImage/5 */
    .view .slice{
        width: 100px;
        background-size: 500px 250px;
    }

    /* Width translate3d of s3, s4, s5 = widthImage/5 */
    .view .s2, 
    .view .s3, 
    .view .s4, 
    .view .s5 {
        -webkit-transform: translate3d(100px,0,0);
        -moz-transform: translate3d(100px,0,0);
        -o-transform: translate3d(100px,0,0);
        -ms-transform: translate3d(100px,0,0);
        transform: translate3d(100px,0,0);
    }

    /* Width background-position -widthImage/5*n (n = 0, 1, 2, 3, 4)  */
    .view .s1 {
        background-position: 0px 0px;
    }
    .view .s2 {
        background-position: -100px 0px;
    }
    .view .s3 {
        background-position: -200px 0px;
    }
    .view .s4 {
        background-position: -300px 0px;
    }
    .view .s5 {
        background-position: -400px 0px;
    }

    /* Width overlay = widthImage/5 */
    .view .overlay {
        width: 100px;
    }

    /* Width translate3d of s3, s4, s5 = (widthImage/5 - 1) */
    .view:hover .s3{
        -webkit-transform: translate3d(99px,0,0) rotate3d(0,1,0,-55deg);
        -moz-transform: translate3d(99px,0,0) rotate3d(0,1,0,-55deg);
        -o-transform: translate3d(99px,0,0) rotate3d(0,1,0,-55deg);
        -ms-transform: translate3d(99px,0,0) rotate3d(0,1,0,-55deg);
        transform: translate3d(99px,0,0) rotate3d(0,1,0,-55deg);
    }

    .view:hover .s4{
        -webkit-transform: translate3d(99px,0,0) rotate3d(0,1,0,110deg);
        -moz-transform: translate3d(99px,0,0) rotate3d(0,1,0,110deg);
        -o-transform: translate3d(99px,0,0) rotate3d(0,1,0,110deg);
        -ms-transform: translate3d(99px,0,0) rotate3d(0,1,0,110deg);
        transform: translate3d(99px,0,0) rotate3d(0,1,0,110deg);
    }

    .view:hover .s5{
        -webkit-transform: translate3d(99px,0,0) rotate3d(0,1,0,-110deg);
        -moz-transform: translate3d(99px,0,0) rotate3d(0,1,0,-110deg);
        -o-transform: translate3d(99px,0,0) rotate3d(0,1,0,-110deg);
        -ms-transform: translate3d(99px,0,0) rotate3d(0,1,0,-110deg);
        transform: translate3d(99px,0,0) rotate3d(0,1,0,-110deg);
    }
}
@media only screen and (min-width: 1024px) {
    .view {
        width: 460px;
        height: 230px;
        -webkit-perspective: 460px;
        -moz-perspective: 460px;
        -o-perspective: 460px;
        -ms-perspective: 460px;
        perspective: 460px;
    }

    /* Width slice = widthImage/5 */
    .view .slice{
        width: 92px;
        background-size: 460px 230px;
    }

    /* Width translate3d of s3, s4, s5 = widthImage/5 */
    .view .s2, 
    .view .s3, 
    .view .s4, 
    .view .s5 {
        -webkit-transform: translate3d(92px,0,0);
        -moz-transform: translate3d(92px,0,0);
        -o-transform: translate3d(92px,0,0);
        -ms-transform: translate3d(92px,0,0);
        transform: translate3d(92px,0,0);
    }

    /* Width background-position -widthImage/5*n (n = 0, 1, 2, 3, 4)  */
    .view .s1 {
        background-position: 0px 0px;
    }
    .view .s2 {
        background-position: -92px 0px;
    }
    .view .s3 {
        background-position: -184px 0px;
    }
    .view .s4 {
        background-position: -276px 0px;
    }
    .view .s5 {
        background-position: -368px 0px;
    }

    /* Width overlay = widthImage/5 */
    .view .overlay {
        width: 92px;
    }

    /* Width translate3d of s3, s4, s5 = (widthImage/5 - 1) */
    .view:hover .s3{
        -webkit-transform: translate3d(91px,0,0) rotate3d(0,1,0,-55deg);
        -moz-transform: translate3d(91px,0,0) rotate3d(0,1,0,-55deg);
        -o-transform: translate3d(91px,0,0) rotate3d(0,1,0,-55deg);
        -ms-transform: translate3d(91px,0,0) rotate3d(0,1,0,-55deg);
        transform: translate3d(91px,0,0) rotate3d(0,1,0,-55deg);
    }

    .view:hover .s4{
        -webkit-transform: translate3d(91px,0,0) rotate3d(0,1,0,110deg);
        -moz-transform: translate3d(91px,0,0) rotate3d(0,1,0,110deg);
        -o-transform: translate3d(91px,0,0) rotate3d(0,1,0,110deg);
        -ms-transform: translate3d(91px,0,0) rotate3d(0,1,0,110deg);
        transform: translate3d(91px,0,0) rotate3d(0,1,0,110deg);
    }

    .view:hover .s5{
        -webkit-transform: translate3d(91px,0,0) rotate3d(0,1,0,-110deg);
        -moz-transform: translate3d(91px,0,0) rotate3d(0,1,0,-110deg);
        -o-transform: translate3d(91px,0,0) rotate3d(0,1,0,-110deg);
        -ms-transform: translate3d(v,0,0) rotate3d(0,1,0,-110deg);
        transform: translate3d(91px,0,0) rotate3d(0,1,0,-110deg);
    }
    
     .view div.view-back {
        width: 97px;
    }
}
@media only screen and (min-width: 1600px) {
    .view {
        width: 500px;
        height: 250px;
        -webkit-perspective: 500px;
        -moz-perspective: 500px;
        -o-perspective: 500px;
        -ms-perspective: 500px;
        perspective: 500px;
    }

    /* Width slice = widthImage/5 */
    .view .slice{
        width: 100px;
        background-size: 500px 250px;
    }

    /* Width translate3d of s3, s4, s5 = widthImage/5 */
    .view .s2, 
    .view .s3, 
    .view .s4, 
    .view .s5 {
        -webkit-transform: translate3d(100px,0,0);
        -moz-transform: translate3d(100px,0,0);
        -o-transform: translate3d(100px,0,0);
        -ms-transform: translate3d(100px,0,0);
        transform: translate3d(100px,0,0);
    }

    /* Width background-position -widthImage/5*n (n = 0, 1, 2, 3, 4)  */
    .view .s1 {
        background-position: 0px 0px;
    }
    .view .s2 {
        background-position: -100px 0px;
    }
    .view .s3 {
        background-position: -200px 0px;
    }
    .view .s4 {
        background-position: -300px 0px;
    }
    .view .s5 {
        background-position: -400px 0px;
    }

    /* Width overlay = widthImage/5 */
    .view .overlay {
        width: 100px;
    }

    /* Width translate3d of s3, s4, s5 = (widthImage/5 - 1) */
    .view:hover .s3{
        -webkit-transform: translate3d(99px,0,0) rotate3d(0,1,0,-55deg);
        -moz-transform: translate3d(99px,0,0) rotate3d(0,1,0,-55deg);
        -o-transform: translate3d(99px,0,0) rotate3d(0,1,0,-55deg);
        -ms-transform: translate3d(99px,0,0) rotate3d(0,1,0,-55deg);
        transform: translate3d(99px,0,0) rotate3d(0,1,0,-55deg);
    }

    .view:hover .s4{
        -webkit-transform: translate3d(99px,0,0) rotate3d(0,1,0,110deg);
        -moz-transform: translate3d(99px,0,0) rotate3d(0,1,0,110deg);
        -o-transform: translate3d(99px,0,0) rotate3d(0,1,0,110deg);
        -ms-transform: translate3d(99px,0,0) rotate3d(0,1,0,110deg);
        transform: translate3d(99px,0,0) rotate3d(0,1,0,110deg);
    }

    .view:hover .s5{
        -webkit-transform: translate3d(99px,0,0) rotate3d(0,1,0,-110deg);
        -moz-transform: translate3d(99px,0,0) rotate3d(0,1,0,-110deg);
        -o-transform: translate3d(99px,0,0) rotate3d(0,1,0,-110deg);
        -ms-transform: translate3d(99px,0,0) rotate3d(0,1,0,-110deg);
        transform: translate3d(99px,0,0) rotate3d(0,1,0,-110deg);
    }
    
     .view div.view-back {
        width: 105px;
    }
}
@media only screen and (min-width: 1920px){
    .view {
        width: 600px;
        height: 300px;
        -webkit-perspective: 600px;
        -moz-perspective: 600px;
        -o-perspective: 600px;
        -ms-perspective: 600px;
        perspective: 600px;
    }

    /* Width slice = widthImage/5 */
    .view .slice{
        width: 120px;
        background-size: 600px 300px;
    }

    /* Width translate3d of s3, s4, s5 = widthImage/5 */
    .view .s2, 
    .view .s3, 
    .view .s4, 
    .view .s5 {
        -webkit-transform: translate3d(120px,0,0);
        -moz-transform: translate3d(120px,0,0);
        -o-transform: translate3d(120px,0,0);
        -ms-transform: translate3d(120px,0,0);
        transform: translate3d(120px,0,0);
    }

    /* Width background-position -widthImage/5*n (n = 0, 1, 2, 3, 4)  */
    .view .s1 {
        background-position: 0px 0px;
    }
    .view .s2 {
        background-position: -120px 0px;
    }
    .view .s3 {
        background-position: -240px 0px;
    }
    .view .s4 {
        background-position: -360px 0px;
    }
    .view .s5 {
        background-position: -480px 0px;
    }

    /* Width overlay = widthImage/5 */
    .view .overlay {
        width: 120px;
    }

    /* Width translate3d of s3, s4, s5 = (widthImage/5 - 1) */
    .view:hover .s3{
        -webkit-transform: translate3d(119px,0,0) rotate3d(0,1,0,-55deg);
        -moz-transform: translate3d(119px,0,0) rotate3d(0,1,0,-55deg);
        -o-transform: translate3d(119px,0,0) rotate3d(0,1,0,-55deg);
        -ms-transform: translate3d(119px,0,0) rotate3d(0,1,0,-55deg);
        transform: translate3d(119px,0,0) rotate3d(0,1,0,-55deg);
    }

    .view:hover .s4{
        -webkit-transform: translate3d(119px,0,0) rotate3d(0,1,0,110deg);
        -moz-transform: translate3d(119px,0,0) rotate3d(0,1,0,110deg);
        -o-transform: translate3d(119px,0,0) rotate3d(0,1,0,110deg);
        -ms-transform: translate3d(119px,0,0) rotate3d(0,1,0,110deg);
        transform: translate3d(119px,0,0) rotate3d(0,1,0,110deg);
    }

    .view:hover .s5{
        -webkit-transform: translate3d(119px,0,0) rotate3d(0,1,0,-110deg);
        -moz-transform: translate3d(119px,0,0) rotate3d(0,1,0,-110deg);
        -o-transform: translate3d(119px,0,0) rotate3d(0,1,0,-110deg);
        -ms-transform: translate3d(119px,0,0) rotate3d(0,1,0,-110deg);
        transform: translate3d(119px,0,0) rotate3d(0,1,0,-110deg);
    }
    
    .view div.view-back {
        width: 125px;
    }
}
@media only screen and (min-width: 2560px){
    .view {
        width: 800px;
        height: 400px;
        -webkit-perspective: 800px;
        -moz-perspective: 800px;
        -o-perspective: 800px;
        -ms-perspective: 800px;
        perspective: 800px;
    }

    /* Width slice = widthImage/5 */
    .view .slice{
        width: 160px;
        background-size: 800px 400px;
    }
    
    .view .s2, 
    .view .s3, 
    .view .s4, 
    .view .s5 {
        -webkit-transform: translate3d(160px,0,0);
        -moz-transform: translate3d(160px,0,0);
        -o-transform: translate3d(160px,0,0);
        -ms-transform: translate3d(160px,0,0);
        transform: translate3d(160px,0,0);
    }
    
    .view .s1 {
        background-position: 0px 0px;
    }
    .view .s2 {
        background-position: -160px 0px;
    }
    .view .s3 {
        background-position: -320px 0px;
    }
    .view .s4 {
        background-position: -480px 0px;
    }
    .view .s5 {
        background-position: -640px 0px;
    }
    
    .view .overlay {
        width: 160px;
    }

    /* Width translate3d of s3, s4, s5 = (widthImage/5 - 1) */
    .view:hover .s3{
        -webkit-transform: translate3d(159px,0,0) rotate3d(0,1,0,-55deg);
        -moz-transform: translate3d(159px,0,0) rotate3d(0,1,0,-55deg);
        -o-transform: translate3d(159px,0,0) rotate3d(0,1,0,-55deg);
        -ms-transform: translate3d(159px,0,0) rotate3d(0,1,0,-55deg);
        transform: translate3d(159px,0,0) rotate3d(0,1,0,-55deg);
    }

    .view:hover .s4{
        -webkit-transform: translate3d(159px,0,0) rotate3d(0,1,0,110deg);
        -moz-transform: translate3d(159px,0,0) rotate3d(0,1,0,110deg);
        -o-transform: translate3d(159px,0,0) rotate3d(0,1,0,110deg);
        -ms-transform: translate3d(159px,0,0) rotate3d(0,1,0,110deg);
        transform: translate3d(159px,0,0) rotate3d(0,1,0,110deg);
    }

    .view:hover .s5{
        -webkit-transform: translate3d(159px,0,0) rotate3d(0,1,0,-110deg);
        -moz-transform: translate3d(159px,0,0) rotate3d(0,1,0,-110deg);
        -o-transform: translate3d(159px,0,0) rotate3d(0,1,0,-110deg);
        -ms-transform: translate3d(159px,0,0) rotate3d(0,1,0,-110deg);
        transform: translate3d(159px,0,0) rotate3d(0,1,0,-110deg);
    }
    
    .view div.view-back {
        width: 170px;
    }
}