* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

/* ЗАГРУЗКА ШРИФТОВ - НАЧАЛО */

	@font-face {
		font-display: swap;
		font-family: 'Russo One';
		font-style: normal;
		font-weight: 400;
		src: url('/fonts/russo-one-v16-latin-regular.woff2') format('woff2'),
			url('/fonts/russo-one-v16-latin-regular.woff') format('woff2'),
			url('/fonts/russo-one-v16-latin-regular.ttf') format('truetype');
	}
	@font-face {
		font-display: swap;
		font-family: 'Open Sans';
		font-style: normal;
		font-weight: 300;
		src: url('/fonts/open-sans-v40-cyrillic_latin-300.woff2') format('woff2'),
			url('/fonts/open-sans-v40-cyrillic_latin-300.woff') format('woff'),
			url('/fonts/open-sans-v40-cyrillic_latin-300.ttf') format('truetype');
	}
	@font-face {
		font-display: swap;
		font-family: 'Open Sans';
		font-style: italic;
		font-weight: 300;
		src: url('../fonts/open-sans-v40-cyrillic_latin-300italic.woff2') format('woff2'),
			url('../fonts/open-sans-v40-cyrillic_latin-300italic.woff') format('woff'),
			url('../fonts/open-sans-v40-cyrillic_latin-300italic.ttf') format('truetype');
	}
	@font-face {
		font-display: swap;
		font-family: 'Open Sans';
		font-style: normal;
		font-weight: 400;
		src: url('/fonts/open-sans-v40-cyrillic_latin-regular.woff2') format('woff2'),
			url('/fonts/open-sans-v40-cyrillic_latin-regular.woff') format('woff'),
			url('/fonts/open-sans-v40-cyrillic_latin-regular.ttf') format('truetype');
	}
	@font-face {
		font-display: swap;
		font-family: 'Arial';
		font-style: normal;
		src: url('/fonts/open-sans-v40-cyrillic_latin-regular.woff2') format('woff2'),
			url('/fonts/open-sans-v40-cyrillic_latin-regular.woff') format('woff'),
			url('/fonts/open-sans-v40-cyrillic_latin-regular.ttf') format('truetype');
	}
	@font-face {
		font-display: swap;
		font-family: 'Open Sans';
		font-style: italic;
		font-weight: 400;
		src: url('../fonts/open-sans-v40-cyrillic_latin-italic.woff2') format('woff2'),
			url('../fonts/open-sans-v40-cyrillic_latin-italic.woff') format('woff'),
			url('../fonts/open-sans-v40-cyrillic_latin-italic.ttf') format('truetype');
	}
	@font-face {
		font-display: swap;
		font-family: 'Open Sans';
		font-style: normal;
		font-weight: 500;
		src: url('../fonts/open-sans-v40-cyrillic_latin-500.woff2') format('woff2'),
			url('../fonts/open-sans-v40-cyrillic_latin-500.woff') format('woff'),
			url('../fonts/open-sans-v40-cyrillic_latin-500.ttf') format('truetype');
	}
	@font-face {
		font-display: swap;
		font-family: 'Open Sans';
		font-style: italic;
		font-weight: 500;
		src: url('../fonts/open-sans-v40-cyrillic_latin-500italic.woff2') format('woff2'),
			url('../fonts/open-sans-v40-cyrillic_latin-500italic.woff') format('woff'),
			url('../fonts/open-sans-v40-cyrillic_latin-500italic.ttf') format('truetype');
	}
	@font-face {
		font-display: swap;
		font-family: 'Open Sans';
		font-style: normal;
		font-weight: 600;
		src: url('../fonts/open-sans-v40-cyrillic_latin-600.woff2') format('woff2'),
			url('../fonts/open-sans-v40-cyrillic_latin-600.woff') format('woff'),
			url('../fonts/open-sans-v40-cyrillic_latin-600.ttf') format('truetype');
	}
	@font-face {
		font-display: swap;
		font-family: 'Open Sans';
		font-style: italic;
		font-weight: 600;
		src: url('../fonts/open-sans-v40-cyrillic_latin-600italic.woff2') format('woff2'),
			url('../fonts/open-sans-v40-cyrillic_latin-600italic.woff') format('woff'),
			url('../fonts/open-sans-v40-cyrillic_latin-600italic.ttf') format('truetype');
	}
	@font-face {
		font-display: swap;
		font-family: 'Open Sans';
		font-style: normal;
		font-weight: 700;
		src: url('../fonts/open-sans-v40-cyrillic_latin-700.woff2') format('woff2'),
			url('../fonts/open-sans-v40-cyrillic_latin-700.woff') format('woff'),
			url('../fonts/open-sans-v40-cyrillic_latin-700.ttf') format('truetype');
	}
	@font-face {
		font-display: swap;
		font-family: 'Open Sans';
		font-style: italic;
		font-weight: 700;
		src: url('../fonts/open-sans-v40-cyrillic_latin-700italic.woff2') format('woff2'),
			url('../fonts/open-sans-v40-cyrillic_latin-700italic.woff') format('woff'),
			url('../fonts/open-sans-v40-cyrillic_latin-700italic.ttf') format('truetype');
	}
	@font-face {
		font-display: swap;
		font-family: 'Open Sans Condensed';
		font-style: normal;
		font-weight: 300;
		src: local('Open Sans Condensed Light'), local('OpenSansCondensed-Light'),
			url('../fonts/OpenSansCondensed-Light.woff2') format('woff2'),
			url('../fonts/OpenSansCondensed-Light.woff') format('woff'),
			url('../fonts/OpenSansCondensed-Light.ttf') format('truetype');
	}

