/*~
Common imports for variables and mixins.
Do not import any files which output css.
Imported by most .less files.
*/
/*~
LESS COLOR VARIABLES. Imported by `_imports.less`.

Here is a spreadsheet of [brand color hex values and variable names](https://docs.google.com/spreadsheets/d/1flXHJ0OCGwFJr8DDVceesxBqi2q3g-EeMOtpi45WtW4/edit?usp=sharing) available for use.

If changes are made, update/commit the VSCode snippet by running: `nps create-vscode-colors`

@helper: fedocs/helpers/_color-variables.tt
*/
/* -----------------------------------------
  LESS Variables - Media Queries - These match what is on http://getbootstrap.com/css/#responsive-utilities
----------------------------------------- */
/*~
Contains utility and UI mixins. Imported by `_imports.less`.

TODO: Break into a file for UI and a file for utility.
*/
/**
Button Primary:
`.btnPrimary(@size, @icon)` - Main CTA button.

    @example
    <p>
      <button class="example" data-copy=".btnPrimary()">Button Text</button>
      <button class="example active" data-copy=".btnPrimary()">Button Text</button>
      <button class="example disabled">Button Text</button>
    <p>

    <p>
      <button class="exampleIcon" data-copy=".btnPrimary(500, @fa-plus-circle)">Button Text</button>
      <button class="exampleIconleft" data-copy=".btnPrimary(500, @fa-chevron-left, 'left')">Button Text</button>
      <button class="exampleIconafter" data-copy=".btnPrimary(500, @fa-chevron-right, 'after')">Button Text</button>
      <button class="exampleIconright" data-copy=".btnPrimary(500, @fa-edit, 'right')">Button Text</button>
    </p>

    <div class="more">
      <p>
        100 (13px)
        <p>
          <button class="example100" data-copy=".btnPrimary(100)">Button 100</button>
          <button class="example100 active" data-copy=".btnPrimary(100)">Button 100</button>
          <button class="example100 disabled">Button 100</button>
        <p>
        <p>
          <button class="example100Icon" data-copy=".btnPrimary(100, @fa-plus-circle)">Button 100</button>
          <button class="example100Iconleft" data-copy=".btnPrimary(100, @fa-plus-circle, 'left')">Button 100</button>
          <button class="example100Iconafter" data-copy=".btnPrimary(100, @fa-plus-circle, 'after')">Button 100</button>
          <button class="example100Iconright" data-copy=".btnPrimary(100, @fa-plus-circle, 'right')">Button 100</button>
        </p>
      </p>
      <p>
        200 (13px)
        <p>
          <button class="example200" data-copy=".btnPrimary(200)">Button 200</button>
          <button class="example200 active" data-copy=".btnPrimary(200)">Button 200</button>
          <button class="example200 disabled">Button 200</button>
        </p>
        <p>
          <button class="example200Icon" data-copy=".btnPrimary(200, @fa-plus-circle)">Button 200</button>
          <button class="example200Iconleft" data-copy=".btnPrimary(200, @fa-plus-circle, 'left')">Button 200</button>
          <button class="example200Iconafter" data-copy=".btnPrimary(200, @fa-plus-circle, 'after')">Button 200</button>
          <button class="example200Iconright" data-copy=".btnPrimary(200, @fa-plus-circle, 'right')">Button 200</button>
        </p>
      </p>
      <p>
        300 (14px)
        <p>
          <button class="example300" data-copy=".btnPrimary(300)">Button 300</button>
          <button class="example300 active" data-copy=".btnPrimary(300, @fa-plus-circle)">Button 300</button>
          <button class="example300 disabled">Button 300</button>
        </p>
        <p>
          <button class="example300Icon" data-copy=".btnPrimary(300)">Button 300</button>
          <button class="example300Iconleft" data-copy=".btnPrimary(300, @fa-plus-circle, 'left')">Button 300</button>
          <button class="example300Iconafter" data-copy=".btnPrimary(300, @fa-plus-circle, 'after')">Button 300</button>
          <button class="example300Iconright" data-copy=".btnPrimary(300, @fa-plus-circle, 'right')">Button 300</button>
        </p>
      </p>
      <p>
        400 (15px)
        <p>
          <button class="example400" data-copy=".btnPrimary(400)">Button 400</button>
          <button class="example400 active" data-copy=".btnPrimary(400)">Button 400</button>
          <button class="example400 disabled">Button 400</button>
        </p>
        <p>
          <button class="example400Icon" data-copy=".btnPrimary(400, @fa-plus-circle)">Button 400</button>
          <button class="example400Iconleft" data-copy=".btnPrimary(400, @fa-plus-circle, 'left')">Button 400</button>
          <button class="example400Iconafter" data-copy=".btnPrimary(400, @fa-plus-circle, 'after')">Button 400</button>
          <button class="example400Iconright" data-copy=".btnPrimary(400, @fa-plus-circle, 'right')">Button 400</button>
        </p>
      </p>
      <p>
        500 (16px)
        <p>
          <button class="example500" data-copy=".btnPrimary(500)">Button 500</button>
          <button class="example500 active" data-copy=".btnPrimary(500)">Button 500</button>
          <button class="example500 disabled">Button 500</button>
        </p>
        <p>
          <button class="example500Icon" data-copy=".btnPrimary(500, @fa-plus-circle)">Button 500</button>
          <button class="example500Iconleft" data-copy=".btnPrimary(500, @fa-plus-circle, 'left')">Button 500</button>
          <button class="example500Iconafter" data-copy=".btnPrimary(500, @fa-plus-circle, 'after')">Button 500</button>
          <button class="example500Iconright" data-copy=".btnPrimary(500, @fa-plus-circle, 'right')">Button 500</button>
        </p>
      </p>
      <p>
        600 (17px)
        <p>
          <button class="example600" data-copy=".btnPrimary(600)">Button 600</button>
          <button class="example600 active" data-copy=".btnPrimary(600)">Button 600</button>
          <button class="example600 disabled">Button 600</button>
        </p>
        <p>
          <button class="example600Icon" data-copy=".btnPrimary(600, @fa-plus-circle)">Button 600</button>
          <button class="example600Iconleft" data-copy=".btnPrimary(600, @fa-plus-circle, 'left')">Button 600</button>
          <button class="example600Iconafter" data-copy=".btnPrimary(600, @fa-plus-circle, 'after')">Button 600</button>
          <button class="example600Iconright" data-copy=".btnPrimary(600, @fa-plus-circle, 'right')">Button 600</button>
        </p>
      </p>
    </div>

    @less
    .example {
      .btnPrimary();
    }

    .exampleIcon {
      .btnPrimary(500, @fa-plus-circle);
    }

    .exampleIconleft {
      .btnPrimary(500, @fa-chevron-left, 'left');
    }

    .exampleIconafter {
      .btnPrimary(500, @fa-chevron-right, 'after');
    }

    .exampleIconright {
      .btnPrimary(500, @fa-edit, 'right');
    }

    .example100 {
      .btnPrimary(100);
    }

    .example100Icon {
      .btnPrimary(100, @fa-plus-circle);
    }

    .example100Iconleft {
      .btnPrimary(100, @fa-plus-circle, 'left');
    }

    .example100Iconafter {
      .btnPrimary(100, @fa-plus-circle, 'after');
    }

    .example100Iconright {
      .btnPrimary(100, @fa-plus-circle, 'right');
    }

    .example200 {
      .btnPrimary(200);
    }

    .example200Icon {
      .btnPrimary(200, @fa-plus-circle);
    }

    .example200Iconleft {
      .btnPrimary(200, @fa-plus-circle, 'left');
    }

    .example200Iconafter {
      .btnPrimary(200, @fa-plus-circle, 'after');
    }

    .example200Iconright {
      .btnPrimary(200, @fa-plus-circle, 'right');
    }

    .example300 {
      .btnPrimary(300);
    }

    .example300Icon {
      .btnPrimary(300, @fa-plus-circle);
    }

    .example300Iconleft {
      .btnPrimary(300, @fa-plus-circle, 'left');
    }

    .example300Iconafter {
      .btnPrimary(300, @fa-plus-circle, 'after');
    }

    .example300Iconright {
      .btnPrimary(300, @fa-plus-circle, 'right');
    }

    .example400 {
      .btnPrimary(400);
    }

    .example400Icon {
      .btnPrimary(400, @fa-plus-circle);
    }

    .example400Iconleft {
      .btnPrimary(400, @fa-plus-circle, 'left');
    }

    .example400Iconafter {
      .btnPrimary(400, @fa-plus-circle, 'after');
    }

    .example400Iconright {
      .btnPrimary(400, @fa-plus-circle, 'right');
    }

    .example500 {
      .btnPrimary(500);
    }

    .example500Icon {
      .btnPrimary(500, @fa-plus-circle);
    }

    .example500Iconleft {
      .btnPrimary(500, @fa-plus-circle, 'left');
    }

    .example500Iconafter {
      .btnPrimary(500, @fa-plus-circle, 'after');
    }

    .example500Iconright {
      .btnPrimary(500, @fa-plus-circle, 'right');
    }

    .example600 {
      .btnPrimary(600);
    }

    .example600Icon {
      .btnPrimary(600, @fa-plus-circle);
    }

    .example600Iconleft {
      .btnPrimary(600, @fa-plus-circle, 'left');
    }

    .example600Iconafter {
      .btnPrimary(600, @fa-plus-circle, 'after');
    }

    .example600Iconright {
      .btnPrimary(600, @fa-plus-circle, 'right');
    }

  @section ui.buttons
*/
/**
Circle Button Primary:
`.circlePrimary(@size, @icon)` - Main CTA button.

    @example
    <button class="example" data-copy=".circlePrimary(500, @fa-plus-circle)">Button Text</button>
    <button class="example active" data-copy=".circlePrimary(500)">Button Text</button>
    <button class="example disabled">Button Text</button>

    <div class="more">
      <p>
        100 (13px) <button class="example100" data-copy=".circlePrimary(100, @fa-plus-circle)">Button 100</button>
        <button class="example100 active" data-copy=".circlePrimary(100, @fa-plus-circle)">Button 100</button>
        <button class="example100 disabled">Button 100</button>
      </p>
      <p>
        200 (13px) <button class="example200" data-copy=".circlePrimary(200, @fa-plus-circle)">Button 200</button>
        <button class="example200 active" data-copy=".circlePrimary(200, @fa-plus-circle)">Button 200</button>
        <button class="example200 disabled">Button 200</button>
      </p>
      <p>
        300 (14px) <button class="example300" data-copy=".circlePrimary(300, @fa-plus-circle)">Button 300</button>
        <button class="example300 active" data-copy=".circlePrimary(300, @fa-plus-circle)">Button 300</button>
        <button class="example300 disabled">Button 300</button>
      </p>
      <p>
        400 (15px) <button class="example400" data-copy=".circlePrimary(400, @fa-plus-circle)">Button 400</button>
        <button class="example400 active" data-copy=".circlePrimary(400, @fa-plus-circle)">Button 400</button>
        <button class="example400 disabled">Button 400</button>
      </p>
      <p>
        500 (16px) <button class="example500" data-copy=".circlePrimary(500, @fa-plus-circle)">Button 500</button>
        <button class="example500 active" data-copy=".circlePrimary(500, @fa-plus-circle)">Button 500</button>
        <button class="example500 disabled">Button 500</button>
      </p>
      <p>
        600 (17px) <button class="example600" data-copy=".circlePrimary(600, @fa-plus-circle)">Button 600</button>
        <button class="example600 active" data-copy=".circlePrimary(600, @fa-plus-circle)">Button 600</button>
        <button class="example600 disabled">Button 600</button>
      </p>
    </div>

    @less
    .example {
      .circlePrimary(500, @fa-plus-circle);
    }

    .example100 {
      .circlePrimary(100, @fa-plus-circle);
    }

    .example200 {
      .circlePrimary(200, @fa-plus-circle);
    }

    .example300 {
      .circlePrimary(300, @fa-plus-circle);
    }

    .example400 {
      .circlePrimary(400, @fa-plus-circle);
    }

    .example500 {
      .circlePrimary(500, @fa-plus-circle);
    }

    .example600 {
      .circlePrimary(600, @fa-plus-circle);
    }

  @section ui.buttons
*/
/**
Button Secondary:
`.btnSecondary(@size)` - Secondary CTA button.

    @example
    <p>
      <button class="example" data-copy=".btnSecondary()">Button Text</button>
      <button class="example active" data-copy=".btnSecondary()">Button Text</button>
      <button class="example disabled">Button Text</button>
    </p>
    <p>
      <button class="exampleIcon" data-copy=".btnSecondary(500, @fa-plus-circle)">Button Text</button>
      <button class="exampleIconleft" data-copy=".btnSecondary(500, @fa-plus-circle, 'left')">Button Text</button>
      <button class="exampleIconafter" data-copy=".btnSecondary(500, @fa-plus-circle, 'after')">Button Text</button>
      <button class="exampleIconright" data-copy=".btnSecondary(500, @fa-plus-circle, 'right')">Button Text</button>
    </p>

    <div class="more">
      <p>
        100 (13px) <button class="example100" data-copy=".btnSecondary(100)">Button 100</button>
        <button class="example100 active" data-copy=".btnSecondary(100)">Button 100</button>
        <button class="example100 disabled">Button 100</button>
      </p>
      <p>
        200 (13px) <button class="example200" data-copy=".btnSecondary(200)">Button 200</button>
        <button class="example200 active" data-copy=".btnSecondary(200)">Button 200</button>
        <button class="example200 disabled">Button 200</button>
      </p>
      <p>
        300 (14px) <button class="example300" data-copy=".btnSecondary(300)">Button 300</button>
        <button class="example300 active" data-copy=".btnSecondary(300)">Button 300</button>
        <button class="example300 disabled">Button 300</button>
      </p>
      <p>
        400 (15px) <button class="example400" data-copy=".btnSecondary(400)">Button 400</button>
        <button class="example400 active" data-copy=".btnSecondary(400)">Button 400</button>
        <button class="example400 disabled">Button 400</button>
      </p>
      <p>
        500 (16px) <button class="example500" data-copy=".btnSecondary(500)">Button 500</button>
        <button class="example500 active" data-copy=".btnSecondary(500)">Button 500</button>
        <button class="example500 disabled">Button 500</button>
      </p>
      <p>
        600 (17px) <button class="example600" data-copy=".btnSecondary(600)">Button 600</button>
        <button class="example600 active" data-copy=".btnSecondary(600)">Button 600</button>
        <button class="example600 disabled">Button 600</button>
      </p>
    </div>

    @less
    .example {
      .btnSecondary();
    }

    .exampleIcon {
      .btnSecondary(500, @fa-plus-circle);
    }

    .exampleIconleft {
      .btnSecondary(500, @fa-plus-circle, 'left');
    }

    .exampleIconafter {
      .btnSecondary(500, @fa-plus-circle, 'after');
    }

    .exampleIconright {
      .btnSecondary(500, @fa-plus-circle, 'right');
    }

    .example100 {
      .btnSecondary(100);
    }

    .example200 {
      .btnSecondary(200);
    }

    .example300 {
      .btnSecondary(300);
    }

    .example400 {
      .btnSecondary(400);
    }

    .example500 {
      .btnSecondary(500);
    }

    .example600 {
      .btnSecondary(600);
    }

  @section ui.buttons
*/
/**
Button Regular:
`.btnRegular(@size)` - Regular CTA button.

    @example
    <p>
      <button class="example" data-copy=".btnRegular()">Button Text</button>
      <button class="example active" data-copy=".btnRegular()">Button Text</button>
      <button class="example disabled">Button Text</button>
    </p>
    <p>
      <button class="exampleIcon" data-copy=".btnRegular(500, @fa-plus-circle)">Button Text</button>
      <button class="exampleIconleft" data-copy=".btnRegular(500, @fa-plus-circle, 'left')">Button Text</button>
      <button class="exampleIconafter" data-copy=".btnRegular(500, @fa-plus-circle, 'after')">Button Text</button>
      <button class="exampleIconright" data-copy=".btnRegular(500, @fa-plus-circle, 'right')">Button Text</button>
    </p>

    <div class="more">
      <p>
        100 (13px) <button class="example100" data-copy=".btnRegular(100)">Button 100</button>
        <button class="example100 active" data-copy=".btnRegular(100)">Button 100</button>
        <button class="example100 disabled">Button 100</button>
      </p>
      <p>
        200 (13px) <button class="example200" data-copy=".btnRegular(200)">Button 200</button>
        <button class="example200 active" data-copy=".btnRegular(200)">Button 200</button>
        <button class="example200 disabled">Button 200</button>
      </p>
      <p>
        300 (14px) <button class="example300" data-copy=".btnRegular(300)">Button 300</button>
        <button class="example300 active" data-copy=".btnRegular(300)">Button 300</button>
        <button class="example300 disabled">Button 300</button>
      </p>
      <p>
        400 (15px) <button class="example400" data-copy=".btnRegular(400)">Button 400</button>
        <button class="example400 active" data-copy=".btnRegular(400)">Button 400</button>
        <button class="example400 disabled">Button 400</button>
      </p>
      <p>
        500 (16px) <button class="example500" data-copy=".btnRegular(500)">Button 500</button>
        <button class="example500 active" data-copy=".btnRegular(500)">Button 500</button>
        <button class="example500 disabled">Button 500</button>
      </p>
      <p>
        600 (17px) <button class="example600" data-copy=".btnRegular(600)">Button 600</button>
        <button class="example600 active" data-copy=".btnRegular(600)">Button 600</button>
        <button class="example600 disabled">Button 600</button>
      </p>
    </div>

    @less
    .example {
      .btnRegular();
    }

    .exampleIcon {
      .btnRegular(500, @fa-plus-circle);
    }

    .exampleIconleft {
      .btnRegular(500, @fa-plus-circle, 'left');
    }

    .exampleIconafter {
      .btnRegular(500, @fa-plus-circle, 'after');
    }

    .exampleIconright {
      .btnRegular(500, @fa-plus-circle, 'right');
    }

    .example100 {
      .btnRegular(100);
    }

    .example200 {
      .btnRegular(200);
    }

    .example300 {
      .btnRegular(300);
    }

    .example400 {
      .btnRegular(400);
    }

    .example500 {
      .btnRegular(500);
    }

    .example600 {
      .btnRegular(600);
    }

  @section ui.buttons
*/
/**
Button RegularAlt:
`.btnRegularAlt(@size)` - RegularAlt CTA button.

    @example
    <p>
      <button class="example" data-copy=".btnRegularAlt()">Button Text</button>
      <button class="example active" data-copy=".btnRegularAlt()">Button Text</button>
      <button class="example disabled">Button Text</button>
    </p>
    <p>
      <button class="exampleIcon" data-copy=".btnRegularAlt(500, @fa-plus-circle)">Button Text</button>
      <button class="exampleIconleft" data-copy=".btnRegularAlt(500, @fa-plus-circle, 'left')">Button Text</button>
      <button class="exampleIconafter" data-copy=".btnRegularAlt(500, @fa-plus-circle, 'after')">Button Text</button>
      <button class="exampleIconright" data-copy=".btnRegularAlt(500, @fa-plus-circle, 'right')">Button Text</button>
    </p>

    <div class="more">
      <p>
        100 (13px) <button class="example100" data-copy=".btnRegularAlt(100)">Button 100</button>
        <button class="example100 active" data-copy=".btnRegularAlt(100)">Button 100</button>
        <button class="example100 disabled">Button 100</button>
      </p>
      <p>
        200 (13px) <button class="example200" data-copy=".btnRegularAlt(200)">Button 200</button>
        <button class="example200 active" data-copy=".btnRegularAlt(200)">Button 200</button>
        <button class="example200 disabled">Button 200</button>
      </p>
      <p>
        300 (14px) <button class="example300" data-copy=".btnRegularAlt(300)">Button 300</button>
        <button class="example300 active" data-copy=".btnRegularAlt(300)">Button 300</button>
        <button class="example300 disabled">Button 300</button>
      </p>
      <p>
        400 (15px) <button class="example400" data-copy=".btnRegularAlt(400)">Button 400</button>
        <button class="example400 active" data-copy=".btnRegularAlt(400)">Button 400</button>
        <button class="example400 disabled">Button 400</button>
      </p>
      <p>
        500 (16px) <button class="example500" data-copy=".btnRegularAlt(500)">Button 500</button>
        <button class="example500 active" data-copy=".btnRegularAlt(500)">Button 500</button>
        <button class="example500 disabled">Button 500</button>
      </p>
      <p>
        600 (17px) <button class="example600" data-copy=".btnRegularAlt(600)">Button 600</button>
        <button class="example600 active" data-copy=".btnRegularAlt(600)">Button 600</button>
        <button class="example600 disabled">Button 600</button>
      </p>
    </div>

    @less
    .example {
      .btnRegularAlt();
    }

    .exampleIcon {
      .btnRegularAlt(500, @fa-plus-circle);
    }

    .exampleIconleft {
      .btnRegularAlt(500, @fa-plus-circle, 'left');
    }

    .exampleIconafter {
      .btnRegularAlt(500, @fa-plus-circle, 'after');
    }

    .exampleIconright {
      .btnRegularAlt(500, @fa-plus-circle, 'right');
    }

    .example100 {
      .btnRegularAlt(100);
    }

    .example200 {
      .btnRegularAlt(200);
    }

    .example300 {
      .btnRegularAlt(300);
    }

    .example400 {
      .btnRegularAlt(400);
    }

    .example500 {
      .btnRegularAlt(500);
    }

    .example600 {
      .btnRegularAlt(600);
    }

  @section ui.buttons
*/
/**
Button Danger:
`.btnDanger(@size)` - Danger CTA button.

    @example
    <p>
      <button class="example" data-copy=".btnDanger()">Button Text</button>
      <button class="example active" data-copy=".btnDanger()">Button Text</button>
      <button class="example disabled">Button Text</button>
    </p>
    <p>
      <button class="exampleIcon" data-copy=".btnDanger(500, @fa-plus-circle)">Button Text</button>
      <button class="exampleIconleft" data-copy=".btnDanger(500, @fa-plus-circle, 'left')">Button Text</button>
      <button class="exampleIconafter" data-copy=".btnDanger(500, @fa-plus-circle, 'after')">Button Text</button>
      <button class="exampleIconright" data-copy=".btnDanger(500, @fa-plus-circle, 'right')">Button Text</button>
    </p>

    <div class="more">
      <p>
        100 (13px) <button class="example100" data-copy=".btnDanger(100)">Button 100</button>
        <button class="example100 active" data-copy=".btnDanger(100)">Button 100</button>
        <button class="example100 disabled">Button 100</button>
      </p>
      <p>
        200 (13px) <button class="example200" data-copy=".btnDanger(200)">Button 200</button>
        <button class="example200 active" data-copy=".btnDanger(200)">Button 200</button>
        <button class="example200 disabled">Button 200</button>
      </p>
      <p>
        300 (14px) <button class="example300" data-copy=".btnDanger(300)">Button 300</button>
        <button class="example300 active" data-copy=".btnDanger(300)">Button 300</button>
        <button class="example300 disabled">Button 300</button>
      </p>
      <p>
        400 (15px) <button class="example400" data-copy=".btnDanger(400)">Button 400</button>
        <button class="example400 active" data-copy=".btnDanger(400)">Button 400</button>
        <button class="example400 disabled">Button 400</button>
      </p>
      <p>
        500 (16px) <button class="example500" data-copy=".btnDanger(500)">Button 500</button>
        <button class="example500 active" data-copy=".btnDanger(500)">Button 500</button>
        <button class="example500 disabled">Button 500</button>
      </p>
      <p>
        600 (17px) <button class="example600" data-copy=".btnDanger(600)">Button 600</button>
        <button class="example600 active" data-copy=".btnDanger(600)">Button 600</button>
        <button class="example600 disabled">Button 600</button>
      </p>
    </div>

    @less
    .example {
      .btnDanger();
    }

    .exampleIcon {
      .btnDanger(500, @fa-plus-circle);
    }

    .exampleIconleft {
      .btnDanger(500, @fa-plus-circle, 'left');
    }

    .exampleIconafter {
      .btnDanger(500, @fa-plus-circle, 'after');
    }

    .exampleIconright {
      .btnDanger(500, @fa-plus-circle, 'right');
    }

    .example100 {
      .btnDanger(100);
    }

    .example200 {
      .btnDanger(200);
    }

    .example300 {
      .btnDanger(300);
    }

    .example400 {
      .btnDanger(400);
    }

    .example500 {
      .btnDanger(500);
    }

    .example600 {
      .btnDanger(600);
    }

  @section ui.buttons
*/
/**
Button Brand:
`.btnBrand(@background_color; @size)` - Brand CTA button.

    @example
    <p>
      <button class="example" data-copy=".btnBrand(@linkedin)">Button Text</button>
      <button class="example active" data-copy=".btnBrand(@linkedin)">Button Text</button>
      <button class="example disabled">Button Text</button>
    </p>
    <p>
      <button class="exampleIcon" data-copy=".btnBrand(@linkedin, 500, @fa-plus-circle)">Button Text</button>
      <button class="exampleIconleft" data-copy=".btnBrand(@linkedin, 500, @fa-plus-circle, 'left')">Button Text</button>
      <button class="exampleIconafter" data-copy=".btnBrand(@linkedin, 500, @fa-plus-circle, 'after')">Button Text</button>
      <button class="exampleIconright" data-copy=".btnBrand(@linkedin, 500, @fa-plus-circle, 'right')">Button Text</button>
    </p>

    <div class="more">
      <p>
        100 (13px) <button class="example100" data-copy=".btnBrand(@facebook, 100)">Button 100</button>
        <button class="example100 active" data-copy=".btnBrand(@facebook, 100)">Button 100</button>
        <button class="example100 disabled">Button 100</button>
      </p>
      <p>
        200 (13px) <button class="example200" data-copy=".btnBrand(@google, 200)">Button 200</button>
        <button class="example200 active" data-copy=".btnBrand(@google, 200)">Button 200</button>
        <button class="example200 disabled">Button 200</button>
      </p>
      <p>
        300 (14px) <button class="example300" data-copy=".btnBrand(@twitter, 300)">Button 300</button>
        <button class="example300 active" data-copy=".btnBrand(@twitter, 300)">Button 300</button>
        <button class="example300 disabled">Button 300</button>
      </p>
      <p>
        400 (15px) <button class="example400" data-copy=".btnBrand(@dropBoxBlue, 400)">Button 400</button>
        <button class="example400 active" data-copy=".btnBrand(@dropBoxBlue, 400)">Button 400</button>
        <button class="example400 disabled">Button 400</button>
      </p>
      <p>
        500 (16px) <button class="example500" data-copy=".btnBrand(@facebook, 500)">Button 500</button>
        <button class="example500 active" data-copy=".btnBrand(@facebook, 500)">Button 500</button>
        <button class="example500 disabled">Button 500</button>
      </p>
      <p>
        600 (17px) <button class="example600" data-copy=".btnBrand(@google, 600)">Button 600</button>
        <button class="example600 active" data-copy=".btnBrand(@google, 600)">Button 600</button>
        <button class="example600 disabled">Button 600</button>
      </p>
    </div>

    @less
    .example {
      .btnBrand(@linkedin);
    }

    .exampleIcon {
      .btnBrand(@linkedin, 500, @fa-plus-circle);
    }

    .exampleIconleft {
      .btnBrand(@linkedin, 500, @fa-plus-circle, 'left');
    }

    .exampleIconafter {
      .btnBrand(@linkedin, 500, @fa-plus-circle, 'after');
    }

    .exampleIconright {
      .btnBrand(@linkedin, 500, @fa-plus-circle, 'right');
    }

    .example100 {
      .btnBrand(@facebook, 100);
    }

    .example200 {
      .btnBrand(@google, 200);
    }

    .example300 {
      .btnBrand(@twitter, 300);
    }

    .example400 {
      .btnBrand(@dropBoxBlue, 400);
    }

    .example500 {
      .btnBrand(@facebook, 500);
    }

    .example600 {
      .btnBrand(@google, 600);
    }

  @section ui.buttons
*/
/**
Button AlertInfo:
`.btnAlertInfo(@size)` - AlertInfo CTA button.

    @example
    <div class="examples">
      <p>
        <button class="example" data-copy=".btnAlertInfo()">Button Text</button>
        <button class="example active" data-copy=".btnAlertInfo()">Button Text</button>
        <button class="example disabled">Button Text</button>
      </p>
      <p>
        <button class="exampleIcon" data-copy=".btnAlertInfo(500, @fa-plus-circle)">Button Text</button>
        <button class="exampleIconleft" data-copy=".btnAlertInfo(500, @fa-plus-circle, 'left')">Button Text</button>
        <button class="exampleIconafter" data-copy=".btnAlertInfo(500, @fa-plus-circle, 'after')">Button Text</button>
        <button class="exampleIconright" data-copy=".btnAlertInfo(500, @fa-plus-circle, 'right')">Button Text</button>
      </p>

      <div class="more">
        <p>
          100 (13px) <button class="example100" data-copy=".btnAlertInfo(100)">Button 100</button>
          <button class="example100 active" data-copy=".btnAlertInfo(100)">Button 100</button>
          <button class="example100 disabled">Button 100</button>
        </p>
        <p>
          200 (13px) <button class="example200" data-copy=".btnAlertInfo(200)">Button 200</button>
          <button class="example200 active" data-copy=".btnAlertInfo(200)">Button 200</button>
          <button class="example200 disabled">Button 200</button>
        </p>
        <p>
          300 (14px) <button class="example300" data-copy=".btnAlertInfo(300)">Button 300</button>
          <button class="example300 active" data-copy=".btnAlertInfo(300)">Button 300</button>
          <button class="example300 disabled">Button 300</button>
        </p>
        <p>
          400 (15px) <button class="example400" data-copy=".btnAlertInfo(400)">Button 400</button>
          <button class="example400 active" data-copy=".btnAlertInfo(400)">Button 400</button>
          <button class="example400 disabled">Button 400</button>
        </p>
        <p>
          500 (16px) <button class="example500" data-copy=".btnAlertInfo(500)">Button 500</button>
          <button class="example500 active" data-copy=".btnAlertInfo(500)">Button 500</button>
          <button class="example500 disabled">Button 500</button>
        </p>
        <p>
          600 (17px) <button class="example600" data-copy=".btnAlertInfo(600)">Button 600</button>
          <button class="example600 active" data-copy=".btnAlertInfo(600)">Button 600</button>
          <button class="example600 disabled">Button 600</button>
        </p>
      </div>
    </div>

    @less
    .example {
      .btnAlertInfo();
    }

    .exampleIcon {
      .btnAlertInfo(500, @fa-plus-circle);
    }

    .exampleIconleft {
      .btnAlertInfo(500, @fa-plus-circle, 'left');
    }

    .exampleIconafter {
      .btnAlertInfo(500, @fa-plus-circle, 'after');
    }

    .exampleIconright {
      .btnAlertInfo(500, @fa-plus-circle, 'right');
    }

    .example100 {
      .btnAlertInfo(100);
    }

    .example200 {
      .btnAlertInfo(200);
    }

    .example300 {
      .btnAlertInfo(300);
    }

    .example400 {
      .btnAlertInfo(400);
    }

    .example500 {
      .btnAlertInfo(500);
    }

    .example600 {
      .btnAlertInfo(600);
    }

    .examples {
    }

  @section ui.buttons
*/
/**
Button AlertDanger:
`.btnAlertDanger(@size)` - AlertDanger CTA button.

    @example
    <div class="examples">
      <p>
        <button class="example" data-copy=".btnAlertDanger()">Button Text</button>
        <button class="example active" data-copy=".btnAlertDanger()">Button Text</button>
        <button class="example disabled">Button Text</button>
      </p>
      <p>
        <button class="exampleIcon" data-copy=".btnAlertDanger(500, @fa-plus-circle)">Button Text</button>
        <button class="exampleIconleft" data-copy=".btnAlertDanger(500, @fa-plus-circle, 'left')">Button Text</button>
        <button class="exampleIconafter" data-copy=".btnAlertDanger(500, @fa-plus-circle, 'after')">Button Text</button>
        <button class="exampleIconright" data-copy=".btnAlertDanger(500, @fa-plus-circle, 'right')">Button Text</button>
      </p>

      <div class="more">
        <p>
          100 (13px) <button class="example100" data-copy=".btnAlertDanger(100)">Button 100</button>
          <button class="example100 active" data-copy=".btnAlertDanger(100)">Button 100</button>
          <button class="example100 disabled">Button 100</button>
        </p>
        <p>
          200 (13px) <button class="example200" data-copy=".btnAlertDanger(200)">Button 200</button>
          <button class="example200 active" data-copy=".btnAlertDanger(200)">Button 200</button>
          <button class="example200 disabled">Button 200</button>
        </p>
        <p>
          300 (14px) <button class="example300" data-copy=".btnAlertDanger(300)">Button 300</button>
          <button class="example300 active" data-copy=".btnAlertDanger(300)">Button 300</button>
          <button class="example300 disabled">Button 300</button>
        </p>
        <p>
          400 (15px) <button class="example400" data-copy=".btnAlertDanger(400)">Button 400</button>
          <button class="example400 active" data-copy=".btnAlertDanger(400)">Button 400</button>
          <button class="example400 disabled">Button 400</button>
        </p>
        <p>
          500 (16px) <button class="example500" data-copy=".btnAlertDanger(500)">Button 500</button>
          <button class="example500 active" data-copy=".btnAlertDanger(500)">Button 500</button>
          <button class="example500 disabled">Button 500</button>
        </p>
        <p>
          600 (17px) <button class="example600" data-copy=".btnAlertDanger(600)">Button 600</button>
          <button class="example600 active" data-copy=".btnAlertDanger(600)">Button 600</button>
          <button class="example600 disabled">Button 600</button>
        </p>
      </div>
    </div>

    @less
    .example {
      .btnAlertDanger();
    }

    .exampleIcon {
      .btnAlertDanger(500, @fa-plus-circle);
    }

    .exampleIconleft {
      .btnAlertDanger(500, @fa-plus-circle, 'left');
    }

    .exampleIconafter {
      .btnAlertDanger(500, @fa-plus-circle, 'after');
    }

    .exampleIconright {
      .btnAlertDanger(500, @fa-plus-circle, 'right');
    }

    .example100 {
      .btnAlertDanger(100);
    }

    .example200 {
      .btnAlertDanger(200);
    }

    .example300 {
      .btnAlertDanger(300);
    }

    .example400 {
      .btnAlertDanger(400);
    }

    .example500 {
      .btnAlertDanger(500);
    }

    .example600 {
      .btnAlertDanger(600);
    }

    .examples {
    }

  @section ui.buttons
*/
/**
Button TipCallout:
`.btnTipCallout(@size)` - TipCallout CTA button, used inside of callouts.

    @example
    <div class="examples">
      <p>
        <button class="example" data-copy=".btnTipCallout()">Button Text</button>
        <button class="example active" data-copy=".btnTipCallout()">Button Text</button>
        <button class="example disabled">Button Text</button>
      </p>
      <p>
        <button class="exampleIcon" data-copy=".btnTipCallout(500, @fa-plus-circle)">Button Text</button>
        <button class="exampleIconleft" data-copy=".btnTipCallout(500, @fa-plus-circle, 'left')">Button Text</button>
        <button class="exampleIconafter" data-copy=".btnTipCallout(500, @fa-plus-circle, 'after')">Button Text</button>
        <button class="exampleIconright" data-copy=".btnTipCallout(500, @fa-plus-circle, 'right')">Button Text</button>
      </p>

      <div class="more">
        <p>
          100 (13px) <button class="example100" data-copy=".btnTipCallout(100)">Button 100</button>
          <button class="example100 active" data-copy=".btnTipCallout(100)">Button 100</button>
          <button class="example100 disabled">Button 100</button>
        </p>
        <p>
          200 (13px) <button class="example200" data-copy=".btnTipCallout(200)">Button 200</button>
          <button class="example200 active" data-copy=".btnTipCallout(200)">Button 200</button>
          <button class="example200 disabled">Button 200</button>
        </p>
        <p>
          300 (14px) <button class="example300" data-copy=".btnTipCallout(300)">Button 300</button>
          <button class="example300 active" data-copy=".btnTipCallout(300)">Button 300</button>
          <button class="example300 disabled">Button 300</button>
        </p>
        <p>
          400 (15px) <button class="example400" data-copy=".btnTipCallout(400)">Button 400</button>
          <button class="example400 active" data-copy=".btnTipCallout(400)">Button 400</button>
          <button class="example400 disabled">Button 400</button>
        </p>
        <p>
          500 (16px) <button class="example500" data-copy=".btnTipCallout(500)">Button 500</button>
          <button class="example500 active" data-copy=".btnTipCallout(500)">Button 500</button>
          <button class="example500 disabled">Button 500</button>
        </p>
        <p>
          600 (17px) <button class="example600" data-copy=".btnTipCallout(600)">Button 600</button>
          <button class="example600 active" data-copy=".btnTipCallout(600)">Button 600</button>
          <button class="example600 disabled">Button 600</button>
        </p>
      </div>
    </div>

    @less
    .example {
      .btnTipCallout();
    }

    .exampleIcon {
      .btnTipCallout(500, @fa-plus-circle);
    }

    .exampleIconleft {
      .btnTipCallout(500, @fa-plus-circle, 'left');
    }

    .exampleIconafter {
      .btnTipCallout(500, @fa-plus-circle, 'after');
    }

    .exampleIconright {
      .btnTipCallout(500, @fa-plus-circle, 'right');
    }

    .example100 {
      .btnTipCallout(100);
    }

    .example200 {
      .btnTipCallout(200);
    }

    .example300 {
      .btnTipCallout(300);
    }

    .example400 {
      .btnTipCallout(400);
    }

    .example500 {
      .btnTipCallout(500);
    }

    .example600 {
      .btnTipCallout(600);
    }

    .examples {
      background: @blue09;
      padding: 10px;
      color: #fff;
      border-radius: 6px;

      .hide {
        color: #fff;
      }
    }

  @section ui.buttons
*/
/**
Get Recruited:
`.btnGetRecruited(@size)` - Get Recruited brand CTA.

    @example
    <p>
      <button class="example" data-copy=".btnGetRecruited()">Button Text</button>
      <button class="example active" data-copy=".btnGetRecruited()">Button Text</button>
      <button class="example disabled">Button Text</button>
    </p>
    <p>
      <button class="exampleIcon" data-copy=".btnGetRecruited(500, @fa-plus-circle)">Button Text</button>
      <button class="exampleIconleft" data-copy=".btnGetRecruited(500, @fa-plus-circle, 'left')">Button Text</button>
      <button class="exampleIconafter" data-copy=".btnGetRecruited(500, @fa-plus-circle, 'after')">Button Text</button>
      <button class="exampleIconright" data-copy=".btnGetRecruited(500, @fa-plus-circle, 'right')">Button Text</button>
    </p>

    <div class="more">
      <p>
        100 (13px) <button class="example100" data-copy=".btnGetRecruited(100)">Button 100</button>
        <button class="example100 active" data-copy=".btnGetRecruited(100)">Button 100</button>
        <button class="example100 disabled">Button 100</button>
      </p>
      <p>
        200 (13px) <button class="example200" data-copy=".btnGetRecruited(200)">Button 200</button>
        <button class="example200 active" data-copy=".btnGetRecruited(200)">Button 200</button>
        <button class="example200 disabled">Button 200</button>
      </p>
      <p>
        300 (14px) <button class="example300" data-copy=".btnGetRecruited(300)">Button 300</button>
        <button class="example300 active" data-copy=".btnGetRecruited(300)">Button 300</button>
        <button class="example300 disabled">Button 300</button>
      </p>
      <p>
        400 (15px) <button class="example400" data-copy=".btnGetRecruited(400)">Button 400</button>
        <button class="example400 active" data-copy=".btnGetRecruited(400)">Button 400</button>
        <button class="example400 disabled">Button 400</button>
      </p>
      <p>
        500 (16px) <button class="example500" data-copy=".btnGetRecruited(500)">Button 500</button>
        <button class="example500 active" data-copy=".btnGetRecruited(500)">Button 500</button>
        <button class="example500 disabled">Button 500</button>
      </p>
      <p>
        600 (17px) <button class="example600" data-copy=".btnGetRecruited(600)">Button 600</button>
        <button class="example600 active" data-copy=".btnGetRecruited(600)">Button 600</button>
        <button class="example600 disabled">Button 600</button>
      </p>
    </div>

    @less
    .example {
      .btnGetRecruited();
    }

    .exampleIcon {
      .btnGetRecruited(500, @fa-plus-circle);
    }

    .exampleIconleft {
      .btnGetRecruited(500, @fa-plus-circle, 'left');
    }

    .exampleIconafter {
      .btnGetRecruited(500, @fa-plus-circle, 'after');
    }

    .exampleIconright {
      .btnGetRecruited(500, @fa-plus-circle, 'right');
    }

    .example100 {
      .btnGetRecruited(100);
    }

    .example200 {
      .btnGetRecruited(200);
    }

    .example300 {
      .btnGetRecruited(300);
    }

    .example400 {
      .btnGetRecruited(400);
    }

    .example500 {
      .btnGetRecruited(500);
    }

    .example600 {
      .btnGetRecruited(600);
    }

  @section ui.buttons
*/
/**
Google Signin Button:
`.buttonGoogleSignin()` - Button with Google logo.

    @example
    <button class="example" data-copy=".buttonGoogleSignin()">Button Text</button>
    <button class="example active" data-copy=".buttonGoogleSignin()">Button Text</button>
    <button class="example disabled">Button Text</button>

    <div class="more">
      <p>
        100 (13px) <button class="example100" data-copy=".buttonGoogleSignin(100)">Button 100</button>
        <button class="example100 active" data-copy=".buttonGoogleSignin(100)">Button 100</button>
        <button class="example100 disabled">Button 100</button>
      </p>
      <p>
        200 (13px) <button class="example200" data-copy=".buttonGoogleSignin(200)">Button 200</button>
        <button class="example200 active" data-copy=".buttonGoogleSignin(200)">Button 200</button>
        <button class="example200 disabled">Button 200</button>
      </p>
      <p>
        300 (14px) <button class="example300" data-copy=".buttonGoogleSignin(300)">Button 300</button>
        <button class="example300 active" data-copy=".buttonGoogleSignin(300)">Button 300</button>
        <button class="example300 disabled">Button 300</button>
      </p>
      <p>
        400 (15px) <button class="example400" data-copy=".buttonGoogleSignin(400)">Button 400</button>
        <button class="example400 active" data-copy=".buttonGoogleSignin(400)">Button 400</button>
        <button class="example400 disabled">Button 400</button>
      </p>
      <p>
        500 (16px) <button class="example500" data-copy=".buttonGoogleSignin(500)">Button 500</button>
        <button class="example500 active" data-copy=".buttonGoogleSignin(500)">Button 500</button>
        <button class="example500 disabled">Button 500</button>
      </p>
      <p>
        600 (17px) <button class="example600" data-copy=".buttonGoogleSignin(600)">Button 600</button>
        <button class="example600 active" data-copy=".buttonGoogleSignin(600)">Button 600</button>
        <button class="example600 disabled">Button 600</button>
      </p>
    </div>

    @less
    .example {
      .buttonGoogleSignin();
    }

    .example100 {
      .buttonGoogleSignin(100);
    }

    .example200 {
      .buttonGoogleSignin(200);
    }

    .example300 {
      .buttonGoogleSignin(300);
    }

    .example400 {
      .buttonGoogleSignin(400);
    }

    .example500 {
      .buttonGoogleSignin(500);
    }

    .example600 {
      .buttonGoogleSignin(600);
    }

  @section ui.buttons
*/
/**
Button Link:
`.buttonLink()` - Behaves like a button but looks like a link for design purposes.

    @example
    <button type="button" class="example">Button Text</button>

    @less
    .example {
      .buttonLink();
    }

  @section ui.buttons
*/
/**
Combo Button:
`.combo-button()` - Converts any button into one that can be combined with a text input

    @example
    <p><button type="button" class="example1">Button Text</button></p>
    <p><button type="button" class="example2">Button Text</button></p>
    <p><button type="button" class="example3">Button Text</button></p>

    @less
    .example1 {
      .btnPrimary(300);
      .combo-button();
    }
    .example2 {
      .btnRegular(300);
      .combo-button();
    }
    .example3 {
      .btnRegularAlt(300);
      .combo-button();
    }

  @section ui.buttons
*/
/**
Icon Button:
`.iconButton()` - Gives an element a `::before` pseudo element and styles the look. Note: Does not style positioning.

    @example
    <p>
      Default button:
      <button class="example">
        Icon description text
      </button>
      <br>
      Note: If no hover color is provided, the initial opacity will be .5, and set to 1 when hovered
    </p>

    <p>
      Custom button settings:
      <button class="example2">
        Icon description text 2
      </button>
    </p>

    @less
    .example {
      .iconButton();
    }

    .example2 {
      .iconButton(@fa-info-circle; @color: red; @hoverColor: @greenText; @fontSize: 20px);
    }

  @section ui.buttons
*/
/**
Text Input:
`.textInput()` - ZR style text inputs

    @example
    <p><input class="example" type="text" placeholder="Some Text"></p>
    <p><input class="example" type="text" placeholder="Some Text" value="Some Text"></p>

    <div class="more">
      <p><input class="example400" type="text" placeholder="400" value="400"></p>
      <p><input class="example700" type="text" placeholder="700" value="700"></p>
    </div>

    @less
    .example {
      .textInput();
    }

    .example400 {
      .textInput(400);
    }

    .example700 {
      .textInput(700);
    }

  @section ui.forms
*/
/**
Input Focus:
`.inputFocus()` - Focused state of an input. TODO: Get input styling in here.

    @example
    <input class="example">

    @less
    .example {
      .inputFocus();
    }

  @section ui.forms
*/
/**
Radio Buttons:
`.radioButton()` - ZR style radio buttons

    @example
    <div class="example cms">
      <p>
        <input name="answer" type="radio" value="got_hired_ziprecruiter" id="answer_2" checked>
        <label for="answer_2">ZipRecruiter</label>
      </p>
      <p>
        <input name="answer" type="radio" value="got_hired" id="answer_1">
        <label for="answer_1">Not sure</label>
      </p>
      <p>
        <input name="answer" type="radio" value="not_got_hired" id="answer_3" disabled>
        <label for="answer_3">Nope</label>
      </p>
    </div>

    @less
    .example input[type="radio"] {
      .radioButton();
    }

  @section ui.forms
*/
/**
Check Box:
`.checkBox()` - ZR style check boxes. Note: the checkbox input has to be placed BEFORE the label element in the DOM for this css to work. You can get a similar layout on formfu using the 'layout:'.

    @example
    <div class="example cms">
      <p>
        <input name="check_1" type="checkbox" value="got_hired_ziprecruiter" id="check_1" checked>
        <label for="check_1">ZipRecruiter</label>
      </p>
      <p>
        <input name="check_2" type="checkbox" value="got_hired" id="check_2">
        <label for="check_2">Not sure</label>
      </p>
      <p>
        <input name="check_3" type="checkbox" value="got_hired_i_guess" id="check_3" indeterminate>
        <label for="check_3">Really not sure</label>
        <script>document.getElementById('check_3').indeterminate=true</script>
      </p>
      <p>
        <input name="check_4" type="checkbox" value="not_got_hired" id="check_4" disabled>
        <label for="check_4">Nope</label>
      </p>
    </div>

    @less
    .example input[type="checkbox"] {
      .checkBox();
    }

  @section ui.forms
*/
/**
radioButton Parent:
`.radioButtonParent()` - Label styling for ZR style radioButtons to allow for better text wrapping.

    @example
    <div class="example">
      <p>
        <input name="check_thing_1" type="radio" value="foo" id="check_thing_1" checked>
        <label for="check_thing_1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse velit magna, dapibus id urna in, malesuada imperdiet ligula. Sed commodo magna ut nunc varius, at tempor lorem porta. Duis pharetra nisi nulla, quis vehicula odio consequat ut. Ut ut gravida risus. </label>
      </p>
    </div>

    @less
    .example {
      .radioButtonParent();
    }

  @section ui.forms
*/
/**
checkBox Parent:
`.checkBoxParent()` - Label styling for ZR style checkBoxes to allow for better text wrapping.

    @example
    <div class="example">
      <p>
        <input name="check_thing_1" type="checkbox" value="foo" id="check_thing_1" checked>
        <label for="check_thing_1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse velit magna, dapibus id urna in, malesuada imperdiet ligula. Sed commodo magna ut nunc varius, at tempor lorem porta. Duis pharetra nisi nulla, quis vehicula odio consequat ut. Ut ut gravida risus. </label>
      </p>
    </div>

    @less
    .example {
      .checkBoxParent();
    }

  @section ui.forms
*/
/**
Tags:
`.tag_item()` - Used as tags, badges and label-like things.

    @example

    <p class="note">Default tags:</p>

    <span class="example">
      Default Tag
    </span>

    <span class="example">
      Tag with Remove <button class="tag_item_remove" title="Remove tag">Remove</button>
    </span>

    <span class="example">
      Tag with Count <span class="count">23</span>
    </span>

    <span class="example verified_tag">
      Verified Tag
    </span>

    <p class="note">Alternate tags:</p>
    <span class="example quiet_tag">
      Quiet Tag
    </span>

    <span class="example quiet_tag">
      Quiet Tag with Add <button class="tag_item_add" title="Add tag">Add</button>
    </span>

    <span class="example emphasized_tag">
      Emphasized Tag
    </span>

    <span class="example promo_tag">
      Promo Tag
    </span>

    <span class="example great_match_tag">
      Great Match
    </span>

    <span class="example super_apply_tag">
      Super Apply
    </span>

    <span class="example remote_tag">
     Remote
    </span>

    <span class="example bonus_tag">
      Signing Bonus
    </span>

    <span class="example veteran_tag">
      Veteran-Friendly
    </span>

    <span class="example relocation_tag">
      Relocation Assistance
    </span>

    <span class="example urgent_tag">
      URGENT!
    </span>

    @less
    .note {
      font-size: 13px;
      margin: 10px 0;
      font-weight: 700;
    }

    .example {
      .tag_item(@margin: 0 4px 7px);
      vertical-align: top;
    }

  @section ui.tags
*/
/**
Spinner Loading Animation:
`.spinner()` - Loading animation spinner.

    @description
    This mixin should only be used for making reusable components (template include, React component, etc)

    [See ZRS for usage](/fedocs/zrs#zrs.spinner)

    @example
    <svg class="spinner" width="66px" height="66px" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg">
        <circle class="path" fill="none" stroke-width="6" stroke-linecap="round" cx="33" cy="33" r="25"></circle>
    </svg>

    @less
    .spinner {
      .spinner();
    }

  @section ui.other
*/
/**
Visually Hidden:
`.visuallyHidden()` - Hide from sighted users.

    @example
    <div class="john_cena">U Can't C Me</div>

    @less
    .john_cena {
      .visuallyHidden();
    }

  @section utility
*/
/**
Inverse Link:
`.inverseLink()` - Links on dark backgrounds.

    @example
    <a href="#" class="example">Button Text</a>

    @less
    .example {
      .inverseLink();
    }

  @section ui
*/
/**
CTA Link:
`.ctaLink()` - Links with cta color.

    @example
    <a href="#" class="example">Button Text</a>

    @less
    .example {
      .ctaLink();
    }

  @section ui
*/
/* Split layout

Usage:

.split {
  .split_group {
    .splitGroup();

    > * {
      .splitGroupChildren();
    }
  }

  .split_image {
    .splitImage();
  }
}

.split:nth-child(even) {
  .split_text {
    .splitTextAlt();
  }
}

*/
/**
SVG backgrounds:
`.svg()` - Properly escape SVG code and use as a background image.

    @example
    <button class="example">Button Text</button>

    @less
    .example {
      .svg('<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
        <circle cx="100" cy="100" r="100"/>
      </svg>');
    }

  @section utility
*/
/**
Spin Icon Animation:
`.spin()` - Smooth spinning.

    @example
    <span class="example">:)</span>

    @less
    .example {
      position: absolute;
      .spin();
    }

  @section utility
*/
/**
Pulse Icon Animation:
`.pulse()` - Smooth spinning.

    @example
    <span class="example">Loading</span>

    @less
    .example {
      &:after {
        position: absolute;
        .fa-spinner();
        .pulse();
      }
    }

  @section utility
*/
/* ==========================================================================
MIXIN FOR EASY ANIMATION PREFIXING
========================================================================== */
/* ==========================================================================
ZR CSS FADE IN
========================================================================== */
/**
Circle Cropper for Images:
`.image_circle_cropper()` - Crops images to circles.

    @example
    <div class="example">
      <img width="62" height="62" alt="" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSItNTAgLTUwIDEwMCAxMDAiPjxyZWN0IHg9Ii01MCIgeT0iLTUwIiB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgcng9IjQiIGZpbGw9IiNmOTAiLz48cmVjdCB4PSItNTAiIHk9Ii01MCIgd2lkdGg9IjUwIiBoZWlnaHQ9IjUwIiByeD0iNCIgZmlsbD0iI2ZmYjEzYiIvPjxyZWN0IHdpZHRoPSI1MCIgaGVpZ2h0PSI1MCIgcng9IjQiIGZpbGw9IiNkZTg1MDAiLz48dXNlIHN0cm9rZT0iI2Y5MCIgc3Ryb2tlLXdpZHRoPSIyMi42IiB4bGluazpocmVmPSIjYSIvPjxjaXJjbGUgcj0iMjYiLz48dXNlIHN0cm9rZT0iIzAwMCIgc3Ryb2tlLXdpZHRoPSIxMiIgeGxpbms6aHJlZj0iI2EiLz48ZyBpZD0iYSI+PGcgaWQ9ImQiPjxnIGlkPSJjIj48Y2lyY2xlIGlkPSJiIiBjeT0iLTMxLjYiIHI9IjcuMSIgZmlsbD0iI2ZmZiIvPjxwYXRoIGQ9Ik0wIDMxLjZ2LTYzLjIiIHN0cm9rZT0iI2ZmZiIgc3Ryb2tlLXdpZHRoPSIxMCIvPjx1c2UgeT0iNjMuMiIgeGxpbms6aHJlZj0iI2IiLz48L2c+PHVzZSB0cmFuc2Zvcm09InJvdGF0ZSg5MCkiIHhsaW5rOmhyZWY9IiNjIi8+PC9nPjx1c2UgdHJhbnNmb3JtPSJyb3RhdGUoNDUpIiB4bGluazpocmVmPSIjZCIvPjwvZz48cGF0aCBkPSJNNDQuNyAwdjQwYzAgMy4zLTEuNyA1LTUgNWgtNzkuNGMtMy4zIDAtNS0xLjctNS01VjAiLz48cGF0aCBkPSJNMzYgNC4yYzMgMCA1LjMgMi40IDUuMyA1LjN2MThjLTI3LjYtMy40LTU1LTgtODItNy43VjkuNmMwLTMgMi40LTUuMyA1LjMtNS4zeiIgZmlsbD0iIzNmM2YzZiIvPjx1c2Ugc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjcuNCIgeGxpbms6aHJlZj0iI2UiLz48ZyBzdHJva2U9IiNmZmYiIHN0cm9rZS13aWR0aD0iNi40Ij48ZyBpZD0iZSI+PHBhdGggZmlsbD0ibm9uZSIgZD0iTS0zMS43IDMxLjJhOC4zIDguMyAwIDEgMCA4LjItOC4zIDguMyA4LjMgMCAxIDEgOC4zLTguNU0yMy4yIDIzaDguM3Y4LjNhOC4zIDguMyAwIDAgMS0xNi41IDBWMTQuN2E4LjMgOC4zIDAgMCAxIDE2LjUgMCIvPjxnIHN0cm9rZS13aWR0aD0iLjUiIHN0cm9rZT0iIzAwMCI+PHBhdGggZD0iTTQuOCAzaDYuOEwzLjMgNDIuOGgtNi44TC0xMS44IDNoN0wwIDI2LjN6IiBmaWxsPSIjZmZmIi8+PHBhdGggZD0iTTIzLjIgMTkuNnY2LjhtNS0xMS43SDM1bS03MC4yIDE2LjVoN205LjUtMTYuNWg3IiBzdHJva2UtbGluZWNhcD0ic3F1YXJlIi8+PC9nPjwvZz48L2c+PC9zdmc+">
    </div>

    @less
    .example {
      .image_circle_cropper();
    }

  @section utility
*/
/**
Circle Cropper for Logos:
`.logo_circle_cropper()` - Crops logos to circles.

    @example
    <div class="example">
      <img width="62" height="62" src="https://s3.amazonaws.com/public-ziprecruiter/uploads/ccf4936f.jpeg" alt="">
    </div>

    @less
    .example {
      .logo_circle_cropper();
    }

  @section utility
*/
/**
Button Font Stack:
`.buttonFontStack()` - Font stylings on buttons. Note: These will probably already be set on your elements.

    @example
    <button class="example">
      The quick brown fox jumps over the lazy dog
    </button>

    @less
    .example {
      .buttonFontStack();
    }

  @section ui.typography
*/
/**
Header Font Stack:
`.headerFontStack()` - Font stylings on headers. Note: These will probably already be set on your elements.

    @example
    <h1 class="example">
      The quick brown fox jumps over the lazy dog
    </h1>

    @less
    .example {
      .headerFontStack();
    }

  @section ui.typography
*/
/**
Body Font Stack:
`.bodyFontStack()` - Font stylings on the body. Note: These will probably already be set on your elements.

    @example
    <p class="example">
      The quick brown fox jumps over the lazy dog
    </p>

    @less
    .example {
      .bodyFontStack();
    }

  @section ui.typography
*/
/**
Marketing Header Font Stack:
`.marketingHeaderFontStack()` - Font stylings for the marketing header (Frank Ruhl Libre font). Note: You will need to link `/css/_marketing_header_font.less` in your template to use this mixin.

    @example
    link_css_file('/css/_marketing_header_font.less');
    <p class="example">
      The quick brown fox jumps over the lazy dog
    </p>

    @less
    .example {
      .marketingHeaderFontStack();
    }

  @section ui.typography
*/
/**
Close Button:
`.closeButton()` - Gives an element a `::before` pseudo element and styles the look. Note: Does not style positioning.

    @example
    <button class="example">
      Click here to close something
    </button>

    @less
    .example {
      .closeButton();

      position: absolute;
    }

  @section ui.buttons
*/
/**
Success message:
`.success_message()` - Success messages. Uses `.message()` base styling.

    @example
    <div class="example" data-thing="message">
      <p>This is only <strong>a message</strong>. <a href="#">Link</a></p>
      <button type="button" class="close_message" data-close="message">Close</button>
    </div>

    <div class="example has_icon" data-thing="message">
      <p>This is only <strong>a message</strong>. <a href="#">Link</a></p>
      <button type="button" class="close_message" data-close="message">Close</button>
    </div>

    <div class="example" data-thing="message">
      <h3 class="message_header">I am a Header!</h3>
      <p>This is only <strong>a message</strong>. <a href="#">Link</a></p>
      <button type="button" class="close_message" data-close="message">Close</button>
    </div>

    @less
    .example {
      .success_message();
    }

  @section ui.feedback
*/
/**
Info message:
`.info_message()` - Info messages. Uses `.message()` base styling.

    @example
    <div class="example" data-thing="message">
      <p>This is only <strong>a message</strong>. <a href="#">Link</a></p>
      <button type="button" class="close_message" data-close="message">Close</button>
    </div>

    <div class="example has_icon" data-thing="message">
      <p>This is only <strong>a message</strong>. <a href="#">Link</a></p>
      <button type="button" class="close_message" data-close="message">Close</button>
    </div>

    <div class="example" data-thing="message">
      <h3 class="message_header">I am a Header!</h3>
      <p>This is only <strong>a message</strong>. <a href="#">Link</a></p>
      <button type="button" class="close_message" data-close="message">Close</button>
    </div>

    @less
    .example {
      .info_message();
    }

  @section ui.feedback
*/
/**
Alert message:
`.alert_message()` - Alert messages. Uses `.message()` base styling.

    @example
    <div class="example" data-thing="message">
      <p>This is only <strong>a message</strong>. <a href="#">Link</a></p>
      <button type="button" class="close_message" data-close="message">Close</button>
    </div>

    <div class="example has_icon" data-thing="message">
      <p>This is only <strong>a message</strong>. <a href="#">Link</a></p>
      <button type="button" class="close_message" data-close="message">Close</button>
    </div>

    <div class="example" data-thing="message">
      <h3 class="message_header">I am a Header!</h3>
      <p>This is only <strong>a message</strong>. <a href="#">Link</a></p>
      <button type="button" class="close_message" data-close="message">Close</button>
    </div>

    @less
    .example {
      .alert_message();
    }

  @section ui.feedback
*/
/**
Danger message:
`.danger_message()` - Danger messages. Uses `.message()` base styling.

    @example
    <div class="example" data-thing="message">
      <p>This is only <strong>a message</strong>. <a href="#">Link</a></p>
      <button type="button" class="close_message" data-close="message">Close</button>
    </div>

    <div class="example has_icon" data-thing="message">
      <p>This is only <strong>a message</strong>. <a href="#">Link</a></p>
      <button type="button" class="close_message" data-close="message">Close</button>
    </div>

    <div class="example" data-thing="message">
      <h3 class="message_header">I am a Header!</h3>
      <p>This is only <strong>a message</strong>. <a href="#">Link</a></p>
      <button type="button" class="close_message" data-close="message">Close</button>
    </div>

    @less
    .example {
      .danger_message();
    }

  @section ui.feedback
*/
/**
Tile message:
`.tile_message()` - Tile style messages. Uses `.message()` base styling.

    @example
    <div class="example" data-thing="message">
      <button type="button" class="close_message" data-close="message">Close</button>
      <p>This is only <strong>a message</strong>. <a href="#">Link</a></p>
    </div>

    <div class="example has_icon" data-thing="message">
      <button type="button" class="close_message" data-close="message">Close</button>
      <p>This is only <strong>a message</strong>. <a href="#">Link</a></p>
    </div>

    <div class="example" data-thing="message">
      <h3 class="message_header">I am a Header!</h3>
      <p>This is only <strong>a message</strong>. <a href="#">Link</a></p>
      <button type="button" class="close_message" data-close="message">Close</button>
    </div>

    @less
    .example {
      .tile_message();
    }

  @section ui.feedback
*/
/**
Left-to-Right border fade:
`.fade-border()` - Simulates a border that fades from left to right.

    @description
    TODO: Maybe use a border image with an SVG?

    @example
    <div class="example">
      <p>Look below!</p>
    </div>

    @less
    .example {
      .fade-border();
    }

  @section ui
*/
/**
Reset button styling:
`.reset-button()` - Remove base styling from buttons.

    @example
    <button class="example">I'm a button that looks like text</button>

    @less
    .example {
      .reset-button();
    }

  @section utility
*/
/**
Visually hide text:
`.hide-text()` - Hide text from sighted users.

    @example
    <button class="john_cena">U Can't C Me... again!</button>

    @less
    .john_cena {
      .hide-text();
    }

  @section utility
*/
/**
Clear fix hack:
`.clear-fix()` - Standard clear fix hack.

    @example
    <div class="example">
      <div style="float:left;">Floated element</div>
    </div>

    @less
    .example {
      .clear-fix();
    }

  @section utility
*/
/**
Tile:
`.tile()` - Standard tile.

    @description
    TODO: Default padding & param.

    @example
    <div class="example100" data-copy=".tile(100)">This is a <code>.tile(100)</code></div>
    <br>
    <div class="example200" data-copy=".tile(200)">This is a <code>.tile(200)</code></div>
    <br>
    <div class="example300" data-copy=".tile(300)">This is a <code>.tile(300)</code></div>
    <br>
    <div class="example400" data-copy=".tile(400)">This is a <code>.tile(400)</code></div>

    <div class="more">
      <p>Old busted usage:</p>
      <div class="example">This is a <code>.tile()</code></div>
    </div>

    @less
    .example {
      .tile();
    }

    .example100 {
      .tile(100);
    }

    .example200 {
      .tile(200);
    }

    .example300 {
      .tile(300);
    }

    .example400 {
      .tile(400);
    }

  @section ui.tiles
*/
/**
Hero Tile:
`.tileHero()` - Large tile

    @description
    To be used once a page for large tiles that would otherwise look strange with borders

    @example
    <div class="example"><br><br>This is a hero tile<br><br></div>

    @less
    .example {
      .tileHero();
    }

  @section ui.tiles
*/
/**
Tabs:
`.tabs()` - Horizontal nav tabs.

    @example
    <ul class="example">
      <li class="active"><a href="#">A link</a></li>
      <li><a href="#">Another link</a></li>
    </ul>

    @less
    .example {
      .tabs();
    }

  @section ui.navigation
*/
/**
Border Tabs:
`.border-tabs()` - Horizontal navs with border.

    @example
    <ul class="example">
      <li class="active"><a href="#">A link</a></li>
      <li><a href="#">Another link</a></li>
    </ul>

    @less
    .example {
      .border-tabs();
    }

  @section ui.navigation
*/
/* ==========================================================================
   Cards
========================================================================== */
/**
Card:
`.card()` - Main card style.

    @description
    TODO: Default padding & param.

    @example
    <div class="example">This is a card</div>

    @less
    .example {
      .card();
      padding: 20px;
    }

  @section ui.tiles
*/
/**
Card - Alternate:
`.cardAlt()` - Alternate card style.

    @description
    TODO: Default padding & param.

    @example
    <div class="example">This is an alternate card</div>

    @less
    .example {
      .cardAlt();
      padding: 20px;
    }

  @section ui.tiles
*/
/**
Card - Inverse:
`.cardInverse()` - Inverse card style.

    @description
    TODO: Default padding & param.

    @example
    <div class="example">This is an inverse card</div>

    @less
    .example {
      .cardInverse();
    }

  @section ui.tiles
*/
/**
Card - Article:
`.cardArticle()` - Panel with an image taking up the top half and text taking up the bottom. Example would be to use for displaying blog articles.

  @description
  Note: Adjust font styles on your own within .card_title_wrapper
  Note: Adjust card width accordingly

  @example
  <article class="example">
    <a href="" class="card_link">
      <img src="/img/seo-landing/blog_img_resume.jpg" alt="" class="card_img">
      <div class="card_title_wrapper">
        <h2>Headline</h2>
        <p class="sub_head">Sub Head</p>
      </div>
    </a>
  </article>

  @less

  .example {
    .cardArticle();
    max-width: 370px;
    margin: 10px auto;
  }

  @section ui.tiles
*/
/**
Panel Default:
`.panel-default()` - Default panel for bootstrap-like style panels. Used for documentation etc.

    @description
    TODO: Deprecate this naming convention, create our own version.

    @example
    <div class="example">
      <h3 class="panel-heading">A Heading</h3>
      <div class="panel-content">
        <p>Panel content.</p>
      </div>
    </div>

    @less
    .example {
      .panel-default();
      .panel-content {
        padding:20px;
      }
    }

  @section ui.tiles
*/
/**
Divider Text:
`.dividerText()` - Used for having a piece of text visually divide a section with "-------- text --------"

    @description
    Note: You will need to deal with color, font size and margins outside of the mixin.
    Note: For all lower-case text, use a @lineHeight of .5

    @example
    <p class="example">
      OR
    </p>

    @less
    .example {
      color: blue;
      font-size: 16px;
      margin: 10px 0 15px 0;
      .dividerText(@borderColor: red);
    }

  @section ui.other
*/
/* Base table styles, don't use directly */
/**
Tables:
`.table()` - Default table style.

    @description
    TODO: Fix up the classes to be consistent between .grayTable and .table.

    @example
    <p class="note">Default table:</p>
    <table class="example">
     <thead>
        <tr>
           <th>#</th>
           <th>First Name</th>
           <th>Last Name</th>
           <th>Title</th>
        </tr>
     </thead>
     <tbody>
        <tr>
           <th scope="row">1</th>
           <td>Ward</td>
           <td>Poulos</td>
           <td>Co-founder</td>
        </tr>
        <tr>
           <th scope="row">2</th>
           <td>Willis</td>
           <td>Redd</td>
           <td>Co-founder</td>
        </tr>
     </tbody>
  </table>

  <p class="note">Hoverable option (.hoverable):</p>
  <table class="example hoverable">
     <thead>
        <tr>
           <th>#</th>
           <th>First Name</th>
           <th>Last Name</th>
           <th>Title</th>
        </tr>
     </thead>
     <tbody>
        <tr>
           <th scope="row">1</th>
           <td>Ward</td>
           <td>Poulos</td>
           <td>Co-founder</td>
        </tr>
        <tr>
           <th scope="row">2</th>
           <td>Willis</td>
           <td>Redd</td>
           <td>Co-founder</td>
        </tr>
     </tbody>
  </table>

  <p class="note">Responsive option (.responsive-table):</p>
  <table class="example responsive-table">
     <thead>
        <tr>
           <th>#</th>
           <th>First Name</th>
           <th>Last Name</th>
           <th>Title</th>
           <th>Longer Header</th>
           <th>Longer Header</th>
           <th>Longer Header</th>
           <th>Longer Header</th>
        </tr>
     </thead>
     <tbody>
        <tr>
           <th scope="row">1</th>
           <td>Ward</td>
           <td>Poulos</td>
           <td>Co-founder</td>
           <td>Foo</td>
           <td>Bar</td>
           <td>Foo</td>
           <td>Bar</td>
        </tr>
        <tr>
           <th scope="row">2</th>
           <td>Willis</td>
           <td>Redd</td>
           <td>Co-founder</td>
           <td>Foo</td>
           <td>Bar</td>
           <td>Foo</td>
           <td>Bar</td>
        </tr>
     </tbody>
  </table>

    @less
    .example {
      .table();
      margin-bottom:20px;
    }

    .note {
      font-size: 13px;
      margin: 0 0 10px;
      font-weight: 700;
    }

  @section ui.tables
*/
/**
Tables 100:
`.table-100()` - Compressed table style.

    @example
    <table class="example">
     <thead>
        <tr>
           <th>#</th>
           <th>First Name</th>
           <th>Last Name</th>
           <th>Title</th>
        </tr>
     </thead>
     <tbody>
        <tr>
           <th scope="row">1</th>
           <td>Ward</td>
           <td>Poulos</td>
           <td>Co-founder</td>
        </tr>
        <tr>
           <th scope="row">2</th>
           <td>Willis</td>
           <td>Redd</td>
           <td>Co-founder</td>
        </tr>
     </tbody>
  </table>

    @less
    .example {
      .table-100();
    }

  @section ui.tables
*/
/**
Tables 700:
`.table-700()` - Expanded table style.

    @example
    <table class="example">
     <thead>
        <tr>
           <th>#</th>
           <th>First Name</th>
           <th>Last Name</th>
           <th>Title</th>
        </tr>
     </thead>
     <tbody>
        <tr>
           <th scope="row">1</th>
           <td>Ward</td>
           <td>Poulos</td>
           <td>Co-founder</td>
        </tr>
        <tr>
           <th scope="row">2</th>
           <td>Willis</td>
           <td>Redd</td>
           <td>Co-founder</td>
        </tr>
     </tbody>
  </table>

    @less
    .example {
      .table-700();
    }

  @section ui.tables
*/
/*
Base mixin for tooltips and callouts

TODO: arrow size, 7px(small) / 10px(normal)
*/
/*

A possibly temporary mixin used by zrCallout.less.
Needed for arrow-less tooltip (arrow added by plugin).

*/
/**
Tooltip Callout:
`.tipCallout()` - Used to bring attention to a specific element on page. Use @direction parameter for arrow location. Use .btnTipCallout(); if adding optional button.

    @example
    <div class="wrapper">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora, doloribus.

      <div class="example">
        <button type="button" class="tooltip_close" data-dismiss="callout">Close</button>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse molestiae eveniet suscipit illo placeat! Laudantium sapiente corrupti cumque cupiditate reprehenderit!</p>
        <button class="example_btn">Callout Button</button>
      </div>
    </div>

    @less
    .wrapper {
      min-height: 200px;
    }

    .example {
      .tipCallout();
    }

    .example .example_btn {
      .btnTipCallout(300);
    }

  @section ui.feedback

*/
/**
Shadows:
`.shadow()` - Shadows to provide elevation to elements.


    @example
    <ul>
      <li><b>100</b> - Lowest elevation: for top navbars, in-page panels</li>
      <li><b>400</b> - Medium elevation: for dropdown menus, callouts, page banners, typeaheads</li>
      <li><b>700</b> - Highest elevation: for modals, large hero panels </li>
    </ul>
    <div class="example_wrap">
      <div class="example example100">
      100
      </div>
      <div class="example example400">
      400
      </div>
      <div class="example example700">
      700
      </div>
    </div>

    @less
    b {
      font-weight: bold;
    }

    ul {
      list-style-type: disc;
      margin: 0 0 10px 20px;
    }
    li {
      margin-bottom: 4px;
    }

    .example_wrap {
      background-color: @gray03;
      padding: 20px;
      display: flex;
      align-items: center;
    }
    .example {
      padding: 70px 25px;
      margin: 20px;
      text-align: center;
      background-color: #fff;
      flex-grow: 1;
      align-items: center;
      display: flex;
      justify-content: center;
    }
    .example100 {
      .shadow(100);
    }
    .example400 {
      .shadow(400);
    }
    .example700 {
      .shadow(700);
    }

  @section ui.other
*/
/**
Float Labels:
To init JS see `Examples jquery-plugins-float-labels`

    @description
    Apply to input's container:
    `.floatLabelsInputs()` - Use with large font-size(16px) inputs
    `.floatLabelsSmallInputs()` - Use with normal font-size(16px) inputs



    @example
    <form class="example_form">
      <div class="large_text_wrapper filled">
        <label for="title">Title</label>
        <input type="text" name="title" id="title" value="Saint" />
      </div>
      <br />
      <div class="text_wrapper filled">
        <label for="first_name">First Name</label>
        <input type="text" name="first_name" id="first_name" value="John" />
      </div>
      <div class="select_wrapper filled">
        <label for="last_name">Last Name</label>
        <select name="first_name" id="first_name">
          <option>Smith</option>
          <option>Doe</option>
          <option>Wick</option>
          <option>del Toro Sanchez</option>
        </select>
      </div>
    </form>

    @less
    .example_form {
      .large_text_wrapper {
        .floatLabelsInputs();

        display: block;
        font-size: 16px;
      }

      .text_wrapper,
      .select_wrapper {
        .floatLabelsSmallInputs();

        display: inline-block;
      }
    }
  @section ui.other
*/
/*
  default styles to input to prevent flickering before DOM fully loaded
*/
/**
Border Highlight:
`.border-highlight()` - Vertical highlight for an element.

    @example
    <h1 class="headline">The Smartest Way to Hire</h1>

    @less
    .headline {
      .border-highlight();
    }

  @section ui.other
*/
/**
Border Highlight Top:
`.border-highlight-top()` - Top highlight for a container.

    @example
    <div class="container"></div>

    @less
    .container {
      .border-highlight-top();
    }

  @section ui.other
*/
.zr-icon-base,
header .content .mobile_menu .mobile_menu_show:after,
header .content .mobile_menu .mobile_menu_hide:after,
.not_found .header:before {
  transform: translate(0, 0);
  background-size: contain;
  background-position: center;
  content: " ";
  width: 1em;
  height: 1em;
  display: inline-block;
  vertical-align: text-bottom;
  background-repeat: no-repeat;
}
/*--------------------------------------------------------------
1.0 - Reset
--------------------------------------------------------------*/
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
font,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td {
  border: 0;
  font-size: 100%;
  font-style: inherit;
  font-weight: inherit;
  margin: 0;
  outline: 0;
  padding: 0;
  vertical-align: baseline;
}
html {
  overflow-y: scroll;
  /* Keeps page centered in all browsers regardless of content height */
  -webkit-text-size-adjust: 100%;
  /* Prevents iOS text size adjust after orientation change, without disabling user zoom */
  -ms-text-size-adjust: 100%;
  /* www.456bereastreet.com/archive/201012/controlling_text_size_in_safari_for_ios_without_disabling_user_zoom/ */
  -webkit-box-sizing: border-box;
  /* Not needed for modern webkit but still used by Blackberry Browser 7.0; see http://caniuse.com/#search=box-sizing */
  -moz-box-sizing: border-box;
  /* Still needed for Firefox 28; see http://caniuse.com/#search=box-sizing */
  box-sizing: border-box;
}
*,
*:before,
*:after {
  /* apply a natural box layout model to all elements; see http://www.paulirish.com/2012/box-sizing-border-box-ftw/ */
  -webkit-box-sizing: inherit;
  /* Not needed for modern webkit but still used by Blackberry Browser 7.0; see http://caniuse.com/#search=box-sizing */
  -moz-box-sizing: inherit;
  /* Still needed for Firefox 28; see http://caniuse.com/#search=box-sizing */
  box-sizing: inherit;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
nav,
section {
  display: block;
}
ol,
ul {
  list-style: none;
}
table {
  border-collapse: separate;
  border-spacing: 0;
}
caption,
th,
td {
  font-weight: normal;
  text-align: left;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
  content: "";
}
blockquote,
q {
  quotes: "" "";
}
a:focus {
  outline: thin dotted;
}
a:hover,
a:active {
  outline: 0;
}
a img {
  border: 0;
  display: block;
}
/*--------------------------------------------------------------
2.0 Typography
--------------------------------------------------------------*/
.entry-content button,
.entry-content input,
.entry-content select,
.entry-content textarea {
  color: #404040;
  font-size: 16px;
  line-height: 1.5;
}
.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6 {
  clear: both;
  font-weight: 400;
  margin-bottom: .75em;
  line-height: 1.5;
}
.entry-content h1,
.entry-content h2 {
  font-size: 1.5em;
}
.entry-content h3 {
  font-size: 1.2em;
}
.entry-content p {
  margin-bottom: 1.5em;
  line-height: 1.5;
}
.entry-content b,
.entry-content strong {
  font-weight: 700;
}
.entry-content dfn,
.entry-content cite,
.entry-content em,
.entry-content i {
  font-style: italic;
}
.entry-content blockquote {
  margin: 0 1.5em;
}
.entry-content address {
  margin: 0 0 1.5em;
}
.entry-content pre {
  background: #eee;
  font-family: "Courier 10 Pitch", Courier, monospace;
  font-size: 15px;
  font-size: 1.5rem;
  line-height: 1.6;
  margin-bottom: 1.6em;
  max-width: 100%;
  overflow: auto;
  padding: 1.6em;
}
.entry-content code,
.entry-content kbd,
.entry-content tt,
.entry-content var {
  font: 15px Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
}
.entry-content abbr,
.entry-content acronym {
  border-bottom: 1px dotted #666;
  cursor: help;
}
.entry-content mark,
.entry-content ins {
  background: #fff9c0;
  text-decoration: none;
}
.entry-content sup,
.entry-content sub {
  font-size: 75%;
  height: 0;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
.entry-content sup {
  bottom: 1ex;
}
.entry-content sub {
  top: .5ex;
}
.entry-content small {
  font-size: 75%;
}
.entry-content big {
  font-size: 125%;
}
/*--------------------------------------------------------------
3.0 Elements
--------------------------------------------------------------*/
.entry-content hr {
  background-color: #cbcfd0;
  border: 0;
  height: 1px;
  margin-bottom: 1.5em;
}
.entry-content ul,
.entry-content ol {
  margin: 0 0 1.5em 2.5em;
  line-height: 1.28em;
}
.entry-content ul {
  list-style: disc;
}
li {
  margin-bottom: .5em;
}
.entry-content ol {
  list-style: decimal;
}
.entry-content li > ul,
.entry-content li > ol {
  margin: .5em 0 0 1.5em;
}
.entry-content dt {
  font-weight: 700;
}
.entry-content dd {
  margin: 0 1.5em 1.5em;
}
.entry-content img {
  height: auto;
  /* Make sure images are scaled correctly. */
  max-width: 100%;
  /* Adhere to container width. */
}
.entry-content figure {
  margin: 0;
}
.entry-content table {
  margin: 0 0 1.5em;
  width: 100%;
}
.entry-content th {
  font-weight: 700;
}
/*--------------------------------------------------------------
6.0 Accessibility
--------------------------------------------------------------*/
/* Text meant only for screen readers */
.screen-reader-text {
  clip: rect(1px, 1px, 1px, 1px);
  position: absolute !important;
  height: 1px;
  width: 1px;
  overflow: hidden;
}
.screen-reader-text:hover,
.screen-reader-text:active,
.screen-reader-text:focus {
  background-color: #f1f1f1;
  border-radius: 3px;
  box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
  clip: auto !important;
  color: #21759b;
  display: block;
  font-size: 14px;
  font-weight: 700;
  height: auto;
  left: 5px;
  line-height: normal;
  padding: 15px 23px 14px;
  text-decoration: none;
  top: 5px;
  width: auto;
  z-index: 100000;
  /* Above WP toolbar */
}
/*--------------------------------------------------------------
7.0 Alignments
--------------------------------------------------------------*/
.alignleft {
  display: inline;
  float: left;
  margin-right: 1.5em;
}
.alignright {
  display: inline;
  float: right;
  margin-left: 1.5em;
}
.aligncenter {
  clear: both;
  display: block;
  margin: 0 auto;
}
/* //////////////////////////
 // Global
/////////////////////////// */
input {
  font-family: inherit;
}
a {
  text-decoration: none;
}
:link,
:visited {
  color: #067ac1;
}
a:hover,
a:focus {
  text-decoration: underline;
}
/* - Wordlets ---------------- */
.admin-bar .widget_wordlets_widget:hover {
  outline: 2px dashed rgba(0, 0, 255, 0.15);
}
.edit-link a,
.widget-wrapper a.wordlets-admin-link {
  position: absolute;
  background: #fff;
  display: block;
  padding: .1em .3em;
  font-size: 12px;
  opacity: .5;
  text-transform: none;
  color: #000;
  text-decoration: none;
  border: 1px solid #000;
  border-radius: 3px;
  z-index: 10000;
  margin-top: -1.5em;
  line-height: 1;
}
.widget-wrapper a.wordlets-admin-link:hover,
.widget-wrapper a.wordlets-admin-link:focus {
  opacity: 1;
}
/* - Content ---------------- */
/* - CTA's ---------------- */
.cta .content {
  max-width: 54.5em;
  padding-top: 3em;
  padding-bottom: 3em;
}
.cta-headline {
  font-size: 28px;
  margin-bottom: .5em;
}
.cta .cta-action {
  background: #83b10a;
  color: #fff;
  font-size: 18px;
  line-height: 2.5;
  display: inline-block;
  padding: 0 2em;
  border-radius: 1.5em;
  white-space: nowrap;
  border: none;
  cursor: pointer;
  transition: background .1s linear;
  -webkit-appearance: none;
  box-shadow: none;
}
.cta .cta-action:active {
  opacity: 0.7;
}
.cta .cta-action:hover,
.cta .cta-action:focus {
  color: #ffffff;
  background-color: #9acc18;
  border-color: #9acc18;
  text-decoration: none;
}
/* Mobile App */
.cta-mobile {
  text-align: center;
}
.cta-mobile .cta-headline {
  margin-bottom: 0;
}
.cta-mobile .cta-subheadline {
  margin-bottom: 20px;
}
.cta-mobile .cta-links {
  display: table;
  margin: auto;
  table-layout: fixed;
}
.cta-mobile .cta-link {
  display: table-cell;
  padding: 0 32px;
}
.cta-link-ios:before,
.cta-link-android:before {
  display: block;
  content: " ";
  background-size: 100%;
  width: 64px;
  height: 64px;
  margin: 10px auto;
}
.cta-link-ios:before {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%221792%22%20height%3D%221792%22%20viewBox%3D%220%200%201792%201792%22%3E%3Cpath%20fill%3D%22%23444444%22%20stroke%3D%22%23444444%22%20d%3D%22M1585%201215q-39%20125-123%20250-129%20196-257%20196-49%200-140-32-86-32-151-32-61%200-142%2033-81%2034-132%2034-152%200-301-259-147-261-147-503%200-228%20113-374%20112-144%20284-144%2072%200%20177%2030%20104%2030%20138%2030%2045%200%20143-34%20102-34%20173-34%20119%200%20213%2065%2052%2036%20104%20100-79%2067-114%20118-65%2094-65%20207%200%20124%2069%20223t158%20126zm-376-1173q0%2061-29%20136-30%2075-93%20138-54%2054-108%2072-37%2011-104%2017%203-149%2078-257%2074-107%20250-148%201%203%202.5%2011t2.5%2011q0%204%20.5%2010t.5%2010z%22/%3E%3C/svg%3E");
}
.cta-link-android:before {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%221792%22%20height%3D%221792%22%20viewBox%3D%220%200%201792%201792%22%3E%3Cpath%20fill%3D%22%23444444%22%20stroke%3D%22%23444444%22%20d%3D%22M685%20483q16%200%2027.5-11.5t11.5-27.5-11.5-27.5-27.5-11.5-27%2011.5-11%2027.5%2011%2027.5%2027%2011.5zm422%200q16%200%2027-11.5t11-27.5-11-27.5-27-11.5-27.5%2011.5-11.5%2027.5%2011.5%2027.5%2027.5%2011.5zm-812%20184q42%200%2072%2030t30%2072v430q0%2043-29.5%2073t-72.5%2030-73-30-30-73v-430q0-42%2030-72t73-30zm1060%2019v666q0%2046-32%2078t-77%2032h-75v227q0%2043-30%2073t-73%2030-73-30-30-73v-227h-138v227q0%2043-30%2073t-73%2030q-42%200-72-30t-30-73l-1-227h-74q-46%200-78-32t-32-78v-666h918zm-232-405q107%2055%20171%20153.5t64%20215.5h-925q0-117%2064-215.5t172-153.5l-71-131q-7-13%205-20%2013-6%2020%206l72%20132q95-42%20201-42t201%2042l72-132q7-12%2020-6%2012%207%205%2020zm477%20488v430q0%2043-30%2073t-73%2030q-42%200-72-30t-30-73v-430q0-43%2030-72.5t72-29.5q43%200%2073%2029.5t30%2072.5z%22/%3E%3C/svg%3E");
}
.cta-form {
  display: table;
  width: 100%;
}
.cta-form .input {
  display: table-cell;
  width: 35%;
  padding-right: 1em;
}
.cta-form .submit {
  width: 30%;
  padding-right: 0;
}
.cta-form .text input {
  width: 100%;
  font-size: 18px;
  padding: 10px;
}
.cta-form .submit input {
  width: 100%;
}
/* RDB */
/* With button */
.cta-with-button .cta-text-cta {
  display: table;
  width: 100%;
}
.cta-with-button .cta-text,
.cta-with-button .cta-cta {
  display: table-cell;
  vertical-align: bottom;
}
.cta-with-button .cta-cta {
  padding-left: 3em;
}
.cta-with-button .cta-description {
  font-size: 18px;
  line-height: 1.5;
  margin-bottom: 0;
}
/* - Header ---------------- */
.site_header_inner {
  position: relative;
}
.primary_headline_image {
  padding: 2em 0;
  background: #09b186;
  background: -moz-linear-gradient(-25deg, #0073ad 5%, #09b186 65%, #c2eb53 100%);
  background: -webkit-linear-gradient(-25deg, #0073ad 5%, #09b186 65%, #c2eb53 100%);
  background: linear-gradient(155deg, #0073ad 5%, #09b186 65%, #c2eb53 100%);
}
.home .primary_headline_image {
  margin-top: -1px;
}
.primary_headline_image h1 {
  color: #fff;
  text-align: center;
  margin-bottom: 15px;
  font-size: 38px;
}
.primary_headline_image p {
  width: auto;
  margin: 0 auto;
  max-width: 640px;
}
.site_header_inner a {
  color: #b2e522;
}
.header-image .image {
  height: 300px;
}
/* Primary Nav */
.primary_nav {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  font-size: .85em;
  z-index: 999;
  border-bottom: 1px solid #E4E5E7;
}
/* Primary Nav */
.primary_nav .content {
  width: 100%;
  max-width: 1200px;
}
.header-logo {
  float: left;
}
.header-logo img {
  vertical-align: top;
  max-height: 30px;
  max-width: 125px;
  width: auto;
}
.primary_nav_secondary {
  float: right;
}
.primary_nav_secondary .generic-link-list a {
  margin-left: 3em;
  padding: .2em .5em .4em .5em;
  display: block;
}
.header-site-nav .generic-link-item:first-child a {
  margin-left: 0;
}
.header-site-nav,
.header-login-nav,
.generic-link-list,
.generic-link-item {
  display: inline-block;
}
.header-login-nav a {
  display: inline-block;
  border: 1px solid #b2e522;
  padding: .3em .5em .5em .5em;
  border-radius: .25em;
}
/* Hero image */
.hero_image .background-image {
  position: absolute;
  background-size: cover;
  height: 100%;
  width: 100%;
}
/* Headline */
.primary_headline {
  width: 100%;
  color: #fff;
  text-align: center;
}
.primary_headline .header-headline {
  font-size: 48px;
}
/* Blog Nav */
.secondary_nav {
  background: #fff;
  position: relative;
}
.secondary_nav .content {
  padding-bottom: 0;
  padding-top: 0;
}
.secondary_nav a {
  display: block;
  padding: 1em 0 .9em;
  color: #969696;
}
.secondary_nav .generic-link-list,
.secondary_nav .category-links-list {
  display: table;
  width: 100%;
  border-bottom: 1px solid #e5e5e5;
}
.secondary_nav .generic-link-item,
.secondary_nav .category-links-item {
  display: table-cell;
  text-align: center;
}
/* Nav links */
.nav-links .nav-link {
  margin-bottom: 1em;
}
.nav-links .nav-link:last-child {
  margin-bottom: 0;
}
/* - Footer ---------------- */
.site-footer {
  text-align: center;
  background: #fff;
  padding: 20px 0;
  background: #f9f9f9;
}
.site-footer .generic-link-heading {
  color: #b0b0b0;
  margin-bottom: .5em;
}
.ssba-wrap,
.site-footer .generic-link-list {
  font-size: 32px;
}
.ssba-wrap.ssba a,
.footer-sidebar-links a {
  display: inline-block;
  height: 1em;
  width: 1em;
  overflow: hidden;
  white-space: nowrap;
  text-indent: 2em;
  background: #b0b0b0;
  border-radius: 50%;
  position: relative;
  margin: 0 .2em;
  transition: background .1s linear;
}
.ssba-wrap a:after,
.footer-sidebar-links .generic-link-item a:after {
  content: " ";
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  text-indent: 0;
  background-size: 60%;
  background-repeat: no-repeat;
  background-position: center center;
}
.footer-generic-links {
  margin-top: 1em;
}
.footer-generic-links .generic-link-item {
  float: left;
}
.footer-generic-links a {
  color: #b0b0b0;
  display: block;
  padding: 0 .4em;
  border-right: 2px solid #b0b0b0;
  font-size: 14px;
  line-height: 1.1em;
}
.footer-generic-links .generic-link-item:last-child a {
  border-right: none;
}
.site-footer .footer {
  color: #b0b0b0;
}
.site-footer .footer p {
  margin-bottom: .5em;
}
.ssba_facebook_share:after,
.facebook:after {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%221792%22%20height%3D%221792%22%20viewBox%3D%220%200%201792%201792%22%3E%3Cpath%20fill%3D%22%23ffffff%22%20stroke%3D%22%23ffffff%22%20d%3D%22M1343%2012v264h-157q-86%200-116%2036t-30%20108v189h293l-39%20296h-254v759h-306v-759h-255v-296h255v-218q0-186%20104-288.5t277-102.5q147%200%20228%2012z%22/%3E%3C/svg%3E");
}
a.ssba_facebook_share:hover,
a.facebook:hover,
a.ssba_facebook_share:focus,
a.facebook:focus {
  background: #3b5998;
}
.ssba_twitter_share:after,
.twitter:after {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%221792%22%20height%3D%221792%22%20viewBox%3D%220%200%201792%201792%22%3E%3Cpath%20fill%3D%22%23ffffff%22%20stroke%3D%22%23ffffff%22%20d%3D%22M1684%20408q-67%2098-162%20167%201%2014%201%2042%200%20130-38%20259.5t-115.5%20248.5-184.5%20210.5-258%20146-323%2054.5q-271%200-496-145%2035%204%2078%204%20225%200%20401-138-105-2-188-64.5t-114-159.5q33%205%2061%205%2043%200%2085-11-112-23-185.5-111.5t-73.5-205.5v-4q68%2038%20146%2041-66-44-105-115t-39-154q0-88%2044-163%20121%20149%20294.5%20238.5t371.5%2099.5q-8-38-8-74%200-134%2094.5-228.5t228.5-94.5q140%200%20236%20102%20109-21%20205-78-37%20115-142%20178%2093-10%20186-50z%22/%3E%3C/svg%3E");
}
a.ssba_twitter_share:hover,
a.twitter:hover,
a.ssba_twitter_share:focus,
a.twitter:focus {
  background: #4099FF;
}
.ssba_google_share:after,
.googleplus:after {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22420%22%20height%3D%22280%22%20viewBox%3D%220%200%20420%20280%22%20overflow%3D%22scroll%22%3E%3Cpath%20fill%3D%22%23FFFFFF%22%20d%3D%22M271.7%20113.8c1.8%209.4%202.7%2019.2%202.7%2029.4%200%2080-53.5%20137-134.4%20137C62.7%20280%200%20217%200%20140S62.7%200%20140%200c37.8%200%2069.4%2014%2093.6%2036.5L194.2%2076C179.5%2062%20161%2054.6%20140%2054.6c-46.2%200-83.7%2039-83.7%2085.2%200%2046%2037.5%2085.2%2083.7%2085.2%2042%200%2070.4-24%2076.3-57H140v-54.5h131.7zm104.6%208.7V78.8h-35v43.8h-43.8v35h43.8v43.8h35v-43.8H420v-35h-43.7z%22%2F%3E%3C%2Fsvg%3E");
}
a.ssba_google_share:hover,
a.googleplus:hover,
a.ssba_google_share:focus,
a.googleplus:focus {
  background: #d34836;
}
.ssba_linkedin_share:after,
.linkedin:after {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%221792%22%20height%3D%221792%22%20viewBox%3D%220%200%201792%201792%22%3E%3Cpath%20fill%3D%22%23ffffff%22%20stroke%3D%22%23ffffff%22%20d%3D%22M477%20625v991h-330v-991h330zm21-306q1%2073-50.5%20122t-135.5%2049h-2q-82%200-132-49t-50-122q0-74%2051.5-122.5t134.5-48.5%20133%2048.5%2051%20122.5zm1166%20729v568h-329v-530q0-105-40.5-164.5t-126.5-59.5q-63%200-105.5%2034.5t-63.5%2085.5q-11%2030-11%2081v553h-329q2-399%202-647t-1-296l-1-48h329v144h-2q20-32%2041-56t56.5-52%2087-43.5%20114.5-15.5q171%200%20275%20113.5t104%20332.5z%22/%3E%3C/svg%3E");
}
a.ssba_linkedin_share:hover,
a.linkedin:hover,
a.ssba_linkedin_share:focus,
a.linkedin:focus {
  background: #0077B5;
}
.rss:after {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%221792%22%20height%3D%221792%22%20viewBox%3D%220%200%201792%201792%22%3E%3Cpath%20fill%3D%22%23ffffff%22%20stroke%3D%22%23ffffff%22%20d%3D%22M576%201344q0%2080-56%20136t-136%2056-136-56-56-136%2056-136%20136-56%20136%2056%2056%20136zm512%20123q2%2028-17%2048-18%2021-47%2021h-135q-25%200-43-16.5t-20-41.5q-22-229-184.5-391.5t-391.5-184.5q-25-2-41.5-20t-16.5-43v-135q0-29%2021-47%2017-17%2043-17h5q160%2013%20306%2080.5t259%20181.5q114%20113%20181.5%20259t80.5%20306zm512%202q2%2027-18%2047-18%2020-46%2020h-143q-26%200-44.5-17.5t-19.5-42.5q-12-215-101-408.5t-231.5-336-336-231.5-408.5-102q-25-1-42.5-19.5t-17.5-43.5v-143q0-28%2020-46%2018-18%2044-18h3q262%2013%20501.5%20120t425.5%20294q187%20186%20294%20425.5t120%20501.5z%22/%3E%3C/svg%3E");
}
a.rss:hover,
a.rss:focus {
  background: #FF6600;
}
.ssba_email_share:after {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%221792%22%20height%3D%221792%22%3E%3Cpath%20fill%3D%22%23ffffff%22%20stroke%3D%22%23ffffff%22%20d%3D%22M1792%20710v794q0%2066-47%20113t-113%2047h-1472q-66%200-113-47t-47-113v-794q44%2049%20101%2087%20362%20246%20497%20345%2057%2042%2092.5%2065.5t94.5%2048%20110%2024.5h2q51%200%20110-24.5t94.5-48%2092.5-65.5q170-123%20498-345%2057-39%20100-87zm0-294q0%2079-49%20151t-122%20123q-376%20261-468%20325-10%207-42.5%2030.5t-54%2038-52%2032.5-57.5%2027-50%209h-2q-23%200-50-9t-57.5-27-52-32.5-54-38-42.5-30.5q-91-64-262-182.5t-205-142.5q-62-42-117-115.5t-55-136.5q0-78%2041.5-130t118.5-52h1472q65%200%20112.5%2047t47.5%20113z%22/%3E%3C/svg%3E");
}
a.ssba_email_share:hover,
a.ssba_email_share:focus {
  background: #000;
}
/* //////////////////////////
 // Home
/////////////////////////// */
.home .posts {
  padding-top: 48px;
}
/* //////////////////////////
 // Archives
/////////////////////////// */
/* Featured Post */
.featured {
  padding-bottom: 32px;
  background: #fff;
}
.featured .post {
  display: table;
  width: 100%;
}
.featured .post-text,
.featured .post-image {
  display: table-cell;
  vertical-align: top;
}
.featured .post-image {
  width: 41.75em;
  padding-right: 2.5em;
}
.featured .post-image img {
  display: block;
  height: auto;
  width: 100%;
}
.featured .entry-title a {
  font-size: 28px;
  margin-top: .5em;
  margin-bottom: .5em;
  color: #444444;
  line-height: 1.5;
  display: block;
}
.featured .entry-content {
  font-size: 18px;
  color: #7a7a7a;
  line-height: 2;
}
/* Top Posts */
/* Archive Posts */
/* Recent Posts */
.posts,
.top {
  display: table;
  width: 100%;
}
.posts.alternate {
  background: #f9f9f9;
}
.posts .section-title,
.top .section-title {
  font-size: 2em;
  margin-bottom: .5em;
}
.posts .post-recent,
.archive .posts .post,
.top .post-top {
  width: 31%;
  display: inline-block;
  vertical-align: top;
  padding-bottom: 1.5em;
  margin: 0 6px;
}
.posts .post-recent:nth-child(3n+5),
.archive .posts .post:nth-child(3n+5),
.top .post-top:nth-child(3n+5) {
  clear: left;
}
.posts .entry-title a,
.top .entry-title a {
  display: block;
  color: #444444;
  font-size: 18px;
  line-height: 1.5;
  margin-bottom: .5em;
}
.posts .entry-exerpt,
.top .entry-exerpt {
  color: #7a7a7a;
  font-size: 14px;
  line-height: 1.5;
}
/* Paging */
.paging-navigation {
  background: #fff;
  text-align: center;
  padding-bottom: 4em;
}
.paging-navigation a {
  background: #b0b0b0;
  color: #fff;
  font-size: 18px;
  line-height: 2.5;
  display: inline-block;
  padding: 0 2em;
  border-radius: 1.5em;
}
.paging-navigation a:active {
  opacity: 0.7;
}
.paging-navigation a:hover,
.paging-navigation a:focus {
  color: #ffffff;
  background-color: #9acc18;
  border-color: #9acc18;
  text-decoration: none;
}
/* //////////////////////////
 // Single Post
/////////////////////////// */
.single .secondary_nav .content {
  border-bottom: 1px solid #E4E5E7;
  max-width: 1200px;
}
.single .post .content {
  max-width: 632px;
  padding: 16px;
}
.single .entry-header {
  text-align: center;
}
.single .categories {
  font-size: 18px;
  margin-bottom: 1em;
  text-align: left;
}
.single .categories .category {
  display: inline-block;
}
.single .categories .category:after {
  content: " > ";
}
.single .categories .category:last-child:after {
  display: none;
}
.single .categories .category a {
  color: #444;
}
.single .entry-title {
  font-size: 36px;
  margin-bottom: .6em;
}
.single .entry-meta {
  margin-bottom: 2rem;
  font-size: 1.2em;
}
.single .entry-meta a {
  color: #444;
}
.single .post-image {
  margin-top: 2.5rem;
}
.entry-content p.post-image {
  text-align: center;
}
/* Related Posts */
.single .related_posts {
  background: #fff;
  padding-top: 2em;
  padding-bottom: 2em;
}
.single .wp_rp_wrap {
  text-align: center;
}
.single .wp_rp > * {
  float: left;
  width: 32%;
  margin-right: 2%;
}
.single .wp_rp > *:last-child {
  margin-right: 0;
}
.single .latest-posts-headline,
.single .related_post_title {
  font-size: 30px;
  text-align: center;
  margin-bottom: 1em;
}
.single .wp_rp_thumbnail {
  display: block;
  height: 200px;
  overflow: hidden;
  position: relative;
  margin-bottom: 1em;
  width: 100%;
}
.single .wp_rp_thumbnail img {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translateX(-50%) translateY(-50%);
  -ms-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
}
.single .wp_rp_title {
  color: #444;
  font-size: 18px;
}
.single .wp_rp_footer {
  clear: both;
}
.single .wp_rp_edit {
  position: absolute;
}
.single .latest-posts-wrapper {
  padding: 2em 0;
}
.single .latest-posts-list {
  display: table;
  table-layout: fixed;
  width: 100%;
}
.single .latest-posts-item {
  display: block;
  padding: 0 .5em;
  text-align: center;
}
.single .latest-posts-item:first-child {
  padding-left: 0;
}
.single .latest-posts-item:last-child {
  padding-right: 0;
}
.single .latest-posts-list a {
  color: #444;
}
.single .primary_headline_image {
  height: auto;
}
.single .primary_headline {
  display: none;
}
.single .post-navigation .nav-links {
  display: table;
  table-layout: fixed;
  width: 100%;
}
.single .post-navigation .nav-link {
  display: table-cell;
  text-align: center;
  vertical-align: top;
}
.single .post-navigation .nav-link a {
  color: #444;
}
.single .post-navigation .nav-previous {
  display: inline-block;
  width: 50%;
  text-align: left;
}
.single .post-navigation .nav-next {
  display: inline-block;
  width: 50%;
  text-align: right;
}
@media only screen and (max-width: 1039px) {
  .content {
    padding-left: 1em;
    padding-right: 1em;
  }
  .site_header_inner {
    height: auto;
  }
  .primary_nav {
    position: relative;
  }
  .primary_headline_image {
    position: relative;
  }
  .category-links-list,
  .category-links-item {
    display: block;
  }
  .secondary_nav .mobile_menu {
    text-align: center;
  }
  .featured {
    padding-bottom: 0;
  }
  /* - Mobile Show/Hide ---------------- */
  .mobile_menu {
    display: block;
  }
  .mobile_menu_hidden + * {
    display: none;
  }
  .mobile_menu_show,
  .mobile_menu_hidden .mobile_menu_hide {
    display: none;
  }
  .mobile_menu_hidden .mobile_menu_show {
    display: inline-block;
  }
  /* - Primary nav ---------------- */
  .primary_nav {
    z-index: 2;
  }
  .primary_nav .mobile_menu_show_hide {
    position: absolute;
    top: .5em;
    right: 0;
  }
  .primary_nav .mobile_menu_show_hide {
    -webkit-appearance: none;
    background: transparent;
    box-shadow: none;
    border: none;
    color: #b2e522;
    font-size: 16px;
    padding: 1em;
  }
  .primary_nav .mobile_menu_show:after {
    content: " ";
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%221792%22%20height%3D%221792%22%20viewBox%3D%220%200%201792%201792%22%3E%3Cpath%20fill%3D%22%23ffffff%22%20stroke%3D%22%23ffffff%22%20d%3D%22M1664%201344v128q0%2026-19%2045t-45%2019h-1408q-26%200-45-19t-19-45v-128q0-26%2019-45t45-19h1408q26%200%2045%2019t19%2045zm0-512v128q0%2026-19%2045t-45%2019h-1408q-26%200-45-19t-19-45v-128q0-26%2019-45t45-19h1408q26%200%2045%2019t19%2045zm0-512v128q0%2026-19%2045t-45%2019h-1408q-26%200-45-19t-19-45v-128q0-26%2019-45t45-19h1408q26%200%2045%2019t19%2045z%22/%3E%3C/svg%3E");
    display: inline-block;
    background-size: 100%;
    width: 1em;
    height: 1em;
    vertical-align: text-bottom;
    margin-left: .5em;
  }
  .primary_nav_secondary,
  .header-logo {
    float: none;
  }
  .header-site-nav,
  .header-login-nav,
  .primary_nav .generic-link-item,
  .primary_nav .generic-link-list {
    display: block;
  }
  .primary_nav .generic-link-item a {
    margin: 0;
  }
  /* - Secondary nav ---------------- */
  .secondary_nav {
    padding-bottom: 1em;
  }
  .secondary_nav .mobile_menu {
    margin-top: 1em;
  }
  .secondary_nav .mobile_menu_show_hide {
    font-size: 18px;
    background: #fff;
    color: #969696;
    font-size: 14px;
    line-height: 2.5;
    padding: 0 2em;
    border-radius: 1.5em;
    white-space: nowrap;
    border: 1px solid #969696;
    text-transform: uppercase;
  }
  .secondary_nav .mobile_menu_show_hide:active {
    opacity: 0.7;
  }
  /* - Home page ---------------- */
  .featured .post-text,
  .featured .post-image {
    display: block;
    width: auto;
    padding-right: 0;
  }
  /* - Wordlet CTA ---------------- */
  .cta-with-button .cta-text,
  .cta-with-button .cta-cta {
    display: block;
  }
  .cta-with-button .cta-cta {
    padding-left: 0;
    margin-top: 1em;
  }
  /* - More ---------------- */
  .posts .post-image,
  .top .post-image {
    height: auto;
  }
}
@media only screen and (max-width: 767px) {
  html #wpadminbar {
    min-width: 0;
    max-width: 100%;
  }
  .primary_nav .mobile_menu_show_hide {
    top: 0;
  }
  .content {
    max-width: 100% !important;
    display: inline-block !important;
    width: 100% !important;
    vertical-align: top;
    box-sizing: border-box;
  }
  /* - More ---------------- */
  .posts .post-recent,
  .archive .posts .post,
  .top .post-top {
    width: auto;
    float: none;
    margin-right: 0;
  }
  /* - Home ---------------- */
  .posts .entry-exerpt,
  .top .entry-exerpt {
    font-size: 18px;
  }
  .posts .entry-text,
  .posts .post-text,
  .top .entry-text {
    padding-left: 0;
    padding-right: 0;
  }
  /* - Single ---------------- */
  .single .categories .category a {
    font-size: 14px;
  }
  .single .entry-meta {
    font-size: 14px;
  }
  .single .latest-posts-list .latest-posts-item {
    display: block;
    padding: 0;
    margin: .5em 0;
  }
  .single .wp_rp > *,
  .single .wp_rp > *:last-child {
    float: none;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 1.5em;
    width: 300px;
  }
  /* CTA */
  .cta {
    text-align: center;
  }
  .cta-form {
    display: block;
  }
  .cta-form .input {
    display: block;
  }
  .cta-form .text {
    width: 50%;
    float: left;
    margin-bottom: 10px;
    text-align: right;
    padding: 0;
  }
  .cta-form .text:first-child {
    text-align: left;
  }
  .cta-form .text input {
    width: 97%;
  }
  .cta-form .submit {
    clear: both;
    text-align: center;
    width: auto;
  }
  .cta-form .submit input {
    width: auto;
  }
}
@media only screen and (max-width: 480px) {
  .primary_headline_image {
    height: auto;
  }
  .primary_headline {
    position: relative;
    width: 100%;
    -webkit-transform: none;
    -ms-transform: none;
    transform: none;
    text-align: center;
    margin: 0;
    z-index: 1;
    left: 0;
    top: 0;
  }
  /* CTA */
  .cta-form .text {
    width: auto;
    float: none;
  }
  .cta-form .text input {
    width: 100%;
  }
}
/* - Single WITH SIDEBAR---------------- */
.wordlet-cta-sidebar.cta-sidebar .cta-cta,
.wordlet-cta-sidebar.cta-sidebar .cta-description {
  display: none;
}
.wordlet-cta-sidebar.cta-sidebar h3 {
  font-size: 18px;
  font-weight: 400;
}
.single .category-job-description .entry-header {
  width: 100%;
  margin-left: 0;
  text-align: left;
}
.category-job-description .ssba,
.category-job-description .entry-meta {
  display: none;
}
.category-job-description .seeker_job_link a,
.category-job-description .cta-cta-mobile a {
  text-decoration: underline !important;
}
.wordlet-cta-sidebar.cta-sidebar {
  text-align: center;
  background: #F8F9FA;
  border: 1px solid #E0E2E3;
  border-radius: 3px;
}
.wordlet-cta-sidebar.cta-sidebar .cta-sidebar-content {
  width: auto;
  padding: 15px 15px 20px;
}
.single .category-job-description .content li {
  margin-bottom: 8px;
}
@media only screen and (min-width: 740px) {
  .wordlet-cta-sidebar.cta-sidebar .cta-cta,
  .wordlet-cta-sidebar.cta-sidebar .cta-description {
    display: block;
  }
  .wordlet-cta-sidebar.cta-sidebar .cta-cta {
    margin-bottom: 20px;
  }
  .cta-cta-mobile {
    display: none;
  }
  .single .category-job-description .entry-header {
    width: 70%;
  }
  .single .category-job-description .content {
    max-width: 880px;
  }
  .single .category-job-description .entry-content {
    width: 70%;
  }
  .single .category-job-description .post-image {
    margin-top: 0;
  }
  .wordlet-cta-sidebar.cta-sidebar {
    width: 28%;
    float: right;
    margin-left: 2%;
    text-align: center;
    background: #F8F9FA;
    border: 1px solid #E0E2E3;
    border-radius: 3px;
  }
  .wordlet-cta-sidebar.cta-sidebar p {
    font-size: 16px;
    line-height: 24px;
    margin-bottom: 20px;
  }
  .wordlet-cta-sidebar.cta-sidebar h3 {
    font-size: 38px;
    line-height: 48px;
    font-weight: 400;
    margin-bottom: 10px;
  }
  .wordlet-cta-sidebar .cta-sidebar-subheadline {
    margin-bottom: 18px;
    font-size: 24px !important;
    font-weight: 400;
  }
  .category-job-description .entry-footer {
    clear: both;
  }
}
/* in body job seeker search link */
.seeker_job_link {
  width: auto;
  padding: 15px;
  text-align: center;
  background: #F8F9FA;
  border: 1px solid #E0E2E3;
  border-radius: 3px;
  margin-bottom: 30px;
}
/* search */
#searchform {
  position: relative;
  border-radius: 20px;
  background-color: #fff;
  line-height: 20px;
  width: 190px;
  float: left;
  margin-left: 18px;
  transition: width 250ms ease-in-out;
  border: 1px solid #e0e2e3;
}
#searchform input {
  padding: 5px;
  line-height: 20px;
  font-size: 12px;
  margin: 0 0 0 10px;
  box-shadow: none !important;
  border: 0;
  width: 85%;
  border-radius: 20px;
  height: 30px;
  background-color: transparent;
}
#searchform button {
  position: absolute;
  top: 1px;
  right: 5px;
  background-color: transparent;
  border: 0;
  text-indent: -9999px;
  background-image: url(data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/20….5%20273.5q0%20220-124%20399l343%20343q37%2037%2037%2090z%22/%3E%3C/svg%3E);
}
#searchsubmit:after {
  background-image: url(data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/20….5%20273.5q0%20220-124%20399l343%20343q37%2037%2037%2090z%22/%3E%3C/svg%3E);
  font-size: 14px;
  z-index: 2;
}
input:focus {
  outline: none;
}
/* Section Text */
#category_text_container {
  background: #f9f9f9;
}
.category_text {
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  padding: 40px 0;
  line-height: 1.5em;
}
/* Related Tags */
#meta_text_categories {
  margin-top: 10px;
}
#related_topics {
  font-size: 24px;
}
/* Mobile Home */
@media screen and (max-width: 640px) {
  .container {
    display: block;
    margin: 2em;
  }
  #post_1,
  #post_2,
  #post_3 {
    display: block;
    padding: 1em;
  }
}
/* ----- revamp -------*/
.wordlet-text.header-logo .w-text a {
  font-size: 22px;
  color: #72AC21;
  letter-spacing: 0;
  text-transform: uppercase;
  font-weight: 300;
  vertical-align: middle;
  padding-left: 10px;
  display: inline-block;
  margin-top: 1px;
  text-decoration: none;
}
.header-logo img {
  display: inline-block;
  vertical-align: middle;
}
.wordlets-admin-link {
  /*display: none!important;*/
}
a.ziplink {
  color: #277f6a;
  background: #fff none;
  border: 1px solid #277f6a;
  border-radius: 2em;
  max-width: 100%;
  white-space: normal;
  line-height: 1.3;
  padding: .72em 2.75em .72em !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  font-weight: 700;
  letter-spacing: 0;
  display: inline-block;
  text-decoration: none;
  text-shadow: none;
  cursor: pointer;
  -webkit-appearance: none;
  transition: background-color 0.1s linear;
  vertical-align: middle;
  text-align: center;
  width: auto;
  padding: 8px 20px;
  margin-top: -2px;
}
/* Dropdown */
@media only screen and (max-width: 1039px) {
  .single .secondary_nav .content {
    border-bottom: none;
  }
  .menu-sections-container ul li {
    display: block;
    width: 100%;
  }
  .menu-sections-container ul li {
    width: 100%;
  }
  .menu-sections-container ul ul {
    display: block;
  }
  .menu-sections-container ul ul {
    display: block;
    position: relative;
  }
}
img {
  width: auto;
}
/*--------------------------------------------------------------
General
--------------------------------------------------------------*/
body {
  background: #f8f9fa;
  color: #494e51;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-weight: 400;
  font-size: 16px;
}
.content {
  max-width: 1210px;
  margin: auto;
  display: table;
  width: 100%;
  padding: 0 20px;
}
.cta {
  letter-spacing: 0;
  display: inline-block;
  text-decoration: none;
  text-shadow: none;
  -webkit-appearance: none;
  transition: background-color 0.1s linear, border-color 0.1s linear;
  vertical-align: middle;
  text-align: center;
  border-radius: 2em;
  outline: 0;
  font-family: Arial, sans-serif;
  color: #ffffff;
  background: #277f6a none;
  border: 1px solid #277f6a;
  max-width: 240px;
  font-weight: 700;
  padding: 7px 20px 7px 20px;
  line-height: 20px;
  white-space: normal;
  width: auto;
  font-size: 14px;
}
.cta:visited {
  color: #ffffff;
}
.cta:active,
.cta.active {
  opacity: 0.7;
}
.cta:focus,
.cta:hover {
  color: #ffffff;
  background-color: #005e4d;
  border-color: #005e4d;
  text-decoration: none;
}
.cta.disabled,
.cta[disabled],
.cta[disabled]:visited,
.cta[disabled]:hover,
.cta[disabled]:focus,
.cta[disabled]:active {
  opacity: .4;
  box-shadow: none;
  filter: none;
  pointer-events: none;
  cursor: default;
}
.cta.disabled:focus,
.cta[disabled]:focus {
  border-color: #bfc3c4;
}
/*--------------------------------------------------------------
Header Elements
--------------------------------------------------------------*/
header {
  width: 100%;
  background: white;
  margin-bottom: 15px;
}
header .content {
  /* Mobile Show/Hide */
}
header .content .logo {
  display: inline-block;
  padding: 22px 0;
  vertical-align: middle;
  width: 175px;
}
header .content .logo a {
  display: block;
}
header .content .logo img {
  display: block;
}
header .content nav {
  display: inline-block;
  vertical-align: middle;
  padding: 22px 0 22px 50px;
}
@media all and (max-width: 767px) {
  header .content nav {
    display: none;
    padding: 0;
  }
}
header .content nav .menu-zip_2018-container ul {
  list-style: none;
  position: relative;
  margin: 0;
  padding: 0;
  width: 100%;
}
@media all and (max-width: 767px) {
  header .content nav .menu-zip_2018-container ul {
    padding-bottom: 20px;
  }
}
header .content nav .menu-zip_2018-container ul li {
  padding-bottom: 10px;
  position: relative;
  display: inline-block;
  margin: 0;
  padding: 0;
}
@media all and (max-width: 767px) {
  header .content nav .menu-zip_2018-container ul li {
    display: block;
  }
}
header .content nav .menu-zip_2018-container ul li.mobile {
  display: none;
}
@media all and (max-width: 767px) {
  header .content nav .menu-zip_2018-container ul li.mobile {
    display: block;
  }
}
header .content nav .menu-zip_2018-container ul li.current-menu-item {
  font-weight: 700;
}
header .content nav .menu-zip_2018-container ul li a {
  display: block;
  text-decoration: none;
  color: #515659;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue", sans-serif;
  font-size: 13px;
  line-height: 15px;
  text-align: center;
  color: #494e51;
  text-transform: uppercase;
  margin: 0 20px;
}
header .content nav .menu-zip_2018-container ul li a:hover {
  color: #277f6a;
}
@media all and (max-width: 767px) {
  header .content nav .menu-zip_2018-container ul li a {
    text-align: left;
    display: block;
    width: auto;
    padding: 10px 0;
    font-size: 22px;
    text-transform: uppercase;
    margin: 0 10px;
    border-top: 1px solid #dee0e1;
  }
}
header .content .zip_button {
  float: right;
  margin-top: 22px;
}
header .content .zip_button .goto_zip {
  letter-spacing: 0;
  display: inline-block;
  text-decoration: none;
  text-shadow: none;
  -webkit-appearance: none;
  transition: background-color 0.1s linear, border-color 0.1s linear;
  vertical-align: middle;
  text-align: center;
  border-radius: 2em;
  outline: 0;
  font-family: Arial, sans-serif;
  color: #277f6a;
  background: #ffffff none;
  border: 1px solid #d8dbdc;
  max-width: 100%;
  font-weight: 700;
  font-weight: 400;
  padding: 5px 15px 5px 15px;
  line-height: 19px;
  white-space: normal;
  width: auto;
  font-size: 13px;
}
header .content .zip_button .goto_zip:visited {
  color: #277f6a;
}
header .content .zip_button .goto_zip:active,
header .content .zip_button .goto_zip.active {
  opacity: 0.7;
}
header .content .zip_button .goto_zip:focus,
header .content .zip_button .goto_zip:hover {
  color: #277f6a;
  background-color: #f5f6f7;
  border-color: #d8dbdc;
  text-decoration: none;
}
header .content .zip_button .goto_zip.disabled,
header .content .zip_button .goto_zip[disabled],
header .content .zip_button .goto_zip[disabled]:visited,
header .content .zip_button .goto_zip[disabled]:hover,
header .content .zip_button .goto_zip[disabled]:focus,
header .content .zip_button .goto_zip[disabled]:active {
  opacity: .4;
  box-shadow: none;
  filter: none;
  pointer-events: none;
  cursor: default;
}
header .content .zip_button .goto_zip.disabled:focus,
header .content .zip_button .goto_zip[disabled]:focus {
  border-color: #bfc3c4;
}
@media all and (max-width: 767px) {
  header .content .zip_button {
    display: none;
  }
}
header .content .mobile_menu {
  display: none;
  color: #494e51 !important;
  font-size: 15px;
}
header .content .mobile_menu button {
  -webkit-appearance: none;
  border-radius: 0;
  background-color: transparent;
  border: none;
  box-shadow: none;
  font: inherit;
  padding: 0;
}
header .content .mobile_menu button::-moz-focus-inner {
  border: 0;
  padding: 0;
  margin: 0;
}
header .content .mobile_menu .mobile_menu_show {
  color: #494e51;
  font-size: 15px;
}
header .content .mobile_menu .mobile_menu_show:after {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%221792%22%20height%3D%221792%22%20viewBox%3D%220%200%201792%201792%22%3E%3Cpath%20fill%3D%22%23515659%22%20stroke%3D%22%23515659%22%20d%3D%22M1664%201344v128q0%2026-19%2045t-45%2019h-1408q-26%200-45-19t-19-45v-128q0-26%2019-45t45-19h1408q26%200%2045%2019t19%2045zm0-512v128q0%2026-19%2045t-45%2019h-1408q-26%200-45-19t-19-45v-128q0-26%2019-45t45-19h1408q26%200%2045%2019t19%2045zm0-512v128q0%2026-19%2045t-45%2019h-1408q-26%200-45-19t-19-45v-128q0-26%2019-45t45-19h1408q26%200%2045%2019t19%2045z%22/%3E%3C/svg%3E");
  margin-left: 5px;
  margin-bottom: 1px;
}
header .content .mobile_menu .mobile_menu_hide {
  color: #494e51;
  font-size: 15px;
}
header .content .mobile_menu .mobile_menu_hide:after {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%221792%22%20height%3D%221792%22%20viewBox%3D%220%200%201792%201792%22%3E%3Cpath%20fill%3D%22%23515659%22%20stroke%3D%22%23515659%22%20d%3D%22M1490%201322q0%2040-28%2068l-136%20136q-28%2028-68%2028t-68-28l-294-294-294%20294q-28%2028-68%2028t-68-28l-136-136q-28-28-28-68t28-68l294-294-294-294q-28-28-28-68t28-68l136-136q28-28%2068-28t68%2028l294%20294%20294-294q28-28%2068-28t68%2028l136%20136q28%2028%2028%2068t-28%2068l-294%20294%20294%20294q28%2028%2028%2068z%22/%3E%3C/svg%3E");
  margin-left: 5px;
}
@media all and (max-width: 767px) {
  header .content .mobile_menu {
    display: inline-block;
    position: absolute;
    right: 15px;
    top: 27px;
  }
}
/*--------------------------------------------------------------
Pre-Footer Disclaimer
--------------------------------------------------------------*/
.legal_article_disclaimer {
  padding: 52px 0;
}
.legal_article_disclaimer p {
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 18px;
  text-align: center;
  color: #8c9194;
}
/*--------------------------------------------------------------
Footer Elements
--------------------------------------------------------------*/
footer {
  border-top: solid #dee0e1 1px;
  padding-top: 20px;
}
footer .content p {
  font-size: 14px;
  color: #72777c;
  letter-spacing: 0;
  text-align: center;
  line-height: 22px;
}
footer .content a {
  color: #72777c;
}
footer .content .footer-nav {
  border-top: solid #dee0e1 1px;
  padding: 20px 0 40px;
  margin-top: 20px;
}
footer .content .footer-nav .menu-footer-2018-container ul {
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
}
footer .content .footer-nav .menu-footer-2018-container ul li {
  flex-basis: 46%;
  font-size: 17px;
}
@media all and (max-width: 767px) {
  footer .content .footer-nav .menu-footer-2018-container ul li {
    flex-basis: 100%;
  }
}
footer .content .footer-nav .menu-footer-2018-container ul li a {
  color: #2f3639;
  display: block;
  padding-bottom: 1em;
}
footer .content .footer-nav .menu-footer-2018-container ul li ul li {
  flex-basis: 30%;
  text-align: left;
  font-size: 13px;
}
footer .content .footer-nav .menu-footer-2018-container ul li ul li ul li {
  flex-basis: 100%;
}
footer .content .footer-nav .menu-footer-2018-container ul li ul li ul li a {
  color: #72777c;
}
.legal_footer_nav {
  width: 100%;
  text-align: center;
  font-size: 12px;
  color: #72777c;
  margin-bottom: 40px;
}
.legal_footer_nav .legal {
  display: block;
  width: 100%;
  padding-bottom: 20px;
  margin-bottom: 20px;
  border-bottom: 1px solid #dee0e1;
}
.legal_footer_nav a,
.legal_footer_nav div {
  display: inline-block;
  line-height: 2;
  padding: 0 10px 0 6px;
  text-decoration: none;
  color: #72777c;
}
.legal_footer_nav a:hover {
  color: #2f3639;
  text-decoration: underline;
}
.legal_footer_nav .legal_nav {
  display: block;
  width: 100%;
}
.legal_footer_nav .legal_nav a {
  border-right: 1px solid #dee0e1;
}
.legal_footer_nav .legal_nav a:first-of-type {
  padding-left: 0;
}
.legal_footer_nav .legal_nav .legal {
  display: block;
  margin-top: 15px;
  font-size: .85em;
}
@media all and (max-width: 991px) {
  .legal_footer_nav .legal_nav .fullText {
    display: none;
  }
}
/*--------------------------------------------------------------
Sections and Posts
--------------------------------------------------------------*/
.section.with_sidebar {
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}
.section .title_bar {
  border-bottom: 2px solid #277f6a;
  padding: 15px 0;
  display: block;
}
.section .title_bar h2 {
  font-size: 25px;
  font-weight: 500;
  line-height: 30px;
}
.section .title_bar .viewall {
  float: right;
  color: #0e75e2;
  font-size: 15px;
  line-height: 10px;
  margin-top: -18px;
}
.section .article_content {
  flex-basis: 68%;
}
@media all and (max-width: 767px) {
  .section .article_content {
    flex-basis: 100%;
  }
}
.section .sidebar {
  flex-basis: 30.5%;
}
@media all and (max-width: 767px) {
  .section .sidebar {
    flex-basis: 100%;
  }
}
.section .posts {
  padding: 16px 0 0;
  margin: 0;
  position: relative;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}
