/* -------------------------------- 

Modules - reusable parts of our design

-------------------------------- */

.cd-qv-container {
	/* this class is used to give a max-width to the element it is applied to, and center it horizontally when it reaches that max-width */
	width: 						90%;
	max-width: 					1170px;
	margin: 					0 auto;
}
.cd-qv-container:after {
	content: 					"";
	display: 					table;
	clear: 						both;
}

/* -------------------------------- 

Main components 

-------------------------------- */

.cd-qv-items {
	padding: 					1em 0;
}

@media only screen and (min-width: 768px) {
	
	.cd-qv-items {
		padding: 					2em 0 0;
	}
  
}

@media only screen and (min-width: 1024px) {
	
	.cd-qv-items {
		padding: 					4em 0 0;
	}
	
}

.cd-qv-item {
	position: 					relative;
	margin: 					0 0 1em;
}

.cd-qv-item > img {
	display: 					block;
	width: 						100%;
}

@media only screen and (min-width: 768px) {
	
	.cd-qv-item {
		width: 						48%;
		float: 						left;
		margin: 					0 4% 2em 0;
	}

	.cd-qv-item:nth-child(2n) {
		margin-right: 				0;
	}
  
}

@media only screen and (min-width: 1024px) {
	
	.cd-qv-item {
		width: 						22%;
		float: 						left;
		margin: 					0 4% 2.8em 0;
	}
	
	.cd-qv-item:nth-child(2n) {
		margin-right: 				4%;
	}
	
	.cd-qv-item:nth-child(4n) {
		margin-right: 				0;
	}
	
	.cd-qv-item.qv-empty-box::after {
		/* box visible as placeholder when the .cd-quick-view zooms in */
		position: 					absolute;
		top: 						0;
		left: 						0;
		width: 						100%;
		height:						100%;
		background-color:			#392c3f;
	}
  
}

.cd-qv-trigger {
	position: 					absolute;
	height: 					50px;
	line-height: 				50px;
	width: 						100%;
	bottom: 					0;
	left: 						0;
	background: 				rgba(0, 0, 0, 0.1);
	text-align: 				center;
	-webkit-font-smoothing: 	antialiased;
	-moz-osx-font-smoothing: 	grayscale;
	color: 						#ffffff;
	opacity: 					0;
	visibility: 				hidden;
	-webkit-transition: 		opacity 0.2s, background-color 0.2s;
	-moz-transition: 			opacity 0.2s, background-color 0.2s;
	transition: 				opacity 0.2s, background-color 0.2s;
}

.no-touch .cd-qv-trigger:hover {
	background:					rgba(0, 0, 0, 0.2);
}

@media only screen and (min-width: 1024px) {
	
	.cd-qv-trigger {
		/* always visible on small devices */
		visibility:					visible;
		opacity:					1;
	}
  
}

@media only screen and (min-width: 1170px) {
	
	.cd-qv-trigger {
	/* only visible on hover on big devices */
		opacity:					0;
	}
	
}

@media only screen and (min-width: 1170px) {
	
	.no-touch .cd-qv-item:hover .cd-qv-trigger {
		opacity:					1;
	}

	.touch .cd-qv-item .cd-qv-trigger {
		opacity:					1;
	}
  
}

.cd-qv-quick-view {
	/* quick view non available on small devices */
	display: 					none;
}

@media only screen and (min-width: 1024px) {
	
	.cd-qv-quick-view {
		display:					block;
		position: 					fixed;
		max-width: 					900px;
		visibility: 				hidden;
		/* Force Hardware Acceleration in WebKit */
		-webkit-transform: 			translateZ(0);
		-moz-transform: 			translateZ(0);
		-ms-transform: 				translateZ(0);
		-o-transform: 				translateZ(0);
		transform: 					translateZ(0);
		-webkit-backface-visibility:hidden;
		backface-visibility: 		hidden;
		will-change: 				left, top, width;
		z-index:					1;
	}
  
	.cd-qv-quick-view:after {
		content:					"";
		display:					table;
		clear:						both;
	}

	.cd-qv-quick-view.qv-is-visible {
		/* class added when user clicks on .cd-trigger */
		visibility: 				visible;
	}
  
	.cd-qv-quick-view.qv-animate-width {
		/* class added at the end of the first zoom-in animation */
		background-color: 			#ffffff;
		box-shadow: 				0 0 30px rgba(0, 0, 0, 0.2);
		-webkit-transition: 		box-shadow 0.3s;
		-moz-transition: 			box-shadow 0.3s;
		transition:					box-shadow 0.3s;
	}
  
}

.cd-qv-slider-wrapper {
	position:					relative;
	display:					inline-block;
	float:						left;
}

.cd-qv-slider-wrapper:after {
	content:					"";
	display:					table;
	clear:						both;
}

.cd-qv-slider {
	float: 						left;
}

.cd-qv-slider li {
	position: 					absolute;
	top: 						0;
	left: 						0;
	z-index: 					1;
}

