html {
	font-size: 100%; /*1vw;*/
	font-family: Calibri, sans-serif; /*"Calibri Light",*/ /*Arial,Helvetica,Tahoma,Verdana,sans-serif;*/ /*Times, "Times New Roman", serif;*/
	/*background: linear-gradient(to bottom, #808080, #d3d3d3, #e0e0e0, #d3d3d3, #808080); /*grey;*/ /*#acb6bd;*/ /*#d3d3d3;*/ /*#f2f2f2;*/ /*#fff;*/ /*#b67a2a;*/
	background-image: url(kvadr_big.png),linear-gradient(to bottom, #a9a9a9, #d3d3d3, #ededed, #d3d3d3, #a9a9a9);
	background-attachment: fixed;
	color: #555;
	scroll-behavior: smooth;
	filter: brightness(105%);
}

body {
	width: auto;
	max-width: 1350px; /*1250px;*/
	min-height: 100vh;
	margin: 0px auto;
	/*padding: 0.5% 0.5% 0px 0.5%; /*10px 15px 0px 15px;*/ /*10px;*/
	text-align: left;
	overflow: visible;
	background: #fff;
	display: flex;
	flex-direction: column;
}



.stb {
	font-size: 1.1em; /*0.9rem;*/ /*1rem;*/
	font-weight: 500;
	color: #555; /*goldenrod;*/
}

a:link.stb, a:active.stb, a:visited.stb {
	font-size: 1.1em; /*0.9rem;*/ /*1rem;*/
	color: #555; /*white;*/
	text-decoration: none;
}

a:hover.stb {
	color: #D92247;
	text-decoration: none;	
}

.stb_big {
	font-size: 2.55em; /*2.8em;*/
	font-weight: 500;
	color: #b67a2a;
}

a:hover.stb_big {
	color: #D92247;
	text-decoration: none;	
}

.stb_big2 {
	font-size: 2.55em; /*2.8em;*/
	font-weight: 700;
	color: #555;
	letter-spacing: 0.2em;
}





.head {
	/*background: #f4f2e9 url(kvadr_head2.png) no-repeat right bottom/20%;*/
	/*background: url(kvadr_head2.png) no-repeat right bottom/20%, linear-gradient(to right, rgb(244,242,233, 0.9), rgb(244,242,233, 0.6), rgb(255,255,255, 0.6));*/
	background: url(kvadr_head.png) no-repeat right bottom/27em, linear-gradient(to right, rgb(244,242,233, 0.9), rgb(244,242,233, 0.6), rgb(255,255,255, 0.6));
	z-index: 99;	
}

@media screen and (max-width: 600px) {
	.head {
		background: url(kvadr_head_sm.png) no-repeat right bottom/10em, linear-gradient(to right, rgb(244,242,233, 0.9), rgb(244,242,233, 0.6), rgb(255,255,255, 0.6));
	}
}

@media screen and (max-width: 480px) {
	.head {
		background: url(kvadr_head_sm.png) no-repeat right bottom/7em, linear-gradient(to right, rgb(244,242,233, 0.9), rgb(244,242,233, 0.6), rgb(255,255,255, 0.6));
	}
}

@media screen and (max-width: 360px) {
	.head {
		background: url(kvadr_head_sm.png) no-repeat right bottom/5em, linear-gradient(to right, rgb(244,242,233, 0.9), rgb(244,242,233, 0.6), rgb(255,255,255, 0.6));
	}
}



footer {
	margin-top: auto;
	padding-top: 2em;
	padding-bottom: 2em;
	background: url(data_matter.png) left bottom/12em no-repeat, url(kvadr_sm.png) right bottom/2.3em no-repeat;
	z-index: 99;
	border-bottom:2px solid #b67a2a;
}




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

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

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





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

.topnav {
	overflow: hidden;
	background-color: #b67a2a;
	/*margin-bottom: 10px;*/  
}

.topnav a {
	float: left;
	display: block;
	color: #f2f2f2;
	text-align: center;
	padding: 10px 16px; /*14px 16px;*/
	text-decoration: none;
	font-size: 1.0625rem; /*17px;*/
	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 */  
}

.topnav .active {
	background-color: #555; /*lightgrey;*/ /*grey;*/ /*#04AA6D;*/
	color: white; /*#555;*/
}

.topnav .icon {
	display: none;
}

.dropdown {
	float: left;
	overflow: hidden;
}

.dropdown .dropbtn {
	font-size: 1.0625rem; /*17px;*/
	border: none;
	outline: none;
	color: white;
	padding: 10px 16px; /*14px 16px;*/
	background-color: inherit;
	font-family: inherit;
	margin: 0;
	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 */  
}

.dropdown-content {
	display: none;
	position: absolute;
	background-color: #b67a2a; /*#f9f9f9;*/
	min-width: 160px;
	/*box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);*/
	z-index: 1;
}

.dropdown-content a {
	float: none;
	color:  white; /*black;*/
	padding: 10px 16px; /*12px 16px;*/
	text-decoration: none;
	display: block;
	text-align: left;
}

.topnav a:hover, .dropdown:hover .dropbtn {
	background-color: #ddd; /*lightgrey;*/ /*#555;*/
	color: #555; /*white;*/
	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 */  
}

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

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

@media screen and (max-width: 680px) {
	.topnav a:not(:first-child), .dropdown .dropbtn {
		display: none;
	}
	.topnav a.icon {
		float: right;
		display: block;
		
	}
}

@media screen and (max-width: 680px) {
	.topnav.responsive {position: relative;}
	.topnav.responsive .icon {
		position: absolute;
		right: 0;
		top: 0;
	}
	.topnav.responsive a {
		float: none;
		display: block;
		text-align: left;
	}
	.topnav.responsive .dropdown {float: none;}
	.topnav.responsive .dropdown-content {position: relative;}
	.topnav.responsive .dropdown .dropbtn {
		display: block;
		width: 100%;
		text-align: left;
	}
}

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





.main_big_content {
	display: flex;
	flex-flow: row wrap;
	justify-content: space-evenly; /*space-between;*/ /*space-around;*/
	align-content: space-around; /*stretch|center|flex-start|flex-end|space-between|space-around*/
	align-items: center; /*flex-start;*/
	padding: 1%;
	/*flex: 1 0 auto;*/
}

.main_big_chapter {
	align-items: top;
	justify-content: center;
	text-align: center;
	background-color: lightgrey; /*#666;*/
	margin: 20px 1% 5px 1%; /*15px 1% 15px 1%;*/ /*1% 1% 30px 1%;*/ /*10px 10px 20px 10px;*/ /*15px;*/
	padding: 8px;
	width: 20%; /*23%;*/
	min-width: 300px; /*315px;*/
	border-radius: 10px;
	transition: 0.3s;
	overflow: visible;
	/*box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);*/
}

.main_big_chapter:hover, .main_big_chapter:focus {
	background-color: grey; /*#666;*/
}

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

.main_big_content a:hover {
	color: white;
}

.main_big_chapter_icon {
	display: inline-block;
	background-color: transparent;
	width: 99%; /*50%;*/
	margin-bottom: 5px;
	margin-top: 15px;
}

.chapter_icon_img {
	width: 50%; /*90%;*/
	/*max-width: 100%;*/
	/*height: auto;*/
}





/*---- !!! 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: #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: #555;
	transition: 0.5s; /* плавний рух */
}

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




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

@media only screen and (max-width:1420px) {
	html {font-size: 100%}
	}

@media only screen and (max-width:1365px) {
	html {font-size: 100%}
	}

@media only screen and (max-width:1200px) {
	html {font-size: 95%}
	}

@media only screen and (max-width:800px) {
	html {font-size: 85% /*80%*/}
}

@media only screen and (max-width:680px) {
	html {font-size: 80%}
}

@media only screen and (max-width:600px) {
	html {font-size: 80%}
}

@media only screen and (max-width:480px) {
	html {font-size: 80%}
}

@media only screen and (max-width:360px){
	html {font-size: 80%}