#fuels .wrapper {
  width: 100%; }

.fuel-assistant {
  background: #f4f4f4;
  padding: 2em 0; }
  @media (min-width: 64em) {
    .fuel-assistant .questionnaire-container {
      margin-bottom: 1em; } }
  .fuel-assistant .card {
    display: none; }
    .fuel-assistant .card.card--active {
      display: block; }
  @media (min-width: 48em) {
    .fuel-assistant .cards {
      max-width: 545px;
      margin: 0 auto; } }
  .fuel-assistant .question-card .question-text {
    color: #004785;
    font-family: "proxima-nova",sans-serif;
    font-size: 1.2em;
    font-style: normal;
    font-weight: 600;
    text-align: center;
    text-transform: uppercase; }
    .fuel-assistant .question-card .question-text:after {
      border-bottom: solid 1px #625e62;
      content: "";
      display: block;
      height: 1px;
      margin: 1.2em auto;
      width: 20px; }
  @media (min-width: 48em) {
    .fuel-assistant .question-card .question-answers {
      display: flex;
      flex-wrap: wrap;
      justify-content: center; } }
  .fuel-assistant .question-card .answer-card {
    background: #fff;
    border: solid 2px #e1e1e1;
    margin-bottom: 1em; }
    @media (min-width: 48em) {
      .fuel-assistant .question-card .answer-card {
        flex-basis: 32%;
        margin: 0 .5em 1em;
        max-width: 165px;
        padding: 1.5em 0 0; } }
    @media (min-width: 64em) {
      .fuel-assistant .question-card .answer-card {
        border-color: #e1e1e1;
        cursor: pointer;
        transition: border-color 0.4s; }
        .fuel-assistant .question-card .answer-card:hover {
          border-color: #ffdf1a; }
          .fuel-assistant .question-card .answer-card:hover .answer-img {
            -webkit-filter: grayscale(0%);
            /* Safari 6.0 - 9.0 */
            filter: grayscale(0%); } }
  .fuel-assistant .question-card .answer-img {
    display: none; }
    @media (min-width: 48em) {
      .fuel-assistant .question-card .answer-img {
        display: block;
        text-align: center; } }
    @media (min-width: 64em) {
      .fuel-assistant .question-card .answer-img {
        -webkit-filter: grayscale(100%);
        /* Safari 6.0 - 9.0 */
        filter: grayscale(100%);
        transition: filter 0.4s, -webkit-filter 0.4s; } }
  .fuel-assistant .question-card .answer-text {
    padding: 1em;
    text-align: center;
    width: 100%; }
    .fuel-assistant .question-card .answer-text button {
      border: none;
      background: transparent;
      cursor: pointer;
      font-family: "bebas-neue",sans-serif;
      font-style: normal;
      font-weight: 700;
      font-size: 2.1em;
      letter-spacing: 1px; }
      @media (min-width: 48em) {
        .fuel-assistant .question-card .answer-text button {
          font-size: 1.2em; } }
  .fuel-assistant .question-card .question-disclaimer {
    color: #000;
    font-family: "proxima-nova",sans-serif;
    font-size: 0.8em;
    font-style: normal;
    font-weight: 400;
    text-align: center; }
  .fuel-assistant .fuel-gauge {
    margin: 2em auto 0;
    max-width: 300px;
    text-align: center; }
    @media (min-width: 64em) {
      .fuel-assistant .fuel-gauge {
        margin: 1em auto 0; } }
    .fuel-assistant .fuel-gauge img {
      max-width: 100%; }
  .fuel-assistant .start-over {
    background: rgba(0, 0, 0, 0.1);
    cursor: pointer;
    display: none;
    margin: 2em auto 0;
    max-width: 335px;
    padding: 1em;
    text-align: center;
    width: 100%; }
    .fuel-assistant .start-over--visible {
      display: block; }
    .fuel-assistant .start-over button {
      background: transparent;
      border: none;
      color: #797979;
      cursor: pointer;
      font-family: "proxima-nova",sans-serif;
      font-size: 1.1em;
      font-style: normal;
      font-weight: 600;
      text-align: center;
      text-transform: uppercase; }

.filters {
  max-width: 950px;
  padding: 1.2em 0; }
  .filters .filter-title {
    color: #797979;
    font-family: "proxima-nova",sans-serif;
    font-size: 1.1em;
    font-style: normal;
    font-weight: 600;
    text-align: center;
    text-transform: uppercase; }
  .filters .filters-container {
    display: none;
    padding: 2em 0; }
  .filters .additional-filters {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around; }
    @media (min-width: 48em) {
      .filters .additional-filters {
        align-items: baseline; } }
  .filters .leaded-filter, .filters .ethanol-filter {
    /* Customize the label (the container) */
    /* Hide the browser's default radio button */
    /* Create a custom radio button */
    /* On mouse-over, add a grey background color */
    /* When the radio button is checked, add a blue background */
    /* Create the indicator (the dot/circle - hidden when not checked) */
    /* Show the indicator (dot/circle) when checked */
    /* Style the indicator (dot/circle) */ }
    .filters .leaded-filter .option-container, .filters .ethanol-filter .option-container {
      color: #797979;
      font-family: "proxima-nova",sans-serif;
      font-size: 1.1em;
      font-style: normal;
      font-weight: 600;
      display: block;
      position: relative;
      padding-left: 2em;
      margin-bottom: 0.2em;
      cursor: pointer;
      text-transform: uppercase;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none; }
    .filters .leaded-filter .option-container input, .filters .ethanol-filter .option-container input {
      position: absolute;
      opacity: 0; }
    .filters .leaded-filter .radio, .filters .ethanol-filter .radio {
      position: absolute;
      top: 50%;
      left: 0;
      height: 19px;
      width: 19px;
      background-color: transparent;
      border: solid 2px #e2e2e2;
      border-radius: 50%;
      transform: translateY(-50%);
      transition: background-color 0.4s; }
    .filters .leaded-filter .option-container:hover input ~ .radio, .filters .ethanol-filter .option-container:hover input ~ .radio {
      background-color: #ccc; }
    .filters .leaded-filter .option-container input:checked ~ .radio, .filters .ethanol-filter .option-container input:checked ~ .radio {
      background-color: #ffdf1a;
      border: solid 2px #ffdf1a; }
    .filters .leaded-filter .radio:after, .filters .ethanol-filter .radio:after {
      content: "";
      position: absolute;
      display: none; }
    .filters .leaded-filter .option-container input:checked ~ .radio:after, .filters .ethanol-filter .option-container input:checked ~ .radio:after {
      display: block;
      border: solid 2px #fff; }
    .filters .leaded-filter .option-container .radio:after, .filters .ethanol-filter .option-container .radio:after {
      top: 0;
      left: 0;
      width: 15px;
      height: 15px;
      border-radius: 50%;
      background: #ffdf1a; }
  @media (min-width: 48em) {
    .filters .leaded-filter {
      order: 1; } }
  @media (min-width: 48em) {
    .filters .ethanol-filter {
      order: 3; } }
  .filters .octane-filter {
    flex-basis: 100%;
    margin-top: 2em;
    position: relative;
    /* Change the Slider Button Color Here */ }
    @media (min-width: 48em) {
      .filters .octane-filter {
        flex-basis: 50%;
        margin-top: 0;
        order: 2; } }
    .filters .octane-filter input {
      display: block;
      margin: 0 auto; }
    .filters .octane-filter .octane-label, .filters .octane-filter .range-value {
      color: #797979;
      font-family: "proxima-nova",sans-serif;
      font-size: 1.1em;
      font-style: normal;
      font-weight: 600;
      display: block;
      position: relative;
      margin-bottom: 0.2em;
      cursor: pointer;
      text-align: center;
      text-transform: uppercase;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none; }
    .filters .octane-filter .octane-value {
      background: #e1e1e1;
      border-radius: 8px;
      height: 5px;
      margin-top: 1em;
      width: 80%;
      transition: background 450ms;
      -webkit-appearance: none !important;
      -webkit-transition: background 450ms; }
    .filters .octane-filter .octane-value::-webkit-slider-thumb {
      background: #fff;
      border: solid 2px #ffdf1a;
      border-radius: 15px;
      height: 20px;
      width: 20px;
      -webkit-appearance: none !important; }
    .filters .octane-filter .octane-value::-webkit-slider-thumb:before {
      background-color: #ffdf1a; }
    .filters .octane-filter .octane-ranges {
      display: flex;
      justify-content: space-between;
      position: absolute;
      top: 3.5em;
      left: 50%;
      margin: 0 auto;
      text-align: center;
      transform: translateX(-50%);
      width: 80%; }

.fuel-grid {
  background: #f4f4f4;
  padding: 2em 0 0; }
  .fuel-grid .results-title {
    color: #797979;
    font-family: "proxima-nova",sans-serif;
    font-size: 1.1em;
    font-style: normal;
    font-weight: 600;
    margin-bottom: 2em;
    text-align: center;
    text-transform: uppercase; }
    .fuel-grid .results-title:after {
      border-bottom: solid 1px #625e62;
      content: "";
      display: block;
      height: 1px;
      margin: 1.2em auto;
      width: 20px; }
    .fuel-grid .results-title .results-number {
      color: #004785; }
  .fuel-grid .fuel {
    max-width: 200px; }
    @media (min-width: 48em) {
      .fuel-grid .fuel {
        max-width: 180px; } }
    @media (min-width: 64em) {
      .fuel-grid .fuel {
        max-width: 195px; } }
    @media (min-width: 75em) {
      .fuel-grid .fuel {
        max-width: 200px; } }

/*# sourceMappingURL=fuel-assistant.css.map */