/* ASIDE */

.classifiedsTPListing {

	aside {

		label {
			input[type="radio"] {display: none;}
		}

		label.selected {font-weight:bold; color:var(--linkHover); padding-left:8px}
		label.selected::after{content:">"; margin-left:6px}

		#subsubcategory {border-top: 1px solid var(--lightGrey); margin: 18px 0 var(--gapSmall) 0; padding: 12px 0 12px 12px;
			label {font-size: var(--fontSizeSmall);}
		}
	}
}



/* FILTER */

.classFilter {
	h6, select, .area {display: inline-block; margin: 0;}
	select {margin-left: 8px; max-width: 180px;}
	.continent-header {background: var(--lightestGrey); font-weight: bold; color: black}
	.classFilterArea {display: flex; align-items: center; justify-content: flex-end;}
	.select__flag {width: 26px; height: 18px; display: inline-block; background-repeat: no-repeat; background-size: 100% 100%;; border: 1px solid rgba(0,0,0,0.3); margin: auto 0 auto 8px; vertical-align: middle;}
}


.classifiedsListingWrap {display: flex; flex-wrap: wrap; container-name: classifiedsListingWrap; container-type: inline-size;
	.bannerWrap {margin-top: 0}
	.classifiedsRow {display: flex; margin: 0 0 var(--gapLarge) 0; width: 100%; align-items: stretch; align-content: space-between; overflow: hidden;
		.classifiedsLeft {flex: 0 0 250px; display: flex;
			a {width: 100%; height: 100%}
		}
		.classifiedsMainImg {width: 250px; height: 100%; max-height: 300px; background-position: center center; background-repeat: no-repeat; background-size: cover; overflow: hidden;}
 		.classifiedsMainImg.noImage {background-size: 160px;
			img {width: 230px; height: auto;}
		}

		.classifiedsMiddle {flex: 1; display: flex; padding: var(--gapSmall); background: var(--lightBrown);
			.classifiedsTextGradient {background: linear-gradient(180deg, rgba(255,255,255,0) 40%, var(--lightBrown) 100%); position: absolute; top:0; right:0; left:0; bottom:0; display: flex; justify-content: center; align-items: flex-end; font-size: var(--fontSizeLarge); text-shadow: 0 0 6px white; font-weight: bold;}
		}

		.classifieds {flex: 1; display: flex; flex-direction: column}
		.classifieds h3 {margin-bottom: 10px; line-height: 1;}
		.classifieds h3 a {font-size: calc(var(--fontSizeLarge)); font-weight: bold;}
		.classifieds h4 {font-size: var(--fontSize); font-weight: bold; margin-bottom: 10px;}

		.classifiedsText {margin-bottom: 16px; flex-grow: 1; line-height: 1.45; position: relative; overflow: hidden; height: auto; word-wrap: break-word; white-space: normal;
			ul {margin: 0}
			ul li, ul li * {font-size: var(--fontSizeSmall)}
			ul li {margin-block: 2px; text-align: left;}
		}

		.classifiedsPrice {background: var(--lightestGrey); flex:0; padding: 8px 16px; margin: 16px 0; width: max-content;}
		.classifiedsPrice:has(b:empty) {display: none;}

		.classifiedsAdditionInfo {display: flex; flex-direction: row; align-items: center; justify-content: space-between; font-size: var(--fontSizeSmall)}
		.classifiedsActions {align-self: end; display: flex; gap: 12px}

		.actionButton {background: var(--link)}
		.actionButton:hover {background: var(--linkHover)}
		.actionButton svg {height: 20px; width: 20px; vertical-align: middle; margin-right: 8px;}
		.actionButton.button2 {background: orange; padding: 12px;}
		.actionButton.button2:hover {background: #ff8000}
		.actionButton.button2.favourite {background: red; padding: 12px;}
		.actionButton.button2 svg {height: 18px; width: 18px; margin: auto}

		.classifiedsAdvertiser {display: flex; flex-direction: column; width: 340px; background: var(--softBrown); padding: var(--gapSmall);
			.advertiserLogo:empty {display: none;}
			h4 {color: var(--darkGrey); font-size: var(--fontSizeLarge)}
			h5 {}
			p {margin-bottom: 4px;}
			p a {padding: 4px 6px 4px 0}
			p a span {color: var(--link); display: inline-block;}
			p a:hover span {text-decoration: underline; color: var(--linkHover)}
			p svg {width: 16px; height: 16px; fill: var(--darkGrey); margin: 0 14px 0 0; vertical-align: middle;}
			p:has(span:empty) {display: none;}
			p a.location svg {fill: var(--link);}
			h5 a, h5 {font-size: calc(var(--fontSizeLarge) - 1px)}
			h5, .advertiserAddress {margin-bottom: 8px;}
			.flag {margin-left: 4px}
			.advertiserLanguages {display: inline-block; margin: auto 0 auto 6px; vertical-align: middle;}
			.advertiserLanguages img {width: 18px; height: 14px; display: inline-block; border: 1px solid rgba(0,0,0,0.2)}
			.advertiserIM {text-align: center; margin-top: 4px}
			.advertiserIM:empty, .im span {display: none;}
			.advertiserIM a {font-size: var(--fontSmall); display: inline-block}
			p.warnClass {font-size: var(--fontSizeSmall); color: red; font-weight: bold;}
		}
	}
}


.classifiedsListing { 
	.classifiedsText {max-height: 250px}
}


/* No Ad for Country */
.noAdsForCountry {text-align: center; margin: var(--gapSmall) auto;

	h3 {font-weight: normal;
		b {font-size: calc(var(--fontSizeXLarge) + 0.2rem);}
		img {display: inline-block; border: 1px solid var(--lightGrey); margin: 0 0 0 8px; width: 32px; height: 22px;}
	}
	
	a {margin: var(--gapSmall) auto;}
	
	.languageWarning {background: red; width: fit-content; padding: 8px 12px; margin: 12px auto; color: white;
		& * {color: white}
		svg {height: 16px; width: 16px; fill: white; margin: 0 8px 0 0; display: inline-block;}
	}
}


@container classifiedsListingWrap (max-width: 900px) {
	.classifiedsRow {flex-wrap: wrap;}
	.classifiedsListingWrap .classifiedsRow .classifiedsAdvertiser {width: 100%; flex-grow: 1; flex-direction: row;}
}


@container content (min-width: 2200px) {
	.classifiedsListingWrap {gap: var(--gapLarge)}
	.classifiedsListingWrap .classifiedsRow {width: calc(50% - var(--gapLarge)); flex-grow: 1;}
}


#floatingButton {transform: scale(1.1); transform-origin: center;
	* {color: white;}
	p {font-size: calc(var(--fontSizeSmall) - 0.3rem);}
}


