.hidden {
	visibility: hidden;
	display: none;
}
.invert {
	filter: invert(1);
}

body {
	margin: 0;
	font-family: var(--default-font);
	background-color: var(--bg-white);
	box-sizing: border-box;
}
html, body {
	height: 100dvh;
}
	
a {
	text-decoration: none;
	font-family: var(--default-font);
	color: var(--text-white);
}

.middle {
	width: var(--content-width);
	margin: auto;
}
.logo {
	width: 300px;
	max-width: 100%;
}

.epitaph {
	padding-left: 40px;
	font-family: times new roman;
}



:root {
	/*-----------icons---------------*/
	--small-phone-icon: url(icon/phone.png);
	--map-marker-icon: url(icon/fill.png);
	
	--phone-icon: url(icon/phone.svg);
	--whatsapp-icon: url(icon/whatsapp-color.svg);
	--telegram-icon: url(icon/telegram-color.svg);
	
	--social-icons: url(icon/social-icons.webp);
	--stub_icon: url(icon/icon_stub.jpg);
	--brickwall_icon: url(icon/png/brickwall.png);
	--clock_icon: url(icon/png/clock.png);
	--handshake_icon: url(icon/png/handshake.png);
	--idea_icon: url(icon/png/idea.png);
	--quality_icon: url(icon/png/quality-control.png);
	--religion_icon: url(icon/png/religion.png);
	--cash_icon: url(icon/png/cash.png);
	--credit_card_icon: url(icon/png/credit-card.png);
	
	
	--list-icon: url(icon/list-icon.svg);
	
	--icon-yellow-filter: invert(61%) sepia(17%) saturate(929%) hue-rotate(357deg) brightness(96%) contrast(97%);
	--icon-vermillion-filter: brightness(0) saturate(100%) invert(27%) sepia(21%) saturate(4031%) hue-rotate(328deg) brightness(109%) contrast(102%); 
	/*-----------color---------------*/
	--bg-black: #262626;
	/* --bg-white: #fff; */
	--bg-white: #f7f7f7;
	--bg-dark-gray: #212121;
	--bg-light-gray: #ddd;
	
	--text-black: #000;
	--text-white: #f8f8f8;
	--text-yellow: #bb955c; 
	/* --text-yellow: #FFC107;  */
	
	--color-vremillion: #c43434;
	--color-teal: #34c4c4;
	--color-blue: #36587d;
	--color-light-gray: #eaeaea;
	/* --text-yellow: #f7931d; */
	
	/*-----------font-size-----------*/
	--font-big: 2em;
	--font-medium: 1.4em;
	--font-small: 1.2em;
	--font-tiny: 1.1em;
	--font-smallest: 1em;
	
	--font-line-height-bigger: 1.5;
	/*-----------other---------------*/
	--content-width: 80%;
	--default-font: Arial, serif;

	timeline-scope: --scroll;
	animation: --scroll forwards;
	animation-timeline: --scroll;
	container-name: --scroll;
	/*-------------------------------*/
	
	
	/*------------Mobile-------------*/
	--mobile_content-width: 90%;
	/*------------Mobile-------------*/
}

.icon_clock {background-image: var(--clock_icon)}
.icon_brickwall {background-image: var(--brickwall_icon)}
.icon_handshake {background-image: var(--handshake_icon)}
.icon_religion {background-image: var(--religion_icon)}
.icon_idea {background-image: var(--idea_icon)}
.icon_quality {background-image: var(--quality_icon)}
.icon_cash {background-image: var(--cash_icon)}
.icon_credit_card {background-image: var(--credit_card_icon)}

.bg-white {
	background-color: var(--bg-white) !important;
	color: var(--text-black) !important;
}

