@charset "utf-8";
/* CSS Document */
*, *:after, *:before {
box-sizing: border-box;
padding: 0;
margin: 0;
transition: .5s ease-in-out; /* добавим плавность переходов для всех элементов страницы*/
}

a {
text-decoration: none;
outline: none;
}
img {
display: block;
width: 100%;
}
h1, h2, h3{
font-weight: bold;
letter-spacing: 1px;
color: #07540e;
}
body {
font-family: 'Open Sans', arial, sans-serif;
font-size: 14px;
color: #373737;
background: #f7f7f7;
}
/* добавим очистку потока для всех контейнеров, внутри которых задано обтекание дочерних элементов */
header:after, .container:after, footer:after, .widget-posts-list li:after, #subscribe:after {
content: "";
display: table; /*выравнивание по вертикали элемента*/
clear: both; /*отмена обтекания элемента с обеих сторон*/
} 
/* стилевой класс, который управляет шириной контейнера сетки*/
.container {
margin: 0 auto;
width: 100%;
max-width: 960px;
padding: 0 15px;
} 


/*стили для шапки*/
header {
width: 100%;
background: white;
box-shadow: 3px 3px 1px rgba(0,0,0,.05);
padding: 15px 0;
margin-bottom: 30px;
position: relative;
}
/* логотип */
.logo {
display: block; 
float: left;
}
.logo span {
font-size: 24px;
color: #333333;
display: inline-block;
width: 30px;
height: 30px;
line-height: 30px;
border-radius: 50%;
margin: 5px 0;
text-align: center;
text-shadow: 2px 2px 1px rgba(0,0,0,.4);
}
.logo span:nth-child(odd) {
background: #ffc107;
}
.logo span:nth-child(even) {
background: #ffc107;
}
.header ul {
list-style: none;
}
/* меню */
#menu {
float: right;
}
#menu li {
display: inline-block;
margin-right: 30px;
}
#menu a {
color: #043b09;
text-transform: uppercase;
letter-spacing: 1px;
font-weight: 600;
display: block;
line-height: 40px;
}
#menu a:hover {
color: #ffc107;
}
#menu li:last-child  {
margin-right: 0;
}

/* кнопка переключения меню, появляющаяся при ширине 768px */
.nav-toggle {
display: none;
position: relative;
float: right;
width: 40px;
height: 40px;
margin-left: 20px;
background: #1a7127;
cursor: pointer;
}
.nav-toggle span {
display: block;
position: absolute;
top: 19px;
left: 8px;
right: 8px;
height: 2px;
background: white;
}
.nav-toggle span:before, .nav-toggle span:after {
content: "";
position: absolute;
display: block;
left: 0;
width: 100%;
height: 2px;
background: white;
}
.nav-toggle span:before {
top: -10px;
}
.nav-toggle span:after {
bottom: -10px;
}
/* класс, который будет добавлен в верхнему меню при нажатии на кнопку и покажет скрытое меню*/
#menu.active {
max-height: 230px;
}
/*конец стилей для шапки*/
/*-----------------------*/


/*стили для блока с основным содержанием*/

.about-container{
	margin: 0 auto;
	max-width: 1060px;	
	position: relative;
	margin-bottom:50px;	
}


.thot-cards{
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-column-gap:55px;
}

.thot-card{
	grid-column: span 1;
	margin-bottom: 50px;	
}
.thot-card-pic{
	margin-bottom: 30px;
}
.thot-card-title{
margin-bottom:20px;	
}

.thot-card-desc{
	margin-bottom:15px;	
}

.thot {
	margin-bottom: 30px;
	width: 100%;
}

.top-center{
	height:100px;
	background: url(../img/fon.png) no-repeat center;
	background-size:cover;
	margin-top: 30px;
}

.top-title{
	padding-top: 25px;
	text-align:center;	
	
}


/* блок для статьи */
.post {
margin-bottom: 35px;
}
.post-content ul{
	padding: 15px;
	margin-left: 25px;	  
}
.post-content p, li {
line-height: 1.5;
padding-bottom: 1em;
}

.post-content li:before {
    color: #9B4723; /* Цвет маркера */
    content: "*"; /* Сам маркер */
    padding-right: 10px; /* Расстояние от маркера до текста */
   }

.post-image {
margin-bottom: 30px;
}
.category {
margin-bottom: 15px;
}
.category a {
color: #9B4723;
text-transform: uppercase;
}
.post-title {
margin-bottom: 12px;
font-size: 20px;
}



/*закончились стили для блока с основным содержанием*/



