iBird Rose

ну как там сделано и делай:

.b-sidebar:before {
    content: '';
    display: block;
    width: 1px;
    height: 100%;
    background: rgba(0,0,0,.08);
    position: absolute;
    top: 0;
    right: 320px;
}

потому что это спан. для toggle без разницы что ты переопределяешь display. меня все span свои на div

ты точно нормально подключаешь эти шрифты. просто может быть такое что ты их не подключаешь. но так как у тебя на компе стоит open sans - он его открывает. тобишь и у остальных - у кого стоит на компе шрифт - открывается нормально

идешь сюда getbootstrap.com/customize/#grid-system и меняешь ширину контейнера
также не забудь поменять брекпоинты здесь getbootstrap.com/customize/#media-queries-breakpoints

всмысле в хаотичном? у вас там 2 слайда всего.
других багов не заметил.
а фишка что кнопка не работает - нужно уменьшить speed. потому что пока анимация не завершиться окончательно - вы не сможете перемотать на следующий слайд.

caniuse.com/#feat=css-backdrop-filter
нет такого
p.s. поверх какого нить фона сработал бы filter blur, но поверх карты такого не сделаете

через :after

h1 {position: relative;}
h1:after {
  content: '';
  display: inline-block;
  width: 100px;
  height: 2px;
  position: absolute;
  bottom: -5px;
  left: 50%;
  transform: translateX(-50%);
  background: red;
}

отсюда fontawesome.io

а что сложного?
вот такой html используй и стилизуй:

<ul>
	<li><span>8 /800/</span> 123 45 67</li>
	<li><span>+7 /473//</span> 256 48 36</li>
	<li><i class="icon-mail"></i> <a href="#">info@сельхоз-корма.рф</a></li>
	<li><i class="icon-call"></i> <a href="#">Заказать обратный звонок</a></li>
</ul>

ну если фон белый будет то просто before и after круги(border-radius: 50%) поставленные на эти места. с z-index больше чем у блока
p.s. чтобы border у кругов был нормальным, надо через transform rotate повернуть их на 45 градусов

upd: косячно получается когда бордер для кругов) https://jsfiddle.net/e3me1zq1/