/*
*		    ________      .___   
*	__  _  _\_____  \   __| _/
*	\ \/ \/ / _(__  <  / __ |
*	 \     / /       \/ /_/ |
*	  \/\_/ /______  /\____ |
*	               \/      \/
*
*	@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;
}

/* Categories Menu */
.products-categories-menu{
	display: none;
	overflow-y: hidden;
	position: relative;
	background-color: #fff;
	font-size: var(--fontSize90);
}

.products-categories-menu:hover{
	overflow-y: visible;
}

.products-categories-menu:hover:after{
	display: none;
}

.products-categories-menu:after{
	left: 0;
	top: 80%;
	right: 0;
	bottom: 0;
	content: '';
	z-index: 100;
	position: absolute;
	
	background: rgb(255,255,255);
	background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 80%);
}

	.products-categories-menu .title{
		color: #000;
		padding: 10px;
		display: none;
		cursor: pointer;
		background-color: #fff;
	}

		.products-categories-menu .title .core-menu-btn{
			margin-right: 10px;
		}

			.products-categories-menu .title .core-menu-btn span{
				background-color: var(--bgColor);
			}

	.products-categories-menu .menu{
		z-index: 100;
		display: block;
		position: relative;
	}
	
		.products-categories-menu .menu .menu-item{
			position: relative;
			background-color: #fff;
		}
		
		.products-categories-menu .menu .menu-item > a{
			color: #000;
			padding: 8px;
			position: relative;
			justify-content: space-between;
		}
		
			.products-categories-menu .menu .menu-item:hover > a{
				color: #fff;
				background-color: var(--bgColor);
			}
		
			.products-categories-menu .menu .menu-item > a .icon{
				top: 0;
				right: 0;
				bottom: 0;
				width: 24px;
				position: absolute;
			}
		
				.products-categories-menu .menu .menu-item > a .icon svg{
					width: 12px;
					fill: #000;
				}
		
				.products-categories-menu .menu .menu-item:hover > a .icon svg{
					fill: #fff;
				}
		
			.products-categories-menu .menu .menu-item:hover .sub-menu{
				display: block;
			}
		
			.products-categories-menu .menu .menu-item .sub-menu{
				top: 0;
				left: 100%;
				z-index: 100;
				width: 250px;
				display: none;
				position: absolute;
			}
				
				.products-categories-menu .menu .menu-item .sub-menu .sub-menu-item{
					background-color: #fff;
				}
				
				.products-categories-menu .menu .menu-item .sub-menu .sub-menu-item.main{
					text-align: center;
					background-color: var(--softBgColor);
				}
				
					.products-categories-menu .menu .menu-item .sub-menu .sub-menu-item > a{
						padding: 8px;
						display: block;
						color: #000;
					}
				
					.products-categories-menu .menu .menu-item .sub-menu .sub-menu-item:hover > a{
						color: #fff;
						background-color: var(--bgColor);
					}

.products-categories-menu.collapsed{
	display: block;
}

.products-categories-menu.collapsed.absolute{
	width: 100%;
	position: absolute;
	overflow-y: visible;
}

	.products-categories-menu.collapsed:after{
		display: none;
	}
	
		.products-categories-menu.collapsed .title{
			display: flex;
		}
		
		.products-categories-menu.collapsed .menu{
			display: none;
		}
		
			.products-categories-menu.collapsed .menu .menu-item:hover > a{
				color: #000;
				background-color: transparent;
			}
		
				.products-categories-menu.collapsed .menu .menu-item > a .icon{
					width: 28px;
				}
			
					.products-categories-menu.collapsed .menu .menu-item > a .icon svg{
						width: 16px;
					}
				
					.products-categories-menu.collapsed .menu .menu-item:hover > a .icon svg{
						fill: #000;
					}
			
			.products-categories-menu.collapsed .menu .menu-item:hover .sub-menu{
				display: none;
			}
			
			.products-categories-menu.collapsed .menu .menu-item .sub-menu{
				top: auto;
				left: auto;
				width: auto;
				position: relative;
				border-bottom: 1px solid var(--softBorderColor);
			}

