/*!
*		    ________      .___   
*	__  _  _\_____  \   __| _/
*	\ \/ \/ / _(__  <  / __ |
*	 \     / /       \/ /_/ |
*	  \/\_/ /______  /\____ |
*	               \/      \/
*
*	@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{
	--customBgColor: #f16f08;
	--customBgColor2: #4aae48;
	--customBgColor3: #353535;
	--customBgColor4: #b9b8ba;
}

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

/* Fonts */
@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{
	font-family: Lato, Helvetica, Arial, sans-serif;
}

/* Headings */
h1, h2, h3{
	font-weight: 400;
	letter-spacing: 1px;
	text-transform: uppercase;
	font-family: ERASBD, Helvetica, Arial, sans-serif;
}

h3{
	color: var(--customBgColor3);
}
	
/* Text Color */
.blue{color: var(--accentColor);}
.dark-blue{color: var(--accentColor2);}
.orange{color: var(--customBgColor);}
.green{color: var(--customBgColor2);}
.grey{color: var(--customBgColor3);}
.dark-grey{color: var(--customBgColor4);}

/* Menu */
#menu-banner{}

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

	/* Nav Anchor */
	#menu-banner .menu-banner .nav-anchor{
		padding: clamp(8px, 0.7vw, 13px) clamp(7px, 0.7vw, 12px);
	}

	/* Nav Bar */
	#menu-banner .menu-banner .nav-bar{
		padding: clamp(4px, 0.7vw, 12px) 0;
	}
			
		#menu-banner .menu-banner .nav-bar .nav-bar-item > .nav-anchor{
			margin: 0 4px;
			border-radius: var(--borderRadius);
		}
			
			#menu-banner .menu-banner .nav-bar .nav-bar-item:hover > .nav-anchor,
			#menu-banner .menu-banner .nav-bar .nav-bar-item.active > .nav-anchor{
				color: var(--whiteColor);
				transition: background linear 0.5s;
				background: var(--accentColor2);
			}
			
			#menu-banner .menu-banner .nav-bar .nav-bar-item.active > .nav-anchor{
				background: var(--accentColor);
			}

	/* Nav Dropdown */
	#menu-banner .menu-banner .nav-dropdown{
		border-radius: var(--borderRadius);
	}
		
		#menu-banner .menu-banner .nav-dropdown .nav-dropdown-item{
			margin: 4px;
		}
	
			#menu-banner .menu-banner .nav-dropdown .nav-dropdown-item > .nav-anchor{
				color: var(--neutral222);
				border-radius: var(--borderRadius);
			}
		
			#menu-banner .menu-banner .nav-dropdown .nav-dropdown-item:hover > .nav-anchor,
			#menu-banner .menu-banner .nav-dropdown .nav-dropdown-item.active > .nav-anchor{
				color: var(--whiteColor);
				background-color: var(--accentColor2);
			}

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

	#pg-splash h1{
		color: var(--whiteColor);
		text-align: center;
		font-size: var(--fontSize300);
		text-shadow: var(--textShadow);
	}
	
	#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: var(--whiteBgColor);
}

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

		#logo-banner .welcome h1{
			color: var(--neutralAAA);
		}

			#logo-banner .welcome h1 span{
				opacity: 0;
			}
			
			#logo-banner .welcome h1 span.active:nth-child(1){color: var(--accentColor);}
			#logo-banner .welcome h1 span.active:nth-child(2){color: var(--customBgColor);}
			#logo-banner .welcome h1 span.active:nth-child(3){color: var(--customBgColor2);}
			#logo-banner .welcome h1 span.active:nth-child(4){color: var(--customBgColor3);}
			#logo-banner .welcome h1 span.active:nth-child(5){color: var(--customBgColor4);}
			#logo-banner .welcome h1 span.active:nth-child(6){color: var(--accentColor);}
			#logo-banner .welcome h1 span.active:nth-child(7){color: var(--customBgColor);}
		
		#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(--accentColor);}
		#logo-banner .services div.active:nth-child(2){color: var(--customBgColor);}
		#logo-banner .services div.active:nth-child(3){color: var(--customBgColor2);}
		#logo-banner .services div.active:nth-child(4){color: var(--customBgColor3);}
		#logo-banner .services div.active:nth-child(5){color: var(--customBgColor4);}
	
	#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(--accentColor);}
			#logo-banner .experience h1 span.active:nth-child(2){color: var(--customBgColor);}
			#logo-banner .experience h1 span.active:nth-child(3){color: var(--customBgColor2);}
			#logo-banner .experience h1 span.active:nth-child(4){color: var(--customBgColor3);}
			#logo-banner .experience h1 span.active:nth-child(5){color: var(--accentColor);}
			#logo-banner .experience h1 span.active:nth-child(6){color: var(--customBgColor);}
			#logo-banner .experience h1 span.active:nth-child(7){color: var(--customBgColor2);}
			#logo-banner .experience h1 span.active:nth-child(8){color: var(--customBgColor3);}
			#logo-banner .experience h1 span.active:nth-child(9){color: var(--accentColor);}
			#logo-banner .experience h1 span.active:nth-child(10){color: var(--customBgColor);}
			#logo-banner .experience h1 span.active:nth-child(11){color: var(--customBgColor2);}
	
		#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;
			}
		}

