/*--------------------*/
/* Thumb flip */
/*--------------------*/


.nav-thumbflip a {
	-webkit-perspective: 1000px;
	perspective: 1000px;
}

.nav-thumbflip a.prev {
	-webkit-perspective-origin: 100% 50%;
	perspective-origin: 100% 50%;
}

.nav-thumbflip a.next {
	-webkit-perspective-origin: 0% 50%;
	perspective-origin: 0% 50%;
}

.nav-thumbflip .icon-wrap {
	display: block;
	width: 100px;
	height: 100px;
	background-color: #b1a798;
	-webkit-transition: background-color 0.3s;
	transition: background-color 0.3s;
}

.nav-thumbflip svg.icon {
	position: relative;
	top: 50%;
	-webkit-transition: fill 0.3s;
	transition: fill 0.3s;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	fill: #fff;
}

.nav-thumbflip img {
	position: absolute;
	top: 0;
	-webkit-transition: -webkit-transform 0.3s;
	transition: transform 0.3s;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

.nav-thumbflip a.prev img {
	left: 100%;
	-webkit-transform: rotateY(90deg);
	transform: rotateY(90deg);
	-webkit-transform-origin: 0% 50%;
	transform-origin: 0% 50%;
}

.nav-thumbflip a.next img {
	right: 100%;
	-webkit-transform: rotateY(-90deg);
	transform: rotateY(-90deg);
	-webkit-transform-origin: 100% 50%;
	transform-origin: 100% 50%;
}

.nav-thumbflip a:hover .icon-wrap {
	background-color: #fff;
}

.nav-thumbflip a:hover svg.icon {
	fill: #c1b8ab;
}

.nav-thumbflip a:hover img {
	-webkit-transform: rotateY(0deg);
	transform: rotateY(0deg);
}