/* ДЛЯ ОДНОЙ РУБРИКИ */

/* ------------------------------------------------ */
/* ПЕРЕВОРАЧИВАЮЩИЕСЯ МАТЕРИАЛЫ - ПОРТРЕТ - 5 В РЯД */
/* ------------------------------------------------ */

/* ----------------- */
/* ПАНЕЛЬ УПРАВЛЕНИЯ */
/* ----------------- */

:root {

/* Закругление карточки */
--radius-panel-16: 15px;

/* Толщина рамки вокруг обложки и обратной стороны (описания) */
/* ВАЖНО: не больше 20px; */
--border-width-panel-16: 0px;

/* Цвет рамки вокруг обложки */
--border-cover-color-panel-16: #0ca9a5;

/* Цвет рамки вокруг обратной стороны (описания) */
--border-back-color-panel-16: #0ca9a5;

/* Фон обложки */
/* Имеет значение, если у Обложки есть прозрачные области в png формате */
/* Если нужно убрать фон - выберите прозрачный цвет или вставьте вместо него - transparent */
/* Тогда получится: --bg-cover-panel-16: transparent; */
--bg-cover-panel-16: #9fd1f5;

/* НАСТРОЙКИ КОНТЕНТА КАРТОЧКИ */
/* --------------------------- */

	/* Цвет заголовка материала */
	--title-color-panel-16: #000000;

	/* Жирность заголовка материала */
	--title-weight-panel-16: 700;

	/* Размер заголовка */
	--title-size-panel-16: 1.9rem;

	/* Цвет описания материала */
	--description-color-panel-16: #000000;

/* ИКОНКА НА ОБРАТНОЙ СТОРОНЕ КАРТОЧКИ */

	/* Иконка на обратной стороне (описание) */
	/* вимео - f27d */
	/* ютуб  - f16a */
	/* плей  - f144 */
	--icon-back-panel-16: "\f16a";
	
	/* Размер Иконки на обратной стороне */
	/* НЕ МЕНЯТЬ! */
	--icon-back-size-panel-16: 5rem;

	/* Цвет Иконки на обратной стороне */
	--icon-back-color-panel-16: #FF0000;

/* КНОПКА НА ОБРАТНОЙ СТОРОНЕ КАРТОЧКИ */

	/* Текст кнопки на обратной стороне ОТКРЫТОГО материала */
	/* ВАЖНО! Измените текст только между кавычками '' */
	--text-button-back-open-panel-16: 'Смотреть';
	
	/* Фон кнопки на обратной стороне ОТКРЫТОГО материала */
	--button-back-bg-open-panel-16: #67D928;

	/* Цвет текста кнопки на обратной стороне ОТКРЫТОГО материала */
	--text-button-back-color-open-panel-16: #ffffff;
	
	/* Текст кнопки на обратной стороне ЗАКРЫТОГО материала */
	--text-button-back-close-panel-16: 'Как смотреть?';
	
	/* Фон кнопки на обратной стороне ЗАКРЫТОГО материала */
	--button-back-bg-close-panel-16: #FF0000;

	/* Цвет текста кнопки на обратной стороне ЗАКРЫТОГО материала */
	--text-button-back-color-close-panel-16: #ffffff;
	
	/* Размер текста на кнопке на обратной стороне */
	/* НЕ МЕНЯТЬ! */
	--text-button-back-size-panel-16: 1.6rem;
	
	/* Закругление кнопки на обратной стороне */
	--button-back-radius-panel-16: 25px;

/* ОТКРЫТЫЙ МАТЕРИАЛ */
/* ----------------- */

	/* Фон ОТКРЫТОГО материала при наведении */
	--open-bg-hover-panel-16: #ffffff;
	
	/* Прозрачность контента при наведении на ОТКРЫТЫЙ материал */
	--content-opacity-open-hover-panel-16: 1;

/* ЗАКРЫТЫЙ МАТЕРИАЛ */
/* ----------------- */

	/* Фон ЗАКРЫТОГО материала при наведении */
	--close-bg-hover-panel-16: #EED5D5;
	
	/* Прозрачность контента при наведении на ЗАКРЫТЫЙ материал */
	--content-opacity-closed-hover-panel-16: 1;

/* ЗАКРЫТЫЙ МАТЕРИАЛ АВТОТРЕНИНГА */
/* ------------------------------ */

	/* Цвет и прозрачность наложения на Обложке ЗАКРЫТОГО материала Автотренинга */
	--auto-overlay-color-panel-16: rgba(235,237,255, 1);

	/* Фон материала Автотренинга при наведении */
	--auto-bg-hover-panel-16: #D8D8D8;
	
	/* Прозрачность контента при наведении на ЗАКРЫТЫЙ материал АВТОТРЕНИНГА */
	--content-opacity-auto-hover-panel-16: 0.3;

/* НАСТРОЙКИ ИНДИКАТОРОВ */
/* --------------------- */

	/* Фон порядкового номера */
	--count-bg-panel-16: rgba(0, 0, 0, 0.6);

	/* Цвет порядкового номера */
	--count-color-panel-16: #ffffff;

	/* Закругление порядкового номера */
	--count-radius-panel-16: 10px;

	/* Фон типа контента */
	--type-bg-panel-16: rgba(0, 0, 0, 0.6);

	/* Цвет иконки типа контента */
	--type-icon-panel-16: #ffffff;

	/* Закругление типа контента */
	--type-radius-panel-16: 10px;
	
	/* Закругление замка доступности */
	--lock-icon-radius-panel-16: 10px;
	
	/* Фон замка доступности */
	--lock-icon-bg-panel-16:rgba(244, 244, 244, 1);

	/* Фон нижних индикаторов */
	--icons-bottom-bg-panel-16: rgb(255, 255, 255, 1);

	/* Цвет нижних индикаторов */
	--icons-bottom-color-panel-16: #000000;

	/* Цвет статуса НЕ НАЧАТ */
	--status-color-panel-16: #000000;

	/* Цвет статуса ПРОВЕРЯЕТСЯ */
	--status-checking-color-panel-16: #389de5;

	/* Цвет статуса ВЫПОЛНЕНО */
	--status-done-color-panel-16: #6dc068;

	/* Цвет статуса НЕ ВЫПОЛНЕНО */
	--status-not-right-color-panel-16: #ff0404;
	
	/* Иконка статуса НЕ НАЧАТ */
	/* "\f110" - загрузка */
	/* "\f06a" - внимание 1 */
	/* "\f071" - внимание 2 */
	--icon-not-started-panel-16: "\f110";

	/* Иконка статуса ПРОВЕРЯЕТСЯ */
	/* "\f253" - песочные часы */
	--icon-checking-panel-16: "\f253";

	/* Иконка статуса ВЫПОЛНЕНО */
	/* "\f00c" - галочка */
	/* "\f118" - смайл */
	--icon-done-panel-16: "\f00c";

	/* Иконка статуса НЕ ВЫПОЛНЕНО */
	/* "\f00d" - крестик */
	/* "\f119" - грустный смайлик */
	--icon-not-right-panel-16: "\f00d";

}

