/*
*		    ________      .___   
*	__  _  _\_____  \   __| _/
*	\ \/ \/ / _(__  <  / __ |
*	 \     / /       \/ /_/ |
*	  \/\_/ /______  /\____ |
*	               \/      \/
*
*	@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: #377eb6;		/* Blue */
	--bgColor2: #266597;	/* Dark Blue */
	--bgColor3: #f16f08;	/* Orange */
	--bgColor4: #4aae48;	/* Green */
	--bgColor5: #646464;	/* Grey */
	--bgColor6: #b9b8ba;	/* Dark Grey */
	--bgColor7: #F2F4F5;
	
	--linkColor: #000;
	--linkHoverColor: #266597;
	
	--mobileMenuColor: #000;
	--mobileMenuBtnColor: #377eb6;
	--mobileMenuSelectedColor: #fff;
	--mobileMenuSelectedBgColor: #377eb6;
	--mobileMenuContentBgColor: #eee;
	
	--btnColor: #fff;
	--btnBgColor: #377eb6;
	--btnHoverColor: #fff;
	--btnBgHoverColor: #266597;
	
	--dialogBgColor: #377eb6;
	--dialogBgColor2: #266597;
	--dialogHeadingColor: #fff;
}

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

@font-face{
    font-family: ERASBD;
    src: url('../fonts/ERASBD.woff'),
         url('../fonts/ERASBD.woff2'),
         url('../fonts/ERASBD.ttf'),
		 url('../fonts/ERASBD.eot'),
         url('../fonts/ERASBD.svg');
}

/* Body */
body{
	background-color: var(--bgColor7);
	font-family: Lato, Helvetica, Arial, sans-serif;
}

/* Headings */
h1, h2, h3{
	font-weight: 400;
	letter-spacing: 1px;
	font-family: ERASBD, Helvetica, Arial, sans-serif;
}
	
/* Text Color */
.blue{color: var(--bgColor);}
.dark-blue{color: var(--bgColor2);}
.orange{color: var(--bgColor3);}
.green{color: var(--bgColor4);}
.grey{color: var(--bgColor5);}
.dark-grey{color: var(--bgColor6);}

/* Menu */
#menu-banner{}

	/* Top Banner */
	#menu-banner .top-banner{
		border-bottom: 1px solid var(--bgColor7);
	}

	/* Menu */
	#menu-banner .menu-banner{}

		#menu-banner .menu-banner ul li a{
			color: #222;
			margin: 10px 5px;
			padding: 13px 12px;
			border-radius: 5px;
		}
			
			#menu-banner .menu-banner ul li:hover > a{
				color: #fff;
				background: var(--bgColor2);
				transition: background linear 0.5s;
			}
			
			#menu-banner .menu-banner ul li.active-li > a{
				color: #fff;
				background: var(--bgColor);
				transition: background linear 0.5s;
			}

				#menu-banner .menu-banner ul ul{}
				
					#menu-banner .menu-banner ul ul li a{
						margin: 0;
						color: #444;
						border-radius: 0;
					}
				
					#menu-banner .menu-banner ul ul li.active-li > a,
					#menu-banner .menu-banner ul ul li:hover > a{
						color: #fff;
						background: var(--bgColor3);
					}

/* Page Splash */
#pg-splash{
	padding: 10% 0;
	position: relative;
	background-image: url('../images/ui/bg.jpg');
}

	#pg-splash h1{
		color: #fff;
		text-align: center;
		font-size: var(--fontSize300);
		text-shadow: 0 1px 1px rgba(0, 0, 0, .4);
	}
	
	#pg-splash:after{
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		content: '';
		position: absolute;
		animation: slide 20s linear infinite;
		background: url('../images/ui/clouds.png');
	}
		
		@keyframes slide{
			from{
				background-position: 0 0;
			}to{
				background-position: -400px -200px;
			}
		}
		
