* {
	box-sizing: border-box;
}
/*Чтобы не было отсупов от края экрана!!!*/
body {
	margin: 0;
	padding: 0;
}
/*Хедер - везде одинаковый*/
header {
	background-color: #000000;
	margin: 0;
	padding-bottom: 15px;
}
/*Хедер - блок заголовков*/
header .head0 {
	display: flex;
}
/*Хедер - картинка*/
header #head1 { 
	margin-right: 30px;
} 
/*Хедер - текст заголовка*/
header #head2 {
	color: white;
	letter-spacing: 0.2em;
	font-family: "Calibri";
} 
/*Хедер - текст подзаголовка*/
header #head3 {
	color: white;
	font-family: arial;
	font-size: 14px;
}

/*Адаптивность*/
@media (max-width: 800px) {
	.head0 {
		padding: 30px 5%;
	}
	#head2 {
		font-size: 18px;
		line-height: 1;
	}
	#head3 {
		line-height: 1;
	}
}
@media (min-width: 800px) and (max-width: 1000px) {
	.head0 {
		padding: 30px 5%;
	}
	#head2 {
		font-size: 24px;
		line-height: 0.8; 
	}
	#head3 {
		line-height: 0.8;
	}
}
@media (min-width: 1000px) and (max-width: 1400px) {
	.head0 {
		padding: 30px 10%;
	}
	#head2 {
		font-size: 28px;
		line-height: 0.7; 
	}
	#head3 {
		line-height: 0.7;
	}
}
@media (min-width: 1400px) {
	.head0 {
		padding: 30px 15%;
	}
	#head2 {
		font-size: 32px;
		line-height: 0.5; 
	}
	#head3 {
		line-height: 0.5;
	}
}

/*Хедер - меню кнопок*/
header nav {
	display: flex;
	margin-right: 15%;
	justify-content: flex-end;
	flex-wrap: wrap;
}
/*Хедер - ссылки меню кнопок*/
header nav a {
	font-family: sans-serif;
	color: white;
	font-size: 15px;
	padding: 5px 20px;
	text-decoration: none;
}
header nav a:hover, header nav a.active { 
	color: #608279;
}

/*Везде - бэкграунд серый*/
main {
	background-color: #f1f1f0;
	padding-top: 30px;
	padding-bottom: 20px;
}
/*Главная/все остальные страницы - Блок заголовка страницы*/
.block_title {
	margin: 0;
	display: flex; /*если не делать флекс, то размер блока не подстраивается бэкграундом под размер текста*/
}
/*Главная/все остальные страницы - Заголовок страницы*/
.title {
	color: black;
	font-family: "Calibri";
	font-size: 14px;
	margin-left: 20%;
	padding-left: 10px;
	padding-right: 10px;
	
}
/*Главная/все остальные страницы - Заливка заголовка страницы*/
.title h1 {
	background-color: #9ec9bd;
	padding: 0 20px;
}
/*Главная - Блок с новостью*/
.news {
	margin-left: 10%;
	margin-right: 10%;
	margin-bottom: 50px;
	background-color: white;
	display: flex;
	justify-content: space-between;
	font-family: arial;
}
.news_text {
	width: 70%;
	margin-left: 5%;
	margin-right: 5%;
}
/*Главная - Заголовок 1 (Название статьи)*/
.news h1 {
	font-size: 30px;
	margin-top: 3%;
}
/*Главная - Заголовок 2 (авторы)*/
.news h2 {
	color: #a7a8aa;
	font-size: 26px;
	line-height: 0;
	margin-bottom: 50px;
}
/*Главная - Основной текст*/
.news p {
	font-size: 16px;
	text-indent: 5%;
	text-align: justify;
	margin-bottom: 3%;
}
.news_img {
	width: 30%;
}
.news_img img {
	width: 100%;
}

