/*
*		    ________      .___   
*	__  _  _\_____  \   __| _/
*	\ \/ \/ / _(__  <  / __ |
*	 \     / /       \/ /_/ |
*	  \/\_/ /______  /\____ |
*	               \/      \/
*
*	@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)
*
*	@source			core.css
*	
*	@conception		<04 September 2021>
*	@updated		<19 February 2023>
*	@version		<3.02.19>
*/

/*------------- Useful Classes -------------*/

/* Scrollbar */
.scrollbar::-webkit-scrollbar{
	width: 6px;
}

.scrollbar::-webkit-scrollbar-track{
	background-color: #eee;

	-webkit-border-radius: var(--borderRadiusScrollBar);
	-moz-border-radius: var(--borderRadiusScrollBar);
	-m-border-radius: var(--borderRadiusScrollBar);
	-o-border-radius: var(--borderRadiusScrollBar);
	border-radius: var(--borderRadiusScrollBar);
}

.scrollbar::-webkit-scrollbar-thumb{
	background-color: var(--bgColor);

	-webkit-border-radius: var(--borderRadiusScrollBar);
	-moz-border-radius: var(--borderRadiusScrollBar);
	-m-border-radius: var(--borderRadiusScrollBar);
	-o-border-radius: var(--borderRadiusScrollBar);
	border-radius: var(--borderRadiusScrollBar);
}

.scrollbar::-webkit-scrollbar-thumb:hover{
	background: var(--bgColor2); 
}

/* the dimension [width] of the website */
.dmsn{margin: 0 auto; width: 1550px;} .dmsn .dmsn{width: 80%;}
@media screen and (max-width: 1920px){.dmsn{width: 80%;} .dmsn .dmsn{width: 80%;}}
@media screen and (max-width: 1550px){.dmsn{width: 85%;} .dmsn .dmsn{width: 85%;}}
@media screen and (max-width: 1380px){.dmsn{width: 90%;} .dmsn .dmsn{width: 90%;}}
@media screen and (max-width: 1250px){.dmsn{width: 95%;} .dmsn .dmsn{width: 95%;}}

/*------------- Dark Mode -------------*/

