/*
*		    ________      .___   
*	__  _  _\_____  \   __| _/
*	\ \/ \/ / _(__  <  / __ |
*	 \     / /       \/ /_/ |
*	  \/\_/ /______  /\____ |
*	               \/      \/
*
*	@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)
*	
*	@conception		<23 September 2021>
*	@updated		<04 March 2023>
*	@version		<3.03.04>
*/

/*------------- Core Skip To Main -------------*/

.core-skip-to-main{
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	z-index: 10000;
	position: absolute;
	align-items: center;
	justify-content: center;
	font-size: var(--fontSize200);
	color: var(--color2) !important;
	background-color: var(--bgColor);
	
	transition: transform;
	transform: translateY(-500%);
}

.core-skip-to-main:focus{
	transform: translateY(0);
}

/*------------- Core Menu Btn -------------*/
	
.core-menu-btn{
	width: 25px;
	height: 20px;
	cursor: pointer;
	position: relative;
}

	.core-menu-btn span{
		left: 0;
		height: 4px;
		width: 100%;
		display: block;
		position: absolute;
		background-color: var(--mobileMenuBtnColor);
		
		opacity: 1;
		filter: alpha(opacity=100);
		
		-webkit-transform: rotate(0deg);
		-o-transform: rotate(0deg);
		-ms-transform: rotate(0deg);
		transform: rotate(0deg);
		
		-webkit-transition: .25s ease-in-out;
		-o-transition: .25s ease-in-out;
		transition: .25s ease-in-out;
	}
	
	.core-menu-btn span:nth-child(1){
		top: 0;
	}
	
	.core-menu-btn span:nth-child(2),
	.core-menu-btn span:nth-child(3){
		top: 8px;
	}
	
	.core-menu-btn span:nth-child(4){
		top: 16px;
	}
	
	.core-menu-btn.open span:nth-child(1){
		top: 8px;
		width: 0;
		left: 50%;
	}
	
	.core-menu-btn.open span:nth-child(2){
		-webkit-transform: rotate(45deg);
		-o-transform: rotate(45deg);
		-ms-transform: rotate(45deg);
		transform: rotate(45deg);
	}
	
	.core-menu-btn.open span:nth-child(4){
		top: 16px;
		width: 0;
		left: 50%;
	}
	
	.core-menu-btn.open span:nth-child(3){
		-webkit-transform: rotate(-45deg);
		-o-transform: rotate(-45deg);
		-ms-transform: rotate(-45deg);
		transform: rotate(-45deg);
	}

/*------------- Core Menu -------------*/

.core-menu{
	z-index: 1000;
	margin: 0 auto;
	position: relative;
}

	.core-menu ul{
		margin: 0;
		padding: 0;
		float: left;
		list-style: none;
		position: relative;
		display: inline-table;
	}

		.core-menu ul li{
			float: left;
			text-align: center;
		}
			
			.core-menu ul li:hover{}

			.core-menu ul li:hover > ul{
				display: block;
			}

				.core-menu ul li a{
					display: block; 
				}

					.core-menu ul li a:link, 
					.core-menu ul li a:visited,
					.core-menu ul li a:hover{}

		.core-menu ul ul{
			top: 100%;
			padding: 0;
			width: 200px;
			display: none;
			z-index: 1001;
			position: absolute;
		}

		.core-menu ul ul.grid-2{width: 400px;}
		.core-menu ul ul.grid-3{width: 600px;}
		.core-menu ul ul.grid-4{width: 800px;}
		.core-menu ul ul.grid-5{width: 1000px;}

			.core-menu ul ul li{
				float: none;
				text-align: left;
				position: relative;
			}

			.core-menu ul ul li:hover{}
			
				.core-menu ul ul li a{
					padding: 10px 12px !important;
				}

				.core-menu ul ul li a:link, 
				.core-menu ul ul li a:visited{}
				.core-menu ul ul li a:hover{}

		.core-menu ul ul ul{
			top: 0;
			left: 100%;
			margin-top: 10px;
			position: absolute;
		}

		.core-menu ul ul ul:before{
			left: 0;
			right: 0;
			top: -20px;
			content: '';
			width: 100%;
			height: 20px;
			position: absolute;
		}

		.core-menu ul ul ul:after{
			left: 0;
			right: 0;
			content: '';
			width: 100%;
			height: 20px;
			bottom: -20px;
			position: absolute;
		}

		.core-menu .right ul ul ul{
			left: -100%;
		}
		
		.core-menu .right ul ul ul.grid-2{left: -200%;}
		.core-menu .right ul ul ul.grid-3{left: -300%;}
		.core-menu .right ul ul ul.grid-4{left: -400%;}
		.core-menu .right ul ul ul.grid-5{left: -500%;}