/* ЕДИНАЯ ОБЛОЖКА ДЛЯ ВСЕХ МАТЕРИАЛОВ */
/* ---------------------------------- */

/* Раскомментируйте и вставьте в () ссылку на ЕДИНУЮ Обложку для ВСЕХ Материалов */

.site-content .materials-row .material-item .col-thumb .thumbnail-wrap {
	/* background-image: url()!important; */
}

/* Раскомментировать, чтобы ОТКЛЮЧИТЬ анимацию недоступного урока Автотренинга */

.site-content .materials-row .material-inaccessible {
    cursor: default;
    pointer-events: none;
}

/* Раскомментировать, чтобы СКРЫТЬ НОВЫЙ Замок доступности */
/* Виден при наведении на материал */

.site-content .materials-row .material-opened a:after,
.site-content .materials-row .material-closed a:after,
.site-content .materials-row .material-inaccessible a:after {
	display: none!important;
}

/* Раскомментировать, чтобы СКРЫТЬ большую галочку пройденного материала */

.site-content .materials-row .material-item .col-thumb.done:after {
	display: none;
}

/* 1. БЛОК ВСЕХ БЛОКОВ */
/* ------------------- */

/* Корректируем сетку и порядок карточек */

.site-content .materials-row .container .row,
.site-content .materials-row.one-in-line .container .row {
    display: flex;
    flex-wrap: wrap;
}

/* Убираем влияние опции «Материалы в 1 колонку» */

.site-content .materials-row.one-in-line .container {
    max-width: none;
}

@media (min-width: 1400px) {

.site-content .materials-row .container,
.site-content .materials-row.one-in-line .container {
    width: 1370px;
}
}

@media (min-width: 1200px) and (max-width: 1399px) {

.site-content .materials-row .container,
.site-content .materials-row.one-in-line .container {
    width: 1170px;
}
}

@media (min-width: 992px) and (max-width: 1199px) {

.site-content .materials-row .container,
.site-content .materials-row.one-in-line .container {
    width: 970px;
}
}

@media (min-width: 768px) and (max-width: 991px) {

.site-content .materials-row .container,
.site-content .materials-row.one-in-line .container {
    width: 750px;
}
}

@media (max-width: 767px) {

.site-content .materials-row .container,
.site-content .materials-row.one-in-line .container {
    max-width: 370px;
	/* max-width: 100%; */
}
}

/* 2. БЛОК ВСЕЙ КАРТОЧКИ */
/* --------------------- */

/* Общие настройки */

.site-content .materials-row .col-md-6,
.site-content .materials-row.one-in-line .col-md-12 {
    float: left;
}

/* Количество карточек в ряду на разных экранах */

@media (min-width: 1400px) {
	
.site-content .materials-row .col-md-6,
.site-content .materials-row.one-in-line .col-md-12 {
    width: calc(100%/5);
}
}

@media (min-width: 1200px) and (max-width: 1399px) {

.site-content .materials-row .col-md-6,
.site-content .materials-row.one-in-line .col-md-12 {
    width: calc(100%/5);
}
}