/* форма отправки сообщений*/
.feedback-form {
position: relative;
width: 100%;
padding: 15px 0;
}
.feedback-form input,textarea {
width: 100%;
display: block;
float: left;
border: 2px solid #EBEBE3;
padding: 0 0 0 10px;
height: 40px;
position: relative;
outline: none;
color: #486073;
font-style: italic;
}
.feedback-form textarea {
	height: 80px;
}
.btn_submit {
padding: 0 15px;
height: 40px;
border: none;
right: 0;
color: #3d7da4;
cursor: pointer;
font-size: 18px;
}

/*стили для футера*/

.footer-link{
    font-size: 14px;
    line-height: 24px;
    color: #ffc107;    
}
.footer-link:hover, .footer-link:focus, .footer-link:active{
    opacity: .75;
}
.form-title{
	font-size: 16px;
    line-height: 24px;
    color: #fff;
}

footer {
padding: 30px 0;
background: #1a7127;
color: white;
}
.footer-col {
width: 33.3333333333%;
float: left;
}

.footer-col:last-child {
text-align: right;
}
.footer-pic{	
	width: 30px;	
	display:inline;
}
/*-------------Слайдер--------------------*/

/* Слайдер */
.slider {
  position: relative;
  overflow: hidden;
}
.slider__wrapper {
  display: flex;
  transition: transform 0.6s ease; /* 0.6 длительность смены слайда в секундах */
}
.slider__item {
  flex: 0 0 25%; /* определяет количество активных слайдов (в данном случае 4 */
  max-width: 25%; /* определяет количество активных слайдов (в данном случае 4 */
}
.slider__content_header {
      position: relative;
    }

    .slider__content_img {
      display: block;
      height: auto;
      max-width: 100%;
    }

    .slider__content_section {
      position: absolute;
      bottom: 0;
      left: 0;
      background: #009688;
      color: #fff;
      padding: 4px 8px;
    }

    .slider__content_title {
      background: #f5f5f5;
      color: #424242;
      white-space: normal;
      font-weight: 700;
      font-size: 20px;
      line-height: 1.3;
      padding: 10px 15px;
      margin: 0;
      height: 52px;
    }


/* СТИЛИ ДЛЯ КНОПОК "НАЗАД" И "ВПЕРЁД" */
.slider__control {
  position: absolute;
  display: none;  
  top: 50%;
  transform: translateY(-50%);
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 40px; /* ширина кнопки */
  height: 50px; /* высота кнопки */ 
  opacity: .5; /* прозрачность */
  background: #000; /* цвет фона */
}
.slider__control_show {
  display: flex;
}
.slider__control:hover,
.slider__control:focus {
  text-decoration: none;
  outline: 0;
  opacity: .9; /* прозрачность */
}
.slider__control_left {
  left: 0;
}
.slider__control_right {
  right: 0;
}
.slider__control::before {
  content: '';
  display: inline-block;
  width: 20px; /* ширина иконки (стрелочки) */
  height: 20px; /* высота иконки (стрелочки) */
  background: transparent no-repeat center center;
  background-size: 100% 100%;
}
.slider__control_left::before {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E");
}
.slider__control_right::before {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E");
}



/*----------------*/
 /*медиа*/
 
 @media (max-width: 768px) {
/* показываем кнопку для переключения верхней навигации */
.nav-toggle {
display: block;
}
header {
padding: 10px 0;
}
/* скрываем верхнее меню, отменяем обтекание, позиционируем его, сместив на высоту шапки сайта */ 
#menu {
max-height: 0;
background: white;
float: none;
position: absolute;
overflow: hidden;
top: 63px;
right: 0;
left: 0;
margin: 0;
padding: 0;
z-index: 3;
}
/* делаем элементы списка блочными, чтобы они располагались друг под другом */
#menu li {
display: block;
text-align: center;
border-bottom: 1px solid #EBEBE3;
margin-right: 0;
}
/* отменяем обтекание левой и правой колонок, устанавливаем им ширину 100%*/
.thot {
width: 100%;
float: none;
}
.widget-post-title {
font-size: 1.5em;
}
.thot-cards{
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-column-gap:55px;
}
}

@media (max-width: 480px) {
/* отменяем обтекание для логотипа и выравниваем по центру*/
.logo {
float: none;
margin: 0 auto 15px;
display: table;
}
.logo span {
margin: 0 2px;
}
/* позиционируем меню на увеличившуюся высоту шапки */
#menu {
top: 118px;
}
/* убираем верхнюю и нижнюю границы и выравниваем кнопку по центру */
.post-footer {
border-top: none;
border-bottom: none;
text-align: center;
}


/* отменяем обтекание для столбцов подвала страницы */
.footer-col {
float: none;
margin-bottom: 20px;
width: 100%;
text-align: center;
}
.footer-col:last-child {
text-align: center;
margin-bottom: 0;
}
.thot-cards{
	display: grid;
	grid-template-columns: repeat(1, 1fr);
	grid-column-gap:55px;
}

}