/* Custom Styles Avon */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;300;400;500;700;900&display=swap');

:root {
	--avon-gradient-130deg: 			linear-gradient(130deg, #7F28C4 4.53%, #E2197C 70.61%, #E5231B 102.64%);
	--avon-gradient-90deg: 				linear-gradient(90deg, #7F28C4 0%, #E2197C 50%, #E5231B 100%);
	--avon-color-purple: 				rgba(127, 40, 196, 1);
	--avon-color-dark-grey: 			rgba(41, 49, 50, 1);
	--avon-color-white: 				rgba(255, 255, 255, 1);

	--avon-text-color-reular: 			rgba(24, 24, 24, 1);
	--avon-text-color-reular-2: 		rgba(84, 98, 100, 1);
	--avon-text-color-hover-active: 	rgba(0, 0, 0, 1);
	--avon-text-color-idle-nonactive: 	rgba(162, 172, 174, 1);           
	--avon-text-color-text-links-idle: 	rgba(127, 40, 196, 1) ;
	--avon-text-color-text-link-hover: 	rgba(106, 23, 173, 1); 
	--avon-text-color-urgency: 			rgba(229, 35, 27, 1);
	--avon-text-color-errors: 			rgba(133, 17, 104, 1);
	--avon-text-color-positive-numbers: rgba(26, 130, 130, 1);

	--avon-components-bg-color-footer:	rgba(41, 49, 50, 1);
	--avon-components-bg-color-grey:	rgba(228, 237, 237, 1);
	--avon-components-bg-color-hover-noneditable:	rgba(246, 249, 249, 1);
	--avon-components-bg-color-white:	rgba(255, 255, 255, 1);

	--avon-page-bg-color-dark:			rgba(41, 49, 50, 1);
	--avon-page-bg-color-light:			rgba(246, 249, 249, 1);
	--avon-page-bg-color-white:			rgba(255, 255, 255, 1);

	--avon-notification-bg-color-information:		rgba(255, 255, 255, 1);
	--avon-notification-bg-color-errors-alerts:		rgba(255, 255, 255, 1);
	--avon-notification-bg-color-warning:			rgba(255, 255, 255, 1);
	--avon-notification-bg-color-positive-feedback:	rgba(255, 255, 255, 1);

	--avon-status-notification-backgrounds-submited:			rgba(112, 118, 119, 1);
	--avon-status-notification-backgrounds-idle-nonactive:		rgba(162, 172, 174, 1);
	--avon-status-notification-backgrounds-positive-feedback:	rgba(26, 130, 130, 1);

	--avon-primary-cta-disabled:		rgba(162, 172, 174, 0.3);

	--font-weight-thin:		100;
	--font-weight-light:	300;
	--font-weight-regular:	400;
	--font-weight-medium:	500;
	--font-weight-bold:		700;
	--font-weight-black:	900;

	--font-size-cta:		16px;
}



html {
	background-color: var(--avon-page-bg-color-light);
	font-family: Montserrat, Arial, sans-serif;
	color: var(--avon-text-color-reular);
	padding: 0;
	margin: 0;
}

body {
	font-family: 'Montserrat', Arial, sans-serif;
	font-weight: var(--font-weight-regular);
	color: var(--avon-text-color-reular);
	letter-spacing: -0.02em;
}

h1 {
	font-size: 40px;
	line-height: 52px;
	color: var(--avon-text-color-reular-2);
	font-weight: var(--font-weight-light);
} 

h2 {
	font-size: 28px;
	line-height: 36px;
	color: var(--avon-text-color-reular-2);
	font-weight: var(--font-weight-light);
} 

h3 {
	font-size: 24px;
	line-height: 32px;
	color: var(--avon-text-color-reular);
	font-weight: var(--font-weight-light);
} 

h4 {
	font-size: 22px;
	line-height: 30px;
	color: var(--avon-text-color-reular);
	font-weight: var(--font-weight-medium);
}

.Subtitles {
	font-size: 16px;
	line-height: 24px;
	color: var(--avon-text-color-reular);
	font-weight: var(--font-weight-bold);
}

.body1 {
	font-size: 14px;
	line-height: 20px;
	color: var(--avon-text-color-reular-2);
	font-weight: var(--font-weight-regular);
}

.body2 {
	font-size: 12px;
	line-height: 16px;
	color: var(--avon-text-color-reular-2);
	font-weight: var(--font-weight-regular);
}

a {
	font-size: 14px;
	line-height: 20px;
	color: var(--avon-text-color-text-links-idle);
	font-weight: var(--font-weight-bold);
}

a.secondary {
	font-size: 12px;
	line-height: 16px;
	color: var(--avon-text-color-reular-2);
	font-weight: var(--font-weight-regular);
}

a.image {
	line-height: unset;
}







/* Desktop */

@media only screen and (min-width: 769px) {

	h1 {
		font-size: 60px;
		line-height: 76px;
		color: var(--avon-text-color-reular-2);
		font-weight: var(--font-weight-light);
	} 

	h2 {
		font-size: 42px;
		line-height: 54px;
		color: var(--avon-text-color-reular-2);
		font-weight: var(--font-weight-light);
	} 

	h3 {
		font-size: 32px;
		line-height: 42px;
		color: var(--avon-text-color-reular);
		font-weight: var(--font-weight-light);
	} 

	h4 {
		font-size: 24px;
		line-height: 32px;
		color: var(--avon-text-color-reular);
		font-weight: var(--font-weight-medium);
	}

	.Subtitles {
		font-size: 20px;
		line-height: 28px;
		color: var(--avon-text-color-reular);
		font-weight: var(--font-weight-bold);
	}

	.body1 {
		font-size: 18px;
		line-height: 26px;
		color: var(--avon-text-color-reular-2);
		font-weight: var(--font-weight-regular);
	}

	.body2 {
		font-size: 16px;
		line-height: 24px;
		color: var(--avon-text-color-reular-2);
		font-weight: var(--font-weight-regular);
	}

	a {
		font-size: 16px;
		line-height: 24px;
		color: var(--avon-text-color-text-links-idle);
		font-weight: var(--font-weight-bold);
	}

	a.secondary {
		font-size: 14px;
		line-height: 20px;
		color: var(--avon-text-color-reular-2);
		font-weight: var(--font-weight-regular);
	}
}