/* Измените некоторые корневые цвета и настройки документа */

:root {

    --cassiopeia-color-primary: #f2e7d2;
    --cassiopeia-color-link: #333652;
    --cassiopeia-color-hover: #f2e7d2;

    --cassiopeia-font-weight-headings: 700;
    --cassiopeia-font-weight-normal: 400;
}


/* Используйте импортированный шрифт (см. Первые строки документа) на странице: В Google вы также можете найти инструкцию CSS по использованию шрифта. Если вы поместите это в элемент body, то шрифт будет использоваться на всем веб-сайте. */

body {
    color: #573622;
    font-size: 16px;
}

/* Раскрасьте выпадающее меню в меню классом .metismenu.mod-menu .mm-collapse */

.metismenu.mod-menu .mm-collapse {
    background: #90ADC6;
}

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

.metismenu.mod-menu .mm-toggler {
    color: #333652;
}


/* По ссылкам в выпадающем меню вы должны обращаться к ним индивидуально */

.metismenu.mod-menu .mm-collapse .metismenu-item a {
    color: #fff;
}

/* Модули имеют класс card, поэтому вы управляете ими с помощью .card - если вы хотите управлять только определенным модулем, вы можете предоставить модулю собственный класс CSS в настройках, а затем управлять им с помощью этого */

.card {
    box-shadow: 6px 2px 9px 0px rgba(0, 0, 0, 0.35);
    -webkit-box-shadow: 6px 2px 9px 0px rgba(0, 0, 0, 0.35);
    -moz-box-shadow: 6px 2px 9px 0px rgba(0, 0, 0, 0.35);
}

.card-header {
    text-align: center;
    font-size: 20px;
    background-color: #573622;
    color: white;
}

.card-body {
    font-size: 18px;
    background-color: #E9EAEC;
}

/* Поле поиска */
.form-control {
   margin: 0px;
}

.metismenu.mod-menu .metismenu-item>a {
  color:#333652;
}

/* Модули находятся на разных позициях модулей в шаблоне Cassiopeia, тогда модули получают в дополнение к card также позицию в качестве имени класса, например main-top - поэтому, если вы хотите изменить все модули на main top, вы берете .main-top.card */

.main-top.card {
  box-shadow: 6px 2px 9px 0px rgba(0, 0, 0, 0.35);
    -webkit-box-shadow: 6px 2px 9px 0px rgba(0, 0, 0, 0.35);
    -moz-box-shadow: 6px 2px 9px 0px rgba(0, 0, 0, 0.35);
    background: #e1e9f5;
}

.metismenu.mod-menu .metismenu-item.divider:not(.parent) {
    border-right: 2px solid #333652;
}

/* Заголовки - это html-элементы, основной заголовок - h1, затем идут h2, h3, h4 и так далее. Вы управляете html-элементом, просто написав имя перед ним */
.h1 {
    text-shadow: 2px 2px 8px rgba(150, 150, 150, 1);
    color: rgba(119, 9, 121, 1);
    font-size: 1.4rem;
}

/* В Joomla большинство кнопок имеют класс btn-primary - в инспекторе элементов вы можете проверить, действительно ли кнопка, которую вы хотите раскрасить, имеет этот цвет. */

.btn {
  background-color: #573622;
  color: #e9eaec;
}

.btn-my {
  font-size: 1.4rem;
  background-color: #573622;
  border-radius: 2.0rem;
  color: #e9eaec;
  margin: 5px;
  cursor: pointer;
  display: inline-block;
  border: 0px solid #fff;
  font-weight: 400;
  line-height: 1.5;
  padding: 0.6rem 1rem;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  box-shadow: 6px 2px 9px 0px rgba(0, 0, 0, 0.35);
    -webkit-box-shadow: 6px 2px 9px 0px rgba(0, 0, 0, 0.35);
    -moz-box-shadow: 6px 2px 9px 0px rgba(0, 0, 0, 0.35);
  width: 250px;
}

.blog-item {
 box-shadow: 6px 2px 9px 0px rgb(0 0 0 / 35%);
 -webkit-box-shadow: 6px 2px 9px 0px rgb(0 0 0 / 35%);
 -moz-box-shadow: 6px 2px 9px 0px rgba(0, 0, 0, 0.35);  
}

.item-content {
  padding-top: 15px;
  padding-bottom: 15px;
  padding-right: 15px;
  padding-left: 15px;
}


/* Нижний колонтитул страницы Cassiopeia имеет класс "нижний колонтитул", с помощью которого вы можете им управлять.нижний колонтитул*/

.footer {
    background-color: #ffd000;
    color: #333652;
}

a {
 color: #333652;
}

a:hover {
    color: #573622;
}

.container-banner .banner-overlay .overlay {
    background-color: rgb(255 255 255 / 0%);
}

video {
    width: 100%;
    height: auto;
    max-height: 640px;
    margin: 0 auto;
}