/*
*		    ________      .___   
*	__  _  _\_____  \   __| _/
*	\ \/ \/ / _(__  <  / __ |
*	 \     / /       \/ /_/ |
*	  \/\_/ /______  /\____ |
*	               \/      \/
*
*	@author			Jacques Baars <j@w3d.co.za>
*
*	@notice			This is the property of W3Designs, W3Development, W3D,
*					it is illegal to use this source code without the required permission,
*					contact j@w3d.co.za for further advice or permissions.
*
*	@license		Copyright (c) 2016 W3Designs (PTY) Ltd. (http://www.w3d.co.za)
*/

#form-products-get-quote{
	padding: 15px;
	display: none;
}

/* Products */
#products{}

	/* Categories */
	#products > .categories{}
		
		#products > .categories .title{
			padding: 5px 8px;
		}
		
		#products > .categories .data{
			padding: 4px 5px;
		}
		
			#products > .categories .data .link{
				padding: 4px 5px;
			}

	/* Products Filters */
	#products > .products-filters{}
		
		#products > .products-filters h3{
			margin: 10px 0;
			padding: 5px 8px;
			border-bottom: 1px solid var(--softBorderColor);
		}
		
		#products.dark-mode > .products-filters h3{
			border-bottom: 1px solid var(--darkModeBorderColor);
		}
		
		#products > .products-filters:first-child h3{
			margin-top: 0;
		}
		
		#products > .products-filters .checkbox{
			margin: 3px 5px;
		}

	/* Products */
	#products .products{}

		/* Container */
		#products .products .product{
			z-index: 99;
			position: relative;
			
			-webkit-transition-duration: 0.3s;
			transition-duration: 0.3s;
			
			-webkit-transition-property: box-shadow, transform;
			transition-property: box-shadow, transform;
		}

			#products .products .product:hover, 
			#products .products .product:focus, 
			#products .products .product:active{
				z-index: 100;

				-webkit-box-shadow: -4px 10px 46px -8px rgba(0,0,0,0.75);
				-moz-box-shadow: -4px 10px 46px -8px rgba(0,0,0,0.75);
				box-shadow: -4px 10px 46px -8px rgba(0,0,0,0.75);
			}

		#products .products .product.linear{
			float: left;
		}

		#products .products .product.list{
			margin-bottom: 2%;
		}

		#products .products .product.list:last-child{
			margin-bottom: 0;
		}
			
			/* Options */
			#products .products .product .options{
				top: -1px;
				left: -1px;
				right: -1px;
				bottom: -1px;
				display: none;
				z-index: 1000;
				text-align: left;
				position: absolute;
				background-color: #fff;
			}
			
			#products.dark-mode .products .product .options{
				background-color: var(--darkModeContainerBgColor);
			}
			
				#products .products .product .options .label{
					color: #000;
					height: 22px;
					padding: 10px;
					border-bottom: 1px solid var(--softBorderColor);
				}
				
				#products.dark-mode .products .product .options .label{
					color: #fff;
					border-bottom: 1px solid var(--darkModeBorderColor);
				}
			
				#products .products .product .options .close{
					top: 9px;
					right: 9px;
					cursor: pointer;
					position: absolute;
				}
			
					#products .products .product .options .close svg{
						width: 24px;
						fill: var(--bgColor);
					}
			
					#products.dark-mode .products .product .options .close svg{
						fill: #fff;
					}
			
				#products .products .product .options .list{
					padding: 10px;
					font-size: var(--fontSize90);
				}

					#products .products .product .options .list .radio{
						margin-bottom: 3px;				
					}

					#products .products .product .options .list .radio:last-child{
						margin-bottom: 0;				
					}
			
			/* Image */
			#products .products .product .image{
				position: relative;
			}
			
			#products .products .product.list .image{
				width: 25%;
				float: left;
			}

				#products .products .product .image .tag{
					z-index: 100;
					overflow: hidden;
					position: absolute;
				}

				#products .products .product .image .tag.sale{
					right: 0;
					top: 10px;
				}

				#products .products .product .image .tag.new{
					left: 0;
					top: 10px;
				}

					#products .products .product .image .tag .label{
						color: #fff;
						padding: 3px 8px;
						position: relative;
						font-size: var(--fontSize80);
					}

					#products .products .product .image .tag.sale .label{
						background-color: var(--redColor);
					}

					#products .products .product .image .tag.new .label{
						background-color: var(--greenColor);
					}

				#products .products .product .image img{
					background-color: #fff;
				}

				#products.dark-mode .products .product .image img{
					background-color: var(--darkModeBgColor);
				}
			
			/* Content */
			#products .products .product .content{
				padding: 10px;
			}
			
			#products .products .product.list .content{
				float: left;
				width: calc(75% - 30px);
				padding: 10px 10px 10px 20px;
			}

				#products .products .product .content > *{
					margin-top: 10px;
				}

				#products .products .product.list .content > *:first-child{
					margin-top: 0;
				}

				/* Title */
				#products .products .product .content .title{
					font-weight: normal;
					font-size: var(--fontSize120);
				}

					#products .products .product .content .title span{
						color: #888;
						font-size: var(--fontSize80);
					}

				/* Description */
				#products .products .product .content .description{
					font-size: var(--fontSize90);
				}

					#products .products .product .content .description a{
						color: #888;
					}

				/* Price */
				#products .products .product .content .price{
					color: #888;
					text-align: right;
					font-size: var(--fontSize90);
				}

					#products .products .product .content .price a{
						color: inherit;
					}

					#products .products .product .content .price b{
						color: var(--redColor);
						font-size: var(--fontSize140);
					}

				/* Buttons */
				#products .products .product .content .buttons{
					text-align: center;
				}
				
					#products .products .product .content .buttons .options-btn,
					#products .products .product .content .buttons .add-ons-btn{
						display: none;
						text-align: center;
						
						color: #000 !important;
						background-color: var(--softBgColor);
					}
				
					#products .products .product .content .buttons > a:nth-child(2):not(:only-child){
						margin-top: 10px;
					}
				
						#products .products .product .content .buttons .options-btn:hover,
						#products .products .product .content .buttons .add-ons-btn:hover{
							color: #fff !important;
							background-color: var(--btnBgHoverColor);
						}
				
					#products.dark-mode .products .product .content .buttons .options-btn,
					#products.dark-mode .products .product .content .buttons .add-ons-btn{
						color: #fff !important;
						background-color: var(--darkModeBgColor);
					}

	/* Description */
	#products > .description{
		margin: 30px 0 0;
	}
	
	/* Product Range */
	#products > .range > .item{}
		
		#products > .range > .item{
			border-bottom: 1px solid var(--softBorderColor);
		}
		
		#products > .range > .item:last-child{
			border-bottom: none;
		}
		
			#products > .range > .item .image{
				width: 9%;
			}
			
			#products > .range > .item .label{
				width: 81%;
				padding: 3% 5%;
				font-size: var(--fontSize180);
			}
	
	/* Product Gallery */
	#products > .gallery .item{}
		
		#products > .gallery .item{}
		
			#products > .gallery .item .image{}
			
			#products > .gallery .item .link{
				text-align: center;
			}

	/* Cat Runway */
	#products > .cat-runway{}
	
		#products > .cat-runway .show-case{}
		
			#products > .cat-runway .show-case .heading{
				margin: 0 0 5%;
				font-size: var(--fontSize200);
			}
		
			#products > .cat-runway .show-case .display > .image{
				width: 30%;
				margin-right: 2%;
				background: #fff url('../images/ui/loading.gif') center center no-repeat;
			}

			#products > .cat-runway .show-case .display > .products{
				padding: 0 58px;
				width: calc(68% - 116px);
			}

				#products > .cat-runway .show-case .products .product{
					width: 32%;
					margin-right: 2%;
				}

					#products > .cat-runway .show-case .products .product:nth-child(n+3){
						margin-right: 0;
					}

			#products > .cat-runway .show-case .carousel{
				float: left;
				width: 68%;
			}

				#products > .cat-runway .show-case .carousel .products{
					padding: 0;
					width: 100%;
				}

		#products > .cat-runway .line-up{
			margin-top: 2%;
		}

			#products > .cat-runway .line-up .carousel .image{
				width: 50px;
				cursor: pointer;
				margin: 2px;
			}

	/* Legal */
	#products .legal{}

		#products .legal .link{
			color: #222;
			margin: 10px 0;
		}

		#products .legal .eoe{
			color: #444;
			padding: 5px;
			font-size: var(--fontSize90);
			background-color: var(--softBgColor);
			border: 1px solid var(--softBorderColor);
		}

		#products .legal .description{
			margin: 3% 0;
		}
	
	/* Ticker */
	#products .brands-ticker{
		background-color: #fff;
	}

		#products .brands-ticker .marquee{
			height: 70px;
		}

			#products .brands-ticker .marquee .container{
				height: 50px;
				padding: 10px;
			}
	