/* Logo */
#logo-banner{
	height: 90vh;
	background-color: #fff;
}

	#logo-banner .welcome{
		top: 5%;
		right: 5%;
		width: 300px;
		position: absolute;
		text-align: right;
	}

		#logo-banner .welcome h1{
			color: #aaa;
		}

			#logo-banner .welcome h1 span{
				opacity: 0;
			}
			
			#logo-banner .welcome h1 span.active:nth-child(1){color: var(--bgColor);}
			#logo-banner .welcome h1 span.active:nth-child(2){color: var(--bgColor3);}
			#logo-banner .welcome h1 span.active:nth-child(3){color: var(--bgColor4);}
			#logo-banner .welcome h1 span.active:nth-child(4){color: var(--bgColor5);}
			#logo-banner .welcome h1 span.active:nth-child(5){color: var(--bgColor6);}
			#logo-banner .welcome h1 span.active:nth-child(6){color: var(--bgColor);}
			#logo-banner .welcome h1 span.active:nth-child(7){color: var(--bgColor3);}
		
		#logo-banner .welcome .note{}

			#logo-banner .welcome .note small{
				animation: pulse 2s infinite;
			}

				@keyframes pulse{
					0%{
						opacity: 0;
					}70%{
						opacity: 0.5;
					}100%{
						opacity: 1;
					}
				}
	
	#logo-banner .services{
		right: 5%;
		bottom: 5%;
		width: 300px;
		text-align: right;
		position: absolute;
		font-size: var(--fontSize120);
	}
	
		#logo-banner .services div{
			opacity: 0;
		}
	
		#logo-banner .services div.active{
			font-weight: bold;
		}
	
		#logo-banner .services div.active:nth-child(1){color: var(--bgColor);}
		#logo-banner .services div.active:nth-child(2){color: var(--bgColor3);}
		#logo-banner .services div.active:nth-child(3){color: var(--bgColor4);}
		#logo-banner .services div.active:nth-child(4){color: var(--bgColor5);}
		#logo-banner .services div.active:nth-child(5){color: var(--bgColor6);}
	
	#logo-banner .experience{
		top: 5%;
		left: 5%;
		width: 400px;
		position: absolute;
		font-size: var(--fontSize120);
	}

		#logo-banner .experience h1 span{
			opacity: 0;
		}
		
			#logo-banner .experience h1 span.active:nth-child(1){color: var(--bgColor);}
			#logo-banner .experience h1 span.active:nth-child(2){color: var(--bgColor3);}
			#logo-banner .experience h1 span.active:nth-child(3){color: var(--bgColor4);}
			#logo-banner .experience h1 span.active:nth-child(4){color: var(--bgColor5);}
			#logo-banner .experience h1 span.active:nth-child(5){color: var(--bgColor);}
			#logo-banner .experience h1 span.active:nth-child(6){color: var(--bgColor3);}
			#logo-banner .experience h1 span.active:nth-child(7){color: var(--bgColor4);}
			#logo-banner .experience h1 span.active:nth-child(8){color: var(--bgColor5);}
			#logo-banner .experience h1 span.active:nth-child(9){color: var(--bgColor);}
			#logo-banner .experience h1 span.active:nth-child(10){color: var(--bgColor3);}
			#logo-banner .experience h1 span.active:nth-child(11){color: var(--bgColor4);}
	
		#logo-banner .experience div{
			opacity: 0;
		}
	
	#logo-banner .team{
		left: 5%;
		bottom: 5%;
		opacity: 0;
		width: 300px;
		position: absolute;
	}

	#logo-banner .image{
		width: 600px;
		height: 600px;
		position: absolute;
		top: calc((85vh - 600px) / 2);
		left: calc((100vw - 620px) / 2);
	}

	#logo-banner .image:nth-child(1){
		animation: fadein 2s;
	}

	#logo-banner .image:nth-child(2){
		opacity: 0;
	}
		
		@keyframes fadein{
			from{
				opacity: 0;
			}to{
				opacity: 1;
			}
		}

/* Body */
#body{}

	#left{}
		
		/* Label Box */
		#left > .label-box{
			background: #fff;
		}

			#left > .label-box > .title{
				width: 80%;
				margin: 0 auto;
				color: var(--bgColor4);
				border-bottom: 3px solid var(--bgColor6);
			}

			#left > .label-box > .content{}

	#content{}

		/* Spread */
		#content > .spread{}
		
			/* Title */
			#content > .spread > .title{
				width: 93%;
				margin: 0 auto;
				color: var(--bgColor);
				border-bottom: 3px solid var(--bgColor6);
			}
		
			/* Data */
			#content > .spread > .data{}
		
				/* H3 */
				#content > .spread > .data h3{
					color: var(--bgColor5);
					font-size: var(--fontSize140);
					border-bottom: 1px dashed #ddd;
				}

		/* Note */
		#content > .note{
			padding: 30px;
			text-align: center;
			color: var(--bgColor5);
		}
		
			#content > .note span{
				font-weight: bold;
				font-style: italic;
				font-size: var(--fontSize120);
			}

