:root {

	/**
	* Colors 
	* Primary Color
	* Fonts	
	* Links
	* Headings
	* Forms
	*
	*
	*/



	/*colors*/
	--trans: 					transparent;
	--white: 					#fff;

	/*gray*/
	--gray: 					#e9ecef;
	--gray-light: 				#e9ecef;
	--gray-dark: 				#B0B2B3;

	/*blue*/
	--blue: 					#0865ab;
	--blue-light: 				#1d4f43;
	--blue-dark: 				#1d4f43;

	/*red*/
	--red: 						#f5c6cb;
	--red-light: 				#f8d7da;
	--red-dark: 				#721c24;

	/*orange*/
	--orange: 					#fd7e14;
	--orange-light: 			#1d4f43;
	--orange-dark: 				#1d4f43;


/*color: #856404;
    background-color: #fff3cd;
    border-color: #ffeeba;

}*/

	/*yellow*/
	--yellow: 					#ffeeba; /* border-color: #ffeeba */
	--yellow-dark: 				#856404; /* text */
	--yellow-light: 			#fff3cd; /* background-color */




	/*green*/
	--green: 					#1d4f43;
	--green-light: 				#1d4f43;
	--green-dark: 				#28715f;

	--green-hover: 				var( --green-dark ); /*depracted*/
	
	/*purple*/
	--purple: 					#6f42c1;
	--purple-light: 			#1d4f43;
	--purple-dark: 				#28715f;
	
	/*other*/
	--indigo:					#6610f2;
	--pink: 					#e83e8c;
	--teal: 					#20c997;
	--cyan: 					#17a2b8;



	/******** COLOR PALETHE ****************/



	/* primary */
	--primary: 					var( --blue );
	--primary-text: 			var( --white );
	--primary-border: 			var( --blue );

	/* primary - hover */
	--primary-hover: 			var( --white );
	--primary-text-hover: 		var( --blue );
	--primary-border: 			var( --blue );

	/* secondary - gray*/
	--secondary: 				var( --gray-light );
	--secondary-text: 			var( --primary );
	--secondary-border: 		var( --gray-light );





	/* success - green */
	--success: 					#28a745; 	/*green*/
	--success-text: 			#28a745; 	/*green*/
	--success-border: 			var( --blue );

	/* info -  blue */
	--info: 					#d1ecf1 ; 	/*bg light blue*/
	--info-text: 				#0c5460;
	--info-border: 				#bee5eb;

	/* warning - yellow */
	--warning: 					var( --yellow-light );	/*orange*/
	--warning-text: 			var( --yellow-dark );
	--warning-border: 			var( --yellow );

	/* danger - red */
	--danger: 					var( --red-light );	/*erorr - red*/ 
	--danger-text: 				var( --red-dark );
	--danger-border: 			var( --red );

	/* light */
	--light: 					#28a745; 	/*green*/
	--light-text: 				#721c24;
	--light-border: 			var( --blue );

	/* dark */
	--dark: 					#721c24;
	--dark-text: 				#721c24;
	--dark-border: 				var( --blue );


	/***** BORDERS *****/
	--border-size:				1px;
	--border-style:				'solid';

	--border-radius: 			10px;

	--border-color: 			var( --gray );
	--border-color-light: 		var( --gray-light );
	--border-color-dark: 		var( --gray-dark );


	/* FONTS */
	--font-family-sans-serif:   -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
	--font-family-monospace: 	"SFMono-Regular", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
	--font-famliy-heading: 		var(--font-family-sans-serif);

	/*TEXT*/
	--font-family: 				var( --font-family-sans-serif );
	--font-size:				14px;
	--line-height:				100%;
	--color: 					#333;

	--color-light: 				#333;
	--color-dark: 				#333;

	--font-size-xs: 			12px; /* null */
	--font-size-sm: 			16px; /* Mobile*/
	--font-size-md: 			16px; /* Tablet*/
	--font-size-lg: 			18px; /* Destop*/		
	--font-size-xl: 			24px; /* TV */


	/***** LINK *****/
	--link-color : 				var( --primary );
	--link-hover : 				#333;
	--link-active : 			#333;
	--link-visited : 			#333;


	/*--link-color-light :		#333;
	--link-color-dark : 		#333;*/

	/***** HEADINGS *****/
	--heading-font-family:		var( --font-famliy-heading );

	--heading-font-size-h1: 	12px; /* null */
	--heading-font-size-h2: 	12px; /* null */
	--heading-font-size-h3: 	16px; /* Mobile*/
	--heading-font-size-h4: 	16px; /* Tablet*/
	--heading-font-size-h5: 	18px; /* Destop*/		
	--heading-font-size-h6: 	24px; /* TV */

	--heading-color : 			var( --color );
	--heading-color-light :	 	var( --color-light );
	--heading-color-dark : 		var( --color-dark );

	--heading-link-color : 		var( --link-color );
	--heading-link-color-light: var( --link-color-light );
	--heading-link-color-dark : var( --link-color-light );

	/**** MEDIA ****/
	--img: 						var(--blue);
	--img-background-color:		var( --trans );
	--img-border-color:			var( --trans );
	--img-border-size:			0px;



	/**** FORMS ****/
	--input-font-family:		'Tahoma';
	--input-font-size:			16px;
	--input-font-height:		100%;
	--input-height:				18px;

	--input-color:				#333;
	--input-bg:					#333;
	--input-border-color:		var(--gray);

	/*hover*/
	--input-color-hover:		#333;
	--input-bg-hover:			#333;
	--input-border-color-hover: var(--gray);

	/*active*/
	--input-color-active:		#333;
	--input-bg-active:			#333;
	--input-border-color-active: var(--gray);

	/*error*/
	--input-color-error:		#333;
	--input-bg-error:			#333;
	--input-border-color-error: var(--gray);

	/*success*/
	--input-color-error:		#333;
	--input-bg-error:			#333;
	--input-border-color-error: var(--gray);


	/*borders*/
	--input-border-size: 		1px;
	--input-border-style: 		'solid';
	--input-border-radius: 		10px;

	/*size*/
	--input-padding:			10px;
	--input-border-radius:		5px;
	

	/***** BUTTONS *****/
	--button-font-family:			'Tahoma';
	--button-font-size:				14px;
	--button-line-height:			100%;

	--button-color:					var(--primary-text);
	--button-bg-color: 				var(--primary);
	--button-border-color: 			var(--primary);

	--button-border-radius: 		var(--border-radius);

	/*hover*/
	--button-color-hover: 			var(--primary-text-hover);
	--button-bg-color-hover: 		var(--primary-hover);
	--button-border-color-hover: 	var(--primary);



	/*Secudary*/
	--button-success-color-active: 			var(--blue);
	--button-success-bg-color-active: 		var(--green-hover);
	--button-success-border-color-active: 	var(--green);


	/*ALERTS*/
	--alert-success-background-color: 		var(--blue);


	/*TABLE*/
	--table-border-color: 					var(--blue);

	/*AVATAR*/
	--avatar-border-color:;

	/*THEME*/
	--header-background-color: 				var(--blue);
	--header-link-color: 					var(--blue);
	--header-link-hover-color: 				var(--blue);


	/*MENU PRIMARY*/
	--menu-background-color:				var(--blue);
	--menu-link-color:						var(--blue);
	--menu-link-hover-color:				var(--blue);

	--submenu-background-color:				var(--blue);
	--submenu-link-color:					var(--blue);
	--submenu-link-hover-color:				var(--blue);


	/* MENU Secundary*/


	/*loop*/
	--loop-background-color: 				var(--blue);
	--loop-card-title-background-color: 	var(--blue);
	--loop-card-title-font-family: 			var(--blue);
	--loop-card-title-font-size:			var(--blue);

	/*sidebars*/
	--sidebar-widget-title-font-size:		var(--blue);
	--sidebar-widget-border-color:			var(--blue);

	/*single*/
	--post-title-font-size:					var( --font-size );
	--post-title-background-color:			var( --blue );
	--post-paragraph-font-size:				var( --blue );

	/*commnets*/
	--comment-comment-size:					var(--blue);

	/*footer*/
	--footer-background-color:				var(--blue);
	--footer--font-size:					var(--blue);


	/*WooCommerce*/
	--loop-products-title-color:			var(--blue);




	/***** RESPONSIVE *****/
	--breakpoint-xs: 0;
	--breakpoint-sm: 576px;
	--breakpoint-md: 768px;
	--breakpoint-lg: 992px;
	--breakpoint-xl: 1200px;

	/***** GRID *****/
	--grid-xs:					1px;
	--grid-sm:					5px;
	--grid-md:					10px;
	--grid:						20px; 	/*depracted*/
	--grid-lg:					20px;  /* deljivo sa 4*/
	--grid-xl: 					40px;


	/*padding*/
	--padding-xs:				var( --grid-xs );
	--padding-sm:				var( --grid-sm );
	--padding-md:				var( --grid-md );
	--padding:					var( --grid ); 	/*depracted*/
	--padding-lg:				var( --grid-lg );  /* deljivo sa 4*/
	--padding-xl: 				var( --grid-xl );

	/*margin*/
	--margin-xs:				var( --grid-xs );
	--margin-sm:				var( --grid-sm );
	--margin-md:				var( --grid-md );
	--margin:					var( --grid ); /*depracted*/
	--margin-lg: 				var( --grid-lg );
	--margin-xl: 				var( --grid-xl );

}