Андрей

Дублируете кнопку и размещаете её под input, затем через media указываете когда какую показывать

Я бы сделал так и не парился

Я бы сделал с помощью Dropdowns с ограничением по высоте и вертикальной прокруткой в в одном контейнере с .d-flex

А можно сделать на Select`е

Обычный gif-файл с анимацией

Однако копирование стилей из данного файла не помогает решить проблему.

Ни какой мистики, в локальном css нет стилей: .fa-envira и .fa-sign-language

Refactoring source code in Visual Studio Code

<script src="assets/js/jquery.steps.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Поменяйте строки местами, а то получается, что библиотека использующая JQ подключается раньше него

Книги
freepascal

flexboxfroggy
flexboxdefense

Подключите JQuery и bootstrap.min.js, все должно работать "из коробки"
Пример для Bootstrap 3

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="780px" height="1080px" version="1.1" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd"
viewBox="0 0 13559 18770"
 xmlns:xlink="http://www.w3.org/1999/xlink">
 <defs>
  <style type="text/css">
   <![CDATA[
    .fil0 {fill:url(#id0)}
   ]]>
  </style>
  <linearGradient id="id0" gradientUnits="userSpaceOnUse" x1="29585.7" y1="0" x2="29585.7" y2="81913">
   <stop offset="0" style="stop-color:#D8E9F4"/>
   <stop offset="1" style="stop-color:#BDD6E7"/>
  </linearGradient>
 </defs>
 <g id="Layer_x0020_1">
  <path class="fil0" d="M0 81913c18825,0 40349,-1237 59171,-2245l-537 -694c-479,-732 -907,-1932 -1129,-2782 -706,-2696 -1099,-6426 -1085,-9199 2,-508 -71,-723 -76,-1155l3 -65838 -56347 0 0 81913z"/>
 </g>
</svg>