<div class="modal__container">
  <div class="modal">
    <div class="modal__form__container">
      <form action="" class="form">
        <h2>Donate</h2>
        <div class="form__step__container">
          <div class="form__step">
            <h3>Step 1</h3>
            <h4>Choose the amount</h4>
            <div class="donation-boxes">
              <div class="box">
                <input type="radio" name="donation-amt" id="radio-1" value="10">
                <label for="radio-1">$10</label>
              </div>
              <div class="box">
                <input type="radio" name="donation-amt" id="radio-2" value="25">
                <label for="radio-2">$25</label>
              </div>
              <div class="box">
                <input type="radio" name="donation-amt" id="radio-3" value="50">
                <label for="radio-3">$50</label>
              </div>
              <div class="box">
                <input type="radio" name="donation-amt" id="radio-8" value="100">
                <label for="radio-8">$100</label>
              </div>
            </div>
            
          </div>
          <div class="form__step">
            <h3>Step 2</h3>
            <h4>Choose your gift!</h4>
            <div class="donation-boxes">
              <div class="box">
                <input type="radio" name="donation-gift" id="radio-4" value="maximize">
                <label for="radio-4"><!-- Generator: Adobe Illustrator 22.0.1, SVG Export Plug-In  -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 171 154.8">
  <style>
    .hand0{fill:#fdcb6e}.hand1{fill:#ffeaa7}
  </style>
  <path d="M14.9 85.6A49.29 49.29 0 0 1 .7 50.9C.7 23.6 22.9 1.4 50.2 1.4c13 0 25.3 5 34.6 14.2l.2.2.1.1.2-.2.1-.1A49.3 49.3 0 0 1 120 1.4c27.3 0 49.5 22.2 49.5 49.5 0 13-5 25.3-14.2 34.6l-.4.4-66 65.3-74-65.6z" class="hand0"/>
  <path d="M14.5 86.1C9.9 81.4 6.2 75.9 3.7 69.8 1.2 63.7 0 57.2 0 50.6A50.13 50.13 0 0 1 31.1 4.4C37.2 2 43.8.7 50.3.7S63.4 2 69.4 4.6c6 2.5 11.5 6.3 16.1 10.9h-.7l.3-.3.3.3h-.7c4.5-4.8 10-8.6 16-11.3 6.1-2.6 12.7-4 19.3-4.1 13.3-.2 26.5 5.3 36 14.7 9.5 9.4 14.9 22.7 14.8 36-.1 6.6-1.5 13.2-4.1 19.3-2.7 6-6.5 11.5-11.3 16v-.7l.4.4-.4.4-66 65.3-.3.3-.4-.3-74.2-65.4zm.9-1l74.1 65.7h-.7l66-65.3v.7l-.3-.3.3-.4c8.8-9.3 13.9-22 13.6-34.6-.1-6.3-1.3-12.6-3.8-18.4-2.4-5.8-6.1-11.1-10.5-15.6s-9.8-8.1-15.6-10.5c-5.8-2.4-12.1-3.7-18.4-3.8-12.7-.2-25.3 4.8-34.6 13.7l-.4.4-.3-.3h.7l-.4.3-.3-.4c-4.5-4.5-10-8.1-15.9-10.5C63.1 3.3 56.7 2 50.3 2c-6.4 0-12.7 1.3-18.6 3.7a48 48 0 0 0-15.8 10.5A49.21 49.21 0 0 0 1.5 50.6 47.8 47.8 0 0 0 5 69.3c2.4 5.9 6 11.3 10.4 15.8z"/>
  <path d="M154.7 86.4l-52-56s2-3-9 9-25-3-25-3 13.5-16.5 17-21 37.5-31.5 70.7 1.8c31.8 37.7-1.7 69.2-1.7 69.2" class="hand1"/>
  <path d="M154.3 86.7l-52.1-55.9-.3-.3.3-.4.1-.1V30.3c0 .1.1.3.3.3.1 0 .1.1.2.1H103.1l-.1.1c-.1.1-.3.2-.5.4l-.9.9c-.6.6-1.2 1.2-1.8 1.9l-3.6 3.8-1.8 1.9c-.6.6-1.2 1.3-2 1.9-1.4 1.2-3 2.1-4.8 2.7-1.8.6-3.7.7-5.5.4-1.8-.2-3.6-.8-5.2-1.5-3.3-1.5-6.2-3.6-8.7-6.2l-.4-.4.4-.5c5.6-6.9 11.2-13.7 16.7-20.7.7-.9 1.6-1.7 2.4-2.5.9-.7 1.7-1.4 2.6-2.1 1.8-1.3 3.7-2.6 5.6-3.7 3.9-2.2 8.1-4 12.4-5.2C112.2.7 116.7 0 121.2.1c4.5 0 9 .8 13.3 2.2 8.6 2.8 16.2 8.1 22.5 14.4 4.2 4.9 7.8 10.4 10.3 16.4 2.5 6 3.9 12.6 3.6 19.1-.2 6.5-1.9 13-4.6 18.9-1.4 3-3 5.8-4.8 8.5-1.9 2.7-3.8 5.2-6.2 7.6l-1.3-1.4c2.2-2.2 4.2-4.7 6-7.2 1.8-2.6 3.4-5.3 4.7-8.2 2.7-5.7 4.3-11.9 4.5-18.2.2-6.3-1-12.6-3.5-18.4-2.4-5.8-5.9-11.2-10-16v.1c-6.2-6.2-13.5-11.4-21.8-14.1-8.3-2.8-17.3-2.8-25.7-.4-4.2 1.2-8.3 2.9-12.1 5-1.9 1.1-3.7 2.3-5.5 3.5-1.7 1.3-3.5 2.7-4.8 4.3-5.3 6.9-10.9 13.8-16.6 20.6v-.9c2.4 2.4 5.2 4.5 8.3 5.9 3.1 1.4 6.6 2 9.8 1.1 1.6-.5 3.1-1.3 4.3-2.4 1.3-1.1 2.4-2.4 3.6-3.7l3.6-3.8c.6-.6 1.2-1.3 1.9-1.9.3-.3.6-.6 1-.9l.5-.5c.1 0 .1-.1.2-.1 0 0 .1-.1.2-.1H102.9c.1 0 .1 0 .2.1.2.1.3.3.3.4v.2c0 .3-.1.3-.1.4 0 .1-.1.1-.1.2l-.1-.8 52 56-.8.7z"/>
  <path d="M21.2 92.2l15.3-15.1s9-7.2 16.5 0 0 15.8 0 15.8l-15.6 14.8c-10.5-1.3-16.4-6-16.2-15.5z" class="hand1"/>
  <path d="M20.7 92c4.9-5.2 10-10.4 15.2-15.6 1.3-1 2.6-1.7 4.1-2.3 1.5-.6 3-1 4.6-1.1 1.6-.1 3.2.1 4.8.7l1.1.5c.4.2.7.4 1 .6.7.4 1.3 1 1.9 1.5.6.5 1.1 1.2 1.6 1.8.4.7.9 1.3 1.2 2.1.4.7.6 1.5.8 2.3.1.8.2 1.6.2 2.4-.1 1.6-.5 3.2-1.1 4.6-.6 1.5-1.4 2.8-2.5 4-5.3 4.9-10.5 9.7-15.9 14.5l-.2.2h-.3c-2.1-.3-4.2-.7-6.2-1.3-2-.7-4-1.6-5.7-3-1.7-1.4-3-3.2-3.8-5.3-.2-.5-.3-1-.5-1.6l-.3-1.6c-.1-.5-.1-1.1-.2-1.6.2-.6.2-1.2.2-1.8zm1 .4c0 .5.1.9.1 1.3 0 .5.1 1 .1 1.5l.3 1.5c.1.5.3 1 .4 1.4.7 1.9 1.9 3.5 3.4 4.8 1.5 1.3 3.4 2.2 5.3 2.8 1.9.6 4 1 6 1.3l-.4.1C42 102 47.1 97 52.3 92l-.1.1c1.7-2.1 3-4.9 3-7.6.1-.7-.1-1.3-.1-2-.2-.6-.3-1.3-.7-1.9-.2-.6-.7-1.2-1-1.7-.4-.5-.9-1-1.4-1.5-.5-.4-1-.9-1.6-1.3-.3-.2-.6-.4-.9-.5l-.9-.4c-1.3-.5-2.6-.7-4-.6-2.7.2-5.5 1.3-7.7 2.9l.1-.1c-4.9 5.2-10 10.1-15.3 15z"/>
  <path d="M38.1 107.8l15.3-15.1s9-7.2 16.5 0 0 15.8 0 15.8l-15.6 14.8c-9.3-1.3-15.7-5.4-16.2-15.5z" class="hand1"/>
  <path d="M37.7 107.6c2.4-2.6 4.9-5.2 7.4-7.8l7.6-7.8c1.3-1 2.6-1.7 4.1-2.3 1.5-.6 3-1 4.6-1.1 1.6-.1 3.2.1 4.8.7l1.1.5c.4.2.7.4 1 .6.7.4 1.3 1 1.9 1.4.6.5 1.1 1.2 1.6 1.8.4.7.9 1.3 1.2 2.1.4.7.6 1.5.8 2.3.1.8.2 1.6.2 2.4-.1 1.6-.5 3.2-1.1 4.6-.6 1.5-1.4 2.8-2.5 4l-7.9 7.3-4 3.6-4 3.6-.2.1h-.2c-2.1-.3-4.1-.7-6.1-1.4s-3.9-1.7-5.5-3.1c-1.6-1.4-2.9-3.2-3.6-5.2-.4-1-.7-2-.9-3-.1-.5-.2-1-.3-1.6v-1.7zm.7.3c.1.5.1.9.2 1.4 0 .5.2 1 .2 1.5.2 1 .5 2 .9 2.9.7 1.9 1.9 3.5 3.4 4.8 1.5 1.3 3.3 2.3 5.2 2.9 1.9.7 3.9 1.1 5.9 1.4l-.3.1 3.8-3.8 3.8-3.8 7.7-7.5-.1.1c1.7-2.1 2.9-4.9 3-7.6 0-.7-.1-1.3-.1-2-.2-.6-.3-1.3-.7-1.9-.2-.6-.7-1.2-1-1.7-.4-.5-.9-1-1.4-1.5-.5-.4-1-.9-1.6-1.3-.3-.2-.6-.4-.9-.5l-.8-.4c-1.3-.5-2.6-.7-4-.6-2.7.2-5.5 1.3-7.7 2.9l.1-.1-7.7 7.3c-2.6 2.5-5.2 5-7.9 7.4z"/>
  <path d="M54.9 123.3l15.3-15.1s9-7.2 16.5 0 0 15.8 0 15.8L71 138.8c-11.4-1.1-16.6-6.4-16.1-15.5z" class="hand1"/>
  <path d="M54.5 123.2c2.4-2.6 4.9-5.2 7.4-7.8l7.6-7.8c1.3-1 2.6-1.7 4.1-2.3 1.5-.6 3-1 4.6-1.1 1.6-.1 3.2.1 4.8.7l1.1.5c.4.2.7.4 1 .6.7.4 1.3 1 1.9 1.4.6.5 1.1 1.1 1.6 1.8.4.7.9 1.3 1.2 2.1.4.7.6 1.5.8 2.3.1.8.2 1.6.2 2.4-.1 1.6-.5 3.2-1.1 4.6-.6 1.5-1.4 2.8-2.5 4l-7.9 7.3-4 3.6-4 3.6-.1.1H71c-2.1-.2-4.2-.6-6.3-1.2-2-.6-4.1-1.6-5.7-3-1.7-1.4-3-3.3-3.7-5.3-.2-.5-.3-1-.4-1.6l-.3-1.6-.1-1.6v-1.7zm.8.3v1.4l.1 1.5.2 1.5c.1.5.3 1 .4 1.5.7 1.9 1.9 3.6 3.5 4.9 1.6 1.3 3.5 2.2 5.5 2.8 2 .6 4.1 1 6.1 1.2l-.3.1 3.8-3.8 3.8-3.8 7.7-7.5-.1.1c1.7-2.1 2.9-4.9 3-7.6 0-.7-.1-1.3-.1-2-.2-.6-.3-1.3-.7-1.9-.2-.6-.7-1.2-1-1.7-.2-.3-.5-.5-.7-.8-.2-.2-.4-.5-.7-.7-.5-.4-1-.9-1.6-1.3-.3-.2-.6-.4-.9-.5l-.9-.4c-1.3-.5-2.6-.7-4-.6-2.7.2-5.5 1.3-7.7 2.9l.1-.1-7.7 7.3c-2.6 2.6-5.2 5.1-7.8 7.5z"/>
  <g>
    <path d="M87.2 81.9l35.7 36s8.3 8 15.3 0 0-16 0-16" class="hand0"/>
    <path d="M87.6 81.5l15.2 15 15.1 15.1 3.8 3.8 1.9 1.9c.6.5 1.3 1 2 1.5 1.4.9 3 1.5 4.6 1.7 1.6.2 3.2-.1 4.6-.9 2.7-1.7 5-4.6 5.5-7.8.3-1.6.2-3.3-.3-4.9-.4-1.6-1.2-3.2-2.2-4.6l.8-.7c1.3 1.4 2.2 3 2.9 4.8.6 1.8.9 3.7.6 5.6-.3 1.9-1.1 3.7-2.2 5.3-1.1 1.6-2.5 2.9-4.2 3.9a8.8 8.8 0 0 1-5.7 1.1c-2-.2-3.8-1-5.4-2-.8-.5-1.6-1-2.3-1.7l-1.9-1.9-3.8-3.8-15-15.3-14.7-15.4.7-.7z"/>
  </g>
  <g>
    <path d="M103.2 65.9l35.7 36s8.3 8 15.3 0 0-16 0-16" class="hand0"/>
    <path d="M103.6 65.5l15.2 15L134 95.6l3.8 3.8 1.9 1.9c.6.5 1.3 1 2 1.5 1.4.9 3 1.5 4.6 1.7 1.6.2 3.2-.1 4.6-.9 2.7-1.7 5-4.6 5.5-7.8.3-1.6.2-3.3-.3-4.9-.4-1.6-1.2-3.2-2.2-4.6l.8-.7c1.3 1.4 2.2 3 2.9 4.8.6 1.8.9 3.7.6 5.6-.3 1.9-1.1 3.7-2.2 5.3-1.1 1.6-2.5 2.9-4.2 3.9a8.8 8.8 0 0 1-5.7 1.1c-2-.2-3.8-1-5.4-2-.8-.5-1.6-1-2.3-1.7l-1.9-1.9-3.8-3.8-15-15.3-14.9-15.4.8-.7z"/>
  </g>
  <g>
    <path d="M105.9 132.9s8.3 8 15.3 0 0-16 0-16" class="hand0"/>
    <path d="M106.3 132.5c2.3 1.5 5 2.7 7.5 2.7.3 0 .6 0 .9-.1l.9-.2c.6-.2 1.2-.4 1.7-.7.6-.2 1-.7 1.6-1 .5-.4.9-.9 1.4-1.4 1.7-2 2.9-4.4 2.9-7 .1-2.6-.9-5.3-2.3-7.7l.8-.7c2.2 2.2 3.6 5.1 3.9 8.3.1.8 0 1.6-.1 2.4-.2.8-.3 1.6-.6 2.3-.5 1.6-1.5 2.9-2.4 4.1-.5.6-1.1 1.2-1.7 1.7-.7.5-1.3 1-2.1 1.3-.7.4-1.6.6-2.4.8-.8.1-1.7.2-2.5.1-1.6-.1-3.2-.7-4.5-1.5-1.3-.8-2.5-1.7-3.5-2.9l.5-.5z"/>
  </g>
  <g>
    <path d="M71.1 138.4l15.3-15.1s9-7.2 16.5 0 0 15.8 0 15.8-10.1 13.3-15.6 14.8-16.9-5.1-16.2-15.5z" class="hand1"/>
    <path d="M70.7 138.2l3.7-3.9 3.7-3.9 7.6-7.8c1.5-1.1 3.1-2 4.8-2.6 1.7-.6 3.6-.9 5.4-.8.5.1.9.1 1.4.2l1.4.3c.9.3 1.8.7 2.5 1.2l.6.4c.2.1.4.3.5.4l1.1.9c.6.7 1.3 1.3 1.8 2.1 1.1 1.5 1.7 3.4 1.8 5.3.1 1.9-.3 3.8-1 5.4-.7 1.7-1.7 3.3-2.8 4.6-1.1 1.4-2.2 2.7-3.3 4-2.3 2.6-4.7 5.1-7.4 7.4-1.4 1.1-2.8 2.2-4.6 2.9-1.9.7-3.8.4-5.5-.1-3.5-1-6.5-3.2-8.7-6-1.1-1.4-1.9-3-2.5-4.7l-.4-1.3c-.1-.4-.1-.9-.2-1.3l-.1-.7v-.7l.2-1.3zm.7.4l.1 1.2v.6l.1.6c.1.4.1.8.2 1.2l.4 1.2c.6 1.5 1.4 3 2.5 4.3 2.1 2.5 5 4.5 8.2 5.3 1.6.4 3.2.6 4.6 0 1.4-.6 2.8-1.6 4-2.7 2.5-2.2 4.8-4.8 7.1-7.3 1.1-1.3 2.2-2.6 3.2-4 1.1-1.3 1.9-2.7 2.5-4.2.6-1.5 1-3.1.9-4.6-.1-1.6-.6-3-1.5-4.3-.4-.7-1-1.2-1.5-1.8-.6-.5-1.2-1.1-1.9-1.4a8.6 8.6 0 0 0-4.4-1.5c-3.1-.2-6.4 1-9 2.9l.1-.1-7.7 7.3-3.9 3.7-4 3.6z"/>
  </g>
</svg>
</label>
                <p>Maximize my<br>donation!</p>
              </div>
              <div class="box">
                <input type="radio" name="donation-gift" id="radio-5" value="tote-bag">
                <label for="radio-5"><!-- Generator: Adobe Illustrator 22.0.1, SVG Export Plug-In  -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 168.4 163.1">
  <style>
    .bag1{opacity:.53;fill:#fab1a0}.bag2{fill:#ffeaa7}
  </style>
  <path fill="#ffb031" stroke="#000" stroke-miterlimit="10" d="M138.4 35h-115l-22 12c51.9 12.6 76.1 14.5 121 0l16-12z"/>
  <path d="M7.4 29l17-18 14-11 13 15v8l15-5 19-8 9 8 13 6 11-6 4 6 6 15 2 13-92 17-23-9z" class="bag1"/>
  <path d="M5.9 40.1C6.4 38 1.4 18 1.4 18l8-12 13 28 12-16 17 14 18-11 14 1 9 10 16-5 12 6 8-14 3.8 10 2.2 7-33 14-91-2-4.5-7.9z" class="bag1"/>
  <path fill="#fab1a0" d="M135.9 51.1c-.5-2.1 4.5-22.1 4.5-22.1l-8-12-13 28-12-16-17 14-18-11-14 1-9 10-16-5-12 6-8-14-3.9 10-2.2 7 33 14 91-2 4.6-7.9z" opacity=".91"/>
  <path fill="#fdcb6e" d="M122.4 162H3.4c10-38.3 10-76.7 0-115 50.6 3.1 73.9 3.5 119 0-5.1 40.6-5.1 78.9 0 115z"/>
  <path d="M122.8 162.3l-14.7.3-14.8.2-29.9.3c-10 0-20 0-30.1-.1l-15-.2c-5-.1-10-.2-15-.4h-.7l.2-.6 1.5-7.1 1.3-7.1 1.2-7.1 1-7.2c1.1-9.6 1.8-19.2 1.7-28.8 0-9.6-.6-19.3-1.7-28.8l-1-7.2-1.2-7.1-1.3-7.1-1.5-7.1-.1-.6h.6c9.9.2 19.9.5 29.8.8 9.9.3 19.8.6 29.7.7 9.9.1 19.8-.1 29.7-.3 5-.1 9.9-.3 14.9-.5l14.9-.6h.6l-.1.6a479.7 479.7 0 0 0-3.8 57.4c0 9.6.2 19.2.9 28.8.3 4.8.7 9.6 1.2 14.3l.8 7.2c.4 2.3.6 4.9.9 7.3zm-.8-.6c-.4-2.3-.8-4.5-1.1-6.8l-.8-7.2c-.5-4.8-.9-9.6-1.2-14.4-.6-9.6-.9-19.2-.9-28.9.1-19.2 1.4-38.5 3.8-57.6l.5.6c-4.9.6-9.9 1.1-14.8 1.5-5 .4-9.9.8-14.9 1.1-9.9.7-19.9.9-29.8.9-10 0-19.9-.4-29.8-1-9.9-.6-19.8-1.5-29.7-2.5l.5-.6c.7 2.3 1.3 4.7 1.9 7L7.5 61l1.4 7.2 1.2 7.2c1.4 9.6 2 19.4 2.1 29.1-.1 9.7-.7 19.5-2.1 29.1l-1.2 7.2-1.4 7.2-1.7 7.1-1.9 7-.5-.6c4.9-.2 9.9-.2 14.8-.4l14.7-.2c9.8-.1 19.6-.1 29.4-.1l29.6.3 14.9.2 15.2.4z"/>
  <path d="M122.4 162c4-9.6 9.1-17.9 16-24-6.4-22.1-4.7-59.8 0-103l-16 12c-4.8 40.3-5.4 78.8 0 115z" class="bag2"/>
  <path d="M122.4 161.5c.1-.6 0-1 .2-1.4l.7-1.6c.5-1.1 1-2.2 1.6-3.3 1.1-2.2 2.3-4.3 3.6-6.4 2.6-4.1 5.8-8 9.5-11.1l-.1.5c-2.5-8.3-3.7-17-4.2-25.6-.5-8.6-.5-17.3-.2-25.9a562.29 562.29 0 0 1 4.4-51.6l.8.5-16 12 .2-.3-.6 7.2-.6 7.2c-.4 4.8-.7 9.6-1 14.4-.5 9.6-.9 19.2-.9 28.7-.1 9.6.1 19.2.7 28.7.1 2.4.3 4.8.4 7.2l.6 7.2.7 7.2c.1 1.2.2 2.1.3 3.2-.1.8-.1 2-.1 3.2zm-.1 1c-.2-1.2-.6-2.4-.9-3.7-.3-1.3-.5-2.7-.7-3.9l-1-7.2c-.3-2.4-.5-4.8-.8-7.2-.2-2.4-.5-4.8-.6-7.2-.7-9.6-1-19.3-.9-28.9.1-9.6.5-19.3 1.3-28.9.4-4.8.8-9.6 1.4-14.4.6-4.8 1.1-9.6 1.8-14.3v-.2l.2-.1 16-12 .9-.7-.1 1.1c-.8 8.6-1.5 17.2-2.2 25.8-.6 8.6-1.2 17.2-1.4 25.8-.2 8.6-.3 17.2.1 25.8l.4 6.4c.2 2.1.4 4.3.7 6.4.5 4.3 1.3 8.5 2.3 12.6l.1.3-.2.2c-3.5 3.3-6.5 7.1-9.1 11.1-1.3 2-2.5 4.1-3.6 6.2-.6 1.1-1.1 2.2-1.6 3.2l-.8 1.7c-.3.9-.9 1.6-1.3 2.1z"/>
  <g>
    <path d="M49.8 112.9a12.04 12.04 0 0 1 17-17l.1.1.1-.1a12.04 12.04 0 0 1 17 17l-.1.1-16 15.8-18.1-15.9z" class="bag2"/>
    <path d="M49.5 113.3c-2.3-2.3-3.6-5.6-3.6-8.8 0-3.3 1.4-6.5 3.7-8.8 2.3-2.3 5.6-3.6 8.8-3.6 3.3 0 6.5 1.3 8.8 3.7h-.7l.3-.3.3.3h-.7a12.3 12.3 0 0 1 17.9-.3c2.4 2.4 3.8 5.8 3.7 9.1 0 1.7-.4 3.3-1.1 4.9-.7 1.5-1.7 2.9-2.9 4v-.7l.4.4-.4.4-16 15.8-.3.3-.4-.3-17.8-16.1zm.7-.7l18 15.9h-.7l16-15.8v.7l-.3-.3.3-.4c2-2.3 3.1-5.2 3-8.1a11.42 11.42 0 0 0-11.1-11.2c-2.9-.1-5.9 1-8.1 3l-.4.4-.3-.3h.7l-.4.3-.3-.3c-2.1-2.1-5.1-3.4-8.1-3.4s-6 1.2-8.1 3.3c-2.1 2.1-3.4 5.1-3.4 8.1-.2 2.9 1.1 5.9 3.2 8.1z"/>
  </g>
</svg>
</label>
                <p>Tote Bag</p>
              </div>
              <div class="box">
                <input type="radio" name="donation-gift" id="radio-6" value="calendar">
                <label for="radio-6"><!-- Generator: Adobe Illustrator 22.0.1, SVG Export Plug-In  -->
<svg version="1.1"
	 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/"
	 x="0px" y="0px" width="178.1px" height="147px" viewBox="0 0 178.1 147" style="enable-background:new 0 0 178.1 147;"
	 xml:space="preserve">
<style type="text/css">
	.st0{fill:#FAB1A0;stroke:#000000;stroke-miterlimit:10;}
	.st1{fill:#FFEAA7;}
	.st2{fill:#FDCB6E;}
</style>
<defs>
</defs>
<g>
	<polygon class="st0" points="172.8,146.5 0.8,146.5 1.8,0.5 173.8,0.5 	"/>
	<g>
		<path class="st1" d="M177.8,144.5H5.8c-5.4-36.8-5.2-89-4-144h172C172.5,56.2,172.6,107.9,177.8,144.5z"/>
		<path d="M178.1,144.8L5.8,145l-0.4,0l-0.1-0.4l0,0c-1-5.9-1.9-11.9-2.5-17.9c-0.7-6-1.2-12-1.5-18c-0.8-12-1.1-24-1.2-36.1
			c-0.1-6-0.1-12-0.1-18c0-6,0.1-12,0.2-18c0.2-12,0.6-24,1-36l0,0l0-0.5h0.5h172h0h0.5l0,0.5c-0.2,12-0.2,24-0.3,36
			c-0.1,12,0,24,0.2,36c0.2,12,0.6,24,1.3,36c0.2,3,0.3,6,0.5,9c0.2,3,0.4,6,0.7,9c0.2,3,0.5,6,0.8,9l0.4,4.7L178.1,144.8z
			 M177.4,144.2l-0.8-4.2l-0.3-2.1l-0.3-2.2c-0.4-3-0.7-6-1-9l-0.4-4.5l-0.4-4.5c-0.2-3-0.4-6-0.6-9c-0.7-12-1-24-1.1-36.1
			c-0.1-12-0.1-24,0-36.1c0.1-12,0.5-24,0.8-36l0.5,0.5h0H1.8l0.5-0.5v0l-0.2,36c0,6,0,12,0,18c0,6,0.1,12,0.2,18
			c0.2,12,0.6,24,1.2,36c0.2,3,0.3,6,0.5,9l0.3,4.5l0.3,4.5c0.4,6,1,11.9,1.7,17.9l0,0L5.8,144L177.4,144.2z"/>
	</g>
	<g>
		<rect x="1.8" y="0.5" class="st2" width="172" height="30.5"/>
		<path d="M174.1,31.4l-42.9,0.4l-43.1,0.2l-43.2-0.1l-21.6-0.1L1.8,31.5l-0.5,0V31V0.5V0h0.5h172h0.5l0,0.5
			C174.3,10.8,174.2,21.1,174.1,31.4z M173.4,30.6c-0.1-10.1-0.2-20.1-0.1-30.1l0.5,0.5H1.8l0.5-0.5V31l-0.5-0.5l21.4-0.2l21.4-0.1
			l42.8-0.1l42.9,0.2L173.4,30.6z"/>
	</g>
	<g>
		<path d="M53.5,27.1v-1.8l2.2-2.2c5.4-5.1,7-7.5,7-10.7c0-2.1-0.2-4.4-3.4-4.4c-1.9,0-3.5,1-4.5,1.8l-0.9-2c1.5-1.2,3.5-2.1,6-2.1
			c4.5,0,6.5,3.1,6.5,6.1c0,3.9-2.2,7.4-6.7,11.7l-1,1l8.2,0.3v2.4H53.5z"/>
		<path d="M84.8,16.5c0,8.1-3.3,11-7.9,11c-4.1,0-6.9-3.9-7-10.8c0-7.1,3.1-11,7.3-11C81.6,5.7,84.8,8.5,84.8,16.5z M72.7,16.7
			c0,5.5,1.7,8.6,4.3,8.6c2.9,0,4.3-3.4,4.3-8.8c0-5.2-1.3-8.6-4.3-8.6C74.5,7.9,72.7,11,72.7,16.7z"/>
		<path d="M93,8.7L93,8.7l-3.7,2l-0.6-2.2l4.6-2.5h3.4v21.1H93V8.7z"/>
		<path d="M103.2,21.8c0-2.7,1.6-4.5,4.2-5.6l0-0.1c-2.3-1.1-3.3-2.9-3.3-4.7c0-3.3,2.8-5.6,6.5-5.6c4.1,0,7.1,2.6,7.1,5.2
			c0,1.8-1.9,3.7-4.5,4.9l1,0.1c2.6,1,4.2,2.9,4.2,5.4c0,3.7-4.1,6.1-8.2,6.1C105.8,27.5,103.2,24.9,103.2,21.8z M114.5,21.7
			c0-2.6-1.8-3.8-4.6-4.6c-2.5,0.7-2.8,2.3-2.8,4.3c-0.1,2.1,0.5,4,3.2,4C112.9,25.4,114.5,23.8,114.5,21.7z M107.7,11.1
			c0,2.1,0.6,3.2,3,3.9c1.8-0.6,3.2-1.9,3.2-3.8c0-1.7-1-3.4-3.6-3.4C108,7.7,107.7,9.3,107.7,11.1z"/>
	</g>
	<g>
		<path d="M28.8,56c-0.1,5.6-0.3,11.3-0.3,16.9c0,5.6,0,11.2,0.3,16.8c0.3,5.6,0.6,11.2,1.4,16.7c0.7,5.5,1.8,11,3.6,16.3l-0.9,0.4
			c-2.3-5.2-3.6-10.8-4.5-16.4c-0.8-5.6-1.3-11.3-1.5-16.9c-0.2-5.7-0.2-11.3,0-17c0.2-5.6,0.5-11.3,1-16.9L28.8,56z"/>
	</g>
	<g>
		<path d="M56.8,56l-0.1,15.6c0,5.2,0.1,10.4,0.2,15.6c0.1,2.6,0.2,5.2,0.4,7.8l0.3,3.9l0.4,3.9c0.6,5.1,1.4,10.2,2.7,15.2l-0.9,0.3
			c-1.9-4.9-2.9-10.1-3.6-15.3L55.7,99l-0.3-3.9c-0.2-2.6-0.3-5.2-0.4-7.8c-0.2-5.2-0.1-10.4,0-15.6c0.1-5.2,0.4-10.4,0.7-15.6
			L56.8,56z"/>
	</g>
	<g>
		<path d="M87.8,57c-0.1,5.5-0.1,10.9-0.2,16.4c0,5.5,0.1,10.9,0.3,16.3c0.3,5.4,0.7,10.9,1.4,16.2c0.2,1.3,0.4,2.7,0.6,4l0.3,2
			l0.4,2c0.5,2.7,1.2,5.3,2,7.9l-0.9,0.3c-0.9-2.6-1.8-5.2-2.4-7.9l-0.5-2l-0.4-2c-0.3-1.3-0.5-2.7-0.7-4.1
			c-0.8-5.4-1.3-10.9-1.5-16.4c-0.2-5.5-0.3-11-0.2-16.4c0.1-5.5,0.4-10.9,0.7-16.4L87.8,57z"/>
	</g>
	<g>
		<path d="M119.8,56c-0.2,5.5-0.4,10.9-0.4,16.4c0,5.5,0.1,10.9,0.5,16.3c0.4,5.4,1,10.8,2,16.2c0.9,5.4,2.2,10.7,3.9,15.9l-0.9,0.3
			c-2.1-5.1-3.6-10.5-4.7-15.9c-1.1-5.4-1.8-10.9-2.1-16.4c-0.4-5.5-0.5-11-0.3-16.5c0.1-5.5,0.5-11,1.1-16.4L119.8,56z"/>
	</g>
	<g>
		<path d="M147.8,57c-0.1,5.1-0.2,10.2-0.2,15.4c0,5.1,0.1,10.2,0.4,15.3c0.3,5.1,0.8,10.2,1.5,15.2c0.4,2.5,0.8,5,1.4,7.5
			c0.2,1.3,0.6,2.5,0.9,3.7c0.3,1.2,0.7,2.5,1,3.7l-1,0.3c-0.4-1.2-0.8-2.4-1.2-3.7c-0.3-1.2-0.7-2.5-1-3.7c-0.6-2.5-1.1-5-1.5-7.6
			c-0.8-5.1-1.3-10.2-1.6-15.4c-0.3-5.1-0.4-10.3-0.3-15.4c0.1-5.1,0.3-10.3,0.6-15.4L147.8,57z"/>
	</g>
</g>
</svg>
</label>
                <p>Calendar</p>
              </div>
            </div>
            
          </div>
          <div class="form__step">
            <h3>Step 3</h3>
            <h4>Thank you!</h4>
            <a href="#" class="btn btn--cta">Back to browsing</a>
            
          </div>
        </div>
        <div class="form__bullet__container">
          <div class="form__bullet form__bullet--active"></div>
          <div class="form__bullet"></div>
          <div class="form__bullet"></div>
        </div>
        <div class="form__nav">
          <a href="#" class="form__nav__prev">Back</a>
          <a href="#" class="form__nav__next">Next</a>
        </div>
      </form>
    </div>
  </div>
</div>
@import url('https://fonts.googleapis.com/css?family=Montserrat');
.st0{fill:#fdcb6e}.st1{fill:#ffeaa7}.st3{opacity:.53;fill:#fab1a0}
*, *:before, *:after {
  box-sizing: border-box;
}
:root {
  font-family: 'Montserrat', sans-serif;
}
body {
  background-color: #d63031;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 1600 800'%3E%3Cg stroke='%23000000' stroke-width='66' stroke-opacity='0.03' %3E%3Ccircle fill='%23d63031' cx='0' cy='0' r='1800'/%3E%3Ccircle fill='%23d93833' cx='0' cy='0' r='1700'/%3E%3Ccircle fill='%23dc4236' cx='0' cy='0' r='1600'/%3E%3Ccircle fill='%23df4b39' cx='0' cy='0' r='1500'/%3E%3Ccircle fill='%23e2543c' cx='0' cy='0' r='1400'/%3E%3Ccircle fill='%23e55e3f' cx='0' cy='0' r='1300'/%3E%3Ccircle fill='%23e76842' cx='0' cy='0' r='1200'/%3E%3Ccircle fill='%23ea7146' cx='0' cy='0' r='1100'/%3E%3Ccircle fill='%23ec7b49' cx='0' cy='0' r='1000'/%3E%3Ccircle fill='%23ee844d' cx='0' cy='0' r='900'/%3E%3Ccircle fill='%23f18e51' cx='0' cy='0' r='800'/%3E%3Ccircle fill='%23f39755' cx='0' cy='0' r='700'/%3E%3Ccircle fill='%23f5a059' cx='0' cy='0' r='600'/%3E%3Ccircle fill='%23f7a95d' cx='0' cy='0' r='500'/%3E%3Ccircle fill='%23f8b261' cx='0' cy='0' r='400'/%3E%3Ccircle fill='%23faba65' cx='0' cy='0' r='300'/%3E%3Ccircle fill='%23fcc36a' cx='0' cy='0' r='200'/%3E%3Ccircle fill='%23fdcb6e' cx='0' cy='0' r='100'/%3E%3C/g%3E%3C/svg%3E");
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
}

.modal {
  background: white;
  padding: 20px;
  width: 90%;
  max-width: 600px;
  margin: 100px auto;
  text-align: center;
  position: relative;
  padding-bottom: 60px;
  box-shadow: 0 5px 20px rgba(black, .2), 0 30px 20px -20px rgba(black, .4);
  &__container {
    height: 100%;
  }
}
.form {
  overflow: hidden;
  &__step__container {
    display: flex;
    align-items: center;
    transition: .5s ease-in-out;
  }
  &__step {
    h3 {
      opacity: .3;
      text-transform: uppercase;
      letter-spacing: .1em;
    }
    h4 {
      opacity: .6;
      position: relative;
      &:after {
        content: '';
        display: block;
        position: absolute;
        background: #333;
        opacity: .4;
        bottom: -10px;
        height: 1.5px;
        width: 40%;
        margin: 0 30%;
        
      }
    }
  }
  &__nav {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50px;
    display: flex;
    background: linear-gradient(36deg, #d63031, #e17055);
    & > a {
      display: block;
      width: 50%;
      line-height: 50px;
      text-decoration: none;
      padding: 0 8%;
      color: white;
      &.disabled {
        opacity: .2;
        cursor-events: none;
      }
    }
    &__prev {
      text-align: left;
    }
    &__next {
      text-align: right;
    }
  }
}

.donation-boxes {
  display: flex;
  justify-content: center;
  .box {
    input {
      display: none;
      &:checked ~ label {
        box-shadow: 0 0 8px 2px #fdcb6e;
      }
    }
    label {
      display: block;
      width: 100px;
      height: 100px;
      line-height: 100px;
      text-align: center;
      
      box-shadow: 0 0 0px 1px #EEE;
      border-radius: 5px;
      margin: 10px;
      font-size: 2em;
      transition: .3s;
      cursor: pointer;
      &:hover {
        background: #FAFAFA;
      }
      svg {
        max-width: 100%;
        max-height: 100%;
        padding: 5px;
        margin: 0 auto;
      }
    }
  }
}

a.btn {
  display: inline-block;
  text-decoration: none;
  padding: 0 25px;
  height: 50px;
  line-height: 50px;
  background: #fdcb6e;
  border-radius: 5px;
  color: white;
  margin: 10px;
  transition: .3s;
  &--cta {
    background: linear-gradient(36deg, #d63031, #e17055);
    &:hover {
      background: linear-gradient(36deg, #e17055, #d63031);
    }
  }
}

.form__bullet {
  height: 12px;
  width: 12px;
  border-radius: 50%;
  margin: 8px;
  background: #CCC;
  cursor: pointer;
  transition: .5s .15s;
  &__container {
    display: flex;
    justify-content: center;
  }
  &--active {
    background: #e17055;
    box-shadow: 0 0 4px #e17055;
    pointer-events: none;
  }
}
View Compiled
const $stepContainer = $('.form__step__container'),
      $steps         = $('.form__step'),
      numSteps       = $steps.length,
      $form          = $('.form'),
      $next          = $('.form__nav__next'),
      $prev          = $('.form__nav__prev'),
      $bullets       = $('.form__bullet');

let stepWidth = $form.width();
let currentSlide = 0;


function animateSlider() {
  $stepContainer.css('transform', `translateX(${-stepWidth * currentSlide}px)`);
  $bullets.removeClass('form__bullet--active')
    .eq(currentSlide).addClass('form__bullet--active');
}
function init() {
  stepWidth = $form.width();
  $steps.css({
    width: stepWidth + "px"
  });
  $stepContainer.css("width", stepWidth*numSteps + "px");
  animateSlider();
}

$next.on('click', function() {
  if(currentSlide < numSteps-1){
  currentSlide ++;
  animateSlider();
  }
  if(currentSlide != 0) {
    $prev.removeClass('disabled');
  }
  if(currentSlide === numSteps -1 ) {
    $(this).addClass('disabled');
  }
});
$prev.on('click', function() {
  if(currentSlide > 0) {
    currentSlide --;
    animateSlider();
  } 
  if(currentSlide === 0) {
    $(this).addClass('disabled');
  }
  if(currentSlide != numSteps -1 ) {
    $next.removeClass('disabled');
  }
});

$bullets.on('click', function() {
  currentSlide = $(this).index();
  animateSlider();
});

$(window).on('resize', init ).resize();
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js