:root{
	/* # COLORS */
    /* ## Based in ionic variables */
	--main-color: #0e0e0e;
	--main-color-rgb: 95,95,95;
	--main-color-contrast: #ffffff;
	--main-color-contrast-rgb: 255,255,255;
	--main-color-darker:#262626;
	--main-color-shade:#292929;
	--main-color-tint:#444444;
	--main-color-lighter:#595959;

	--secondary-color: #f1cb3f;
	--secondary-color-rgb: 116,101,236;
	--secondary-color-contrast: #161616;
	--secondary-color-contrast-rgb: 0,0,0;
	--secondary-color-darker: #b7910b;
	--secondary-color-shade: #a78b28;
	--secondary-color-tint: #fbde73;
	--secondary-color-lighter: #ffe68c;

	--accent-color: #ef4838;
	--accent-color-rgb: 239, 72, 56;
	--accent-color-contrast: #ffffff;
	--accent-color-contrast-rgb: 255,255,255;
	--accent-color-darker: #9e3026;
	--accent-color-shade: #d33d30;
	--accent-color-tint: #f85647;
	--accent-color-lighter: #fc7d72;

	--success-color: #2dd55b;
	--success-color-rgb: 45,213,91;
	--success-color-contrast: #161616;
	--success-color-contrast-rgb: 0,0,0;
	--success-color-darker: #24aa49;
	--success-color-shade: #28bb50;
	--success-color-tint: #42d96b;
	--success-color-lighter: #5de38a;

	--warning-color: #ffc409;
	--warning-color-rgb: 255,196,9;
	--warning-color-contrast: #000000;
	--warning-color-contrast-rgb: 0,0,0;
	--warning-color-darker: #cc9d07;
	--warning-color-shade: #e0ac08;
	--warning-color-tint: #ffca22;
	--warning-color-lighter: #ffd144;

	--danger-color: #c5000f;
	--danger-color-rgb: 197,0,15;
	--danger-color-contrast: #ffffff;
	--danger-color-contrast-rgb: 255,255,255;
	--danger-color-darker: #9f000c;
	--danger-color-shade: #ad000d;
	--danger-color-tint: #cb1a27;
	--danger-color-lighter: #d54453;

	--light-color: #f8f8f8;
	--light-color-rgb: 246,248,252;
	--light-color-contrast: #161616;
	--light-color-contrast-rgb: 0,0,0;
	--light-color-darker: rgb(170, 170, 170);
	--light-color-shade: #dddada;
	--light-color-tint: #f5f5f5;
	--light-color-lighter: #ffffff;

	--medium-color: #5f5f5f;
	--medium-color-rgb: 95,95,95;
	--medium-color-contrast: #ffffff;
	--medium-color-contrast-rgb: 255,255,255;
	--medium-color-darker: #4b4b4b;
	--medium-color-shade: #545454;
	--medium-color-tint: #6f6f6f;
	--medium-color-lighter: #7d7d7d;

	--dark-color: #161616;
	--dark-color-rgb: 47,47,47;
	--dark-color-contrast: #f6f8fc;
	--dark-color-contrast-rgb: 246, 248, 252;
	--dark-color-darker: #262626;
	--dark-color-shade: #292929;
	--dark-color-tint: #444444;
	--dark-color-lighter: #595959;
    /* # END COLORS */    	

	/* Gradient data */
	--main-gradient:120deg,var(--main-color) -1%, var(--lighted-main-color) 20%, var(--dark-main-color) 89%;


	/* FONT SIZES */
	--text-xxl:2.4rem;
	--text-xl:1.85rem;
	--text-lg:1.5rem;
	--text-md:1.25rem;
	--text-base-important:1.1rem;
	--text-base:1rem;
	--text-xs:.75rem;

	/* Layout CONFIGS */
		/* ## slider Bullets */
		--bullet-width:10px;
		--marginBetweenSections:4rem;

		/* ## Header */
		/* ## Header WRAP */
		--header-display:fixed;   
		--header-total-height:calc(var(--header-main-content-height) + var(--header-top-line-height) + var(--header-bot-line-height) ) ;/* calculo total del hegith del header */
		--header-responsive-height:calc(var(--header-main-content-height) ) ;/* calculo total del hegith del header responsive*/
		/* ## Header main content */
		--header-main-content-display:block;    
		--header-main-content-height:85px;   
		--header-main-content-base-color:var(--light-color);
		--header-main-content-text-color:var(--main-color-contrast);
		/* ## Header top line */
		--header-top-display:none;    
		--header-top-line-height:30px;   
		--header-top-base-color:var(--accent-color);
		--header-top-text-color:var(--accent-color-contrast);
		/* ## Header bot menu */
		--header-bot-display:none;    
		--header-bot-line-height:35px;   
		--header-bot-base-color:var(--accent-color);
		--header-bot-text-color:var(--accent-color-contrast);
		/* # Carro lateral */
		--cart-width:400px;
		--cart-base-color:var(--light-color);
		--cart-text-color:var(--light-color-contrast);

		/* ## Footer */
		--footer-height: 60px;
		--footer-color-base:var(--main-color);
		--footer-color-content-container:var(--main-color);
		--footer-color-menu-title:var(--light-color);
		--footer-color-menu-item:var(--light-color);
		--footer-color-text:var(--light-color);
		--footer-color-icons:var(--lighted-main-color);
		--footer-size-icons:1.5rem;

		/* ## Footer BOTTOM - copyright  & fullglass icons  */
		--footer-bottom-height:60px;
		--footer-bottom-color-base:var(--lighted-main-color);


	/* ## Radius */
	--radius-xl:1rem;
    --radius-l:.75rem;
	--radius-base:.5rem;
	--radius-s:.25rem;
	--radius-xs:.12rem;
	--radius-full:99999999px;

	/* space */
	--space-base:1rem;
	--space-1:calc(var(--space-base) * calc(1 / 2));
	--space-2:calc(var(--space-base) * calc(2 / 2));
	--space-3:calc(var(--space-base) * calc(3 / 2));
	--space-4:calc(var(--space-base) * calc(4 / 2));
	--space-5:calc(var(--space-base) * calc(5 / 2));
	--space-6:calc(var(--space-base) * calc(6 / 2));
	--space-7:calc(var(--space-base) * calc(7 / 2));
	--space-8:calc(var(--space-base) * calc(8 / 2));
	--space-9:calc(var(--space-base) * calc(9 / 2));
	--space-10:calc(var(--space-base) * calc(10 / 2));
	--space-11:calc(var(--space-base) * calc(11 / 2));
	--space-12:calc(var(--space-base) * calc(12 / 2));

	/* Shadows - is on variable for use onconfigs or some */
	--shadow-sm:0 1px 2px 0 rgb(0 0 0 / 0.05);
	--shadow:0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
	--shadow-md:0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
	--shadow-lg:0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
	--shadow-xl:0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
	--shadow-2xl:0 25px 50px -12px rgb(0 0 0 / 0.25);
	--shadow-inner:inset 0 2px 4px 0 rgb(0 0 0 / 0.05);

    /* NORMALIZATION */
    /* Esto pisa las varaibles que se usan en la mayoria de los proyectos */
	--color-company: var(--main-color);
	--color-company2:var(--secondary-color);
	--color-shadow:rgb(0,0,0,0.2);

	--line-height-block:3rem;


		/* Base button configuration */
		--def-button-fill: var(--main-color);
		--def-button-rounded: var(--radius-full);
		--def-button-scheme: var(--main-color-contrast);
		--def-button-text: var(--main-color-contrast);
		--def-button-size: min-content;
		--def-button-block: max-content;
		--def-button-height: var(--line-height-block); 
		--def-button-shadow: var(--shadow-md); 

		/* HOVER */
		--def-button-hover-fill: var(--main-color-tint);
		--def-button-hover-text: var(--main-color-contrast);
		/* ACTIVE */
		--def-button-active-fill: var(--main-color);
		--def-button-active-text: var(--main-color-contrast);
	
			/* ## MAIN */
		--main-color:#3d569d;
		--dark-main-color:#18337f;
		--darker-main-color: #031a57;
		--lighted-main-color:#eaefff;
}

        /* LEGACY */
/* 	--color-dark-grey: #58585a;
	--color-grey: #7c7c80;  medium 
	--color-lighted-grey: rgb(167, 167, 169);
	--color-light-grey: #e5e5e5;
	--smooth-black:#3b3b3b; */


	/* ## SECONDARY */
/* 	--secondary-color:#4a00f6;
	--dark-secondary-color:#3001a0		;
 */
	/* ## ACCENT */
/* 	--accent-color:#4a00f6;
	--dark-accent-color:#3001a0;
	--darker-accent-color:#1f0066; */

	/* ## GENERIC */
/* 	--error-color:#ED1C24;
	--footer-icons:var(--dark-main-color);
	--color-aqua:rgb(66, 152, 233);
	--success-color:#16d404;
 */