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

/* Custom Styles Avon */

: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, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font: inherit;
	vertical-align: baseline;
}

body{
	font-size: 16px;
	color: var(--avon-text-color-reular);
	background-color: #FFFFFF;
}

body, h1, h2, h3, h4, h5, h6, p, span{
	font-family: 'Montserrat', Arial, sans-serif;
	font-weight: var(--font-weight-medium);
	letter-spacing: -0.02em;
}

h1 {
	font-size: 40px;
	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(--font-weight-regular);
    font-weight: var(--font-weight-light);
} 

h4 {
	font-size: 24px;
	line-height: 32px;
	/* color: var(--font-weight-regular); */
	font-weight: var(--font-weight-medium);
} 

/* HTML5 display-role reset for older browsers */

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
	display: block;
}

ol, ul {
	list-style: none;
}

blockquote, q {
	quotes: none;
}

blockquote:before, blockquote:after, q:before, q:after {
	content: '';
	content: none;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

body {
	background: #fff;
}

a {
	color: #deb451;
	text-decoration: none;
}

.container {
	width: 100%;
	margin: 0 auto;
	background-color: var(--avon-page-bg-color-light);
	background-color: rgb(39 118 194 / 14%);
	background-color: var(--avon-color-white);
	background-color: black;
}

#cont1 .popup_trigger {
	/* display: none; */
}

.header {
	margin: 0 0 0px 0;
}

.header img {
	width: 100%;
}

.desktop {
	display: block;
	max-width: 1920px;
	margin: auto;
}

.mobile {
	display: none;
}

.topmenu {
	clear: both;
}

.topmenu a {
	float: left;
	width: 50%;
}

.topmenu a span, .topmenu .active span {
	background: #000;
	color: #fff;
	text-decoration: none;
	text-align: center;
	font-size: 16px;
	padding: 20px 0;
	margin: 0px;
	display: block;
}

.topmenu a span {
	display: block;
}

.topmenu a:hover span {
	background: #d40054;
}

.topmenu .active span {
	background: #e63078;
}

.topmenu .active:hover span {
	background: #f73b85;
}

.separator {
	border: none;
	clear: both;
	height: 10px;
}

.listing {
    display: grid;
    grid-gap: 40px;
    padding: 60px;
    grid-template-columns: repeat(auto-fit, 360px);
    justify-content: center;
}

.list-item {
	position: relative;
	display: inline-block;
	box-sizing: border-box;
}

.list-item-inner:hover {
	box-shadow: 0 2px 24px 0 rgba(0, 0, 0, 0.2);
}

.list-item-inner {
	box-sizing: border-box;
	width: 360px;
	height: 100%;
	padding: 32px 36px 36px 36px;
	margin: auto;
	background: var(--avon-page-bg-color-light);
	/* background: rgb(255 190 196 / 22%); */
	border: 0px solid #fff;
}

/* FOR EXHAUSTED STOCK START */

div.stoc-epuizat-nu div.stoc-epuizat {
    display: none;
}

div.stoc-epuizat-da div.stoc-epuizat {
    position: absolute;
	top: 30px;
	border-radius: 4px;
	background-color: var(--avon-status-notification-backgrounds-submited);
	font-size: 12px;
	line-height: 12px;
	padding: 10px;
	color: var(--avon-color-white);
}

a.stoc-epuizat-nu {
	display: none;
}

a.stoc-epuizat-da {
	display: none;
}

div.stoc-epuizat-da a.stoc-epuizat-da {
	display: block;
	background-color: var(--avon-primary-cta-disabled);
}

div.stoc-epuizat-nu a.stoc-epuizat-nu {
	display: block;
}



/* FOR EXHAUSTED STOCK END */


.list-item-inner img {
	width: 288px;
	height: auto;
	margin-bottom: 12px;
}

h2.name {
	/* height: 110px; */
	margin-bottom: 15px;
    font-size: 16px;
    line-height: 24px;
    text-align: center;
    font-weight: var(--font-weight-medium);
	color: var(--avon-text-color-reular);
	text-transform: uppercase;
}

.list-item-inner h2 em {
	color: var(--avon-text-color-urgency);
	display: block;
	font-size: 25px;
	padding-top: 10px;
}

.list-item-inner h2 em small {
	font-size: 13px;
}

.text-content {}

.text-content ul {
	list-style: disc;
	padding: 0 20px;
}

.text-content ul li {
	padding: 5px 0;
	font-size: 11px;
}

.cod-nu {
	display: block;
	text-align: center;
	font-size: 16px;
	border-top: 1px solid #eee;
	border-bottom: 1px solid #eee;
	padding: 10px;
	margin: 15px;
}

.char1, .char2, .char3, .char4, .char5, .char6, .char7, .char8, .char9, .char10, .char11, .char12 {
	color: var(--avon-text-color-text-links-idle);
	font-size: 12px;
}

.char13 {
	padding-left: 6px;
}

.cod-da {
	display: none;
}

.multicod-da {
	display: block;
}

.multicod-nu {
	display: none;
}

.pret-standard {
	text-align: center;
	display: block;
	color: rgba(112, 118, 119, 1);
	clear: both;
}