/* --------------- Desktop --------------- */
/* categories_round */
.categories_wrapper {
	display: flex;
	flex-flow: wrap;
	justify-content: space-evenly;
	gap: 20px;
	/* padding: 3px 0 0 12px; */
}
.categories_round {
	margin: 10px 0;
}
.category_round {
	display: block;
	color: var(--text-black);
	--size: 110px;
	--padding: 20px;
	width: calc(var(--size) + var(--padding)); 
	/* width: fit-content; */
	text-align: center;

	/* cursor: pointer; */
}
.category_round > div {
	width: var(--size);
	height: var(--size);
	/* background: var(--color-light-gray); */
	margin: auto;
}
.category_round > div > img {
	width: var(--size);
	height: var(--size);
	object-fit: cover;
	border-radius: 50%;
}
.category_round > p {
	margin: 10px 0 0 0;
}
/* categories_round */
/* image_mosaic */
.image_mosaic .column {
	flex: 25%;
	max-width: calc(24% - 1px);
	padding: 0 4px;
	height: min-content;
}
.image_mosaic .row {
	display: flex;
	flex-wrap:wrap;
	padding:0 4px;
}
.image_mosaic .column img {
	width: 100%;
	margin-top: 8px;
	vertical-align: middle;

} 
@media screen and (max-width: 900px) {
	.image_mosaic .column {
		flex: 50%;
		max-width: 48%;
	}
}
@media screen and (max-width: 600px) {
	.image_mosaic .column {
		flex: 100%;
		max-width: 100%;
	}
}
/* image_mosaic */

/* video */
.horizontal_video {
	margin: auto;
	text-align: center;
}
.horizontal_video video, .horizontal_video iframe {
	width: 100%;
	aspect-ratio: 16 / 9;
}

.video_grid {
	display: flex;
	justify-content: center;
	row-gap: 20px;
	column-gap: 20px;
	flex-flow: row wrap;
}
.video_grid video {
	width: 300px;
}
/* video */
/* pre-header */
.preheader {
	background-color: var(--bg-white);
	color: var(--text-black);
	padding-top: 10px;
	padding-bottom: 10px;
	
	display: flex;
	flex-flow: row wrap;
	justify-content: space-evenly;
	row-gap: 20px;
	
	white-space: nowrap;
}
.preheader a { color: var(--text-black);}
.preheader .phone-text{
	font-size: var(--font-medium);
}
.preheader .address-text:before{
	content: '';
	display: inline-block;
	margin-right: 10px;
	vertical-align: middle;

	background: var(--map-marker-icon);
	--size-width: 15px;
	--size-height: 23px;
	width: var(--size-width);
	height: var(--size-height);
	background-size: var(--size-width) var(--size-height); 
}
.preheader > div {
	/* display: table; */
	display: grid;
	align-items: center;
	justify-items: center;
}

.preheader div > * {
	display: table-cell;
	vertical-align: middle;
	border-spacing:10px;
	max-width: 100%;
}
.social_wrapper {
	background-color: var(--bg-black);
    border-radius: 50%;
    width: 50px;
    height: 50px;
}
.social_icon {
	height: 100%;
	width: 100%;
	margin: auto;
	
	background-repeat: no-repeat;
	background-position: center;
}
.icon_phone { 
	background-image: var(--phone-icon);
	
	--size: 70%;
	filter: invert(1); 
	height: var(--size);
	width: var(--size);
	padding-top: calc(100% - var(--size));
}
.icon_whatsapp { background-image: var(--whatsapp-icon); }
.icon_telegram { background-image: var(--telegram-icon); }
/* pre-header */
/* header */
.header {
	background-color: var(--color-vremillion);
	color: var(--text-white);

	font-size: var(--font-tiny);
}

.header > nav {
	display: flex; 
	flex-flow: row wrap; 
	justify-content: space-evenly; 
	row-gap: 20px; 
	column-gap: 20px;
	white-space: nowrap; 
}

.header > nav > * {
	padding: 5px 0;
	border-bottom: 2px solid white;
	margin: 13px 0;
}
	