/* ЗАГРУЗКА СВОИХ ШРИФТОВ - КОНЕЦ */
		
html {
	height: 100%;
}
		
body {
	font-family: sans-serif;
}

main {
	font-family: 'Open Sans';
}

	.tableColor {
		width: 100%;	
		margin-bottom: 1%;
	}
	
	/* Общие стили для заголовков первого уровня (в статьях и рубриках) */
	.content h1:not(.forum-title) {
		margin-bottom: 1%;
		font-style: normal;
		line-height: 1.1em; /* Межстрочный интервал для двухстрочных заголовков h1 */
		padding-top: 1%;
		padding-bottom: 1%;
	}
	
	/* Выравнивание по центру заголовков 1-го уровня в статьях */
	.content h1:not(#rubricHeadline, .forum-title), .tableTop18px {
		text-align: center;	
	}
	
	/* Форматирование заголовков рубрик и категорий в архивах материалов*/
	.content #rubricHeadline {
		font-size: 1em;
		font-weight: 500;
	}
	
	@media all and (min-width: 640px) {
		.content #rubricHeadline {
			text-align: left;
		}
	}
	@media all and (max-width: 639px) {
		.content #rubricHeadline {
			text-align: center;
			padding-bottom: 3%;
		}
	}

	/* Выравнивание заголовков 2+ уровня по по центру */
	.content h2, .content h3, .content h4, .content h5,
	#newsletter h2, #newsletter h3, #newsletter h4,
	.tableTop16pxBold, .tableTop16pxItalic, .tableTop16pxNormal {
		text-align: center;	
	}
	
	.content h1:not(#rubricHeadline, .forum-title) {		
		font-size: 2em;
		font-weight: bold;
	}
	
	.tableTop18px {
		font-size: 1.4em;
		font-weight: bold;
		font-style: normal;
		padding-top: 1%;
		padding-bottom: 1%;
	}
	.tableTop16pxBold {
		font-size: 1em;
		font-weight: bold;
		font-style: normal;
	}
	.content h2, #newsletter h2 {	
		font-size: 1.6em;
		font-weight: 600;
		font-style: normal;
		margin-top: 3%;
		margin-bottom: 1%;
	}
	
	.content h3 {
		font-size: 1.2em;
		font-weight: 400;
		margin-top: 1%;
		margin-bottom: 1%;
	}
	.tableTop16pxItalic {
		font-size: 16px;
		font-weight: normal;
		font-style: italic;		
	}
	.tableTop16pxNormal, .content h4 {
		font-size: 1em;
		font-weight: normal;
		font-style: normal;
	}
	
	/* class="ColouredTd" Тут оформление незаголочных ячеек, которые не белые. */
	.ColouredTd {   		
		font-size: 1em;
	}

	.tableDescription {
		text-align: center;
		font-size: 16px;
		font-style: italic;
		font-weight: bold;
	}
	
	/* Титульное изображение с книжкой в начале любой универсальной страницы и страниц-списков. */
	.uniImg {
		width: 100%;
		height: 224px;
		background-image: url(/torionel_files/fg_brand/images/universal_page_title_img.png);
		background-size: 224px 224px;
		background-repeat: no-repeat;
		background-position: center;
		margin-bottom: 10px;
	}
	
	.swchItem, .swchItemA {
		display: inline-flex;
		flex-direction: column;
		justify-content: center;
		width: 30px;
		height: 30px;
		text-indent: 0 !important;
		text-decoration: none;
		border-radius: 20px;
		font-size: 1em;
	}
		.swchItem:hover, .swchItemA:hover {
			background-color: #F5F5F5;
			color: #BB874D !important;		
		}
	
	.moder-block a, .moder-block a:link, .moder-block a:visited {
		border: 0;
	}
	
	#secret-seo-widget {
		margin-bottom: 2%;
		display: block;
		font-size: 0.7em;
		padding: 1%;
		border-radius: 5px;
	}
		
		details {
			margin-bottom: 1%;
		}

	#comment-cta-need-login {
		padding-top: 1%;
		padding-left: 4%;
		padding-right: 4%;
		margin-bottom: 1%;
		font-style: italic;
		text-align: center;
		font-size: 0.8em;
	}
	