#internationalClassifieds.firstVisit {display: block;}





/* FREE OFFER  */

.classifiedsFreeOffer .asideRight .warn * {color: red;}

.classifiedsFreeOffer .asideRight li {margin: 16px 0}
.classifiedsFreeOffer .asideRight li a {padding: 0}

.classifiedsFreeOffer label.gdprLabel {display: block; width: 100%; max-width: var(--formWidth); font-size: var(--fontSizeSmall); text-align: center; margin: var(--gap) auto;}



/* FREE OFFER PREVIEW */

.freeAdPreview {max-width: var(--formWidth); margin: 0 auto;}
.freeAdPreview > div {display: flex; flex-direction: column; gap: 12px;
	> div {line-height: 1.4}
	b {display: block; color: var(--darkGrey); margin-bottom: 2px;}
	.spotlight-group:empty {display: none}
	.spotlight-group {display: flex; flex-wrap: wrap; margin: 12px auto; gap: 12px; justify-content: center;
		img {width: auto; max-width: 120px; max-height: 120px; border: 1px solid transparent;}
		a:hover img {border: 1px solid var(--linkHover);}
	}
}



/* PRICE PART */

.offerPrice div {border: 1px solid transparent; position: relative; display: flex; gap: 6px; align-items: center;}
.offerPrice div b {border-radius: 100%; background: red; padding: 3px; color: white; font-weight: bold; position: absolute; font-size: 13px; z-index: 100; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; top: -24px; left: -2px; transition: .5s; opacity: 0;}
.offerPrice div:hover b {opacity: 1}