.header > nav > *:hover {
}
	/* dropdown menu */
	.dropdown input {
		display: none; 
	}
	.dropdown:has(input:checked){
		border-bottom: 2px solid white;
	} 
	.dropdown, .dropdown label {
		cursor: pointer;
	}
	.dropdown:after {
		content: '▲';
		display: inline-block;
		/* background: var(--list-icon) no-repeat; */
		vertical-align: middle;
		
		/* --icon-size: 14px;
		width: var(--icon-size);
		height: var(--icon-size);
		background-size: var(--icon-size); */
		/* filter: invert(61%) sepia(17%) saturate(929%) hue-rotate(357deg) brightness(96%) contrast(97%); */
		/* filter: var(--icon-yellow-filter); */
		
		
	}
	
	.dropdown-content {
		display: block;
		display: none; 
		position: absolute;
		background-color: #f9f9f9; /*changeme*/
		
		box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
		border-radius: 10px;
		padding: 5px;
		margin-top: 15px;
		z-index: 1;
		color: black;
	}
	.dropdown-content > a {
		color: var(--text-black);
		display: block;
		padding: 12px 5px;
		border-radius: 10px;
	}
	.dropdown-content > a:hover {
		background-color: var(--bg-light-gray);
	}
	
	input:checked ~ .dropdown-content
	/* ,.dropdown:hover  > .dropdown-content */
	{
		display: block;
		opacity: 1;

		overflow: hidden;
		/* animation: roll_menu_down;
		animation-duration: 500ms; */
	}
	.dropdown:has(input:checked):after
	/* ,.dropdown:hover:after */
	{
		content: '▼';
	}
	@keyframes roll_menu_down {
		from {height: 0};
		to {height: fit-content}
	}

	/* dropdown menu */


/* header */

/* text_with_bg_picture */
.text_with_bg_picture {
	background-image: 
		linear-gradient(0deg, #000C 0%, #FFF5 300%),
		/* linear-gradient(rgba(0, 0, 255, 0.5), rgba(255, 255, 0, 0.5)), */
		/* linear-gradient(rgba(0, 0, 255, 0.5), rgba(255, 255, 0, 0.5)), */
		url(img/background.jpg);
	background-color:#000A;
	color: var(--text-white);
	/* background-blend-mode: multiply; */
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	height: 76dvh;
	text-align: center;
	
	position: relative;
}
.text_with_bg_picture .text {
	position: absolute;
	top: 46%;
	left: 50%;
	transform: translate(-50%, -50%);
}
.text_with_bg_picture h1 {
	font-size: var(--font-big);
}
.text_with_bg_picture p {
	font-size: var(--font-tiny);
}

/* text_with_bg_picture */

/* text_picture_block_horizontal */
.text_picture_block_horizontal {
    padding-top: 40px;
    padding-bottom: 60px;
}
.text_picture_block_horizontal > section {
	align-items: center;
	display: flex;
}
.text_picture_block_horizontal h1 {
	font-size: var(--font-big);
	font-weight: bold;
}
.text_picture_block_horizontal h2 {
	font-size: var(--font-small);
	font-weight: normal;

}
.text_picture_block_horizontal > section * {
	width: 100%;
}
.text_picture_block_horizontal > section > div:first-child {
	margin-right: 20px;
}
/* text_picture_block_horizontal */

/* button-grid */
.button_grid {
	padding-top: 100px;
	padding-bottom: 100px;
	background-color: var(--bg-light-gray);
	color: var(--text-black);
}
.button_grid > section {
	display: flex;
	flex-flow: row wrap;
	row-gap: 20px;
	column-gap: 20px;
	align-self: center;
	justify-content: center;
}
.button_grid > section > a {
	display: block;
	--size: 170px;
	height: var(--size);
	width: var(--size);
	flex: 0 1 var(--size);
	text-align: center;
	
	background-color: var(--text-white);
	color: var(--text-black);
	border-radius: 10%;
	padding: 2%;
	box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.07);
	cursor: pointer;
}
.button_grid img {
	margin-top: 10%;
	height: 35%;
	width: 35%;
	filter: var(--icon--filter);
}
.button_grid h3 {
	font-size: var(--font-smallest);
}

