Дмитрий

А как же css background: #{color} url({image}) left center no-repeat; ??

Да куда угодно копать - задача тривиальная. Задайте классы пунктам, которые видны в свернутом состоянии, остальные скройте и покажите только в полном состоянии. Для изменения порядка используйте css order и flex

Кнопку сделать через button
Тень (или что у вас там) сделать через псевдо-элемент :before
В состоянии :hover для кнопки начинать проигрывать animation для :before

Куча плагинов есть, можете попробовать viewportchecker, у него есть callback для событий прихода / ухода блоков

У вас изначально width / height - разные, поэтому в частном случае вы просто подогнали круг под пропорции монитора. У круга ширина и высота (условные, если вписать его в квадрат) должны быть одинаковы.

Лучше пишите с кавычками, хотя без них красивее. Натыкался много раз, когда люди заливают картинку, потом она подставляется в фон в html коде, а в имени файла есть пробелы. И сразу ничего не работает. Кавычки - отличный способ обезопасить себя от такого.

Создайте шаблон, такой же как основной, но уберите из него этот блок. И для нужны страницы прикрепите этот шаблон в админке.

Способ 2 сложнее - создать некий custom-field в форме страницы в админке, и добавить туда checkbox, если отмечен, то на сайте блок не выводится.

@keyframes .ie10 .element btn { ... }

Так может у него масштаб включен? Пусть нажмет CTRL+0

https://github.com/dirkgroenen/jQuery-viewport-checker

$('body').viewportChecker({
    callbackFunction: function(elem, action){
        if (elem.hasClass('some_other_element') && action == 'add')
            $('.some_other_element').addClass('extra_class');
    }
});

Странно, но у цифр в мобильном Safari шрифт меньше по размеру. Может быть там затесался какой-то тэг, который переносит цифры на другую строку ? Именно в мобильной версии, если это адаптивная верстка

leafo.net/sticky-kit
bigspotteddog.github.io/ScrollToFixed

Если вы хотите именно сами написать, то отслеживайте событие scroll и считывайте координату scrollTop (в случае вертикального скролла). При этом координату надо сравнивать с абсолютной позицией нужного вам блока по нужной оси.

Вы не указали какому свойству делать transition, почитайте синтаксис свойства.

Сам плагин ничего не будет фильтровать изначально (если вы просто инициализируете).
Вам нужно при инициализации isotope находить ссылку с классом current (если есть) и брать оттуда .data('filter')
А потом инициализировать isotope с опцией {filter: '.1'}

Но вообще говоря, если у вас фильтр идет по имени класса, то ошибка ЕЩЕ в том, что классы нельзя называть, начиная с цифр. Поэтому переименуйте их во что-то типа '.c1', '.c2' и т.д. И тогда получится {filter: '.c1'}