.view {
	position: relative;
	-webkit-perspective: 500px;
	-moz-perspective: 500px;
	-o-perspective: 500px;
	-ms-perspective: 500px;
	perspective: 500px;
}
.view .left-fold,
.view .right-fold {
	background: black;
	position: absolute;
	width: 99px;
	height: 100%;
}
.view .left-fold {
	left: 0;
	top: 0;
}
.view .right-fold {
	right: 0;
	top: 0;
}
.view .slice {
	height: 100%;
	z-index: 100;
	position: absolute;
	background-repeat: no-repeat;
	background-size: cover;
	
	-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 1050ms ease-in-out;
	-moz-transition: -moz-transform 1050ms ease-in-out;
	-o-transition: -o-transform 1050ms ease-in-out;
	-ms-transition: -ms-transform 1050ms ease-in-out;
	transition: transform 1050ms ease-in-out;
}

.view .s1 {
	-webkit-transform: translate3d(0,0,0);
	-moz-transform: translate3d(0,0,0);
	-o-transform: translate3d(0,0,0);
	-ms-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}
.view .s2 {
	-webkit-transform: translate3d(0,0,0);
	-moz-transform: translate3d(0,0,0);
	-o-transform: translate3d(0,0,0);
	-ms-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}
.view .s3 {
	-webkit-transform: translate3d(0,0,0);
	-moz-transform: translate3d(0,0,0);
	-o-transform: translate3d(0,0,0);
	-ms-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}
.view .s4 {
	-webkit-transform: translate3d(66px,0,0);
	-moz-transform: translate3d(66px,0,0);
	-o-transform: translate3d(66px,0,0);
	-ms-transform: translate3d(66px,0,0);
	transform: translate3d(66px,0,0);
}
.view .s5 {
	-webkit-transform: translate3d(33px,0,0);
	-moz-transform: translate3d(33px,0,0);
	-o-transform: translate3d(33px,0,0);
	-ms-transform: translate3d(33px,0,0);
	transform: translate3d(33px,0,0);
}
.view .s6 {
	-webkit-transform: translate3d(0,0,0);
	-moz-transform: translate3d(0,0,0);
	-o-transform: translate3d(0,0,0);
	-ms-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}


.view .s1,
.view .s2,
.view .s3 {
	background-position: left top;
}
.view .s4,
.view .s5,
.view .s6 {
	background-position: right top;
}
.view .s1,
.view .s6 {
	width: 99px;
	z-index: 1;
}
.view .s2,
.view .s5 {
	width: 66px;
	z-index: 2;
}
.view .s3,
.view .s4 {
	width: 33px;
	z-index: 3;
}

.view .overlay {
	width: 100%;
	height: 100%;
	opacity: 1;
	position: absolute;
	-webkit-transition: opacity 1050ms ease-in-out;
	-moz-transition: opacity 1050ms ease-in-out;
	-o-transition: opacity 1050ms ease-in-out;
	-ms-transition: opacity 1050ms ease-in-out;
	transition: opacity 1050ms ease-in-out;
}
.view:hover .overlay {
	opacity: 1;
}

/* folding customization */
.view:hover .s1 {
	-webkit-transform: translate3d(30px,0,0) rotate3d(0,1,0,45deg);
	-moz-transform: translate3d(30px,0,0) rotate3d(0,1,0,45deg);
	-o-transform: translate3d(30px,0,0) rotate3d(0,1,0,45deg);
	-ms-transform: translate3d(30px,0,0) rotate3d(0,1,0,45deg);
	transform: translate3d(30px,0,0) rotate3d(0,1,0,45deg);
}
.view:hover .s2 {
	-webkit-transform: translate3d(30px,0,0) rotate3d(0,1,0,45deg);
	-moz-transform: translate3d(30px,0,0) rotate3d(0,1,0,45deg);
	-o-transform: translate3d(30px,0,0) rotate3d(0,1,0,45deg);
	-ms-transform: translate3d(30px,0,0) rotate3d(0,1,0,45deg);
	transform: translate3d(30px,0,0) rotate3d(0,1,0,45deg);
}
.view:hover .s3 {
	-webkit-transform: translate3d(30px,0,0) rotate3d(0,1,0,45deg);
	-moz-transform: translate3d(30px,0,0) rotate3d(0,1,0,45deg);
	-o-transform: translate3d(30px,0,0) rotate3d(0,1,0,45deg);
	-ms-transform: translate3d(30px,0,0) rotate3d(0,1,0,45deg);
	transform: translate3d(30px,0,0) rotate3d(0,1,0,45deg);
}
.view:hover .s4 {
	-webkit-transform: translate3d(47px,0,0) rotate3d(0,1,0,45deg);
	-moz-transform: translate3d(47px,0,0) rotate3d(0,1,0,45deg);
	-o-transform: translate3d(47px,0,0) rotate3d(0,1,0,45deg);
	-ms-transform: translate3d(47px,0,0) rotate3d(0,1,0,45deg);
	transform: translate3d(47px,0,0) rotate3d(0,1,0,45deg);
}
.view:hover .s5 {
	-webkit-transform: translate3d(23px,0,0) rotate3d(0,1,0,45deg);
	-moz-transform: translate3d(23px,0,0) rotate3d(0,1,0,45deg);
	-o-transform: translate3d(23px,0,0) rotate3d(0,1,0,45deg);
	-ms-transform: translate3d(23px,0,0) rotate3d(0,1,0,45deg);
	transform: translate3d(23px,0,0) rotate3d(0,1,0,45deg);
}
.view:hover .s6 {
	-webkit-transform: translate3d(0,0,0) rotate3d(0,1,0,45deg);
	-moz-transform: translate3d(0,0,0) rotate3d(0,1,0,45deg);
	-o-transform: translate3d(0,0,0) rotate3d(0,1,0,45deg);
	-ms-transform: translate3d(0,0,0) rotate3d(0,1,0,45deg);
	transform: translate3d(0,0,0) rotate3d(0,1,0,45deg);
}