@media (min-width: 992px) and (max-width: 1199px) {

.site-content .materials-row .col-md-6,
.site-content .materials-row.one-in-line .col-md-12 {
    width: calc(100%/4);
}
}

@media (min-width: 768px) and (max-width: 991px) {

.site-content .materials-row .col-md-6,
.site-content .materials-row.one-in-line .col-md-12 {
    width: calc(100%/3);
}
}

@media (min-width: 460px) and (max-width: 767px) {

.site-content .materials-row .col-md-6,
.site-content .materials-row.one-in-line .col-md-12 {
    width: calc(100%/2);
}
}	

@media (min-width: 320px) and (max-width: 459px) {

.site-content .materials-row .col-md-6,
.site-content .materials-row.one-in-line .col-md-12 {
    width: calc(100%/2);
}
}

/* Карточка урока */

.site-content .materials-row .material-item {
	/* Убираем фон карточки */
	/* Нужно для эффекта вращения */
	background: none;
	
	/* включаем, чтобы не обрезалась анимация вращения карточки */
	/* проблема - пропадают закругления карточки */
    overflow: visible;
	
	transition: all 0.25s ease-out!important;
}

/* 3. БЛОК - ССЫЛКА */
/* ---------------- */

.site-content .materials-row .col-md-6 .material-item a,
.site-content .materials-row.one-in-line .col-md-12 .material-item a {
    /* оставить, если выключен display: block */
	flex-flow: column;
	
	height: auto;
	
	animation: reverse-rotate-card 0.5s ease forwards alternate;
}

/* АНИМАЦИЯ карточки при наведении */
/* ------------------------------- */

.site-content .materials-row .col-md-6 .material-item:hover a,
.site-content .materials-row.one-in-line .col-md-12 .material-item:hover a {
	animation: rotate-card 0.5s ease forwards alternate;
}

/* Вращение при наведении */

@keyframes rotate-card {
  0% {
	transform: perspective(2400px) rotateY(0deg);
  }
  
  100% {
	transform: perspective(2400px) rotateY(180deg);
  }
}

/* Обратное вращение при отведении курсора */

@keyframes reverse-rotate-card {
  0% {
	transform: perspective(2400px) rotateY(180deg);
  }
  
  100% {
	transform: perspective(2400px) rotateY(0deg);
  }
}

/* 4. БЛОК - ОБЛОЖКА */
/* ----------------- */

.site-content .materials-row .material-item .flex-wrap .col-thumb,
.site-content .materials-row.one-in-line .material-item .flex-wrap .col-thumb {
	/* width: 100%; */
	width: auto;
	/* В Firefox корректно работает только height: 100% */
	height: 100%;
	/* height: auto; */
	border-radius: 0;
	background: none;
	overflow: visible;
	transition: all 0.25s ease;
}

/* Соотношение обложки */

.site-content .materials-row .material-item .thumbnail-wrap {
	min-height: auto;
	aspect-ratio: 144 / 227;
    border-radius: var(--radius-panel-16);
	/* рамка вокруг обложки */
	box-shadow: inset 0px 0px 0px var(--border-width-panel-16) var(--border-cover-color-panel-16);

	transition: all 0.25s ease;
}

/* Фон обложки */
/* Имеет значение, если у Обложки есть прозрачные области в png формате */

.site-content .materials-row .material-item .thumbnail-wrap {
	background-color: var(--bg-cover-panel-16);
}

/* Скрываем блок обложки при наведении */

.site-content .materials-row .material-item:hover .flex-wrap .col-thumb,
.site-content .materials-row.one-in-line .material-item:hover .flex-wrap .col-thumb {
	opacity: 0;
}

/* Убираем старую прозрачность блока обложки при наведении */

.site-content .materials-row .material-item:hover .col-thumb:before {
	opacity: 0;
}

/* ЭФФЕКТ ДЛЯ ОБЛОЖКИ МАТЕРИАЛА АВТОТРЕНИНГА */
/* ----------------------------------------- */

.site-content .materials-row .material-inaccessible .flex-wrap .col-thumb .thumbnail-wrap {
	background-color: var(--auto-overlay-color-panel-16);
	background-blend-mode: luminosity;
}

/* 5. БЛОК - ОПИСАНИЕ */
/* ------------------ */

/* Убираем кнопки при наведении на карточку */

.site-content .materials-row .material-item:hover .content-overlay {
	display: none;
}

.site-content .materials-row .material-item .flex-wrap .col-content,
.site-content .materials-row.one-in-line .material-item .flex-wrap .col-content {
	display: flex;
	width: auto;
	/* Нужно для эффекта вращения */
	/* Чтобы блок описания был на всю высоту карточки (обложки) */
	height: 100%;

	border: none;
	border-radius: var(--radius-panel-16);
	background: none;

	/* рамка вокруг блока описания */
	box-shadow: inset 0px 0px 0px var(--border-width-panel-16) var(--border-back-color-panel-16);

	/* делаем так, чтобы обложка и описание накладывались друг на друга */
	position: absolute;
	
	/* скрываем блок описания по умолчанию */
	opacity: 0;
	transition: all 0.25s ease;
}

/* Убираем обводку блока описания на маленьких экранах */

