Elwen

Попробуйте отключить у слайдера с превью centerMode, что бы слик не выпихивал активный слайд в центр.

Скорее всего это связано с настройками browser-sync. Проверьте какие пути вы указываете при подключении шрифтов и куда смотрит browser-sync.
Лучше всего подключить файлы/стили и т.п. так, что бы работали без запуска чего-либо и уже под это настроить browser-sync.

Задайте блокам, которые должны быть анимированы, специальные классы или id, в которых анимация и назначена.
Из плюсов: меньше наследования, чище код и возможность повторно использовать анимацию при необходимости.

Или задавайте анимацию с жестким указанием наследования, например:

.parent > .left-block{...}
.parent > .right-block{...}

Этот способ лучше использовать если у вас уникальная анимация для этих блоков и больше она нигде использоваться не будет.

Сам html5shiv актуален (да, увы), а вот googlecode.com закрыли. Найти плагин можно на гитлабе.

Если Вы хотите изменить именно толщину частей, то вам надо смотреть 65-67 строки js:

this.arc = d3.svg.arc()
   .outerRadius(radius * 0.8)
   .innerRadius(radius * 0.4);

outerRadius - величина внешнего круга
innerRadius - величина внутреннего круга
Разница между ними и есть диаграмма.

Например, диаграмма без дырки будет:

this.arc = d3.svg.arc()
   .outerRadius(radius * 0.8)
   .innerRadius(radius * 0);

Попробуйте сменить способ подключения шрифта. В вашем фидле у меня тоже отображается только regular и bold. Если же подключить шрифты, не как внешний ресурс, а использовать @import или <link>, то все отображается как надо.

https://jsfiddle.net/z3xt0pye/ - import
https://jsfiddle.net/czLe5ya7/1/ - link

Позиционировать очень просто:
.ls-bottom-nav-wrapper{text-align:right;}