body {margin: 0; padding: 0;     display: flex; justify-content: center;}

.map {
	width: 90%;
	margin: 0 auto; /* Выравнивание по центру */
	position: relative;
	text-align: center;
}

svg {
	z-index: 2;

	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	/*margin-top:  5px;*/

}

.part {
	z-index: 2;

}

.part:hover {
	z-index: 2;

	transition: opacity .2s ease;
	opacity: .5;
	/*cursor: pointer;default*/
}


.cursor1 {
	cursor: url("../images/2_80_resize-4yXtR1g.svg")  21 21, auto;

}


.cursor2 {
	cursor: url("../images/2_80_2_80_resize-pMP1_T0.svg") 21 21, auto;

}

/*##################################################################################    saqartveloo*/

.common-box {
	z-index: 1;
	position: absolute;
	padding: 20px;
	box-sizing: border-box;
	width: 20em;
	height: 400px;
	box-shadow: 0 0 32px 10px #ccc;
	left: 50px;
	bottom: calc(50% - 200px);
	text-align: center;
	font-family: sans-serif;
}

.description {
	display: block;
}

.description img {
	width: 250px;
	height: auto; /* Поддержание пропорций изображения */
	margin-bottom: 20px;
}

.saqartveloo img {
	display: block; /* Делаем изображение блочным элементом */
	margin: 0 auto; /* Отцентровываем изображение по горизонтали */
	width: 250px;
	height: auto; /* Поддержание пропорций изображения */
	margin-bottom: 20px;
}

.responsive-image {
	z-index: 2;
	max-width: 100%;
	height: auto;
	margin-top: 15px;
	/*display: block;*/
}



.lamazo {
	opacity: 0; /* Сделать текст полностью прозрачным */
	transition: opacity 5s 2s; /* Плавное изменение прозрачности в течение 20 секунд с задержкой 3 секунды */
}

/*##################################################################################   # saqartveloo*/


#soundToggleButton {
	position: absolute; /* или fixed, если нужно, чтобы кнопка оставалась на месте при прокрутке */
	top: 50px; /* Расстояние от верха */
	right: 10px; /* Расстояние от правого края */
	width: 30px; /* Ширина кнопки */
	height: 65px; /* Высота кнопки */
	background-image: url("../images/speakers/speaker_off-Try53kY.svg");
	background-color: white;
	border: none;
	cursor: pointer;
	z-index: 5;
}

#soundToggleButton:hover{
	width: 35px; /* Ширина кнопки */
	/*height: 70px; !* Высота кнопки *!*/
}


#soundToggleButton.off {
	background-image: url("../images/speakers/speaker_on-uf76Uuk.svg"); /* Путь к изображению с выключенным звуком */
	background-color: white; /* Установка цвета фона */
	z-index: 5;
}


.custom-text {
	display: block;
	position: absolute;
	top: 7%;
	left: 50%;
	transform: translate(-50%, -50%);
	text-align: center;
	color: black; /* Или любой другой цвет по вашему желанию */
	z-index: 10;
}

.custom-text .georgia-emblem {
	width: 100px; /* Или любой другой размер по вашему желанию */
	margin-bottom: 10px;
}

.custom-text p {
	font-size: 2em; /* Размер шрифта для параграфа */
	line-height: 0.4; /* Меньшее значение уменьшает расстояние между строками */
	font-weight: bold; /* Сделает текст жирным */
}

.custom_text_media {
	display: none;
	/* Удалите position: absolute если он есть, чтобы текст шел в потоке страницы */
	text-align: center; /* Выравнивание текста по центру */
	margin: 20px 0; /* Добавьте верхний и нижний отступы для разделения текста от картинок */
	color: #000; /* Цвет текста, измените на нужный вам */
	font-size: 1.7em;
	font-weight: bold; /* Сделайте текст жирным */
	line-height: 0.7; /* Уменьшите расстояние между строками */
}