/* 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 > .categories .data .link span{
					display: flex;
				}
		
					#products > .categories .data .link span:before{
						margin-top: 2px;
					}

	/* 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-filters .colour{
			cursor: pointer;
		}
		
			#products > .products-filters .colour .outer{
				padding: 2px;
				border: 1px solid transparent;
			}
		
			#products > .products-filters .colour.selected .outer{
				border: 1px solid var(--softBorderColor);
			}
			
			#products > .products-filters .colour .outer .inner{
				width: 20px;
				height: 20px;
			}
		
			#products > .products-filters .colour .label{
				margin-left: 4px;
			}
		
			#products > .products-filters .colour.selected .label{
				text-decoration: underline;
			}

	/* Products */
	#products .products{}

		/* Container */
		#products .products .product{
			z-index: 99;
			position: relative;
			background-color: #fff;
			
			-webkit-transition-duration: 0.3s;
			transition-duration: 0.3s;
			
			-webkit-transition-property: box-shadow, transform;
			transition-property: box-shadow, transform;
		}
			
		#products.dark-mode .products .product{
			background-color: var(--darkModeContainerBgColor);
		}

			#products .products .product:hover, 
			#products .products .product:focus, 
			#products .products .product:active{
				z-index: 100;
				
				-webkit-box-shadow: rgba(38, 57, 77, 0.655) 0px 13.0767px 19.615px -6.53833px;
				-moz-box-shadow: rgba(38, 57, 77, 0.655) 0px 13.0767px 19.615px -6.53833px;
				box-shadow: rgba(38, 57, 77, 0.655) 0px 13.0767px 19.615px -6.53833px;
			}

		#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.gender{
					left: 0;
					bottom: 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 .tag.gender .label{
						background-color: #000;
					}

				#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(--fontSize100);
				}

					#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 Carousel */
	#products > .carousel{}
	
		#products > .carousel > .content{
			display: flex;
			flex-direction: column;
			justify-content: center;
		}
	
	/* Product Range */
	#products > .range .item{}
		
		#products > .range > a{}
	
			#products > .range > a > .item{
				padding: 5px 0;
				border-bottom: 1px solid var(--softBorderColor)
			}
	
			#products.dark-mode > .range > a > .item{
				border-bottom: 1px solid var(--darkModeBorderColor)
			}
	
			#products > .range > a:first-child > .item{
				padding-top: 0;
			}
	
			#products > .range > a:last-child > .item{
				padding-bottom: 0;
				border-bottom: none;
			}
		
			#products > .range .item .image{
				width: 100px;
			}
			
			#products > .range .item .label{
				padding: 20px;
				width: calc(100% - 140px);
				font-size: var(--fontSize180);
			}
	
	/* Product Gallery */
	#products > .gallery .item{
		border: 1px solid var(--softBorderColor);
	}
	
	#products.dark-mode > .gallery .item{
		border: 1px solid var(--darkModeBorderColor);
	}
		
		#products > .gallery .item .image{}
		
		#products > .gallery .item .link{
			padding: 8px 0;
			text-align: center;
		}

	/* 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{
			cursor: pointer;
		}

		#product .images .thumbs{
			margin-top: 20px;
			padding-top: 20px;
			border-top: 1px solid var(--softBorderColor);
		}

		#product.dark-mode .images .thumbs{
			border-top: 1px solid var(--darkModeBorderColor);
		}

			#product .images .thumbs .image{
				cursor: pointer;
				border: 1px solid var(--softBorderColor);
			}

			#product.dark-mode .images .thumbs .image{
				border: 1px solid var(--darkModeBorderColor);
			}

			#product .images .thumbs .image:hover,
			#product .images .thumbs .image.active{
				border: 1px solid var(--bgColor);
			}

	#product .info{
		position: relative;
	}

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

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

		#product .info .basket-favourite{
			right: unset;
			bottom: unset;
			position: relative;
		}
		
		#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 .labels .label.gender{
				background-color: #000;
			}

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

		#product .info .colour{
			margin-top: 0;
			text-align: right;
			justify-content: flex-end;
			font-size: var(--fontSize90);
		}

			#product .info .colour .circle{
				width: 12px;
				height: 12px;
				margin: 0 3px 0 4px;
				display: inline-block;
			}

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

		#product .info .description{}

		#product .info .tech-info{}
		
		#product .info .specs{}
			
			#product .info .specs .file{
				padding: 8px 0 8px 16px;
			}

		#product .info .add-ons{}

		#product .info .grouped{}

			#product .info .grouped select{
				width: 100%;
				padding: 8px;
				margin-top: 5px;
				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 .info .external-links{
			text-align: right;
		}
		
/* 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: 26px;
		right: -26px;
		position: absolute;
	}
	
		#product-preview .navigation .nav{
			cursor: pointer;
			color: var(--btnColor);
			padding: 15px 5px;
			background-color: var(--btnBgColor);
		}

				#product-preview .navigation .nav svg{
					fill: #fff;
					width: 16px;
				}

				#product-preview .navigation .nav.close svg{
					width: 10px;
				}
	
			#product-preview .navigation .nav:hover{
				color: var(--btnHoverColor);
				background-color: var(--btnBgHoverColor);
			}
	
/* 1380px */
@media screen and (max-width: 1380px){
	#product-preview{
		width: 200px;
	}
		
		#product-preview .label{
			padding: 5px;
		}
}
	
/* 1024px */
@media screen and (max-width: 1024px){
	#product-preview{
		width: 180px;
	}
}
	
/* 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);
		}
		
	#product .images{
		margin-bottom: 30px;
	}

	#product-preview{
		width: 130px;
	}
		
		#product-preview .label{
			font-size: var(--fontSize80);
		}
}