/* Блок "Содержание статьи" */
	.articleContent {
		width: 100%;
	}
	.articleContentHeader, .articleContentText {
		font-size: 16px;
	}
		/* Только заголовок рекомендательного блока */
		.articleContentHeader {
				text-align: center;
				font-weight: bold;
				margin-top: 2%;	
		}
		/* Только текст рекомендательного блока */
		.articleContentText {
				text-align: left;
				font-style: italic;
				margin-bottom: 2%;
				padding-top: 1%;
				padding-bottom: 1%;	
		}
	
/* Рекомендательный блок для рубрики "ИноСМИ о Fable" (декабрь 2023) */
	.inosmiWidget {
		width: 100%;
		margin-top: 3%;
		padding-top: 1%;
		padding-bottom: 1%;
		text-align: center;
		font-size: 16px;
	}
	
/* Рекомендательный блок для рекомендации новостей в статьях (декабрь 2023) */
	.relatedNewsWidgetHeader, .relatedNewsWidgetText {
		width: 100%;
		text-align: center;
		font-size: 16px;
	}	
		/* Только заголовок рекомендательного блока */
		.relatedNewsWidgetHeader {
			margin-top: 2%;
			margin-bottom: 0 !important;
		}
		/* Только текст рекомендательного блока */
		.relatedNewsWidgetText {
			margin-bottom: 2%;
			padding-top: 1%;
			padding-bottom: 1%;
		}
	
	/* Фикс 26.03 */
	#social-buttons {
		font-size: 1.1em;
		text-align:center;
		text-decoration: none;
	}
		#social-buttons a {
			text-decoration: none;
		}
	
		#social-buttons svg {
			width: 0.9em;
			height: 0.9em;
			overflow: visible;
		}
	/* Фикс 26.03 */
		
	.tg-widget-articles {
		display: flex;
		justify-content: center;
		align-items: center;
		font-weight: 500;
		font-size: 0.7em;
		text-align: center;
		margin-top: 3%;
		padding-top: 1%;
	}
	
/* Реакции к новостям (начало) */

/* Контейнер блока отзывов */
#emotion-block {
 margin: 20px auto;
 padding: 20px;
 text-align: center;
 border-radius: 16px;
}

/* Заголовок и общий счётчик */
#emotion-block h3 {
	margin-bottom: 1%;
}

#emotion-block > div:first-of-type {
 margin-bottom: 10px;
 font-size: 1em;
}

/* Контейнер для списка эмоций */
.emoji-list {
 display: flex;
 flex-wrap: wrap;
 justify-content: center;
 gap: 10px;
}

/* Каждый блок эмоции */
.emoji-item {
 flex: 1 1 100px; 
 max-width: 120px;
 display: flex;
 flex-direction: column;
 align-items: center;
 cursor: pointer;
 border-radius: 16px;
 transition: border 0.3s, background-color 0.3s;
 padding: 10px; 
 transition: transform 0.3s ease-in-out, border 0.3s ease, background-color 0.3s ease;
}

/* Эффект масштабирования для всего блока при наведении */
.emoji-item:hover {
 transform: scale(1.05);
}

