@import url("https://fonts.googleapis.com/css?family=Inter:400'");

.middle {
  width: 100%;
  height: auto;
  text-align: center;
}

  .middle h1 {
    font-family: "Inter", sans-serif;
    color: #fff;
  }

  .middle .multisteps-form__title {
    color: #fff;
    margin-bottom: 50px;
  }

  .middle input[type="range"] {
    width: 100%;
    color: white;
  }

  .middle output {
    color: white;
  }

  .middle input[type="radio"] {
    display: none;
  }

    .middle input[type="radio"]:checked + .box {
      /*background-color: #bc4123;*/
    }

      .middle input[type="radio"]:checked + .box span {
        color: white;
        transform: translateY(70px);
      }

        .middle input[type="radio"]:checked + .box span:before {
          transform: translateY(0px);
          opacity: 1;
        }

  .middle .box {
    transition: all 250ms ease;
    will-change: transition;
    display: inline-block;
    text-align: center;
    cursor: pointer;
    /*position: relative;*/
    font-family: "Inter", sans-serif;
    font-weight: 900;
    /*border-radius: 50%;*/
    margin-left: 35px;
    margin-right: 35px;
    margin-top: 10px;
    margin-bottom: 10px;
  }

    .middle .box:hover {
      transform: scale(1.1);
    }

    .middle .box img {
      margin: 0 auto;
      width: 200px;
      height: 150px;
    }

      .middle .box span:before {
        font-size: 1.2em;
        font-family: FontAwesome;
        display: block;
        transform: translateY(-80px);
        opacity: 0;
        transition: all 300ms ease-in-out;
        font-weight: normal;
        color: white;
      }

/*  .middle .front-end span:before {
    content: "\f121";
  }

  .middle .back-end span:before {
    content: "\f0f4";
  }
*/
  .middle p {
    color: #fff;
    font-family: "Inter", sans-serif;
    font-weight: 400;
  }

    .middle p a {
      text-decoration: underline;
      font-weight: bold;
      color: #fff;
    }

    .middle p span:after {
      content: "\f0e7";
      font-family: FontAwesome;
      color: yellow;
    }