@media (min-width: 320px) and (max-width: 767px) {
	
.site-content .materials-row .material-item .flex-wrap .col-content,
.site-content .materials-row.one-in-line .material-item .flex-wrap .col-content {
	box-shadow: none;
}
}

/* Показываем блок описания при наведении */
/* переворачиваем его, чтобы вернуть прежнюю ориентацию после поворота всей карточки */

.site-content .materials-row .material-item:hover .flex-wrap .col-content,
.site-content .materials-row.one-in-lines .material-item:hover .flex-wrap .col-content {
	opacity: 1;
	transform: scaleX(-1);
}

/* Плавное появление самого контента при наведении */

.site-content .materials-row .material-item .flex-wrap .col-content .content-wrap,
.site-content .materials-row.one-in-line .material-item .flex-wrap .col-content .content-wrap {
	opacity: 0;
	transition: all 0.65s ease;
}

.site-content .materials-row .material-item:hover .flex-wrap .col-content .content-wrap,
.site-content .materials-row.one-in-line .material-item:hover .flex-wrap .col-content .content-wrap {
	opacity: 1;
}

/* Фон блока описания ОТКРЫТОГО материала при наведении */

.site-content .materials-row .material-opened:hover .flex-wrap .col-content {
    background: var(--open-bg-hover-panel-16);
}

/* Фон блока описания ЗАКРЫТОГО материала при наведении */

.site-content .materials-row .material-closed:hover .flex-wrap .col-content {
    background: var(--close-bg-hover-panel-16);
}

/* Фон блока описания материала АВТОТРЕНИНГА при наведении */

.site-content .materials-row .material-inaccessible:hover .flex-wrap .col-content {
    background: var(--auto-bg-hover-panel-16);
}

/* ЭФФЕКТ БЛОКА ОПИСАНИЯ МАТЕРИАЛА АВТОТРЕНИНГА */
/* -------------------------------------------- */

.site-content .materials-row .material-inaccessible .flex-wrap .col-content {
	filter: grayscale(100%);
}

/* Прозрачность блока с описанием при наведении на ОТКРЫТУЮ карточку */

.site-content .materials-row .material-opened:hover .content-wrap {
    opacity: var(--content-opacity-open-hover-panel-16)!important;
}

/* Прозрачность блока с описанием при наведении на ЗАКРЫТУЮ карточку */

.site-content .materials-row .material-closed:hover .content-wrap {
    opacity: var(--content-opacity-closed-hover-panel-16)!important;
}

/* Прозрачность блока с описанием при наведении на ЗАКРЫТУЮ карточку АВТОТРЕНИНГА */

.site-content .materials-row .material-inaccessible:hover .content-wrap {
    opacity: var(--content-opacity-auto-hover-panel-16)!important;
}

/* Настройки блока Описания */

.site-content .materials-row .material-item .flex-wrap .col-content .content-wrap,
.site-content .materials-row.one-in-line .material-item .flex-wrap .col-content .content-wrap {
	/* ориентация контента в блоке описания */
	display: flex;
	flex-flow: column;
	gap: 15px;

	/* выравниваем блок описания */
	align-self: center;
	text-align: center;

	border: none;

	/* чтобы длинный текст не скрывался за своим блоком */
	/* если используем это правило - обязательно ограничиваем количество строк */
	overflow: visible;
}

/* Отступы блока описания на разных экранах */
/* корректировка в зависимости от толщины обводки карточки */

@media (min-width: 1400px) {

.site-content .materials-row .material-item .flex-wrap .col-content .content-wrap,
.site-content .materials-row.one-in-line .material-item .flex-wrap .col-content .content-wrap {
	padding: 20px calc(30px + var(--border-width-panel-16));
}
}

@media (min-width: 1200px) and (max-width: 1399px) {

.site-content .materials-row .material-item .flex-wrap .col-content .content-wrap,
.site-content .materials-row.one-in-line .material-item .flex-wrap .col-content .content-wrap {
	padding: 20px calc(20px + var(--border-width-panel-16));
}
}

@media (min-width: 768px) and (max-width: 1199px) {

.site-content .materials-row .material-item .flex-wrap .col-content .content-wrap,
.site-content .materials-row.one-in-line .material-item .flex-wrap .col-content .content-wrap {
	padding: 20px calc(15px + var(--border-width-panel-16));
}
}

@media (min-width: 320px) and (max-width: 767px) {

.site-content .materials-row .material-item .flex-wrap .col-content .content-wrap,
.site-content .materials-row.one-in-line .material-item .flex-wrap .col-content .content-wrap {
	padding: 10px 10px;
}
}

/* Добавляем ИКОНКУ перед заголовком */
/* --------------------------------- */

.site-content .materials-row .material-item .flex-wrap .col-content .content-wrap:before {
	content: var(--icon-back-panel-16);
	color: var(--icon-back-color-panel-16);
	font-family: "icomoon" !important;
	line-height: normal;
}

/* Скрываем ИКОНКУ перед заголовком на маленьких экранах */

@media (min-width: 320px) and (max-width: 767px) {

.site-content .materials-row .material-item .flex-wrap .col-content .content-wrap:before {
	display: none;
}
}

