Дмитрий Кравченко

советую использовать миксы. таким образом:

<div class="advantages__wrap clearfix">

  <div class="advantages__item advantage">
    <div class="advantage__image-wrap">
      <img class="advantage__image" src="img/advantages/1.png" alt="image">
    </div>
    <div class="advantage__content">
      <h3 class="advantage__head">Опыт работы</h3>
      <p class="advantage__text">Более 8 лет мы занимаемся архитектурной подсветкой зданий</p>
    </div>
  </div>
</div>

что-то типа

$(document.body).on('click', function(e){
  if(!$(e.target).closest('#sidebar').length){
    close_sidebar();
  }
})

сами кнопки любыми отдельными элементами - баттонами, ссылками, дивами
почему не псевдоэлементами? - ведь их нужно будет нажимать

стрелки внутри могут быть псевдоэлементами с нужными трансформами, инлайн свг, либо просто картинками

svg, d3

p{
  pointer-events: none;
}

display: table-cell поможет

сперва скомпилируйте sass, затем добавьте префиксы

анимируете элемент по какой-нибудь "bounce-like" кривой безье, при этом смещая его родителя линейно (или не очень, как захотите)
профит.

его невозможно подключить или отключить, оно или поддерживается, или нет
тут видим, что эксплореры меньше 10-го 3D css трансформации не поддерживают. А отзеркаливание текста при повороте - это backface-visibility, которое можно выставить в hidden

можно сделать одним блоком с padding + background-position, тогда не нужно будет ничего ровнять

document.onmousewheel = function(){/*your code*/}

Судя по всему, нужно использовать imagesLoaded, иначе картинки не успевают подгружаться. Другой вариант - жестко выставить размеры картинок.