/* Шапка фон 336633 */
:root {
    --cassiopeia-color-primary: #336633;
    --cassiopeia-color-link: #224faa;
    --cassiopeia-color-hover: #336600;
}

 body {
    min-height: 100vh;
    position: relative;
    background: url(/images/headers/fon.jpg) no-repeat top;
    background-size: cover;
    background-attachment: fixed;
 }
 
.article-info dd {
    padding: 0;
    display: inline-block;
    margin-right: 1em;
}

.h4, .h5, .h6, h4, h5, h6 {
    font-weight: 500;
    line-height: 1.3;
    margin-bottom: 0.5rem;
    margin-top: 0;
}

/* Заголовки */
.h1, h1 {
  font-size: 2rem;
  font-weight: bold;
  font-style: italic;
  color: #333;
}

.h2, h2 {
  font-size: 1.8rem;
  font-weight: bold;
  font-style: italic;
  color: #555;
  font-family: "Sofia sans";
  }

.h3, h3 {
  font-size: 1.2rem;
  font-weight: bold;
  color: #777;
}

/* Текстовий контент */
p {
  font-size: 1.1rem;
  line-height: 1.5;
  color: #444;
}

/* Силки */
a {
  color: #007bff;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

@supports (display:grid) {
	.site-grid {
		  background: linear-gradient(45deg, rgb(238, 251, 195), rgb(62, 150, 2) 70%);
      grid-gap: 0 1em;
		display: grid;
		grid-template-areas: ". banner banner banner banner ." ". top-a top-a top-a top-a ." ". top-b top-b top-b top-b ." ". comp comp comp comp ." ". side-r side-r side-r side-r ." ". side-l side-l side-l side-l ." ". bot-a bot-a bot-a bot-a ." ". bot-b bot-b bot-b bot-b .";
		grid-template-columns: [full-start] minmax(0, 1fr) [main-start] repeat(4, minmax(0, 19.875rem)) [main-end] minmax(0, 1fr) [full-end]
      
 		}
	}
  
@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 .";
		
    	background-image: url("/images/headers/fon.jpg");
    	background-repeat: no-repeat;
  		background-size: cover;
    	-moz-border-radius: 4px;
    	-webkit-border-radius: 4px;
    	border-radius: 4px;
    	padding: 20px;
    	border: 1px solid #000;
    -moz-box-shadow: 0px 0px 6px #000;
    -webkit-box-shadow: 0px 0px 6px #000;
    box-shadow: 0px 0px 12px #333;
	background: -webkit-linear-gradient(45deg, rgb(238, 251, 195), rgb(62, 150, 2) 70%);
	background: -moz-linear-gradient(45deg, rgb(238, 251, 195), rgb(62, 150, 2) 70%);
	background: linear-gradient(45deg, rgb(238, 251, 195), rgb(62, 150, 2) 70%);
  }

.container-header {
	background-color: var(--cassiopeia-color-primary);
	background-image: linear-gradient(0deg, rgb(238, 251, 195), rgb(62, 150, 2) 40%);
	box-shadow: inset 0 5px 5px rgba(0, 0, 0, .03);
	position: relative;
	z-index: 10
}
  
.card-header {
    background-image: linear-gradient(0deg, rgb(238, 251, 195), rgb(62, 150, 2) 20%);
    border-bottom: 1px solid #dfe3e7;
    margin-bottom: 0;
    padding: 0.5rem 1rem;
    text-align: center;
        color:#d3d100;
}
}
  @media (max-width:991.98px) {
	.container-header {
      background: linear-gradient(45deg, rgb(238, 251, 195), rgb(62, 150, 2) 70%);
		position: relative!important;
	}
    
    .container-header {
	background-color: var(--cassiopeia-color-primary);
	background-image: linear-gradient(0deg, rgb(238, 251, 195), rgb(62, 150, 2) 40%);
	box-shadow: inset 0 5px 5px rgba(0, 0, 0, .03);
	position: relative;
	z-index: 10
}
  
.card-header {
    background-image: linear-gradient(0deg, rgb(238, 251, 195), rgb(62, 150, 2) 20%);
    border-bottom: 1px solid #dfe3e7;
    margin-bottom: 0;
    padding: 0.5rem 1rem;
    text-align: center;
        color:#d3d100;
}
}
.com-content-article {
	background-color: rgb(255 255 255);
    border: 3px solid #363;
    margin-bottom: 0;
    padding: 0.5rem 1rem;
    text-align: center;
    border-radius: 10px;
    box-shadow: 0px 16px 10px rgb(0 0 0 / 50%);
}
.com-content-article img {
    height: auto;
    max-width: 100%;
    width: auto \9;
    vertical-align: middle;
    border: none;
	box-shadow: none;
}