/* ------------------- Надписи и лого ---------------------- */
/* 
um-1 - надпись "Движение  духовного  согласия  и  единения"
um-2 - "Уральский магнит"
um-3 - "Самопознание. Духовный поиск. Творчество"
*/
/* ЦВЕТА */
/*
--body-bg  		-	Цвет фона основного текста
--body-color	- 	Цвет основного текста
--btnbg			-	Цвет кнопки
--btnbgh		-	Цвет кнопки при наведении
--btncolor		-	Цвет текста на кнопке
--btncolorh		- 	Цвет текста на кнопке при наведении
--footerbg		-	Цвет фона в нижнем колонтитуле
--footercolor	-	Цвет текста в нижнем колонтитуле
--headerbg		-	Цвет фона в верхнем колонтитуле
--headercolor	-	Цвет текста в верхнем колонтитуле
--link-color	-	Цвет ссылки
--link-hover-color	Цвет ссылки при наведении
*/

:root {
	--body-bg: rgb(254, 254, 254);
	--body-color: rgb(23, 23, 23);
	--btnbg: rgb(206, 60, 55);
	--btnbgh: rgb(131, 35, 32);
	--btncolor: rgb(254, 254, 254);
	--btncolorh: rgb(254, 254, 254);
	--footerbg: rgb(233, 243, 251);
	--footercolor: rgb(23, 23, 23);
	--headerbg: rgb(255, 255, 255);
	--headercolor: rgb(23, 23, 23);
	--link-color: rgb(13, 94, 155);
	--link-hover-color: rgb(240, 88, 72) !important;
}
/* РАЗМЕРЫ ШРИФТОВ */
/* 
--body-font-size  	- Размер основного текста (rem)
--h1size			- Размер заголовка H1 (rem) 
--h2size			- Размер заголовка H2 (rem) 
--h3size			- Размер заголовка H3 (rem) 
*/ 
/*
:root {
        --body-font-size: 1rem;
        --h1size: 2rem;
        --h2size: 1.7rem;
        --h3size: 1.5rem;
    }
*/
:root {
        --body-font-size: 1rem;
        --h1size: 2rem;
        --h2size: 1.5rem;
        --h3size: 1.2rem;
		--h4size: 1.1rem;
    }
/* ------------------------------------------------------------------ */
/*h1, .h1 {
  font-size: calc(1.375rem + 1.5vw);
}
*/
@media (width >= 1200px) {
  h1, .h1 {
    font-size: var(--h1size);
  }
}
/*
h2, .h2 {
  font-size: calc(1.325rem + .9vw);
}*/

@media (width >= 1200px) {
  h2, .h2 {
    font-size: var(--h2size);
  }
}
/*
h3, .h3 {
  font-size: calc(1.3rem + .6vw);
}*/

@media (width >= 1200px) {
  h3, .h3 {
    font-size: var(--h3size);
  }
}
/*
h4, .h4 {
  font-size: calc(1.275rem + .3vw);
}*/

@media (width >= 1200px) {
  h4, .h4 {
    font-size: var(--h4size);
  }
}

h5, .h5 {
  font-size: 1.05rem;
}

h6, .h6 {
  font-size: 1rem;
}

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

h1,h2,h3,h4,h5,h6{
	color:#072585;
}

.um-1 a, .um-2 a, .um-3 a{
	font-weight:bold;
    text-decoration: none !important;
}

/* уменьшаем размер ЛОГО для малых экранов */
@media screen and (max-width: 575px){
	.um-logo img{
		width: 88.98px !important;
		height:85.02px !important;
	}
}
/* Размеры шрифтов модуля лого и надписей поменьше на малых экранах */
@media screen and (min-width: 576px){
	.um-logo{
		margin-left:6px;
	}
	.um-1{
		font-size:0.7rem;
	}
	.um-2{
		font-size:1.8rem;
	}
	.um-3{
		font-size:0.7rem;
	}
	.um-header-desktop{
		padding-top:2px;
	}
}
/* Размеры шрифтов модуля лого и надписей средние на средних экранах */
@media screen and (min-width: 768px){
	.um-logo{
		margin-left:6px;
	}
	.um-1{
		font-size:0.92rem;
	}
	.um-2{
		font-size:2.4rem;
	}
	.um-3{
		font-size:0.92rem;
		/*margin-top:6px !important;*/
	}
	.um-header-desktop{
		padding-top:2px;
	}
}
/* Размеры шрифтов модуля лого и надписей  максимальные на больших экранах */
@media screen and (min-width: 992px){
	.um-logo{
		margin:16px 0px 16px 24px;
	}	
	.um-1{
		font-size:1.2rem;
	}
	.um-2{
		font-size:3.1rem;
	}
	.um-3{
		font-size:1.2rem;
		/*margin-top:6px !important;*/
	}
	.um-header-desktop{
		padding-top:6px;
	}
}

