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

/* ------------- CORE:ROOT ------------- */

:root{
	--color: #000;
	--color2: #fff;
	
	--bgColor: #ff7920;
	--bgColor2: #e1630f;
	--bgColor3: #1c2834;
	--bgColor4: #16212C;
	--bgColor5: #E4E8EC;
	--bgColor6: #F4F5F6;
	
	--linkColor: #000;
	--linkHoverColor: #f7731e;
	
	--mobileMenuColor: #fff;
	--mobileMenuBtnColor: #f7731e;
	--mobileMenuSelectedColor: #fff;
	--mobileMenuSelectedBgColor: #ff7920;
	--mobileMenuContentBgColor: #1c2834;
	
	--btnColor: #fff;
	--btnBgColor: #f7731e;
	--btnHoverColor: #fff;
	--btnBgHoverColor: #f7731e;
	
	--dialogBgColor: #060c11;
	--dialogBgColor2: #1c2834;
	--dialogHeadingColor: #fff;
}

/* ------------- DOCUMENT ------------- */

@font-face{
	font-family: Harlow Solid Italic;
	src: url("../fonts/Harlow Solid Italic.ttf"),
		 url("../fonts/Harlow Solid Italic.eot");
}

body{
   font-size: var(--fontSize105);
   background-color: var(--bgColor6);
   font-family: Source Sans Pro, Helvetica, Arial, sans-serif;
}

/* Menu */
#menu-banner{
	background-color: var(--bgColor3);
}

	/* Menu */
	#menu-banner .menu-banner ul li a{
		color: #fff;
		padding: 30px 20px;
	}
		
		#menu-banner .menu-banner ul li:hover{
			background-color: var(--bgColor4);
		}
		
		#menu-banner .menu-banner ul li.active-li > a{
			background-color: var(--bgColor);
		}

			#menu-banner .menu-banner ul ul{
				background-color: var(--bgColor3);
			}
			
				#menu-banner .menu-banner ul ul li a{
					color: #fff;
				}
		
				#menu-banner .menu-banner ul ul li.active-li a{
					color: #fff;
				}
			
				#menu-banner .menu-banner ul ul li:hover{
					background-color: var(--bgColor4);
				}
			
					#menu-banner .menu-banner ul ul li:hover a{
						color: #fff;
					}

/* splash */
#splash{
	background-position: bottom center !important;
	background-image: url(../images/ui/bg.jpg);
}

#splash.home{
	background-image: url(../images/slider/bg.jpg);
}
	
	#splash .content{
		padding: 10% 0;
	}
	
	#splash.home .content{
		padding: 10% 0 4%;
	}
	
		#splash.home .content .slider{
			width: 60%;
			margin: 0 auto;
		}
		
			#splash.home .content .slider .image{
				width: 100%;
			}

/* slogan */
#slogan{
	color: #fff;
	text-shadow: 3px 2px #000;
	font-size: var(--fontSize150);
	background-color: var(--bgColor3);
	font-family: Harlow Solid Italic, Helvetica, Arial, sans-serif;
}

/* Sum-Div */
#sum-div{
	background-color: #fff;
}

	#sum-div .sum-row{}

		/* Title */
		#sum-div .sum-row .title{
			position: relative;
		}
		
			#sum-div .sum-row .title:after{
				left: 25%;
				bottom: 0;
				width: 50%;
				content: '';
				position: absolute;
				border-bottom: 3px solid var(--bgColor);
			}

	/* Circles */
	#sum-div .sum-row.circles.second{
		color: #fff;
		background-image: url('../images/home/bg.jpg');
	}

		#sum-div .sum-row.circles.second .sum-row-wrapper > .title{
			margin-bottom: 40px;
		}

		#sum-div .sum-row.circles.second .sum-column .image{
			width: 45%;
		}

	/* Summary */
	#sum-div .sum-row.summary .sum-column .image{
		width: 60%;
		margin: 0 auto;
	}
		
		#sum-div .sum-row.summary .sum-column .image img{
			width: 100%;
		}

	/* Videos */
	#sum-div .sum-row.videos{
		background-image: url(../images/home/ford-bg.jpg);
	}

		#sum-div .sum-row.videos .video{
			background-color: #fff;
			padding: 7px !important;
		}