/* product */
#product{}
	
	#product .images{}
	
		#product .images .main .image{
			position: relative;
		}
	
			#product .images .main .image .zoomImg{
				background-color: #fff;
			}
	
			#product .images .main .image span{
				top: 3px;
				right: 28px;
				color: #555;
				position: absolute;
				font-weight: bold;
			}
		
			#product .images .main .image:hover{
				cursor: url('../../../core/images/jquery.zoom/grab.cur'), default;
			}
			
			#product .images .main .image:active{
				cursor: url('../../../core/images/jquery.zoom/grabbed.cur'), default;
			}
		
			#product .images .main .image:after{
				top: 0;
				right: 0;
				content: '';
				width: 33px;
				height: 33px;
				display: block;
				position: absolute;
				background-image: url('../../../core/images/jquery.zoom/icon.png');
			}

		#product .images .side{}

			#product .images .image{
				cursor: pointer;
				margin-bottom: 10px;
			}

				#product .images .image:last-child{
					margin-bottom: 0;
				}

	#product .info{}

		#product .info > *{
			margin-top: 10px;
		}

		#product .info > *:first-child{
			margin-top: 0;
		}
		
		#product .info .title{}

		#product .info .labels{}

			#product .info .labels .label{
				float: left;
				padding: 5px;
				margin: 0 8px 0 0;
			}

				#product .info .labels .label a{
					color: #fff;
					padding: 5px 8px;
				}

			#product .info .labels .label.sale{
				background-color: var(--redColor);
			}

			#product .info .labels .label.new{
				background-color: var(--greenColor);
			}

		#product .info .code{
			text-align: right;
			font-size: var(--fontSize90);
		}

		#product .info .war-guar{
			text-align: right;
			font-size: var(--fontSize90);
		}

		#product .info .description{}

		#product .info .add-ons{}

		#product .info .grouped{}

			#product .info .grouped select{
				padding: 8px;
				margin-top: 5px;
				width: calc(100% - 10px);
				background-color: var(--softBgColor);
				border: 1px solid var(--softBorderColor);
			}

		#product .info .price{
			color: #888;
			text-align: right;
		}

			#product .info .price b{
				font-size: var(--fontSize140);
				color: var(--redColor);
			}

		#product .info .basket-bar{}

			#product .info .basket-bar .add-ons{
				margin-bottom: 10px;
			}

				#product .info .basket-bar .add-ons .label{
					margin-bottom: 10px;
				}
		