/*Статьи - Кнопки с ссылками*/
.article_button {
	display: flex;
	justify-content: center;
}
.article_button p {
	margin-right: 5%;
}
/*Главная/Статьи/Авторы/Галерея/Разделы галереи - Кнопки с ссылками*/
.news a, .article_button a, .authors_button a, .gallery_button a, .gallery2_button a, .bottom_button a {
	background-color: #608279;
	color: white;
	text-decoration: none;
	padding: 10px 50px;
}
.news a:hover, .news a:active, .article_button a:hover, .article_button a:active, .authors_button a:hover, .authors_button a:active, .gallery_button a:hover, 
.gallery_button a:active, .gallery2_button a:hover, .gallery2_button a:active, .bottom_button a:hover, .bottom_button a:active { 
	color: #608279;
	background-color: white;
	border: 1px solid #608279; 
}
/*Кнопка внизу страницы*/
.bottom_button, .article_button {
	padding: 25px;
	background-color: #f1f1f0;
}
.bottom_button {
	margin-left: 30%;
}
/*Разделы галереи - кнопка внизу страницы*/
.gallery2_button {
	margin: 5%;
}
/*Статьи - весь блок*/
.article {
	background-color: white;
	margin: 0 100px; /* !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! */
	padding: 50px 100px;
}
/*Статьи - Заголовок 1 (название статьи)*/
.article h1 {
	/*color: #608279;*/
	margin-left: 5%;
	font-family: arial;
	font-size: 30px;
}
/*Статьи - Заголовок 2 (авторы)*/
.article h2 {
	margin-left: 5%;
	color: #a7a8aa;
	font-family: arial;
	font-size: 26px;
}
/*Статьи - Сноски*/
.article h3 {
	margin-left: 5%;
	font-family: arial;
	font-size: 20px;
}
/*Статьи - Подразделы*/
.article h4 {
	text-align: center;
	font-family: arial;
	font-size: 24px;
}
/*Статьи - Текст*/
.article p {
	font-family: arial;
	font-size: 16px;
	line-height: 1.5;
	text-indent: 5%;
	text-align: justify;
}
/*Статьи/Замметки в галерее - Ненумерованный и нумерованный списки*/
.article ul, .main_block ul, .article ol, .main_block ol {
	font-family: arial;
	font-size: 16px;
	line-height: 1.5;
	margin-left: 2%;
}
/*Статьи - Таблицы*/
.article table {
	font-family: arial;
	font-size: 16px;	
}

/*Статьи - подписи к фотографиям */
p.caption {
	color: #608279;
	font-weight: bold;
	text-align: justify;
	text-indent: 5%;
}
/*Блок в статье с цитатой документа*/
.vr {
	background-color: #f1f1f0;
	width: 700px;
	padding: 15px 25px;
}
/*Блок в статье с розовой заливкой*/
.vr2 {
	background-color: #f7dbdb;
	padding: 10px 25px;
}
/*Блок в статье с цитатой документа на всю ширину*/
.vr3 {
	background-color: #f1f1f0;
	width: 80%;
	padding: 30px 50px;
}
/*Блок в статье с цитатой документа - шрифт*/
.vr p, .vr3 p {
	font-family: "JetBrains Mono", serif;
}
/*Статьи - блок гридов с фотографиями */
.grid_photo  {
	display: flex;
	flex-wrap: wrap;
	padding: 0 50px;
	justify-content: space-around;
}
/*Статьи - блок гридов с фотографиями */
table th, table td  {
	padding: 5px 10px
}

/*Публикации/Разделы Фотогалереи - блок гридов со статьями */
.articles_list, .photo_list {
	display: flex;
	flex-wrap: wrap;
	margin-left: 5%;
	font-family: Arial;
	justify-content: flex-start;
	flex-direction: row;
	width: 70%;
}

/*Публикации/Разделы фотогалереи - грид со статьей*/
.lit_block_article, .photo_preview {
	padding: 10px 20px;
	/*margin-bottom: 30px;
	margin-left: 30px;*/
	background-color: white;
}
/*Публикации - грид со статьей (заголовок)*/
.lit_block_article h1 {
	font-size: 16px;
	color: #608279;
}
/*Публикации - грид со статьей (автор)*/
.lit_block_article h2 {
	font-size: 12px;
	font-style: italic;
}
/*Публикации - грид со статьей (текст)*/
.lit_block_article {
	font-size: 12px;
}
/*Публикации - грид со статьей (ссылка по тексту)*/
.lit_block_article a {
	text-decoration: none;
}
/*Публикации - грид со статьей (размер изображения)*/
.lit_block_article img {
	 width: 100%;
}
/*Заметки - цвет заливки блока*/
.lba_back {
	background-color: #f8ebf8;
}
/*Новости - цвет заливки блока*/
.news_notes {
	background-color: #f8ebf8;
}