/* Products */
#products{
	padding: 15% 0 10%;
	background-image: url(../images/products/bg.jpg);
}
		
	#products .title h2{
		color: #fff;
		margin: 0 auto 2%;
		text-align: center;
		font-weight: normal;
		text-shadow: 3px 2px #000;
		font-size: var(--fontSize400);
		font-family: Harlow Solid Italic, Helvetica, Arial, sans-serif;
	}

	#products .slogan{
		width: 30%;
		color: #fff;
		padding: 10px 5px;
		margin: 0 auto 3%;
		text-align: center;
		font-size: var(--fontSize200);
		background-color: var(--bgColor);
	}

	#products .brochures{
		margin-bottom: 2.5%;
	}

	#products .products{
		margin-bottom: 2.5%;
	}

		#products .products .single{
			width: 60%;
			margin: 0 auto;
		}

		#products .products .image{
			margin-bottom: 14%;
			border: 1px solid #000;
		}

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

			#products .products .image img{
				margin-bottom: -1px;
			}

		#products .products .video{
			background-color: #000;
			border: 1px solid #000;
		}

			#products .products .video iframe{
				margin-bottom: -4px;
			}

	#products img{
		width: 100%;
	}

/* Body */
#body{}
	
	#left{}
		
		#left > .label-box{}
			
			#left > .label-box > .title{
				color: #fff;
				background-color: var(--bgColor);
			}

			#left > .label-box > .content{
				background-color: #fff;
			}

				#left > .label-box > .content .contact-box{}
				
					#left > .label-box > .content .contact-box .label{
						margin: 8px 15px;
						-webkit-transform: skewX(-20deg);
					}
				
					#left > .label-box > .content .contact-box .label:nth-child(2){
						margin-top: -15px;
					}

	#content{}
		
		#content > .spread{}
			
			#content > .spread > .title{
				font-weight: bold;
				border-bottom: 1px dashed var(--bgColor5);
			}
			
			#content > .spread > .title span:before{
				width: 8px;
				content: '';
				height: 8px;
				margin-right: 5px;
				display: inline-block;
				background-color: #fff;
				border: 5px solid var(--bgColor);
				
				-webkit-border-radius: 50%;
				-moz-border-radius: 50%;
				-ms-border-radius: 50%;
				-o-border-radius: 50%;
				border-radius: 50%;
			}
	
			#content > .spread > .data{}
	
				/* h3 */
				#content > .spread > .data h3{
					color: var(--bgColor);
					border-bottom: 1px dashed var(--bgColor5);
				}

				/* ul */
				#content > .spread > .data ul.reduced{
					margin: 0;
					padding: 0 20px;
				}
				
/* Page Options */
#page-options{
	background-color: var(--bgColor3);
}

	#page-options a{
		color: #fff;
	}

	#page-options .left:hover,
	#page-options .right:hover{
		background-color: var(--bgColor4);
	}

/* Footer */
#footer{
	color: #fff;
	background-color: var(--bgColor4);
}

	#footer .title{
		color: #fff;
	}

	#footer a{
		color: #eee;
	}

		#footer a:hover{
			color: #fff;
		}
	
/* 1750px */				
@media screen and (max-width: 1750px){}
	
/* 1650px */				
@media screen and (max-width: 1650px){
	#menu-banner .menu-banner ul li a{
		padding: 24px 18px;
	}
	
	#products .slogan{
		width: 40%;
	}
}
	
/* 1550px */				
@media screen and (max-width: 1550px){}
	
/* 1450px */				
@media screen and (max-width: 1450px){
	#menu-banner .menu-banner ul li a{
		padding: 22px 16px;
	}
}

/* 1380px */			
@media screen and (max-width: 1380px){}

/* 1280px */			
@media screen and (max-width: 1280px){}

/* 1200px */			
@media screen and (max-width: 1200px){
	#menu-banner .menu-banner ul li a{
		padding: 18px 14px;
	}
}
	
/* 1024px */	
@media screen and (max-width: 1024px){
	#menu-banner .menu-banner ul li a{
		padding: 16px 8px;
	}

	#products .title h2{
		margin: 0 auto 4%;
	}
	
	#products .slogan{
		width: 50%;
		margin: 0 auto 5%;
	}
}

/* 950px */
@media screen and (max-width: 950px){	
	#menu-banner .menu-banner ul li a{
		padding: 14px 6px;
	}
}

/* 850px */
@media screen and (max-width: 850px){	
	#menu-banner .menu-banner ul li a{
		padding: 12px 4px;
	}
}

/* 600px */
@media screen and (max-width: 600px){
	#splash .content{
		padding: 20% 0;
	}
	
	#splash.home .content{
		padding: 40% 0 15%;
	}
		
		#splash.home .content .slider{
			width: 90%;
		}
	
	#products{
		padding: 20% 0;
	}
	
		#products .slogan{
			width: 80%;
		}
		
			#products .products .single{
				width: 100%;
			}
			
			#products .products .image{
				margin-bottom: 2.5%;
			}
}