/* button-grid */
/* order-steps */
	.order-steps {
		display: flex;
		column-gap: 30px;
		overflow: auto; /* or hidden */
		scroll-timeline: --scroll;
		scroll-timeline-axis: x;
	}
	.right-arrow {
		height: 20px;
		filter: var(--icon-vermillion-filter);
		visibility: hidden;
	}
	.order-step {
		min-width: 250px;
	}

	@keyframes --scroll {
		0%,to{--scroll: 1;}
	}
	@container --scroll style(--scroll: 1) {
		.right-arrow {
			visibility: visible;
		}
	}
/* order-steps */
/* text with paragraphs */
.text_with_paragraphs {
	padding-top: 10px;
    padding-bottom: 50px;
}
.text_with_paragraphs h2 {
	/* font-size: var(--font-big); */
}
.text_with_paragraphs p {
	font-size: var(--font-small);
}
/* text with cards */

/* card-grid */
.card_grid {
	display: flex;
	flex-flow: row wrap;
	column-gap: 20px;
	row-gap: 20px;
	
	text-align: center;
	align-items: center;
	justify-content: center;
	
	white-space: nowrap;
	
	--card-img-size: 200px;
}
.card_grid > div {
	flex: 0 1 var(--card-img-size);
	box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.17);
	align-self: stretch;
}
.card_grid img {
	height: var(--card-img-size);
	width: var(--card-img-size);
}
.card_grid h3 {
	margin-top: 10px;
	margin-bottom: 10px;
	font-size: var(--font-smallest);
}
/* card-grid */

/* horizontal cards with title*/
.title_with_horizontal_cards {
	padding-top: 10px;
    padding-bottom: 50px;
	background-color: var(--bg-black);
	color: var(--text-white);
	
}
.title_with_horizontal_cards h2 {
	font-size: var(--font-big);
	text-align: center;
}


.horizontal_card_grid {
	display: flex;
	flex-flow: row wrap;
	column-gap: 20px;
	row-gap: 10px;
	
	justify-content: center;
	align-items: flex-start;
}
.horizontal_card {
	width: 350px;
}
.horizontal_card > div {
	display: flex;
	align-items: center;
	column-gap: 2ddd;
}
.horizontal_card .icon > div {
	--size: 50px;
	width: var(--size);
	height: var(--size);
	filter: var(--icon-yellow-filter);
}
.horizontal_card h3 {
	font-size: var(--font-small);
}
.horizontal_card p {
	line-height: var(--font-line-height-bigger);
}
	
/* horizontal cards with title */

/* image grid */
.image_grid > div, .image_grid img { --img_size: 200px; max-width: 100%;}

.image_grid {
	display: flex;
	flex-flow: row wrap;
	column-gap: 20px;
	row-gap: 20px;
	
	justify-content: center;
	align-items: center;
}

.image_grid > div {
	flex: 0 1 var(--img_size);
}
.image_grid img {
	width: var(--img_size);
}
/* image grid */

/* navigation_links */
.navigation_links > ul{
	display: fddd;
	flex-flow: row wrap;
	column-gap: 20px;
	row-gap: 10px;
	
	list-style: none;
	margin: 0;
	padding: 0;
	overflow: hidden;
}
.navigation_links a {
	display: block;
	text-align: center;
	padding-right: 10px;
	text-decoration: underline;
	font-size: var(--font-medium);
	color: var(--text-yellow);
}
/* navigation_links */