/*Разделы фотогалереи - превью фото*/
.photo_preview p {
	color: #608279;
}
.photo_caption {
	font-size: 14px;
	text-align: justify;
	text-indent: 5%;
}
/*Разделы фотогалереи - превью фото*/
.photo_preview .img {
	text-align: center;
}
/*Авторы/Статьи/Фотогалерея - общий блок: main и правое меню*/
.wrapper {
	display: flex;
	justify-content: space-evenly;
	background-color: #f1f1f0;
}

/*Авторы/Фотогалерея - блоки внутри main*/
.authors, .gallery {
	background-color: white;
	margin: 0 0 50px 0;
	padding: 25px 10%;
}
/*Авторы/Страница автора/Фотогалерея/О нас - main (заголовок)*/
.authors h1, .block_about h1, .gallery h1, .about_us h1 {
	margin-left: 50px;
	color: #608279;
	font-family: arial;
	font-size: 26px;
}
/*Авторы/Страница автора/Фотогалерея/О нас - main (текст)*/
.authors p, .block_about p, .gallery p, .about_us p {
	font-family: arial;
	font-size: 16px;
	line-height: 1.5;
	text-indent: 50px;
	text-align: justify;
}
/*Страница автора - список*/
.block_about ul {
	font-family: arial;
	font-size: 16px;
	line-height: 1.5;
}
/*Авторы - кнопки со ссылками на страницы авторов*/
.authors_button {
	margin-top: 30px;
	margin-bottom: 30px;
}
/*Авторы/Публикации - блок меню справа*/
.right {
	width: 315px;
	padding: 15px 15px;
	margin-left: 20px;
	margin-right: 20px;
	margin-bottom: 50px;
	text-align: justify;
	background-color: white;
}
/*Авторы - блок меню справа (заголовок)*/
.right h1 {
	color: #608279;
	font-family: arial;
	font-size: 26px;
}
/*Авторы - блок меню справа (текст)*/
.right p {
		font-family: arial;
	font-size: 16px;
	line-height: 1.5;
	font-weight: bold;
}
/*Авторы - блок меню справа (ссылки)*/
.right a {
color: black;
	text-decoration: none;
}
.right a:hover, .right a:active { 
	color: #608279;
}
/*Страница об авторе*/
.block_about {
	background-color: white;
	margin: 50px 100px;
	padding: 50px 100px;
}
.block_about img {
	float: left; 
	margin: 0 50px 25px 25px;
	width: 200px;
}
/*О нас - блок*/
.about_us {
	background-color: white;
	margin: 0 100px 50px 100px;
	padding: 50px 10%;
}

/*Публикации/Разделы фотогалереи - грид со статьей*/
.article_photo {
	padding: 0 20px;
}

/*Галлерея - основной блок слева*/
.main_block {
	width: 70%;
	margin-left: 5%;
}
/*Статьи - горизонтальные линии*/
hr.hr {
	width: 50%;
}
/*Нижний подвал - везде одинаковый по шаблону*/
footer {
	background-color: #000000;
	padding: 30px;
	margin: 0;
	color: white;
	font-family: arial;
	text-align: center;
}

