0xD34F

.box > p {
  display: inline-block;
}

или

.box {
  display: flex;
}

нет

можно показывать другую картинку с помощью content (например), но работать будет не везде

.row {
  counter-reset: list -1;
}

.row a::before {
  content: counter(list);
  counter-increment: list;
}

.row a:first-child::before,
.row a:last-child::before {
  content: "";
}

https://jsfiddle.net/Ltgybcq3/1/

или

.row {
  counter-reset: list 0;
}

.row a:not(:first-child, :last-child)::before {
  content: counter(list);
  counter-increment: list;
}

https://jsfiddle.net/Ltgybcq3/2/

Не подключен jquery.

Лишний пробел в стилях - вместо .modal-wrapper .open { должно быть .modal-wrapper.open {.

Разным элементам назначаете разный animation-delay, а для "задержки" указываете в keyframes промежуток без изменения значения:

<div class="wrapper">
  <div class="block">hello, world!!</div>
  <div class="block">fuck the world</div>
  <div class="block">fuck everything</div>
</div>

.wrapper {
  width: 150px;
  height: 20px;
  font-size: 16px;
  border: 1px solid #000;
  overflow: hidden;
  position: relative;
}

@keyframes movingTopToBottom {
  0% {
    top: 55px;
  }
  40%, 60% {
    top: 0px;
  }
  100% {
    top: -55px;
  }
}

.block {
  animation: movingTopToBottom 6s linear infinite;
  position: absolute;
}

.block:nth-child(1) { animation-delay:  0s; }
.block:nth-child(2) { animation-delay: -4s; }
.block:nth-child(3) { animation-delay: -2s; }

fieldset > .ui-checkboxradio-label {
  width: 100%;
  box-sizing: border-box;
  text-align: left;
}

Можно сделать через css, с использование image-mask, как-то так.

Или svg - ну, тоже маску используем. Например.

@media (max-width: 1024px) {
  .list-group-service {
    columns: 2;
  }
}

держите

Так:

:nth-child(4n+2),
:nth-child(4n+3) {
  background: red;
}

??

Что если заменить

.imageContainer:empty {
  height: 0;
  border: none;
}

на

.imageContainer:empty {
  visibility: hidden;
  /* или */
  opacity: 0;
}

??

UPD. Или, добавить box-sizing: border-box; для .imageContainer.

UPD. Или, заменить flex на grid - убрать flex: 0 0 30%; у .imageContainer, а у их родителя пусть будет так:

display: grid;
grid-template-columns: repeat(3, 30%);
justify-content: space-between;

При наведении происходят непонятные скачки

Понятные. Изменение положения элемента .box-inner завязано на его же :hover, так что когда он уезжает из-под курсора, состояние :hover теряется, элемент откатывается назад, под курсор, снова случается :hover, элемент опять едет вверх, ну и т.д. Надо смотреть :hover у элемента, который из-под курсора никуда не девается, т.е., у родительского:

.box:hover .box-inner {
  margin-top: -360px;
}

Также, как сделать, чтобы при убирании курсора все возвращалось обратно плавно, а не резким скачком?

Аналогично - transition должен присутствовать у элемента вне зависимости от наличия состояния :hover:

.box-inner {
  transition: all 500ms ease;
}

Цвет задаётся дважды, в ul.main-nav и .ic.menu:focus ~ .main-nav. Один типа дефолтный, другой для открытого состояния - в процессе открытия/закрытия цвет может меняться. Хотите, чтобы всегда был зелёный - задайте зелёный для обоих селекторов.

Это не тень.

border: none;

https://jsfiddle.net/t6d0gueh/

Так?

Обёртке карты задаём overflow: hidden, самому div'у карты задаём высоту. Ну и нелишним будет скрыть элементы управления карты - всё равно нормально ими пользоваться уже не получится, только мешаться будут.

.box {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

Во-первых - ошиблись с именем класса (это вы могли бы и сами обнаружить).

Во-вторых - браузер стремится оптимизировать внесение изменений в DOM-дерево, так что свежесозданные элементы анимироваться не будут. Чтобы анимация выполнилась, нужен дополнительный reflow, для чего можно либо обернуть добавление класса в setTimeout, либо перед добавлением класса обратиться к одному из свойств, расчёт которых вызывает reflow. Как-то так.

href должен быть разным