.offerPrice div :is(input,select) {display: inline-block !important}
.offerPrice div .priceOfferPrice {width: auto; flex-grow: 1; min-width: 120px;}
.offerPrice div .priceOfferCurrency {width: 90px}
.offerPrice div .priceOfferUnit {width: 140px}


#message_exists {font-weight: bold; color: red; font-size: 13px; text-align: left;}




/* ATTACHMENTS - already uploaded */

.offerTextNew {

	.attachments {display: flex; justify-content: center; gap: 4px; margin: var(--gap) auto var(--gap) auto; flex-wrap: wrap;
		
		div {display: flex; flex-direction: column; width: auto; padding: 12px 14px; border-radius: 7px; border: 1px solid transparent; transition: 0.7s; justify-content: flex-end;
			a {display: block; margin: 6px auto; font-weight: bold; font-size: var(--fontSizeSmall); float: none;}
			a img {display: block; max-width: 118px; max-height: 100px; border: 1px solid transparent; transition: 0.4s;}
			a:hover img {border: 1px solid var(--linkHover); box-shadow: var(--materialShadow)}
		}

		div:first-child {border: 2px dashed orange; background-color: #fff8f0;}

	}
}



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

	.classifiedsListing, .classifiedsTPListing {

		.content {padding-top: 0}

		.classifiedsListingWrap {flex-direction: row; gap: var(--gap);
			& .classifiedsRow {flex: 1 0 350px; flex-direction: column; justify-content: center; align-items: flex-start; align-content: space-between; gap: var(--gapSmall); border: 1.5px solid #ddd; border-radius: var(--borderRadius); padding: 0;
				* {text-wrap: pretty}
				.classifiedsLeft, .classifiedsMiddle, .classifiedsAdvertiser, .classifieds {width: 100%; text-align: center; margin-inline: auto; flex: 1;}
				.classifiedsMiddle {background: none;
					.classifiedsTextGradient {background: linear-gradient(180deg, rgba(255,255,255,0) 40%, white 100%);}
				}
				.classifiedsPrice {margin-inline: auto}
				.classifiedsMainImg {width: 100%; min-height: 300px}
				.classifiedsMainImg.noImage {display: none}
				.classifieds {margin: 0}
				.classifiedsText {max-height: 350px}
				.classifiedsAdditionInfo {flex-direction: column; justify-content: center; gap: var(--gapSmall); align-self: center;}
				.classifiedsAdvertiser {flex-direction: column; width: 100%;}
				.advertiserIM a svg {height: 46px; width: 46px}
			}

		}


		.classFilter {margin: 0 auto var(--gap) auto; flex-direction: row; justify-content: center; overflow-x: auto; padding-inline: 0;
			h6 {display: none;}
			.classFilterType, .classFilterType select {margin: 0;}
		}

		#gdpr_alert {top: -22px; left: 60px; width: 100%; max-width: 250px;}
		#gdpr_alert svg {display: block; left: -30px; top: 17px; transform: scaleX(-1);}

	}

}


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

	.classifiedsListing, .classifiedsTPListing  {
		.classFilter {justify-content: flex-start;
			.area {display: none;}
		}
	}

	.classifiedsListingWrap {
		.classifiedsText {
				ul {list-style:none}
		}
	}

}