#body.wide{}

	#content{}

		/* Panel */
		#content > .panel{
			position: relative;
		}

		#content > .panel:nth-child(even){
			background-color: var(--bgColor7);
		}

			#content > .panel:not(:last-child):after{
				left: 0;
				right: 0;
				bottom: 0;
				z-index: 1;
				content: '';
				height: 50px;
				display: block;
				position: absolute;
				background-color: #fff;
				
				transform: skewY(-1.5deg);
				transform-origin: 100%;
			}

			#content > .panel:not(:last-child):nth-child(even):after{
				background-color: var(--bgColor7);
			}
		
			#content > .panel h1,
			#content > .panel h2{
				width: 600px;
				margin: 0 auto;
				color: var(--bgColor5);
				font-size: var(--fontSize300);
			}
		
			#content > .panel h3{
				border-bottom: 1px solid #ddd;
			}

		#content > .panel.services{}
		
			#content > .panel.services .artwork{
				margin: 5% 0 0;
			}

/* Page Options */
#page-options{
	background: var(--bgColor);
}

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

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

/* Footer */
#footer{
	color: #eee;
	background: var(--bgColor2);
}

	#footer a{
		color: #eee;
	}

	#footer a:hover{
		color: #fff;
	}

	#footer .title{
		color: #fff;
	}

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

/* 1550px */		
@media screen and (max-width: 1550px){
	#menu-banner .menu-banner ul li a{
		margin: 8px 3px;
		padding: 11px 10px;
	}

	#logo-banner .image{
		width: 500px;
		height: 500px;
		top: calc((85vh - 500px) / 2);
		left: calc((100vw - 500px) / 2);
	}
}

/* 1380px */		
@media screen and (max-width: 1380px){
	#menu-banner .menu-banner ul li a{
		margin: 7px 3px;
		padding: 10px 9px;
	}

	#logo-banner .welcome{
		top: 8%;
		right: 8%;
	}

	#logo-banner .services{
		right: 8%;
		bottom: 8%;
	}
	
	#logo-banner .experience{
		top: 8%;
		left: 8%;
	}
	
	#logo-banner .team{
		left: 8%;
		bottom: 8%;
	}

	#logo-banner .image{
		width: 350px;
		height: 350px;
		top: calc((85vh - 350px) / 2);
		left: calc((100vw - 350px) / 2);
	}
	
	#content > .note{
		padding: 20px;
	}
}

/* 1250px */		
@media screen and (max-width: 1250px){
	#menu-banner .menu-banner ul li a{
		margin: 6px 3px;
		padding: 9px 8px;
	}
}

/* 1100px */		
@media screen and (max-width: 1100px){
	#menu-banner .menu-banner ul li a{
		margin: 5px 3px;
		padding: 8px 7px;
	}
	
	#logo-banner .services{
		width: 200px;
	}
}

/* 1024px */		
@media screen and (max-width: 1024px){
	#logo-banner .image{
		width: 250px;
		height: 250px;
		top: calc((85vh - 250px) / 2);
		left: calc((100vw - 250px) / 2);
	}
}

/* 600px */		
@media screen and (max-width: 600px){
	#pg-splash{
		padding: 20% 0;
	}
	
	#logo-banner{
		height: auto;
	}
		
		#logo-banner .welcome{
			top: auto;
			right: auto;
			width: 80%;
			margin: 0 auto;
			padding: 30px 0;
			text-align: center;
			position: relative;
		}
		
			#logo-banner .welcome h1 span{
				opacity: 1;
			}
		
		#logo-banner .image{
			top: auto;
			left: auto;
			width: 80%;
			margin: 0 auto;
			position: relative;
		}

		#logo-banner .team{
			left: auto;
			width: 80%;
			opacity: 1;
			bottom: auto;
			margin: 0 auto;
			padding: 30px 0;
			text-align: center;
			position: relative;
		}
		
		#logo-banner .welcome .note,
		#logo-banner .services,
		#logo-banner .experience{
			display: none;
		}

	#content > .spread > .title{
		width: 80%;
		margin: 0 auto;
		text-align: center;
	}
	
	#content > .note{
		padding: 10px;
	}

	#content > .panel:not(:last-child):after{
		height: 20px;
	}
}