Aleksey Solovyev

А в чем состоит задача? Наклонить блоки? transform: skewY(20deg) вполне справляется с этой задачей + поддержка браузерами есть + адаптивность решается % величинами

Сразу извинюсь за говнокод (совсем худо чет мне сейчас), но для показа идеи сойдет: https://jsfiddle.net/ejoqLu7m/1/

1. Создаете блок, который смещаете по оси Y на N градусов
2. Внутри создаете блок, который смещаете по оси Y на -N градусов.
3. Первому блоку задаете oveflow: hidden
4. Вопрос адаптивности решаете шириной в % (50% в нашем примере)

Адаптивно\кросбраузерно. В2 картинка по аналогии делается.

Или я задачу не так понял?

Куча способов есть от плевдо-элементов до background...
Пусть будет самый тупорный: https://jsfiddle.net/aovpdwvz/2/

Родителю - display: flex. Кнопкам - flex: 1
https://jsfiddle.net/19zL1pey/1/

https://www.fontsquirrel.com/tools/webfont-generator - это простой генератор на gulp(наверно) написанный. Он загружает файл. Имя файла без расширения помещает в название, полное имя файла помещает в url. На выходе и получаем Ваш код.

Если хотите использовать один шрифт с разной "толщиной", то поменяйте название и font-weight

@font-face {
    font-family: 'fira_sans';
    src: url('firasansbold.eot');
    src: url('firasansbold.eot?#iefix') format('embedded-opentype'),
         url('firasansbold.woff2') format('woff2'),
         url('firasansbold.woff') format('woff'),
         url('firasansbold.ttf') format('truetype'),
         url('firasansbold.svg#fira_sansbold') format('svg');
    font-weight: 700;
    font-style: normal;
}
@font-face {
    font-family: 'fira_sans';
    src: url('firasansregular.eot');
    src: url('firasansregular.eot?#iefix') format('embedded-opentype'),
         url('firasansregular.woff2') format('woff2'),
         url('firasansregular.woff') format('woff'),
         url('firasansregular.ttf') format('truetype'),
         url('firasansregular.svg#fira_sansregular') format('svg');
    font-weight: 400;
    font-style: normal;
}

Теперь можно использовать так:

*{  
  font-family: "fira_sans";
}
.bold{
  font-weight: 700
}
.normal{
  font-weight: 400
}

ps или подключайте стандартные шрифты через fonts.google.com. Вот Fira Sans

https://api.jquerymobile.com/swipeleft/

$( "#el" ).on( "swipeleft", fn );
$( "#el" ).on( "swiperight", fn );

где fn - Ваша функция.

ps ну и используйте on()

$( "#cart" ).on( "mouseenter mouseleave", function( event ) {
  $( this ).toggleClass( "active" );
});

doc
Usage
The uncompressed source code is heavily documented. After reading this synopsis, that would be a good place to look.
Initialisation
By default, jQWidon’t will initialise when $(document).ready() is triggered, using the plugin on all heading elements (ie. h1 through h6). You can stop this behaviour by $.jqwidont.auto(false)ing before $(document).ready() is triggered. If you subsequently wish to use the plugin’s default behaviour you can use $.jqwidont.init().

var auto = $.jqwidont.auto(); // is automatic initialisation enabled?
$.jqwidont.auto(false);       // disable it
$.jqwidont.init(); // perform the default behaviour

De-widowing elements
You can attempt to use the plugin on any element that has a $(foo).html() value.

$('p').widont();

De-widowing strings
You can also use the plugin directly on a string.

var string = $.jqwidont.transform('No widows here!'); // string = 'No widows here!'

Наверно, удалить этот тэг(больше не могу сказать по инфо., которую Вы написали)

<meta name="viewport" content="width=device-width, initial-scale=1">

Старайтесь избегать ненужные блоки:

<header>
    <img src="img/logo.png" alt="Misocial">
    <p class="nameCompany">Misocial</p>
</header>
<style>
    header{
        position: relative;
    }
    header::after, header::before{
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: -1;
        opacity:  .5;
    }
    header::after{
        // тут Ваша картинка
    }
    header::before{
        // тут Ваш градиент
    }
</style>

Сейчас бы почитать основы html, потоки... Да, и так сойдет.
Используйте transform вместо right.
И уберите animation. Transition вполне хватит для такой анимации.

https://developer.mozilla.org/en-US/docs/Web/CSS/:has

Задайте всем padding, а картинки на этот паддинг сдвиньте назад транформом или чем угодно...

.gran6 - transform-origin: 0 100%;
.gran4 - transform-origin: 100% 0;

Это чтоль? Поиграйте со значениями для наглядности

Если через transition делать, то в :hover конечную позицию элемента вписываете, а самому элементу transition: свойство время
Если через keyframes, то прописываете шаги(0%, 50%, 100% или from{}to{}) и задаете свойство animation: имя время ...
Ну переписывать Ваш код не буду... https://jsfiddle.net/ppmuLsec/5/

ps указываем префиксы...