.pret-standard strong {
	text-decoration: line-through;
}

.comanda-da {
	display: none;
}

.comanda-nu {
	display: block;
	max-width: 320px;
	padding: 15px;
	margin: 15px auto auto auto;
	border-radius: 4px;
	background: var(--avon-color-purple);
	/* background: rgb(246 91 123); */
	font-weight: var(--font-weight-bold);
	color: var(--avon-color-white);
	text-align: center;
	text-transform: uppercase;
	letter-spacing: normal;
}

.multi-title, .multi-code, .multi-link {
	display: block;
	margin: 2px 0;
	padding: 2px;
	font-size: 12px;
	text-align: center;
}

.multi-title, .multi-code {
	margin-top: 15px;
	font-size: 11px;
}

.multi-title {
	float: left;
	margin-left: 10%;
}

.multi-code {
	font-weight: bold;
	width: 25%;
	float: right;
	margin-right: 7%;
}

.multi-link {
	background: #de51ad;
	color: #fff;
	text-decoration: none;
	padding: 5px;
	clear: both;
	width: 80%;
	margin: 0 auto;
}

.multi-link:hover {
	background: #9a3272;
}

.popup_trigger {
	cursor: pointer;
	text-align: center;
    margin-bottom: 10px;
	/* display: none; */
}

.masca {
	display: none;
    position: fixed;
    box-sizing: border-box;
    top: 0px;
    left: 0px;
    background-color: #00000040;
    /* border: pink 0px solid; */
    width: 100%;
    height: 100%;
    /* margin-top: 1%; */
    /* margin-bottom: 1%; */
    /* margin-left: 1%; */
    /* margin-right: 1%; */
    font-size: 11px;
    z-index: 1;
    overflow: hidden;
    padding: 10%;
}

.componenta {
	position: relative;
	background-color: white;
    width: auto;
    min-height: -webkit-fill-available;
    max-height: -webkit-fill-available;
    overflow: scroll;
	padding: 3% 45px 3% 3%;
}

.show {
	display: block;
	/* -webkit-animation: fadeIn 1s; */
	/* animation: fadeIn 1s */
}

#inchide-on {
    width: 32px;
    height: 32px;
    /* float: right; */
    /* margin-top: -120px; */
	right: 10px;
	top: 10px;
    position: absolute;
    z-index: 101;
    background: url(https:///www2.avoncosmetics.ro/dam/ro-home/utilitare/close-icon.png);
    cursor: pointer;
}

#inchide-on:hover {
    background: url(https:///www2.avoncosmetics.ro/dam/ro-home/utilitare/close-over.png);
}

.mentiuni {
	margin-top: 10px;
    text-align: center;
}

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






/* Media Queries */

@media only screen and (max-width: 879px) {
	.desktop {
		display: none;
	}
	.mobile {
		display: block;
	}
	/* .topmenu a {
		width: 100%;
		clear: both;
	} */
	.container {
		width: 100%;
	}
	/* .topmenu {
		column-count: 1;
		column-gap: 0em;
		clear: both;
	} */
	/* .listing {
		column-count: 1;
		column-gap: 0em;
		clear: both;
	}
	.list-item {
		width: 100%;
	} */

	.listing {
		grid-gap: 9px;
		padding: 15px;
		grid-template-columns: repeat(auto-fit, 168px);
	}
	
	.list-item-inner { 
		box-sizing: border-box;
		width: 168px;
		height: 100%;
		padding: 12px 12px 19px 12px;
		margin: auto;
		border: 0px solid #fff;
	}

	.list-item-inner img {
		width: 144px;
		margin-bottom: 6px;
	}

	h2.name {
		height: 110px;
		margin-bottom: 12px;
		font-size: 12px;
		line-height: 16px;
		text-align: center;
		font-weight: var(--font-weight-medium);
		color: var(--avon-text-color-reular);
	}

	.cod-nu {
		display: block;
		text-align: center;
		font-size: 12px;
		padding: 0px;
		margin: 12px 0px;
	}

	.pret-standard {
		font-size: 12px;
	}

	.text-content {
		height: 150px;
	}

	.text-content ul {
		padding: 0 0 0 20px;
		line-height: 1;
	}

	.list-item-inner h2 em {
		font-size: 16px;
		padding-top: 10px;
		font-weight: var(--font-weight-medium);
	}

	.comanda-nu {
		font-size: 10px;
		padding: 8px;
	}

}

@media only screen and (max-width: 374px) {

	.listing {
		grid-gap: 9px;
		padding: 15px;
		grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
	}

	.list-item-inner {
		box-sizing: border-box;
		width: 100%;
		height: 100%;
		padding: 12px 12px 19px 12px;
		margin: auto;
		border: 0px solid #fff;
	}

	.list-item-inner img {
		display: block;
		margin: auto;
		width: 60%;
		margin-bottom: 6px;
	}

	h2.name {
		height: auto;
		margin-bottom: 12px;
		font-size: 12px;
		line-height: 16px;
		text-align: center;
		font-weight: var(--font-weight-medium);
		color: var(--avon-text-color-reular);
	}

	.text-content {
		height: auto;
	}

}