/* Размер ИКОНКИ на разных экранах */

@media (min-width: 1400px) {

.site-content .materials-row .material-item .flex-wrap .col-content .content-wrap:before {
	font-size: var(--icon-back-size-panel-16);
}
}

@media (min-width: 1200px) and (max-width: 1399px) {

.site-content .materials-row .material-item .flex-wrap .col-content .content-wrap:before {
	font-size: calc(var(--icon-back-size-panel-16) / 1.3);
}
}

@media (min-width: 992px) and (max-width: 1199px) {

.site-content .materials-row .material-item .flex-wrap .col-content .content-wrap:before {
	font-size: calc(var(--icon-back-size-panel-16) / 1.4);
}
}

@media (min-width: 768px) and (max-width: 991px) {

.site-content .materials-row .material-item .flex-wrap .col-content .content-wrap:before {
	font-size: calc(var(--icon-back-size-panel-16) / 1.3);
}
}

@media (min-width: 460px) and (max-width: 767px) {

.site-content .materials-row .material-item .flex-wrap .col-content .content-wrap:before {
	font-size: calc(var(--icon-back-size-panel-16) / 2);
}
}	

@media (min-width: 320px) and (max-width: 459px) {

.site-content .materials-row .material-item .flex-wrap .col-content .content-wrap:before {
	font-size: calc(var(--icon-back-size-panel-16) / 2);
}
}

/* Добавляем КНОПКУ после описания */
/* ------------------------------- */

/* Общие настройки */

.site-content .materials-row .material-item .flex-wrap .col-content .content-wrap:after {
	padding: 10px 20px;
	margin-top: 10px;
	line-height: normal;
	border-radius: var(--button-back-radius-panel-16);
	align-self: center;
	font-family: tahoma, arial, helvetica, sans-serif;
	width: max-content;
	text-transform: uppercase;
	transition: all 0.25s ease;
}

/* Текст кнопки на обратной стороне ОТКРЫТОГО материала */
/* Текст кнопки на обратной стороне материала АВТОТРЕНИНГА */

.site-content .materials-row .material-opened .flex-wrap .col-content .content-wrap:after,
.site-content .materials-row .material-inaccessible .flex-wrap .col-content .content-wrap:after {
	content: var(--text-button-back-open-panel-16);
	color: var(--text-button-back-color-open-panel-16);
	background: var(--button-back-bg-open-panel-16);
}

/* Текст кнопки на обратной стороне ЗАКРЫТОГО материала */

.site-content .materials-row .material-closed .flex-wrap .col-content .content-wrap:after {
	content: var(--text-button-back-close-panel-16);
	color: var(--text-button-back-color-close-panel-16);
	background: var(--button-back-bg-close-panel-16);
}

/* Размер кнопки на разных экранах */

@media (min-width: 1400px) {
	
.site-content .materials-row .material-item .flex-wrap .col-content .content-wrap:after {
	font-size: var(--text-button-back-size-panel-16);
}
}

@media (min-width: 1200px) and (max-width: 1399px) {

.site-content .materials-row .material-item .flex-wrap .col-content .content-wrap:after {
	font-size: calc(var(--text-button-back-size-panel-16) / 1.2);
}
}

@media (min-width: 768px) and (max-width: 1199px) {

.site-content .materials-row .material-item .flex-wrap .col-content .content-wrap:after {
	font-size: calc(var(--text-button-back-size-panel-16) / 1.3);
}
}

@media (min-width: 768px) and (max-width: 991px) {

.site-content .materials-row .material-item .flex-wrap .col-content .content-wrap:after {
	font-size: calc(var(--text-button-back-size-panel-16) / 1.2);
}
}

@media (min-width: 460px) and (max-width: 767px) {

.site-content .materials-row .material-item .flex-wrap .col-content .content-wrap:after {
	font-size: calc(var(--text-button-back-size-panel-16) / 1.7);
}
}	

@media (min-width: 320px) and (max-width: 459px) {

.site-content .materials-row .material-item .flex-wrap .col-content .content-wrap:after {
	font-size: calc(var(--text-button-back-size-panel-16) / 1.7);
}
}

/* Эффект КНОПКИ при наведении */

.site-content .materials-row .material-item .flex-wrap .col-content .content-wrap:hover:after {
	/* filter: brightness(1.05); */
	/* scale: 1.05; */
	/* transform: translateY(-3px); */
}

/* Заголовок материала */

.site-content .materials-row .material-item .content-wrap .title,
.site-content .materials-row.one-in-line .material-item .content-wrap .title {
	color: var(--title-color-panel-16)!important;
	font-weight: var(--title-weight-panel-16);
	font-family: tahoma, arial, helvetica, sans-serif;
	font-size: var(--title-size-panel-16);
}

/* Количество строк в заголовке материала */
/* -------------------------------------- */

/* Общие настройки */

.site-content .materials-row .material-item .flex-wrap .content-wrap .title {
	overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
	/* перенос текста */
    hyphens: auto;
}

/* Описание материала */

.site-content .materials-row .material-item .content-wrap .description {
	color: var(--description-color-panel-16)!important;
	margin: 0;
}

