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

/*------------- Root -------------*/

:root{
	--bg: #fff;
	--bg2: #000;
	
	--color: #000;
	--color2: #fff;
	
	--fontSize80: 80%;
	--fontSize90: 90%;
	--fontSize100: 100%;
	--fontSize110: 110%;
	--fontSize120: 120%;
	--fontSize130: 130%;
	--fontSize140: 140%;
	--fontSize150: 150%;
	--fontSize160: 160%;
	--fontSize170: 170%;
	--fontSize180: 180%;
	--fontSize190: 190%;
	--fontSize200: 200%;
	--fontSize210: 210%;
	--fontSize220: 220%;
	--fontSize230: 230%;
	--fontSize240: 240%;
	--fontSize250: 250%;
	--fontSize260: 260%;
	--fontSize270: 270%;
	--fontSize280: 280%;
	--fontSize290: 290%;
	--fontSize300: 300%;
	--fontSize400: 400%;
	--fontSize500: 500%;
	--fontSize600: 600%;
	--fontSize700: 700%;
	--fontSize800: 800%;
	
	--borderRadius: 5px;
	--borderRadiusScrollBar: 10px;
	
	--bgColor: #444;
	--bgColor2: #222;
	
	--softColor: #888;
	--softBgColor: #f4f4f4;
	--softBorderColor: #e8e8e8;
	--softHoverBgColor: #b3b3b3;	
	
	--darkModeColor: #fff;
	--darkModeBgColor: #333;
	--darkModeHoverBgColor: #222;
	--darkModeBorderColor: #222;
	--darkModeContainerBgColor: #111;
	
	--whiteColor: #fff;
	--mediColor: #444;
	--blackColor: #000;
	
	--linkColor: #222;
	--linkHoverColor: #008ce5;
	
	--redColor: #d91d1d;
	--redBgColor: #fecdc0;
	--redBorderColor: #d91d1d;
	
	--greenColor: #6ab950;
	--greenBgColor: #e9f8e4;
	--greenBorderColor: #6ab950;
	
	--blueColor: #008ce5;
	--blueBgColor: #8fbfdd;
	--blueBorderColor: #008ce5;
	
	--yellowColor: #ffc000;
	--yellowBgColor: #fff3cd;
	--yellowBorderColor: #ffc000;
	
	--orangeColor: #f76300;
	--orangeBgColor: #e0a985;
	--orangeBorderColor: #f76300;
	
	--mobileMenuColor: #fff;
	--mobileMenuBtnColor: #fff;
	--mobileMenuSelectedColor: #fff;
	--mobileMenuSelectedBgColor: #444;
	--mobileMenuContentBgColor: #222;
	
	--btnColor: #fff;
	--btnBgColor: #008ce5;
	--btnHoverColor: #fff;
	--btnBgHoverColor: #008ce5;
	
	--optionsBgColor: #fff;
	--optionsHoverBgColor: #eee;
	
	--imageSliderBgColor: #000;
	
	--widgetColor: #fff;
	
	--dialogBgColor: #222;
	--dialogBgColor2: #111;
	--dialogHeadingColor: #fff;
	--dialogShadowColor: rgba(0, 0, 0, 0.7);
}

@media screen and (max-width: 1550px){
	:root{
		--fontSize110: 100%;
		--fontSize120: 110%;
		--fontSize130: 120%;
		--fontSize140: 130%;
		--fontSize150: 140%;
		--fontSize160: 150%;
		--fontSize170: 160%;
		--fontSize180: 170%;
		--fontSize190: 180%;
		--fontSize200: 190%;
		--fontSize210: 200%;
		--fontSize220: 210%;
		--fontSize230: 220%;
		--fontSize240: 230%;
		--fontSize250: 240%;
		--fontSize260: 250%;
		--fontSize270: 260%;
		--fontSize280: 270%;
		--fontSize290: 280%;
		--fontSize300: 290%;
		--fontSize400: 350%;
		--fontSize500: 450%;
		--fontSize600: 550%;
		--fontSize700: 650%;
		--fontSize800: 750%;
	}
}

@media screen and (max-width: 1380px){
	:root{
		--fontSize140: 120%;
		--fontSize150: 130%;
		--fontSize160: 140%;
		--fontSize170: 150%;
		--fontSize180: 160%;
		--fontSize190: 170%;
		--fontSize200: 180%;
		--fontSize210: 190%;
		--fontSize220: 200%;
		--fontSize230: 210%;
		--fontSize240: 220%;
		--fontSize250: 230%;
		--fontSize260: 240%;
		--fontSize270: 250%;
		--fontSize280: 260%;
		--fontSize290: 270%;
		--fontSize300: 280%;
		--fontSize400: 300%;
		--fontSize500: 400%;
		--fontSize600: 500%;
		--fontSize700: 600%;
		--fontSize800: 700%;
	}
}

@media screen and (max-width: 1250px){
	:root{
		--fontSize170: 140%;
		--fontSize180: 150%;
		--fontSize190: 160%;
		--fontSize200: 170%;
		--fontSize210: 180%;
		--fontSize220: 190%;
		--fontSize230: 200%;
		--fontSize240: 210%;
		--fontSize250: 220%;
		--fontSize260: 230%;
		--fontSize270: 240%;
		--fontSize280: 250%;
		--fontSize290: 260%;
		--fontSize300: 270%;
	}
}

@media screen and (max-width: 1100px){
	:root{
		--fontSize180: 140%;
		--fontSize190: 150%;
		--fontSize200: 160%;
		--fontSize210: 170%;
		--fontSize220: 180%;
		--fontSize230: 190%;
		--fontSize240: 200%;
		--fontSize250: 210%;
		--fontSize260: 220%;
		--fontSize270: 230%;
		--fontSize280: 240%;
		--fontSize290: 250%;
		--fontSize300: 260%;
	}
}

@media screen and (max-width: 600px){
	:root{
		--fontSize200: 150%;
		--fontSize210: 160%;
		--fontSize220: 160%;
		--fontSize230: 180%;
		--fontSize240: 180%;
		--fontSize250: 200%;
		--fontSize260: 200%;
		--fontSize270: 220%;
		--fontSize280: 220%;
		--fontSize290: 240%;
		--fontSize300: 240%;
	}
}