/* Активное состояние блока */
.emoji-item.active {
}

/* При наведении на блок (если не активен) меняем цвет счетчика и подписи */
.emoji-item:hover:not(.active) .count,
.emoji-item:hover:not(.active) p {
 color: #8C6E32;
}

/* Эмодзи */
.emoji {
 font-size: 32px;
 transition: opacity 0.3s, transform 0.3s;
}

/* Счётчик голосов под эмодзи */
.count {
 font-weight: bold;
 font-size: 18px;
 color: #333;
}

/* Подпись к эмодзи */
.emoji-item div {
 margin-top: 0.6em;
 font-size: 0.8em;
}

/* Адаптивность: при маленьких экранах элементы эмодзи-блока растягиваются */
/*@media (max-width: 480px) {
 .emoji-item {
 flex: 1 1 80px;
 max-width: 90px;
 }
 .emoji {
 font-size: 35px;
 }
}*/

/* Скрываем блок до загрузки, анимация появления */
.catalog-emotion-block {
 opacity: 0;
 transition: opacity 0.5s;
}

/* Располагаем эмодзи в ряд или как нужно */
.catalog-emoji-list {
 display: flex;
 flex-direction: row;
 align-items: center;
 gap: 5px;
 position: relative;
 top: -2px;
}

/* Каждый эмодзи-блок */
.catalog-emoji-item {
 display: flex;
 align-items: center;
 gap: 2px; /* расстояние между эмодзи и числом */
 font-size: 1.2em;
}

/* Счётчик */
.catalog-count {
 display: block;
 margin-top: 4px;
 font-size: 0.9em;
 color: #6a6e7b;
}

/* Выделяем активный элемент, увеличивая эмодзи */
.catalog-emoji-item.active .catalog-emoji {
 transform: scale(1.1);
}

/* Реакции к новостям (конец) */

/* Светлые стили для общих элементов сайта (начало) */
@media (prefers-color-scheme: light) {
	main {
		background-color: rgba(226, 205, 177, 0.4);
	}
	.content h1,
	.content h2, #newsletter h2,
	.tableTop18px, .tableTop16pxBold,
	.tableTop16pxItalic, .tableTop16pxNormal {
		color: #7D6530;
	}
	
	.tableTop16pxBold a, .tableTop16pxBold a:link, .tableTop16pxBold a:visited,
	.content > h3 a, .content > h3 a:link, .content > h3 a:visited { 
		color: #7D6530;
		text-decoration: none;
		border-bottom: 1px dotted #ffd700;
	}
	
	/* Особые цвета заливки у таблиц-заголовков */
	.tableTop18px, .tableTop16pxBold,
	.tableTop16pxItalic, .tableTop16pxNormal {
		background-color: #F0E6D8;
	}
	
	/* Нижняя граница для заголовков рубрик */
	.content #rubricHeadline {
		border-bottom: 1px solid rgba(171, 167, 167, 0.32);
	}

	.tableColor {	
		border: 1px solid rgba(171, 167, 167, 0.32);
	}
	/* Для любых титульных элементов, где нужна обводка. class="tableBorder1" */
	.tableBorder1 {
		border: 1px solid #F0E6D8;
	}
	/* Для любых титульных элементов, где нужна обводка. */
	.tableBorder2 {  
		border: 1px solid #F0E6D8;
	}
	.ColouredTd {
		background-color: #F0E6D8;
		color: #7D6530;		
	}
	.tableDescription {
		background-color: #F0E6D8;
	}
	/* Для любых титульных элементов, где нужна обводка. */
	.tableBorderTop, .tableBorderBottom {
		border: 1px solid #F0E6D8;
	}
	
	/* Для любых титульных элементов, где нужна обводка. */
	.tableBorderRightAndBottom {
		border-right: 1px solid #F0E6D8;
		border-bottom: 1px solid #F0E6D8;
	}

	#comment-cta-need-login {
	}
		#comment-cta-need-login a {
			text-decoration: none;
			color: #7D6530;
		}
		
	#secret-seo-widget {
		border: 1px solid #7D6530;
		color: inherit;
	}
	
	.articleContentHeader {
		background-color: #F0E6D8;
		color: #7D6530;	
	}
	.articleContentText {
		border: 1px solid #7D6530;
	}
		
	.inosmiWidget {
		border-top: 1px solid #5C0E07;
		border-bottom: 1px solid #5C0E07;	
	}
	
	.relatedNewsWidgetHeader {
		background-color: #F0E6D8;
		color: #7D6530;
	}
	.relatedNewsWidgetText {
		border-left: 1px solid #7D6530;
		border-right: 1px solid #7D6530;
		border-bottom: 1px solid #7D6530;
	}
	
	/* Каждый блок эмоции */
	.emoji-item {
		border: 1px solid #7D6530;
	}
	
	/* При активном состоянии лайка меняем цвет счетчика и подписи */
	.emoji-item.active {
		background-color: rgba(226, 205, 177, 0.5);
	}	
	
	.emoji-item.active .count,
	.emoji-item.active p {
	}
	
	.swchItem, .swchItemA {
		background-color: #BB874D;
		color: #F5F5F5 !important;		
	}
	
	.tg-widget-articles {
		border-top: 1px solid rgba(171, 167, 167, 0.32);
	}
		
	footer {
		background-color: rgb(187 135 77 / 80%);
		color: #FFFFFF;
	}
	
}
/* Светлые стили для общих элементов сайта (конец) */

