Elwen

Довольно маленькое количество web шрифтов имеют oblique как таковое. И если его нет в семействе (или не подключен), то браузеры будут воспринимать oblique как italic.

Если вы хотите использовать на странице несколько .progress-bar, то необходимо использовать $.each, что бы код пробежался по каждому блоку. Сейчас код находит первый элемент, проверяет его ширину и применяет стили ко всем блокам с заданными параметрами.
Если же у вас будет только один .progress-bar на странице, то тестируйте используя один .progress-bar, изменяя его ширину.

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

Можно использовать linear-gradient в background-image. Пример: https://codepen.io/nxworld/pen/oGwxaP

Трансформируйте css в scss и импортите его. Поскольку любой валидный css - это валидный scss, то достаточно изменить расширение файла. В свою очередь scss и sass вполне совместимы.
Если вам не важна очередь подключения стилей, которые есть в css, то вы также можете добавить шаг в ваш gulpfile с конвертацией css в scss и объединять scss и sass через gulp.

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

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

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

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

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

Вариант A:

p + ul {
    margin-top: -1em;
}

Вариант B:

p {
    color: #404040;
    margin: 0;
}
p + p {
    margin-top: 1em;
}
ul {
    margin: 0;
}