.cd-qv-slider li img {
	display: 					block;
	width: 						100%;
	/* max-width: 				400px; SKO*/ 
}

.cd-qv-slider li.qv-selected {
	position: 					relative;
	z-index: 					3;
}

.qv-add-content .cd-qv-slider {
	margin-right: 				3em;
}

.cd-qv-slider-navigation {
	opacity: 					0;
}

.qv-add-content .cd-qv-slider-navigation {
	opacity: 					1;
}

.cd-qv-slider-navigation li {
	position: 					absolute;
	top: 						50%;
	bottom: 					auto;
	-webkit-transform: 			translateY(-50%);
	-moz-transform: 			translateY(-50%);
	-ms-transform: 				translateY(-50%);
	-o-transform: 				translateY(-50%);
	transform: 					translateY(-50%);
	z-index: 					3;
}

.cd-qv-slider-navigation li:first-child {
	left: 						0;
}

.cd-qv-slider-navigation li:last-child {
	/* equal to the .cd-slider-wrapper margin-right */
	right: 						3em;
}

.cd-qv-slider-navigation li a {
	display: 					block;
	width: 						40px;
	height: 					50px;
	overflow: 					hidden;
	text-indent: 				100%;
	white-space: 				nowrap;
	opacity: 					0;
	/* Force Hardware Acceleration in WebKit */
	-webkit-transform: 			translateZ(0);
	-moz-transform: 			translateZ(0);
	-ms-transform: 				translateZ(0);
	-o-transform: 				translateZ(0);
	transform: 					translateZ(0);
	-webkit-backface-visibility:hidden;
	backface-visibility: 		hidden;
	-webkit-transition: 		opacity 0.2s, background 0.2s;
	-moz-transition: 			opacity 0.2s, background 0.2s;
	transition: 				opacity 0.2s, background 0.2s;
}

.cd-qv-slider-navigation li a::before, 
.cd-qv-slider-navigation li a::after {
	/* create arrows in CSS */
	position: 					absolute;
	top: 						18px;
	left: 						14px;
	display: 					inline-block;
	background: 				#ffffff;
	height: 					3px;
	width: 						12px;
}

.cd-qv-slider-navigation li a::before {
	-webkit-transform: 			rotate(45deg);
	-moz-transform: 			rotate(45deg);
	-ms-transform: 				rotate(45deg);
	-o-transform: 				rotate(45deg);
	transform: 					rotate(45deg);
}

.cd-qv-slider-navigation li a::after {
	-webkit-transform: 			translateY(7px) rotate(-45deg);
	-moz-transform: 			translateY(7px) rotate(-45deg);
	-ms-transform: 				translateY(7px) rotate(-45deg);
	-o-transform: 				translateY(7px) rotate(-45deg);
	transform: 					translateY(7px) rotate(-45deg);
}

.qv-add-content .cd-qv-slider-navigation li a {
	opacity: 					.2;
}

.no-touch .cd-qv-slider-navigation li a:hover {
	background: 				rgba(71, 55, 78, 0.8);
	opacity: 					1;
}

.touch .cd-qv-slider-navigation li a {
	opacity: 					1;
}

.cd-qv-slider-navigation li:first-child a::before {
	-webkit-transform: 			rotate(-45deg);
	-moz-transform: 			rotate(-45deg);
	-ms-transform: 				rotate(-45deg);
	-o-transform: 				rotate(-45deg);
	transform: 					rotate(-45deg);
}

.cd-qv-slider-navigation li:first-child a::after {
	-webkit-transform: 			translateY(7px) rotate(45deg);
	-moz-transform: 			translateY(7px) rotate(45deg);
	-ms-transform: 				translateY(7px) rotate(45deg);
	-o-transform: 				translateY(7px) rotate(45deg);
	transform: 					translateY(7px) rotate(45deg);
}

.cd-qv-item-info {
	position: 					absolute;
	padding: 					3em 3em 3em 0;
	visibility: 				hidden;
	opacity: 					0;
	-webkit-transition: 		opacity .3s, visibility 0s;
	-moz-transition: 			opacity .3s, visibility 0s;
	transition: 				opacity .3s, visibility 0s;
}

.cd-qv-item-info h2 {
	font-size: 					28px;
	font-size: 					1.75rem;
}

.cd-qv-item-info p {
	line-height: 				1.6;
	margin: 					1em 0;
	color: 						#67919c;
}

.cd-qv-item-info .cd-qv-item-action li {
	display: 					inline-block;
	margin-right: 				1em;
}

.cd-qv-item-info .cd-qv-item-action li:first-child {
	margin-left: 				-4px;
}

