@media (max-device-width: 767px) {
  body {
    font-size: 100%;
  }

  .ff h2.title {
    margin-left: 10px;
  }

  .ff-form {
    width: auto !important;
    max-width: 480px;
  }

  /*****************************************************************************
   * Workflow 
   ****************************************************************************/

  .ff-form .gp-help {
    margin-bottom: 1em;
  }

  .ff-form .gp {
    margin: 0 0 20px 0;
  }

  /*****************************************************************************
   * Errors
   ****************************************************************************/

  .ff-form .errors {
    margin: 0 10px;
    padding: 10px;
  }
    
  /*****************************************************************************
   * Columns
   ****************************************************************************/

  .ff-form .two-column,
  .ff-form .two-columns { /* for typo */
    width: auto;
    float: none;
  }

  .ff-form .column,
  .ff-form .columns {
    display: block;
    vertical-align: baseline;
    box-sizing:content-box;
    -moz-box-sizing:content-box; /* Firefox */
  }

  .ff-form .column.two,
  .ff-form .columns.two,
  .ff-form .column.three,
  .ff-form .columns.three,
  .ff-form .column.four,
  .ff-form .columns.four {
    width: auto;
  }

  .ff-form .two-column select,
  .ff-form .two-column input,
  .ff-form .two-column div.static-paragraph,
  .ff-form .two-column textarea,
  .ff-form .two-columns select,
  .ff-form .two-columns input,
  .ff-form .two-columns div.static-paragraph,
  .ff-form .two-columns textarea,
  .ff-form .column select,
  .ff-form .column input,
  .ff-form .column div.static-paragraph,
  .ff-form .column textarea,
  .ff-form .columns select,
  .ff-form .columns input,
  .ff-form .columns div.static-paragraph,
  .ff-form .columns textarea {
    max-width: none;
  }

  .ff-form .two-options-column label.option, 
  .ff-form .two-options-columns label.option {
    width: 50%;
  }

  .ff-form .three-options-column label.option, 
  .ff-form .three-options-columns label.option {
    width: 33%;
  }

  /*****************************************************************************
   * Size
   ****************************************************************************/

  .ff-form select,
  .ff-form textarea,
  .ff-form div.static-paragraph,
  .ff-form input
  {
    width: 80%;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
  }

  .ff-form .small select,
  .ff-form .small textarea,
  .ff-form .small div.static-paragraph,
  .ff-form .small input
  {
    width: 60%;
  }

  .ff-form .medium select,
  .ff-form .medium textarea,
  .ff-form .medium div.static-paragraph,
  .ff-form .medium input
  {
    width: 80%;
  }

  .ff-form .large select,
  .ff-form .large textarea,
  .ff-form .large div.static-paragraph,
  .ff-form .large input
  {
    width: 100%;
  }

  .ff-form .option input,
  .ff-form .checkbox input {
    width: 13px;
    min-width: 13px;
  }

  .ff-form .time-wrapper select {
    width: 4em;
  }

  .ff-form .date-wrapper input {
    width: 10em;
  }

  .ff-form .staticparagraph img {
    max-width: 530px;
  }

  .ff-form .paragraph.small textarea {
    height: 3em;
  }

  .ff-form .paragraph.medium textarea {
    height: 7em;
  }

  .ff-form .paragraph.large textarea {
    height: 10em;
  }

  .ff-form .small .first-name,
  .ff-form .small .last-name {
    width: 30%;
  }

  .ff-form .medium .first-name,
  .ff-form .medium .last-name {
    width: 40%;
  }

  .ff-form .large .first-name,
  .ff-form .large .last-name {
    width: 50%;
  }

  .ff-form .small .first-name,
  .ff-form .small .last-name,
  .ff-form .medium .first-name,
  .ff-form .medium .last-name,
  .ff-form .large .first-name,
  .ff-form .large .last-name {
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
  }

  .ff-form .small .first-name input,
  .ff-form .small .last-name input,
  .ff-form .medium .first-name input,
  .ff-form .medium .last-name input,
  .ff-form .large .first-name input,
  .ff-form .large .last-name input {
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
    width: 100%;
  }

  /*****************************************************************************
 * Submit message
 ****************************************************************************/

  .ff .submit-message { 
    margin: 30px 20px;
  }

  .ff .submit-message h1 {
    font-size: 1.5em;
    font-weight: normal;
  }
}