/*Адаптивность для маленького разрешения*/
@media (max-width: 720px) {
	footer {
		font-size: 12px;
	}
	.news {
		flex-wrap: wrap;
		flex-direction: column-reverse;
		justify-content: column;
	}
	.news_text {
		width: 90%;
	}
	.news h1 {
		font-size: 15px;
	}
	.news h2 {
		font-size: 13px;
	}
	.news p {
		font-size: 12px;
		margin-bottom: 10%;
	}
	.news_img {
		width: 100%;
	}
	.article {
		margin: 5% 5%;
		padding: 5% 5%;
	}
	.article h1, .gallery h1, .authors h1 {
		margin-left: 5%;
		font-size: 15px;
	}
	.article h2 {
		margin-left: 5%;
		font-size: 13px;
	}
	.article h3 {
		margin-left: 5%;
		font-size: 12px;
	}
	.article h4 {
		font-size: 12px;
	}
	.article ul, .main_block ul, .article ol, .main_block ol {
		font-size: 12px;
		margin-left: 2%;
	}
	.article table {
		font-size: 10px;
	}
	.article p, .gallery p, .authors p {
		font-size: 12px;
		text-indent: 5%;
	}
	.article img, .gallery img {
		width: 95%;
		
	}
	.article hr {
		width: 100%;
	}
	.article table img {
		width: 90%;
	}
	.vr {
		width: 100%;
		padding: 5% 5%;
	}
	.vr3 {
	width: 90%;
	padding: 3% 5%;
	}
	.block_about {
		margin: 5% 5%;
		padding: 5% 5%;
	}
	.block_about h1 {
		margin-left: 5%;
		font-size: 15px;
	}
	.block_about p, .block_about ul  {
		font-size: 12px;
		text-indent: 10%;
	}
	.block_about .clearfix { 
		clear: both; 
	} 
	.about_us {
		margin: 0 10% 5% 10%;
		padding: 5% 10%;
	}
	.about_us h1 {
		margin-left: 5%;
		font-size: 15px;
	}	
	.about_us p {
		font-size: 12px;
		text-indent: 10%;
	}
	.gallery {
		margin: 0 0 5% 0;
		padding: 25px 5%;
	}
	.gallery h1 {
		margin-left: 5%;
		font-size: 13px;
	}
	.gallery p {
		font-size: 12px;
		text-indent: 10%;
	}
	.wrapper {
		flex-direction: column;
	}
	.photo_list {
		width: 90%;
	}
	.main_block {
		width: 90%;
	}
	.articles_list {
		width: 90%;
	}
	.right h1 {
		font-size: 14px
	}
	.right p {
		font-size: 12px
	}
}
/*Адаптивность для флекс-элементов, кнопок и */
@media (max-width: 900px) {
	.lit_block_article {
		width: 90%;
		margin-bottom: 30px;
	}
	.news a, .article_button a, .authors_button a, .gallery_button a, .gallery2_button a {
		padding: 10px 10px;
	}
	.article_photo {
		width: 90%;
		margin-bottom: 30px;
	}
}
@media (min-width: 900px) and (max-width: 1300px) {
	.lit_block_article {
		width: 45%;
		margin-left: 20px;
		margin-bottom: 30px;
	}
	.news a, .article_button a, .authors_button a, .gallery_button a, .gallery2_button a {
		margin-left: 10%;
		padding: 10px 50px;
	}
	.article_photo {
		width: 45%;
		margin-left: 20px;
		margin-bottom: 30px;
	}
}
@media (min-width: 1300px) and (max-width: 2000px) {
	.lit_block_article {
		width: 30%;
		margin-left: 20px;
		margin-bottom: 30px;
	}
	.news a, .article_button a, .authors_button a, .gallery_button a, .gallery2_button a {
		margin-left: 20%;
		padding: 10px 50px;
	}
	.article_photo {
		width: 30%;
		margin-left: 20px;
		margin-bottom: 30px;
	}
}
@media (min-width: 2000px) {
	.lit_block_article, .photo_preview {
		width: 22%;
		margin-left: 20px;
		margin-bottom: 30px;
	}
}

/*Адаптивность для галерей фото*/
@media (max-width: 1200px) {
	.photo_preview {
		width: 90%;
		margin-bottom: 30px;
	}
}
@media (min-width: 1200px) and (max-width: 1650px) {
	.photo_preview {
		width: 45%;
		margin-left: 20px;
		margin-bottom: 30px;
	}
}
@media (min-width: 1650px) and (max-width: 2000px) {
	.photo_preview {
		width: 30%;
		margin-left: 20px;
		margin-bottom: 30px;
	}
}