/* надписи вверху при наведении меняют цвет, как обычные ссылки */
.um-1 a:hover, .um-2 a:hover, .um-3 a:hover{
	color: var(--link-hover-color) !important;
}
.um-1 a,.um-3 a{
	color:#072585 !important;
	text-shadow:-2px -2px 1px #fff,-2px 2px 1px #fff,2px -2px 1px #fff,2px 2px 1px #fff !important;
}
.um-2 a{
	color:#0e44f6 !important;
	text-shadow:-2px -2px 1px #fff,-2px 2px 1px #fff,2px -2px 1px #fff,2px 2px 1px #fff !important;
}
/* картина "Сергий-строитель" */
.um-modkartina img{
	border: 2px solid rgba(255, 255, 255, 0.6);
	border-radius:6px;
}

/* --------------------- Формируем фон страницы -------------------- */
/* прозрачность контейнера хедера и отсутствие фонового изображения */
.container-header {
    background-color: rgb(255 255 255 / 0%);
	background-image: none;
}

/* прозрачность контейнера футера */
.container-footer {
    color: var(--footercolor);
    background-color: rgb(233 243 251 / 0%);
    background-image: none;
}

/* цвет фона в верхней части сайта где название и девиз - не трогать*/
#top > header > div.grid-child.container-below-top{
    /*background-color:rgb(34, 184, 240) !important;*/
	background-image: linear-gradient(180deg, #008cdd 0%, #ffffff 100%);
}

/* цвет фона верхнего меню  - не трогать*/
#top > header > div.grid-child.container-nav{
    background-color:#EBFCFF !important;
}

/* настраивать цвет фона всего тела страницы */
body{
	background-image: linear-gradient(0deg, #ec7076 0%, #1796e0 38%, #f5fbfe 93%) !important;
	background-color:#fff;
	background-size: cover;
	background-attachment: fixed;
}

/* фон центральной части где весь контент */
.container-component>*, .container-sidebar-left>*, .container-sidebar-right>* {
    margin-bottom: 0;
    background-color: #fff !important;
	padding:5px 10px; /* было 20 и 10 */
	background: #FFFFFF !important;
	background: linear-gradient(to top, #FFFFFF 0%, #FFFFFF 100%) !important;
}

/* тогглер меню - гамбургера - цвет его */
.container-header .navbar-toggler {
    color: #048ede;
    cursor: pointer;
    border: 1px solid #fff;
}
/* отступы в центральной части */
#top > div > div > main > div{
	padding: 10px;
}

/* -------------------- цвета меню верхнего ----------------------*/
.container-header .mod-menu {
	color: var(--cassiopeia-color-link);
	list-style: none;
}
/* цвет прямоугольника ссылки меню */
.container-header .mod-menu :hover{
	background-color: white;
	list-style: none;
}
/* цвет ссылки меню при наведении мыши */
.mod-menu a:hover{
	color: var(--link-hover-color) !important;
 }

/* цвет ссылок подменю */
.navbar-collapse ul.mod-menu ul.mm-collapse.mm-show a{
	color: var(--cassiopeia-color-link);
}
/* цвет фона ссылок подменю */
ul.mm-collapse.mm-show{
	background-color: #EBFCFF !important;
}


/* -----------------  Футер ------------------------ */
.footer .grid-child{
	background-color:rgb(235, 252, 255) !important;
}

/* Размер и вес шрифта заголовков в футере */
#mod-custom315 > div > div:nth-child(1) > div > div:nth-child(1), #mod-custom315 > div > div:nth-child(2) > div > div:nth-child(1),#mod-custom315 > div > div:nth-child(3) > div > div:nth-child(1),#mod-custom315 > div > div:nth-child(4) > div > div:nth-child(1){
	font-weight:800;
	font-size:1.1rem;
	text-transform:uppercase;
}
/* Отступы в футере */
.footer .grid-child {
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem 2.0em;
}
/* цвета ссылок в футере */
.footer a{
	color: var(--link-color) !important;
}
.footer a:hover{
	color: var(--link-hover-color) !important;
}

/* отступ слева для изображения, указанного как изображение вводного текста материала */
.intro-blog{
	padding-left: 10px !important;
}

/* отступ в форме умного поиска - иначе там все слито */
.form-control {
    margin-left: 10px;
}
/* 
позиция подписи под поолными изображениями Sp Easy Image Gallery - если absolute - то закрывает часть изображения 
*/
.speasyimagegallery-image-content {
    position: relative !important;
}
/* убираю серый цвет в breadcrumbs*/
.breadcrumb {
    background-color: transparent;
    margin-bottom: 0;
}

