/****************************************************************/
/* Сравнение картинок простой вариант
/****************************************************************/
.image-overlay-container {
    position: relative;
    width: 100%;
    max-width: 1320px;
    margin: 0 auto 20px;
  
}

.image-overlay-container img {
    width: 100%;
    height: auto;
    display: block;
}

.image-overlay-container img + img {
    position: absolute;
    top: 0;
    left: 0;
    transition: opacity 0.2s ease;
}

/* Для ПК - hover */
.image-overlay-container img + img:hover { /**/
    opacity: 0;
}

/* Для мобильных - при касании */
.image-overlay-container img + img:active { /**/
    opacity: 0;
}

/* Чтобы эффект не оставался после касания */
@media (hover: hover) {
    .image-overlay-container img + img:active { /**/
        opacity: 1;
    }
}
/****************************************************************/
/* USER CSS */
/****************************************************************/
:root {
--cassiopeia-color-primary: #b3a996;
--cassiopeia-color-link: #2F4F4F;
--cassiopeia-color-hover:  #336699;
--body-font-size: 1.2rem; /* َ Шрифт текста */
}

/* َ Шрифты */
div.page-header H1, div.page-header H2 {
font-weight: 400;
}
/* َ Шрифты верхего меню */

.metismenu.mod-menu .metismenu-item {
font-size: 1.2rem;
}

/* َ поля по бокам */
body {padding: 0 2%;
background-color:#a0afb4;
}

/* َ Тень под меню */
header.container-header {
background-image:none;
box-shadow: 0 3px 3px rgba(0,0,0,0);
}

/* Цвет фона статьи */
div.site-grid {background-color: rgb(242, 240, 236);}

/* Цвет правой колонки */
div.container-sidebar-right {background-color: rgb(250, 248, 244);
border: 1px solid rgb(200,200,200); /* Линия слева от текста */
}

/* َФутер */
footer.container-footer.footer.full-width {
background-image:none;
background-color: rgb(99, 99, 99);
margin-top:0;
}

/* Кнопка Вверх */
a#back-top {
opacity: 0.7;
padding: 12px 14px;
/* background-color: #80796b; */
border-radius: 1.5rem;
position:fixed;
bottom: 15px;
right: 15px;
box-shadow: 2px 2px 3px 0px rgba(0,8,0,0.4);
}

/* Переопределение кнопки поиска, убираем радиус границы в левом нижнем углу поля поиска? задаём ширину поля*/
.mod-finder__search.input-group .awesomplete input{border-radius: 0;width: 275px;}

/* Блог, плашка Читать Дальше */
p.readmore a {
display:block;
overflow: hidden; /* Скрываем линии, чтобы они не выходили за ширину блока заголовка */
margin: 30px 0; /* Отступ сверху и снизу */
background: none;
border: none;
}

p.readmore a:before,
p.readmore a:after {
	content: '';	
	display: inline-block;	
	vertical-align: middle; 

	box-sizing: border-box;
	width: 100%; /* Устанавливаем ширину в 100%, что сделает делает линию равной ширине тега заголовка */
	height: 1px; /* Высота линий */
    background: #b3a996; /* Цвет линий */
	/* border: solid rgba(0,8,0,0.4); Добавляем к линиям границу с цветом основного фона заголовка, для отступа от текста */
	border-width: 0 20px; /* Отступ от текста */
}
p.readmore a:before {
	margin-left: -100%;
}
p.readmore a:after {
	margin-right: -100%;
}

/****************************************************************/
Стандартные элементы HTML
/****************************************************************/

/* Картинка в блоге и статье */
/* div.com-content-category-blog__item.blog-item  img, */
div.com-content-article__body img,
figure.item-image img,
div.item-content  img
{border: 1px solid rgb(115, 150, 150);}

/* таблица в статье с подчеркиванием строки */
table.tr_border_bottom tr {border-bottom: 2px solid rgb(220, 200, 180);}

/* Убрал подчёркивание пробела внешней ссылки */
a i.fa-solid{
  padding-left: 7px;
  text-decoration: none;
}