@media screen and (max-width: 1380px){
	.core-menu{font-size: var(--fontSize90);}
	.core-menu ul ul{width: 150px;}
	.core-menu ul ul.grid-2{width: 300px;}
	.core-menu ul ul.grid-3{width: 450px;}
	.core-menu ul ul.grid-4{width: 600px;}
}

/*------------- Core Mobile Menu -------------*/

.core-mobile-menu{
	height: 50px;
	z-index: 1000;
	position: relative;
}

	.core-mobile-menu .logo{
		top: 0;
		left: 0;
		position: absolute;
	}

	.core-mobile-menu .logo.hero.default{
		top: auto;
		left: auto;
		margin: 0 auto;
		position: relative;
		width: 150px !important;
	}
	
	.core-mobile-menu .logo.hero.basic{
		width: auto !important;
	}
	
		.core-mobile-menu .logo img{
			margin: 8px;
			height: 34px;
		}
	
		.core-mobile-menu .logo.hero.default img{
			margin: 0 !important;
			padding: 0 !important;
			height: auto !important;
			width: 100% !important;
		}
	
		.core-mobile-menu .logo.hero.basic img{
			padding: 0 !important;
			width: auto !important;
		}
	
	.core-mobile-menu .core-menu-btn{
		top: 0;
		right: 0;
		margin: 15px;
		position: absolute;
	}
		
	.core-mobile-menu-content{
		display: none;
		z-index: 1000;
		position: relative;
		background-color: var(--mobileMenuContentBgColor);
	}
	
		.core-mobile-menu-content .link{
			display: flex;
			cursor: pointer;
			color: var(--mobileMenuColor);
		}
	
			.core-mobile-menu-content .link a{
				color: var(--mobileMenuColor);
			}
	
		.core-mobile-menu-content .link.selected,
		.core-mobile-menu-content .link.active-link{
			color: var(--mobileMenuSelectedColor);
			background-color: var(--mobileMenuSelectedBgColor);
		}

			.core-mobile-menu-content .link.selected a,
			.core-mobile-menu-content .link.active-link a{
				color: var(--mobileMenuSelectedColor);
			}
	
			.core-mobile-menu-content .link .href{
				flex-grow: 1;
				padding: 10px 12px;
			}
	
			.core-mobile-menu-content .link .expand-btn{
				width: 36px;
				padding: 10px 0;
				font-weight: bold;
				text-align: center;
			}
	
		.core-mobile-menu-content .dropdown{
			padding: 0 5%;
			display: none;
		}

/*------------- Core Basic Menu -------------*/

.core-basic-menu{
	top: 0;
	width: 100%;
	z-index: 1000;
	position: sticky;
	background-color: #fff;
}

.core-basic-menu.menu-float{
	position: fixed;
    background-color: transparent;
}

	.core-basic-menu .top-banner{
		display: flex;
		padding: 7px 0;
		align-items: center;
		font-size: var(--fontSize90);
	}

	.core-basic-menu.menu-float .top-banner{
		background-color: #fff;
	}
	
		.core-basic-menu .top-banner span{
			margin: 0 7px;
		}
	
		.core-basic-menu .top-banner .left{}
		
		.core-basic-menu .top-banner .right{}
		
			.core-basic-menu .top-banner .right .core-notifications{
				margin: -1px 0;
			}
		
	.core-basic-menu .menu-banner{}
		
		.core-basic-menu.menu-float .menu-banner .core-menu{
			padding: 10px;
			background-color: #fff;
			margin-top: 20px !important;
			
			-webkit-box-sizing: border-box;
			-moz-box-sizing: border-box;
			box-sizing: border-box;
			
			-webkit-border-radius: var(--borderRadius);
			-moz-border-radius: var(--borderRadius);
			-m-border-radius: var(--borderRadius);
			-o-border-radius: var(--borderRadius);
			border-radius: var(--borderRadius);
		}
	
	.core-basic-menu .search-banner{
		display: none;
		padding: 10px 0;
	}
	
		.core-basic-menu .search-banner input{
			background-color: #fff;
		}

/* 1024px */
@media screen and (max-width: 1024px){
	.core-basic-menu.core-basic-menu-count-5 .top-banner .right > *:nth-child(1){
		display: none;
	}
}

/* 800px */
@media screen and (max-width: 800px){
	.core-basic-menu.core-basic-menu-count-4 .top-banner .right > *:nth-child(1){
		display: none;
	}
	
	.core-basic-menu.core-basic-menu-count-5 .top-banner .right > *:nth-child(2){
		display: none;
	}
}