@media (min-width: 1400px) {

.site-content .materials-row .material-item .flex-wrap .content-wrap .title {
    -webkit-line-clamp: 2;
    line-clamp: 2;
	/* переносим буквы */
	word-break: break-all;
}
}

@media (min-width: 1200px) and (max-width: 1399px) {

.site-content .materials-row .material-item .flex-wrap .content-wrap .title {
    -webkit-line-clamp: 2;
    line-clamp: 2;
	/* переносим буквы */
	word-break: break-all;
}
}

@media (min-width: 992px) and (max-width: 1199px) {

.site-content .materials-row .material-item .flex-wrap .content-wrap .title {
    -webkit-line-clamp: 2;
    line-clamp: 2;
	/* переносим буквы */
	word-break: break-all;
}
}

@media (min-width: 768px) and (max-width: 991px) {

.site-content .materials-row .material-item .flex-wrap .content-wrap .title {
    -webkit-line-clamp: 2;
    line-clamp: 2;
	/* переносим буквы */
	word-break: break-all;
}
}

@media (min-width: 460px) and (max-width: 767px) {

.site-content .materials-row .material-item .flex-wrap .content-wrap .title {
    -webkit-line-clamp: 2;
    line-clamp: 2;
	/* переносим буквы */
	word-break: break-all;
}
}	

@media (min-width: 320px) and (max-width: 459px) {

.site-content .materials-row .material-item .flex-wrap .content-wrap .title {
    -webkit-line-clamp: 2;
    line-clamp: 2;
	/* переносим буквы */
	word-break: break-all;
}
}

/* Количество строк в описании урока на разных экранах */
/* --------------------------------------------------- */

/* Общие настройки */

.site-content .materials-row .material-item .flex-wrap .content-wrap .description > p {
	overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
	/* перенос текста */
    hyphens: auto;
	margin: 0;
}

@media (min-width: 1400px) {

.site-content .materials-row .material-item .flex-wrap .content-wrap .description > p {
    -webkit-line-clamp: 6;
    line-clamp: 6;
}
}

@media (min-width: 1200px) and (max-width: 1399px) {

.site-content .materials-row .material-item .flex-wrap .content-wrap .description > p {
    -webkit-line-clamp: 3;
    line-clamp: 3;
}
}

@media (min-width: 992px) and (max-width: 1199px) {

.site-content .materials-row .material-item .flex-wrap .content-wrap .description > p {
    -webkit-line-clamp: 4;
    line-clamp: 4;
}
}

@media (min-width: 768px) and (max-width: 991px) {

.site-content .materials-row .material-item .flex-wrap .content-wrap .description > p {
    -webkit-line-clamp: 4;
    line-clamp: 4;
}
}

@media (min-width: 460px) and (max-width: 767px) {

.site-content .materials-row .material-item .flex-wrap .content-wrap .description > p {
    -webkit-line-clamp: 3;
    line-clamp: 3;
}
}	

@media (min-width: 320px) and (max-width: 459px) {

.site-content .materials-row .material-item .flex-wrap .content-wrap .description > p {
    -webkit-line-clamp: 3;
    line-clamp: 3;
}
}

/* 6. НАЛОЖЕНИЕ АВТОТРЕНИНГА */
/* ------------------------- */

/* НЕ ПРОЙДЕННЫЙ УРОК АВТОТРЕНИНГА ПРИ НАВЕДЕНИИ */
/* --------------------------------------------- */

/* Убираем наложение */
/* Вместо него будет чёрно-белый эффект обложки */
/* Нужно для эффекта вращения */

.site-content .materials-row .material-item.material-inaccessible:before {
	display: none;
}

/* 7. ИНДИКАТОРЫ МАТЕРИАЛА */
/* ----------------------- */

/* ВЕРХНИЕ ИНДИКАТОРЫ */
/* ------------------ */

/* Порядковый номер */

.site-content .materials-row .material-item .thumbnail-wrap .icons-top .m-icon.count,
.site-content .materials-row.one-in-line .material-item .thumbnail-wrap .icons-top .m-icon.count {
    background: var(--count-bg-panel-16);
    color: var(--count-color-panel-16);
	border-radius: var(--count-radius-panel-16);
}

/* Тип контента */

.site-content .materials-row .material-item .thumbnail-wrap .icons-top .m-icon,
.site-content .materials-row.one-in-line .material-item .thumbnail-wrap .icons-top .m-icon {
    background: var(--type-bg-panel-16);
    color: var(--type-icon-panel-16);
	border-radius: var(--type-radius-panel-16);
}

/* Иконка доступности материала */