/*##########################################################################################       sliding-panel  */

#sliding-panel {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	height: auto;
	max-height: 10%;
	background-color: rgba(200, 200, 200, 0.6);
	overflow: hidden;
}

#panel-handle {
	text-align: center;
	padding: 1px 1px 1px 1px; /* 0 сверху, 30px по бокам, 10px снизу */
	cursor: pointer;
	background-color: rgba(200, 200, 200, 0.8);
	width: 100%; /* Убедись, что занимает всю ширину */
}

#panel-handle:hover {
	background-color: rgba(200, 200, 200, 0.3); /* Цвет фона при наведении */
}

#panel-handle:hover h2 {
	color: white; /* Цвет текста внутри h2 при наведении */
}

#panel-content {
	width: 95%;
	padding-top: 0;
	padding-left: 2.5%;
	padding-right: 2.5%;
	padding-bottom: 10px;
	overflow-y: auto;
	max-height: 0;
}


#sliding-panel.expanded {
	max-height: 100vh;
}

#sliding-panel.expanded #panel-content {
	max-height: calc(100vh - 80px);
}

.map.transparent {
	opacity: 0.5;
}

.news-item {
	background-color: #f9f9f9; /* Выберите нужный цвет */
	padding: 15px;
	border-radius: 10px; /* Закругление углов (если нужно) */
	overflow: hidden; /* Убирает возможные проблемы с float */
	position: relative; /* Для позиционирования даты */

}


.blog-image {
	width: 100%; /* Все изображения растягиваются по ширине */
	max-width: 400px; /* Максимальная ширина */
	height: 250px; /* Фиксированная высота */
	object-fit: cover; /* Обрезает и центрирует изображение */
	border-radius: 5px;
	margin-bottom: 10px;
	border: 4px solid #e4f7e3;
}


.date-info {
	background-color: #e4f7e3;
	position: absolute;
	bottom: -10px;
	right: 15px;
	font-size: 14px;
	color: #777;
	padding: 5px 10px; /* Добавление отступов */
	text-decoration: none; /* Убираем подчеркивание */
	display: inline-block; /* Чтобы ссылка занимала только нужную ширину */
}



.date-info:hover {
	cursor: pointer;
}


/*.date-info span:hover {*/
/*	cursor: pointer;*/
/*}*/

p {
	position: relative; /* Добавляем позиционирование */
}

.date-info:hover {
	background-color: #a8e0a8; /* Изменение фона при наведении */
	color: #333; /* Цвет текста при наведении */
}

.news-item::after {
	content: "";
	position: absolute;
	bottom: -70px; /* Располагаем псевдоэлемент внизу блока */
	left: 0;
	width: 100%;
	height: 70px; /* Высота промежутка */
	background-color: transparent; /* Прозрачный фон */
	z-index: -1; /* Помещаем псевдоэлемент под блок */
}

.gap {
	height: 170px; /* Высота промежутка */
	background-color: transparent; /* Прозрачный фон */
	width: 100%; /* Ширина 100% */
}


.blog-title {
	font-size: 20px;
	font-weight: bold;
}
.float-left {
	float: left;
	margin-right: 40px;
}

.news-item::after {
	content: "";
	display: table;
	clear: both;
}

.darkgreen {
	color: darkgreen; /* Цвет иконок */
}

body {
	font-family: 'Sylfaen', serif;
	font-size: 18px;
	line-height: 1.5;
}

h1 {
	font-size: 30px;
	font-weight: bold;
}

h2 {
	font-size: 24px;
	font-weight: bold;
}

h3 {
	font-size: 22px;
	font-weight: bold;
}

h4 {
	font-size: 20px;
	font-weight: bold;
}

.news-item h2 {
	background-color: #e4f7e3;
	text-align: center; /* Центрируем заголовок */
	margin-top: 1px;
}



.image-container {
	position: relative;
	display: inline-block;
}