/* footer_navigation */
.footer_navigation {
	background: linear-gradient(180deg, #262626 0%, var(--bg-light-gray) 1000%);
	/* background: #132130; */
}
.footer_navigation footer {
	display: flex;
	flex-flow: row wrap;
	column-gap: 20px;
	row-gap: 20px;

	justify-content: space-evenly;
	width: inherit;
	margin: auto;
	
	padding-top: 20px;
	padding-bottom: 20px;
	
	/* color: var(--text-yellow); */
	color: #fff;
	text-align: center;
}
.footer_navigation .footer_header {
	text-align: center;
	padding-top: 20px;
}
.footer_navigation footer > div {
	height: 100%;
	width: 30%;
}
/* .footer_navigation footer > div:first-child { */
	/* width: 100%; */
/* } */
.footer_navigation footer img {
	vertical-align: middle;
	max-width: 100%;
}


.footer_navigation_links > ul{
	display: flex;
	flex-flow: row wrap;
	column-gap: 20px;
	row-gap: 10px;
	
	list-style: none;
	margin: 0;
	padding: 0;
	overflow: hidden;
}

.footer_navigation_links > ul > li {
	width: 100%;
}
.footer_navigation_links h2 {
	text-transform: uppercase;
}
.footer_navigation_links a {
	/* text-transform: uppercase; */
	/* color: var(--text-white); */
	color: #ddd;
	font-size: var(--font-smallest);
}
/* footer_navigation */

/* basement */
.basement {
	padding-top: 60px;
	padding-bottom: 60px;
	background-color: var(--bg-black);
	color: var(--text-white);
	
	text-align: center;
	
}
.basement > footer > div {
	display: flex;
	flex-flow: row nowrap;
	justify-content: center;
}

	/*address and phone row*/
.basement .contacts {
	column-gap: 35px;
	row-gap: 5px;
}
.basement .contacts > p {
	display: flex;
	flex-flow: wrap;
	flex: 0 1 auto;
	margin: 0;
}
.basement .contacts a:before {
	content: '';
	display: inline-block;
	margin-right: 10px;
	background-repeat: no-repeat;
}
.basement .address a:before {
	background: var(--map-marker-icon);
	width: 9px;
	height: 13px;
	background-size: 9px 13px;
}
.basement .phone a:before {
	background: var(--small-phone-icon);
	width: 10px;
	height: 10px;
	background-size: 10px 10px;
}
	/*address and phone row*/

	/*social icons row*/
.basement .social {
	column-gap: 7px;
	margin-top: 30px;
}
.basement .socal a {
	border-radius: 50%;
	border: 9px solid;
	display: block;
}
.basement .social a > div {
	--icon-size: 24px;
	--icon-quantity: 2;
	background-position-x: calc(var(--icon-size) * var(--icon-position));
	
	height: var(--icon-size);
	width: var(--icon-size);
	background-size: calc(var(--icon-size) * var(--icon-quantity)) var(--icon-size);
	background-repeat: no-repeat;
	
	background-image: var(--social-icons);
}
.basement .icon_ok > div {
	--icon-position: -1;
	
}
.basement .icon_instagram > div {
	--icon-position: 0;
}
	/*social icons row*/
/* basement */

/* expandable image*/
	/*TODO - add image-scrolling.*/
	/* Style the Image Used to Trigger the Modal */
	.modal_block_previews img {
	  border-radius: 10px;
	  cursor: pointer;
	  transition: 0.3s;
	}

	.modal_block_previews img:hover {opacity: 0.7;}

	
	/* The Modal (background) */
	.modal {
		display: none;
		position: fixed;
		z-index: 9999;
		left: 0;
		top: 0;
		/* padding-top: 5dvh; */
		/* width: 100%;
		height: 100%; */
		width: 100vw;
		height: 100vh;

		overflow: hidden;
		background-color: rgb(0,0,0); /*fallback color*/
		/* background-color: rgba(0,0,0,0.9); */
	}
	
	/* Modal Content (image) */
	.modal-content {
		/* margin: auto; */
		/* height: 80dvh; */
		/* width: 100%; */
		/* margin-top: 3dvh; */
		max-width: 95vw;
		max-height: 78dvh;
		
		display: block;
		top: 8dvh;
		object-fit: contain;
		
		position: relative; 
		/* left: 50%; */
		/* transform: translateX(-50%); */
		/* margin: auto; */
	}
	
	/* Caption of Modal Image (Image Text) - Same Width as the Image */
	#caption, .priceButton, .modal .popup-trigger {
		/* margin: auto; */
		position: fixed;
		width: 95vw;
		text-align: center;
		color: #ccc;
		padding: 3dvh 0;
		font-size: 3dvh;
		left: 50%;
		transform: translateX(-50%);
		
	}
	#caption {
		top: 0;
	}
	.priceButton, .modal .popup-trigger{
		bottom: 1dvh;
		cursor: pointer;
		/* background: var(--text-yellow); */
		width: fit-content;
		border-radius: 24px;
		border: 2px solid var(--bg-white);
		padding: 2dvh 2vw;
		/* color: var(--text-white); */
	}
	/* modal navigation */
	.modal-nav {
		display: block;
		position: fixed;
		z-index: 10000;
		background-color: #ccc;
		color: #333;
		padding: 3dvh;
		text-align: center;
		bottom: 0;
		font-size: 3dvh;
		cursor: pointer;
	}
	.prev {
		left: 0;
	}
	.next {
		right: 0;
	}
	
	/* image grid */
		/* .previews {
			display: grid;
			grid-template-columns: 1fr 1fr 1fr;
		} */
		.expandable_img {
			height: 300px;
			width: 100%;
			object-fit: cover;
		}
	/* image grid */
	
	/* catalogue */
		.catalogue {
			background-color: var(--bg-white);
			/* text-align: center; */
			padding: 20px 0;
		}
		.catalogue, .catalogue a {
			/* color: var(--text-black); */
			/* color: var(--text-white); */
		}
		.picture-card h2 , .picture-card p
		{
			margin: 0;
			/* font-size: var(--font-medium); */
			/* height: 50px; */
		}	
		.picture-card h2 {
			font-size: var(--font-medium);
		}
		.picture-card .item_info {
			padding-top: 20px;
			align-content: center;
		}

		.picture-card .item_info.desc{
			height: 60px;
		}

		.link-button {
			border: 1px solid black;
			width: 50%;
			padding: 5px;
			margin: auto;
			margin-top: 20px;
			border-radius: 5px;
			cursor: pointer;
			text-align: center; 
			transition: 0.3s;
			transition-property: background;
			background-color: var(--color-blue);
		}
		.link-button:hover {
			/* background-color: var(--text-yellow); */
			background-color: #132130;
		}

		.catalogue .previews {
			display: block;
		}
		.catalogue .previews > img {
			display: none;
			border-radius: 0;
		}
		.catalogue .previews > img:first-child {
			display: block;
		}

		.catalogue .picture-cards {
			/* display: grid; */
			/* grid-template-columns: repeat(3, 1fr); */
			display: flex;
			flex-flow: row wrap;
			justify-content: space-evenly;
			column-gap: 20px;
			row-gap: 20px;
			/* grid-auto-rows: minmax(600px, auto); */
		}
		.picture-card {
			border: 1px solid rgba(0, 42, 65, .15);
			box-shadow: 0 3px 6px rgba(0, 42, 65, .15);
			border-radius: 20px 20px 0 0;
			padding: 20px;
			width: 300px;
			max-width: 80vw;
			text-align: center;
			background: white;
		}
		.picture-card img {
			/* width: 100%; */
			/* height: 300px; */
			object-fit: contain;
		}
			/* navigation */
			.catalogue .navigation {
				padding-top: 40px;
				font-size: var(--font-big);
				text-align: center;
			}
			.catalogue .navigation a {
				color: var(--text-black);
				display: inline-block;
				align-content: center;
				--size: calc(49vw/5);
				width: var(--size);
				height: var(--size);
				max-width: 50px;
				max-height: 50px;

				padding: 10px;
				border: 1px solid var(--bg-black);
			}
			.catalogue .navigation a:not(.current_page):hover {
				color: var(--color-vremillion);
				box-shadow: 0px 0px 8px 4px antiquewhite inset;
				-webkit-box-shadow: 0px 0px 8px 4px antiquewhite inset;
				-moz-box-shadow: 0px 0px 8px 4px antiquewhite inset;
			}

			.catalogue .navigation .current_page {
				border-bottom: 5px solid var(--color-vremillion);
				background-color: antiquewhite;
			}
			
			.catalogue .navigation .numbers {
				display: flex;
				flex-flow: wrap;
				justify-content: center;
				row-gap: 10px;
				padding-bottom: 10px;
			}
			/* navigation */

			/* order-popup */
			.order-popup {
				visibility: hidden;
				position: fixed;
				top: 0;
				left: 0;
				z-index: 999999;
				
				width: 100%;
				height: 100%;
				background-color: #000a;
				
			}
			.order-popup > div {
				position: absolute;
				left: 50%;
				top: 20%;
				transform: translate(-50%);

				width: 50%;
				background-color: var(--bg-white);
				padding: 30px;
			}
			.appear_from_top {
				animation-name: appear_from_top;
				animation-duration: 200ms;
				animation-timing-function: ease-in-out;
			}
			@keyframes appear_from_top {
				from {transform: translate(-50%, -150%)};
				to {transform: translate(-50%, 0%)}; 	
			}
			.order-popup .link-button {
				width: fit-content;
				padding: 10px 20px;
				/* background-color: var(--bg-white);
				color: var(--text-black); */
				background-color: var(--color-blue);
				color: var(--text-white);
				text-transform: uppercase;
				
			}
			.order-popup .link-button:hover {
				/* background-color: var(--text-yellow); */
				background-color: #132130;
				color: var(--text-white);
			}
			.order-popup h2 {
				margin: 0;
				margin-bottom: 20px;
				text-align: center;
			}
			.order-popup p {
				text-align: center;
			}
			.order-popup .phone-text {
				color: var(--text-black);
			}
			.order-popup .order-input {
				display: block;
				margin-bottom: 20px;
				width: calc(100% - 40px);
				border: none;
				border-bottom: 4px solid var(--text-white);
				background-color: var(--bg-light-gray);
				color: var(--text-black);
				padding: 20px;
				outline: none;
				transition: 0.3s;
				transition-property: background;
				
			}
			.order-popup input:not(.link-button):focus {
				border-bottom: 4px solid #132130;
			}
			
			@media screen and (max-width: 970px) and (-webkit-max-device-pixel-ratio: 4) {
				.order-popup .phone-text {
					display: block;
				}
				.order-popup > div {
					width: 75%;
				}
			}

			/* order-popup */
			/* catalogue-pracelist-page */
			.catalogue .cover_img {
				object-fit: cover;
				object-position: 55%;
				width: 100%;
				height: 300px;
			}
			.catalogue .info_divider {
				padding: 20px 0;
				margin: 0 -20px;
				box-shadow: 0 5px 6px rgba(0, 42, 65, .15);
				border-radius: 20px;
			}
			/* catalogue-pracelist-page */

		
	/* catalogue */
	
	/* Add animation - Zoom in the Modal */
	.modal-content, #caption {
		animation-name: zoom;
		/* animation-duration: 0.1s; */
	}
	
	@keyframes zoom {
		from {transform:scale(0.9)}
		to {transform:scale(1)}
	}
	
	/* The Close Button */
	.close {
		position: absolute;
		z-index: 99999;
		top: 0;
		right: 5dvh;
		font-size: 9dvh;
		color: #f1f1f1;
		font-weight: bold;
		transition: 0.3s;
	}
	
	.close:hover, .close:focus {
		color: #bbb;
		text-decoration: none;
		cursor: pointer;
	}
	
	/* 100% Image Width on Smaller Screens */
	/* @media only screen and (max-width: 400px) { */
		/* .previews { */
			/* grid-template-columns: 1fr; */
		/* } */
		/* .expandable_img { */
			/* object-fit: scale-down; */
		/* } */
	/* } */
	@media only screen and (min-width: 401px) and (max-width: 565px) {
		.previews {
			grid-template-columns: 1fr 1fr;
		}
	}
	@media only screen and (max-aspect-ratio: 970/1520) {
		.previews {
			display: block;
		}
		.expandable_img {
			/* height: 100%; */
		}
	}