/* Темные стили для общих элементов сайта (начало) */
@media (prefers-color-scheme: dark) {	
	main {
		background-color: #282420;
	}
	
	.content h1, #newsletter h1,
	.content h2, #newsletter h2,
	.content h3, #newsletter h3,
	.content h4, #newsletter h4,
	.content h5, #newsletter h5,
	.tableTop18px, .tableTop16pxBold,
	.tableTop16pxItalic, .tableTop16pxNormal,
	summary, li::marker {
		background-color: #none;
		color: #dad5cd;
	}
	
	/* Нижняя граница для заголовков рубрик */
	.content #rubricHeadline {
		border-bottom: 1px solid #dad5cd;
	}
	
	.tableTop16pxBold a, .tableTop16pxBold a:link, .tableTop16pxBold a:visited,
	.content > h3 a, .content > h3 a:link, .content > h3 a:visited { 
		color: #dad5cd;
		text-decoration: none;
		border-bottom: 1px dotted #dad5cd;
	}
	
	/* Для разных элементов, где нужна обводка */
	.tableColor, .tableBorder2,
	.tableBorderTop, .tableBorderBottom, .emoji-item {
		border: 1px solid #dad5cd;
	}	
	
	.tableBorder1, #emotion-block > div, .emoji-item > div {
		color: #dad5cd;
	}
	.tableDescription {
		background-color: none;
	}
	.tableBorderRightAndBottom {
		border-right: 1px solid #dad5cd;
		border-bottom: 1px solid #dad5cd;
	}

	#comment-cta-need-login {
	}
		#comment-cta-need-login, #comment-cta-need-login a {
			text-decoration: none;
			color: #dad5cd;
		}
		
	#secret-seo-widget {
		border: 1px solid #dad5cd;
		color: #dad5cd;
	}
		
	.inosmiWidget {
		border-top: 1px solid #dad5cd;
		border-bottom: 1px solid #dad5cd;	
	}
	
	.ColouredTd, .articleContentHeader, .relatedNewsWidgetHeader {
		background-color: none;
		color: #dad5cd;
	}
	.articleContentText {
		border: 1px solid #dad5cd;
	}
	.relatedNewsWidgetText {
		border-left: 1px solid #dad5cd;
		border-right: 1px solid #dad5cd;
		border-bottom: 1px solid #dad5cd;
	}
	
	.swchItem, .swchItemA, .swchItemDots {
		background-color: none;
		color: #dad5cd !important;		
	}
		.swchItem, .swchItemA {
			border: 1px solid #dad5cd;
		}
	
	.tg-widget-articles {
		border-top: 1px solid #dad5cd;
	}
		
	footer {
		background-color: #282420;
		color: #dad5cd;
		border-top: 1px solid #dad5cd;
	}
	
}
/* Темные стили для общих элементов сайта (конец) */
	
	@media all and (min-width: 640px) and (prefers-color-scheme: light) {
		.rubric-widget {
			border-right: 1px solid rgba(171, 167, 167, 0.32);
		}
	}
	@media all and (min-width: 640px) and (prefers-color-scheme: dark) {
		.rubric-widget {
			border-right: 1px solid #dad5cd;
		}
	}