RAX7

Использовать эту фигуру как SVG clip-path для изображения. css.yoksel.ru/css-and-svg-masks

Есть решение, но оно не работает в ie и edge https://css-tricks.com/solved-with-css-dropdown-menus/

Вот так попробуй https://jsfiddle.net/fco6gvau/

Это не инлайн svg, инлайн это когда прямо в html вставляют <svg>..... </svg>
В less переменную можно вставить как {@bright} lesscss.org/features/#variables-feature
https://codepen.io/anon/pen/MLYLgB?editors=0110

Как вариант: проверять если прокручено до конца документа, то делать последний блок активным.
https://jsfiddle.net/8agLhn3t/

На js можно просто offsetLeft элемента сравнивать с offsetLeft следующего, если больше, то это последний в строке.
Примерно так:
https://codepen.io/anon/pen/aPPbGV

В 117 строке закомментировать this.index = 0; для остановки повтора.
Скорость передается параметром delay конструктору Text в 180 строке.

text = new Text({
        copy: 'Grawer Warszawy',
        delay: 10,
    });

Событие onscroll срабатывает на каждый поворот колесика мышки, и на каждое событие вы пытаетесь анимировать элементы. Анимацию нужно запускать один раз только когда scrollTop проходит точку 890px.
https://codepen.io/anon/pen/PXdzRz?editors=1010

медиа запросы не правильно написаны, из-за этого валидатор ломается и не может разобрать css
должно быть так:

@media screen and (max-width: 767px) {
    .navbar-inverse .navbar-nav .open .dropdown-menu>li>a {
        font-weight: bold;
        color: #af8337;
    }
}

Если сильно упороться, то можно что-то типа такого соорудить:

Не совсем понял чего вы хотите, но почитайте на досуге про флексбокс
https://codepen.io/anon/pen/PXREqX?editors=0100

Можно просто обрезать слайдер через border-radius

Точку перед blok в css пропустили.

В этом примере обводка по моему вообще вручную нарисована

https://codepen.io/Mr2P/pen/Fguqo
https://codepen.io/davidturner/pen/FybaC