/* SVG wrap */
.svg-wrap {
	position: absolute;
	width: 0px;
	height: 0px;
	overflow: hidden;
}

nav.nav-thumbflip a {
        margin-top: 20px;
	display: block;
	outline: none;
	text-align: left;
	z-index: 1000;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
}

nav.nav-thumbflip a.prev {
	float: left;
}

nav.nav-thumbflip a.next {
	float: right;
}

nav.nav-thumbflip a svg {
	display: block;
	margin: 0 auto;
	padding: 0;
}

/*--------------------*/
/* Thumb flip */
/*--------------------*/
.color-7 { background-color: #c1b8ab; }

.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: #3d3d3d;
	-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;
        max-height: 100%;
        max-width: none;
}

.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: #3d3d3d;
}

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

@media screen and (max-width: 520px) {
	.nav-slide a.prev,
	.nav-reveal a.prev,
	.nav-doubleflip a.prev,
	.nav-fillslide a.prev,
	.nav-growpop a.prev {
		-webkit-transform-origin: 0% 50%;
		transform-origin: 0% 50%;
	}

	.nav-slide a.next,
	.nav-reveal a.next,
	.nav-doubleflip a.next,
	.nav-fillslide a.next,
	.nav-growpop a.next  {
		-webkit-transform-origin: 100% 50%;
		transform-origin: 100% 50%;
	}

	.nav-slide a,
	.nav-reveal a,
	.nav-doubleflip a,
	.nav-fillslide a {
		-webkit-transform: scale(0.6);
		transform: scale(0.6);
	}

	.nav-growpop a {
		-webkit-transform: translateY(-50%) scale(0.6);
		transform: translateY(-50%) scale(0.6);
	}
        
        .nav-thumbflip .icon-wrap {
            width: 50px;
            height: 50px;
        }
}