/* CLASSIFIEDS OPEN */

.classifiedOpen {display: flex; gap: var(--gap); overflow: hidden;

	.classifiedImages {display: flex; flex-direction: column; justify-content: flex-start; max-width: 300px; gap: 16px; position: relative;
		img {border: 1px solid transparent; transition: .4s;}
		a:hover img {border: 1px solid var(--link); box-shadow: var(--materialShadow)}
		.arrowScrollLink {display: block; position: absolute; right: 2px; top: 50%; transform: translateY(-50%); display: none;
			svg {fill: #fff; background: var(--link); width: 38px; height: 38px; border-radius: 50px; padding: 6px}
		}
		&.noImage {display: none}
	}

	.classifiedMainImage {
		a {display: block; width: 300px; height: 300px;}
		picture {
			img {width: 100%; height: 100%; object-fit: cover; object-position: center}
		}
	}

	.classifiedOtherImages {display: flex; flex-wrap: wrap; gap: 8px; justify-content: center;
		a {display: block; width: calc(33% - 5px); height: 100px;}
		picture {
			img {width: 100%; height: 100%; object-fit: cover; object-position: center}
		}
	}
	
	.classifiedOtherImages:empty {display: none}

	.classified {flex: 1; display: flex; flex-direction: column;}
	.classified h2 {margin-bottom: 16px; line-height: 1; font-size: calc(var(--fontSizeLarge) + 0.4rem); font-weight: bold;}
	.classified h3 {color: var(--darkGrey); font-weight: bold; margin-bottom: 16px;}
	.classified h3, .classified h3 * {font-size: calc(var(--fontSize) + 0.1rem)}
	.classifiedText {margin-bottom: var(--gap); line-height: 1.45; position: relative; overflow: hidden; max-height: none; height: auto; word-wrap: break-word; white-space: normal}
	.classifiedPrice {background: var(--lighterGrey); flex-grow: 0; padding: 16px; margin: 24px 0; width: max-content;}
	.classifiedPrice:has(b.priceValue:empty) {display: none;}
	.classifiedAdditionInfo {display: flex; flex-direction: row; align-items: center; justify-content: space-between}
	.classifiedActions {align-self: end; display: flex; gap: 12px}
	.actionButton {background: var(--link)}
	.actionButton:hover {background: var(--linkHover)}
	.actionButton svg {height: 24px; width: 24px; vertical-align: middle; margin-right: 12px;}
	.actionButton.button2 {background: orange; padding: 12px;}
	.actionButton.button2:hover {background: #ff8000}
	.actionButton.button2.favourite {background: red; padding: 12px;}
	.actionButton.button2 svg {height: 18px; width: 18px; margin: auto}

	.classifiedAdvertiser {display: flex; flex-direction: column; width: 340px; background: #faf3ec; padding: var(--gapSmall); align-self: flex-start;
		.advertiserLogo {margin: 0 0 16px 0;
			img {display: block; max-height: 100px; max-width: 100px;}
		}
		.advertiserLogo:empty {display: none;}
		h4 {color: var(--darkGrey); font-size: var(--fontSizeLarge)}
		p {margin-bottom: 6px;}
		p a {padding: 4px 6px 4px 0}
		p a span {color: var(--link); display: inline-block;}
		p a:hover span {color: var(--linkHover); text-decoration: underline}
		p svg {width: 16px; height: 16px; margin: 0 14px 0 0; vertical-align: middle;}
		p:has(span:empty) {display: none;}
		h5, .advertiserAddress {margin-bottom: 8px;}
		h5, h5 a {font-size: calc(var(--fontSizeLarge) - 0.2rem)}
		.advertiserLanguages {display: inline-block; margin: auto 0 auto 6px; vertical-align: middle;}
		.advertiserLanguages img {width: 18px; height: 14px; display: inline-block; border: 1px solid rgba(0,0,0,0.2); margin-inline: 1px}
		.advertiserIM {text-align: center; margin-top: 4px}
		.advertiserIM:empty, .im span {display: none;}
		.advertiserIM a {font-size: var(--fontSmall); display: inline-block}
	}

}

.classifiedsTPVideo {margin: var(--gapSmall) auto; text-align: center; overflow: hidden; max-width: 500px;}



/* =========== RELATED / USER ADS LISTING in AD VIEW ========= */
/* USED AT MORE PAGES - CLASSIFIED TEXT, TIMBER, COMPANY DETAIL*/

.classifiedsRelated {

	h4 a {font-size: inherit; white-space: nowrap; text-overflow: hidden}

	.classifiedsRelatedAds {display: flex; flex-wrap: wrap; gap: var(--gap); margin: var(--gapSmall) 0; justify-content: center; align-items: stretch;

		> div {flex: 1 0 240px; max-width: 260px; display: flex; gap: 6px; flex-direction: column; align-items: flex-start; justify-content: flex-start; border: 1px solid var(--lightGrey); transition: .5s; overflow: hidden;
			* {align-self: center; text-align: center;}
			a.linkImg, picture {width: 100%; height: 200px; display: block; overflow: hidden;
				img {width: 100%; height: 100%; object-fit: cover; object-position: center}
			}
			a.linkImg {margin: 0 0 8px 0}
			picture.defaultImage {display: flex; align-items: center; justify-content: center;
				img {width: 120px; height: 120px;}
			}
			h5 {margin: 0 auto; display: block;}
			h5 a {line-height: 1.25; color: var(--link)}
			h6 {margin: 0 auto; font-size: var(--fontSizeSmall)}
			a {display: block;}
			p {font-size: var(--fontSizeSmall); display: block; flex-grow: 1}
			h5 a, h6, p {padding-inline: 8px; line-height: 1.2}
			price {background: var(--lightestGrey); padding: 6px 8px; margin-top: 12px; display: block; text-align: center; width: 100%}
			price, pricevalue b {font-size: var(--fontSizeSmall)}
		}

		> div:hover {border: 1px solid var(--linkHover); box-shadow: var(--materialShadow);}

	}
}



.classifiedTextDetail .classifiedsRelated {
		> div {padding: 0 0 18px 0;}
}
.relatedAdTxt {padding: 0 0 18px 0;}

.classifiedsTPView .classifiedsRelated {
		> div, .relatedAdTP {padding: 0;}
}
.relatedAdTP {padding: 0 0 18px 0;}


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

	.classifiedTextDetail .content {padding-top: 0}

	.titleBlock .addButton {display: none}

	.classifiedOpen {flex-direction: column; justify-content: center; margin: 0; gap: var(--gap);

		.classifiedImages {flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; max-width: none; gap: 12px;

			.classifiedOtherImages {display: flex; flex-wrap: nowrap; gap: 8px; justify-content: center;
				a {display: block; width: 300px; height: 300px;}
				picture {
					img {width: 100%; height: 100%; object-fit: cover; object-position: center}
				}
			}

		}

		.classifiedImages.onlyOneAtt {
			
			.classifiedMainImage {justify-content: center; width: 100%;
				a {display: block; width: auto; margin: 0 auto;}
			}
			.classifiedOtherImages {display: none}

		}
		
		.classifiedImages.showArrowToScroll {
			.arrowScrollLink {display: block}
		}

		.classified {margin: 0 auto;
			.classifiedText {margin-bottom: var(--gapSmall);}
			.classifiedPrice {margin-inline: auto}
			.classifiedAdditionInfo {flex-direction: column; gap: 12px;
				.classifiedActions {justify-content: center; align-self: auto;}
			}
		}
		.classifiedAdvertiser {width: 100%; flex: 1; align-self: center; margin: var(--gap) 0}

	}

}


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

	.classifiedsRelated {
		.classifiedsRelatedAds {gap: var(--gapXLarge); align-items: flex-start; flex-direction: column;
			> div {flex: 1; max-width: none; width: 100%}
		}
	}

}