.section .posts .post {
  background-color: #ffffff;
  border: 1px solid #f1f3f4;
  border-radius: 4px;
  flex-basis: 32%;
  padding: 0;
  margin: 0 0 2%;
  text-align: center;
  overflow: hidden;
}
@media all and (max-width: 767px) {
  .section .posts .post {
    flex-basis: 100%;
  }
}
.section .posts .post .post-image {
  padding-bottom: 56%;
  position: relative;
  overflow: hidden;
}
.section .posts .post .post-image a:focus {
  opacity: .75;
}
.section .posts .post .post-image img {
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: auto;
  display: block !important;
}
.section .posts .post .post-text {
  padding: 5%;
}
.section .posts .post .entry-title {
  font-size: 16px;
  font-size: 2vw;
  color: #494e51;
  text-align: center;
  line-height: 22px;
}
.section .posts .post p {
  font-size: 14px;
  color: #8c9194;
  letter-spacing: 0;
  line-height: 22px;
}
.section .posts.home_featured .post {
  display: flex;
  flex-basis: 100%;
  width: 100%;
}
@media all and (max-width: 767px) {
  .section .posts.home_featured .post {
    display: block;
    position: relative;
  }
}
.section .posts.home_featured .post .post-text {
  padding: 4%;
  width: 92%;
}
@media all and (max-width: 767px) {
  .section .posts.home_featured .post .post-text {
    display: block;
  }
}
.section .posts.home_featured .post .post-text h3 a {
  font-size: 27px;
  line-height: 30px;
  text-align: left;
}
.section .posts.home_featured .post .post-text p {
  text-align: left;
}
@media only screen and (min-width: 768px) and (max-width: 926px) {
  .section .posts.home_featured .post .post-text .exerpt {
    display: none;
  }
}
.section .posts.home_featured .post .post-text .more-link {
  display: block;
  color: #0e75e2;
  font-size: 15px;
  margin-top: 10px;
}
.section .posts.home_featured .post .post-image {
  padding-bottom: 30%;
  position: relative;
  overflow: hidden;
  width: 100%;
  height: auto;
}
@media only screen and (max-width: 1107px) {
  .section .posts.home_featured .post .post-image {
    padding-bottom: 0;
  }
}
.section .posts.home_featured .post .post-image img {
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: auto;
}
@media all and (max-width: 767px) {
  .section .posts.home_featured .post .post-image img {
    left: 0;
    position: relative;
    top: 0;
    transform: translate(0, 0);
    width: 100%;
    height: auto;
  }
}
/*--------------------------------------------------------------
Article Pages
--------------------------------------------------------------*/
.single .article_content article {
  background-color: #ffffff;
  border: 1px solid #f1f3f4;
  border-radius: 4px;
  padding: 0;
}
.single .article_content article .post-image {
  margin-top: 0;
}
.single .article_content article .post-image img {
  width: 100%;
  height: auto;
}
.single .article_content article .content {
  padding: 50px 60px;
}
@media all and (max-width: 767px) {
  .single .article_content article .content {
    padding: 10px 15px;
  }
}
.single .article_content article .content h1 {
  font-size: 35px;
  line-height: 41px;
  text-align: left;
  margin-bottom: 12px;
}
@media all and (max-width: 767px) {
  .single .article_content article .content h1 {
    font-size: 23px;
    line-height: 30px;
    margin-bottom: 4px;
  }
}
.single .article_content article .content .article_date {
  font-size: 12px;
  color: #8c9194;
  text-align: left;
  margin-bottom: 32px;
  font-style: italic;
}
.single .article_content article .content .entry-content p {
  font-size: 14px;
  line-height: 24px;
}
.single .article_content article .content .entry-content .wp-block-image figcaption {
  font-size: 12px;
  text-align: center;
}
.single .article_content .post-navigation .content {
  padding: 0;
}
.single .article_content .post-navigation .content .nav-link a {
  background: #ffffff;
  border: 1px solid #d8dbdc;
  text-decoration: none;
  border-radius: 1em;
  width: 135px;
  height: 35px;
  display: block;
  text-align: center;
  line-height: 2em;
}
.single .article_content .post-navigation .content .nav-link a:hover {
  background: #f1f3f4;
}
.single .article_content .post-navigation .content .nav-link.nav-next a {
  float: right;
}
/*--------------------------------------------------------------
6.0 - Author
--------------------------------------------------------------*/
.author .author_info {
  padding: 50px 60px;
}
@media all and (max-width: 767px) {
  .author .author_info {
    padding: 15px 0;
  }
}
.author .author_info .author_avatar {
  display: inline-block;
  width: 25%;
  vertical-align: top;
}
@media all and (max-width: 767px) {
  .author .author_info .author_avatar {
    width: 100%;
    text-align: center;
  }
}
.author .author_info .author_avatar img {
  border-radius: 50%;
  overflow: hidden;
}
.author .author_info .author_description {
  vertical-align: top;
  display: inline-block;
  width: 74%;
}
@media all and (max-width: 767px) {
  .author .author_info .author_description {
    width: 100%;
  }
}
.author .author_info .author_description h4 {
  color: #0e75e2;
  font-size: 20px;
  margin-bottom: 7px;
}
@media all and (max-width: 767px) {
  .author .author_info .author_description h4 {
    text-align: center;
  }
}
.author .author_info .author_description p {
  font-size: 14px;
  line-height: 24px;
}
/*--------------------------------------------------------------
Sidebar
--------------------------------------------------------------*/
.sidebar .widget-wrapper {
  width: auto;
  display: block;
  padding: 20px;
  margin: 0 0 20px 0;
  background: #ffffff;
  border: 1px solid #f1f3f4;
  border-radius: 4px;
}
.sidebar .widget-wrapper h3 {
  font-size: 18px;
  font-weight: bold;
  line-height: 33px;
  text-align: left;
  border-bottom: 2px solid #277f6a;
}
.sidebar .widget-wrapper h3.wp_rp_wrap .related_post_title {
  padding-bottom: 16px;
  padding: 0 0 16px;
  margin-bottom: 18px;
}
/*--------------------------------------------------------------
404
--------------------------------------------------------------*/
.not_found {
  width: 100%;
  text-align: center;
  margin: 5% 0;
}
.not_found .header {
  font-size: 40px;
  margin: 0 0 15px;
}
.not_found .header:before {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%221792%22%20height%3D%221792%22%20viewBox%3D%220%200%201792%201792%22%3E%3Cpath%20fill%3D%22%23dee0e1%22%20stroke%3D%22%23dee0e1%22%20d%3D%22M1024%201375v-190q0-14-9.5-23.5t-22.5-9.5h-192q-13%200-22.5%209.5t-9.5%2023.5v190q0%2014%209.5%2023.5t22.5%209.5h192q13%200%2022.5-9.5t9.5-23.5zm-2-374l18-459q0-12-10-19-13-11-24-11h-220q-11%200-24%2011-10%207-10%2021l17%20457q0%2010%2010%2016.5t24%206.5h185q14%200%2023.5-6.5t10.5-16.5zm-14-934l768%201408q35%2063-2%20126-17%2029-46.5%2046t-63.5%2017h-1536q-34%200-63.5-17t-46.5-46q-37-63-2-126l768-1408q17-31%2047-49t65-18%2065%2018%2047%2049z%22/%3E%3C/svg%3E");
  vertical-align: middle;
  font-size: 1em;
  margin: -3px 10px 0 0;
}
/*--------------------------------------------------------------
3rd Party Plugins Etc
--------------------------------------------------------------*/
/* Pagination */
.pagination {
  width: 100%;
  text-align: center;
  margin: 10px 0 30px;
}
.pagination a {
  color: #515659;
}
.pagination .page-numbers {
  display: inline-block;
  width: 48px;
  height: 48px;
  line-height: 48px;
  text-align: center;
  border-radius: 50%;
  border: 1px solid #d8dbdc;
  color: #515659;
  margin: 10px 5px 0;
  font-size: 17px;
}
.pagination .page-numbers.current {
  border: 1px solid #277f6a;
  color: #277f6a;
  background: none !important;
}
.pagination .page-numbers:hover {
  background: #ffffff;
  text-decoration: none;
}
/* YOAST */
#breadcrumbs {
  width: 100%;
  margin: 0 0 8px;
}
#breadcrumbs .content {
  max-width: 100%;
  margin: 0;
  width: 100%;
  padding: 0;
  font-size: 13px;
}
#breadcrumbs .content a {
  color: #80868a;
}
.single .breadcrumb_last {
  display: none;
}
/* Related Posts (in sidebar) */
.widget-wrapper.wp_related_posts_widget .wp_rp_thumbnail {
  display: none !important;
}
.widget-wrapper.wp_related_posts_widget ul.related_post li {
  width: 100% !important;
  text-align: left !important;
  padding: 15px 0 !important;
  border-bottom: 1px solid #dbddde;
  margin: 0 !important;
  font-size: 14px !important;
  line-height: 20px !important;
}
.widget-wrapper.wp_related_posts_widget ul.related_post li a {
  margin-bottom: 0 !important;
}
/* Simple Share */
.ssba {
  margin: 10px 0;
  display: inline-block;
}
.ssba img {
  margin: 0 5px;
  filter: grayscale(100%);
  opacity: .5;
  -webkit-filter: grayscale(100%);
}
.ssba a:hover img,
.ssba a:focus img {
  -webkit-filter: none;
  filter: none;
  opacity: 1;
}
.ssbp-text {
  display: none;
}
a.ssba_facebook_share:hover,
a.ssba_facebook_share:focus,
a.ssba_twitter_share:hover,
a.ssba_twitter_share:focus,
a.ssba_linkedin_share:hover,
a.ssba_linkedin_share:focus,
a.ssba_email_share:hover,
a.ssba_email_share:focus {
  background: none !important;
}