.radio-position {
  @import url('https://fonts.googleapis.com/css?family=Dax:400,900');
  $font: 'Dax',
  sans-serif;
  $white: #fff;
  $green: #007e90;
  input[type="radio"] {
    display: none;
    &:checked {
      + .radio-box {
        background-color: $green;
        span {
          color: white;
          transform: translateY(70px);
          &:before {
            transform: translateY(0px);
            opacity: 1;
          }
        }
      }
    }
  }
  .radio-box {
    width: 200px;
    height: 200px;
    background-color: $white;
    transition: all 250ms ease;
    will-change: transition;
    display: inline-block;
    text-align: center;
    cursor: pointer;
    position: relative;
    font-family: $font;
    font-weight: 900;
    &:active {
      transform: translateY(10px);
    }
    span {
      position: absolute;
      transform: translate(0, 60px);
      left: 0;
      right: 0;
      transition: all 300ms ease;
      font-size: 1.5em;
      user-select: none;
      color: $green;
      &:before {
        content: '\f037';
        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;
      }
    }
  }

}

.icon-position {
  $white: #fff;
  $green: #007e90;
  input[type="radio"] {
    display: none;
    &:checked {
      + .radio-box {
        background-color: $green;
        span {
          color: white;
          transform: translateY(70px);
          &:before {
            transform: translateY(0px);
            opacity: 1;
          }
        }
      }
    }
  }
  .radio-box {
    width: 200px;
    height: 200px;
    background-color: $white;
    transition: all 250ms ease;
    will-change: transition;
    display: inline-block;
    text-align: center;
    cursor: pointer;
    position: relative;
    font-weight: 900;
    &:active {
      transform: translateY(10px);
    }

    img {
      max-width: 100%;
    }

  }

}

.order-container {
  ul {
    li {
      display: inline-block;
      width: 100px;
    }
  }
}

input.error, textarea.error {
  border: 1px solid red;
}

label.error {
  display: table;
  color: red;
}