/* TIMBERPOLIS CLASSIFIEDS - first visit top banner /classifieds-timberpolis */

.classifiedFirstVisitAd {background-repeat: no-repeat; background-position: center; background-size: cover; display: flex; align-items: center; justify-content: center; gap: var(--gap); animation: parallaxMove 32s ease-in-out infinite;

	* {color: white;}
	b {display: block;}
	> div {padding: var(--gapSmall) var(--gap);}
	div.div1st {background: rgba(0,0,0,0.4); height: 100%; min-width: 30%;  display: flex; align-items: center; justify-content: center; animation: colorCycle 6s ease-in-out infinite; position: relative; overflow: hidden; clip-path: url(#wave-clip);
		div {font-size: var(--fontSizeLarge); font-weight: 300; position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center;}
		div .typing-text {font-size: var(--fontSizeLarge); font-weight: 300; display: inline-block; overflow: hidden; white-space: nowrap; border-right: 3px solid rgba(255,255,255,0.9); animation: typing 2s steps(8, end) forwards,blinkCursor 0.75s step-end 2s, hideCursor 0s 2s forwards; max-width: 0;}
		b {font-size: calc(var(--fontSizeXXLarge) + 0.2rem); font-weight: bolder; display: inline-block;overflow: hidden; white-space: nowrap; border-right: 4px solid rgba(255,200,100,0.9); max-width: 0; opacity: 0; animation: showElement 0s 2.5s forwards, typingBold 2.5s steps(11, end) 2.5s forwards,    blinkCursorBold 0.75s step-end 2.5s 3.33, hideCursorBold 0s 5s forwards, textGlowBold 3s ease-in-out 5s infinite; text-shadow: 0 0 10px rgba(255,255,255,0.3), 0 0 20px rgba(255,255,255,0.2), 2px 2px 4px rgba(0,0,0,0.8);}
	}

	div.div2nd {flex: 1;
		b {font-size: var(--fontSizeXLarge); margin-block: 0px; backdrop-filter: blur(2px); padding: 4px 12px; -webkit-text-stroke-width: 1px; -webkit-text-stroke-color: rgba(0, 0, 0, 0.0); text-shadow: 2px 2px 3px rgba(0,0,0,0.6)}
	}

}


.mainActivity .classifiedFirstVisitAd {background-image: url("../images/classifieds/parallax_2.webp")}
.mainActivity1 .classifiedFirstVisitAd {background-image: url("../images/classifieds/parallax_1.webp")}
.mainActivity5 .classifiedFirstVisitAd {background-image: url("../images/classifieds/parallax_2.webp")}
.mainActivity10 .classifiedFirstVisitAd {background-image: url("../images/classifieds/parallax_3.webp")}
.mainActivity12 .classifiedFirstVisitAd {background-image: url("../images/classifieds/parallax_4.webp")}
.mainActivity15 .classifiedFirstVisitAd {background-image: url("../images/classifieds/parallax_5.webp")}
.mainActivity20 .classifiedFirstVisitAd {background-image: url("../images/classifieds/parallax_6.webp")}




@media screen and (max-width: 1024px) {
	.classifiedFirstVisitAd {gap: var(--gapSmall);
		> div {padding: var(--gapSmall);}
	}
}


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

.classifiedFirstVisitAd {gap: 0; flex-direction: column; animation: parallaxMove 24s ease-in-out infinite;
	
	div {padding: var(--gapSmall)}
	div.div1st {height: auto; width: 100%; display: block; text-align: center; padding: 0; clip-path: url(#wave-clip-mobile);}
	div.div2nd {text-align: center;
		b {font-size: var(--fontSizeLarge); padding: 4px 0}
	}

}


.mainActivity .classifiedFirstVisitAd {background-image: url("../images/classifieds/parallax_2_small.webp")}
.mainActivity1 .classifiedFirstVisitAd {background-image: url("../images/classifieds/parallax_1_small.webp")}
.mainActivity5 .classifiedFirstVisitAd {background-image: url("../images/classifieds/parallax_2_small.webp")}
.mainActivity10 .classifiedFirstVisitAd {background-image: url("../images/classifieds/parallax_3_small.webp")}
.mainActivity12 .classifiedFirstVisitAd {background-image: url("../images/classifieds/parallax_4_small.webp")}
.mainActivity15 .classifiedFirstVisitAd {background-image: url("../images/classifieds/parallax_5_small.webp")}
.mainActivity20 .classifiedFirstVisitAd {background-image: url("../images/classifieds/parallax_6_small.webp")}

}



@keyframes parallaxMove {
	0%, 100% {
		background-position: center top;
	}
	50% {
		background-position: center bottom;
	}
}


@keyframes colorCycle {
	0% {
		background: rgba(0,0,0,0.4); /* Dark Black */
	}
	50% {
		background: rgba(101,67,33,0.4); /* Dark Brown */
	}
	100% {
		background: rgba(0,0,0,0.4); /* Back to Black */
	}
}


@keyframes typing {
	from {
		max-width: 0;
	}
	to {
		max-width: 100%;
	}
}

@keyframes typingBold {
	from {
		max-width: 0;
	}
	to {
		max-width: 100%;
	}
}

@keyframes showElement {
	to {
		opacity: 1;
	}
}

@keyframes blinkCursor {
	0%, 50% {
		border-right-color: rgba(255,255,255,0.9);
	}
	51%, 100% {
		border-right-color: transparent;
	}
}

@keyframes blinkCursorBold {
	0%, 50% {
		border-right-color: rgba(255,200,100,0.9);
	}
	51%, 100% {
		border-right-color: transparent;
	}
}

@keyframes hideCursor {
	to {
		border-right-color: transparent;
	}
}

@keyframes hideCursorBold {
	to {
		border-right-color: transparent;
	}
}

@keyframes textGlowBold {
	0%, 100% {
		text-shadow:
			0 0 10px rgba(255,255,255,0.3),
			0 0 20px rgba(255,255,255,0.2),
			2px 2px 4px rgba(0,0,0,0.8);
	}
	50% {
		text-shadow:
			0 0 20px rgba(255,255,255,0.6),
			0 0 40px rgba(255,200,100,0.4),
			0 0 60px rgba(255,200,100,0.2),
			2px 2px 8px rgba(0,0,0,0.9);
	}
}


.hint-pulse {
	animation: translationPulse 0.5s ease-in-out 18;
	animation-delay: 0.5s;
}

@keyframes translationPulse {
	0%, 100% {
		transform: scale(1);
		filter: drop-shadow(0 0 0px transparent);
		background: orange;
	}
	50% {
		transform: scale(1.25);
		filter: drop-shadow(0 0 6px var(--color-accent, #ff0000));
		background: red;
	}
}



/* CLASSIFIED AD REQUEST */
/* ===================== */

.classfiedsRequest {

	.formLoginWrap {text-align: center;
		.form {width: 100%; max-width: 400px; margin: 0 auto;}
		.loginFooter a {padding: 6px; display: block; width: fit-content; margin: 0 auto; text-align: center;}
	}

	.messagePart {max-width: 1000px; width: 100%; margin: var(--gap) auto; gap: var(--gap); display: flex; flex-direction: row; flex-wrap: wrap;
		> div {flex: 1;}
	}

	.classifiedPart {max-width: 1000px; width: 100%; margin: var(--gap) auto;

		h3 {font-size: var(--fontSizeLarge); color: black;}
		.classifiedCategory {margin: 0 0 12px 0; color: var(--darkGrey); font-weight: bold;}
		
	}

}