/* 600px */
@media screen and (max-width: 600px){
	.core-basic-menu.menu-float{
		position: sticky;
		background-color: #fff;
	}
	
	.core-basic-menu .top-banner{
		display: none;
	}

	.core-basic-menu .menu-banner{
		margin: 0 !important;
		padding: 0 !important;
	}
}

/*------------- Core Pro Menu -------------*/

.core-pro-menu{
	top: 0;
	width: 100%;
	z-index: 1000;
	position: sticky;
	background-color: #fff;
}

	.core-pro-menu .menu-banner{}

		.core-pro-menu .menu-banner > .left{
			width: 20%;
		}

		.core-pro-menu .menu-banner > .right{
			width: 80%;
		}

			.core-pro-menu .menu-banner > .right .top-banner{
				display: flex;
				padding: 7px 0;
				margin: 0 0 0 20px;
				align-items: center;
				justify-content: flex-end;
				font-size: var(--fontSize90);
			}
				
				.core-pro-menu .menu-banner > .right .top-banner span{
					margin: 0 7px;
				}
		
				.core-pro-menu .menu-banner > .right .top-banner .core-notifications{
					margin: -1px 0;
				}

			.core-pro-menu .menu-banner > .right .menu{
				padding: 4px 0;
				margin: 0 0 0 20px;
			}
	
	.core-pro-menu .search-banner{
		display: none;
		padding: 10px 0;
	}
	
		.core-pro-menu .search-banner input{
			background-color: #fff;
		}

/* 1350px */
@media screen and (max-width: 1350px){
	.core-pro-menu.core-pro-menu-count-6 .menu-banner > .right .top-banner > *:nth-child(1),
	.core-pro-menu.core-pro-menu-count-5 .menu-banner > .right .top-banner > *:nth-child(1){
		display: none;
	}
}

/* 1150px */
@media screen and (max-width: 1150px){
	.core-pro-menu.core-pro-menu-count-6 .menu-banner > .right .top-banner > *:nth-child(2),
	.core-pro-menu.core-pro-menu-count-5 .menu-banner > .right .top-banner > *:nth-child(2){
		display: none;
	}
	
	.core-pro-menu.core-pro-menu-count-4 .menu-banner > .right .top-banner > *:nth-child(1){
		display: none;
	}
}

/* 950px */
@media screen and (max-width: 950px){
	.core-pro-menu.core-pro-menu-count-6 .menu-banner > .right .top-banner > *:nth-child(3),
	.core-pro-menu.core-pro-menu-count-5 .menu-banner > .right .top-banner > *:nth-child(3){
		display: none;
	}
	
	.core-pro-menu.core-pro-menu-count-4 .menu-banner > .right .top-banner > *:nth-child(2){
		display: none;
	}
}

/* 600px */
@media screen and (max-width: 600px){
	.core-pro-menu .menu-banner{
		width: 100%;
		margin: 0 !important;
		padding: 0 !important;
	}

		.core-pro-menu .menu-banner > .left{
			display: none;
		}

		.core-pro-menu .menu-banner > .right{
			width: 100% !important;
		}

			.core-pro-menu .menu-banner > .right .top-banner{
				display: none;
			}

			.core-pro-menu .menu-banner > .right .menu{
				margin: 0 !important;
				padding: 0 !important;
			}
}

/*------------- Core Hero Menu -------------*/

.core-hero-menu{
	top: 0;
	width: 100%;
	z-index: 1000;
	position: sticky;
	background-color: #fff;
}

	.core-hero-menu .top-banner{
		display: flex;
		padding: 7px 0;
		align-items: center;
		font-size: var(--fontSize90);
	}
	
		.core-hero-menu .top-banner span{
			margin: 0 7px;
		}
	
		.core-hero-menu .top-banner .left{}
		
		.core-hero-menu .top-banner .right{}
		
			.core-hero-menu .top-banner .right .core-notifications{
				margin: -1px 0;
			}
		
	.core-hero-menu .menu-banner{}

		.core-hero-menu .menu-banner .left > ul{
			float: right;
		}

		.core-hero-menu .menu-banner .logo.hero{
			margin-bottom: -1000px;
		}
		
			.core-hero-menu .menu-banner .logo.hero img{
				width: 100%;
			}
	
	.core-hero-menu .search-banner{
		display: none;
		padding: 10px 0;
	}
	
		.core-hero-menu .search-banner input{
			background-color: #fff;
		}

/* 600px */
@media screen and (max-width: 600px){
	.core-hero-menu .menu-banner{
		margin: 0 !important;
		padding: 0 !important;
	}
	
	.core-hero-menu .top-banner{
		display: none;
	}

	.core-hero-menu .menu-banner .logo.default{
		margin: 5px auto 0 !important;
	}
}