.site-content .materials-row .material-item .thumbnail-wrap .icons-top .icons .status-icon {
	background: var(--lock-icon-bg-panel-16);
    padding: 0px;
    border-radius: var(--lock-icon-radius-panel-16);
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Корректировка положения (отступа) верхних индикаторов 
в зависимости от толщины рамки вокруг карточки */

.site-content .materials-row .material-item .thumbnail-wrap .icons-top .icons {
	margin: calc(15px + var(--border-width-panel-16));
}

/* Добавляем НОВЫЕ ЗАМКИ доступности */
/* --------------------------------- */

/* Общие настройки */

.site-content .materials-row .material-opened a:after,
.site-content .materials-row .material-closed a:after,
.site-content .materials-row .material-inaccessible a:after {
	font-family: "icomoon" !important;
	font-size: 2rem;
	background: var(--lock-icon-bg-panel-16);
	display: flex;
    align-items: center;
	justify-content: center;
    padding: 20px;
	line-height: normal;
	width: 40px;
	height: 40px;
    border-radius: var(--lock-icon-radius-panel-16);
	/* Положение нового замка */
	align-self: start;
	position: absolute;
	/* корректировка в зависимости от толщины рамки вокруг карточки */
	bottom: calc(15px + var(--border-width-panel-16));
	left: calc(15px + var(--border-width-panel-16));
}

/* Размер и корректировка положения замка на разных экранах */

@media (min-width: 1200px) and (max-width: 1399px) {

.site-content .materials-row .material-opened a:after,
.site-content .materials-row .material-closed a:after,
.site-content .materials-row .material-inaccessible a:after {
	scale: 0.8;
}
}

@media (min-width: 992px) and (max-width: 1199px) {

.site-content .materials-row .material-opened a:after,
.site-content .materials-row .material-closed a:after,
.site-content .materials-row .material-inaccessible a:after {
	scale: 0.6;
	/* корректировка в зависимости от толщины рамки вокруг карточки */
	bottom: calc(10px + var(--border-width-panel-16));
	left: calc(10px + var(--border-width-panel-16));
}
}

@media (min-width: 768px) and (max-width: 991px) {

.site-content .materials-row .material-opened a:after,
.site-content .materials-row .material-closed a:after,
.site-content .materials-row .material-inaccessible a:after {
	scale: 0.8;
}
}

@media (min-width: 460px) and (max-width: 767px) {

.site-content .materials-row .material-opened a:after,
.site-content .materials-row .material-closed a:after,
.site-content .materials-row .material-inaccessible a:after {
	scale: 0.7;
	/* корректировка без учёта рамки описания, так как на малых экранах она отключена */
	bottom: 5px;
	left: 5px;
}
}	

@media (min-width: 320px) and (max-width: 459px) {

.site-content .materials-row .material-opened a:after,
.site-content .materials-row .material-closed a:after,
.site-content .materials-row .material-inaccessible a:after {
	scale: 0.7;
	/* корректировка без учёта рамки описания, так как на малых экранах она отключена */
	bottom: 5px;
	left: 5px;
}
}

/* АНИМИРУЕМ Новый Замок ПРИ НАВЕДЕНИИ */

.site-content .materials-row .material-opened:hover a:after,
.site-content .materials-row .material-closed:hover a:after,
.site-content .materials-row .material-inaccessible:hover a:after {
	animation: new-lock-animate 1s ease forwards alternate;
}

/* Появление нового замка при наведении */

@keyframes new-lock-animate {
  0% {
	opacity: 0%;
  }
  
  100% {
    opacity: 100%;
  }
}

/* НОВЫЙ ОТКРЫТЫЙ ЗАМОК */

.site-content .materials-row .material-opened:hover a:after {
	content: "\f09c";
	color: #56bf50;
}

/* НОВЫЙ ЗАКРЫТЫЙ ЗАМОК */

.site-content .materials-row .material-closed:hover a:after,
.site-content .materials-row .material-inaccessible:hover a:after {
	content: "\f023";
	color: #FF4B3E;
}

/* НИЖНИЕ ИНДИКАТОРЫ */
/* ----------------- */

.site-content .materials-row .material-item .thumbnail-wrap .icons-bottom,
.site-content .materials-row.one-in-line .material-item .thumbnail-wrap .icons-bottom {
	color: var(--icons-bottom-color-panel-16)!important;
	background: var(--icons-bottom-bg-panel-16);
	width: auto;
	
	/* корректировка закругления в зависимости от закругления карточки и толщины рамки вокруг неё */
	border-radius: 0 10px calc(var(--radius-panel-16) - var(--border-width-panel-16)) calc(var(--radius-panel-16) - var(--border-width-panel-16));
	
	/* корректировка положения в зависимости от толщины рамки вокруг карточки */
	bottom: calc(var(--border-width-panel-16) - 1px);
	left: calc(var(--border-width-panel-16) - 1px);
	
	/* корректировка ширины в зависимости от толщины рамки вокруг карточки */
	margin-right: var(--border-width-panel-16);
}

.site-content .materials-row .material-item .thumbnail-wrap .icons-bottom .icons {
	display: flex;
    flex-flow: wrap;
	padding: 10px;
}

/* Меняем порядок нижних индикаторов */

.site-content .materials-row .material-item .thumbnail-wrap .icons-bottom .icons .right-icons {
	display: flex;
}

.site-content .materials-row .material-item .thumbnail-wrap .icons-bottom .icons .comments {
	order: 1;
}

.site-content .materials-row .material-item .thumbnail-wrap .icons-bottom .icons .views {
	order: 2;
}

.site-content .materials-row .material-item .thumbnail-wrap .icons-bottom .icons .date {
	order: 3;
}

/* Дата публикации */

.site-content .materials-row .material-item .thumbnail-wrap .icons-bottom .icon-calendar:before {
	/* Иконка Календарь */
    content: "\f073";
    font-size: 1.1rem;
}

/* СТАТУСЫ ДЗ - домашнего задания в Автотренинге */
/* --------------------------------------------- */

/* ОБЩИЕ НАСТРОЙКИ СТАТУСОВ ДЗ */

/* Отступы статуса */

.site-content .materials-row .material-item .thumbnail-wrap .icons-bottom .icons .status {
    margin-bottom: 2px;
	margin-right: 10px;
}

/* Отступы нижних индикаторов */

.site-content .materials-row .material-item .thumbnail-wrap .icons-bottom .icons .comments,
.site-content .materials-row .material-item .thumbnail-wrap .icons-bottom .icons .date,
.site-content .materials-row .material-item .thumbnail-wrap .icons-bottom .icons .views,

.site-content .materials-row.one-in-line .material-item .thumbnail-wrap .icons-bottom .icons .comments,
.site-content .materials-row.one-in-line .material-item .thumbnail-wrap .icons-bottom .icons .date,
.site-content .materials-row.one-in-line .material-item .thumbnail-wrap .icons-bottom .icons .views {
    margin: 1px 10px 1px 0px;
}

/* Корректировка положения блока с нижними индикаторами для опции «Одна колонка» */

@media (min-width: 992px) and (max-width: 1399px) {
	
.site-content .materials-row.one-in-line .material-item .thumbnail-wrap .icons-bottom .icons .comments,
.site-content .materials-row.one-in-line .material-item .thumbnail-wrap .icons-bottom .icons .date,
.site-content .materials-row.one-in-line .material-item .thumbnail-wrap .icons-bottom .icons .views {
    float: none;	
}
}

/* Корректировка положения иконки всех статусов ДЗ */

.site-content .materials-row .material-item .thumbnail-wrap .status .icon-file-text-o:before {
	vertical-align: bottom;
}

/* СТАТУС - НЕ НАЧАТ */
/* ----------------- */

.site-content .materials-row .material-item .thumbnail-wrap .icons-bottom .icons .status {
    color: var(--status-color-panel-16);	
}

/* Иконка неначатого статуса ДЗ */

.site-content .materials-row .material-item .thumbnail-wrap .status .icon-file-text-o:before {
	content: var(--icon-not-started-panel-16);
}

/* СТАТУС - ПРОВЕРЯЕТСЯ */
/* -------------------- */

.site-content .materials-row .material-item .thumbnail-wrap .icons-bottom .icons .status.checking {
	color: var(--status-checking-color-panel-16);	
}

/* Иконка проверяемого статуса ДЗ */

.site-content .materials-row .material-item .thumbnail-wrap .status.checking .icon-file-text-o:before {
	content: var(--icon-checking-panel-16);
}

/* СТАТУС - ВЫПОЛНЕНО */
/* ------------------ */

.site-content .materials-row .material-item .thumbnail-wrap .icons-bottom .icons .status.done {
    color: var(--status-done-color-panel-16);
}

/* Иконка выполненного статуса ДЗ */

.site-content .materials-row .material-item .thumbnail-wrap .status.done .icon-file-text-o:before {
	content: var(--icon-done-panel-16);
}

/* СТАТУС - НЕ ВЫПОЛНЕНО */
/* --------------------- */

.site-content .materials-row .material-item .thumbnail-wrap .icons-bottom .icons .status.not-right {
	color: var(--status-not-right-color-panel-16);	
}

/* Иконка невыполненного статуса ДЗ */

.site-content .materials-row .material-item .thumbnail-wrap .status.not-right .icon-file-text-o:before {
	content: var(--icon-not-right-panel-16);
}

/* ГАЛОЧКА ПРОЙДЕННОГО МАТЕРИАЛА НА ОБЛОЖКЕ */
/* ---------------------------------------- */

/* Размер большой галочки пройденного материала на разных экранах */

@media (min-width: 992px) and (max-width: 1199px) {

.site-content .materials-row .material-item .col-thumb.done:after {
	scale: 0.8;
}
}

@media (min-width: 768px) and (max-width: 991px) {

.site-content .materials-row .material-item .col-thumb.done:after {
	scale: 0.8;
}
}

@media (min-width: 320px) and (max-width: 767px) {

.site-content .materials-row .material-item .col-thumb.done:after {
	scale: 0.8;
}
}

/* ПЛАШКИ НА МАТЕРИАЛЕ */
/* ------------------- */

/* ПЛАШКА «ДЗ ПРОВЕРЯЕТСЯ» */
/* ----------------------- */

/* Убираем плашку «ДЗ проверяется» у материала, следующего за реально проверяемым материалом */

.site-content .materials-row .material-inaccessible .mbl-material-checking-holder {
    display: none;
}

/* ПЛАШКА С ТАЙМЕРОМ НА МАТЕРИАЛЕ */
/* ------------------------------ */

/* Блок Заголовка и Таймера */

.site-content .materials-row .material-item .mbl-material-countdown-holder {
	/* убираем плашку с таймером */
	display: none;
}