Anton fon Faust

Во-первых, это не css, а scss.
Во-вторых, возьмите уже скомпилированный css и посмотрите, что у вас за стили к чему применяются.

Проблема в том, что у вас хедер пустой.
Предполагаю, что хедер со стилями у вас пишется через один из ваших js.
В этом и проблема.

можно.. и даже без флексбоксов.
https://jsfiddle.net/anton4ept/84L2a4f5/

Анимация создана из последовательности изображений.
Маски - те же самые изображения в дивах с overflow: hidden и смещением.
Имхо, не сложно делается.

Все верно работает.
Дело в том, что поля :requred у вас являются :invalid, если пусты.

Или избавляться от required, или подключаем javascript для определения пусто в поле или нет.

Например, так:

$('#ACCORDEON').on('hide.bs.collapse', function () {
  $('#ACCORDEON2').collapse('hide');
})

Можно, конечно, попробовать fullpage.js использовать... но что-то мне подсказывает, что замучаетесь)

так как полного кода нет... попробуем полечить по фотографии.

var $scrollTo; // для передачи данных между функциями сохраняем до какого объекта будем скроллить

$("#menu").on("click","a", function (event) {
    event.preventDefault();
    $scrollTo= $($(this).attr('href'));
    $("#menu").collapse(); // сворачиваем меню тут координаты могут поменяться во время сворачивания
});

$('#menu').on('hidden.bs.collapse', function () { // обработчик события уже после того, как меню свернулось
    var top = $scrollTo.offset().top; // получили куда скроллить не в объектах, а в пикселях
    $('body,html').animate({scrollTop: top}, 600);
});

Прошу прощения, но запихивать функцию обработки события в анонимную функцию и передавать туда jQuery(this) - редкостное извращение.
this у вас в обработчике события будет элемент, по которому событие сгенерилось. В обработчике бы и написали $(this).

jQuery(".bx-filter-input-checkbox").on('mousedown', changeCheck);

Но вообще все это благополучно делается без js (см. коммент выше).

ie9 прекрасно поддерживает calc, можно это дело использовать для обеспечения горизонтального расположения.
Кастыль, но работает)

<div>
<div>Иконки</div>
<div>trend guide</div>
</div>
<div><div>shop swimwear</div><div>sale man collection</div><div>boho luxe</div></div>

Все остальное в любом туториале описано.

Ширина прекрасно контролируется с помощью flex-basis и flex-grow/flex-shrink
оттут все русским языком написано

Посмотрите скомпилированный css свой.
У вас

.rangeslider.rangeslider-vertical {
  margin: 20px auto;
  height: 150px;
  max-width: 4px;
}

Позиционирование не прописано.
Абсолютное позиционирование отсчитывает свои координаты от первого родителя с позиционированием отличным от static.

transform: translate3d(Xpx, Ypx, Zpx); а с помощью javascript назначаются подходящие классы по событиям, вот и все.

А если так:
document.getElementById('bg').play();
Работает?
Пути правильно прописаны?

Три стиля:
1 - анимация до центра страницы
2 - анимация - в центре (тряска + infinite)
3 - анимация полета вверх
Смена стилей с помощью javascript по мере загрузки данных, или назначение второго стиля по событию animationend (ищите полифилл для кроссбраузерности) первого стиля и третьего по событию загрузки.

.section-background-image>:not(.bg-color--white)
выбирает все, что является прямым потомком .section-background-image за исключением элементов с классом .bg-color--white