/* Advanced example - Product quick view */

.quick-view-container {
	background: rgba(10,10,10,0.85);
}

.quick-view-content {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: calc(100% - 40px);
	height: calc(100% - 40px);
	max-width: 1280px;
}
.quick-view-carousel {
	position: absolute;
	background:#F0F0F0;
	top:0; bottom:0;
	left: 0; right: 0;
	z-index:1; width: 45%;
}
/*.quick-view-carousel:after {
	font-family: 'icomoon' !important;
	content: "\e903";
	display:block;
	position:absolute;
	text-align:center;
	line-height:30px;
	color:#fff;
	border-radius:50%;
	bottom:0; right:0;
	margin:-15px;
	background-color:#c0ccd8;
	width:30px; height:30px;
}*/
/*.quick-view-carousel .fancybox-slider-wrap {
	bottom: 30px;
}*/

.quick-view-aside {
	position: absolute;
	top:0; right:0;
	bottom:0; left: 45%;
	width: 55%; 
	padding:40px 0 0;
	background: #fff;
}
.quick-view-aside:target { z-index:10 }

.quick-view-aside::before, .quick-view-aside::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
}

.quick-view-aside::before {
	width: 8px;
	background: #F0F0F0;
}

.quick-view-aside::after {
	width: 1px;
	background: #e9e9e9;
}

.quick-view-aside > div {
	height: 100%;
	overflow: auto;
	padding: 20px;
	text-align: center;
}

.quick-view-aside > div > p {
	font-size: 90%;
}

.quick-view-close {
	position: absolute;
	top: 10px;
	right: 10px;
	width: 25px;
	height: 25px;
	border-radius:50%;
	background: #F0F0F0;
	padding: 0;
	margin: 0;
	border: 0;
	cursor: pointer;
	font-family: Arial;
	font-size: 14px;
	text-indent: -99999px;
	transition: all .2s;
}
.quick-view-close:hover { background: #fa6604; }
.quick-view-close::before,
.quick-view-close::after {
	content: '';
	position: absolute;
	top: 5px;
	left: 12px;
	width: 1px;
	height: 15px;
	background-color: #222;
	transition: all .2s;
}
.quick-view-close:hover::before,
.quick-view-close:hover::after { background-color: #fff; }

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

.quick-view-close:after {
	-webkit-transform: rotate(45deg);
	   -moz-transform: rotate(45deg);
		-ms-transform: rotate(45deg);
		 -o-transform: rotate(45deg);
			transform: rotate(45deg);
}


.quick-view-bullets {
	list-style: none;
	position: absolute;
	bottom: 0; left: 0;
	text-align: center;
	margin: 0; padding: 0;
	z-index: 99999;
	width: 100%;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
}

.quick-view-bullets li {
	display: inline-block;
	vertical-align: top;
}

.quick-view-bullets li a {
	display: block;
	height: 30px;
	width: 20px;
	position: relative;
}

.quick-view-bullets li a span {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	width: 10px;
	height: 10px;
	border-radius: 99px;
	text-indent: -99999px;
	overflow: hidden;
	background: #d4d2d2;

}
.quick-view-bullets li.active a span {
	background: #FF6666;
}
@media screen and (max-width: 850px) {
	.quick-view-content {
		top: 0;
		left: 0;
		transform: translate(0,0);
		width: 100%;
		height: 100%;
	}
}
@media screen and (max-width: 780px) {
	.quick-view-carousel {
		bottom: 60%; width: 100%;
	}
	.quick-view-aside {
		padding-top:5px;
		top:40%; left:0;
		width: 100%;
	}
	.quick-view-aside::before { height:5px; width:100%; }
	.quick-view-aside::before, 
	.quick-view-aside::after {
		content: '';
		position: absolute;
		top:0;
		left:0;
		bottom:0;
	}
	.quick-view-close { z-index:10;  }
}
@media screen and (max-width: 480px) {
	.quick-view-aside { display:none }
	.quick-view-carousel {
		bottom:0;
		height:100%;
		background-color:transparent
	}
}