/* Dark Mode */
.dark-mode,
.dark-mode a,
.dark-mode select{
	color: #fff;
}

	.dark-mode select{
		background-color: var(--darkModeBgColor) !important;
		border-color: var(--darkModeBorderColor) !important;
	}

	/* Shimmer */
	.dark-mode .shimmer{
		background: #333;
		background-image: linear-gradient(to right, #333 0%, #222 30%, #333 60%, #333 100%);
		background-image: -moz-linear-gradient(to right, #333 0%, #222 30%, #333 60%, #333 100%); /* FF3.6-15 */
		background-image: -webkit-linear-gradient(to right, #333 0%, #222 30%, #333 60%, #333 100%); /* Chrome10-25,Safari5.1-6 */
	}

/*------------- Useful Classes -------------*/

/* no user select */
.no-user-select{
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
    -o-user-select: none;
	user-select: none;
}

/* link img icons */
img.linkIcon{height: 20px;}
@media screen and (max-width: 1100px){img.linkIcon{height: 18px;}}

/* helpers */
.auto{margin: 0 auto;}
.hide, .hidden{display: none;}
.left{float: left;}
.right{float: right;}
.center{margin: 0 auto;}
.soft{color: var(--softColor);}
.nowrap{white-space: nowrap;}
.center-text{text-align: center;}
.small-text{font-size: small;}
.medium-text{font-size: var(--fontSize120);}
.large-text{font-size: var(--fontSize140);}
.white{color: var(--whiteColor);}
.black{color: var(--blackColor);}
.red{color: var(--redColor);}
.green{color: var(--greenColor);}
.blue{color: var(--blueColor);}

/* invisible */
.invisible{
	opacity: 0;
	-moz-opacity: 0;
	-khtml-opacity: 0;
	-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
	filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);
	filter: alpha(opacity=0);
}

/* visible */
.visible{
	opacity: 1;
	-moz-opacity: 1;
	-khtml-opacity: 1;
	-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
	filter: progid:DXImageTransform.Microsoft.Alpha(opacity=100);
	filter: alpha(opacity=100);
}

/* loader background */
.load{
	height: 100%;
	min-height: 50px;
	background: url('../images/ui/loader.gif') no-repeat center center;
}

/* no data */
.no-data{
	padding: 10% 0;
	text-align: center;
	color: var(--softColor);
	font-size: var(--fontSize240);
}

/* sizing */
.box-sizing{
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

/* shadow */
.box-shadow{
	-webkit-box-shadow: 0px 1px 2px rgba(0,0,0, 0.701961);
	-moz-box-shadow: 0px 1px 2px rgba(0,0,0, 0.701961);
	box-shadow: 0px 1px 2px rgba(0,0,0, 0.701961);
}

/* skew */
.skew{
	-ms-transform: skewX(-20deg); /* IE 9 */
	-webkit-transform: skewX(-20deg); /* Safari */
	transform: skewX(-20deg);
}

.unskew{
	-ms-transform: skewX(20deg); /* IE 9 */
	-webkit-transform: skewX(20deg); /* Safari */
	transform: skewX(20deg);
}

/* flex */
.flex-center{
	display: flex;
	align-items: center;
}

.flex-center-content{
	display: flex;
	align-items: center;
	justify-content: center;
}

/* anchors */
a.anchor{}

/* image */
.image{
	width: 100%;
	overflow: hidden;
}

	.image img{
		width: 100%;
	}

/* rounded */
.rounded{
	-webkit-border-radius: var(--borderRadius);
	-moz-border-radius: var(--borderRadius);
	-m-border-radius: var(--borderRadius);
	-o-border-radius: var(--borderRadius);
	border-radius: var(--borderRadius);
}

/* rounded top */
.rounded-top{
	-webkit-border-radius: var(--borderRadius) var(--borderRadius) 0 0;
	-moz-border-radius: var(--borderRadius) var(--borderRadius) 0 0;
	-m-border-radius: var(--borderRadius) var(--borderRadius) 0 0;
	-o-border-radius: var(--borderRadius) var(--borderRadius) 0 0;
	border-radius: var(--borderRadius) var(--borderRadius) 0 0;
}

/* rounded bottom */
.rounded-bottom{
	-webkit-border-radius: 0 0 var(--borderRadius) var(--borderRadius);
	-moz-border-radius: 0 0 var(--borderRadius) var(--borderRadius);
	-m-border-radius: 0 0 var(--borderRadius) var(--borderRadius);
	-o-border-radius: 0 0 var(--borderRadius) var(--borderRadius);
	border-radius: 0 0 var(--borderRadius) var(--borderRadius);
}

/* rounded left */
.rounded-left{
	-webkit-border-radius: var(--borderRadius) 0 0 var(--borderRadius);
	-moz-border-radius: var(--borderRadius) 0 0 var(--borderRadius);
	-m-border-radius: var(--borderRadius) 0 0 var(--borderRadius);
	-o-border-radius: var(--borderRadius) 0 0 var(--borderRadius);
	border-radius: var(--borderRadius) 0 0 var(--borderRadius);
}

/* rounded top left */
.rounded-top-left{
	-webkit-border-radius: var(--borderRadius) 0 0 0;
	-moz-border-radius: var(--borderRadius) 0 0 0;
	-m-border-radius: var(--borderRadius) 0 0 0;
	-o-border-radius: var(--borderRadius) 0 0 0;
	border-radius: var(--borderRadius) 0 0 0;
}

/* rounded bottom left */
.rounded-bottom-left{
	-webkit-border-radius: 0 0 0 var(--borderRadius);
	-moz-border-radius: 0 0 0 var(--borderRadius);
	-m-border-radius: 0 0 0 var(--borderRadius);
	-o-border-radius: 0 0 0 var(--borderRadius);
	border-radius: 0 0 0 var(--borderRadius);
}

/* rounded right */
.rounded-right{
	-webkit-border-radius: 0 var(--borderRadius) var(--borderRadius) 0;
	-moz-border-radius: 0 var(--borderRadius) var(--borderRadius) 0;
	-m-border-radius: 0 var(--borderRadius) var(--borderRadius) 0;
	-o-border-radius: 0 var(--borderRadius) var(--borderRadius) 0;
	border-radius: 0 var(--borderRadius) var(--borderRadius) 0;
}

/* rounded top right */
.rounded-top-right{
	-webkit-border-radius: 0 var(--borderRadius) 0 0;
	-moz-border-radius: 0 var(--borderRadius) 0 0;
	-m-border-radius: 0 var(--borderRadius) 0 0;
	-o-border-radius: 0 var(--borderRadius) 0 0;
	border-radius: 0 var(--borderRadius) 0 0;
}

/* rounded bottom right */
.rounded-bottom-right{
	-webkit-border-radius: 0 0 var(--borderRadius) 0;
	-moz-border-radius: 0 0 var(--borderRadius) 0;
	-m-border-radius: 0 0 var(--borderRadius) 0;
	-o-border-radius: 0 0 var(--borderRadius) 0;
	border-radius: 0 0 var(--borderRadius) 0;
}

/* circle */
.circle{
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	-ms-border-radius: 50%;
	-o-border-radius: 50%;
	border-radius: 50%;
}

/* line */
.line{
	height: 0px;
	position: absolute;
	border-style: solid;
	border-width: 20px 0px 0px 0px;
	border-color: var(--bgColor);
}

	.line:hover{
		border-color: var(--bgColor2);
	}

/* calculate num chars in span */	
.cal-char{
    width: 100%;
    text-align: right;
	color: var(--softColor);
	font-size: var(--fontSize90);
}

/* wrap text */
.wrap-text{
	word-wrap: break-word;
	word-break: break-word;
}

/* no wrap text */
.no-wrap-text{
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

/* buttons */
.btn{
	border: none;
	cursor: pointer;
	padding: 10px 15px;
	display: inline-block;
	font-size: var(--fontSize100);
	background: var(--btnBgColor);
	color: var(--btnColor) !important;
}

	.btn:hover{
		background: var(--btnBgHoverColor);
		color: var(--btnHoverColor) !important;
	}
	
/* bounce button */
.btn.bounce{
	position: relative;
	vertical-align: middle;
	
	transition-duration: 0.5s;
	transition-property: color;
	-webkit-transition-duration: 0.5s;
	-webkit-transition-property: color;
	
	-webkit-transform: perspective(1px) translateZ(0);
	transform: perspective(1px) translateZ(0);
}

	.btn.bounce:before{
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		color: #000;
		content: "";
		z-index: -1;
		position: absolute;
		background: var(--btnBgHoverColor);
		
		transition-duration: 0.5s;
		transition-timing-function: ease-out;
		-webkit-transition-duration: 0.5s;
		-webkit-transition-timing-function: ease-out;
		
		-webkit-transform: scaleX(0);
		-webkit-transform-origin: 100% 50%;
		-webkit-transition-property: transform;
		
		transform: scaleX(0);
		transform-origin: 100% 50%;
		transition-property: transform;
	}

	.btn.bounce:hover:before, 
	.btn.bounce:focus:before, 
	.btn.bounce:active:before{
		transform: scaleX(1);
		transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
		
		-webkit-transform: scaleX(1);
		-webkit-transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
	}
	
/* radius button */	
.btn.radius{
	border-radius: 10px;
	-m-border-radius: 10px;
	-o-border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	
    transition: background 0.5s, border-radius 0.5s;
	-o-transition: background 0.5s, border-radius 0.5s;
	-moz-transition: background 0.5s, border-radius 0.5s;
	-webkit-transition: background 0.5s, border-radius 0.5s;
}

	.btn.radius:hover, 
	.btn.radius:focus, 
	.btn.radius:active{
		border-radius: 25px;
		-m-border-radius: 25px;
		-o-border-radius: 25px;
		-ms-border-radius: 25px;
		-moz-border-radius: 25px;
		-webkit-border-radius: 25px;
	}

/* fill button */
.btn.fill{
	transition: background-color 300ms ease-in-out;
}

	.btn.fill:hover{
		background-color: var(--btnBgHoverColor);
	}
	
/* zoom button */
.btn.zoom{
	vertical-align: middle;
	
	border-radius: 10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	-m-border-radius: 10px;
	-o-border-radius: 10px;

	-webkit-transform: perspective(1px) translateZ(0);
	transform: perspective(1px) translateZ(0);

	box-shadow: 0 0 1px transparent;
	-webkit-transition-duration: 0.3s;
	transition-duration: 0.3s;

	-webkit-transition-property: box-shadow, transform;
	transition-property: box-shadow, transform;
}

	.btn.zoom:hover, 
	.btn.zoom:focus, 
	.btn.zoom:active{
		box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.9);
		
		-webkit-transform: scale(1.02);
		transform: scale(1.02);
	}
	
/* blip button */
.btn.blip{
	position: relative;
	vertical-align: middle;
	
	-webkit-transition-property: color;
	transition-property: color;
	
	-webkit-transition-duration: 0.3s;
	transition-duration: 0.3s;
	
	-webkit-transform: perspective(1px) translateZ(0);
	transform: perspective(1px) translateZ(0);
}

	.btn.blip:before{
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		content: "";
		z-index: -1;
		position: absolute;
		background: var(--btnBgHoverColor);
		
		-webkit-transform: scaleY(0);
		transform: scaleY(0);
		
		-webkit-transform-origin: 50%;
		transform-origin: 50%;
		
		-webkit-transition-property: transform;
		transition-property: transform;
		
		-webkit-transition-duration: 0.3s;
		transition-duration: 0.3s;
		
		-webkit-transition-timing-function: ease-out;
		transition-timing-function: ease-out;
	}

	.btn.blip:hover:before, 
	.btn.blip:focus:before, 
	.btn.blip:active:before{
		-webkit-transform: scaleY(1);
		transform: scaleY(1);
	}

/* pinch button */
.btn.pinch{
	position: relative;
	transition: all 0.3s;
}
	
	.btn.pinch::before{
	  left: 0;
	  bottom: 0;
	  z-index: 1;
	  opacity: 0;
	  content: '';
	  width: 100%;
	  height: 100%;
	  position: absolute;
	  transition: all 0.3s;
	  transform: scale(0.1, 1);
	  
	  border-top-width: 1px;
	  border-bottom-width: 1px;
	  border-top-style: solid;
	  border-bottom-style: solid;
	  border-top-color: rgba(255,255,255,0.5);
	  border-bottom-color: rgba(255,255,255,0.5);
	}
	
	.btn.pinch::after{
	  left: 0;
	  bottom: 0;
	  z-index: 1;
	  content: '';
	  width: 100%;
	  height: 100%;
	  position: absolute;
	  transition: all 0.3s;
	  background-color: rgba(255,255,255,0.1);
	}
	
	.btn.pinch:hover::before{
	  opacity: 1; 
	  transform: scale(1, 1); 
	}
	
	.btn.pinch:hover::after{
	  opacity: 0; 
	  transform: scale(0.1, 1);
	}

/* glow button */
.btn.glow{
    z-index: 0;
    color: #fff;
    cursor: pointer;
    position: relative;
	
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	-m-border-radius: 10px;
	-o-border-radius: 10px;
	border-radius: 10px;
}

	.btn.glow:before{
		content: '';
		top: -2px;
		left:-2px;
		opacity: 0;
		z-index: -1;
		filter: blur(5px);
		position: absolute;
		width: calc(100% + 4px);
		height: calc(100% + 4px);
		transition: opacity .3s ease-in-out;
		animation: glow-btn 20s linear infinite;
		
		background: linear-gradient(45deg, var(--btnBgColor), var(--btnBgColor2), var(--btnBgColor3), var(--btnBgColor2), var(--btnBgColor));
		background-size: 400%;
		
		-webkit-border-radius: 10px;
		-moz-border-radius: 10px;
		-m-border-radius: 10px;
		-o-border-radius: 10px;
		border-radius: 10px;
	}

	.btn.glow:after{
		top: 0;
		left: 0;
		z-index: -1;
		content: '';
		width: 100%;
		height: 100%;
		position: absolute;
	
		-webkit-border-radius: 10px;
		-moz-border-radius: 10px;
		-m-border-radius: 10px;
		-o-border-radius: 10px;
		border-radius: 10px;
	}

	.btn.glow:hover:before{
		opacity: 1;
	}

@keyframes glow-btn{
    0% { background-position: 0 0;}
    50% { background-position: 400% 0;}
    100% { background-position: 0 0;}
}

/* cover */
.cover{
	background-position: center !important;
	background-repeat: no-repeat !important;

	-webkit-background-size: cover !important;
	-moz-background-size: cover !important;
	-ms-background-size: cover !important;
	-o-background-size: cover !important;
	background-size: cover !important;
}

/* parallax */
.parallax{
	background-attachment: fixed !important;
	background-position: center !important;
	background-repeat: no-repeat !important;

	-webkit-background-size: cover !important;
	-moz-background-size: cover !important;
	-ms-background-size: cover !important;
	-o-background-size: cover !important;
	background-size: cover !important;
}

@media screen and (max-width: 600px){.parallax{background-attachment: scroll !important;}}

/* Table Collapse */
@media screen and (max-width: 600px){
	table.collapse{
		width: 100%;
		margin: 0 !important;
		border-spacing: 0 !important;
	}
	
		table.collapse thead{
			display: none;
		}
		
			table.collapse tbody tr{
				width: 100%;
				display: block;
				margin-bottom: 20px;
			}
		
			table.collapse tbody tr:last-child{
				margin-bottom: 0;
			}
		
				table.collapse tbody tr td{
					width: 100%;
					display: block;
				
					-webkit-box-sizing: border-box;
					-moz-box-sizing: border-box;
					box-sizing: border-box;
				}
}
	
/*------------- Columns -------------*/

.col-1{width: 100%;}
.col-2{width: 50%;}
.col-3{width: 33.3333333333%;}
.col-4{width: 25%;}
.col-5{width: 20%;}
.col-6{width: 16.6666666666%;}
.col-7{width: 14.2857142857%;}
.col-8{width: 12.5%;}
.col-9{width: 11.1111111111%;}
.col-10{width: 10%;}
.col-11{width: 9.09090909090%;}
.col-12{width: 8.33333333333%;}
.col-13{width: 7.69230769230%;}
.col-14{width: 7.14285714285%;}
.col-15{width: 6.66666666666%;}
.col-16{width: 6.25%;}
.col-17{width: 5.88235294117%;}
.col-18{width: 5.55555555555%;}
.col-19{width: 5.26315789473%;}
.col-20{width: 5%;}
.col-21{width: 4.76190476190%;}
.col-22{width: 4.54545454545%;}
.col-23{width: 4.34782608695%;}
.col-24{width: 4.16666666666%;}
.col-25{width: 4%;}

/*------------- Widths -------------*/

.width-1{width: 1%;}
.width-2{width: 2%;}
.width-3{width: 3%;}
.width-4{width: 4%;}
.width-5{width: 5%;}
.width-6{width: 6%;}
.width-7{width: 7%;}
.width-8{width: 8%;}
.width-9{width: 9%;}
.width-10{width: 10%;}
.width-11{width: 11%;}
.width-12{width: 12%;}
.width-13{width: 13%;}
.width-14{width: 14%;}
.width-15{width: 15%;}
.width-16{width: 16%;}
.width-17{width: 17%;}
.width-18{width: 18%;}
.width-19{width: 19%;}
.width-20{width: 20%;}
.width-21{width: 21%;}
.width-22{width: 22%;}
.width-23{width: 23%;}
.width-24{width: 24%;}
.width-25{width: 25%;}
.width-26{width: 26%;}
.width-27{width: 27%;}
.width-28{width: 28%;}
.width-29{width: 29%;}
.width-30{width: 30%;}
.width-31{width: 31%;}
.width-32{width: 32%;}
.width-33{width: 33%;}
.width-34{width: 34%;}
.width-35{width: 35%;}
.width-36{width: 36%;}
.width-37{width: 37%;}
.width-38{width: 38%;}
.width-39{width: 39%;}
.width-40{width: 40%;}
.width-41{width: 41%;}
.width-42{width: 42%;}
.width-43{width: 43%;}
.width-44{width: 44%;}
.width-45{width: 45%;}
.width-46{width: 46%;}
.width-47{width: 47%;}
.width-48{width: 48%;}
.width-49{width: 49%;}
.width-50{width: 50%;}
.width-51{width: 51%;}
.width-52{width: 52%;}
.width-53{width: 53%;}
.width-54{width: 54%;}
.width-55{width: 55%;}
.width-56{width: 56%;}
.width-57{width: 57%;}
.width-58{width: 58%;}
.width-59{width: 59%;}
.width-60{width: 60%;}
.width-61{width: 61%;}
.width-62{width: 62%;}
.width-63{width: 63%;}
.width-64{width: 64%;}
.width-65{width: 65%;}
.width-66{width: 66%;}
.width-67{width: 67%;}
.width-68{width: 68%;}
.width-69{width: 69%;}
.width-70{width: 70%;}
.width-71{width: 71%;}
.width-72{width: 72%;}
.width-73{width: 73%;}
.width-74{width: 74%;}
.width-75{width: 75%;}
.width-76{width: 76%;}
.width-77{width: 77%;}
.width-78{width: 78%;}
.width-79{width: 79%;}
.width-80{width: 80%;}
.width-81{width: 81%;}
.width-82{width: 82%;}
.width-83{width: 83%;}
.width-84{width: 84%;}
.width-85{width: 85%;}
.width-86{width: 86%;}
.width-87{width: 87%;}
.width-88{width: 88%;}
.width-89{width: 89%;}
.width-90{width: 90%;}
.width-91{width: 91%;}
.width-92{width: 92%;}
.width-93{width: 93%;}
.width-94{width: 94%;}
.width-95{width: 95%;}
.width-96{width: 96%;}
.width-97{width: 97%;}
.width-98{width: 98%;}
.width-99{width: 99%;}
.width-100{width: 100%;}

/*------------- Clear Div -------------*/

.cf:before,
.cf:after{
	content: ''; /* 1 */
	display: table; /* 2 */
}

.cf:after{
	clear: both;
}