html {
	font-size: 100%; /*1vw;*/
	font-family: Calibri, sans-serif;
	background: linear-gradient(to bottom, #808080, #d3d3d3, #e0e0e0, #d3d3d3, #808080);
	background-attachment: fixed;
	color: #555;
	scroll-behavior: smooth;
	filter: brightness(101%);
}

body {
	width: auto;
	max-width: 1900px;
	min-height: 100dvh; /*100vh;*/
	margin: 0px auto;
	text-align: left;
	overflow: visible;
	background: #fff;
	display: flex;
	flex-direction: column;
}

.head {
	background-image: url(img/head_wide.png);
	z-index: 99;
	height: 182px;
}





/*---- !!! STICKY MENU !!! -----*/

.sticky_nav {
	top: 0;
	position: -webkit-sticky;
	position: sticky;
	background-color: transparent; /*#fff;*/
	z-index: 15;
}

/*---- !!! STICKY MENU !!! -----*/





/*---- !!! MENU !!! -----*/

.topnav, .topnav_theme {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-content: space-around;
	background: linear-gradient(to right, #eee5dd, #f2ebe5);
	overflow: hidden;
}

.topnav_empty_left {
	flex-grow: 0;
	width: 135px;
	font-size: 1.25rem; /*1.25rem - 20px*/
	background-color: #ddc8b8;
	padding: 10px 0px;
	border-radius: 0px 0px 0px 50px;
}

.topnav_empty_right {
	flex-grow: 0;
	width: 135px;
	font-size: 1.25rem; /*1.25rem - 20px*/
	background-color: #f9f6f1;
	padding: 10px 0px;
	border-radius: 0px 0px 50px 0px;
}

.topnav_theme .topnav_empty_right {
	flex-grow: 0;
	width: 135px;
	font-size: 1.25rem; /*1.25rem - 20px*/
	background-color: #ddc8b8;
	padding: 10px 0px;
	border-radius: 0px 0px 50px 0px;
}

.topnav .active, .topnav_theme .active {
	flex-grow: 0;
	background-color: #ddc8b8;
	color: #595652;
	padding: 10px 40px;
}

.topnav .active:hover, .topnav_theme .active:hover {
	background-color: #eee5dd;
	color: #555;
}

.topnav_about, .topnav_history {
	border-left: 1px solid #dac2aa;
}

.topnav_publ {
	border-left: 1px solid #dac2aa;
	border-right: 1px solid #dac2aa;
}

.topnav_theme .topnav_about, .topnav_theme .topnav_history {
	border-left: 1px solid #c19b78;
}

.topnav_theme .topnav_publ {
	border-left: 1px solid #c19b78;
	border-right: 1px solid #c19b78;
}

.topnav a {
	float: left;
	display: block;
	flex-grow: 2;
	background-color: #f9f6f1;
	color: #595652;
	font-weight: 500;
	text-align: center;
	padding: 10px 16px;
	text-decoration: none;
	font-size: 1.25rem; /*1.25rem - 20px*/
	transition-property: background-color; /* What to animate */
	transition-duration: 0.1s; /* How long it takes */
	transition-timing-function: ease-in-out; /* How it speeds up/slows down */
}

.topnav_theme a {
	float: left;
	display: block;
	flex-grow: 2;
	background-color: #ddc8b8;
	color: #595652;
	font-weight: 500;
	text-align: center;
	padding: 10px 16px;
	text-decoration: none;
	font-size: 1.25rem; /*1.25rem - 20px*/
	transition-property: background-color; /* What to animate */
	transition-duration: 0.1s; /* How long it takes */
	transition-timing-function: ease-in-out; /* How it speeds up/slows down */
}

.topnav .icon, .topnav_theme .icon {
	display: none;
}

.dropdown {
	overflow: hidden;
	flex-grow: 2;
	background-color: #f9f6f1;
}

.topnav_theme .dropdown {
	overflow: hidden;
	flex-grow: 2;
	background-color: #ddc8b8;
}

.dropdown .dropbtn {
	font-family: inherit;	
	font-size: 1.25rem; /*1.25rem - 20px*/
	border: none;
	outline: none;
	background-color: inherit;	
	color: #595652;
	padding: 10px 16px;
	margin: 0;
	transition-property: background-color; /* What to animate */
	transition-duration: 0.1s; /* How long it takes */
	transition-timing-function: ease-in-out; /* How it speeds up/slows down */ 
	width: 100%;
}

.dropdown-content {
	display: none;
	position: absolute;
	background-color: #dac2aa;
	min-width: 160px;
	z-index: 1;
}

.dropdown-content a {
	float: none;
	display: block;	
	color: *#595652;
	padding: 10px 16px;
	background-color: #eee5dd;
	border-bottom: 1px solid #dac2aa;
	text-decoration: none;
	text-align: left;
}

.topnav a:hover, .topnav_theme a:hover, .dropdown:hover .dropbtn {
	background-color: #eee5dd;
	color: #555;
	transition-property: background-color; /* What to animate */
	transition-duration: 0.1s; /* How long it takes */
	transition-timing-function: ease-in-out; /* How it speeds up/slows down */
}

.dropdown-content a:hover {
	background-color: #f9f6f1;
	color: #555;
}

.dropdown:hover .dropdown-content {
	display: block;
}


@media screen and (max-width: 1200px) { /* !!! Не переносити стилі для меню вниз до решти стилів для менших екранів, бо інакше вони можуть погано спрацьовувати !!! */
	.topnav_empty_left, .topnav_empty_right {
		display: none;
	}
	.topnav .active, .topnav_theme .active {
		flex-grow: 2;
		padding: 10px 16px;
	}
}

@media screen and (max-width: 1024px) { /* !!! Не переносити стилі для меню вниз до решти стилів для менших екранів, бо інакше вони можуть погано спрацьовувати !!! */
	.topnav_empty_left, .topnav_empty_right {
		display: none;
	}
	.topnav .active, .topnav_theme .active {
		flex-grow: 2;
		padding: 10px 16px;
	}
}

@media screen and (max-width: 890px /*749px*/) {			
	.topnav a:not(.active), .topnav_theme a:not(.active), .dropdown .dropbtn {	/*.topnav a:not(:first-child), .dropdown .dropbtn */
		display: none;
	}
	.topnav .active, .topnav_theme .active {
		flex-grow: 0;
		font-weight: 500;
	}
	.topnav .active:hover, .topnav_theme .active:hover {
		background-color: #f9f6f1;
	}
	.topnav_theme a {
		background-color: #f9f6f1;
	}
	.topnav_theme a:hover {
		background-color: #eee5dd;
	}
	.topnav a.icon, .topnav_theme a.icon {
		float: right;
		display: block;
		flex-grow: 0;
		background-color: #ddc8b8;
	}
	.topnav a.icon:hover, .topnav_theme a.icon:hover {
		background-color: #f9f6f1;
		padding-bottom: 9px;
	}
	.topnav, .topnav_theme {
		background-color: #eee5dd;
	}
	.topnav .dropdown, .topnav_theme .dropdown, .dropdown-content a {
		background-color: #eee5dd;
	}
	.dropdown-content a:hover {
		background-color: #f9f6f1;
	}
	.topnav.responsive, .topnav_theme.responsive {
		/*position: relative;*/
		display: flex;
		flex-direction: column;
	}
	.topnav.responsive a.active, .topnav_theme.responsive a.active {
		font-weight: 500;
	}
	.topnav.responsive .icon, .topnav_theme.responsive .icon {
		position: absolute;
		right: 0;
		top: 0;
		padding-bottom: 9px;
	}
	.topnav.responsive a, .topnav_theme.responsive a {
		float: none;
		display: block;
		text-align: left;
		border-left: 0px solid transparent;
		border-right: 0px solid transparent;
		font-weight: 300;
	}
	.topnav.responsive .dropdown, .topnav_theme.responsive .dropdown {
		float: none;
	}
	.topnav.responsive .dropdown-content, .topnav_theme.responsive .dropdown-content {
		position: relative;
	}
	.topnav.responsive .dropdown .dropbtn, .topnav_theme.responsive .dropdown .dropbtn {
		display: block;
		width: 100%;
		text-align: left;
		border-left: 0px solid transparent;
	}
}

/*---- !!! MENU !!! -----*/





/*---- !!! THEME HEADER !!! -----*/

.header {
	display: flex;
	flex-direction: row;
	flex-flow: row wrap;/**/
	justify-content: space-between;
	align-content: space-around;
	background-color: #f9f6f1;
	padding: 0px 0px;
	box-shadow: 0px 2px 5px -3px rgba(0,0,0,0.2);
	overflow: hidden;
	z-Index: 15;
}

.header_empty_left {
	flex-grow: 0;
	width: 135px;
	background-color: #eee5dd;
}

.header_empty_right {
	flex-grow: 0;
	width: 135px;
	background-color: #f2ebe5;
}

.header_left {
	display: flex;
	flex-grow: 0;
	justify-content: center;
	align-items: center;
	background-color: #f9f6f1;
	padding: 0.8em 0px;
}

.header_left_img {
	width: 55%;
}

.header .logo {
	display: flex;
	flex-grow: 4;
	align-items: center;
	font-size: 1.438rem; /* 1.438rem=23px */
	font-weight: 600;
	color: #c19b78;
	text-align: left;
	padding: 0.8em 40px 0.8em 0px;
	text-decoration: none;
}

.header-right {
	display: flex;
	flex-grow: 1;
	justify-content: space-around; /*space-between;*/
	align-items: center;
	float: right;
}

.header a {
	display: flex;
	justify-content: space-between;
	align-items: center;
	background-color: #f9f6f1;
	color: #595652;
	text-align: center;
	padding: 0.8em 16px;
	text-decoration: none; /*underlined;*/
	font-size: 1.25rem; /*1.25rem - 20px*/
	font-weight: 500; /*600;*/ /*bold;*/
	transition-property: background-color; /* What to animate */
	transition-duration: 0.2s; /* How long it takes */
	transition-timing-function: ease-in-out; /* How it speeds up/slows down */
	border-bottom: 1px solid transparent;
}

.header a:hover {
	text-decoration: underline solid #ddc8b8;
	text-underline-offset: 10px;
}


@media screen and (max-width: 1200px) { /* !!! Не переносити стилі для меню вниз до решти стилів для менших екранів, бо інакше вони можуть погано спрацьовувати !!! */
	.header_empty_left, .header_empty_right {
		display: none;
	}
}

@media screen and (max-width: 1024px) { /* !!! Не переносити стилі для меню вниз до решти стилів для менших екранів, бо інакше вони можуть погано спрацьовувати !!! */
	.header_empty_left, .header_empty_right {
		display: none;
	}
}

@media screen and (max-width: 680px) { /* !!! Не переносити стилі для меню вниз до решти стилів для менших екранів, бо інакше вони можуть погано спрацьовувати !!! */
	.header-right {
		justify-content: stretch;
	}
}

/*---- !!! THEME HEADER !!! -----*/





/*---- !!! СТИЛІ ДЛЯ БОКІВ !!! -----*/

.main_sides {
	display: flex;
	flex-direction: row;
	flex: 1 0 auto;
}

.main_sides_left, .main_sides_right {
	display: flex;
	flex-direction: column;
	flex: 1;
	align-content: stretch;
}

.main_sides_left_top {
	display: flex;
	flex-grow: 3;
	width: 135px;
	background: linear-gradient(to bottom, #eee5dd, #eee5dd);
	font-size: 1.25rem;
}

.main_sides_left_bottom {
	display: flex;
	/*flex-grow: 0;*/ /* закоментовано, бо є position: fixed; і bottom: 0; */
	width: 135px;
	position: fixed;
	bottom: 0;
	z-index: 10;
}

.main_sides_right_top {
	display: flex;
	flex-grow: 3;
	width: 135px;
	background: linear-gradient(to bottom, #f2ebe5, #f2ebe5);
	font-size: 1.25rem;
}

.main_sides_right_bottom {
	display: flex;
	/*flex-grow: 0;*/ /* закоментовано, бо є position: fixed; і bottom: 0; */
	width: 135px;
	position: fixed;
	bottom: 0;
	z-index: 10;
}

/*---- !!! СТИЛІ ДЛЯ БОКІВ !!! -----*/




/*---- !!! СТИЛЬ ДЛЯ СТОРІНКИ ПРО ПРОЄКТ !!! -----*/

.content_about {
	font-size: 1.2rem; /*100%;*/
	text-align: justify;
	padding: 1.5% 3.5%;
	width: 99%; 
}

/*---- !!! СТИЛЬ ДЛЯ СТОРІНКИ ПРО ПРОЄКТ !!! -----*/





/*---- !!! СТИЛІ ДЛЯ СТОРІНКИ З ПЕРЕЛІКОМ ТЕМАТИЧНИХ РОЗДІЛІВ !!! -----*/

.main_big_content {
	display: flex;
	flex-flow: row wrap;
	justify-content: center; /*space-evenly;*/ /*space-between;*/ /*space-around;*/
	align-content: center; /*space-around;*/ /*stretch|center|flex-start|flex-end|space-between|space-around*/
	align-items: flex-start; /*stretch;*/ /*center;*/
	align-self: start;
	margin-top: 2em;
	margin-bottom: 2em;
}

.main_big_chapter {
	align-items: top;
	justify-content: center;
	text-align: center;
	background-color: white;
	padding: 8px;
	width: 20%;
	min-width: 250px;
	border-radius: 10px;
	overflow: visible;
}

.main_big_chapter_title a {
	text-decoration: none;
	font-size: 1.1rem; /*1.25rem;*/
	color: #444; /*#818181;*/
}

.main_big_chapter_title a:hover {
	text-decoration: underline;
	color: #b67a2a;
}

.main_big_chapter_icon {
	display: inline-block;
	margin-bottom: 10px;
	background: 
		linear-gradient(#fff 0 0) padding-box, /*це колір тла*/
		linear-gradient(to right bottom, #fff) border-box;	/*linear-gradient(to right bottom, #e6e6e6, #ddd, #f0f0f0, #ddd, #f0f0f0, #ddd, #e6e6e6) border-box;*/
	padding: 6px 3px 3px 3px;
	border: 2px solid transparent;
	border-radius: 15px;
	transition: transform .7s;
}

.main_big_chapter_icon:hover {
	display: inline-block;
	background: 
		linear-gradient(#fff 0 0) padding-box, /*це колір тла*/
		linear-gradient(to right bottom, #e6e6e6, #ddd, #f0f0f0, #ddd, #f0f0f0, #ddd, #e6e6e6) border-box;	/*linear-gradient(to right bottom, #ddd, #b67a2a) border-box;*/
	padding: 6px 3px 3px 3px;
	border: 2px solid transparent;
	border-radius: 15px;
	transition: transform .7s;
	-ms-transform: scale(1.1); /* IE 9 */
	-webkit-transform: scale(1.1); /* Safari 3-8 */
	transform: scale(1.1);
	z-index: 9; /*99*/
}

.chapter_icon_img {
	width: 95%;
}

.chapter_icon_img2 {
	width: 70%;
}

/*---- !!! СТИЛІ ДЛЯ СТОРІНКИ З ПЕРЕЛІКОМ ТЕМАТИЧНИХ РОЗДІЛІВ !!! -----*/





/*---- !!! To the Top of Page !!! -----*/

/* основа кнопки вверх */
.scrollToTop {
	display: none;
	position: fixed; /* фіксоване положення */
	bottom: 20px; /* відстань від нижнього краю */
	right: 30px; /* відстань від правого краю */
	width: 45px; /* ширина */
	height: 45px; /* висота */
	border: 1px solid #f4f4f4;
	border-radius: 10px; /* 50%; - фігура круга */
	background: #253d55; /*#ebc2af;*/ /*#e0c2a4; /*#bb9b7c;*/ /*#b67a2a;*/ /* колір фону */
	cursor: pointer; /* курсор рука */
	transition: 0.4s; /* плавний рух */
	margin: 10px;
	box-shadow: 3px 3px 3px 3px rgba(0, 0, 0, .3);
	z-index: 100; /* зверху решти елементів */
}

/* стрілка всередині кнопки вверх */
.scrollToTop:after {
	content: "";
	width: 12px;
	height: 12px;
	border-top: 2px solid #fff; /* верхня рамка */
	border-left: 2px solid #fff; /* ліва рамка */
	transform: rotate(45deg); /* поворот */
	position: absolute; /* положення відносно круга */
	top: 7px;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto; /* вирівнювання по центру */
}

.scrollToTop:hover {
	background: #bb9b7c; /*#555;*/
	transition: 0.5s; /* плавний рух */
}

/*---- !!! To the Top of Page !!! -----*/





/*---- !!! СТИЛІ ДЛЯ СТОРІНОК ТЕМАТИЧНИХ РОЗДІЛІВ !!! -----*/

div.content {
	font-size: 1rem; /*100%;*/
	text-align: center;
	width: 99%;
}

#theme_chapter {
	text-align: left;
	text-transform: uppercase;
	font-weight: 600;
	color: #b67a2a;
	margin: 3% 0 0 0;
	letter-spacing: 1px;
	padding-left: 1.5em;
}

#indicators, #graph, #tabl  {
	scroll-margin-top: 150px; /* !!! Це задано для того, щоб при натисканні на якорі сторінка не скакала на сам верх !!! */
}

.theme_chapter_inner {
	text-align: center;
	margin: 0 auto;
	position: relative;
}





/*---- !!! СТИЛІ ДЛЯ ІНДИКАТОРІВ В ТЕМАТИЧНИХ РОЗДІЛАХ !!! -----*/

/*---- !!!
color1 - Населення, Освіта, Охорона здоров'я, Житлове будівництво
color2 - Рослинництво
color3 - Тваринництво, Транспорт
color4 - Культура
!!! -----*/

/*---- !!! ind_ind !!! -----*/

.ind_ind {
	display: flex;
	flex-flow: row wrap;
	justify-content: center; /*space-evenly;*/ /*space-around;*/
	align-content: space-around;
	align-items: stretch; /*flex-start;*/ /*top;*/ /*center;*/
	padding: 0 2.5%;
	margin: 1.5% auto;
}

.ind_chapter {
	display: flex;
	align-items: stretch; /*flex-start;*/ /*top;*/
	justify-content: center;
	text-align: center;
	margin: 15px 1% 15px 1%;
	width: 20%;
	min-width: 320px;
	height: 250px;
}

.ind_chapter_icon_color1 {
	display: flex; /*inline-block;*/
	flex-flow: column wrap;
	align-items: center; /*stretch;*/ /*flex-start;*/ /*top;*/ /*baseline;*/
	justify-content: space-between; /*flex-end;*/
	width: 85%;
	background:
		linear-gradient(#fff 0 0) padding-box,  /*це колір тла*/	/*Tints of #605379	#6f6486 #7f7593 #8f86a1 #9f97ae #afa9bc #bfbac9 #cfcbd6 #dfdce4 #efedf1 #ffffff*/
		linear-gradient(to right bottom, #ddd, #afa9bc) border-box;	/*linear-gradient(to right bottom, #ddd, #756593, #e69c2a, #b67a2a) border-box;*/
	border: 1px solid transparent;
	border-radius: 30px;
	transition: transform .5s;
}

.ind_chapter_icon_color2 {
	display: flex; /*inline-block;*/
	flex-flow: column wrap;
	align-items: center; /*stretch;*/ /*flex-start;*/ /*top;*/ /*baseline;*/
	justify-content: space-between; /*flex-end;*/
	width: 85%;
	background:
		linear-gradient(#fff 0 0) padding-box, /*це колір тла*/	/*Tints of #386641	#4b7554	#5f8466	#73937a	#87a38d	#9bb2a0	#afc1b3	#c3d1c6	#d7e0d9	#ebefec	#ffffff*/
		linear-gradient(to right bottom, #ddd, #9bb2a0) border-box;	/*linear-gradient(to right bottom, #ddd, #9cc9a5, #e69c2a, #b67a2a) border-box;*/
	border: 1px solid transparent;
	border-radius: 30px;
	transition: transform .5s;
}

.ind_chapter_icon_color3 {
	display: flex; /*inline-block;*/
	flex-flow: column wrap;
	align-items: center; /*stretch;*/ /*flex-start;*/ /*top;*/ /*baseline;*/
	justify-content: space-between; /*flex-end;*/
	width: 85%;
	background:
		linear-gradient(#fff 0 0) padding-box, /*це колір тла*/	/*Tints of #22517d	#38628a	#4e7397	#6485a4	#7a96b1	#90a8be	#a6b9cb	#bccad8	#d2dce5	#e8edf2	#ffffff*/
		linear-gradient(to right bottom, #ddd, #90a8be) border-box;	/*linear-gradient(to right bottom, #ddd, #6485a4, #e69c2a, #b67a2a) border-box;*/
	border: 1px solid transparent;
	border-radius: 30px;
	transition: transform .5s;
}

.ind_chapter_icon_color4 {
	display: flex; /*inline-block;*/
	flex-flow: column wrap;
	align-items: center; /*stretch;*/ /*flex-start;*/ /*top;*/ /*baseline;*/
	justify-content: space-between; /*flex-end;*/
	width: 85%;
	background:
		linear-gradient(#fff 0 0) padding-box, /*це колір тла*/	/*Tints of #3287ac	#4693b4	#5a9fbc	#6fabc4	#84b7cd	#98c3d5	#adcfdd	#c1dbe6	#d6e7ee	#eaf3f6	#ffffff*/
		linear-gradient(to right bottom, #ddd, #98c3d5) border-box;	/*linear-gradient(to right bottom, #ddd, #6485a4, #e69c2a, #b67a2a) border-box;*/
	border: 1px solid transparent;
	border-radius: 30px;
	transition: transform .5s;
}

.ind_chapter_icon_color1:hover, .ind_chapter_icon_color2:hover, .ind_chapter_icon_color3:hover, .ind_chapter_icon_color4:hover {
	-ms-transform: scale(1.1); /* IE 9 */
	-webkit-transform: scale(1.1); /* Safari 3-8 */
	transform: scale(1.1);
	z-index: 9; /*99*/
}

.ind_chapter_title {
	/*display: inline-block;*/
	color: #e69c2a;
	font-size: 1.1rem;
	font-weight: 600;
	width: 90%;
	text-align: center;
	margin-top: 15px;
	margin-bottom: 5px;
}

.ind_chapter_title1_color1 {
	color: #605379;
	font-size: 1.1rem;
	font-weight: normal;
}

.ind_chapter_title1_color2 {
	color: #386641;
	font-size: 1.1rem;
	font-weight: normal;
}

.ind_chapter_title1_color3 {
	color: #22517d;
	font-size: 1.1rem;
	font-weight: normal;
}

.ind_chapter_title1_color4 {
	color: #286c89;
	font-size: 1.1rem;
	font-weight: normal;
}

.ind_chapter_group {
	display: flex;
	flex-flow: column wrap;
	align-items: center;
	width: 100%;
	text-align: center;
}

.ind_chapter_figure_color1 {
	/*display: inline-block;*/
	color: #605379;
	font-size: 1.5rem;
	width: 90%;
	text-align: center;
	margin-bottom: 15px;
}

.ind_chapter_figure_color2 {
	/*display: inline-block;*/
	color: #386641;
	font-size: 1.5rem;
	width: 90%;
	text-align: center;
	margin-bottom: 15px;
}

.ind_chapter_figure_color3 {
	/*display: inline-block;*/
	color: #22517d;
	font-size: 1.5rem;
	width: 90%;
	text-align: center;
	margin-bottom: 15px;
}

.ind_chapter_figure_color4 {
	/*display: inline-block;*/
	color: #286c89;
	font-size: 1.5rem;
	width: 90%;
	text-align: center;
	margin-bottom: 15px;
}

.ind_chapter_figure1_color1 {
	color: #605379;
	font-size: 2.1rem;
	font-weight: 600;
}

.ind_chapter_figure1_color2 {
	color: #386641;
	font-size: 2.1rem;
	font-weight: 600;
}

.ind_chapter_figure1_color3 {
	color: #22517d;
	font-size: 2.1rem;
	font-weight: 600;
}

.ind_chapter_figure1_color4 {
	color: #286c89;
	font-size: 2.1rem;
	font-weight: 600;
}

.ind_chapter_comparison_color1 {
	/*display: inline-block;*/
	color: #605379;
	font-size: 1.1rem;
	width: 90%;
	text-align: center;
	margin-bottom: 3px;
}

.ind_chapter_comparison_color2 {
	/*display: inline-block;*/
	color: #386641;
	font-size: 1.1rem;
	width: 90%;
	text-align: center;
	margin-bottom: 3px;
}

.ind_chapter_comparison_color3 {
	/*display: inline-block;*/
	color: #22517d;
	font-size: 1.1rem;
	width: 90%;
	text-align: center;
	margin-bottom: 3px;
}

.ind_chapter_comparison_color4 {
	/*display: inline-block;*/
	color: #286c89;
	font-size: 1.1rem;
	width: 90%;
	text-align: center;
	margin-bottom: 3px;
}

.ind_chapter_change_color1 {
	/*display: inline-block;*/
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	background-color: #8f86a1; /*Tints of #605379	#6f6486 #7f7593 #8f86a1 #9f97ae #afa9bc #bfbac9 #cfcbd6 #dfdce4 #efedf1 #ffffff*/
	color: white;
	font-size: 1.5rem;
	width: 65%;
	padding: 0px 5px 0px 0px;
	margin: 0 auto 15px auto;
}

.ind_chapter_change_color2 {
	/*display: inline-block;*/
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	background-color: #73937a; /*#386641;*/	/*Tints of #386641	#4b7554	#5f8466	#73937a	#87a38d	#9bb2a0	#afc1b3	#c3d1c6	#d7e0d9	#ebefec	#ffffff*/
	color: white;
	font-size: 1.5rem;
	width: 65%;
	padding: 0px 5px 0px 0px;
	margin: 0 auto 15px auto;
}

.ind_chapter_change_color3 {
	/*display: inline-block;*/
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	background-color: #7a96b1; /*#22517d;*/	/*Tints of #22517d	#38628a	#4e7397	#6485a4	#7a96b1	#90a8be	#a6b9cb	#bccad8	#d2dce5	#e8edf2	#ffffff*/
	color: white;
	font-size: 1.5rem;
	width: 65%;
	padding: 0px 5px 0px 0px;
	margin: 0 auto 15px auto;
}

.ind_chapter_change_color4 {
	/*display: inline-block;*/
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	background-color: #6fabc4; /*#3287ac;*/	/*Tints of #3287ac	#4693b4	#5a9fbc	#6fabc4	#84b7cd	#98c3d5	#adcfdd	#c1dbe6	#d6e7ee	#eaf3f6	#ffffff*/
	color: white;
	font-size: 1.5rem;
	width: 65%;
	padding: 0px 5px 0px 0px;
	margin: 0 auto 15px auto;
}

.triangle {
	font-size: 2.2rem;
	color: #e8a53f; /*#e69c2a;*/ /*Tints of #e69c2a	#e8a53f	#ebaf54	#edb969	#f0c37f	#f2cd94	#f5d7a9	#f7e1bf	#faebd4	#fcf5e9	#ffffff*/
}

/*---- !!! ind_ind !!! -----*/





/*---- !!! СТИЛІ ДЛЯ ГРАФІКІВ В ТЕМАТИЧНИХ РОЗДІЛАХ !!! -----*/

/*---- !!!
color1 - Населення, Освіта, Охорона здоров'я, Житлове будівництво
color2 - Рослинництво
color3 - Тваринництво, Транспорт
color4 - Культура
!!! -----*/

/*---- !!! graph_graph !!! -----*/

.graph_graph {
	display: flex;
	flex-flow: row wrap;
	justify-content: center; /*space-evenly;*/ /*space-around;*/
	align-content: space-around;
	align-items: stretch; /*flex-start;*/ /*top;*/ /*center;*/
	padding: 0 2.5%;
	margin: 1.5% auto;
}

#container_color1 {
	display: flex;
	flex-flow: row wrap;
	flex: 0 1 38%;
	justify-content: center;
	align-items: stretch;
	align-content: space-around;
	margin: 15px 2% 15px 2%;
	padding: 1% 15px 1% 15px;
	background:
		linear-gradient(#fff 0 0) padding-box,  /*це колір тла*/	/*Tints of #605379	#6f6486 #7f7593 #8f86a1 #9f97ae #afa9bc #bfbac9 #cfcbd6 #dfdce4 #efedf1 #ffffff*/
		linear-gradient(to right bottom, #ddd, #afa9bc) border-box;	/*linear-gradient(to right bottom, #ddd, #756593, #e69c2a, #b67a2a) border-box;*/
	border: 1px solid transparent;
	border-radius: 30px;
}

#container_color2 {
	display: flex;
	flex-flow: row wrap;
	flex: 0 1 38%;
	justify-content: center;
	align-items: stretch;
	align-content: space-around;
	margin: 15px 2% 15px 2%;
	padding: 1% 15px 1% 15px;
	background:
		linear-gradient(#fff 0 0) padding-box, /*це колір тла*/	/*Tints of #386641	#4b7554	#5f8466	#73937a	#87a38d	#9bb2a0	#afc1b3	#c3d1c6	#d7e0d9	#ebefec	#ffffff*/
		linear-gradient(to right bottom, #ddd, #9bb2a0) border-box;	/*linear-gradient(to right bottom, #ddd, #9cc9a5, #e69c2a, #b67a2a) border-box;*/
	border: 1px solid transparent;
	border-radius: 30px;
}

#container_color3 {
	display: flex;
	flex-flow: row wrap;
	flex: 0 1 38%;
	justify-content: center;
	align-items: stretch;
	align-content: space-around;
	margin: 15px 2% 15px 2%;
	padding: 1% 15px 1% 15px;
	background:
		linear-gradient(#fff 0 0) padding-box, /*це колір тла*/	/*Tints of #22517d	#38628a	#4e7397	#6485a4	#7a96b1	#90a8be	#a6b9cb	#bccad8	#d2dce5	#e8edf2	#ffffff*/
		linear-gradient(to right bottom, #ddd, #90a8be) border-box;	/*linear-gradient(to right bottom, #ddd, #6485a4, #e69c2a, #b67a2a) border-box;*/
	border: 1px solid transparent;
	border-radius: 30px;
}

#container_color4 {
	display: flex;
	flex-flow: row wrap;
	flex: 0 1 38%;
	justify-content: center;
	align-items: stretch;
	align-content: space-around;
	margin: 15px 2% 15px 2%;
	padding: 1% 15px 1% 15px;
	background:
		linear-gradient(#fff 0 0) padding-box, /*це колір тла*/	/*Tints of #3287ac	#4693b4	#5a9fbc	#6fabc4	#84b7cd	#98c3d5	#adcfdd	#c1dbe6	#d6e7ee	#eaf3f6	#ffffff*/
		linear-gradient(to right bottom, #ddd, #98c3d5) border-box;	/*linear-gradient(to right bottom, #ddd, #6485a4, #e69c2a, #b67a2a) border-box;*/
	border: 1px solid transparent;
	border-radius: 30px;
}

/*---- !!! graph_graph !!! -----*/





/*---- !!! СТИЛІ ДЛЯ ТАБЛИЦЬ В ТЕМАТИЧНИХ РОЗДІЛАХ !!! -----*/

/*---- !!! tabl_tabl !!! -----*/

.tabl_tabl {
	text-align: center;
	width: 90%;
	margin: 1.5% auto;
	padding-bottom: 20px;	
	overflow-x: auto;
}

.tabl_tabl table {
	width: 99.5%;
}

.title {
	border-top: 0px;
	padding-bottom: 15px;
	font-weight: 600;
	background-color: white;
}

.table_odd tr:nth-child(odd) { /* Заливка другого рядка таблиці, якщо шапка таблиці має непарну кількість рядків */
	background-color: #ededed; /*#eaeaea;*/
}

.table_even tr:nth-child(even) { /* Заливка другого рядка таблиці, якщо шапка таблиці має парну кількість рядків */
	background-color: #ededed; /*#eaeaea;*/
}

td, th {
	-webkit-hyphens: auto;
    hyphens: auto;
}

.headfirst {
	border-top: 1px solid #bf802c;
	border-bottom: 1px solid #bf802c;
	border-left: 1px solid #bf802c;
	padding: 3px;
	text-align: center;
	vertical-align: middle;
	font-size: 0.95rem;
	font-weight: 600;
	background-color: white;
}

.headfirst1 {
	border-top: 1px solid #bf802c;
	border-bottom: 1px solid #bf802c;
	border-left: 1px solid #bf802c;
	border-right: 1px solid #bf802c;
	padding: 3px;
	text-align: center;
	vertical-align: middle;
	font-size: 0.95rem;
	font-weight: 600;
	background-color: white;
}

.headmid {
	border-top: 0px;
	border-bottom: 1px solid #bf802c;
	border-left: 1px solid #bf802c;
	padding: 3px;
	text-align: center;
	vertical-align: middle;
	font-size: 0.95rem;
	font-weight: 600;
	background-color: white;
}

.headmid1 {
	border-top: 0px;
	border-bottom: 1px solid #bf802c;
	border-left: 1px solid #bf802c;
	border-right: 1px solid #bf802c;
	padding: 3px;
	text-align: center;
	vertical-align: middle;
	font-size: 0.95rem;
	font-weight: 600;
	background-color: white;
}

.headlast {
	border-top: 0px;
	border-bottom: 1px solid #bf802c;
	border-left: 1px solid #bf802c;
	padding: 3px;
	text-align: center;
	vertical-align: middle;
	font-size: 0.95rem;
	font-weight: 400;
	background-color: white;
}

.headlast1 {
	border-top: 0px;
	border-bottom: 1px solid #bf802c;
	border-left: 1px solid #bf802c;
	border-right: 1px solid #bf802c;
	padding: 3px;
	text-align: center;
	vertical-align: middle;
	font-size: 0.95rem;
	font-weight: 400;
	background-color: white;
}

.table_ltd {
	padding: 3px 5px 3px 5px;
	text-align: left;
	vertical-align: top;
	font-size: 0.95rem;
}

.table_td {
	padding: 3px 5px 3px 5px;
	text-align: right;
	vertical-align: top;
	font-size: 0.95rem;
}

.footnote {
	border-top: 1px solid #bf802c;
	text-align: left;	
	font-size: 0.9rem;
	font-style: italic;	
	background-color: white;
}

.rounded_button {
	width: 45px;
	height: 45px;
	border: 2px solid #ededed;
	border-radius: 10px;
	background: #ededed;
	cursor: pointer;
	transition: 0.4s;
	padding: 5px;
	margin-top: 5px;
	text-align: center;
}

.rounded_button:hover {
	border: 2px solid #ddc8b8;
	background: #ddc8b8;
	transition: 0.5s;
}

/*---- !!! tabl_tabl !!! -----*/
















/*---------------------------------------------------------------------*/


@media screen and (min-width: 1355px) {
	.scrollToTop {
		bottom: 40px; /* відстань від нижнього краю */		
		right: 50px; /* відстань від правого краю */
	}
}


@media screen and (max-width: 1355px) {
	#container_color1, #container_color2, #container_color3, #container_color4 {
		flex: 0 1 36%;
	}
}


@media screen and (max-width: 1200px) {
	html {font-size: 100% /*95%*/}
	.main_sides_left, .main_sides_right {
		display: none;
	}
	.chapter_icon_img2 {
		width: 80%;
	}
	#container_color1, #container_color2, #container_color3, #container_color4 {
		flex: 0 1 41%;
	}
}


@media screen and (max-width: 1024px) {
	html {font-size: 95% /*85%*/}
	.chapter_icon_img2 {
		width: 80%;
	}
	.ind_chapter {
		min-width: 320px;
		height: 255px;
	}
}


@media screen and (max-width: 900px) {
	.head {
		background: url(img/head_sm.png) no-repeat left bottom, linear-gradient(to right, #f5ede4, #f5eee6);
	}
}


@media screen and (max-width: 800px) {
	html {font-size: 90%}
}


@media screen and (max-width: 768px) {
	html {font-size: 85%}
	.ind_chapter {
		min-width: 285px;
		height: 230px;
	}
}


@media screen and (max-width: 750px) {
	.head {
		background: url(img/head_sm_150x.png) no-repeat left bottom, linear-gradient(to right, #f5ede4, #f5eee6);
		height: 150px;
	}
}


@media screen and (max-width: 680px) {
	html {font-size: 80%}
	.chapter_icon_img2 {
		width: 70%;
	}
	#container_color1, #container_color2, #container_color3, #container_color4 {
		margin: 15px 1% 15px 1%;
	}
	#theme_chapter {
		padding-left: 16px;
	}
}


@media screen and (max-width: 600px) {
	.head {
		background: url(img/head_sm_130x.png) no-repeat left bottom, linear-gradient(to right, #f5ede4, #f5eee6);
		height: 130px;
	}
	#container_color1, #container_color2, #container_color3, #container_color4 {
		flex: 0 1 85%;
	}
}


@media screen and (max-width: 500px) {
	.head {
		background: url(img/head_sm_110x.png) no-repeat left bottom, linear-gradient(to right, #f5ede4, #f5eee6);
		height: 110px;
	}
}


@media screen and (max-width: 480px) {
	.scrollToTop {
		bottom: 10px; /* відстань від нижнього краю */		
		right: 25px; /* відстань від правого краю */
	}
}

@media screen and (max-width: 450px) {
	.head {
		background: url(img/head_sm_100x.png) no-repeat left bottom, linear-gradient(to right, #f5ede4, #f5eee6);
		height: 100px;
	}
}


@media screen and (max-width: 400px) {
	.head {
		background: url(img/head_sm_90x.png) no-repeat left bottom, linear-gradient(to right, #f5ede4, #f5eee6);
		height: 90px;
	}
}


@media screen and (max-width: 360px) {
	.head {
		background: url(img/head_sm_85x.png) no-repeat left bottom, linear-gradient(to right, #f5ede4, #f5eee6);
		height: 85px;
	}
}


@media screen and (max-width: 340px) {
	.head {
		background: url(img/head_sm_80x.png) no-repeat left bottom, linear-gradient(to right, #f5ede4, #f5eee6);
		height: 80px;
	}
	.main_big_chapter {
		margin: 10px 1% 0px 1%;
		padding: 4px;
	}
}


/*---- Нижче наведено перелік різних екранів, для того, щоб в дослідженні сторінки в браузері можна було глянути, як буде виглядати сторінка при різних екранах ----*/
@media screen and (min-width: 1900px) {}
@media screen and (min-width: 1600px) {}
@media screen and (min-width: 1450px) {}
@media screen and (min-width: 1400px) {}
@media screen and (min-width: 1355px) {}
@media screen and (min-width: 1280px) {}
@media screen and (min-width: 1200px) {}
@media screen and (min-width: 1024px) {}
@media screen and (min-width: 960px) {}
@media screen and (min-width: 900px) {}
@media screen and (min-width: 890px) {}
@media screen and (min-width: 800px) {}
@media screen and (min-width: 768px) {}
@media screen and (min-width: 750px) {}
@media screen and (min-width: 680px) {}
@media screen and (min-width: 600px) {}
@media screen and (min-width: 500px) {}
@media screen and (min-width: 480px) {}
@media screen and (min-width: 450px) {}
@media screen and (min-width: 414px) {}
@media screen and (min-width: 412px) {}
@media screen and (min-width: 400px) {}
@media screen and (min-width: 390px) {}
@media screen and (min-width: 375px) {}
@media screen and (min-width: 360px) {}
@media screen and (min-width: 340px) {}
@media screen and (min-width: 320px) {}