:root {
  --cassiopeia-color-primary: darkred;
  --cassiopeia-color-hover: red;
  --cassiopeia-color-link: darkblue;
}

body {
  background-color: #f5f5f5;
  background-image: url(/media/templates/site/cassiopeia_child/images/bg-white.png);
  background-repeat: repeat-y;
  background-position: center;
}

.container-header {
  background-color: transparent;
  background-image: none;
}

.container-header .grid-child {
  padding: 0.5rem 0;
  max-width: 1024px;
}

.container-header .navbar-brand,
.navbar-brand img {
  width: 100%;
}
.container-header .mod-menu {
  color: #717171;
}

.container-header .navbar-toggler {
 color: var(--cassiopeia-color-primary, darkred)
}

.site-grid {
  grid-template-columns: [full-start] minmax(0,1fr) [main-start] repeat(4,minmax(0,15.25rem)) [main-end] minmax(0,1fr) [full-end];
  grid-template-areas:
    ". side-r side-r side-r side-r ." 
    ". side-l side-l side-l side-l ." 
    ". banner banner banner banner ." 
    ". top-a  top-a  top-a  top-a  ." 
    ". top-b  top-b  top-b  top-b  ." 
    ". comp   comp   comp   comp   ." 
    ". bot-a  bot-a  bot-a  bot-a  ." 
    ". bot-b  bot-b  bot-b  bot-b  .";
}

@media (min-width: 992px) {
  .site-grid {
    grid-template-areas:
      ". banner banner banner banner ." 
      ". top-a  top-a  top-a  top-a  ." 
      ". top-b  top-b  top-b  top-b  ." 
      ". side-l comp   comp   side-r ." 
      ". bot-a  bot-a  bot-a  bot-a  ." 
      ". bot-b  bot-b  bot-b  bot-b  .";
  }
}

.mod-list li .mod-menu__sub {
  display: none;
}

.mod-list li.active .mod-menu__sub {
  display: block;
}

.nav {
  width: 100%;
}

.mod-list li {
  padding: 0;
}

.mod-list li a {
  display: block;
  padding: 0.25em;
  color: #444;
}

.mod-list li.active > a {
  font-weight: bold;
}

.mod-list li a:hover {
  background-color: #f7f7f7
}

h1, .h1 {
  color: #0d4c89;
  border-bottom: solid 1px #ddd;
  font-family: Arial;
  font-size: 1.6rem;
  padding: 5px;
}

h2, .h2 {
  font-size: 1.4rem;
}

h3, .h3 {
  font-size: 1.2rem;
}

.blog-item {
  margin-bottom: 2rem;
}