/* Sum Div */
#sum-div{}

	#sum-div .sum-row.cover{
		background-image: url('../images/home/one-knot.jpg');
	}

		#sum-div .sum-row.cover .sum-column{
			margin-left: var(--gap40);
			background-color: var(--whiteBgColor95);
		}

	#sum-div .sum-row.offers{
		background-color: var(--bodyBgColor);
	}

		#sum-div .sum-row.offers .sum-column{
			padding: var(--gap20);
			border-radius: var(--borderRadius);
			background-color: var(--whiteBgColor);
			border: 1px solid var(--neutralBorderDDD);
		}

			#sum-div .sum-row.offers .sum-column .image{
				border-radius: var(--borderRadius);
			}

/* Body */
#body{}

	/* Left & Right */
	#left,
	#right{}
		
		/* Label Box */
		#left > .label-box,
		#right > .label-box{}

			#left > .label-box > .title,
			#right > .label-box > .title{}

	/* Content */
	#content{}

		/* Spread */
		#content > .spread{}
		
			#content > .spread > .title{}
		
			#content > .spread > .data{}
		
				/* H3 */
				#content > .spread > .data h3{
					color: var(--customBgColor3);
					font-size: var(--fontSize140);
					border-bottom: 1px dashed var(--neutralBorderDDD);
				}

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

/* Body Wide */
#body.wide{}

	/* Content */
	#content{
		container-type: inline-size;
	}

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

		#content > .panel:nth-child(1){
			z-index: 3;
		}

		#content > .panel:nth-child(2){
			z-index: 2;
		}

		#content > .panel:nth-child(3){
			z-index: 1;
		}

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

			#content > .panel:not(:last-child){
				--slope: calc(tan(1.5deg) * 100cqw);
				margin-bottom: calc(var(--slope) * -1);
				clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--slope)), 0 100%);
			}
		
			#content > .panel h1,
			#content > .panel h2{
				margin-bottom: 0;
				color: var(--customBgColor3);
				font-size: var(--fontSize300);
			}
		
			#content > .panel h3{
				border-bottom: 1px solid var(--neutralBorderDDD);
			}

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

			#content > .panel.services .service{
				text-align: center;
				padding: var(--gap20);
				border-radius: var(--borderRadius);
				background-color: var(--whiteBgColor);
				border: 1px solid var(--neutralBorderDDD);
			}

				#content > .panel.services .service .image{
					border-radius: var(--borderRadius);					
				}

				#content > .panel.services .service h3{
				}

				#content > .panel.services .service p{
					margin: 0 0 var(--gap20);
				}

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

/* 1380px */		
@media screen and (max-width: 1380px){
	#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;
	}
}

/* 1100px */		
@media screen and (max-width: 1100px){
	#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 > .note{
		padding: 10px;
	}
}