@media (max-width: 768px) {/* правило запроса для ширины viewport от 768px*/
   /* показываем кнопку для переключения верхней навигации */
   .nav-toggle {
      display: block;/*элемент показывается как блочный*/
   }
   header {
      padding: 10px 0;/* значение полей вокруг содержимого*/
   }
   /* скрываем верхнее меню, отменяем обтекание, позиционируем его, сместив на высоту шапки сайта */
   #menu {
      max-height: 0;/*высота блочного элемента*/
      background: #2f4f4f;/*цвет фона кнопок мобильного меню #2f4f4f - аспидно-серый*/
      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 black;/*толщина 1px стиль жирный и цвет границы черный внизу элемента*/
      margin-right: 0;/*отступа от правого края элемента*/
   }
   /* отменяем обтекание левой и правой колонок, устанавливаем им ширину 100%*/
   .posts-list, aside {
      width: 100%;/*ширина блока растянута на всю страницу*/
      float: none;/*выравнивание элемента отсутствует*/
   }
   .widget-post-title {
      font-size: 1.5em;/* размер шрифта элемента */
   }
}

@media (max-width: 480px) {/* правило запроса для ширины viewport от 480px*/
   /* отменяем обтекание для логотипа и выравниваем по центру*/
   .logo {
      float: none;/*выравнивание элемента отсутствует*/
      margin: 0 auto 15px;/*значение отступа от каждого края элемента*/
      display: table;/*представление -блочная таблица*/
   }
   .logo span {
      margin: 0 2px;/*значение отступа от каждого края элемента*/
   }
   /* позиционируем меню на увеличившуюся высоту шапки */
   #menu {
      top: 118px;/*расстояние от верхнего края родительского элемента*/
   }
   /* позиционируем форму поиска по левому краю */
   #searchform {
      float: left;/*элемент выравнивается по левой стороне*/
      margin-left: 0;/*отступ от левого края элемента*/
   }
   /* убираем верхнюю и нижнюю границы и выравниваем кнопку по центру */
   .post-footer {
      border-top: none;/* толщина, стиль и цвет границы сверху элемента отсутствует*/
      border-bottom: none;/*толщина, стиль и цвет границы внизу элемента отсутствует*/
      text-align: center;/*горизонтальное выравнивание текста в пределах элемента*/
   }
   /* отменяем позиционирование кнопок соцсетей */
   .post-social {
      position: static;/*элемент отображаются как обычно*/
      text-align: center;/*горизонтальное выравнивание текста в пределах элемента*/
      transform: none;/*трансформации элемента нет*/
      margin-top: 20px;/*отступ блока от текста-контента*/
   }
   .widget-post-title {
      font-size: 1.2em;/* размер шрифта элемента */
   }
   /* отменяем обтекание для столбцов подвала страницы */
   .footer-col {
      float: none;/*выравнивание элемента отсутствует*/
      margin-bottom: 20px;/*отступ от нижнего края элемента*/
      width: 100%;/*ширина блока растянута на всю страницу*/
      text-align: left;/*горизонтальное выравнивание текста в пределах элемента*/
   }
}