/* 
убираю отступ после breadcrumbs - может быть придется отменить это правило, если на мобильных будет отображаться неправильно 
z-index  ставит элементы компонента и сайдбаров выше, чем фоновый div (см. ниже, там z-index 0)
*/

.container-component>:first-child, .container-sidebar-left>:first-child, .container-sidebar-right>:first-child, .container-component>*+*, .container-sidebar-left>*+*, .container-sidebar-right>*+* {
    margin-top: 0;
	z-index: 1;
}
/* 
фоновый div для компонента и сайдбаров 
z-index ставит этот фоновый div ниже, чем элементы компонента и сайдбаров (см. выше, там z-index 1)
*/
.fon {
	grid-area: 1 / 2 / 5 / 6;
	background-color: rgba(255, 255, 255, 1);
	z-index: 0;
}
/* чтобы белый div , который под сайдбарами и компонент - не заслонял breadcrumbs */
.container-top-a{
	z-index: 2;
}

/* свойства элементов модулей в сайдбаре правом */
/* формат заголовка модуля */
.um-mod-zag {
	margin-bottom: 10px;
	font-size: 1.2rem;
	font-weight: 500;
	color:#000;
	text-align: center;
}
/* заголовок вертикального меню */
.um-mod-zag2 {
	margin-bottom: 10px;
	font-size: 1.2rem;
	font-weight: 600;
	color:#072585 !important;
	text-align: left;
}
/* вид ссылки в меню, которое в модуле */
.um-mod a{
	font-size: 1rem;
	font-weight: 400;
	text-decoration: none;
}
/* бордеры и отступы модуля */

.um-mod {
    border-style: dotted;
    border-color: #cbcdce;
    border-width: 1px;
    border-radius: 0;
}
/* выравниваю верх модулей с верхом заголовка */
.moduletable.um-mod {
    margin: 20px 10px;
}
/* выравниваю description галерей относительно меню и фоток */
p.greetings {
    margin: 10px 5px 0px 15px;
}

/* ссылка в модуле при наведении мыши */
.um-mod a:hover{
	color: var(--link-hover-color) !important;
}

.um-mod-noborder {
	border:none;
}

.um-list > ul li{
	margin: 10px 0px;
}
	
/*li.nav-item > divider.deeper.parent > span */
.um-razd {
	font-size: 1rem;
	font-weight: 500;
	color:#000;
}

/* отступы для изображения статьи на главной, которое указано, как изображение вводного текста */
#top > div > div.grid-child.container-component > main > div > div.blog-items > div > figure > a > img {
	margin-left: 10px !important;
	width: 240px !important;
}

/* добавочка к стандартному правилу, чтобы был перенос длинных строк в меню */
.metismenu.mod-menu .metismenu-item>span, .metismenu.mod-menu .metismenu-item>a, .metismenu.mod-menu .metismenu-item>button {
    white-space: pre-wrap;
}

/* Размер текстов description в SP EASY IMAGE GALLERY - иначе слишком мелко...*/
.speasyimagegallery-album-description {
    font-size: 1rem !important;
}

.tags .list-inline-item {
    margin: 0.1rem;
}


.scrollable {
  max-height: 100px; /* Установленная максимальная высота */
  overflow-y: auto; /* Прокрутка активируется при необходимости */
}

.scrollable-150 {
  max-height: 150px; /* Установленная максимальная высота */
  overflow-y: auto; /* Прокрутка активируется при необходимости */
}

.video{
	background-color: rgb(255, 255, 255, 0) !important;
	background-image: none !important;
}
/*
<div class="scrollable">
<p>Фильмы "Полет в Неизвестность" и "Рождение" сделаны в технике компьютерной графики. Это, так сказать, взгляд изнутри и на то, что внутри. "Полет Единого к Единому", полет в неизвестное, небывалое.</p>
<p>И путь. В этот мир каждый из нас приходит с какой-то целью. Каждый из нас несет в себе мечту о нем, мечту Высшего. И вот, не зная, что нас ждёт Там, каждый из нас делает шаг...</p>
</div>

*/


/* так по идее можно задать стиль для все главной страницы, если задан CSS-класс um-homepage ссылки */
/*
.um-homepage .blog-items img{
	width: 240px !important;
	margin: 5px !important;
}
*/
/* так можно задать ширину вообще всех изображений вводного текста на сайте */
/*
#top > div > div.grid-child.container-component > main > div > div.blog-items img{
	width:240px !important;

}
*/

/* так можно задать ширину изображения самого верхнего материала на странице. Работает для изображения, которое указано, как изображение вводного текста */
/* #top > div > div.grid-child.container-component > main > div > div.blog-items.items-leading > div > figure > a > img{
	width:50% !important;
}
*/