/* expandable image*/

/* carousel */
	.main-carousel {
		/* height: 500px; */
	}
	.main-carousel .carousel-cell {
		/* margin-right: 10px; */
		
	}
	.main-carousel .picture-card {
	}
	.main-carousel .picture-card h2 {
		font-size: var(--font-big);
	}
	/* .main-carousel .flickity-page-dots {
		bottom: -22px;
	}
	.main-carousel .flickity-page-dots .dot {
		height: 4px;
		width: 40px;
		margin: 0;
		border-radius: 0;
	} */
/* carousel */

/* title_with_button */
.title_with_button {
	display: flex;
	justify-content: space-between;
	align-items: center;
	/* padding: 10px; */
}
.title_with_button .link-button {
	width:auto;
	margin-right: 0;
	margin-top: 0;
	margin-bottom: 0;
	padding: 10px;
}
.title_with_button h2 {
	margin: 0;
}
/* title_with_button */

/* hide mobile items in desktop */
.mobile {
	visibility: hidden;
}
/* hide mobile items in desktop */

/* --------------- Desktop --------------- */
/* --------------- Mobile  --------------- */


/* @media screen and (min-width: 641px) and (max-width: 970px) and (-webkit-max-device-pixel-ratio: 4) { */
	/* .mobile { */
		/* visibility: visible; */
	/* } */
