header {
   width: 100%;/*блок растянут на всю ширину веб-страницы*/
   background: #2f4f4f;/* цвет блока меню #2F4F4F - аспидно-серый*/
   box-shadow: 3px 3px 1px rgba(0, 0, 0, .05);/* Параметры тени */
   padding: 15px 0;/*значение полей вокруг содержимого блока(вертикаль 15px, горизонталь 0*/
   margin-bottom: 30px;/*отступ от нижнего края элемента*/
   position: relative;/*положение элемента устанавливается относительно его исходного места*/
}
/* логотип */
.logo {
   display: block;/*элемент показывается как блочный*/
   float: left;/*элемент выравнивается по левой стороне*/
}
/* меню */
#menu {
   float: right;/*элемент выравнивается по правой стороне*/
}
#menu li {
   display: inline-block;/*элемент обтекает другими  элементами страницы*/
   margin-right: 30px;/*отступа от правого края элемента*/
}
#menu a {
   color: #f5f5f5;/*цвет теста меню #f5f5f5 - дымчато-белый*/
   text-transform: uppercase;/*символы текста становятся прописными (верхний регистр)*/
   letter-spacing: 1px;/*интервал между символами в пределах элемента*/
   font-weight: 600;/* насыщенность цвета - 600 - жирное начертание */
   display: block;/*элемент показывается как блочный*/
   line-height: 40px;/*межстрочный интервал текста*/
}
#menu a:hover {
   color: #2f4f4f;/* цвет верхней полосы разделителей блока "продолжить чтение" */
}
#menu li:last-child {
   margin-right: 0;/*отступа от правого края элемента*/
}
/* форма поиска */
#searchform {
   float: right;/*элемент выравнивается по правой стороне*/
   margin-left: 46px;/*отступ от левого края элемента*/
   display: inline-block;/*элемент обтекает другими  элементами страницы*/
   position: relative;/*положение элемента устанавливается относительно его исходного места*/
}
#searchform input {
   width: 170px;/*ширина блока*/
   float: left;/*элемент выравнивается по левой стороне*/
   border: none;/*бордюра(границы) нет*/
   padding-left: 10px;/*значение поля от левого края содержимого элемента*/
   height: 40px;/*высота блочного элемента*/
   overflow: hidden;/*отображается только область внутри элемента, остальное скрыто*/
   outline: none;/*цвет, стиль и толщина внешней границы отменены*/
   color: #9E9C9C;/*цвет вводимого пользователем текста #9E9C9C - перламутровый светло-серый*/
   font-style: italic;/*шрифт вводимого пользователем текста - наклонный*/
}
#searchform button {
   background: transparent;/*устанавливает прозрачный фон*/
   height: 40px;/*высота блочного элемента*/
   border: none;/*бордюра(границы) нет*/
   position: absolute;/*указывает, что элемент абсолютно позиционирован*/
   right: 10px;/*расстояние от правого края родительского элемента*/
   color: black; /*цвет текста черный*/
   cursor: pointer;/*устанавливает форму курсора, когда он находится в пределах элемента*/
   font-size: 18px;/* размер шрифта элемента */
}
#searchform input:focus {
   outline: 2px solid #EBEBE3;/*цвет, стиль и толщина внешней границы толщина 2px жирная цвет-#EBEBE3-Лесной волк*/
}
/* кнопка переключения меню, появляющаяся при ширине 768px */
.nav-toggle {
   display: none;/*позиционирование отсутствует*/
   position: relative;/*положение элемента устанавливается относительно его исходного места*/
   float: right;/*элемент выравнивается по правой стороне*/
   width: 40px;/*ширина блока*/
   height: 40px;/*высота блочного элемента*/
   margin-left: 20px;/*отступ от левого края элемента*/
   background: black;/*цвет фона черный*/
   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: 123px;/*высота блочного элемента*/
}