/* Product Preview */
#product-preview{
	left: 20px;
	bottom: 20px;
	width: 250px;
	z-index: 1000;
	position: fixed;
	
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
	
	#product-preview .info{
		width: 100%;
		height: 100%;
		background-color: #fff;
	}
		
		#product-preview .info a{
			color: #000;
		}
		
		#product-preview .label{
			padding: 10px;
			text-align: center;
			font-size: var(--fontSize90);
			border-bottom: 1px solid var(--softBorderColor);
		}
		
		#product-preview .image{}
	
		#product-preview .loader{
			height: 3px;
			width: 100%;
			background-color: var(--softBgColor);
		}
	
			#product-preview .loader .loaded{
				height: 3px;
				background-color: var(--btnBgColor);
			}
	
	#product-preview .navigation{
		top: 0;
		width: 20px;
		right: -20px;
		position: absolute;
	}
	
		#product-preview .navigation .nav{
			cursor: pointer;
			color: var(--btnColor);
			padding: 15px 2px 16px 2px;
			background-color: var(--btnBgColor);
		}

				#product-preview .navigation .nav svg{
					fill: #fff;
				}
	
			#product-preview .navigation .nav:hover{
				color: var(--btnHoverColor);
				background-color: var(--btnBgHoverColor);
			}
	
			#product-preview .navigation .close{
				text-align: center;
			}
	
/* 1650px */		
@media screen and (max-width: 1650px){
	#products > .range > .item .image{
		width: 10%;
	}
	
	#products > .range > .item .label{
		width: 80%;
		padding: 3.5% 5%;
	}
}
	
/* 1380px */
@media screen and (max-width: 1380px){
	#products > .range > .item .image{
		width: 12%;
	}
	
	#products > .range > .item .label{
		width: 78%;
		padding: 4% 5%;
	}
	
	#products > .cat-runway .show-case .display > .image{
		display: none;
	}

	#products > .cat-runway .show-case .display > .products{
		float: none;
		width: calc(100% - 116px);
	}

	#products > .cat-runway .show-case .carousel{
		float: none;
		width: 100%;
	}

	#product-preview{
		width: 200px;
	}
		
		#product-preview .label{
			padding: 5px;
		}
}
	
/* 1024px */
@media screen and (max-width: 1024px){
	#products > .range > .item .image{
		width: 14%;
	}
	
	#products > .range > .item .label{
		width: 76%;
		padding: 4.5% 5%;
	}

	#product-preview{
		width: 180px;
	}
}
	
/* 850px */	
@media screen and (max-width: 850px){
	#products > .range > .item .image{
		width: 16%;
	}
	
	#products > .range > .item .label{
		width: 74%;
		padding: 5%;
	}
}
	
/* 600px */	
@media screen and (max-width: 600px){
	#products .products .product:hover, 
	#products .products .product:focus, 
	#products .products .product:active{
		-webkit-box-shadow: none;
		-moz-box-shadow: none;
		box-shadow: none;
	}

		#products .products .product.list .image{
			float: none;
			width: 100%;
		}

		#products .products .product.list .content{
			float: none;
			padding: 10px;
			width: calc(100% - 20px);
		}
	
	#products > .cat-runway .show-case .products .product{
		width: 100%;
		margin-right: 0;
	}

	#product-preview{
		width: 150px;
	}
}