/* } */
@media screen and (max-width: 970px) and (-webkit-max-device-pixel-ratio: 4) {
	main {
		padding-bottom: 4dvh;
	}
	.mobile {
		visibility: visible;
	}
	.middle {
		width: var(--mobile_content-width);
		margin: auto;
	}
	/* text_picture_block_horizontal */
	.text_picture_block_horizontal > section {
		display: block;
	}
	/* text_picture_block_horizontal */
	/* button-grid */
	.button_grid > section > a {
		--size: 145px;
	}
	/* button-grid */
	/* card-grid */
	.card_grid {
		--card-img-size: 145px;
		white-space: wrap;
	}
	/* card-grid */
	/* footer_navigation */
	.footer_navigation footer {
		display: flex;
	}
	.footer_navigation footer > div {
		width: 100%;
	}
	/* .footer_navigation footer > div:first-child {
		text-align: center; 
	} */
	/* footer_navigation */
	/* image grid */
	.image_grid > div, .image_grid img { --img_size: 325px;}
	/* image grid */

	.header > nav > * {
		width: 40%;
		text-align: center;
	}
	
}
@media screen and (max-width: 660px) and (-webkit-max-device-pixel-ratio: 4) {
	/* header */
		/* dropdown menu */
		.header .dropdown:nth-child(even) > .dropdown-content {
			right: 5%;
		}
		/* dropdown menu */
	/* header */
}
/* sticky contact */
.sticky_contact {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	text-align: center;
	z-index: 10;
	background: #222;
	
	display: flex;

	column-gap: 5%;
	justify-content: center;
	padding: 2dvh 0; 
	font-size: var(--font-smallest);
	
	
}
.sticky_contact > a {
	color: var(--text-black);
	background: white;
	padding: 2dvh;	
}
.sticky_contact > .whatsapp {
	background: green;
	color: var(--text-white);
}
/* sticky contact */
/* --------------- Mobile  --------------- */