.view .s1 > .overlay {
	/*background: -moz-linear-gradient(left, rgba(0,0,0,0.2) 0%, rgba(255,255,255,0.1) 100%);
	background: -webkit-linear-gradient(left, rgba(0,0,0,0.2) 0%,rgba(255,255,255,0.1) 100%);
	background: -o-linear-gradient(left, rgba(0,0,0,0.2) 0%,rgba(255,255,255,0.1) 100%);
	background: -ms-linear-gradient(left, rgba(0,0,0,0.2) 0%,rgba(255,255,255,0.1) 100%);
	background: linear-gradient(left, rgba(0,0,0,0.2) 0%,rgba(255,255,255,0.1) 100%);*/
	background: grey;
}
.view .s2 > .overlay {
	/*background: -moz-linear-gradient(left, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.2) 100%);
	background: -webkit-linear-gradient(left, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.2) 100%);
	background: -o-linear-gradient(left, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.2) 100%);
	background: -ms-linear-gradient(left, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.2) 100%);
	background: linear-gradient(left, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.2) 100%);*/
	background: #bada55;
}
.view .s3 > .overlay {
	/*background: -moz-linear-gradient(left, rgba(0,0,0,0.2) 0%, rgba(255,255,255,0.1) 100%);
	background: -webkit-linear-gradient(left, rgba(0,0,0,0.2) 0%,rgba(255,255,255,0.1) 100%);
	background: -o-linear-gradient(left, rgba(0,0,0,0.2) 0%,rgba(255,255,255,0.1) 100%);
	background: -ms-linear-gradient(left, rgba(0,0,0,0.2) 0%,rgba(255,255,255,0.1) 100%);
	background: linear-gradient(left, rgba(0,0,0,0.2) 0%,rgba(255,255,255,0.1) 100%);*/
	background: #e8d8c9;
}
.view .s4 > .overlay {
	/*background: -moz-linear-gradient(left, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.2) 100%);
	background: -webkit-linear-gradient(left, rgba(0,0,0,0.1) 0%,rgba(0,0,0,0.2) 100%);
	background: -o-linear-gradient(left, rgba(0,0,0,0.1) 0%,rgba(0,0,0,0.2) 100%);
	background: -ms-linear-gradient(left, rgba(0,0,0,0.1) 0%,rgba(0,0,0,0.2) 100%);
	background: linear-gradient(left, rgba(0,0,0,0.1) 0%,rgba(0,0,0,0.2) 100%);*/
	background: #e8d8c9;
}
.view .s5 > .overlay {
	/*background: -moz-linear-gradient(left, rgba(0,0,0,0.2) 0%, rgba(255,255,255,0.1) 100%);
	background: -webkit-linear-gradient(left, rgba(0,0,0,0.2) 0%,rgba(255,255,255,0.1) 100%);
	background: -o-linear-gradient(left, rgba(0,0,0,0.2) 0%,rgba(255,255,255,0.1) 100%);
	background: -ms-linear-gradient(left, rgba(0,0,0,0.2) 0%,rgba(255,255,255,0.1) 100%);
	background: linear-gradient(left, rgba(0,0,0,0.2) 0%,rgba(255,255,255,0.1) 100%);*/
	background: #bada55;
}
.view .s6 > .overlay {
	/*background: -moz-linear-gradient(left, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.2) 100%);
	background: -webkit-linear-gradient(left, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.2) 100%);
	background: -o-linear-gradient(left, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.2) 100%);
	background: -ms-linear-gradient(left, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.2) 100%);
	background: linear-gradient(left, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.2) 100%);*/
	background: grey;
}


/*.view .s1 {
	right: 44px;
}
.view .s2 {
	right: 22px;
}
.view .s3 {
	right: 0;
}
.view .s4 {
	left: 0;
}
.view .s5 {
	left: 22px;
}
.view .s6 {
	left: 44px;
}*/

/*.view img {
	position: absolute;
	z-index: 0;
	-webkit-transition: left 0.3s ease-in-out;
	-o-transition: left 0.3s ease-in-out;
	-moz-transition: left 0.3s ease-in-out;
	-ms-transition: left 0.3s ease-in-out;
	transition: left 0.3s ease-in-out;
}*/