.image-container .title {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	background-color: rgba(0, 0, 0, 0.7);
	color: white;
	text-align: center;
	padding: 5px;
	opacity: 0;
	transition: opacity 0.3s ease;
}

.image-container:hover .title {
	opacity: 1;
}


.custom_text_media {
	text-align: center;
	margin-top: 20px;
}


/*.annts {*/
/*	background-color: #a8e0a8*/
/*}*/

.annts {
	background-color: #a8e0a8;
	text-decoration: none;
	color: inherit;
	font-weight: bold;
	border-radius: 3px;
	cursor: pointer; /* делает курсор "рукой" при наведении */
	transition: background-color 0.3s ease, color 0.3s ease; /* плавность */
}

.annts:hover {
	background-color: #7ccc7c; /* чуть темнее при наведении */
	color: #000; /* если хочешь смену цвета текста */
	text-decoration: underline; /* или можешь оставить как есть */
}


.tex {
	font-style: italic;
}

.menu-container {
	position: absolute;
	top: 65px;
	right: 60px;
	z-index: 1000;
}

.menu-button {
	background-color: darkgreen;
	border: none;
	border-radius: 7px; /* Закругление углов (если нужно) */
	color: white;
	padding: 7px 20px;
	text-align: center;
	text-decoration: none;
	font-size: 20px;
	cursor: pointer;
}

.menu-button:hover {
	margin-right: -10px;}

.menu-dropdown {
	display: none;
	position: absolute;
	top: 45px;
	right: 0;
	background-color: white;
	border: 1px solid #ccc;
	padding: 7px;
}

.menu-item_drop {
	padding: 5px 15px;
	text-decoration: none;
	color: #333;
	display: block;
}

.menu-item_drop:hover {
	background-color: #d0d0d0;
}

.menu-dropdown.show {
	display: block;
}



#sliding-panel {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	height: auto;
	max-height: 7%;
	background-color: rgba(200, 200, 200, 0.6);
	overflow: hidden;
	transition: max-height 0.7s ease-in-out;
}

#panel-content {
	height: auto;
	max-height: 0;
	transition: max-height 0.7s ease-in-out;
}

.map {
	transition: opacity 0.7s ease-in-out;
}

/*flash-message*/
.flash-message{
	position: fixed;
	top: 45%;
    left: 50%;
	transform:translateX(-50%) translateY(-10px);
	z-index:1000;
	padding:15px 25px;
	max-width:90%;
	width:fit-content;
	border-radius:8px;
	font-size:16px;
	font-weight:bold;
	box-shadow:0 4px 12px rgba(0,0,0,.2);
	opacity:0;
	animation:flashIn .4s ease-out forwards;
	text-align:center;          /* центрируем текст */
 }

.coming-title {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}
.domain-icon {
	display: inline-block;
	vertical-align: middle;
}

.flash-message.success {
	background-color: #e6ffe6;
	color: #2e7d32;
	border: 1px solid #2e7d32;
}

.flash-message.error {
	background-color: #ffe6e6;
	color: #c62828;
	border: 1px solid #c62828;
}

@keyframes flashIn {
	from {
		opacity: 0;
		transform: translateX(-50%) translateY(-10px);
	}
	to {
		opacity: 1;
		transform: translateX(-50%) translateY(0);
	}
}
/*#flash-message*/

/*templates/includes/map_svg.html.twig*/
.part {
	/*fill: #476937;*/
	transition: fill 0.3s;
}
.part:hover {
	fill: #3a5a2b;
}

.region_h1{
	font-size: 1.5em; font-weight: bolder;
}
/*  #templates/includes/map_svg.html.twig*/

.interactive-text {
	font-family: Arial, sans-serif;
	font-size: 300px;
	font-weight: 900;
	fill: red;
	text-anchor: middle;
	dominant-baseline: middle;
	stroke: black;
	stroke-width: 5;
}


/*
window.setTimeout = () => {};
*/