.products-nav {
	position: relative;
	@include breakpoint(medium down) {
		display: none;
	}
}

.next-product,
.prev-product {
	opacity: 0;
    position: fixed;
    top: calc(50% - 6vw);
    // bottom: 0;
    z-index: 999;
    font-size: 0;
    @include transition(1s transform cubic-bezier(.19,1,.22,1), 1s opacity cubic-bezier(.19,1,.22,1))
    -webkit-perspective: 500;
    perspective: 500;


	.next-product__text,
	.prev-product__text {
		text-align: center;
		visibility: visible;
		opacity: 1;
		transition: opacity .1s;
		transition-delay: .2s;	
		vertical-align: middle;
	    width: 150px;
	    display: inline-block;

	    p {
	    	color: #000;
	    	position: relative;
	    	white-space: nowrap;
			font-size: 14px;
			font-weight: 400;
			letter-spacing: 2px;
			text-transform: uppercase;	    	
	    }
	}

	.preview,
	p {
		margin: 0;
	    display: inline-block;
	    vertical-align: middle;
	}

	.preview {
		width: 10vw;

		.intrinsic {
			background-color: rgba(0,0,0,0.04);
			position: relative;
			width: 100%;
			height: 0;
			padding-top: 100%;
			background-size: cover;
			background-position: center;
			background-repeat: no-repeat;

			.image-center {
				// background-color: rgba(0,0,0,0.05);
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				-webkit-transform-origin: top right;
				transform-origin: top right;
				z-index: 99;

			    -webkit-align-items: center;
			    -ms-flex-align: center;
			    align-items: center;

				transition: .1s -webkit-transform cubic-bezier(.19,1,.22,1);
				transition: .1s transform cubic-bezier(.19,1,.22,1);
				transition: .1s transform cubic-bezier(.19,1,.22,1),.1s -webkit-transform cubic-bezier(.19,1,.22,1);
				transition-delay: .45s;	


				
				.image {
				    position: relative;
				    max-width: 50%;
				    // height: 60%;

				    img {
						max-height: 100%;
						max-width: 100%;
						@include box-shadow(0px 0px 50px 5px rgba(0, 0, 0, 0.1));
						display: block;				    	
				    }
				}											
			}		    
		}
	}


}

.prev-product {
	left: 0;
	@include transform(translateX(-22vw));


	.image-center {
		@include transform(translateX(-50%) rotateY(50deg));	
	}

	p {
		@include transform(rotate(-90deg));
		left: 30px;	
	}
}

.next-product {
	right: 0;
	@include transform(translateX(22vw));

	.image-center {
		@include transform(translateX(50%) rotateY(-50deg));	
	}

	p {
		@include transform(rotate(90deg));
		right: 30px;

	}
}

.products-nav.visible {
	
	.prev-product {
		opacity: 1;
		@include transform(translateX(-13vw));

		@include breakpoint(1280px down) {
			@include transform(translateX(-15vw));
		}			
	}

	.next-product {
		opacity: 1;
		@include transform(translateX(13vw));

		@include breakpoint(1280px down) {
			@include transform(translateX(15vw));
		}		
	}

	.next-product,
	.prev-product {
	    &:hover {
		    transform: none;
		    transition-duration: 1s; 

		    .preview {
		    	.intrinsic {
				    .image-center {
					    @include transform(none);
					    @include transition(1s transform cubic-bezier(.19,1,.22,1));
				    } 
		    	}
		    }

		    .prev-product__text,
		    .next-product__text {
		    	transition-delay: 0s;
		    	opacity: 0;
		    }

	  	
	    }	
	}
}