.cd-qv-item-info .qv-add-to-cart {
	-webkit-appearance: 		none;
	-moz-appearance: 			none;
	-ms-appearance: 			none;
	-o-appearance:				none;
	appearance: 				none;
	border-radius: 				0.25em;
	border: 					none;
	padding: 					.6em 1.2em;
	background-color: 			#f82f53;
	color: 						#ffffff;
	-webkit-font-smoothing: 	antialiased;
	-moz-osx-font-smoothing: 	grayscale;
	font-family: 				"PT Sans", sans-serif;
	font-size: 					16px;
	font-size: 					1rem;
	cursor: 					pointer;
}

.qv-add-content .cd-qv-item-info {
	/* class added at the end of the width animation, used to show the content */
	position: 					relative;
	visibility: 				visible;
	opacity: 					1;
}

.qv-add-content .cd-qv-item-info h2 {
	-webkit-animation: 			cd-qv-slide-in 0.3s;
	-moz-animation: 			cd-qv-slide-in 0.3s;
	animation: 					cd-qv-slide-in 0.3s;
}

.qv-add-content .cd-item-info p {
	-webkit-animation: 			cd-qv-slide-in 0.4s;
	-moz-animation: 			cd-qv-slide-in 0.4s;
	animation: 					cd-qv-slide-in 0.4s;
}

.qv-add-content .cd-qv-item-info .cd-qv-item-action {
	-webkit-animation: 			cd-qv-slide-in 0.5s;
	-moz-animation: 			cd-qv-slide-in 0.5s;
	animation: 					cd-qv-slide-in 0.5s;
}

@-webkit-keyframes cd-qv-slide-in {
	
	0% {
		-webkit-transform: 			translate3d(-40px, 0, 0);
	}

	100% {
		-webkit-transform: 			translate3d(0, 0, 0);
	}
  
}

@-moz-keyframes cd-qv-slide-in {
	
	0% {
		-moz-transform: 			translate3d(-40px, 0, 0);
	}

	100% {
		-moz-transform: 			translate3d(0, 0, 0);
	}
  
}

@keyframes cd-qv-slide-in {
	
	0% {
		-webkit-transform: 			translate3d(-40px, 0, 0);
		-moz-transform: 			translate3d(-40px, 0, 0);
		-ms-transform: 				translate3d(-40px, 0, 0);
		-o-transform: 				translate3d(-40px, 0, 0);
		transform: 					translate3d(-40px, 0, 0);
	}
  
	100% {
		-webkit-transform: 			translate3d(0, 0, 0);
		-moz-transform: 			translate3d(0, 0, 0);
		-ms-transform:				translate3d(0, 0, 0);
		-o-transform: 				translate3d(0, 0, 0);
		transform: 					translate3d(0, 0, 0);
	}
  
}

.cd-qv-close {
	position: 					absolute;
	top: 						10px;
	right: 						10px;
	display: 					inline-block;
	width: 						30px;
	height: 					30px;
	/* image replacement */
	overflow: 					hidden;
	text-indent: 				100%;
	white-space: 				nowrap;
	visibility: 				hidden;
	-webkit-transform: 			scale(0);
	-moz-transform: 			scale(0);
	-ms-transform: 				scale(0);
	-o-transform: 				scale(0);
	transform: 					scale(0);
	-webkit-transition: 		-webkit-transform .3s 0s, visibility 0s .3s;
	-moz-transition: 			-moz-transform .3s 0s, visibility 0s .3s;
	transition: 				transform .3s 0s, visibility 0s .3s;
}

.cd-qv-close::before, 
.cd-qv-close::after {
	/* close icon in css */
	position: 					absolute;
	top: 						12px;
	left: 						5px;
	display: 					inline-block;
	height: 					4px;
	width: 						20px;
	background: 				#47374e;
	-webkit-backface-visibility:hidden;
	backface-visibility: 		hidden;
}

.cd-qv-close::before {
	-webkit-transform: 			rotate(45deg);
	-moz-transform: 			rotate(45deg);
	-ms-transform: 				rotate(45deg);
	-o-transform: 				rotate(45deg);
	transform: 					rotate(45deg);
}

.cd-qv-close::after {
	-webkit-transform: 			rotate(135deg);
	-moz-transform: 			rotate(135deg);
	-ms-transform: 				rotate(135deg);
	-o-transform: 				rotate(135deg);
	transform: 					rotate(135deg);
}

.no-touch .cd-qv-close:hover {
	-webkit-transform: 			scale(1.2);
	-moz-transform: 			scale(1.2);
	-ms-transform: 				scale(1.2);
	-o-transform: 				scale(1.2);
	transform: 					scale(1.2);
}

.qv-add-content .cd-qv-close {
	visibility: 				visible;
	-webkit-transform: 			scale(1);
	-moz-transform: 			scale(1);
	-ms-transform: 				scale(1);
	-o-transform: 				scale(1);
	transform: 					scale(1);
	-webkit-transition: 		-webkit-transform .3s 0s, visibility 0s 0s;
	-moz-transition: 			-moz-transform .3s 0s, visibility 0s 0s;
	transition: 				transform .3s 0s, visibility 0s 0s;
}