@charset "UTF-8";
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, img, ins, kbd, q, s, samp, small, strike, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  vertical-align: baseline;
  outline: 0 none; }

ol, ul {
  list-style: none; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

caption, th, td {
  text-align: left;
  font-weight: normal;
  vertical-align: middle; }

q, blockquote {
  quotes: none; }

q:before, q:after, blockquote:before, blockquote:after {
  content: "";
  content: none; }

a img {
  border: none; }

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, main {
  display: block; }

img {
  height: auto; }

img, object, embed, video, iframe {
  max-width: 100%; }

sub {
  vertical-align: sub;
  font-size: smaller; }

sup {
  vertical-align: super;
  font-size: smaller; }

small {
  font-size: smaller; }

q {
  quotes: "“" "”" "‘" "’"; }
  q:before {
    content: open-quote; }
  q:after {
    content: close-quote; }

html {
  box-sizing: border-box; }

*,
*:before,
*:after {
  box-sizing: inherit; }

html {
  font-style: normal;
  font-family: "Gotham A", "Gotham B", "M Hei PRC W45", "M Hei HK W42", "M Hei HK W40", "HelveticaNeue-Regular", "Helvetica Neue Regular", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 400;
  position: relative;
  line-height: 1.25;
  color: #fff;
  background-color: #fafafa;
  -webkit-font-smoothing: antialiased;
  font-smoothing: antialiased; }

main {
  font-style: normal;
  font-family: "HeiS ASC Simplified Chinese", "HeiS ASC Simplified Chinese_n5", "HeiT ASC Traditional Chinese", "HelveticaNeue-Regular", "Helvetica Neue Regular", "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #333; }
  main:before, main:after {
    content: "";
    display: table; }
  main:after {
    clear: both; }
  @media (min-width: 0) and (max-width: 640px) {
    main {
      background-color: #fff; } }

.content-constrain {
  max-width: 1440px;
  margin: auto;
  position: relative; }

/*doc

---
title: Typography
name: typography
category: Typography
---

*/
h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5,
h6, .h6 {
  color: #000;
  font-size: 24px;
  line-height: 24px;
  font-size: 1.5rem;
  line-height: 1.5rem;
  font-weight: 300; }

h1,
.h1,
.page-title,
.section-title,
.article-title {
  font-size: 24px;
  line-height: 29px;
  font-size: 1.5rem;
  line-height: 1.8125rem; }
  @media (min-width: 640px) {
    h1,
    .h1,
    .page-title,
    .section-title,
    .article-title {
      font-size: 30px;
      line-height: 36px;
      font-size: 1.875rem;
      line-height: 2.25rem; } }

h2,
.h2,
.sub-header {
  font-size: 22px;
  line-height: 24px;
  font-size: 1.375rem;
  line-height: 1.5rem; }

h3,
.h3,
.section-header {
  font-size: 18px;
  font-size: 1.125rem; }

h4,
.h4,
.section-sub-header {
  font-size: 15px;
  font-size: 0.9375rem;
  font-weight: 500; }
  h4 + p,
  .h4 + p,
  .section-sub-header + p {
    margin-top: 0; }

a {
  color: #c00;
  text-decoration: none; }
  .comments-tags a {
    color: inherit; }
  a:active, a:hover {
    color: #f00; }
    [id="system_messages"] a:active, [id="system_messages"] a:hover {
      color: #c00; }
  a:hover {
    text-decoration: none; }
    .comments-tags a:hover {
      color: #c00; }

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.page-title, .section-title, .article-title,
.sub-header, .section-header, .section-sub-header {
  font-style: normal;
  font-family: "Gotham A", "Gotham B", "M Hei PRC W45", "M Hei HK W42", "M Hei HK W40", "HelveticaNeue-Regular", "Helvetica Neue Regular", "Helvetica Neue", Helvetica, Arial, sans-serif; }

td, caption, p, ul, ol, li {
  font-style: normal;
  font-family: "HeiS ASC Simplified Chinese", "HeiS ASC Simplified Chinese_n5", "HeiT ASC Traditional Chinese", "HelveticaNeue-Regular", "Helvetica Neue Regular", "Helvetica Neue", Helvetica, Arial, sans-serif; }

p, table, thead, tbody, tfoot, tr, th, td, caption, li {
  color: #666; }

p {
  margin: 22px 0;
  margin: 1.375rem 0;
  font-size: 15px;
  line-height: 20px;
  font-size: 0.9375rem;
  line-height: 1.25rem; }
  .i18n-zh_HK p,
  .i18n-ja_JP p,
  .i18n-zh_CN p,
  .i18n-zh_MO p {
    text-align: left; }

table, thead, tbody, tfoot, tr, th, td, caption {
  font-size: 15px;
  line-height: 24px;
  font-size: 0.9375rem;
  line-height: 1.5rem; }

pre {
  font-style: normal;
  font-family: "Menlo", "Monaco", "Courier New", monospace;
  font-size: 12px;
  font-size: 0.75rem; }

main li {
  font-size: 15px;
  line-height: 20px;
  font-size: 0.9375rem;
  line-height: 1.25rem; }

.links li {
  margin-left: 0; }

.large-list li {
  line-height: 24px; }

.numbered-list li {
  list-style-type: decimal; }

.bulleted-list li {
  list-style-type: disc; }

.numbered-list li,
.bulleted-list li {
  margin-left: 20px;
  margin-left: 1.25rem;
  margin-bottom: 10px;
  margin-bottom: 0.625rem;
  padding-left: 0; }

.author,
.date {
  color: #999;
  font-size: 13px;
  line-height: 16px;
  font-size: 0.8125rem;
  line-height: 1rem; }

.continue-reading {
  font-weight: 500;
  font-size: 12px;
  font-size: 0.75rem;
  margin: 20px 0 20px;
  margin: 1.25rem 0 1.25rem;
  text-transform: uppercase;
  position: relative;
  z-index: 10; }

.basic-format-text, [id="article_content"] .pane-node-title,
[id="article_content"] .pane-node-content {
  font-size: 14px;
  font-size: 0.875rem; }
  .basic-format-text h2.page-title, [id="article_content"] .pane-node-title h2.page-title,
  [id="article_content"] .pane-node-content h2.page-title {
    font-size: 15px;
    line-height: 20px;
    font-size: 0.9375rem;
    line-height: 1.25rem;
    margin-bottom: 5px;
    font-weight: 500; }
    @media (min-width: 0) and (max-width: 640px) {
      .basic-format-text h2.page-title, [id="article_content"] .pane-node-title h2.page-title,
      [id="article_content"] .pane-node-content h2.page-title {
        font-size: 17px;
        line-height: 20px;
        font-size: 1.0625rem;
        line-height: 1.25rem; } }
  .basic-format-text .field-name-field-file-image-title-text, [id="article_content"] .pane-node-title .field-name-field-file-image-title-text,
  [id="article_content"] .pane-node-content .field-name-field-file-image-title-text {
    text-align: center; }
  .basic-format-text .field-type-text-with-summary, [id="article_content"] .pane-node-title .field-type-text-with-summary,
  [id="article_content"] .pane-node-content .field-type-text-with-summary {
    margin-bottom: 33px;
    margin-bottom: 2.0625rem; }
  .basic-format-text .media-article_display, [id="article_content"] .pane-node-title .media-article_display,
  [id="article_content"] .pane-node-content .media-article_display {
    width: 100%;
    display: inline-block;
    margin-bottom: 3px;
    margin-bottom: 0.1875rem; }
    .basic-format-text .media-article_display img, [id="article_content"] .pane-node-title .media-article_display img,
    [id="article_content"] .pane-node-content .media-article_display img {
      display: block; }
  .basic-format-text p, [id="article_content"] .pane-node-title p,
  [id="article_content"] .pane-node-content p {
    margin-top: 0;
    margin-bottom: 20px;
    margin-bottom: 1.25rem;
    font-size: 15px;
    line-height: 20px;
    font-size: 0.9375rem;
    line-height: 1.25rem;
    color: #666; }
    .basic-format-text p img, [id="article_content"] .pane-node-title p img,
    [id="article_content"] .pane-node-content p img {
      margin: 15px 0;
      margin: 0.9375rem 0; }
  .basic-format-text blockquote, [id="article_content"] .pane-node-title blockquote,
  [id="article_content"] .pane-node-content blockquote {
    text-align: center;
    quotes: "“" "”" "‘" "’";
    margin: 0 0 38px 0; }
    .basic-format-text blockquote:after, [id="article_content"] .pane-node-title blockquote:after,
    [id="article_content"] .pane-node-content blockquote:after, .basic-format-text blockquote:before, [id="article_content"] .pane-node-title blockquote:before,
    [id="article_content"] .pane-node-content blockquote:before {
      font-size: 26px;
      line-height: 36px;
      font-size: 1.625rem;
      line-height: 2.25rem;
      font-style: normal;
      font-family: "Gotham A", "Gotham B", "M Hei PRC W45", "M Hei HK W42", "M Hei HK W40", "HelveticaNeue-Regular", "Helvetica Neue Regular", "Helvetica Neue", Helvetica, Arial, sans-serif;
      font-weight: 400; }
    .basic-format-text blockquote:before, [id="article_content"] .pane-node-title blockquote:before,
    [id="article_content"] .pane-node-content blockquote:before {
      content: open-quote; }
    .basic-format-text blockquote:after, [id="article_content"] .pane-node-title blockquote:after,
    [id="article_content"] .pane-node-content blockquote:after {
      content: close-quote; }
    .basic-format-text blockquote p, [id="article_content"] .pane-node-title blockquote p,
    [id="article_content"] .pane-node-content blockquote p {
      font-size: 26px;
      line-height: 36px;
      font-size: 1.625rem;
      line-height: 2.25rem;
      font-style: normal;
      font-family: "Gotham A", "Gotham B", "M Hei PRC W45", "M Hei HK W42", "M Hei HK W40", "HelveticaNeue-Regular", "Helvetica Neue Regular", "Helvetica Neue", Helvetica, Arial, sans-serif;
      font-weight: 400;
      display: inline;
      margin: 0; }

.post-info, [id="article_content"] .submitted {
  font-size: 13px;
  line-height: 18px;
  font-size: 0.8125rem;
  line-height: 1.125rem;
  color: #666; }
  .post-info span, [id="article_content"] .submitted span {
    display: block; }
  .post-info.inline span, [id="article_content"] .inline.submitted span {
    display: inline-block; }
    .post-info.inline span:after, [id="article_content"] .inline.submitted span:after {
      content: '\e604';
      font-family: "tesla";
      font-weight: normal;
      font-style: normal;
      text-indent: 0;
      speak: none;
      line-height: 1;
      font-size: 9px;
      font-size: 0.5625rem;
      line-height: 1;
      position: relative;
      padding-right: 2px;
      padding-left: 9px;
      left: -2px; }
    .post-info.inline span:last-child:after, [id="article_content"] .inline.submitted span:last-child:after {
      display: none; }

@media (min-width: 0) and (max-width: 640px) {
  .basic-format-text h2.page-title, [id="article_content"] .pane-node-title h2.page-title,
  [id="article_content"] .pane-node-content h2.page-title {
    font-size: 17px;
    line-height: 20px;
    font-size: 1.0625rem;
    line-height: 1.25rem; } }

@media (min-width: 640px) {
  .basic-format-text h2.page-title, [id="article_content"] .pane-node-title h2.page-title,
  [id="article_content"] .pane-node-content h2.page-title {
    font-size: 31px;
    line-height: 36px;
    font-size: 1.9375rem;
    line-height: 2.25rem;
    margin-bottom: 21px;
    font-weight: 400; }
  .basic-format-text p, [id="article_content"] .pane-node-title p,
  [id="article_content"] .pane-node-content p {
    font-size: 15px;
    line-height: 24px;
    font-size: 0.9375rem;
    line-height: 1.5rem;
    margin: 0 0 25px 0; } }

/*doc

---
categories: Forms
title: Default Form Structure
name: 00_formsintro
---

Form elements should follow a consistent pattern. The basic structure is pretty straightforward. There are styles for all types of form elements. Below you will see all the examples.

```html_example
<div class="form-item">
    <label class="form-label">
        First Name
        <input type="text" class="form-text">
    </label>
</div>
```

*/
/*doc
---
categories: Forms
title: Default Input
name: 02_textinput
parent: 00_formsintro
---

```html_example
<div class="form-item">
    <label class="form-label">
        First Name
        <input type="text" class="form-text">
    </label>
</div>
```
*/
/*doc
---
categories: Forms
title: Search Input
name: 03_searchinput
parent: 00_formsintro
---

```html_example
<div class="form-item">
    <label class="form-label">
        Search
        <input type="search" class="form-text">
    </label>
</div>
```
*/
/*doc
---
categories: Forms
title: Email Input
name: 04_emailinput
parent: 00_formsintro
---

```html_example
<div class="form-item">
    <label class="form-label">
        Email Address
        <input type="email" class="form-text">
    </label>
</div>
```
*/
/*doc
---
categories: Forms
title: Phone Input
name: 05_phoneinput
parent: 00_formsintro
---

```html_example
<div class="form-item">
    <label class="form-label">
        Telephone Number
        <input type="tel" class="form-text">
    </label>
</div>
```
*/
/*doc
---
categories: Forms
title: Password Input
name: 06_passwordinput
parent: 00_formsintro
---

```html_example
<div class="form-item">
    <label class="form-label">
        Password
        <input type="password" class="form-text">
    </label>
</div>
```
*/
/*doc
---
categories: Forms
title: Number Input
name: 07_numberinput
parent: 00_formsintro
---

```html_example
<div class="form-item">
    <label class="form-label">
        Password
        <input type="number" class="form-text">
    </label>
</div>
```
*/
/*doc
---
categories: Forms
title: Checkbox Input
name: 08_checkboxinput
parent: 00_formsintro
---

```html_example
<div class="form-item">
    <label class="form-label label-checkbox">
        Checkbox
        <input type="checkbox" class="checkbox">
        <i class="icon-checkbox"></i>
    </label>
</div>
```
*/
/*doc
---
categories: Forms
title: Checkboxes on right
name: 08a_checkboxesonright
parent: 08_checkboxinput
---

Maybe you want to put a checkbox on the right side of the label instead of the left?

```html_example
<div class="form-item checkbox-right">
    <label class="form-label label-checkbox">
        Checkbox
        <input type="checkbox" class="checkbox">
        <i class="icon-checkbox"></i>
    </label>
</div>
```
*/
/*doc
---
categories: Forms
title: Compact Checkboxes
name: 08b_compactcheckboxes
parent: 08_checkboxinput
---

Sometimes you want a small, or compact checkbox. Here is how you do such things

```html_example
<div class="form-compact">
    <div class="form-item">
        <label class="form-label label-checkbox">
            Checkbox
            <input type="checkbox" class="checkbox">
            <i class="icon-checkbox"></i>
        </label>
    </div>
</div>
```
*/
/*doc
---
categories: Forms
title: Compact Checkboxes on right
name: 08c_compactcheckboxesonright
parent: 08_checkboxinput
---

You can even combine them for a compact checkbox on the right side of the label! o_0

```html_example
<div class="form-compact">
    <div class="form-item checkbox-right">
        <label class="form-label label-checkbox">
            Checkbox
            <input type="checkbox" class="checkbox">
            <i class="icon-checkbox"></i>
        </label>
    </div>
</div>
```
*/
/*doc
---
categories: Forms
title: Radio Input
name: 09_radioinput
parent: 00_formsintro
---

```html_example
<div class="form-item">
    <label class="form-label label-radio">
        Water
        <input type="radio" name="can-only-choose-one" class="radio">
        <i class="icon-radio"></i>
    </label>
</div>
<div class="form-item">
    <label class="form-label label-radio">
        Beer
        <input type="radio" name="can-only-choose-one" class="radio">
        <i class="icon-radio"></i>
    </label>
</div>
<div class="form-item">
    <label class="form-label label-radio">
        Wine
        <input type="radio" name="can-only-choose-one" class="radio">
        <i class="icon-radio"></i>
    </label>
</div>
```
*/
/*doc
---
categories: Forms
title: Text Area
name: 10_textareas
parent: 00_formsintro
---

```html_example
<div class="form-item">
    <label class="form-label">
        Comments:
        <textarea class="form-textarea"></textarea>
    </label>
</div>
```

*/
/*doc
---
categories: Forms
title: Select Box (Dropdown)
name: 11_selectbox
parent: 00_formsintro
---

```html_example
<div class="form-item form-type-select">
    <label for="..." class="form-label">
        Topic</label>
        <span class="form-select-overlay">
            <select id="..." name="..." class="form-select">
                <option value="" selected="selected">- Select -</option>
                <option value="...">Option 1</option>
                <option value="...">Option 2</option>
                <option value="...">Option 3</option>
                <option value="...">Option 4</option>
                <option value="...">Option 5</option>
                <option value="...">Option 6</option>
                <option value="...">Option 7</option>
                <option value="...">Option 8</option>
            </select>
        </span>
</div>
```

*/
/*doc
---
categories: Forms
title: Customization Options
name: formcustomization
---
There are several options available to you as the developer to customize your form elements.
*/
/*doc
---
categories: Forms
title: Rounded Input
name: 01_roundedinput
parent: formcustomization
---

This is usually combined with the `btn-navigate` class on a submit. You can find example of this button style on the [buttons](/buttons.html) page. See the [/supercharger](http://teslamotors.com/supercharger) page for an example.

```html_example
<div class="form-item">
    <label class="form-label">
        Search
        <input type="search" class="form-text input-rounded">
    </label>
</div>
```
*/
/*doc
---
categories: Forms
title: Large Input Fields
name: 02_largeinputs
parent: formcustomization
---

Sometimes the design calls for a large form input. Example of this woule be on [Tesla Energy's Powerpack Features](//www.teslaenergy.com/powerpack/features) page. Generally speaking, these types of inputs will be used in conjunction with the `.form-inline` helper class.

```html_example
<div class="form-item form-large">
    <label class="form-label">
        First Name
        <input type="text" class="form-text">
    </label>
</div>
```

```html_example
<div class="form-item form-type-select form-large">
    <label for="..." class="form-label">
        <span class="input-prepend">Hours</span>
    </label>
    <span class="form-select-overlay">
        <select id="..." name="..." class="form-select">
            <option value="" selected="selected">- Select -</option>
            <option value="...">Option 1</option>
            <option value="...">Option 2</option>
            <option value="...">Option 3</option>
            <option value="...">Option 4</option>
            <option value="...">Option 5</option>
            <option value="...">Option 6</option>
            <option value="...">Option 7</option>
            <option value="...">Option 8</option>
        </select>
    </span>
</div>
```
*/
.form-large .form-label {
  font-size: 24px;
  line-height: 30px;
  font-size: 1.5rem;
  line-height: 1.875rem; }

.form-large .form-text,
.form-large [type="text"],
.form-large [type="select"] {
  padding-left: 20px;
  padding-left: 1.25rem;
  padding-top: 20px;
  padding-top: 1.25rem;
  padding-bottom: 20px;
  padding-bottom: 1.25rem; }

.form-large.form-inline .input-prepend {
  padding: 14px;
  padding: 0.875rem; }

/*doc
---
categories: Forms
title: Inline Form Field Helpers
name: 03_inlineformhelpers
parent: formcustomization
---

Inline forms helpers would appear something like what you see below. Generally, they will be used in conjunction with the `.form-large` helper class as seen above.

```html_example
<div class="form-item form-large form-inline">
    <label class="form-label">
        <span class="input-prepend">Hours</span>
        <input type="text" class="form-text">
    </label>
</div>
```

```html_example
<div class="form-item form-type-select form-large form-inline">
    <label for="..." class="form-label">
        <span class="input-prepend">Hours</span>
    </label>
    <span class="form-select-overlay">
        <select id="..." name="..." class="form-select">
            <option value="" selected="selected">- Select -</option>
            <option value="...">Option 1</option>
            <option value="...">Option 2</option>
            <option value="...">Option 3</option>
            <option value="...">Option 4</option>
            <option value="...">Option 5</option>
            <option value="...">Option 6</option>
            <option value="...">Option 7</option>
            <option value="...">Option 8</option>
        </select>
    </span>
</div>
```
*/
.form-inline .form-label {
  padding-bottom: 0;
  text-transform: inherit; }

.form-inline .form-text,
.form-inline [type="text"],
.form-inline [type="select"] {
  background-color: #fff; }

.form-inline .input-prepend {
  font-weight: 300;
  padding: 5px 10px;
  padding: 0.3125rem 0.625rem;
  top: 0;
  right: 0;
  position: absolute;
  height: 100%;
  z-index: 1;
  color: #333; }
  .form-inline .input-prepend + .form-text {
    padding-right: 90px;
    padding-right: 5.625rem; }

/*doc
---
categories: Forms
title: Form Errors
name: 04_formerrors
parent: formcustomization
---

teslamotors.com is currently using [ParsleyJS](http://parsleyjs.org/) for error handling on forms. If you are able to use it, you'll get a bunch of added benefits. If not, you'll have to use your own error handling, but if you use these classes, you'll get the form styling you desire.

```html_example
<div class="form-item">
    <label class="form-label">
        First Name
        <input type="text" class="form-text form-error">
    </label>
    <ul class="errors-list">
      <li class="required">required</li>
    </ul>
</div>
```
*/
/*doc
---
categories: Forms
title: Customization Options
name: 05_alternateforms
parent: formcustomization
---

Sometimes you'll want a form that is on a background color. Simply add `form-alternate` to any wrapper element to your form (example the `form` tag if you have one).

```html_example
<div class="form-alternate">
    <div class="form-item">
        <label class="form-label">
            First Name
            <input type="text" class="form-text">
        </label>
    </div>
</div>
```

*/
.form-item {
  margin-bottom: 17px;
  margin-bottom: 1.0625rem;
  position: relative; }

[type="tel"],
[type="text"],
[type="search"],
[type="email"],
[type="password"],
[type="number"],
.form-textarea,
.form-select-overlay {
  font-style: normal;
  font-family: "HeiS ASC Simplified Chinese", "HeiS ASC Simplified Chinese_n5", "HeiT ASC Traditional Chinese", "HelveticaNeue-Regular", "Helvetica Neue Regular", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-size: 1rem;
  width: 100%;
  margin: 0;
  padding: 10px;
  background-color: #f7f7f7; }
  [type="tel"]:focus,
  [type="text"]:focus,
  [type="search"]:focus,
  [type="email"]:focus,
  [type="password"]:focus,
  [type="number"]:focus,
  .form-textarea:focus,
  .form-select-overlay:focus {
    outline: 0 none; }
  [type="tel"]::-webkit-input-placeholder,
  [type="text"]::-webkit-input-placeholder,
  [type="search"]::-webkit-input-placeholder,
  [type="email"]::-webkit-input-placeholder,
  [type="password"]::-webkit-input-placeholder,
  [type="number"]::-webkit-input-placeholder,
  .form-textarea::-webkit-input-placeholder,
  .form-select-overlay::-webkit-input-placeholder {
    color: #999; }
  [type="tel"]:-moz-placeholder,
  [type="text"]:-moz-placeholder,
  [type="search"]:-moz-placeholder,
  [type="email"]:-moz-placeholder,
  [type="password"]:-moz-placeholder,
  [type="number"]:-moz-placeholder,
  .form-textarea:-moz-placeholder,
  .form-select-overlay:-moz-placeholder {
    color: #999; }
  [type="tel"]::-moz-placeholder,
  [type="text"]::-moz-placeholder,
  [type="search"]::-moz-placeholder,
  [type="email"]::-moz-placeholder,
  [type="password"]::-moz-placeholder,
  [type="number"]::-moz-placeholder,
  .form-textarea::-moz-placeholder,
  .form-select-overlay::-moz-placeholder {
    color: #999; }
  [type="tel"]:-ms-input-placeholder,
  [type="text"]:-ms-input-placeholder,
  [type="search"]:-ms-input-placeholder,
  [type="email"]:-ms-input-placeholder,
  [type="password"]:-ms-input-placeholder,
  [type="number"]:-ms-input-placeholder,
  .form-textarea:-ms-input-placeholder,
  .form-select-overlay:-ms-input-placeholder {
    color: #999; }
  [type="tel"].placeholder,
  [type="text"].placeholder,
  [type="search"].placeholder,
  [type="email"].placeholder,
  [type="password"].placeholder,
  [type="number"].placeholder,
  .form-textarea.placeholder,
  .form-select-overlay.placeholder {
    color: #999; }

.form-alternate {
  padding: 10px;
  padding: 0.625rem;
  margin-bottom: 10px;
  margin-bottom: 0.625rem;
  background-color: #f2f2f2; }

[type="text"],
[type="password"],
[type="number"],
[type="email"],
[type="tel"],
[type="search"],
[type="checkbox"],
[type="radio"],
[type="tel"],
[type="email"],
.form-textarea,
.form-select,
.search-input {
  outline: 0;
  border: 1px solid #ccc;
  -webkit-transition: border-color 0.2s ease-in-out;
  -moz-transition: border-color 0.2s ease-in-out;
  -o-transition: border-color 0.2s ease-in-out;
  transition: border-color 0.2s ease-in-out; }
  [type="text"]:focus, [type="text"]:active,
  [type="password"]:focus,
  [type="password"]:active,
  [type="number"]:focus,
  [type="number"]:active,
  [type="email"]:focus,
  [type="email"]:active,
  [type="tel"]:focus,
  [type="tel"]:active,
  [type="search"]:focus,
  [type="search"]:active,
  [type="checkbox"]:focus,
  [type="checkbox"]:active,
  [type="radio"]:focus,
  [type="radio"]:active,
  [type="tel"]:focus,
  [type="tel"]:active,
  [type="email"]:focus,
  [type="email"]:active,
  .form-textarea:focus,
  .form-textarea:active,
  .form-select:focus,
  .form-select:active,
  .search-input:focus,
  .search-input:active {
    outline: 0;
    border-color: #666;
    -webkit-transition: border-color 0.2s ease-in-out;
    -moz-transition: border-color 0.2s ease-in-out;
    -o-transition: border-color 0.2s ease-in-out;
    transition: border-color 0.2s ease-in-out; }
  .form-alternate [type="text"], .form-alternate
  [type="password"], .form-alternate
  [type="number"], .form-alternate
  [type="email"], .form-alternate
  [type="tel"], .form-alternate
  [type="search"], .form-alternate
  [type="checkbox"], .form-alternate
  [type="radio"], .form-alternate
  [type="tel"], .form-alternate
  [type="email"], .form-alternate
  .form-textarea, .form-alternate
  .form-select, .form-alternate
  .search-input {
    border-color: #ccc; }
    .form-alternate [type="text"]:focus, .form-alternate [type="text"]:active, .form-alternate
    [type="password"]:focus, .form-alternate
    [type="password"]:active, .form-alternate
    [type="number"]:focus, .form-alternate
    [type="number"]:active, .form-alternate
    [type="email"]:focus, .form-alternate
    [type="email"]:active, .form-alternate
    [type="tel"]:focus, .form-alternate
    [type="tel"]:active, .form-alternate
    [type="search"]:focus, .form-alternate
    [type="search"]:active, .form-alternate
    [type="checkbox"]:focus, .form-alternate
    [type="checkbox"]:active, .form-alternate
    [type="radio"]:focus, .form-alternate
    [type="radio"]:active, .form-alternate
    [type="tel"]:focus, .form-alternate
    [type="tel"]:active, .form-alternate
    [type="email"]:focus, .form-alternate
    [type="email"]:active, .form-alternate
    .form-textarea:focus, .form-alternate
    .form-textarea:active, .form-alternate
    .form-select:focus, .form-alternate
    .form-select:active, .form-alternate
    .search-input:focus, .form-alternate
    .search-input:active {
      border-color: #666; }

.form-textarea {
  resize: vertical; }

.input-rounded {
  -webkit-border-radius: 100px;
  -moz-border-radius: 100px;
  border-radius: 100px;
  padding: 10px 24px;
  padding: 0.625rem 1.5rem; }

.form-alternate .form-textarea, .form-alternate
.form-text, .form-alternate
.form-select-overlay {
  background-color: #fff; }

.form-label {
  font-style: normal;
  font-family: "Gotham A", "Gotham B", "M Hei PRC W45", "M Hei HK W42", "M Hei HK W40", "HelveticaNeue-Regular", "Helvetica Neue Regular", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 500;
  font-size: 11px;
  line-height: 15px;
  font-size: 0.6875rem;
  line-height: 0.9375rem;
  padding-bottom: 5px;
  padding-bottom: 0.3125rem;
  display: block;
  text-transform: uppercase;
  position: relative;
  cursor: pointer;
  color: gray; }
  .form-type-item .form-label {
    cursor: default; }
  .form-type-date .form-label {
    margin-right: 5px; }
  .pane-apachesolr-form .form-label {
    display: none; }

.container-inline .form-type-select {
  margin-left: 20px;
  margin-left: 1.25rem; }
  .container-inline .form-type-select:first-child {
    margin-left: 0; }

.container-inline .form-label {
  position: relative;
  top: -13px;
  top: -0.8125rem; }

.label-checkbox,
.label-radio {
  padding-top: 11px;
  padding-top: 0.6875rem;
  padding-left: 40px;
  padding-left: 2.5rem;
  font-style: normal;
  font-family: "HeiS ASC Simplified Chinese", "HeiS ASC Simplified Chinese_n5", "HeiT ASC Traditional Chinese", "HelveticaNeue-Regular", "Helvetica Neue Regular", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 15px;
  line-height: 21px;
  font-size: 0.9375rem;
  line-height: 1.3125rem;
  text-transform: none;
  font-weight: normal;
  color: #999; }
  .label-checkbox.form-label,
  .label-radio.form-label {
    display: inline-block; }
  .checkbox-right .label-checkbox, .checkbox-right
  .label-radio {
    padding-left: 0;
    padding-right: 40px;
    padding-right: 2.5rem; }

.label-radio {
  padding-top: 6px;
  padding-top: 0.375rem;
  padding-left: 28px;
  padding-left: 1.75rem; }

.icon-checkbox,
.icon-radio {
  border: 1px solid #ccc;
  display: block;
  position: absolute;
  width: 25px;
  width: 1.5625rem;
  height: 25px;
  height: 1.5625rem;
  top: 9px;
  top: 0.5625rem;
  left: 0;
  background-color: #f7f7f7; }
  .radio:checked + .icon-checkbox, .radio:checked +
  .icon-radio {
    background-color: #fefefe; }
  .checkbox-right .icon-checkbox, .checkbox-right
  .icon-radio {
    left: auto;
    right: 0; }
  .form-alternate .icon-checkbox, .form-alternate
  .icon-radio {
    background-color: #fff; }
  .icon-checkbox:before,
  .icon-radio:before {
    -webkit-transition: opacity 0.09s ease-in-out;
    -moz-transition: opacity 0.09s ease-in-out;
    -o-transition: opacity 0.09s ease-in-out;
    transition: opacity 0.09s ease-in-out;
    opacity: 0;
    content: " ";
    position: absolute; }

.form-compact .icon-radio,
.form-compact .icon-checkbox {
  display: none; }

.form-compact .radio,
.form-compact .checkbox {
  display: inherit;
  position: absolute;
  left: 0;
  bottom: 6px; }

.form-compact .checkbox-right .radio,
.form-compact .checkbox-right .checkbox {
  left: auto;
  right: 0; }

.form-compact .checkbox-right .label-radio,
.form-compact .checkbox-right .label-checkbox {
  padding: 5px 20px 5px 0;
  padding: 0.3125rem 1.25rem 0.3125rem 0; }

.form-compact .label-radio,
.form-compact .label-checkbox {
  padding: 5px 0 5px 20px;
  padding: 0.3125rem 0 0.3125rem 1.25rem; }

.radio,
.checkbox {
  display: none; }
  .radio:checked + .icon-checkbox:before,
  .radio:checked + .icon-radio:before,
  .checkbox:checked + .icon-checkbox:before,
  .checkbox:checked + .icon-radio:before {
    -webkit-transition: opacity 0.09s ease-in-out;
    -moz-transition: opacity 0.09s ease-in-out;
    -o-transition: opacity 0.09s ease-in-out;
    transition: opacity 0.09s ease-in-out;
    opacity: 1; }
  .lt-ie9 .radio, .lt-ie9
  .checkbox {
    display: block; }

.icon-radio {
  width: 18px;
  height: 18px;
  -webkit-border-radius: 100%;
  -moz-border-radius: 100%;
  border-radius: 100%; }
  .lt-ie9 .icon-radio {
    display: none; }
  .icon-radio:before {
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    border-radius: 100%;
    height: 10px;
    width: 10px;
    top: 3px;
    left: 3px;
    background-color: #c00; }
    .lt-ie9 .icon-radio:before {
      display: none; }

.icon-checkbox:before {
  top: -1px;
  left: 3px;
  width: 27px;
  height: 18px;
  background: url("/tesla_theme/assets/img/icon-checkmark.svg") no-repeat 0 0; }
  .lt-ie9 .icon-checkbox:before {
    display: none; }
  .lt-ie9 .icon-checkbox:before,
  .no-svg .icon-checkbox:before {
    display: none; }

.lt-ie9 .icon-checkbox {
  display: none; }

.form-select-overlay {
  margin: 0;
  padding: 0;
  display: inline-block;
  overflow: hidden;
  position: relative;
  background-color: #f2f2f2;
  background-image: url("/tesla_theme/assets/img/icon-dropdown.svg");
  background-repeat: no-repeat;
  background-position: calc(100% - 17px) center;
  background-size: 10px 10px; }
  .form-inline .form-select-overlay {
    background-image: none;
    background-color: #fff; }
  .form-large .form-select-overlay .form-select {
    padding: 20px 40px 20px 20px;
    padding: 1.25rem 2.5rem 1.25rem 1.25rem; }
  .form-alternate .form-select-overlay {
    background-color: #fff; }
  .form-select-overlay .form-select {
    padding: 10px 40px 10px 10px;
    padding: 0.625rem 2.5rem 0.625rem 0.625rem;
    font-size: 16px;
    font-size: 1rem;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
    border: 1px solid #ccc;
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    background-color: transparent;
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    appearance: none; }
    .form-select-overlay .form-select:focus, .form-select-overlay .form-select:active {
      -webkit-box-shadow: inset 0 0 0 1px #666, inset 0 1px 1px rgba(187, 187, 187, 0.5);
      -moz-box-shadow: inset 0 0 0 1px #666, inset 0 1px 1px rgba(187, 187, 187, 0.5);
      box-shadow: inset 0 0 0 1px #666, inset 0 1px 1px rgba(187, 187, 187, 0.5);
      overflow: hidden;
      outline: 0; }
      .form-alternate .form-select-overlay .form-select:focus, .form-alternate .form-select-overlay .form-select:active {
        -webkit-box-shadow: 0 0 0 transparent;
        -moz-box-shadow: 0 0 0 transparent;
        box-shadow: 0 0 0 transparent; }
    .ie9 .form-select-overlay .form-select {
      padding: 10px 10px 10px 10px;
      padding: 0.625rem 0.625rem 0.625rem 0.625rem; }
    .form-select-overlay .form-select::-ms-expand {
      display: none; }
  .form-select-overlay:multiple {
    background-image: none; }
  .form-select-overlay.multi-select {
    background-image: none; }

.form-type-select {
  margin-bottom: 13px;
  margin-bottom: 0.8125rem; }

.form-item [class*="error"] {
  color: #c00;
  border-color: #c00; }
  .form-item [class*="error"]:active, .form-item [class*="error"]:focus {
    color: #000;
    border-color: #000; }
  .form-item [class*="error"] [class*="error"] {
    color: #c00;
    border-color: #c00; }

.form-item [class*="required"],
.form-item [class*="errors-list"] {
  font-size: 12px;
  font-size: 0.75rem; }

.form-item [class*="errors-list"] {
  bottom: -15px;
  bottom: -0.9375rem;
  right: 0;
  width: 100%;
  margin-top: 0;
  position: absolute;
  text-align: right; }
  .form-item [class*="errors-list"] [class*="required"] {
    color: #c00;
    border-color: #c00; }

/*doc
---
categories: Forms
title: Form error customization options
name: 04_customerror
parent: formcustomization
---

Sometimes there is a need for messages to be displayed to the right or left of other items, but hidden and shown only given certain conditions. You can achieve this by using the `flyout` tag-teamed with the `is-right` or `is-left` classes.

*NOTE:* You are responsible for hiding/showing the error messages.

```html_example
<div class="form-item form-type-password form-item-new-password">
  <label for="field1" class="form-label">Some Field </label>
  <input id="field1" type="password" name="field1" size="60" maxlength="128">
  <ul class="errors-list">
    <li class="required">
      <span class="flyout is-left">This message is on the left of the input element.</span>
    </li>
  </ul>
</div>
```

```html_example
<div class="form-item form-type-password form-item-new-password">
  <label for="field2" class="form-label">Some Field </label>
  <input id="field2" type="password" name="field2" size="60" maxlength="128">
  <ul class="errors-list">
    <li class="required">
      <span class="flyout is-right">This message is on the right of the input element. </span>
    </li>
  </ul>
</div>
```

*/
.flyout {
  top: -54px;
  top: -3.375rem;
  max-width: 200px;
  max-width: 12.5rem;
  padding: 5px 10px;
  padding: 0.3125rem 0.625rem;
  width: 100%;
  display: block;
  position: absolute;
  border: 1px solid #c00;
  background-color: #fff;
  text-align: left; }
  .flyout:before, .flyout:after {
    width: 0;
    height: 0;
    display: block;
    position: absolute;
    border-style: solid;
    content: "";
    -webkit-transform: rotate(360deg); }
  .flyout:before {
    z-index: 20; }
  .flyout:after {
    z-index: 10; }
  .flyout.is-left {
    right: -210px;
    right: -13.125rem; }
    .flyout.is-left:before {
      left: -7px;
      left: -0.4375rem;
      top: 10px;
      top: 0.625rem;
      border-width: 8px 7px 8px 0;
      border-color: transparent #fff transparent transparent; }
    .flyout.is-left:after {
      left: -8px;
      left: -0.5rem;
      top: 10px;
      top: 0.625rem;
      border-width: 8px 7px 8px 0;
      border-color: transparent #c00 transparent transparent; }
  .flyout.is-right {
    left: -210px;
    left: -13.125rem; }
    .flyout.is-right:before {
      right: -7px;
      right: -0.4375rem;
      top: 10px;
      top: 0.625rem;
      border-width: 8px 0 8px 7px;
      border-color: transparent transparent transparent #fff; }
    .flyout.is-right:after {
      right: -8px;
      right: -0.5rem;
      top: 10px;
      top: 0.625rem;
      border-width: 8px 0 8px 7px;
      border-color: transparent transparent transparent #c00; }

/*doc
---
categories: Forms
title: Number Input Spinner
name: 04_numberinputspinner
parent: formcustomization
---

**NOTE:** You will need to write some Javascript to add `is-focused` to the `form-item` when someone clicks into the input. This class will generate the borders around the element so it looks like a normal input.

TODO:

 * `is-centered` styling for input without a prepended helper
 * Disabling arrows when they have reached the `min` / `max` value.

#### Simple number input spinner

```html_example
<div class="form-item form-spinner">
  <label class="form-label form-spinner--data">
    Power
    <div class="form-spinner--container">
      <input type="number" class="form-text form-spinner--value">
    </div>
  </label>
</div>
```

#### Simple number input spinner with `is-focused`

```html_example
<div class="form-item form-spinner is-focused">
  <label class="form-label form-spinner--data">
    Power
    <div class="form-spinner--container">
      <input type="number" class="form-text form-spinner--value">
    </div>
  </label>
</div>
```

#### Number input spinner with helper prepend value
If you want to have a small little helper text, you just need to add a class to the wrapper, and a `span` next to the input. See the markup for an example.

```html_example
<div class="form-item form-spinner form-item--with-prepend">
  <label class="form-label form-spinner--data">
    Power
    <div class="form-spinner--container">
      <input type="number" value="1" class="form-text form-spinner--value">
      <span class="form-item--prepend">kWh</span>
    </div>
  </label>
</div>
```


#### Backup

If you are not comfortable using the number spinner given what you have to support from a browser capabilities standpoint, the same can be achieved with the following:

**NOTE:** if you are using this version, you will also need to wire up the clicks on the spinner arrows.

```html_example
<div class="form-item form-spinner form-spinner--standard form-item--with-prepend">
  <label class="form-label form-spinner--data">
    Power
    <div class="form-spinner--container">
      <input type="text" value="1" min="0" class="form-text form-spinner--value">
      <span class="form-item--prepend">kWh</span>
    </div>
    <div class="form-spinner--extras">
      <span class="form-spinner--increase">+</span>
      <span class="form-spinner--decrease">-</span>
    </div>
  </label>
</div>
```
*/
.form-spinner--container {
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  align-items: center;
  align-content: center;
  background-color: white;
  border: 1px solid #ccc;
  padding: 10px; }
  .is-focused .form-spinner--container {
    border-color: #333; }
  .form-spinner--container .form-spinner--value {
    text-align: center;
    height: 30px;
    position: relative;
    margin: 0 0 0 0;
    padding: 0;
    border: 0;
    text-align: right;
    background-color: transparent;
    overflow: visible; }
    .form-item--with-prepend .form-spinner--container .form-spinner--value {
      width: 50%; }
  .form-spinner--container ::-webkit-textfield-decoration-container {
    margin: 0;
    padding: 0;
    position: absolute;
    width: calc(100% - 30px); }
    .form-item--with-prepend .form-spinner--container ::-webkit-textfield-decoration-container {
      right: -30px;
      height: 100%; }
  .form-spinner--container ::-webkit-inner-spin-button {
    -webkit-appearance: none;
    cursor: pointer;
    margin: 0;
    padding: 0;
    opacity: 1;
    position: relative;
    height: 100%;
    width: 30px;
    top: -1px;
    right: -30px; }
    .form-item--with-prepend .form-spinner--container ::-webkit-inner-spin-button {
      right: -100%; }
    .form-spinner--container ::-webkit-inner-spin-button:before, .form-spinner--container ::-webkit-inner-spin-button:after {
      margin: 0;
      padding: 0;
      content: " ";
      display: block;
      width: 26px;
      height: 16px;
      background-size: 81%;
      background-color: transparent;
      background-repeat: no-repeat;
      background-position: bottom center;
      background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE4LjEuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCA2MCAzMiIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgNjAgMzIiIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8Zz4KCTxwb2x5Z29uIGZpbGw9IiMxODkzRkMiIHBvaW50cz0iNjAsMi43IDMwLDMyIDAsMi43IDIuOCwwIDMwLDI2LjYgNTcuMiwwIAkiLz4KPC9nPgo8L3N2Zz4="); }
    .form-spinner--container ::-webkit-inner-spin-button:before {
      border-top: 1px solid #ccc;
      -webkit-transform: rotate(180deg);
      -moz-transform: rotate(180deg);
      transform: rotate(180deg); }

.form-item--prepend {
  padding: 5px;
  width: 50%;
  text-align: left;
  text-transform: initial; }

.form-spinner--extras {
  position: absolute;
  right: 15px;
  bottom: 6px; }
  .form-spinner--extras .form-spinner--increase,
  .form-spinner--extras .form-spinner--decrease {
    margin: 0;
    padding: 0;
    content: " ";
    display: block;
    width: 26px;
    height: 25px;
    overflow: hidden;
    text-indent: -999px;
    background-size: 80%;
    background-color: transparent;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE4LjEuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCA2MCAzMiIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgNjAgMzIiIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8Zz4KCTxwb2x5Z29uIGZpbGw9IiMxODkzRkMiIHBvaW50cz0iNjAsMi43IDMwLDMyIDAsMi43IDIuOCwwIDMwLDI2LjYgNTcuMiwwIAkiLz4KPC9nPgo8L3N2Zz4="); }
  .form-spinner--extras .form-spinner--increase {
    border-top: 1px solid #ccc;
    transform: rotate(180deg); }

/*doc
---
title: Tables
name: Tables
category: Tables
---

Tables are integral. Tables are good. Tables need love too.

## Rules for Tables

1. *Never* use tables for anything other than tabular data. If you need something to look like a table, use `display: table;` (and it's related display attributes).
2. To get default styling, all classes should get `class="table"`. We style the class and not the DOM attribute to keep the specificity low.
3. While it is true that `<thead>`, `<tbody>`, and `<tfoot>` are optional, they give you an extra set of hooks to get at your content for styling purposes. As such, Particles assumes you will be entering a `<thead>` and `<tbody>`.
4. `<table>`s default to 100% the width of their containing element. This provides sanity.

## Types of Tables
The sample markup listed above is a representation of how each of the following tables should be structured.

## Examples
### Default Table:
An example of this style can be found above:

```html_example
<table class="table">
    <thead class="table-head">
        <tr class="table-row">
            <th>Awards</th>
            <th>Date</th>
        </tr>
    </thead>
    <tbody class="table-body">
        <tr class="table-row">
            <td><a href="#">Publication 1</a></td>
            <td>January 1, 2013</td>
        </tr>
        <tr class="table-row">
            <td><a href="#">Publication 2</a></td>
            <td>February 30, 2010</td>
        </tr>
    </tbody>
</table>
```

### Data-based Table:
An example of this style can be found in the [Admin Section](http://admin.teslamotors.com):

```html_example
<table class="table table-data">
    <thead class="table-head">
        <tr class="table-row">
            <th>RN</th>
            <th>Pricebook</th>
            <th>Model</th>
            <th>Series</th>
            <th>Language</th>
        </tr>
    </thead>
    <tbody class="table-body">
        <tr class="table-row">
            <td>
                <a href="#">RN123456</a>
            </td>
            <td>US 2015 JUNE</td>
            <td>mx</td>
            <td>gp</td>
            <td>en</td>
        </tr>
    </tbody>
</table>
```
### Forum-based Table
An example of this style can be found on the [Support Page](http://teslamotors.com/support):

```html_example
<table class="table table-forum">
    <thead class="table-head">
        <tr class="table-row">
            <th class="forum-topic">Topic</th>
            <th class="forum-post">Latest Updates</th>
            <th class="forum-threads">Threads</th>
            <th class="forum-posts">Posts</th>
        </tr>
    </thead>
    <tbody class="table-body">
        <tr class="table-row odd">
            <th class="forum-topic"><a href="http://new-my.teslamotors.com/forums/discussions/general">General</a></th>
            <td class="forum-post">
                <p class="forum-topic-title"><a href="http://new-my.teslamotors.com/forum/forums/test-topic">Test topic</a></p>
                <p class="forum-post-meta">Last reply: <span class="forum-post-date">June 23, 2015</span> by tmdcqa2jeff@gmail.com</p>
            </td>
            <td class="forum-threads">4,156</td>
            <td class="forum-posts">56,512</td>
        </tr>
    </tbody>
</table>
```

## TODO list

* `.table-striped` -- zebras! This will use the `:nth-child()` selector as well as `.odd`/`.even` classes (for those projects that still need to support IE8). New projects are encouraged to use the `:nth-child()` approach.
* `.table-compact` -- a more compact version of the table. this is largely comeplete in `table-data`, but it should/could be extracted to be more generic so it can be used without the style overhead of `data-table`.
*/
.table {
  width: 100%; }

.table-head th {
  font-style: normal;
  font-family: "Gotham A", "Gotham B", "M Hei PRC W45", "M Hei HK W42", "M Hei HK W40", "HelveticaNeue-Regular", "Helvetica Neue Regular", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 500;
  font-size: 12px;
  font-size: 0.75rem;
  text-transform: uppercase;
  color: #333; }

.table-row td,
.table-row th {
  vertical-align: top;
  padding: 15px 0;
  padding: 0.9375rem 0;
  border-top: 1px solid #ccc; }
  .table-head .table-row td, .table-head
  .table-row th {
    border-top: 0; }

.table-row p {
  margin: 0; }

.table-compact .table-row td,
.table-compact .table-row th {
  padding-top: 0;
  padding-bottom: 0; }

.table-forum .table-head th {
  padding: 3px 0;
  padding: 0.1875rem 0; }
  .table-forum .table-head th:first-child {
    width: 200px;
    width: 12.5rem; }

.table-forum .forum-threads,
.table-forum .forum-posts,
.table-forum .forum-post-meta {
  color: #666; }

.table-forum .forum-threads,
.table-forum .forum-posts {
  width: 170px; }

.table-forum .forum-title a:hover,
.table-forum .forum-topic a:hover {
  color: #c00; }

.table-forum .forum-title {
  font-size: 15px;
  line-height: 18px;
  font-size: 0.9375rem;
  line-height: 1.125rem;
  margin: 0 0 5px;
  margin: 0 0 0.3125rem;
  color: #000; }
  .table-forum .forum-title a {
    color: #000; }

.table-forum .forum-post-meta {
  font-size: 12px;
  line-height: 15px;
  font-size: 0.75rem;
  line-height: 0.9375rem; }

.table-forum .forum-topic a {
  color: #333; }

.table-data {
  border: 1px solid #ddd; }
  .table-data .table-row th,
  .table-data .table-row td {
    padding: 5px 10px;
    padding: 0.3125rem 0.625rem;
    border: 1px solid #ddd; }
    .table-data .table-row th:first-child,
    .table-data .table-row td:first-child {
      border-right: 0; }
    .table-data .table-row th:last-child,
    .table-data .table-row td:last-child {
      border-left: 0; }
  .table-data .table-row th {
    border: 1px solid #ddd; }
    .table-data .table-row th:first-child {
      border-right: 0; }
    .table-data .table-row th:last-child {
      border-left: 0; }
  .table-data .table-head th {
    background-color: #eee; }

.table-accounting {
  font-style: normal;
  font-family: "Menlo", "Monaco", "Courier New", monospace;
  margin-bottom: 20px;
  margin-bottom: 1.25rem;
  border: 0;
  width: auto; }
  .table-accounting .table-row td, .table-accounting .table-row th {
    border: 0; }
  .table-accounting .cell-currency {
    text-align: right; }
  .table-accounting th, .table-accounting td {
    font-size: 10px;
    line-height: 12px;
    font-size: 0.625rem;
    line-height: 0.75rem; }

/*doc

---
title: Buttons
name: Buttons
category: Buttons
---

There are several ways and colors to our button styling. There are many reasons you may want to add a button, and although the button classes can be added to any element, they're usually added to either `<a>` or `<button>`.

## Default Button
The default button for Particles is created using `.btn-primary`. The default button is used pretty exclusively across [teslamotors.com](teslamotors.com). There are several characteristics to the default ```button```:

 1. Has a `min-width`, but not a `max-width`,
 2. defaults to large, and
 3. uses the primary color

```html_example
<button class="btn-primary">Button</button>
<a href="http://www.teslamotors.com" target="_blank" class="btn-primary">This is a button with really long text</a>
```

```sass_example
@extend .btn;
@extend .btn-large;

background: $tesla-primary;
&:hover { background: darken($tesla-primary, 2.5%); }
```

## Button Colors

There are a few different colors of buttons available on our site. The default button will be `.btn-primary`. This button is both red and large in size.

```html_example
<button class="btn-primary">Primary</button>
<button class="btn-secondary">Secondary</button>
<button class="btn-tertiary">Tertiary</button>
<button class="btn-transactional">Transactional</button>
```

## Full-width Buttons
Each of the buttons is also available as a full-width button.

**NOTE:** All buttons when on mobile become full-width buttons.

```html_example
<button class="btn-primary btn-full">Full</button>
<button class="btn-secondary btn-full">Full</button>
<button class="btn-tertiary btn-full">Full</button>
<button class="btn-transactional btn-full">Full</button>
```

## Button Sizes

Not only can you create different color buttons, but you can also create different sizes of buttons. The default button size is `.btn-large`

```html_example
<button class="btn-primary btn-large">Large button</button>
<button class="btn-primary btn-medium">Medium button</button>
<button class="btn-primary btn-small">Small button</button>
<button class="btn-primary btn-tiny">Tiny button</button>
```

## Other Miscellaneous Variations

There are various other types of buttons we have and can use also.

```html_example
<button class="btn-primary btn-order">Order</button>
<button class="btn-primary btn-outline outline-black">Outline Alternate 1</button>
<button class="btn-primary btn-outline outline-alternate">Outline Alternate 2</button>
<span style="position: relative; clear: both; display: block; min-height: 30px;"><button class="btn-navigate"></button></span>
<span style="position: relative; clear: both; display: block; min-height: 30px;"><button class="btn-close modal-close"><span class="sr-only">Close</span></button></span>
<span style="position: relative; clear: both; display: block; min-height: 30px;"><span class="modal-alternate"><button class="btn-close modal-close"><span class="sr-only">Close</span></button></span></span>
<span style="position: relative; clear: both; display: block; min-height: 30px;"><button class="btn-search"></button></span>
```
*/
.btn-large, .btn-primary, .btn-secondary, .btn-tertiary, .btn-transactional, .btn-outline {
  padding: 12px 20px 10px;
  padding: 0.75rem 1.25rem 0.625rem;
  font-size: 13px;
  font-size: 0.8125rem;
  min-width: 125px; }

.btn-medium {
  padding: 10px 18px;
  padding: 0.625rem 1.125rem;
  font-size: 11px;
  font-size: 0.6875rem;
  min-width: 145px; }

.btn-small {
  padding: 8px 15px;
  padding: 0.5rem 0.9375rem;
  font-size: 10px;
  font-size: 0.625rem;
  min-width: 115px; }

.btn-tiny, .btn-order {
  padding: 6px 12px 7px;
  padding: 0.375rem 0.75rem 0.4375rem;
  font-size: 9px;
  font-size: 0.5625rem; }
  @media (min-width: 0) and (max-width: 640px) {
    .btn-tiny, .btn-order {
      padding: 5px 0;
      padding: 0.3125rem 0;
      margin-top: 5px;
      margin-top: 0.3125rem; } }

.btn, .btn-primary, .btn-secondary, .btn-tertiary, .btn-transactional, .btn-outline, .btn-order {
  font-style: normal;
  font-family: "Gotham A", "Gotham B", "M Hei PRC W45", "M Hei HK W42", "M Hei HK W40", "HelveticaNeue-Regular", "Helvetica Neue Regular", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 400;
  -webkit-transition: background-color 0.15s ease-in-out;
  -moz-transition: background-color 0.15s ease-in-out;
  -o-transition: background-color 0.15s ease-in-out;
  transition: background-color 0.15s ease-in-out;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  margin: 2px;
  margin: 0.125rem;
  border-radius: 0;
  display: inline-block;
  white-space: nowrap;
  vertical-align: middle;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  cursor: pointer;
  border: 0;
  color: #fff;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none; }
  .btn:hover, .btn-primary:hover, .btn-secondary:hover, .btn-tertiary:hover, .btn-transactional:hover, .btn-outline:hover, .btn-order:hover {
    -webkit-transition: background-color 0.15s ease-in-out;
    -moz-transition: background-color 0.15s ease-in-out;
    -o-transition: background-color 0.15s ease-in-out;
    transition: background-color 0.15s ease-in-out; }
  .btn:hover, .btn-primary:hover, .btn-secondary:hover, .btn-tertiary:hover, .btn-transactional:hover, .btn-outline:hover, .btn-order:hover, .btn:active, .btn-primary:active, .btn-secondary:active, .btn-tertiary:active, .btn-transactional:active, .btn-outline:active, .btn-order:active, .btn:focus, .btn-primary:focus, .btn-secondary:focus, .btn-tertiary:focus, .btn-transactional:focus, .btn-outline:focus, .btn-order:focus, .btn:visited, .btn-primary:visited, .btn-secondary:visited, .btn-tertiary:visited, .btn-transactional:visited, .btn-outline:visited, .btn-order:visited, .btn:disabled, .btn-primary:disabled, .btn-secondary:disabled, .btn-tertiary:disabled, .btn-transactional:disabled, .btn-outline:disabled, .btn-order:disabled {
    text-decoration: none;
    color: #fff; }
  @media (min-width: 0) and (max-width: 640px) {
    .btn, .btn-primary, .btn-secondary, .btn-tertiary, .btn-transactional, .btn-outline, .btn-order {
      width: 100%;
      display: block;
      float: none;
      margin-left: 0;
      margin-right: 0; } }

[class*="btn-"] {
  font-weight: 500; }

.btn-close {
  font-size: 21px;
  font-size: 1.3125rem;
  min-width: 0;
  color: #ccc;
  background-color: transparent;
  border: 0;
  margin: 0;
  padding: 0;
  position: absolute;
  top: .8rem;
  right: 1rem; }

:disabled,
[disabled="disabled"] {
  opacity: 0.6;
  cursor: not-allowed; }

.btn-full {
  width: 100%; }

.btn-primary {
  background: #c00; }
  .btn-primary:hover {
    background: #bf0000; }

.btn-secondary {
  background: #333; }
  .btn-secondary:hover {
    background: #2d2d2d; }

.btn-tertiary {
  background: #666; }
  .btn-tertiary:hover {
    background: #606060; }

.btn-transactional {
  background: #39f; }
  .btn-transactional:hover {
    background: #2693ff; }

.btn-outline {
  margin: 10px 5px 14px;
  margin: 0.625rem 0.3125rem 0.875rem;
  min-width: 150px;
  min-width: 9.375rem;
  border: 1px solid #fff;
  background: rgba(0, 0, 0, 0.5); }
  .btn-outline:hover {
    background: rgba(0, 0, 0, 0.75); }
  .btn-outline.outline-alternate {
    color: #c00;
    border-color: #c00;
    background-color: transparent; }
    .btn-outline.outline-alternate:hover {
      color: #f00;
      border-color: #f00;
      background-color: transparent; }
  .btn-outline.outline-white {
    color: #fff;
    border-color: #fff;
    background-color: rgba(0, 0, 0, 0.25);
    margin-left: 0; }
    .btn-outline.outline-white:hover {
      background-color: transparent; }
  .btn-outline.outline-black {
    color: #000;
    border-color: #000;
    background-color: transparent; }
    .btn-outline.outline-black:hover {
      background-color: transparent; }
  .btn-outline.outline-grey {
    color: #999;
    border-color: #999;
    background-color: transparent; }
    .btn-outline.outline-grey:hover {
      background-color: transparent; }

.btn-navigate {
  background: transparent url("/tesla_theme/assets/img/icon-navigate.svg") no-repeat center;
  width: 17px;
  width: 1.0625rem;
  height: 16px;
  height: 1rem;
  right: 15px;
  right: 0.9375rem;
  bottom: 15px;
  bottom: 0.9375rem;
  position: absolute;
  border: 0;
  cursor: pointer; }
  .lt-ie9 .btn-navigate,
  .no-svg .btn-navigate {
    background: transparent url("/tesla_theme/assets/img/icon-navigate.png") no-repeat center; }

.btn-search {
  background: transparent url("/tesla_theme/assets/img/icon-magnify.svg") no-repeat center;
  width: 25px;
  width: 1.5625rem;
  height: 25px;
  height: 1.5625rem;
  right: 10px;
  right: 0.625rem;
  bottom: 43px;
  bottom: 2.6875rem;
  position: absolute;
  border: 0;
  cursor: pointer; }
  .lt-ie9 .btn-search,
  .no-svg .btn-search {
    background: transparent url("/tesla_theme/assets/img/icon-magnify.png") no-repeat center; }

.btn-order {
  margin: 0;
  min-width: 0;
  background: #c00; }
  .btn-order:hover {
    background: #bf0000; }

/*doc
---
title: Button Group
name: button-group
categories: Buttons
parent: Buttons
---

Button Groups are common occurences at Tesla. Sometimes they take the form of two buttons next to each other, sometimes it's 1 button next to a "learn more" sort of link text type thing. Here are some examples.

```html_example
<div class="btn-group">
  <a href="#" title="some button" class="btn-primary">Click Me</a>
  <a href="#" title="some button" class="btn-secondary">Click Me</a>
</div>
```

```html_example
<div class="btn-group">
  <a href="#" title="some button" class="btn-primary">Click Me</a>
  <a href="#" title="some button" class="btn-primary--link">Click Me</a>
</div>
```

```html_example
<div class="btn-group">
  <a href="#" title="some button" class="btn-primary">Click Me</a>
  <a href="#" title="some button" class="btn-secondary">Click Me</a>
  <p>some text in a `btn group`</p>
</div>
```

*/
.btn-group {
  margin: 8px 0;
  margin: 0.5rem 0;
  font-weight: normal; }
  @media (min-width: 0) and (max-width: 640px) {
    .btn-group {
      clear: both; } }
  .btn-group + .bullet-group {
    margin-top: -8px;
    margin-top: -0.5rem; }
  .btn-group .btn-primary--link {
    padding-left: 25px;
    padding-left: 1.5625rem; }

.bullet-group {
  margin: 0;
  padding: 0; }
  .bullet-group a {
    color: #fff; }
  .bullet-group .icon-bullet {
    color: #fff;
    padding: 0 8px;
    padding: 0 0.5rem; }

@media (min-width: 0) and (max-width: 640px) {
  .btn-tiny, .btn-order {
    padding: 5px 0;
    padding: 0.3125rem 0;
    margin-top: 5px;
    margin-top: 0.3125rem; } }

.btn-primary--link {
  font-size: 15px;
  font-size: 0.9375rem;
  font-style: normal;
  font-family: "Gotham A", "Gotham B", "M Hei PRC W45", "M Hei HK W42", "M Hei HK W40", "HelveticaNeue-Regular", "Helvetica Neue Regular", "Helvetica Neue", Helvetica, Arial, sans-serif;
  padding: 0;
  margin: 0;
  border: 0;
  outline: 0;
  cursor: pointer;
  font-weight: normal;
  color: #c00;
  background-color: transparent; }
  .btn-primary--link:hover {
    color: #c90000; }

/*doc

---
title: Alerts
name: Alerts
category: Alerts
---

Need some documentation on what alerts are to be used for. You can use Particles
Alerts with, or without the icons. Although alerts can contain any content type,
they are generally seen with an optional icon and some text describing why there's
an alert.

# Basic alert

There are 4 basic alerts: `Info`, `Warn`, `Error`, `Success`. Here is how you
generate them:

<table class="table">
    <thead class="table-head">
        <tr class="table-row">
            <th class="">Variation</th>
            <th class="">Output</th>
        </tr>
    </thead>
    <tbody class="table-body">
        <tr class="table-row">
            <td class="">Info</td>
            <td class=""><code class="styleguide">particles-alert--info</code></td>
        </tr>
        <tr class="table-row">
            <td class="">Warn</td>
            <td class=""><code class="styleguide">particles-alert--warn</code></td>
        </tr>
        <tr class="table-row">
            <td class="">Error</td>
            <td class=""><code class="styleguide">particles-alert--error</code></td>
        </tr>
        <tr class="table-row">
            <td class="">Success</td>
            <td class=""><code class="styleguide">particles-alert--success</code></td>
        </tr>
    </tbody>
</table>


## With Icons (default)

The basic structure of the alerts would then render out to look like the below.

```html_example
<div class="particles-alert particles-alert--info">
    <i class="alert-icon fa fa-info-circle"></i>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    <i class="alert-link" data-trigger="close">&#215;</i>
</div>
<div class="particles-alert particles-alert--warn">
    <i class="alert-icon fa fa-exclamation-triangle"></i>
    Suspendisse interdum sit amet lorem sit amet vulputate.
    <i class="alert-link" data-trigger="close">&#215;</i>
</div>
<div class="particles-alert particles-alert--error">
    <i class="alert-icon fa fa-exclamation-triangle"></i>
    Vivamus sed lectus vel quam iaculis sodales.
    <i class="alert-link" data-trigger="close">&#215;</i>
</div>
<div class="particles-alert particles-alert--success">
    <i class="alert-icon fa fa-check"></i>
    Nullam congue auctor leo in dignissim.
    <i class="alert-link" data-trigger="close">&#215;</i>
</div>
```

## Without Icons

If you do not want the icons, simply delete
the `<i class="alert-icon fa fa-info-circle"></i>` code and you'll get a nice slimmed down
version of the alert.

```html_example
<div class="particles-alert particles-alert--info">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    <i class="alert-link" data-trigger="close">&#215;</i>
</div>
<div class="particles-alert particles-alert--warn">
    Suspendisse interdum sit amet lorem sit amet vulputate.
    <i class="alert-link" data-trigger="close">&#215;</i>
</div>
<div class="particles-alert particles-alert--error">
    Vivamus sed lectus vel quam iaculis sodales.
    <i class="alert-link" data-trigger="close">&#215;</i>
</div>
<div class="particles-alert particles-alert--success">
    Nullam congue auctor leo in dignissim.
    <i class="alert-link" data-trigger="close">&#215;</i>
</div>
```

## Alternate Styling with icons (default)

```html_example
<div class="particles-alert particles-alert--info particles-alert--alternate">
    <i class="alert-icon fa fa-info-circle"></i>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    <i class="alert-link" data-trigger="close">&#215;</i>
</div>
<div class="particles-alert particles-alert--warn particles-alert--alternate">
    <i class="alert-icon fa fa-exclamation-triangle"></i>
    Suspendisse interdum sit amet lorem sit amet vulputate.
    <i class="alert-link" data-trigger="close">&#215;</i>
</div>
<div class="particles-alert particles-alert--error particles-alert--alternate">
    <i class="alert-icon fa fa-exclamation-triangle"></i>
    Vivamus sed lectus vel quam iaculis sodales.
    <i class="alert-link" data-trigger="close">&#215;</i>
</div>
<div class="particles-alert particles-alert--success particles-alert--alternate">
    <i class="alert-icon fa fa-check"></i>
    Nullam congue auctor leo in dignissim.
    <i class="alert-link" data-trigger="close">&#215;</i>
</div>
```

## Alternate Styling without icons

```html_example
<div class="particles-alert particles-alert--info particles-alert--alternate">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    <i class="alert-link" data-trigger="close">&#215;</i>
</div>
<div class="particles-alert particles-alert--warn particles-alert--alternate">
    Suspendisse interdum sit amet lorem sit amet vulputate.
    <i class="alert-link" data-trigger="close">&#215;</i>
</div>
<div class="particles-alert particles-alert--error particles-alert--alternate">
    Vivamus sed lectus vel quam iaculis sodales.
    <i class="alert-link" data-trigger="close">&#215;</i>
</div>
<div class="particles-alert particles-alert--success particles-alert--alternate">
    Nullam congue auctor leo in dignissim.
    <i class="alert-link" data-trigger="close">&#215;</i>
</div>
```

## What happens on mobile?

Nada. Just let it flow naturally.

```html_example
<div class="particles-alert particles-alert--success">
    <i class="alert-icon fa fa-check"></i>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse interdum sit amet lorem sit amet vulputate. Vivamus sed lectus vel quam iaculis sodales. Nullam congue auctor leo in dignissim. Sed placerat congue dui sit amet eleifend. Maecenas pretium bibendum accumsan. Proin elementum iaculis erat, ut venenatis turpis semper a. Vestibulum in interdum nulla, sed tempor orci.
    <i class="alert-link" data-trigger="close">&#215;</i>
</div>

<div class="particles-alert particles-alert--info">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse interdum sit amet lorem sit amet vulputate. Vivamus sed lectus vel quam iaculis sodales. Nullam congue auctor leo in dignissim. Sed placerat congue dui sit amet eleifend. Maecenas pretium bibendum accumsan. Proin elementum iaculis erat, ut venenatis turpis semper a. Vestibulum in interdum nulla, sed tempor orci.
    <i class="alert-link" data-trigger="close">&#215;</i>
</div>

<div class="particles-alert particles-alert--warn particles-alert--alternate">
    <i class="alert-icon fa fa-check"></i>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse interdum sit amet lorem sit amet vulputate. Vivamus sed lectus vel quam iaculis sodales. Nullam congue auctor leo in dignissim. Sed placerat congue dui sit amet eleifend. Maecenas pretium bibendum accumsan. Proin elementum iaculis erat, ut venenatis turpis semper a. Vestibulum in interdum nulla, sed tempor orci.
    <i class="alert-link" data-trigger="close">&#215;</i>
</div>

<div class="particles-alert particles-alert--error particles-alert--alternate">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse interdum sit amet lorem sit amet vulputate. Vivamus sed lectus vel quam iaculis sodales. Nullam congue auctor leo in dignissim. Sed placerat congue dui sit amet eleifend. Maecenas pretium bibendum accumsan. Proin elementum iaculis erat, ut venenatis turpis semper a. Vestibulum in interdum nulla, sed tempor orci.
    <i class="alert-link" data-trigger="close">&#215;</i>
</div>
```

## Links in alerts?
Simply add the `.alert-link` class and links will match the color of the alert as appropriate

```html_example
<div class="particles-alert particles-alert--success">
    <i class="alert-icon fa fa-check"></i>
    Well done! You successfully <a href="#" class="alert-link">read this important alert message</a>.
    <i class="alert-link" data-trigger="close">&#215;</i>
</div>

<div class="particles-alert particles-alert--info">
    <i class="alert-icon fa fa-info-circle"></i>
    Heads up! This <a href="#" class="alert-link">alert needs your attention</a>, but it's not super important.
    <i class="alert-link" data-trigger="close">&#215;</i>
</div>

<div class="particles-alert particles-alert--warn particles-alert--alternate">
    Warning! Better check yourself, you're <a href="#" class="alert-link">not looking too good</a>.
    <i class="alert-link" data-trigger="close">&#215;</i>
</div>

<div class="particles-alert particles-alert--error particles-alert--alternate">
    Oh snap! <a href="#" class="alert-link">Change a few things</a> up and try submitting again.
    <i class="alert-link" data-trigger="close">&#215;</i>
</div>
```
*/
.particles-alert {
  margin: 10px 0;
  margin: 0.625rem 0;
  padding: 15px 30px;
  padding: 0.9375rem 1.875rem;
  font-style: normal;
  font-family: "Gotham A", "Gotham B", "M Hei PRC W45", "M Hei HK W42", "M Hei HK W40", "HelveticaNeue-Regular", "Helvetica Neue Regular", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 15px;
  font-size: 0.9375rem;
  position: relative;
  border: 1px solid;
  font-weight: 400; }
  .particles-alert .alert-icon,
  .particles-alert [data-trigger="close"] {
    position: absolute; }
  .particles-alert .alert-icon {
    top: 16px;
    top: 1rem;
    left: 10px;
    left: 0.625rem; }
  .particles-alert.particles-alert--alternate {
    background-color: #fff; }
  .particles-alert .alert-link {
    font-weight: bold;
    color: inherit; }
  .particles-alert [data-trigger="close"] {
    top: -1px;
    top: -0.0625rem;
    left: auto;
    font-size: 26px;
    line-height: 26px;
    font-size: 1.625rem;
    line-height: 1.625rem;
    right: 14px;
    right: 0.875rem;
    cursor: pointer;
    padding: 0 6px 6px;
    font-weight: 300; }

.particles-alert--info {
  color: #007899;
  border-color: #00bff3;
  background-color: #f2fcff; }
  .particles-alert--info[data-trigger="close"] {
    color: #00bff3; }
  .particles-alert--info.particles-alert--alternate {
    box-shadow: 0 0 12px 0 rgba(0, 191, 243, 0.15); }

.particles-alert--success {
  color: #549900;
  border-color: #7add00;
  background-color: #f9fff2; }
  .particles-alert--success[data-trigger="close"] {
    color: #7add00; }
  .particles-alert--success.particles-alert--alternate {
    box-shadow: 0 0 12px 0 rgba(122, 221, 0, 0.15); }

.particles-alert--warn {
  color: #996a00;
  border-color: #ffb714;
  background-color: #fffbf2; }
  .particles-alert--warn[data-trigger="close"] {
    color: #ffb714; }
  .particles-alert--warn.particles-alert--alternate {
    box-shadow: 0 0 12px 0 rgba(255, 183, 20, 0.15); }

.particles-alert--error {
  color: #990000;
  border-color: #e00000;
  background-color: #fff2f2; }
  .particles-alert--error[data-trigger="close"] {
    color: #e00000; }
  .particles-alert--error.particles-alert--alternate {
    box-shadow: 0 0 12px 0 rgba(224, 0, 0, 0.15); }

/*!
 *  Font Awesome 4.5.0 by @davegandy - http://fontawesome.io - @fontawesome
 *  License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License)
 */
/* FONT PATH
 * -------------------------- */
@font-face {
  font-family: 'FontAwesome';
  src: url("../fonts/fontawesome-webfont.eot?v=4.5.0");
  src: url("../fonts/fontawesome-webfont.eot?#iefix&v=4.5.0") format("embedded-opentype"), url("../fonts/fontawesome-webfont.woff2?v=4.5.0") format("woff2"), url("../fonts/fontawesome-webfont.woff?v=4.5.0") format("woff"), url("../fonts/fontawesome-webfont.ttf?v=4.5.0") format("truetype"), url("../fonts/fontawesome-webfont.svg?v=4.5.0#fontawesomeregular") format("svg");
  font-weight: normal;
  font-style: normal; }

.fa {
  display: inline-block;
  font: normal normal normal 14px / 1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }

/* makes the font 33% larger relative to the icon container */
.fa-lg {
  font-size: 1.33333em;
  line-height: 0.75em;
  vertical-align: -15%; }

.fa-2x {
  font-size: 2em; }

.fa-3x {
  font-size: 3em; }

.fa-4x {
  font-size: 4em; }

.fa-5x {
  font-size: 5em; }

.fa-fw {
  width: 1.28571em;
  text-align: center; }

.fa-ul {
  padding-left: 0;
  margin-left: 2.14286em;
  list-style-type: none; }
  .fa-ul > li {
    position: relative; }

.fa-li {
  position: absolute;
  left: -2.14286em;
  width: 2.14286em;
  top: 0.14286em;
  text-align: center; }
  .fa-li.fa-lg {
    left: -1.85714em; }

.fa-border {
  padding: .2em .25em .15em;
  border: solid 0.08em #eee;
  border-radius: .1em; }

.fa-pull-left {
  float: left; }

.fa-pull-right {
  float: right; }

.fa.fa-pull-left {
  margin-right: .3em; }

.fa.fa-pull-right {
  margin-left: .3em; }

/* Deprecated as of 4.4.0 */
.pull-right {
  float: right; }

.pull-left {
  float: left; }

.fa.pull-left {
  margin-right: .3em; }

.fa.pull-right {
  margin-left: .3em; }

.fa-spin {
  -webkit-animation: fa-spin 2s infinite linear;
  animation: fa-spin 2s infinite linear; }

.fa-pulse {
  -webkit-animation: fa-spin 1s infinite steps(8);
  animation: fa-spin 1s infinite steps(8); }

@-webkit-keyframes fa-spin {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg); }
  100% {
    -webkit-transform: rotate(359deg);
    transform: rotate(359deg); } }

@keyframes fa-spin {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg); }
  100% {
    -webkit-transform: rotate(359deg);
    transform: rotate(359deg); } }

.fa-rotate-90 {
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
  -webkit-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg); }

.fa-rotate-180 {
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
  -webkit-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(180deg); }

.fa-rotate-270 {
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
  -webkit-transform: rotate(270deg);
  -ms-transform: rotate(270deg);
  transform: rotate(270deg); }

.fa-flip-horizontal {
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0);
  -webkit-transform: scale(-1, 1);
  -ms-transform: scale(-1, 1);
  transform: scale(-1, 1); }

.fa-flip-vertical {
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
  -webkit-transform: scale(1, -1);
  -ms-transform: scale(1, -1);
  transform: scale(1, -1); }

:root .fa-rotate-90,
:root .fa-rotate-180,
:root .fa-rotate-270,
:root .fa-flip-horizontal,
:root .fa-flip-vertical {
  filter: none; }

.fa-stack {
  position: relative;
  display: inline-block;
  width: 2em;
  height: 2em;
  line-height: 2em;
  vertical-align: middle; }

.fa-stack-1x, .fa-stack-2x {
  position: absolute;
  left: 0;
  width: 100%;
  text-align: center; }

.fa-stack-1x {
  line-height: inherit; }

.fa-stack-2x {
  font-size: 2em; }

.fa-inverse {
  color: #fff; }

/* Font Awesome uses the Unicode Private Use Area (PUA) to ensure screen
   readers do not read off random characters that represent icons */
.fa-glass:before {
  content: ""; }

.fa-music:before {
  content: ""; }

.fa-search:before {
  content: ""; }

.fa-envelope-o:before {
  content: ""; }

.fa-heart:before {
  content: ""; }

.fa-star:before {
  content: ""; }

.fa-star-o:before {
  content: ""; }

.fa-user:before {
  content: ""; }

.fa-film:before {
  content: ""; }

.fa-th-large:before {
  content: ""; }

.fa-th:before {
  content: ""; }

.fa-th-list:before {
  content: ""; }

.fa-check:before {
  content: ""; }

.fa-remove:before,
.fa-close:before,
.fa-times:before {
  content: ""; }

.fa-search-plus:before {
  content: ""; }

.fa-search-minus:before {
  content: ""; }

.fa-power-off:before {
  content: ""; }

.fa-signal:before {
  content: ""; }

.fa-gear:before,
.fa-cog:before {
  content: ""; }

.fa-trash-o:before {
  content: ""; }

.fa-home:before {
  content: ""; }

.fa-file-o:before {
  content: ""; }

.fa-clock-o:before {
  content: ""; }

.fa-road:before {
  content: ""; }

.fa-download:before {
  content: ""; }

.fa-arrow-circle-o-down:before {
  content: ""; }

.fa-arrow-circle-o-up:before {
  content: ""; }

.fa-inbox:before {
  content: ""; }

.fa-play-circle-o:before {
  content: ""; }

.fa-rotate-right:before,
.fa-repeat:before {
  content: ""; }

.fa-refresh:before {
  content: ""; }

.fa-list-alt:before {
  content: ""; }

.fa-lock:before {
  content: ""; }

.fa-flag:before {
  content: ""; }

.fa-headphones:before {
  content: ""; }

.fa-volume-off:before {
  content: ""; }

.fa-volume-down:before {
  content: ""; }

.fa-volume-up:before {
  content: ""; }

.fa-qrcode:before {
  content: ""; }

.fa-barcode:before {
  content: ""; }

.fa-tag:before {
  content: ""; }

.fa-tags:before {
  content: ""; }

.fa-book:before {
  content: ""; }

.fa-bookmark:before {
  content: ""; }

.fa-print:before {
  content: ""; }

.fa-camera:before {
  content: ""; }

.fa-font:before {
  content: ""; }

.fa-bold:before {
  content: ""; }

.fa-italic:before {
  content: ""; }

.fa-text-height:before {
  content: ""; }

.fa-text-width:before {
  content: ""; }

.fa-align-left:before {
  content: ""; }

.fa-align-center:before {
  content: ""; }

.fa-align-right:before {
  content: ""; }

.fa-align-justify:before {
  content: ""; }

.fa-list:before {
  content: ""; }

.fa-dedent:before,
.fa-outdent:before {
  content: ""; }

.fa-indent:before {
  content: ""; }

.fa-video-camera:before {
  content: ""; }

.fa-photo:before,
.fa-image:before,
.fa-picture-o:before {
  content: ""; }

.fa-pencil:before {
  content: ""; }

.fa-map-marker:before {
  content: ""; }

.fa-adjust:before {
  content: ""; }

.fa-tint:before {
  content: ""; }

.fa-edit:before,
.fa-pencil-square-o:before {
  content: ""; }

.fa-share-square-o:before {
  content: ""; }

.fa-check-square-o:before {
  content: ""; }

.fa-arrows:before {
  content: ""; }

.fa-step-backward:before {
  content: ""; }

.fa-fast-backward:before {
  content: ""; }

.fa-backward:before {
  content: ""; }

.fa-play:before {
  content: ""; }

.fa-pause:before {
  content: ""; }

.fa-stop:before {
  content: ""; }

.fa-forward:before {
  content: ""; }

.fa-fast-forward:before {
  content: ""; }

.fa-step-forward:before {
  content: ""; }

.fa-eject:before {
  content: ""; }

.fa-chevron-left:before {
  content: ""; }

.fa-chevron-right:before {
  content: ""; }

.fa-plus-circle:before {
  content: ""; }

.fa-minus-circle:before {
  content: ""; }

.fa-times-circle:before {
  content: ""; }

.fa-check-circle:before {
  content: ""; }

.fa-question-circle:before {
  content: ""; }

.fa-info-circle:before {
  content: ""; }

.fa-crosshairs:before {
  content: ""; }

.fa-times-circle-o:before {
  content: ""; }

.fa-check-circle-o:before {
  content: ""; }

.fa-ban:before {
  content: ""; }

.fa-arrow-left:before {
  content: ""; }

.fa-arrow-right:before {
  content: ""; }

.fa-arrow-up:before {
  content: ""; }

.fa-arrow-down:before {
  content: ""; }

.fa-mail-forward:before,
.fa-share:before {
  content: ""; }

.fa-expand:before {
  content: ""; }

.fa-compress:before {
  content: ""; }

.fa-plus:before {
  content: ""; }

.fa-minus:before {
  content: ""; }

.fa-asterisk:before {
  content: ""; }

.fa-exclamation-circle:before {
  content: ""; }

.fa-gift:before {
  content: ""; }

.fa-leaf:before {
  content: ""; }

.fa-fire:before {
  content: ""; }

.fa-eye:before {
  content: ""; }

.fa-eye-slash:before {
  content: ""; }

.fa-warning:before,
.fa-exclamation-triangle:before {
  content: ""; }

.fa-plane:before {
  content: ""; }

.fa-calendar:before {
  content: ""; }

.fa-random:before {
  content: ""; }

.fa-comment:before {
  content: ""; }

.fa-magnet:before {
  content: ""; }

.fa-chevron-up:before {
  content: ""; }

.fa-chevron-down:before {
  content: ""; }

.fa-retweet:before {
  content: ""; }

.fa-shopping-cart:before {
  content: ""; }

.fa-folder:before {
  content: ""; }

.fa-folder-open:before {
  content: ""; }

.fa-arrows-v:before {
  content: ""; }

.fa-arrows-h:before {
  content: ""; }

.fa-bar-chart-o:before,
.fa-bar-chart:before {
  content: ""; }

.fa-twitter-square:before {
  content: ""; }

.fa-facebook-square:before {
  content: ""; }

.fa-camera-retro:before {
  content: ""; }

.fa-key:before {
  content: ""; }

.fa-gears:before,
.fa-cogs:before {
  content: ""; }

.fa-comments:before {
  content: ""; }

.fa-thumbs-o-up:before {
  content: ""; }

.fa-thumbs-o-down:before {
  content: ""; }

.fa-star-half:before {
  content: ""; }

.fa-heart-o:before {
  content: ""; }

.fa-sign-out:before {
  content: ""; }

.fa-linkedin-square:before {
  content: ""; }

.fa-thumb-tack:before {
  content: ""; }

.fa-external-link:before {
  content: ""; }

.fa-sign-in:before {
  content: ""; }

.fa-trophy:before {
  content: ""; }

.fa-github-square:before {
  content: ""; }

.fa-upload:before {
  content: ""; }

.fa-lemon-o:before {
  content: ""; }

.fa-phone:before {
  content: ""; }

.fa-square-o:before {
  content: ""; }

.fa-bookmark-o:before {
  content: ""; }

.fa-phone-square:before {
  content: ""; }

.fa-twitter:before {
  content: ""; }

.fa-facebook-f:before,
.fa-facebook:before {
  content: ""; }

.fa-github:before {
  content: ""; }

.fa-unlock:before {
  content: ""; }

.fa-credit-card:before {
  content: ""; }

.fa-feed:before,
.fa-rss:before {
  content: ""; }

.fa-hdd-o:before {
  content: ""; }

.fa-bullhorn:before {
  content: ""; }

.fa-bell:before {
  content: ""; }

.fa-certificate:before {
  content: ""; }

.fa-hand-o-right:before {
  content: ""; }

.fa-hand-o-left:before {
  content: ""; }

.fa-hand-o-up:before {
  content: ""; }

.fa-hand-o-down:before {
  content: ""; }

.fa-arrow-circle-left:before {
  content: ""; }

.fa-arrow-circle-right:before {
  content: ""; }

.fa-arrow-circle-up:before {
  content: ""; }

.fa-arrow-circle-down:before {
  content: ""; }

.fa-globe:before {
  content: ""; }

.fa-wrench:before {
  content: ""; }

.fa-tasks:before {
  content: ""; }

.fa-filter:before {
  content: ""; }

.fa-briefcase:before {
  content: ""; }

.fa-arrows-alt:before {
  content: ""; }

.fa-group:before,
.fa-users:before {
  content: ""; }

.fa-chain:before,
.fa-link:before {
  content: ""; }

.fa-cloud:before {
  content: ""; }

.fa-flask:before {
  content: ""; }

.fa-cut:before,
.fa-scissors:before {
  content: ""; }

.fa-copy:before,
.fa-files-o:before {
  content: ""; }

.fa-paperclip:before {
  content: ""; }

.fa-save:before,
.fa-floppy-o:before {
  content: ""; }

.fa-square:before {
  content: ""; }

.fa-navicon:before,
.fa-reorder:before,
.fa-bars:before {
  content: ""; }

.fa-list-ul:before {
  content: ""; }

.fa-list-ol:before {
  content: ""; }

.fa-strikethrough:before {
  content: ""; }

.fa-underline:before {
  content: ""; }

.fa-table:before {
  content: ""; }

.fa-magic:before {
  content: ""; }

.fa-truck:before {
  content: ""; }

.fa-pinterest:before {
  content: ""; }

.fa-pinterest-square:before {
  content: ""; }

.fa-google-plus-square:before {
  content: ""; }

.fa-google-plus:before {
  content: ""; }

.fa-money:before {
  content: ""; }

.fa-caret-down:before {
  content: ""; }

.fa-caret-up:before {
  content: ""; }

.fa-caret-left:before {
  content: ""; }

.fa-caret-right:before {
  content: ""; }

.fa-columns:before {
  content: ""; }

.fa-unsorted:before,
.fa-sort:before {
  content: ""; }

.fa-sort-down:before,
.fa-sort-desc:before {
  content: ""; }

.fa-sort-up:before,
.fa-sort-asc:before {
  content: ""; }

.fa-envelope:before {
  content: ""; }

.fa-linkedin:before {
  content: ""; }

.fa-rotate-left:before,
.fa-undo:before {
  content: ""; }

.fa-legal:before,
.fa-gavel:before {
  content: ""; }

.fa-dashboard:before,
.fa-tachometer:before {
  content: ""; }

.fa-comment-o:before {
  content: ""; }

.fa-comments-o:before {
  content: ""; }

.fa-flash:before,
.fa-bolt:before {
  content: ""; }

.fa-sitemap:before {
  content: ""; }

.fa-umbrella:before {
  content: ""; }

.fa-paste:before,
.fa-clipboard:before {
  content: ""; }

.fa-lightbulb-o:before {
  content: ""; }

.fa-exchange:before {
  content: ""; }

.fa-cloud-download:before {
  content: ""; }

.fa-cloud-upload:before {
  content: ""; }

.fa-user-md:before {
  content: ""; }

.fa-stethoscope:before {
  content: ""; }

.fa-suitcase:before {
  content: ""; }

.fa-bell-o:before {
  content: ""; }

.fa-coffee:before {
  content: ""; }

.fa-cutlery:before {
  content: ""; }

.fa-file-text-o:before {
  content: ""; }

.fa-building-o:before {
  content: ""; }

.fa-hospital-o:before {
  content: ""; }

.fa-ambulance:before {
  content: ""; }

.fa-medkit:before {
  content: ""; }

.fa-fighter-jet:before {
  content: ""; }

.fa-beer:before {
  content: ""; }

.fa-h-square:before {
  content: ""; }

.fa-plus-square:before {
  content: ""; }

.fa-angle-double-left:before {
  content: ""; }

.fa-angle-double-right:before {
  content: ""; }

.fa-angle-double-up:before {
  content: ""; }

.fa-angle-double-down:before {
  content: ""; }

.fa-angle-left:before {
  content: ""; }

.fa-angle-right:before {
  content: ""; }

.fa-angle-up:before {
  content: ""; }

.fa-angle-down:before {
  content: ""; }

.fa-desktop:before {
  content: ""; }

.fa-laptop:before {
  content: ""; }

.fa-tablet:before {
  content: ""; }

.fa-mobile-phone:before,
.fa-mobile:before {
  content: ""; }

.fa-circle-o:before {
  content: ""; }

.fa-quote-left:before {
  content: ""; }

.fa-quote-right:before {
  content: ""; }

.fa-spinner:before {
  content: ""; }

.fa-circle:before {
  content: ""; }

.fa-mail-reply:before,
.fa-reply:before {
  content: ""; }

.fa-github-alt:before {
  content: ""; }

.fa-folder-o:before {
  content: ""; }

.fa-folder-open-o:before {
  content: ""; }

.fa-smile-o:before {
  content: ""; }

.fa-frown-o:before {
  content: ""; }

.fa-meh-o:before {
  content: ""; }

.fa-gamepad:before {
  content: ""; }

.fa-keyboard-o:before {
  content: ""; }

.fa-flag-o:before {
  content: ""; }

.fa-flag-checkered:before {
  content: ""; }

.fa-terminal:before {
  content: ""; }

.fa-code:before {
  content: ""; }

.fa-mail-reply-all:before,
.fa-reply-all:before {
  content: ""; }

.fa-star-half-empty:before,
.fa-star-half-full:before,
.fa-star-half-o:before {
  content: ""; }

.fa-location-arrow:before {
  content: ""; }

.fa-crop:before {
  content: ""; }

.fa-code-fork:before {
  content: ""; }

.fa-unlink:before,
.fa-chain-broken:before {
  content: ""; }

.fa-question:before {
  content: ""; }

.fa-info:before {
  content: ""; }

.fa-exclamation:before {
  content: ""; }

.fa-superscript:before {
  content: ""; }

.fa-subscript:before {
  content: ""; }

.fa-eraser:before {
  content: ""; }

.fa-puzzle-piece:before {
  content: ""; }

.fa-microphone:before {
  content: ""; }

.fa-microphone-slash:before {
  content: ""; }

.fa-shield:before {
  content: ""; }

.fa-calendar-o:before {
  content: ""; }

.fa-fire-extinguisher:before {
  content: ""; }

.fa-rocket:before {
  content: ""; }

.fa-maxcdn:before {
  content: ""; }

.fa-chevron-circle-left:before {
  content: ""; }

.fa-chevron-circle-right:before {
  content: ""; }

.fa-chevron-circle-up:before {
  content: ""; }

.fa-chevron-circle-down:before {
  content: ""; }

.fa-html5:before {
  content: ""; }

.fa-css3:before {
  content: ""; }

.fa-anchor:before {
  content: ""; }

.fa-unlock-alt:before {
  content: ""; }

.fa-bullseye:before {
  content: ""; }

.fa-ellipsis-h:before {
  content: ""; }

.fa-ellipsis-v:before {
  content: ""; }

.fa-rss-square:before {
  content: ""; }

.fa-play-circle:before {
  content: ""; }

.fa-ticket:before {
  content: ""; }

.fa-minus-square:before {
  content: ""; }

.fa-minus-square-o:before {
  content: ""; }

.fa-level-up:before {
  content: ""; }

.fa-level-down:before {
  content: ""; }

.fa-check-square:before {
  content: ""; }

.fa-pencil-square:before {
  content: ""; }

.fa-external-link-square:before {
  content: ""; }

.fa-share-square:before {
  content: ""; }

.fa-compass:before {
  content: ""; }

.fa-toggle-down:before,
.fa-caret-square-o-down:before {
  content: ""; }

.fa-toggle-up:before,
.fa-caret-square-o-up:before {
  content: ""; }

.fa-toggle-right:before,
.fa-caret-square-o-right:before {
  content: ""; }

.fa-euro:before,
.fa-eur:before {
  content: ""; }

.fa-gbp:before {
  content: ""; }

.fa-dollar:before,
.fa-usd:before {
  content: ""; }

.fa-rupee:before,
.fa-inr:before {
  content: ""; }

.fa-cny:before,
.fa-rmb:before,
.fa-yen:before,
.fa-jpy:before {
  content: ""; }

.fa-ruble:before,
.fa-rouble:before,
.fa-rub:before {
  content: ""; }

.fa-won:before,
.fa-krw:before {
  content: ""; }

.fa-bitcoin:before,
.fa-btc:before {
  content: ""; }

.fa-file:before {
  content: ""; }

.fa-file-text:before {
  content: ""; }

.fa-sort-alpha-asc:before {
  content: ""; }

.fa-sort-alpha-desc:before {
  content: ""; }

.fa-sort-amount-asc:before {
  content: ""; }

.fa-sort-amount-desc:before {
  content: ""; }

.fa-sort-numeric-asc:before {
  content: ""; }

.fa-sort-numeric-desc:before {
  content: ""; }

.fa-thumbs-up:before {
  content: ""; }

.fa-thumbs-down:before {
  content: ""; }

.fa-youtube-square:before {
  content: ""; }

.fa-youtube:before {
  content: ""; }

.fa-xing:before {
  content: ""; }

.fa-xing-square:before {
  content: ""; }

.fa-youtube-play:before {
  content: ""; }

.fa-dropbox:before {
  content: ""; }

.fa-stack-overflow:before {
  content: ""; }

.fa-instagram:before {
  content: ""; }

.fa-flickr:before {
  content: ""; }

.fa-adn:before {
  content: ""; }

.fa-bitbucket:before {
  content: ""; }

.fa-bitbucket-square:before {
  content: ""; }

.fa-tumblr:before {
  content: ""; }

.fa-tumblr-square:before {
  content: ""; }

.fa-long-arrow-down:before {
  content: ""; }

.fa-long-arrow-up:before {
  content: ""; }

.fa-long-arrow-left:before {
  content: ""; }

.fa-long-arrow-right:before {
  content: ""; }

.fa-apple:before {
  content: ""; }

.fa-windows:before {
  content: ""; }

.fa-android:before {
  content: ""; }

.fa-linux:before {
  content: ""; }

.fa-dribbble:before {
  content: ""; }

.fa-skype:before {
  content: ""; }

.fa-foursquare:before {
  content: ""; }

.fa-trello:before {
  content: ""; }

.fa-female:before {
  content: ""; }

.fa-male:before {
  content: ""; }

.fa-gittip:before,
.fa-gratipay:before {
  content: ""; }

.fa-sun-o:before {
  content: ""; }

.fa-moon-o:before {
  content: ""; }

.fa-archive:before {
  content: ""; }

.fa-bug:before {
  content: ""; }

.fa-vk:before {
  content: ""; }

.fa-weibo:before {
  content: ""; }

.fa-renren:before {
  content: ""; }

.fa-pagelines:before {
  content: ""; }

.fa-stack-exchange:before {
  content: ""; }

.fa-arrow-circle-o-right:before {
  content: ""; }

.fa-arrow-circle-o-left:before {
  content: ""; }

.fa-toggle-left:before,
.fa-caret-square-o-left:before {
  content: ""; }

.fa-dot-circle-o:before {
  content: ""; }

.fa-wheelchair:before {
  content: ""; }

.fa-vimeo-square:before {
  content: ""; }

.fa-turkish-lira:before,
.fa-try:before {
  content: ""; }

.fa-plus-square-o:before {
  content: ""; }

.fa-space-shuttle:before {
  content: ""; }

.fa-slack:before {
  content: ""; }

.fa-envelope-square:before {
  content: ""; }

.fa-wordpress:before {
  content: ""; }

.fa-openid:before {
  content: ""; }

.fa-institution:before,
.fa-bank:before,
.fa-university:before {
  content: ""; }

.fa-mortar-board:before,
.fa-graduation-cap:before {
  content: ""; }

.fa-yahoo:before {
  content: ""; }

.fa-google:before {
  content: ""; }

.fa-reddit:before {
  content: ""; }

.fa-reddit-square:before {
  content: ""; }

.fa-stumbleupon-circle:before {
  content: ""; }

.fa-stumbleupon:before {
  content: ""; }

.fa-delicious:before {
  content: ""; }

.fa-digg:before {
  content: ""; }

.fa-pied-piper:before {
  content: ""; }

.fa-pied-piper-alt:before {
  content: ""; }

.fa-drupal:before {
  content: ""; }

.fa-joomla:before {
  content: ""; }

.fa-language:before {
  content: ""; }

.fa-fax:before {
  content: ""; }

.fa-building:before {
  content: ""; }

.fa-child:before {
  content: ""; }

.fa-paw:before {
  content: ""; }

.fa-spoon:before {
  content: ""; }

.fa-cube:before {
  content: ""; }

.fa-cubes:before {
  content: ""; }

.fa-behance:before {
  content: ""; }

.fa-behance-square:before {
  content: ""; }

.fa-steam:before {
  content: ""; }

.fa-steam-square:before {
  content: ""; }

.fa-recycle:before {
  content: ""; }

.fa-automobile:before,
.fa-car:before {
  content: ""; }

.fa-cab:before,
.fa-taxi:before {
  content: ""; }

.fa-tree:before {
  content: ""; }

.fa-spotify:before {
  content: ""; }

.fa-deviantart:before {
  content: ""; }

.fa-soundcloud:before {
  content: ""; }

.fa-database:before {
  content: ""; }

.fa-file-pdf-o:before {
  content: ""; }

.fa-file-word-o:before {
  content: ""; }

.fa-file-excel-o:before {
  content: ""; }

.fa-file-powerpoint-o:before {
  content: ""; }

.fa-file-photo-o:before,
.fa-file-picture-o:before,
.fa-file-image-o:before {
  content: ""; }

.fa-file-zip-o:before,
.fa-file-archive-o:before {
  content: ""; }

.fa-file-sound-o:before,
.fa-file-audio-o:before {
  content: ""; }

.fa-file-movie-o:before,
.fa-file-video-o:before {
  content: ""; }

.fa-file-code-o:before {
  content: ""; }

.fa-vine:before {
  content: ""; }

.fa-codepen:before {
  content: ""; }

.fa-jsfiddle:before {
  content: ""; }

.fa-life-bouy:before,
.fa-life-buoy:before,
.fa-life-saver:before,
.fa-support:before,
.fa-life-ring:before {
  content: ""; }

.fa-circle-o-notch:before {
  content: ""; }

.fa-ra:before,
.fa-rebel:before {
  content: ""; }

.fa-ge:before,
.fa-empire:before {
  content: ""; }

.fa-git-square:before {
  content: ""; }

.fa-git:before {
  content: ""; }

.fa-y-combinator-square:before,
.fa-yc-square:before,
.fa-hacker-news:before {
  content: ""; }

.fa-tencent-weibo:before {
  content: ""; }

.fa-qq:before {
  content: ""; }

.fa-wechat:before,
.fa-weixin:before {
  content: ""; }

.fa-send:before,
.fa-paper-plane:before {
  content: ""; }

.fa-send-o:before,
.fa-paper-plane-o:before {
  content: ""; }

.fa-history:before {
  content: ""; }

.fa-circle-thin:before {
  content: ""; }

.fa-header:before {
  content: ""; }

.fa-paragraph:before {
  content: ""; }

.fa-sliders:before {
  content: ""; }

.fa-share-alt:before {
  content: ""; }

.fa-share-alt-square:before {
  content: ""; }

.fa-bomb:before {
  content: ""; }

.fa-soccer-ball-o:before,
.fa-futbol-o:before {
  content: ""; }

.fa-tty:before {
  content: ""; }

.fa-binoculars:before {
  content: ""; }

.fa-plug:before {
  content: ""; }

.fa-slideshare:before {
  content: ""; }

.fa-twitch:before {
  content: ""; }

.fa-yelp:before {
  content: ""; }

.fa-newspaper-o:before {
  content: ""; }

.fa-wifi:before {
  content: ""; }

.fa-calculator:before {
  content: ""; }

.fa-paypal:before {
  content: ""; }

.fa-google-wallet:before {
  content: ""; }

.fa-cc-visa:before {
  content: ""; }

.fa-cc-mastercard:before {
  content: ""; }

.fa-cc-discover:before {
  content: ""; }

.fa-cc-amex:before {
  content: ""; }

.fa-cc-paypal:before {
  content: ""; }

.fa-cc-stripe:before {
  content: ""; }

.fa-bell-slash:before {
  content: ""; }

.fa-bell-slash-o:before {
  content: ""; }

.fa-trash:before {
  content: ""; }

.fa-copyright:before {
  content: ""; }

.fa-at:before {
  content: ""; }

.fa-eyedropper:before {
  content: ""; }

.fa-paint-brush:before {
  content: ""; }

.fa-birthday-cake:before {
  content: ""; }

.fa-area-chart:before {
  content: ""; }

.fa-pie-chart:before {
  content: ""; }

.fa-line-chart:before {
  content: ""; }

.fa-lastfm:before {
  content: ""; }

.fa-lastfm-square:before {
  content: ""; }

.fa-toggle-off:before {
  content: ""; }

.fa-toggle-on:before {
  content: ""; }

.fa-bicycle:before {
  content: ""; }

.fa-bus:before {
  content: ""; }

.fa-ioxhost:before {
  content: ""; }

.fa-angellist:before {
  content: ""; }

.fa-cc:before {
  content: ""; }

.fa-shekel:before,
.fa-sheqel:before,
.fa-ils:before {
  content: ""; }

.fa-meanpath:before {
  content: ""; }

.fa-buysellads:before {
  content: ""; }

.fa-connectdevelop:before {
  content: ""; }

.fa-dashcube:before {
  content: ""; }

.fa-forumbee:before {
  content: ""; }

.fa-leanpub:before {
  content: ""; }

.fa-sellsy:before {
  content: ""; }

.fa-shirtsinbulk:before {
  content: ""; }

.fa-simplybuilt:before {
  content: ""; }

.fa-skyatlas:before {
  content: ""; }

.fa-cart-plus:before {
  content: ""; }

.fa-cart-arrow-down:before {
  content: ""; }

.fa-diamond:before {
  content: ""; }

.fa-ship:before {
  content: ""; }

.fa-user-secret:before {
  content: ""; }

.fa-motorcycle:before {
  content: ""; }

.fa-street-view:before {
  content: ""; }

.fa-heartbeat:before {
  content: ""; }

.fa-venus:before {
  content: ""; }

.fa-mars:before {
  content: ""; }

.fa-mercury:before {
  content: ""; }

.fa-intersex:before,
.fa-transgender:before {
  content: ""; }

.fa-transgender-alt:before {
  content: ""; }

.fa-venus-double:before {
  content: ""; }

.fa-mars-double:before {
  content: ""; }

.fa-venus-mars:before {
  content: ""; }

.fa-mars-stroke:before {
  content: ""; }

.fa-mars-stroke-v:before {
  content: ""; }

.fa-mars-stroke-h:before {
  content: ""; }

.fa-neuter:before {
  content: ""; }

.fa-genderless:before {
  content: ""; }

.fa-facebook-official:before {
  content: ""; }

.fa-pinterest-p:before {
  content: ""; }

.fa-whatsapp:before {
  content: ""; }

.fa-server:before {
  content: ""; }

.fa-user-plus:before {
  content: ""; }

.fa-user-times:before {
  content: ""; }

.fa-hotel:before,
.fa-bed:before {
  content: ""; }

.fa-viacoin:before {
  content: ""; }

.fa-train:before {
  content: ""; }

.fa-subway:before {
  content: ""; }

.fa-medium:before {
  content: ""; }

.fa-yc:before,
.fa-y-combinator:before {
  content: ""; }

.fa-optin-monster:before {
  content: ""; }

.fa-opencart:before {
  content: ""; }

.fa-expeditedssl:before {
  content: ""; }

.fa-battery-4:before,
.fa-battery-full:before {
  content: ""; }

.fa-battery-3:before,
.fa-battery-three-quarters:before {
  content: ""; }

.fa-battery-2:before,
.fa-battery-half:before {
  content: ""; }

.fa-battery-1:before,
.fa-battery-quarter:before {
  content: ""; }

.fa-battery-0:before,
.fa-battery-empty:before {
  content: ""; }

.fa-mouse-pointer:before {
  content: ""; }

.fa-i-cursor:before {
  content: ""; }

.fa-object-group:before {
  content: ""; }

.fa-object-ungroup:before {
  content: ""; }

.fa-sticky-note:before {
  content: ""; }

.fa-sticky-note-o:before {
  content: ""; }

.fa-cc-jcb:before {
  content: ""; }

.fa-cc-diners-club:before {
  content: ""; }

.fa-clone:before {
  content: ""; }

.fa-balance-scale:before {
  content: ""; }

.fa-hourglass-o:before {
  content: ""; }

.fa-hourglass-1:before,
.fa-hourglass-start:before {
  content: ""; }

.fa-hourglass-2:before,
.fa-hourglass-half:before {
  content: ""; }

.fa-hourglass-3:before,
.fa-hourglass-end:before {
  content: ""; }

.fa-hourglass:before {
  content: ""; }

.fa-hand-grab-o:before,
.fa-hand-rock-o:before {
  content: ""; }

.fa-hand-stop-o:before,
.fa-hand-paper-o:before {
  content: ""; }

.fa-hand-scissors-o:before {
  content: ""; }

.fa-hand-lizard-o:before {
  content: ""; }

.fa-hand-spock-o:before {
  content: ""; }

.fa-hand-pointer-o:before {
  content: ""; }

.fa-hand-peace-o:before {
  content: ""; }

.fa-trademark:before {
  content: ""; }

.fa-registered:before {
  content: ""; }

.fa-creative-commons:before {
  content: ""; }

.fa-gg:before {
  content: ""; }

.fa-gg-circle:before {
  content: ""; }

.fa-tripadvisor:before {
  content: ""; }

.fa-odnoklassniki:before {
  content: ""; }

.fa-odnoklassniki-square:before {
  content: ""; }

.fa-get-pocket:before {
  content: ""; }

.fa-wikipedia-w:before {
  content: ""; }

.fa-safari:before {
  content: ""; }

.fa-chrome:before {
  content: ""; }

.fa-firefox:before {
  content: ""; }

.fa-opera:before {
  content: ""; }

.fa-internet-explorer:before {
  content: ""; }

.fa-tv:before,
.fa-television:before {
  content: ""; }

.fa-contao:before {
  content: ""; }

.fa-500px:before {
  content: ""; }

.fa-amazon:before {
  content: ""; }

.fa-calendar-plus-o:before {
  content: ""; }

.fa-calendar-minus-o:before {
  content: ""; }

.fa-calendar-times-o:before {
  content: ""; }

.fa-calendar-check-o:before {
  content: ""; }

.fa-industry:before {
  content: ""; }

.fa-map-pin:before {
  content: ""; }

.fa-map-signs:before {
  content: ""; }

.fa-map-o:before {
  content: ""; }

.fa-map:before {
  content: ""; }

.fa-commenting:before {
  content: ""; }

.fa-commenting-o:before {
  content: ""; }

.fa-houzz:before {
  content: ""; }

.fa-vimeo:before {
  content: ""; }

.fa-black-tie:before {
  content: ""; }

.fa-fonticons:before {
  content: ""; }

.fa-reddit-alien:before {
  content: ""; }

.fa-edge:before {
  content: ""; }

.fa-credit-card-alt:before {
  content: ""; }

.fa-codiepie:before {
  content: ""; }

.fa-modx:before {
  content: ""; }

.fa-fort-awesome:before {
  content: ""; }

.fa-usb:before {
  content: ""; }

.fa-product-hunt:before {
  content: ""; }

.fa-mixcloud:before {
  content: ""; }

.fa-scribd:before {
  content: ""; }

.fa-pause-circle:before {
  content: ""; }

.fa-pause-circle-o:before {
  content: ""; }

.fa-stop-circle:before {
  content: ""; }

.fa-stop-circle-o:before {
  content: ""; }

.fa-shopping-bag:before {
  content: ""; }

.fa-shopping-basket:before {
  content: ""; }

.fa-hashtag:before {
  content: ""; }

.fa-bluetooth:before {
  content: ""; }

.fa-bluetooth-b:before {
  content: ""; }

.fa-percent:before {
  content: ""; }

.container {
  position: relative;
  padding-left: 20px;
  padding-right: 20px;
  margin-left: auto;
  margin-right: auto; }
  @media (min-width: 0) and (max-width: 640px) {
    .container {
      padding-left: 20px;
      padding-right: 20px; } }

.link-1, header.main a {
  color: white;
  text-decoration: none; }

.extend_loader, .pager-load-more .ajax-progress .throbber, .loader span {
  background-repeat: no-repeat;
  background-position: 0 0;
  height: 15px;
  width: 15px;
  background-image: url("/tesla_theme/assets/img/loader.gif?20150303"); }
  @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
    .extend_loader, .pager-load-more .ajax-progress .throbber, .loader span {
      background-image: url("/tesla_theme/assets/img/loader2x.gif?20150303");
      background-size: 15px auto; } }
  #comments_block .extend_loader, #comments_block .pager-load-more .ajax-progress .throbber, .pager-load-more .ajax-progress #comments_block .throbber, #comments_block .loader span, .loader #comments_block span {
    background-image: url("/tesla_theme/assets/img/comment_loader.gif?"); }
    @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
      #comments_block .extend_loader, #comments_block .pager-load-more .ajax-progress .throbber, .pager-load-more .ajax-progress #comments_block .throbber, #comments_block .loader span, .loader #comments_block span {
        background-image: url("/tesla_theme/assets/img/comment_loader2x.gif?"); } }

.ext_show_more_gradient:after, .group-month:last-child .views-row-last .blog-wrapper:after {
  background-image: linear-gradient(to top, rgba(255, 255, 255, 0) 0%, white 80%);
  position: absolute;
  top: 0;
  left: 0;
  content: '';
  width: 100%;
  height: 100%; }
  @media (min-width: 0) and (max-width: 640px) {
    .ext_show_more_gradient:after, .group-month:last-child .views-row-last .blog-wrapper:after {
      background-image: linear-gradient(to top, rgba(255, 255, 255, 0) 30%, white 70%); } }

#comments_block .ext_show_more_gradient:after, #comments_block .group-month:last-child .views-row-last .blog-wrapper:after, .group-month:last-child .views-row-last #comments_block .blog-wrapper:after {
  background-image: linear-gradient(to top, rgba(242, 242, 242, 0.01) 0%, #f2f2f2 100%); }

@font-face {
  font-family: "tesla";
  font-style: normal;
  font-weight: normal;
  src: url("/tesla_theme/fonts/tesla/tesla.eot?#iefix") format("embedded-opentype"), url("/tesla_theme/fonts/tesla/tesla.woff") format("woff"), url("/tesla_theme/fonts/tesla/tesla.ttf") format("truetype"), url("/tesla_theme/fonts/tesla/tesla.svg#tesla") format("svg"); }

.icon-facebook, [id="follow_us"] nav a.fb:after, [id="follow_us"] nav a.icon-facebook:after, .service-links [class*="service-links-"].service-links-facebook:after {
  content: '\e603'; }

.icon-twitter, [id="follow_us"] nav a.twt:after, [id="follow_us"] nav a.icon-twitter:after, .service-links [class*="service-links-"].service-links-twitter:after {
  content: '\e602'; }

.icon-googleplus, [id="follow_us"] nav a.gplus:after, [id="follow_us"] nav a.icon-googleplus:after, .service-links [class*="service-links-"].service-links-google-plus:after {
  content: '\e601'; }

.icon-weibo, [id="follow_us"] nav a.weibo:after, [id="follow_us"] nav a.icon-weibo:after {
  content: '\e608'; }

.icon-wechat, [id="follow_us"] nav a.wechat:after, [id="follow_us"] nav a.icon-wechat:after {
  content: '\e609'; }

html.footer-fixed {
  min-height: 100%;
  height: 100%; }

html.page-has-full-footer {
  min-height: 0;
  height: auto; }

.footer-fixed body,
.footer-fixed #page,
.footer-fixed .content-constrain {
  min-height: 100%;
  height: 100%; }

.footer-fixed .full-footer body,
.footer-fixed .full-footer #page,
.footer-fixed .full-footer .content-constrain {
  min-height: 0;
  height: auto; }

body {
  position: relative; }

.pager-load-more_link {
  padding-bottom: 50px;
  padding-bottom: 3.125rem; }
  .pager-load-more_link.pager-load-more-empty {
    display: none; }
  .pager-load-more_link a {
    text-transform: uppercase;
    font-size: 12px;
    line-height: 20px;
    font-size: 0.75rem;
    line-height: 1.25rem;
    font-weight: 500;
    font-style: normal;
    font-family: "Gotham A", "Gotham B", "M Hei PRC W45", "M Hei HK W42", "M Hei HK W40", "HelveticaNeue-Regular", "Helvetica Neue Regular", "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: #c00; }

.pager-load-more li {
  position: relative; }

.pager-load-more .ajax-progress-throbber {
  position: absolute;
  top: 50%;
  margin-top: -7px;
  margin-top: -0.4375rem; }

.pager-load-more .ajax-progress .throbber {
  margin: 0 0 0 10px !important; }

.loader {
  text-align: center; }
  .loader span {
    display: inline-block; }

.hero-container {
  position: relative;
  overflow: hidden; }
  .hero-container .section-hero {
    float: left;
    width: 100%; }

.basic-two-column-page .left-column {
  width: 48.93617%;
  float: left;
  margin-right: 2.12766%; }

.basic-two-column-page .right-column {
  width: 48.93617%;
  float: right;
  margin-right: 0; }

@media (min-width: 960px) {
  .container {
    max-width: 1400px;
    width: auto; }
  main,
  header.main,
  footer.main,
  #system_messages {
    width: auto; } }

@media (min-width: 0) and (max-width: 640px) {
  .container {
    position: relative;
    padding-left: 20px;
    padding-right: 20px;
    margin-left: auto;
    margin-right: auto; } }
  @media (min-width: 0) and (max-width: 640px) and (min-width: 0) and (max-width: 640px) {
    .container {
      padding-left: 20px;
      padding-right: 20px; } }

@media (min-width: 0) and (max-width: 640px) {
  .basic-two-column-page .left-column,
  .basic-two-column-page .right-column {
    width: 100%;
    clear: both;
    float: none;
    display: block;
    margin-right: auto;
    margin-left: auto; } }

@media (min-width: 640px) {
  .container {
    max-width: 1060px;
    max-width: 66.25rem;
    width: auto;
    position: relative;
    margin-left: auto;
    margin-right: auto;
    padding-left: 20px;
    padding-right: 20px; }
  main,
  header.main,
  footer.main,
  #system_messages {
    min-width: 940px; }
  .show-tablet {
    display: block !important; }
  header.main {
    padding-bottom: 11px;
    padding-bottom: 0.6875rem; } }

@media (min-width: 640px) and (max-width: 960px) {
  .container {
    max-width: 940px;
    position: relative;
    margin-left: auto;
    margin-right: auto; } }

.sidebar {
  display: none;
  margin-top: 5px; }
  .two-columns .sidebar {
    margin-top: 4px; }
  .sidebar .wrapper
> .panel-pane {
    margin-bottom: 45px; }
    .sidebar .wrapper
> .panel-pane:last-child {
      margin-bottom: 0; }
  .sidebar .pane-title,
  .sidebar .section-subtitle {
    margin-bottom: 31px;
    margin-bottom: 1.9375rem;
    padding-bottom: 10px;
    padding-bottom: 0.625rem;
    font-size: 18px;
    line-height: 20px;
    font-size: 1.125rem;
    line-height: 1.25rem;
    font-weight: 400;
    color: #999;
    border-bottom: 1px solid #ccc; }
  .sidebar .post {
    padding-bottom: 20px;
    padding-bottom: 1.25rem;
    margin-bottom: 30px;
    margin-bottom: 1.875rem;
    border-bottom: 1px solid #e5e5e5;
    overflow: hidden; }
    .sidebar .post:last-child {
      margin-bottom: 0;
      padding-bottom: 0;
      border: none; }
  .sidebar .post-link {
    display: block;
    font-size: 15px;
    line-height: 16px;
    font-size: 0.9375rem;
    line-height: 1rem;
    color: black;
    font-weight: 500;
    margin-bottom: 6px; }
  .sidebar .post-media {
    float: right;
    width: 110px;
    margin-left: 5px;
    margin-left: 0.3125rem; }
  .sidebar .post-info, .sidebar [id="article_content"] .submitted, [id="article_content"] .sidebar .submitted {
    color: #999;
    margin: 0; }
  @media (min-width: 0) and (max-width: 640px) {
    .sidebar {
      display: none; } }
  .sidebar .post-media {
    margin-left: 5px; }

@media (min-width: 640px) {
  .sidebar {
    display: block; } }

header.main {
  padding: 16px 0 13px;
  padding: 1rem 0 0.8125rem;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1;
  position: relative;
  background-image: -webkit-linear-gradient( top , #454545 0%, #333 100%);
  background-image: linear-gradient(to bottom, #454545 0%, #333 100%);
  -webkit-box-shadow: 0 0 1px #000;
  -moz-box-shadow: 0 0 1px #000;
  box-shadow: 0 0 1px #000; }
  .header-default header.main {
    background-image: -webkit-linear-gradient( top , #454545 0%, #333 100%);
    background-image: linear-gradient(to bottom, #454545 0%, #333 100%);
    -webkit-box-shadow: 0 0 1px #000;
    -moz-box-shadow: 0 0 1px #000;
    box-shadow: 0 0 1px #000; }
  .header-red header.main {
    background-image: -webkit-linear-gradient( top , #e00 0%, #c00 100%);
    background-image: linear-gradient(to bottom, #e00 0%, #c00 100%);
    -webkit-box-shadow: 0 0 1px #666;
    -moz-box-shadow: 0 0 1px #666;
    box-shadow: 0 0 1px #666; }
  .header-transparent header.main {
    -webkit-box-shadow: 0 0 0 transparent;
    -moz-box-shadow: 0 0 0 transparent;
    box-shadow: 0 0 0 transparent;
    background-color: transparent;
    background-image: none;
    position: absolute;
    filter: progid:DXImageTransform.Microsoft.gradient(enabled=false) !important;
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(enabled=false)" !important; }
  .header-semitransparent header.main.with-masquerade,
  .header-transparent header.main.with-masquerade {
    top: 40px; }
  .header-semitransparent header.main {
    background-image: -webkit-linear-gradient( bottom , rgba(69, 69, 69, 0.75), rgba(51, 51, 51, 0.75));
    background-image: linear-gradient(to top, rgba(69, 69, 69, 0.75), rgba(51, 51, 51, 0.75));
    position: absolute;
    max-width: 1438px;
    margin: auto;
    overflow: hidden; }
    @media (min-width: 0) and (max-width: 640px) {
      .header-semitransparent header.main {
        overflow: visible; } }
  .page-findus header.main {
    max-width: 100%; }
  header.main .container {
    position: relative; }
  header.main .active,
  header.main .active-trail {
    color: #999; }
  header.main .nav-selected .nav-link {
    color: #999; }

[id="logo-link"] .logo {
  width: 100px;
  width: 6.25rem;
  height: 13px;
  height: 0.8125rem;
  left: 20px;
  left: 1.25rem;
  top: 2px;
  top: 0.125rem;
  position: absolute;
  text-indent: -999em;
  display: block;
  overflow: hidden;
  background: transparent url("/tesla_theme/assets/img/logo.svg?1") no-repeat center;
  background-size: 100px 13px; }
  .lt-ie9 [id="logo-link"] .logo,
  .no-svg [id="logo-link"] .logo {
    background: transparent url("/tesla_theme/assets/img/logo.png") no-repeat center; }

[id="masquerade"] {
  padding: 10px 0;
  padding: 0.625rem 0;
  height: 40px;
  background-color: #ccc; }
  [id="masquerade"]::after {
    clear: both;
    content: "";
    display: table; }
  [id="masquerade"] .piped {
    border-right: solid 1px #fff; }
  #page-homepage [id="masquerade"] {
    position: fixed;
    width: 100%;
    z-index: 10; }
  [id="masquerade"] .links {
    float: right; }
    [id="masquerade"] .links li {
      list-style-type: none;
      white-space: nowrap;
      float: left;
      padding-left: 4px;
      padding-right: 4px; }
      [id="masquerade"] .links li:first-child {
        padding-left: 0; }
      [id="masquerade"] .links li:last-child {
        padding-opposite-position(left): 0; }
    [id="masquerade"] .links li {
      margin-left: 0;
      padding: 0 20px;
      padding: 0 1.25rem; }
      [id="masquerade"] .links li .nav-link {
        font-size: 14px;
        line-height: 20px;
        font-size: 0.875rem;
        line-height: 1.25rem;
        color: #fff; }
  @media (min-width: 0) and (max-width: 640px) {
    [id="masquerade"] .masq-status {
      display: none; } }

[id="main-nav"] {
  margin-left: 150px;
  margin-left: 9.375rem;
  margin-right: auto;
  width: auto;
  text-align: left; }
  .i18n-en [id="main-nav"],
  .i18n-fr_CA [id="main-nav"],
  .i18n-en_CA [id="main-nav"] {
    margin-right: 310px;
    margin-right: 19.375rem; }
  .i18n-it [id="main-nav"] {
    margin-right: 250px;
    margin-right: 15.625rem; }
  .i18n-fr [id="main-nav"] {
    margin-right: 300px;
    margin-right: 18.75rem; }
  .i18n-no [id="main-nav"] {
    margin-right: 225px;
    margin-right: 14.0625rem; }
  .i18n-sv_SE [id="main-nav"] {
    margin-right: 245px;
    margin-right: 15.3125rem; }
  .i18n-fi_FI [id="main-nav"] {
    margin-right: 205px;
    margin-right: 12.8125rem; }
  .i18n-da [id="main-nav"] {
    margin-right: 235px;
    margin-right: 14.6875rem; }
  .i18n-de [id="main-nav"] {
    margin-right: 260px;
    margin-right: 16.25rem; }
  .i18n-de_AT [id="main-nav"] {
    margin-right: 255px;
    margin-right: 15.9375rem; }
  .i18n-nl [id="main-nav"] {
    margin-right: 305px;
    margin-right: 19.0625rem; }
  .i18n-en_EU [id="main-nav"] {
    margin-right: 150px;
    margin-right: 9.375rem; }
  .i18n-en_GB [id="main-nav"] {
    margin-right: 230px;
    margin-right: 14.375rem; }
  .i18n-nl_BE [id="main-nav"] {
    margin-right: 310px;
    margin-right: 19.375rem; }
  .i18n-fr_BE [id="main-nav"] {
    margin-right: 210px;
    margin-right: 13.125rem; }
  .i18n-de_CH [id="main-nav"] {
    margin-right: 255px;
    margin-right: 15.9375rem; }
  .i18n-fr_CH [id="main-nav"] {
    margin-right: 200px;
    margin-right: 12.5rem; }
  .i18n-it_CH [id="main-nav"] {
    margin-right: 250px;
    margin-right: 15.625rem; }
  .i18n-zh_CN [id="main-nav"] {
    margin-right: 280px;
    margin-right: 17.5rem; }
  .i18n-ja_JP [id="main-nav"] {
    margin-right: 280px;
    margin-right: 17.5rem; }
  .i18n-en_HK [id="main-nav"] {
    margin-right: 140px;
    margin-right: 8.75rem; }
  .i18n-zh_HK [id="main-nav"] {
    margin-right: 140px;
    margin-right: 8.75rem; }
  .i18n-en_MO [id="main-nav"] {
    margin-right: 140px;
    margin-right: 8.75rem; }
  .i18n-zh_MO [id="main-nav"] {
    margin-right: 140px;
    margin-right: 8.75rem; }
  .i18n-en_AU [id="main-nav"] {
    margin-right: 150px;
    margin-right: 9.375rem; }
  @media (min-width: 0) and (max-width: 640px) {
    [id="main-nav"] {
      margin-left: 0;
      width: auto; }
      .i18n-en [id="main-nav"],
      .i18n-fr_CA [id="main-nav"],
      .i18n-en_CA [id="main-nav"],
      .i18n-it [id="main-nav"],
      .i18n-fr [id="main-nav"],
      .i18n-no [id="main-nav"],
      .i18n-sv_SE [id="main-nav"],
      .i18n-fi_FI [id="main-nav"],
      .i18n-da [id="main-nav"],
      .i18n-de [id="main-nav"],
      .i18n-de_AT [id="main-nav"],
      .i18n-nl [id="main-nav"],
      .i18n-en_EU [id="main-nav"],
      .i18n-en_GB [id="main-nav"],
      .i18n-nl_BE [id="main-nav"],
      .i18n-fr_BE [id="main-nav"],
      .i18n-de_CH [id="main-nav"],
      .i18n-fr_CH [id="main-nav"],
      .i18n-it_CH [id="main-nav"],
      .i18n-zh_CN [id="main-nav"],
      .i18n-ja_JP [id="main-nav"],
      .i18n-en_HK [id="main-nav"],
      .i18n-zh_HK [id="main-nav"],
      .i18n-en_MO [id="main-nav"],
      .i18n-zh_MO [id="main-nav"],
      .i18n-en_AU [id="main-nav"] {
        margin-right: auto; } }
  [id="main-nav"] .nav-block {
    display: inline-block; }
    [id="main-nav"] .nav-block li {
      margin: 0 10px;
      margin: 0 0.625rem; }
      [id="main-nav"] .nav-block li:first-child {
        margin-left: 0; }
      [id="main-nav"] .nav-block li:last-child {
        margin-right: 0; }
    [id="main-nav"] .nav-block a {
      font-size: 13px;
      line-height: 18px;
      font-size: 0.8125rem;
      line-height: 1.125rem;
      display: block; }
    [id="main-nav"] .nav-block .nav-block {
      display: none; }

[id="sub-nav"] {
  position: absolute;
  right: 20px;
  right: 1.25rem; }
  [id="sub-nav"] .nav-shop-link {
    display: none; }
    .i18n-en_CA [id="sub-nav"] .nav-shop-link,
    .i18n-fr_CA [id="sub-nav"] .nav-shop-link,
    .i18n-en [id="sub-nav"] .nav-shop-link {
      display: block; }
  [id="sub-nav"] .nav-ecommerce-link {
    display: none; }
    .i18n-ja_JP [id="sub-nav"] .nav-ecommerce-link {
      display: block; }
  [id="sub-nav"] .nav-block {
    display: inline-block;
    float: right; }
    [id="sub-nav"] .nav-block li {
      margin-left: 18px;
      margin-left: 1.125rem; }
      [id="sub-nav"] .nav-block li.first {
        margin-left: 0; }
    [id="sub-nav"] .nav-block a {
      opacity: .8;
      -webkit-transition: opacity 0.15s ease-in-out;
      -moz-transition: opacity 0.15s ease-in-out;
      -o-transition: opacity 0.15s ease-in-out;
      transition: opacity 0.15s ease-in-out;
      font-size: 11px;
      line-height: 18px;
      font-size: 0.6875rem;
      line-height: 1.125rem;
      display: block; }
      [id="sub-nav"] .nav-block a:hover {
        opacity: 1;
        -webkit-transition: opacity 0.15s ease-in-out;
        -moz-transition: opacity 0.15s ease-in-out;
        -o-transition: opacity 0.15s ease-in-out;
        transition: opacity 0.15s ease-in-out; }
      .i18n-zh_CN [id="sub-nav"] .nav-block a,
      .i18n-ja_JP [id="sub-nav"] .nav-block a,
      .i18n-zh_HK [id="sub-nav"] .nav-block a,
      .i18n-zh_MO [id="sub-nav"] .nav-block a {
        font-size: 12px;
        line-height: 18px;
        font-size: 0.75rem;
        line-height: 1.125rem; }
      @media (min-width: 0) and (max-width: 640px) {
        [id="sub-nav"] .nav-block a {
          font-size: 14px;
          line-height: 19px;
          font-size: 0.875rem;
          line-height: 1.1875rem; } }
    [id="sub-nav"] .nav-block .nav-block {
      display: none; }
  [id="sub-nav"] .pane-content::after {
    clear: both;
    content: "";
    display: table; }

[id="hamburger"] {
  display: none; }

.nav-menu .nav-block li {
  float: left;
  font-style: normal;
  font-family: "Gotham A", "Gotham B", "M Hei PRC W45", "M Hei HK W42", "M Hei HK W40", "HelveticaNeue-Regular", "Helvetica Neue Regular", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 500; }

.nav-menu a {
  text-transform: uppercase; }

@media (min-width: 0) and (max-width: 640px) {
  body {
    overflow-x: hidden;
    width: 100%;
    min-width: 20em; }
  .outer {
    overflow: hidden;
    width: 100%;
    background-color: #333; }
  [id="main-nav"],
  [id="sub-nav"] {
    width: 100%;
    position: static; }
    [id="main-nav"] .nav-block,
    [id="sub-nav"] .nav-block {
      display: block;
      float: none; }
      [id="main-nav"] .nav-block li,
      [id="sub-nav"] .nav-block li {
        margin-bottom: 10px;
        margin-bottom: 0.625rem;
        margin-left: 20px;
        margin-left: 1.25rem; }
        [id="main-nav"] .nav-block li.first,
        [id="sub-nav"] .nav-block li.first {
          margin-left: 20px;
          margin-left: 1.25rem; }
      [id="main-nav"] .nav-block a,
      [id="sub-nav"] .nav-block a {
        -webkit-text-size-adjust: 100%; }
      [id="main-nav"] .nav-block .nav-block,
      [id="sub-nav"] .nav-block .nav-block {
        display: block; }
  [id="logo-link"] .logo {
    top: -2px;
    top: -0.125rem;
    left: 0;
    position: relative; }
  .mobile-nav-close {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: -webkit-calc(100% - 60px);
    width: calc(100% - 60px);
    z-index: 1; }
  .offsite {
    -webkit-box-shadow: 1px 0 5px black;
    -moz-box-shadow: 1px 0 5px black;
    box-shadow: 1px 0 5px black;
    position: relative;
    width: 100%; }
    .csstransforms3d.csstransitions .offsite {
      left: 0;
      -webkit-transform: translate3d(0, 0, 0);
      -moz-transform: translate3d(0, 0, 0);
      -ms-transform: translate3d(0, 0, 0);
      -o-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
      -webkit-backface-visibility: hidden;
      backface-visibility: hidden;
      -webkit-transition: -webkit-transform 500ms ease-in;
      -moz-transition: -moz-transform 500ms ease-in;
      transition: transform 500ms ease-in; }
    .csstransforms3d.csstransitions.modal-open-html .offsite {
      -webkit-transform: translate3d(none);
      -moz-transform: translate3d(none);
      -ms-transform: translate3d(none);
      -o-transform: translate3d(none);
      transform: translate3d(none);
      -webkit-backface-visibility: inherit;
      backface-visibility: inherit; }
    .js-nav .offsite {
      left: -100%;
      z-index: 2; }
    .js-nav.csstransforms3d.csstransitions .offsite {
      -webkit-transform: translate3d(calc(-100% + 60px), 0, 0) scale3d(1, 1, 1);
      -moz-transform: translate3d(calc(-100% + 60px), 0, 0) scale3d(1, 1, 1);
      -ms-transform: translate3d(calc(-100% + 60px), 0, 0) scale3d(1, 1, 1);
      -o-transform: translate3d(calc(-100% + 60px), 0, 0) scale3d(1, 1, 1);
      transform: translate3d(calc(-100% + 60px), 0, 0) scale3d(1, 1, 1); }
  .mobile_wrapper {
    margin-top: -13px;
    margin-top: -0.8125rem;
    position: absolute;
    z-index: 200; }
    .mobile_wrapper:not(:target) {
      z-index: 1;
      height: 0; }
    .js .mobile_wrapper {
      left: 0;
      width: 100%;
      height: 100%; }
    .csstransforms3d.csstransitions .mobile_wrapper {
      right: 0;
      -webkit-transform: translate3d(100%, 0, 0);
      -moz-transform: translate3d(100%, 0, 0);
      -ms-transform: translate3d(100%, 0, 0);
      -o-transform: translate3d(100%, 0, 0);
      transform: translate3d(100%, 0, 0);
      -webkit-backface-visibility: hidden;
      backface-visibility: hidden; }
  .mobile_block {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: -moz-box;
    display: flex;
    -webkit-flex-flow: column wrap;
    flex-flow: column wrap;
    -webkit-transform: translate3d(20px, 0, 0);
    -moz-transform: translate3d(20px, 0, 0);
    -ms-transform: translate3d(20px, 0, 0);
    -o-transform: translate3d(20px, 0, 0);
    transform: translate3d(20px, 0, 0);
    position: relative;
    z-index: 2; }
  [id="main-nav"] {
    -webkit-box-ordinal-group: 1;
    -moz-box-ordinal-group: 1;
    box-ordinal-group: 1;
    -webkit-order: 1;
    -moz-order: 1;
    order: 1;
    -ms-flex-order: 1; }
  [id="sub-nav"] {
    -webkit-box-ordinal-group: 2;
    -moz-box-ordinal-group: 2;
    box-ordinal-group: 2;
    -webkit-order: 2;
    -moz-order: 2;
    order: 2;
    -ms-flex-order: 2; }
  .nav-block li {
    text-transform: uppercase;
    font-size: 15px;
    line-height: 16px;
    font-size: 0.9375rem;
    line-height: 1rem;
    font-weight: 500;
    margin-bottom: 10px; }
    .nav-menu .nav-block li {
      float: none; }
  .nav-block a {
    font-size: 14px;
    line-height: 19px;
    font-size: 0.875rem;
    line-height: 1.1875rem;
    display: block; }
  .nav-block .nav-block {
    padding: 11px 0 11px 11px; }
    .nav-block .nav-block li {
      text-transform: none;
      font-weight: 400;
      margin-bottom: 5px; }
      .nav-block .nav-block li a {
        color: #ccc; }
  [id="hamburger"] {
    width: 22px;
    width: 1.375rem;
    height: 19px;
    height: 1.1875rem;
    top: -5px;
    top: -0.3125rem;
    right: 20px;
    right: 1.25rem;
    display: block;
    position: absolute;
    overflow: hidden;
    text-indent: 9999em; }
    [id="hamburger"]:after {
      font-family: "tesla";
      font-weight: normal;
      font-style: normal;
      text-indent: 0;
      speak: none;
      line-height: 1;
      content: '\e600';
      text-indent: 0;
      position: absolute;
      left: 0;
      top: -3px;
      font-size: 23px;
      font-size: 1.4375rem; } }

.popover {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1060;
  display: none;
  max-width: 276px;
  width: 215px;
  padding: 1px;
  font-size: 14px;
  font-weight: normal;
  line-height: 1.42857;
  text-align: left;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid #ccc;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 6px;
  -webkit-box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.8);
  -moz-box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.8);
  box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.8);
  white-space: normal; }
  .popover.top {
    margin-top: -10px; }
  .popover.right {
    margin-left: 10px; }
  .popover.bottom {
    margin-top: 10px; }
  .popover.left {
    margin-left: -10px; }

.popover-title {
  margin: 0;
  padding: 8px 14px;
  font-size: 14px;
  background-color: #f7f7f7;
  border-bottom: 1px solid #ebebeb;
  border-radius: 5px 5px 0 0; }

.popover-content {
  padding: 9px 14px; }

.popover > .arrow, .popover > .arrow:after {
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  border-color: transparent;
  border-style: solid; }

.popover > .arrow {
  border-width: 11px; }

.popover > .arrow:after {
  border-width: 10px;
  content: ""; }

.popover.top > .arrow {
  left: 50%;
  margin-left: -11px;
  border-bottom-width: 0;
  border-top-color: #999999;
  border-top-color: rgba(13, 13, 13, 0.2);
  bottom: -11px; }
  .popover.top > .arrow:after {
    content: " ";
    bottom: 1px;
    margin-left: -10px;
    border-bottom-width: 0;
    border-top-color: #fff; }

.popover.right > .arrow {
  top: 50%;
  left: -11px;
  margin-top: -11px;
  border-left-width: 0;
  border-right-color: #999999;
  border-right-color: rgba(13, 13, 13, 0.2); }
  .popover.right > .arrow:after {
    content: " ";
    left: 1px;
    bottom: -10px;
    border-left-width: 0;
    border-right-color: #fff; }

.popover.bottom > .arrow {
  left: 50%;
  margin-left: -11px;
  border-top-width: 0;
  border-bottom-color: #999999;
  border-bottom-color: rgba(13, 13, 13, 0.2);
  top: -11px; }
  .popover.bottom > .arrow:after {
    content: " ";
    top: 1px;
    margin-left: -10px;
    border-top-width: 0;
    border-bottom-color: #fff; }

.popover.left > .arrow {
  top: 50%;
  right: -11px;
  margin-top: -11px;
  border-right-width: 0;
  border-left-color: #999999;
  border-left-color: rgba(13, 13, 13, 0.2); }
  .popover.left > .arrow:after {
    content: " ";
    right: 1px;
    border-right-width: 0;
    border-left-color: #fff;
    bottom: -10px; }

.pane-skinny-footer {
  font-style: normal;
  font-family: "HeiS ASC Simplified Chinese", "HeiS ASC Simplified Chinese_n5", "HeiT ASC Traditional Chinese", "HelveticaNeue-Regular", "Helvetica Neue Regular", "Helvetica Neue", Helvetica, Arial, sans-serif;
  padding-bottom: 12px;
  padding-bottom: 0.75rem;
  margin-top: -34px;
  margin-top: -2.125rem;
  width: 100%;
  -webkit-text-size-adjust: 100%;
  max-height: 1000000000000px; }
  @media (min-width: 0) and (max-width: 640px) {
    .pane-skinny-footer {
      font-style: normal;
      font-family: "Gotham A", "Gotham B", "M Hei PRC W45", "M Hei HK W42", "M Hei HK W40", "HelveticaNeue-Regular", "Helvetica Neue Regular", "Helvetica Neue", Helvetica, Arial, sans-serif;
      background-color: #333;
      padding-bottom: 0;
      margin-top: 0; } }

footer {
  clear: both; }
  footer p,
  footer .footer-links-column {
    font-size: 13px;
    font-size: 0.8125rem; }
  footer .navigation {
    padding: 20px 0;
    padding: 1.25rem 0;
    margin-bottom: 20px;
    margin-bottom: 1.25rem;
    border-bottom: 1px solid #666;
    overflow: hidden; }
  footer .footer-links-column {
    width: 48.93617%;
    float: left;
    margin-right: 2.12766%;
    color: #ccc; }
    footer .footer-links-column ul {
      margin-top: 25px;
      margin-top: 1.5625rem; }
      footer .footer-links-column ul:first-child {
        margin-top: 0; }
    footer .footer-links-column li {
      margin-bottom: 5px;
      margin-bottom: 0.3125rem; }
    footer .footer-links-column + .footer-links-column {
      float: right;
      margin-right: 0; }
    footer .footer-links-column a {
      color: #ccc; }
  footer .footer-copy {
    text-align: left; }
    footer .footer-copy a {
      color: #666; }
      @media (min-width: 0) and (max-width: 640px) {
        footer .footer-copy a {
          color: #ccc; } }
  footer .colophon {
    clear: both;
    color: #666;
    text-align: left;
    margin: 0; }
    .pane-full-footer footer .colophon {
      color: #ccc; }
      .pane-full-footer footer .colophon a {
        color: #ccc; }
    @media (min-width: 0) and (max-width: 640px) {
      footer .colophon {
        color: #ccc;
        text-align: center; }
        .superregion-apac footer .colophon {
          text-align: center; } }
  footer .localization-modal a {
    color: #fff; }

.not-logged-in footer .link-signout {
  display: none; }

[id="follow_us"] {
  text-align: center;
  margin-bottom: 0; }
  [id="follow_us"] nav {
    display: inline-block; }
    [id="follow_us"] nav a {
      margin: 0 3px;
      margin: 0 0.1875rem;
      position: relative;
      float: left;
      color: #ccc; }
      [id="follow_us"] nav a:after {
        font-family: "tesla";
        font-weight: normal;
        font-style: normal;
        text-indent: 0;
        speak: none;
        line-height: 1;
        font-size: 31px;
        font-size: 1.9375rem; }
        .i18n-zh_CN [id="follow_us"] nav a:after {
          font-size: 27px;
          font-size: 1.6875rem; }
    [id="follow_us"] nav .icon-wechat .popover-content, [id="follow_us"] nav a.wechat:after .popover-content, [id="follow_us"] nav a.icon-wechat:after .popover-content {
      padding: 0; }
  [id="follow_us"] .popover {
    width: 215px;
    top: -225px;
    left: -60px; }

.pane-full-footer .vertical-separator,
.pane-skinny-footer .vertical-separator {
  border-left: 1px solid rgba(204, 204, 204, 0.5);
  padding-left: 8px;
  padding-left: 0.5rem;
  margin-left: 4px;
  margin-left: 0.25rem; }

.footer-fixed .pane-skinny-footer {
  position: absolute;
  left: 0;
  bottom: 0; }
  @media (min-width: 0) and (max-width: 640px) {
    .footer-fixed .pane-skinny-footer {
      position: static; } }

.pane-skinny-footer .navigation,
.pane-skinny-footer .localization-modal .modal-link {
  display: none; }

.footer-dark .pane-skinny-footer .vertical-separator {
  border-left-color: rgba(255, 255, 255, 0.5); }

.pane-full-footer {
  padding: 30px 30px 32px 30px;
  padding: 1.875rem 1.875rem 2rem 1.875rem;
  min-width: 940px;
  min-width: 58.75rem;
  background-color: #333;
  overflow: hidden;
  position: relative; }
  .pane-full-footer .wrapper {
    padding: 0 19px;
    padding: 0 1.1875rem; }
  .pane-full-footer footer .footer-copy {
    position: absolute;
    left: 38px;
    left: 2.35rem;
    bottom: 14px;
    bottom: 0.875rem; }
  .pane-full-footer:before {
    -webkit-box-shadow: 0 10px 10px 0 rgba(0, 0, 0, 0.25);
    -moz-box-shadow: 0 10px 10px 0 rgba(0, 0, 0, 0.25);
    box-shadow: 0 10px 10px 0 rgba(0, 0, 0, 0.25);
    content: " ";
    position: absolute;
    top: -10px;
    left: 0;
    width: 100%;
    height: 10px;
    z-index: 1; }
  .pane-full-footer .locations-map-images {
    margin-top: 20px;
    margin-top: 1.25rem; }
  .pane-full-footer .locations {
    text-align: left;
    font-size: 13px;
    font-size: 0.8125rem;
    width: 65.95745%;
    float: left;
    margin-right: 2.12766%;
    color: #ccc; }
    .pane-full-footer .locations a {
      color: #ccc;
      white-space: nowrap;
      display: block;
      margin-bottom: 10px;
      margin-bottom: 0.625rem; }
    .pane-full-footer .locations nav {
      margin-bottom: 14px;
      margin-bottom: 0.875rem; }
    .pane-full-footer .locations .location-img-wrapper {
      float: left;
      padding-right: 10px;
      padding-right: 0.625rem; }
      .pane-full-footer .locations .location-img-wrapper.last {
        padding-right: 0; }
      .pane-full-footer .locations .location-img-wrapper a {
        text-overflow: ellipsis;
        overflow: hidden; }
  .pane-full-footer .navigation {
    width: 31.91489%;
    float: right;
    margin-right: 0;
    padding-top: 18px;
    padding-top: 1.125rem;
    border-left: 1px solid #4d4d4d;
    border-bottom: 0 none;
    margin-bottom: 0; }
  .pane-full-footer .social_locale {
    border-top: 1px solid #4d4d4d;
    padding-top: 20px;
    padding-top: 1.25rem;
    margin-top: 20px;
    margin-top: 1.25rem;
    clear: both; }
  .pane-full-footer .localization {
    position: relative; }

@media (min-width: 0) and (max-width: 640px) {
  html {
    background-color: #333; }
  .pane-skinny-footer,
  .pane-full-footer {
    -webkit-box-shadow: 0 5px 5px #000 inset;
    -moz-box-shadow: 0 5px 5px #000 inset;
    box-shadow: 0 5px 5px #000 inset;
    background-color: #333; }
    .pane-skinny-footer .vertical-separator,
    .pane-full-footer .vertical-separator {
      border-left: 0;
      margin: 0;
      padding: 0; }
  .pane-full-footer {
    min-width: 0;
    padding-left: 0;
    padding-right: 0; }
    .pane-full-footer footer .footer-copy {
      width: 100%;
      position: static;
      text-align: center; }
    .pane-full-footer .wrapper {
      padding: 0; }
    .pane-full-footer .locations,
    .pane-full-footer .navigation {
      display: block;
      float: none;
      width: 100%;
      border: 0;
      padding: 0; }
    .pane-full-footer .maps,
    .pane-full-footer [id="follow_us"] nav {
      display: none; }
  .footer-copy {
    width: 75%;
    margin: auto;
    display: block; }
    .footer-copy a {
      display: block; }
  .pane-skinny-footer .navigation {
    display: block; }
  .pane-skinny-footer .localization-modal .modal-link {
    display: inline-block; } }

#system_messages {
  background-color: #fafafa; }
  #system_messages ul.tabs::after {
    clear: both;
    content: "";
    display: table; }
  #system_messages ul.tabs li {
    float: left;
    margin-right: 20px;
    padding: 10px 0;
    display: inline-block; }
  #system_messages ul.tabs a {
    color: #333; }
  #system_messages .panel-pane {
    font-size: 14px;
    font-size: 0.875rem; }

#second-nav {
  display: inline-block;
  vertical-align: top;
  font-style: normal;
  font-family: "Gotham A", "Gotham B", "M Hei PRC W45", "M Hei HK W42", "M Hei HK W40", "HelveticaNeue-Regular", "Helvetica Neue Regular", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 400; }
  #second-nav .nav-block {
    margin-top: 3px; }
    #second-nav .nav-block::after {
      clear: both;
      content: "";
      display: table; }
    #second-nav .nav-block li {
      list-style-image: none;
      list-style-type: none;
      float: left;
      margin-right: 15px; }
      #second-nav .nav-block li a {
        font-size: 13px;
        line-height: 20px;
        font-size: 0.8125rem;
        line-height: 1.25rem;
        color: #333; }
        #second-nav .nav-block li a:hover {
          color: #c00; }
      #second-nav .nav-block li.nav-selected .nav-link {
        opacity: .5; }
      #second-nav .nav-block li:last-child, #second-nav .nav-block li.last {
        margin-right: 0; }

.section-sub-nav {
  position: relative; }
  .section-sub-nav::after {
    clear: both;
    content: "";
    display: table; }
  .section-sub-nav .container {
    position: relative; }
    .page-models-preowned .section-sub-nav .container .sub-nav {
      margin-right: 20px;
      margin-right: 1.25rem; }
  .header-transparent .section-sub-nav,
  .header-semitransparent .section-sub-nav {
    margin-top: 98px;
    margin-top: 6.125rem; }
  .alternative .section-sub-nav .section-title, .section-sub-nav.alternative .section-title {
    border-bottom: 1px solid rgba(255, 255, 255, 0.5);
    color: #fff; }
    .alternative .section-sub-nav .section-title a, .section-sub-nav.alternative .section-title a {
      color: #fff; }
  .alternative .section-sub-nav .sub-nav a, .section-sub-nav.alternative .sub-nav a {
    color: #fff; }
  .no-keyline .section-sub-nav .section-title, .section-sub-nav.no-keyline .section-title {
    border-bottom: none;
    margin-bottom: 0; }
  .section-sub-nav .section-title {
    font-weight: 300;
    font-style: normal;
    font-family: "Gotham A", "Gotham B", "M Hei PRC W45", "M Hei HK W42", "M Hei HK W40", "HelveticaNeue-Regular", "Helvetica Neue Regular", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 30px;
    font-size: 1.875rem;
    margin-bottom: 35px;
    margin-bottom: 2.1875rem;
    padding-bottom: 25px;
    padding-bottom: 1.5625rem;
    padding-top: 0;
    position: relative;
    top: 0;
    border-bottom: 1px solid #e5e5e5;
    color: #000; }
    @media (min-width: 0) and (max-width: 640px) {
      .section-sub-nav .section-title {
        font-size: 24px;
        font-size: 1.5rem;
        border-bottom: 0; } }
  .section-sub-nav .sub-nav {
    top: 9px;
    top: 0.5625rem;
    right: 20px;
    right: 1.25rem;
    position: absolute;
    clear: both; }
    .section-sub-nav .sub-nav .nav-item {
      display: block;
      float: left;
      margin: 0 0 0 20px;
      margin: 0 0 0 1.25rem; }
      .section-sub-nav .sub-nav .nav-item:first-child {
        margin-left: 0; }
    .section-sub-nav .sub-nav .nav-selected .nav-link {
      opacity: .5; }
    .section-sub-nav .sub-nav .nav-selected .nav-item {
      display: block;
      float: left;
      margin: 0 0 0 20px;
      margin: 0 0 0 1.25rem; }
      .section-sub-nav .sub-nav .nav-selected .nav-item:first-child {
        margin-left: 0; }
    .section-sub-nav .sub-nav .nav-link {
      font-style: normal;
      font-family: "Gotham A", "Gotham B", "M Hei PRC W45", "M Hei HK W42", "M Hei HK W40", "HelveticaNeue-Regular", "Helvetica Neue Regular", "Helvetica Neue", Helvetica, Arial, sans-serif;
      font-size: 13px;
      font-size: 0.8125rem;
      color: #333; }
    .section-sub-nav .sub-nav .btn-order {
      color: #fff;
      font-size: 8px;
      font-size: 0.5rem; }
      .i18n-zh_CN .section-sub-nav .sub-nav .btn-order {
        font-size: 13px;
        font-size: 0.8125rem;
        position: relative;
        top: -2px;
        padding: 6px 12px 5px;
        padding: 0.375rem 0.75rem 0.3125rem; }

.nav-left {
  float: left; }

.nav-right {
  float: right; }

.nav-centered {
  text-align: center;
  overflow: hidden;
  display: block;
  margin: auto; }

@media (min-width: 0) and (max-width: 640px) {
  .section-sub-nav .sub-nav {
    display: none; } }

@media (min-width: 640px) {
  .nav_search {
    width: 65.95745%;
    float: right;
    margin-right: 0;
    text-align: right;
    margin-top: 5px;
    margin-bottom: 17px; }
    .expanded-search .nav_search {
      float: right;
      text-align: right;
      width: auto; } }

main .nav_search {
  display: none; }
  @media (min-width: 640px) {
    main .nav_search {
      display: inline; }
      main .nav_search .nav-left {
        float: left; }
      main .nav_search .nav-right {
        float: right; } }

.nav-sticky {
  width: 100%;
  max-width: 1440px;
  position: absolute;
  top: -1px; }
  .nav-sticky.nav-animate {
    -webkit-transition: top 0.5s ease-in-out;
    -moz-transition: top 0.5s ease-in-out;
    -o-transition: top 0.5s ease-in-out;
    transition: top 0.5s ease-in-out; }
    .nav-sticky.nav-animate.is-stuck, .nav-sticky.nav-animate.nav-animate-away {
      -webkit-transition: top 0.5s ease-in-out;
      -moz-transition: top 0.5s ease-in-out;
      -o-transition: top 0.5s ease-in-out;
      transition: top 0.5s ease-in-out; }
  .nav-sticky.is-stuck, .nav-sticky.nav-animate-away {
    width: 100%;
    max-width: 1440px;
    position: fixed;
    z-index: 10; }
  .nav-sticky.nav-animate-away {
    top: -100px; }

.nav-pill {
  text-align: center; }
  .nav-pill .nav-block {
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    border-radius: 100px;
    border: 1px solid #ddd;
    overflow: hidden;
    display: inline-block;
    margin-bottom: 16px;
    margin-bottom: 1rem; }
    .lt-ie9 .nav-pill .nav-block {
      border: 1px solid #ddd; }
  .nav-pill .nav-link {
    width: 175px;
    width: 10.9375rem;
    padding: 16px 0;
    padding: 1rem 0;
    font-size: 18px;
    font-size: 1.125rem;
    font-style: normal;
    font-family: "Gotham A", "Gotham B", "M Hei PRC W45", "M Hei HK W42", "M Hei HK W40", "HelveticaNeue-Regular", "Helvetica Neue Regular", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: 100;
    display: block;
    color: #000;
    cursor: pointer; }
  .nav-pill .nav-selected {
    background-color: #f2f2f2;
    color: #000; }
  .nav-pill .nav-item {
    margin: 0;
    border-left: 1px solid #ccc; }
    .nav-pill .nav-item:first-child {
      border-left: 0; }

@media (min-width: 0) and (max-width: 640px) {
  .section-sub-nav {
    margin-top: 33px;
    margin-top: 2.0625rem; }
    .section-sub-nav .sub-nav {
      display: none; }
    .section-sub-nav .section-title {
      margin-bottom: 27px;
      margin-bottom: 1.6875rem; }
      .page-about .section-sub-nav .section-title {
        padding-bottom: 18px;
        padding-bottom: 1.125rem; }
      .page-about-legal .section-sub-nav .section-title {
        padding-bottom: 22px;
        padding-bottom: 1.375rem; }
      .page-careers .section-sub-nav .section-title {
        margin-bottom: 31px;
        margin-bottom: 1.9375rem; }
    .header-transparent .section-sub-nav,
    .header-semitransparent .section-sub-nav {
      margin-top: 83px;
      margin-top: 5.1875rem; } }

@media (min-width: 640px) {
  .nav_search {
    float: right;
    margin-top: 5px;
    margin-top: 0.3125rem;
    margin-bottom: 17px;
    margin-bottom: 1.0625rem;
    float: right;
    text-align: right; }
    main .nav_search {
      display: inline; } }

/**
    Markup example for nav-tabs and tabs

    <ul class="nav nav-tabs">
        <li class="active"><a>Tab 1</a></li>
        <li>Tab 2</li>
    </ul>

    <div class="tab-content">
        <div id="tab1" class="tab-pane active"></div>
        <div id="tab2" class="tab-pane"></div>
    </div>
*/
.nav-tabs {
  display: flex;
  align-content: stretch;
  flex-direction: row;
  font-size: 12px;
  font-size: 0.75rem;
  font-style: normal;
  font-family: "Gotham A", "Gotham B", "M Hei PRC W45", "M Hei HK W42", "M Hei HK W40", "HelveticaNeue-Regular", "Helvetica Neue Regular", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 400; }
  .lt-ie9 .nav-tabs {
    display: table;
    width: 100%; }
  .nav-tabs > li {
    order: 1;
    flex-grow: 1;
    text-align: center;
    padding: 5px;
    font-size: 12px;
    line-height: 20px;
    font-size: 0.75rem;
    line-height: 1.25rem;
    background-color: #fff;
    border-bottom: 2px solid #fff;
    color: #999;
    min-height: 45px;
    min-height: 2.8125rem;
    padding: 14px 14px 10px;
    padding: 0.875rem 0.875rem 0.625rem;
    margin-right: 2px;
    margin-right: 0.125rem; }
    .lt-ie9 .nav-tabs > li {
      display: table-cell;
      width: 25%; }
    .nav-tabs > li > a {
      color: #999; }
      .nav-tabs > li > a:hover {
        color: #c00; }
    .nav-tabs > li.active {
      border-color: #c00;
      color: #000;
      font-weight: 500; }
      .nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus {
        color: #000; }

.tab-pane {
  display: none; }
  .tab-pane.active {
    display: block; }

.js-nav .not-front main {
  -webkit-box-shadow: 2px 4px 3px 0 rgba(0, 0, 0, 0.25);
  -moz-box-shadow: 2px 4px 3px 0 rgba(0, 0, 0, 0.25);
  box-shadow: 2px 4px 3px 0 rgba(0, 0, 0, 0.25); }

.front main {
  -webkit-box-shadow: 0 0 0 0 transparent;
  -moz-box-shadow: 0 0 0 0 transparent;
  box-shadow: 0 0 0 0 transparent; }

#page {
  background-color: #fafafa; }

[id="media_block"] {
  margin-bottom: 48px;
  margin-bottom: 3rem;
  margin-top: 8px;
  margin-top: 0.5rem; }

@media (min-width: 0) and (max-width: 640px) {
  #page,
  .outer,
  .content-constrain {
    height: auto;
    min-height: 0;
    margin-bottom: 0; } }

.page-findus .content-constrain {
  max-width: 100%; }

.page-modelx .content-constrain,
.page-models-drive .content-constrain,
.page-supercharger .content-constrain,
.page-homecharger .content-constrain,
.page-destinationcharger .content-constrain,
.page-about .content-constrain,
.page-careers .content-constrain,
.page-contact .content-constrain,
.page-about-legal .content-constrain,
.page-charging .content-constrain,
.page-forum .content-constrain,
[id*="page-customer-stories"] .content-constrain,
[id*="page-models-preowned"] .content-constrain,
[id*="page-support"] .content-constrain,
[id*="page-blog"] .content-constrain,
[id*="page-customer-stories"] .content-constrain,
[id*="page-press"] .content-constrain,
[id*="page-search"] .content-constrain,
[id*="page-videos"] .content-constrain,
[id*="page-events"] .content-constrain,
[id*="page-test-events-listing"] .content-constrain,
.node-type-event .content-constrain,
.node-type-forum .content-constrain {
  background-color: #fff; }

[id="page_title"] {
  padding: 33px 0 50px 0;
  padding: 2.0625rem 0 3.125rem 0; }
  @media (min-width: 0) and (max-width: 640px) {
    [id="page_title"] {
      padding-bottom: 51px;
      padding-bottom: 3.1875rem; } }

@media (min-width: 640px) {
  main header {
    padding-top: 45px;
    padding-top: 2.8125rem;
    margin-bottom: 30px;
    margin-bottom: 1.875rem; }
    .page-about main header,
    .page-contact main header {
      margin-bottom: 0; }
    .page-about-legal main header {
      margin-bottom: 7px;
      margin-bottom: 0.4375rem; }
    .two-columns main header {
      margin-bottom: 38px;
      margin-bottom: 2.375rem; }
    main header .container > .wrapper {
      border-bottom: 1px solid #e5e5e5; }
      main header .container > .wrapper::after {
        clear: both;
        content: "";
        display: table; }
  main .with-media header {
    margin-bottom: 0; }
    main .with-media header .container > .wrapper {
      border-bottom: 0 none; }
  [id="page_title"] {
    float: left;
    padding: 0 0 22px 0;
    padding: 0 0 1.375rem 0;
    margin: 0; } }

[id="second_header"] .wrapper {
  min-height: 38px; }
  @media (min-width: 0) and (max-width: 640px) {
    [id="second_header"] .wrapper {
      min-height: 0; } }

[id="second_header"] [id="page_title"] {
  position: absolute;
  z-index: 1;
  padding: 0;
  background-color: #fff; }
  @media (min-width: 0) and (max-width: 640px) {
    [id="second_header"] [id="page_title"] {
      position: static;
      padding: 33px 0 22px 0;
      padding: 2.0625rem 0 1.375rem 0; } }
  [id="second_header"] [id="page_title"]:after {
    width: 175px;
    width: 10.9375rem;
    right: -55px;
    right: -3.4375rem;
    top: 0;
    height: 100%;
    position: absolute;
    z-index: -1;
    content: " ";
    background-image: -webkit-linear-gradient(white 90%, rgba(255, 255, 255, 0), 100%);
    background-image: linear-gradient(to   , rgba(255, 255, 255, 0), 100%); }
    .lt-ie9 [id="second_header"] [id="page_title"]:after {
      background-color: #fff; }
    @media (min-width: 0) and (max-width: 640px) {
      [id="second_header"] [id="page_title"]:after {
        display: none; } }

.file-video img,
.file-image img {
  display: block; }

[id="story_list"] .view-content {
  margin-bottom: 14px; }
  [id="story_list"] .view-content::after {
    clear: both;
    content: "";
    display: table; }

[id="story_list"] .pager-load-more {
  text-align: center;
  margin-bottom: 44px; }
  [id="story_list"] .pager-load-more a {
    text-transform: uppercase;
    font-size: 12px;
    line-height: 20px;
    font-size: 0.75rem;
    line-height: 1.25rem;
    font-style: normal;
    font-family: "Gotham A", "Gotham B", "M Hei PRC W45", "M Hei HK W42", "M Hei HK W40", "HelveticaNeue-Regular", "Helvetica Neue Regular", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: 500; }

.grid-photo-item {
  width: 23.40426%;
  float: left;
  margin-right: 2.12766%;
  margin-bottom: 64px;
  clear: right; }
  .grid-photo-item:nth-child(4n) {
    float: right;
    margin-right: 0; }
  .grid-photo-item h2 {
    font-weight: 500;
    font-size: 15px;
    line-height: 16px;
    font-size: 0.9375rem;
    line-height: 1rem;
    margin: 0; }
  .grid-photo-item a {
    color: #000; }
  .grid-photo-item .file {
    margin-bottom: 19px;
    margin-bottom: 1.1875rem;
    border: 1px solid #ccc; }
  .grid-photo-item .post-info, .grid-photo-item [id="article_content"] .submitted, [id="article_content"] .grid-photo-item .submitted {
    margin-top: 10px;
    margin-top: 0.625rem; }

.item-wrap {
  clear: both;
  overflow: hidden; }

@media (min-width: 0) and (max-width: 640px) {
  .grid-photo-item {
    width: 100%;
    float: right;
    margin-right: 0; }
    .page-press .grid-photo-item > a {
      width: 31.91489%;
      float: left;
      margin-right: 2.12766%;
      margin-right: 8.51064%; }
    .grid-photo-item.views-row-last {
      margin-bottom: 86px;
      margin-bottom: 5.375rem; }
    .grid-photo-item .file {
      margin-bottom: 14px;
      margin-bottom: 0.875rem;
      border: 0; }
    .grid-photo-item .post-info, .grid-photo-item [id="article_content"] .submitted, [id="article_content"] .grid-photo-item .submitted {
      margin-top: 5px;
      margin-top: 0.3125rem; }
  [id="story_list"] .pager-load-more {
    margin-bottom: 54px;
    margin-bottom: 3.375rem; } }

[id="feature_blog"] {
  padding-bottom: 45px;
  padding-bottom: 2.8125rem;
  margin-bottom: 45px;
  margin-bottom: 2.8125rem;
  border-bottom: 1px solid #e5e5e5; }
  [id="feature_blog"] .file-video,
  [id="feature_blog"] .file-image {
    margin-left: -20px;
    margin-right: -20px;
    margin-bottom: 17px; }
  [id="feature_blog"] h2 {
    font-size: 18px;
    line-height: 19px;
    font-size: 1.125rem;
    line-height: 1.1875rem;
    font-weight: 500;
    margin: 0 0 5px 0; }
    [id="feature_blog"] h2 a {
      color: #000; }
  [id="feature_blog"] .post-info, [id="feature_blog"] [id="article_content"] .submitted, [id="article_content"] [id="feature_blog"] .submitted {
    color: #999;
    margin-bottom: 19px;
    margin-bottom: 1.1875rem; }
  [id="feature_blog"] p {
    margin: 0 0 16px 0;
    margin: 0 0 1rem 0; }

[id="story_list"],
[id="blog_lists"] {
  padding-bottom: 3em; }
  [id="story_list"] h3,
  [id="blog_lists"] h3 {
    display: none; }
  [id="story_list"] .pager-load-more,
  [id="blog_lists"] .pager-load-more {
    padding-bottom: 50px;
    padding-bottom: 3.125rem; }
    [id="story_list"] .pager-load-more.pager-load-more-empty,
    [id="blog_lists"] .pager-load-more.pager-load-more-empty {
      display: none; }
    [id="story_list"] .pager-load-more a,
    [id="blog_lists"] .pager-load-more a {
      text-transform: uppercase;
      font-size: 12px;
      line-height: 20px;
      font-size: 0.75rem;
      line-height: 1.25rem;
      font-weight: 500;
      font-style: normal;
      font-family: "Gotham A", "Gotham B", "M Hei PRC W45", "M Hei HK W42", "M Hei HK W40", "HelveticaNeue-Regular", "Helvetica Neue Regular", "Helvetica Neue", Helvetica, Arial, sans-serif;
      color: #c00; }
  [id="story_list"] .pane-customer-stories .pane-title,
  [id="story_list"] .pane-articles .pane-title,
  [id="blog_lists"] .pane-customer-stories .pane-title,
  [id="blog_lists"] .pane-articles .pane-title {
    margin-bottom: 38px;
    margin-bottom: 2.375rem; }
    @media (min-width: 640px) {
      .page-support-tagged [id="story_list"] .pane-customer-stories .pane-title, .page-support-tagged
      [id="story_list"] .pane-articles .pane-title, .page-support-tagged
      [id="blog_lists"] .pane-customer-stories .pane-title, .page-support-tagged
      [id="blog_lists"] .pane-articles .pane-title {
        margin-bottom: 42px;
        margin-bottom: 2.625rem; } }

.group-month:last-child .views-row-last {
  position: relative;
  margin: 0 -20px 0 -20px;
  border-bottom: 0 none;
  padding-bottom: 0;
  max-height: 28em;
  overflow: hidden; }
  .group-month:last-child .views-row-last .blog-wrapper {
    padding: 0 20px;
    padding: 0 1.25rem; }
    .group-month:last-child .views-row-last .blog-wrapper p {
      margin-bottom: 0; }
  .group-month:last-child .views-row-last.views-row-first, .group-month:last-child .views-row-last.no-pager {
    max-height: none; }
    .group-month:last-child .views-row-last.views-row-first:after, .group-month:last-child .views-row-last.no-pager:after {
      display: none; }
    .group-month:last-child .views-row-last.views-row-first .blog-wrapper p, .group-month:last-child .views-row-last.no-pager .blog-wrapper p {
      margin-bottom: 22px; }
    .group-month:last-child .views-row-last.views-row-first .blog-wrapper:after, .group-month:last-child .views-row-last.no-pager .blog-wrapper:after {
      display: none; }

.group-month:last-child.views-row-last .blog-wrapper:after {
  display: block; }

.page-blog-tagged .pane-page-content > .pane-title,
.page-support-tagged .pane-page-content > .pane-title,
.page-press-tagged .pane-page-content > .pane-title,
.page-photos-tagged .pane-page-content > .pane-title,
.page-customer-stories-tagged .pane-page-content > .pane-title,
.page-videos-tagged .pane-page-content > .pane-title {
  display: none; }

.group-month {
  margin-top: 0; }
  @media (min-width: 640px) {
    .group-month {
      margin-top: -27px;
      margin-top: -1.6875rem; } }

.blog-list-item {
  padding-bottom: 45px;
  border-bottom: 1px solid #e5e5e5;
  margin: 0 -20px 50px -20px;
  position: relative; }
  .tesla-now .blog-list-item {
    padding: 15px 0;
    padding: 0.9375rem 0;
    border-top: 1px dotted #ccc; }
    .tesla-now .blog-list-item:first-child {
      border-top: 0; }
    .tesla-now .blog-list-item p:last-child {
      margin-bottom: 0; }
    .tesla-now .blog-list-item .post-info, .tesla-now .blog-list-item [id="article_content"] .submitted, [id="article_content"] .tesla-now .blog-list-item .submitted {
      margin: 0;
      font-size: 11px;
      font-size: 0.6875rem; }
      .tesla-now .blog-list-item .post-info span, .tesla-now .blog-list-item [id="article_content"] .submitted span, [id="article_content"] .tesla-now .blog-list-item .submitted span {
        position: absolute;
        top: 15px;
        top: 0.9375rem;
        right: 0;
        text-transform: uppercase; }
  .blog-list-item .file {
    margin: 4px 0 12px 0;
    margin: 0.25rem 0 0.75rem 0;
    padding: 0 20px; }
    .blog-list-item .file.file-video {
      display: none; }
  .blog-list-item .blog-wrapper {
    padding: 0 20px; }
  .blog-list-item h2 {
    font-size: 17px;
    line-height: 20px;
    font-size: 1.0625rem;
    line-height: 1.25rem;
    font-weight: 500;
    margin: 0 0 4px 0;
    margin: 0 0 0.25rem 0; }
    .tesla-now .blog-list-item h2 {
      font-size: 14px;
      font-size: 0.875rem;
      margin: 0 100px 0 0;
      margin: 0 6.25rem 0 0; }
    .blog-list-item h2 a {
      color: #000; }
      .tesla-now .blog-list-item h2 a {
        color: #c00; }

@media (min-width: 0) and (max-width: 640px) {
  .blog-list-item .file {
    padding: 0; } }

@media (min-width: 640px) {
  [id="blog_lists"] h3 {
    border-top: 1px solid #e5e5e5;
    font-size: 30px;
    font-size: 1.875rem;
    padding-top: 45px;
    padding-top: 2.8125rem;
    margin-top: 45px;
    margin-top: 2.8125rem;
    display: block;
    font-weight: 300;
    color: #b2b2b2; }
  [id="blog_lists"].no-feature-blog h3:first-child {
    border-top: 0 none;
    padding-top: 0; }
  [id="blog_lists"] .pager-load-more {
    margin-left: 34.04255%; }
  .group-month:last-child .views-row-last {
    max-height: 10em;
    margin: 0; }
    .group-month:last-child .views-row-last .blog-wrapper {
      padding: 0; }
  .group-month:last-child.views-row-last .blog-wrapper:after {
    display: block; }
  .blog-list-item {
    border-bottom: 0 none;
    margin: 0; }
    .blog-list-item::after {
      clear: both;
      content: "";
      display: table; }
    .front .blog-list-item {
      padding-bottom: 50px;
      padding-bottom: 3.125rem; }
    .front .blog-list-item.views-row-first {
      margin-top: 0; }
    .blog-list-item .file-video,
    .blog-list-item .file-image {
      margin-left: 20px;
      margin-left: 1.25rem;
      padding: 0; }
      .front .blog-list-item .file-video, .front
      .blog-list-item .file-image {
        margin-bottom: 16px;
        margin-bottom: 1rem; }
      .not-front .blog-list-item .file-video, .not-front
      .blog-list-item .file-image {
        width: 48.93617%;
        float: right;
        margin-right: 0; }
    .blog-list-item .blog-wrapper {
      width: 65.95745%;
      float: left;
      margin-right: 2.12766%;
      margin-left: 34.04255%;
      padding: 0; }
    .tesla-now .blog-list-item:after {
      position: absolute;
      top: -9999px;
      left: -9999px; }
    .blog-list-item.views-row-last {
      padding-bottom: 0; }
      .blog-list-item.views-row-last:after {
        border-bottom: 0 none; }
  [id="feature_blog"] {
    margin-bottom: 28px;
    margin-bottom: 1.75rem;
    border-bottom: 0 none;
    padding-bottom: 0; }
    [id="feature_blog"] .left-column {
      width: 31.91489%;
      float: left;
      margin-right: 2.12766%; }
    [id="feature_blog"] .right-column {
      width: 65.95745%;
      float: right;
      margin-right: 0;
      margin-top: 3px;
      margin-top: 0.1875rem; }
    [id="feature_blog"] .file-video,
    [id="feature_blog"] .file-image {
      margin-left: 0;
      margin-right: 0;
      margin-bottom: 43px;
      margin-bottom: 2.6875rem; }
    [id="feature_blog"] h2 {
      font-size: 30px;
      line-height: 36px;
      font-size: 1.875rem;
      line-height: 2.25rem;
      font-weight: 500;
      margin: 0 0 4px 0;
      margin: 0 0 0.25rem 0; }
    [id="feature_blog"] .post-info, [id="feature_blog"] [id="article_content"] .submitted, [id="article_content"] [id="feature_blog"] .submitted {
      color: #666; }
  .feature-blog-wrapper::after {
    clear: both;
    content: "";
    display: table; } }

.blog-content {
  color: #666; }
  .blog-content p {
    font-size: 15px;
    line-height: 20px;
    font-size: 0.9375rem;
    line-height: 1.25rem; }

.read-more {
  margin-bottom: 20px;
  margin-bottom: 1.25rem;
  font-style: normal;
  font-family: "Gotham A", "Gotham B", "M Hei PRC W45", "M Hei HK W42", "M Hei HK W40", "HelveticaNeue-Regular", "Helvetica Neue Regular", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 15px;
  line-height: 21px;
  font-size: 0.9375rem;
  line-height: 1.3125rem;
  clear: both;
  cursor: pointer;
  color: #c00; }
  .read-more a {
    color: #c00; }
    .read-more a:hover {
      color: #f00; }
  .read-more:hover {
    color: #f00; }

.comments-tags {
  font-size: 13px;
  line-height: 20px;
  font-size: 0.8125rem;
  line-height: 1.25rem;
  font-style: normal;
  font-family: "HeiS ASC Simplified Chinese", "HeiS ASC Simplified Chinese_n5", "HeiT ASC Traditional Chinese", "HelveticaNeue-Regular", "Helvetica Neue Regular", "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #999; }
  .comments-tags strong {
    font-weight: normal;
    margin-right: 3px; }
  .comments-tags .tags {
    display: inline; }
  .comments-tags .comment-count {
    display: inline; }
    .comments-tags .comment-count:after {
      padding-left: 9px;
      padding-left: 0.5625rem;
      padding-right: 10px;
      padding-right: 0.625rem;
      font-family: "tesla";
      font-weight: normal;
      font-style: normal;
      text-indent: 0;
      speak: none;
      line-height: 1;
      font-size: 9px;
      font-size: 0.5625rem;
      content: '\e604';
      line-height: 1;
      position: relative; }

[id="article_content"] {
  margin-top: 0; }
  [id="article_content"] .submitted {
    color: #999;
    margin-bottom: 16px;
    margin-bottom: 1rem; }
    [id="article_content"] .submitted span {
      display: inline; }
    [id="article_content"] .submitted .author-info:after {
      content: '\2022';
      margin: 0 10px 0 11px;
      margin: 0 0.625rem 0 0.6875rem; }
    @media (min-width: 0) and (max-width: 640px) {
      [id="article_content"] .submitted .author-info {
        display: block; }
        [id="article_content"] .submitted .author-info:after {
          content: "";
          margin: 0; } }
  [id="article_content"] .subhead {
    font-size: 24px;
    line-height: 28px;
    font-size: 1.5rem;
    line-height: 1.75rem;
    font-weight: 400;
    margin-bottom: 21px;
    margin-bottom: 1.3125rem;
    margin-top: -10px;
    margin-top: -0.625rem;
    color: #999; }
    @media (min-width: 0) and (max-width: 640px) {
      [id="article_content"] .subhead {
        font-size: 17px;
        line-height: 20px;
        font-size: 1.0625rem;
        line-height: 1.25rem;
        margin-top: 15px;
        margin-top: 0.9375rem; } }
  [id="article_content"] .left-column {
    margin-bottom: 50px;
    margin-bottom: 3.125rem; }
  [id="article_content"].no-right-column .left-column {
    margin-bottom: 0; }
  [id="article_content"] .field-name-field-tags {
    padding-top: 21px;
    padding-top: 1.3125rem;
    position: relative;
    font-size: 13px;
    line-height: 22px;
    font-size: 0.8125rem;
    line-height: 1.375rem;
    font-weight: normal; }
    [id="article_content"] .field-name-field-tags::after {
      clear: both;
      content: "";
      display: table; }
    [id="article_content"] .field-name-field-tags .field-label {
      color: #666; }
    [id="article_content"] .field-name-field-tags > * {
      display: inline;
      float: left; }
    [id="article_content"] .field-name-field-tags:before {
      content: '';
      width: 110px;
      width: 6.875rem;
      position: absolute;
      top: 0;
      left: 0;
      height: 1px;
      background-color: #e5e5e5; }
  [id="article_content"] .support .field-name-field-tags {
    margin-bottom: 45px;
    margin-bottom: 2.8125rem; }

@media (min-width: 640px) {
  .left-column {
    width: 65.95745%;
    float: left;
    margin-right: 2.12766%;
    margin-bottom: 0; }
    .one-column-layout .left-column {
      clear: both;
      width: 100%;
      float: left;
      margin-left: 0;
      margin-right: 0;
      padding-right: 17.02128%;
      padding-left: 17.02128%; }
  .right-column {
    width: 31.91489%;
    float: right;
    margin-right: 0; }
    .right-column .wrapper {
      padding-left: 20px;
      padding-left: 1.25rem; }
  [id="article_content"]::after {
    clear: both;
    content: "";
    display: table; }
  [id="article_content"] .submitted {
    margin-bottom: 42px;
    margin-bottom: 2.625rem; }
  [id="article_content"] .field-name-field-tags:before {
    background-color: #999; }
  .no-media,
  [id="media_block"] + [id="article_content"] {
    padding-bottom: 67px;
    padding-bottom: 4.1875rem; }
  [id="media_block"] {
    margin-bottom: 60px;
    margin-bottom: 3.75rem; } }

[id="media_block"] .loader {
  display: none; }

[id="read_more_block"] {
  background-color: #f2f2f2;
  padding: 20px 0;
  text-align: center;
  font-size: 15px;
  line-height: 20px;
  font-size: 0.9375rem;
  line-height: 1.25rem;
  font-style: normal;
  font-family: "HeiS ASC Simplified Chinese", "HeiS ASC Simplified Chinese_n5", "HeiT ASC Traditional Chinese", "HelveticaNeue-Regular", "Helvetica Neue Regular", "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #666; }

@media (min-width: 640px) {
  [id="read_more_block"] {
    background-color: #f2f2f2;
    padding: 65px 0;
    padding: 4.0625rem 0; } }

[id="submit_story_block"] {
  background-color: #f2f2f2;
  padding: 50px 0;
  padding: 3.125rem 0; }
  [id="submit_story_block"] .pane-content {
    padding-left: 70px;
    padding-left: 4.375rem;
    position: relative; }
    [id="submit_story_block"] .pane-content:before {
      content: '\e605';
      font-family: "tesla";
      font-weight: normal;
      font-style: normal;
      text-indent: 0;
      speak: none;
      line-height: 1;
      position: absolute;
      left: 0;
      top: 0;
      font-size: 46px;
      font-size: 2.875rem;
      line-height: 1;
      color: #999; }
  [id="submit_story_block"] h2 {
    font-size: 15px;
    line-height: 16px;
    font-size: 0.9375rem;
    line-height: 1rem;
    margin: 0 0 10px 0;
    margin: 0 0 0.625rem 0;
    font-weight: 500; }
  [id="submit_story_block"] p {
    font-size: 13px;
    line-height: 16px;
    font-size: 0.8125rem;
    line-height: 1rem;
    margin: 0; }

.pane-tesla-next-article-next-article {
  font-size: 13px;
  line-height: 22px;
  font-size: 0.8125rem;
  line-height: 1.375rem;
  margin-bottom: 45px;
  margin-bottom: 2.8125rem; }
  .pane-tesla-next-article-next-article .next-label {
    color: #666; }

.pane-service-links-service-links {
  margin-bottom: 45px;
  margin-bottom: 2.8125rem; }
  .pane-service-links-service-links::after {
    clear: both;
    content: "";
    display: table; }
  .pane-service-links-service-links .pane-title {
    font-size: 12px;
    line-height: 16px;
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 500;
    font-weight: normal;
    text-transform: uppercase;
    float: left;
    margin-top: 3px;
    margin-top: 0.1875rem; }
  .i18n-zh_CN .pane-service-links-service-links {
    display: none; }

.service-links [class*="service-links-"] {
  width: 20px;
  width: 1.25rem;
  height: 20px;
  height: 1.25rem;
  margin-left: 7px;
  margin-left: 0.4375rem;
  float: left;
  text-indent: 999em;
  display: block;
  overflow: hidden;
  position: relative;
  color: #a6a6a6; }
  .service-links [class*="service-links-"]:after {
    font-family: "tesla";
    font-weight: normal;
    font-style: normal;
    text-indent: 0;
    speak: none;
    line-height: 1;
    font-size: 22px;
    font-size: 1.375rem;
    text-indent: 0;
    position: absolute;
    line-height: 1;
    top: -1px;
    top: -0.0625rem;
    left: -1px;
    left: -0.0625rem; }

.hr-dotted-8 {
  background: url(../assets/img/forums/hr_dottedline.gif) repeat-x top left;
  margin: 1em 0 .5em 0;
  height: 3px; }

#join-community {
  margin-bottom: 20px;
  margin-bottom: 1.25rem;
  padding: 4px 5px;
  border: 1px solid #aaa;
  background-color: #adadad;
  float: right; }

#join-community .replace-text {
  height: 25px;
  width: 180px;
  display: block;
  float: left;
  color: #fff;
  text-transform: uppercase;
  font-size: 13px;
  font-weight: bold; }

#join-community .button.tertiary {
  display: inline-block;
  position: relative;
  top: 1px;
  background-image: none;
  background-color: #4f4d4e;
  padding: 3px 9px;
  font-size: 0.83em; }

#join-community a.button {
  color: #fff; }

.node-type-forum {
  /***** Forum Pager *****/ }
  .node-type-forum .left-column {
    border-right: 1px solid #e5e5e5; }
  .node-type-forum [id="article_content"] {
    padding-right: 22px;
    padding-right: 1.375rem; }
  .node-type-forum .field-name-body ul,
  .node-type-forum .field-name-comment-body ul {
    list-style: disc;
    margin-left: 20px;
    margin-left: 1.25rem; }
  .node-type-forum .field-name-body ol,
  .node-type-forum .field-name-comment-body ol {
    list-style: decimal; }
  .node-type-forum .field-name-body li,
  .node-type-forum .field-name-comment-body li {
    margin: 0 0 10px 0;
    margin: 0 0 0.625rem 0; }
  .node-type-forum .comment p {
    font-size: 14px;
    line-height: 18px;
    font-size: 0.875rem;
    line-height: 1.125rem; }
  .node-type-forum .pane-node-comments {
    padding-left: 30px;
    padding-left: 1.875rem; }
  .node-type-forum .user-date {
    margin: 20px 0;
    margin: 1.25rem 0; }
  .node-type-forum .pane-node-comment-form {
    background: url(../assets/img/forums/hr_dottedline.gif) repeat-x 0 0;
    padding-top: 20px;
    padding-top: 1.25rem;
    margin-bottom: 20px;
    margin-bottom: 1.25rem; }
  .node-type-forum .with_sidebar .pane-node-comment-form .pane-content {
    padding: 0; }
  .node-type-forum ul.pager li {
    font-size: 92%;
    text-transform: uppercase;
    border: 1px solid #999;
    background: #eee;
    margin: 0;
    display: inline; }
  .node-type-forum ul.pager li.pager-current {
    background: #fff;
    border-color: #444;
    color: #000; }
  .node-type-forum .item-list ul.pager li {
    min-width: 15px;
    padding: 5px;
    margin: 0 2px; }
  .node-type-forum ul.pager li a {
    display: inline-block;
    line-height: 20px;
    padding: 5px; }
  .node-type-forum ul.pager li a:link, .node-type-forum ul.pager li a:visited {
    color: #333; }
  .node-type-forum ul.pager li a:hover, .node-type-forum ul.pager li a:active {
    color: #c00; }
  .node-type-forum ul.pager li a:link, .node-type-forum #forum ul.pager li a:visited {
    color: #666; }
  .node-type-forum ul.pager li a:hover, .node-type-forum #forum ul.pager li a:active {
    color: #c00; }
  .node-type-forum .item-list ul.pager {
    background: url(../../assets/img/forums/hr_dottedline.gif) repeat-x top left;
    padding-top: 15px;
    margin: 1em 0 .5em 0; }

@media (min-width: 640px) {
  .centered {
    padding-right: 17.02128%;
    padding-left: 17.02128%; } }

.modal-open {
  overflow: hidden; }
  .modal-open .modal {
    background-color: rgba(0, 0, 0, 0.4);
    overflow-x: hidden;
    overflow-y: auto; }

.lt-ie9 .modal-open .modal {
  background-color: #000; }

.modal {
  display: none;
  overflow: hidden;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1050;
  -webkit-overflow-scrolling: touch;
  outline: 0;
  height: 100%;
  width: 100%; }
  .modal.fade .modal-dialog {
    opacity: 0;
    -webkit-transition: all 0.15s ease-in-out;
    -moz-transition: all 0.15s ease-in-out;
    transition: all 0.15s ease-in-out; }
  .modal.in .modal-dialog {
    opacity: 1;
    -webkit-transition: all 0.15s ease-in-out;
    -moz-transition: all 0.15s ease-in-out;
    transition: all 0.15s ease-in-out; }

.modal-dialog {
  overflow: hidden;
  position: relative;
  top: 20%;
  right: 0;
  bottom: 0;
  left: 0;
  min-height: 500px;
  max-width: 940px;
  margin: auto; }
  @media screen and (max-height: 720px) {
    .modal-dialog {
      top: 5%; } }

.modal-content {
  max-width: 940px;
  margin: auto;
  position: relative;
  background-color: rgba(0, 0, 0, 0.95);
  background-clip: padding-box;
  color: #fff;
  outline: 0; }
  .modal-alternate .modal-content {
    color: #666;
    background-color: #fff; }
    .modal-alternate .modal-content.transparent {
      color: #666;
      background-color: rgba(255, 255, 255, 0.93); }
  .modal-content .label-checkbox {
    padding-top: 2px; }
  .modal-content .icon-radio,
  .modal-content .icon-checkbox {
    top: 0; }

.modal-backdrop {
  display: none;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1040;
  background-color: #000; }
  .modal-backdrop.fade {
    opacity: 0;
    filter: alpha(opacity=0); }
  .modal-backdrop.in {
    opacity: 0.5;
    filter: alpha(opacity=50); }

.modal-header {
  padding: 15px;
  border-bottom: 1px solid #e5e5e5;
  min-height: 16.42857143px; }

.modal-close {
  top: 15px;
  top: 0.9375rem;
  right: 15px;
  right: 0.9375rem;
  width: 15px;
  width: 0.9375rem;
  height: 15px;
  height: 0.9375rem;
  position: absolute;
  z-index: 1;
  cursor: pointer;
  background-repeat: no-repeat;
  background-poosition: center;
  background-size: contain;
  background-image: url("/tesla_theme/assets/img/icon-close-alternate.svg"); }
  .modal-alternate .modal-close {
    background-image: url("/tesla_theme/assets/img/icon-close.svg"); }
  .modal-close:active {
    outline: 0; }

.lt-ie9 .modal-close,
.no-svg .modal-close {
  background: url("/tesla_theme/assets/img/icon-close.png");
  background: url("/tesla_theme/assets/img/icon-close.png"); }

.lt-ie9 .modal-alternate .modal-close,
.no-svg .modal-alternate .modal-close {
  background: url("/tesla_theme/assets/img/icon-close-alternate.png");
  background: url("/tesla_theme/assets/img/icon-close-alternate.png"); }

.modal-title {
  margin: 0;
  line-height: 1.42857143; }

.modal-body {
  overflow: hidden;
  position: relative;
  padding: 50px 60px;
  padding: 3.125rem 3.75rem;
  color: #fff; }

.modal-scrollbar-measure {
  position: absolute;
  top: -9999px;
  width: 50px;
  height: 50px;
  overflow: scroll; }

.modal-alternate .modal-header {
  padding: 0;
  border-bottom: none; }

.modal-alternate .modal-title {
  text-align: center;
  padding-top: 25px;
  font-size: 25px;
  font-weight: 400; }

.modal-alternate .modal-body {
  color: #222;
  padding: 20px 30px;
  padding: 1.25rem 1.875rem; }

.modal-throbber {
  background-image: url("/tesla_theme/assets/img/comment_loader2x.gif");
  background-repeat: no-repeat;
  background-position: center 40%;
  background-color: #f2f2f2;
  max-width: 940px;
  height: 100%;
  margin: auto;
  right: 0;
  bottom: 0;
  left: 0;
  position: absolute;
  clear: both;
  z-index: 2;
  opacity: .6; }

.localization-modal {
  text-align: center; }

.modal-link.locale {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  display: inline-block;
  position: relative;
  cursor: pointer;
  font-size: 13px;
  line-height: 13px;
  font-size: 0.8125rem;
  line-height: 0.8125rem;
  color: #666;
  outline: 0; }
  @media (min-width: 0) and (max-width: 640px) {
    .pane-skinny-footer .modal-link.locale {
      color: #ccc; } }
  .modal-link.locale:after {
    font-size: 12px;
    font-size: 0.75rem; }
    .pane-full-footer .modal-link.locale:after {
      color: #ccc; }
  .i18n-nl_BE .modal-link.locale:before,
  .i18n-fr_BE .modal-link.locale:before {
    background-image: url("/tesla_theme/assets/img/flags/svg/flag-belgium.svg"); }
  .i18n-nl_BE .modal-link.locale:after {
    content: "Belgi\00eb"; }
  .i18n-fr_BE .modal-link.locale:after {
    content: "Belgique"; }
  .i18n-en_CA .modal-link.locale:before,
  .i18n-fr_CA .modal-link.locale:before {
    background-image: url("/tesla_theme/assets/img/flags/svg/flag-canada.svg"); }
  .i18n-en_CA .modal-link.locale:after {
    content: "Canada (En)"; }
  .i18n-fr_CA .modal-link.locale:after {
    content: "Canada (Fr)"; }
  .i18n-es_MX .modal-link.locale:before {
    background-image: url("/tesla_theme/assets/img/flags/svg/flag-mexico.svg"); }
  .i18n-es_MX .modal-link.locale:after {
    content: "México"; }
  .i18n-de_CH .modal-link.locale:before,
  .i18n-fr_CH .modal-link.locale:before,
  .i18n-it_CH .modal-link.locale:before {
    background-image: url("/tesla_theme/assets/img/flags/svg/flag-switzerland.svg"); }
  .i18n-de_CH .modal-link.locale:after {
    content: "Schweiz"; }
  .i18n-fr_CH .modal-link.locale:after {
    content: "Suisse"; }
  .i18n-it_CH .modal-link.locale:after {
    content: "Svizzera"; }
  .i18n-de_AT .modal-link.locale:before {
    background-image: url("/tesla_theme/assets/img/flags/svg/flag-austria.svg"); }
  .i18n-de_AT .modal-link.locale:after {
    content: "\00d6sterreich"; }
  .i18n-en_AU .modal-link.locale:before {
    background-image: url("/tesla_theme/assets/img/flags/svg/flag-australia.svg"); }
  .i18n-en_AU .modal-link.locale:after {
    content: "Australia"; }
  .i18n-zh_CN .modal-link.locale:before {
    background-image: url("/tesla_theme/assets/img/flags/svg/flag-china.svg"); }
  .i18n-zh_CN .modal-link.locale:after {
    content: "中国"; }
  .i18n-da .modal-link.locale:before {
    background-image: url("/tesla_theme/assets/img/flags/svg/flag-denmark.svg"); }
  .i18n-da .modal-link.locale:after {
    content: "Denmark"; }
  .i18n-en_EU .modal-link.locale:before {
    background-image: url("/tesla_theme/assets/img/flags/svg/flag-eu.svg"); }
  .i18n-en_EU .modal-link.locale:after {
    content: "Other Europe"; }
  .i18n-fr .modal-link.locale:before {
    background-image: url("/tesla_theme/assets/img/flags/svg/flag-france.svg"); }
  .i18n-fr .modal-link.locale:after {
    content: "France"; }
  .i18n-de .modal-link.locale:before {
    background-image: url("/tesla_theme/assets/img/flags/svg/flag-germany.svg"); }
  .i18n-de .modal-link.locale:after {
    content: "Deutschland"; }
  .i18n-en_HK .modal-link.locale:before,
  .i18n-zh_HK .modal-link.locale:before {
    background-image: url("/tesla_theme/assets/img/flags/svg/flag-hongkong.svg"); }
  .i18n-en_HK .modal-link.locale:after {
    content: "Hong Kong"; }
  .i18n-zh_HK .modal-link.locale:after {
    content: "香港"; }
  .i18n-en_MO .modal-link.locale:before,
  .i18n-zh_MO .modal-link.locale:before {
    background-image: url("/tesla_theme/assets/img/flags/svg/flag-macau.svg"); }
  .i18n-en_MO .modal-link.locale:after {
    content: "Macau"; }
  .i18n-zh_MO .modal-link.locale:after {
    content: "澳門"; }
  .i18n-it .modal-link.locale:before {
    background-image: url("/tesla_theme/assets/img/flags/svg/flag-italy.svg"); }
  .i18n-it .modal-link.locale:after {
    content: "Italia"; }
  .i18n-ja_JP .modal-link.locale:before {
    background-image: url("/tesla_theme/assets/img/flags/svg/flag-japan.svg"); }
  .i18n-ja_JP .modal-link.locale:after {
    content: "日本"; }
  .i18n-nl .modal-link.locale:before {
    background-image: url("/tesla_theme/assets/img/flags/svg/flag-netherlands.svg"); }
  .i18n-nl .modal-link.locale:after {
    content: "Nederland"; }
  .i18n-no .modal-link.locale:before {
    background-image: url("/tesla_theme/assets/img/flags/svg/flag-norway.svg"); }
  .i18n-no .modal-link.locale:after {
    content: "Norge"; }
  .i18n-en .modal-link.locale:before {
    background-image: url("/tesla_theme/assets/img/flags/svg/flag-us.svg"); }
  .i18n-en .modal-link.locale:after {
    content: "United States"; }
  .i18n-en_GB .modal-link.locale:before {
    background-image: url("/tesla_theme/assets/img/flags/svg/flag-uk.svg"); }
  .i18n-en_GB .modal-link.locale:after {
    content: "Great Britain"; }
  .i18n-sv_SE .modal-link.locale:before {
    background-image: url("/tesla_theme/assets/img/flags/svg/flag-sweden.svg"); }
  .i18n-sv_SE .modal-link.locale:after {
    content: "Sverige"; }
  .i18n-fi_FI .modal-link.locale:before {
    background-image: url("/tesla_theme/assets/img/flags/svg/flag-finland.svg"); }
  .i18n-fi_FI .modal-link.locale:after {
    content: "Suomi"; }
  .modal-link.locale:before {
    width: 16px;
    width: 1rem;
    height: 11px;
    height: 0.6875rem;
    content: '';
    position: absolute;
    background-repeat: no-repeat;
    background-position: top left;
    background-size: contain;
    overflow: hidden; }
    .pane-full-footer .modal-link.locale:before {
      top: 10px;
      top: 0.625rem;
      left: 11px;
      left: 0.6875rem; }
    .pane-skinny-footer .modal-link.locale:before {
      top: 1px;
      top: 0.0625rem;
      left: 9px;
      left: 0.5625rem; }
      @media (min-width: 0) and (max-width: 640px) {
        .pane-skinny-footer .modal-link.locale:before {
          top: 10px;
          top: 0.625rem;
          left: 11px;
          left: 0.6875rem; } }
  @media (min-width: 0) and (max-width: 640px) {
    .pane-skinny-footer .modal-link.locale:after {
      color: #ccc; } }

.locale-header {
  font-weight: 400;
  font-size: 20px;
  font-size: 1.25rem;
  margin-bottom: 16px;
  margin-bottom: 1rem;
  color: #fff;
  text-align: left; }

.language-list {
  text-align: left;
  font-weight: 300; }

.locale-selector .flag-australia:before {
  background-image: url("/tesla_theme/assets/img/flags/svg/flag-australia.svg"); }

.locale-selector .flag-austria:before {
  background-image: url("/tesla_theme/assets/img/flags/svg/flag-austria.svg"); }

.locale-selector .flag-belgium:before {
  background-image: url("/tesla_theme/assets/img/flags/svg/flag-belgium.svg"); }

.locale-selector .flag-canada:before {
  background-image: url("/tesla_theme/assets/img/flags/svg/flag-canada.svg"); }

.locale-selector .flag-mexico:before {
  background-image: url("/tesla_theme/assets/img/flags/svg/flag-mexico.svg"); }

.locale-selector .flag-china:before {
  background-image: url("/tesla_theme/assets/img/flags/svg/flag-china.svg"); }

.locale-selector .flag-denmark:before {
  background-image: url("/tesla_theme/assets/img/flags/svg/flag-denmark.svg"); }

.locale-selector .flag-eu:before {
  background-image: url("/tesla_theme/assets/img/flags/svg/flag-eu.svg"); }

.locale-selector .flag-france:before {
  background-image: url("/tesla_theme/assets/img/flags/svg/flag-france.svg"); }

.locale-selector .flag-germany:before {
  background-image: url("/tesla_theme/assets/img/flags/svg/flag-germany.svg"); }

.locale-selector .flag-hongkong:before {
  background-image: url("/tesla_theme/assets/img/flags/svg/flag-hongkong.svg"); }

.locale-selector .flag-macau:before {
  background-image: url("/tesla_theme/assets/img/flags/svg/flag-macau.svg"); }

.locale-selector .flag-italy:before {
  background-image: url("/tesla_theme/assets/img/flags/svg/flag-italy.svg"); }

.locale-selector .flag-japan:before {
  background-image: url("/tesla_theme/assets/img/flags/svg/flag-japan.svg"); }

.locale-selector .flag-netherlands:before {
  background-image: url("/tesla_theme/assets/img/flags/svg/flag-netherlands.svg"); }

.locale-selector .flag-norway:before {
  background-image: url("/tesla_theme/assets/img/flags/svg/flag-norway.svg"); }

.locale-selector .flag-sweden:before {
  background-image: url("/tesla_theme/assets/img/flags/svg/flag-sweden.svg"); }

.locale-selector .flag-finland:before {
  background-image: url("/tesla_theme/assets/img/flags/svg/flag-finland.svg"); }

.locale-selector .flag-switzerland:before {
  background-image: url("/tesla_theme/assets/img/flags/svg/flag-switzerland.svg"); }

.locale-selector .flag-uk:before {
  background-image: url("/tesla_theme/assets/img/flags/svg/flag-uk.svg"); }

.locale-selector .flag-us:before {
  background-image: url("/tesla_theme/assets/img/flags/svg/flag-us.svg"); }

.locale-selector [class*="flag-"] {
  position: relative;
  display: block; }
  .lt-ie9 .locale-selector [class*="flag-"]:before,
  .no-svg .locale-selector [class*="flag-"]:before {
    display: none; }
  .locale-selector [class*="flag-"]:before {
    content: '';
    position: absolute;
    background-repeat: no-repeat;
    background-position: top left;
    background-size: contain;
    overflow: hidden;
    left: 3px; }

.locale-selector {
  z-index: 10; }
  .locale-selector.in {
    display: inherit; }
  .locale-selector [class*="flag-"] {
    height: 23px;
    height: 1.4375rem;
    margin-bottom: 20px;
    margin-bottom: 1.25rem;
    padding: 4px 0 4px 45px;
    padding: 0.25rem 0 0.25rem 2.8125rem;
    font-size: 16px;
    font-size: 1rem; }
    .lt-ie9 .locale-selector [class*="flag-"],
    .no-svg .locale-selector [class*="flag-"] {
      padding-left: 0; }
    .locale-selector [class*="flag-"]:before {
      top: 2px;
      top: 0.125rem;
      width: 32px;
      width: 2rem;
      height: 21px;
      height: 1.3125rem; }
  .locale-selector [class*="region-"] {
    clear: both; }

.pane-full-footer .container {
  position: relative; }

.localization-modal .icon-caret,
.footer-copy .icon-caret {
  display: none; }

.modal-link.locale {
  padding: 0 15px 0 35px;
  padding: 0 0.9375rem 0 2.1875rem; }
  .lt-ie9 .modal-link.locale {
    padding-left: 10px; }
  .pane-full-footer .localization-modal .modal-link.locale {
    position: absolute;
    right: 38px;
    right: 2.375rem;
    bottom: 7px;
    bottom: 0.4375rem;
    padding: 9px 21px 9px 36px;
    padding: 0.5625rem 1.3125rem 0.5625rem 2.25rem;
    background-color: #222;
    border: 1px solid #666; }
    .lt-ie9 .pane-full-footer .localization-modal .modal-link.locale,
    .no-svg .pane-full-footer .localization-modal .modal-link.locale {
      padding-left: 20px; }

.lt-ie9 .language,
.no-svg .language {
  width: 33%;
  display: inline;
  float: left; }

.lt-ie9 [class*="region-"],
.no-svg [class*="region-"] {
  clear: both; }

@media (min-width: 0) and (max-width: 640px) {
  .localization-modal {
    position: relative; }
    .localization-modal .modal-body {
      background-color: #222; }
    .localization-modal .icon-caret {
      font-size: 15px;
      font-size: 0.9375rem;
      -webkit-transform: rotate(0deg);
      -moz-transform: rotate(0deg);
      -ms-transform: rotate(0deg);
      -o-transform: rotate(0deg);
      transform: rotate(0deg);
      -webkit-transition: transform 0.15s ease-in-out;
      -moz-transition: transform 0.15s ease-in-out;
      -o-transition: transform 0.15s ease-in-out;
      transition: transform 0.15s ease-in-out;
      position: absolute;
      font-style: normal;
      color: rgba(255, 255, 255, 0.25);
      display: block; }
      .pane-skinny-footer .localization-modal .icon-caret {
        right: 10px;
        right: 0.625rem;
        top: 9px;
        top: 0.5625rem; }
      .pane-full-footer .localization-modal .icon-caret {
        right: 6px;
        right: 0.375rem;
        top: 10px;
        top: 0.625rem; }
      .modal-open .localization-modal .icon-caret {
        -webkit-transform: rotate(180deg);
        -moz-transform: rotate(180deg);
        -ms-transform: rotate(180deg);
        -o-transform: rotate(180deg);
        transform: rotate(180deg);
        -webkit-transition: transform 0.15s ease-in-out;
        -moz-transition: transform 0.15s ease-in-out;
        -o-transition: transform 0.15s ease-in-out;
        transition: transform 0.15s ease-in-out; }
  .all-rights {
    display: block; }
  .colophon .modal-link {
    display: none; }
  .pane-skinny-footer .modal-link {
    color: #ccc; }
  .modal-link.locale {
    padding: 9px 25px 7px 36px;
    padding: 0.5625rem 1.5625rem 0.4375rem 2.25rem;
    margin: 16px auto;
    margin: 1rem auto;
    background-color: #222;
    border: 1px solid #666;
    color: #ccc; }
    .modal-link.locale:after {
      position: relative;
      top: 0; }
    .pane-full-footer .localization-modal .modal-link.locale {
      position: relative;
      top: initial;
      left: initial;
      right: initial;
      bottom: initial; }
  .locale-selector.modal {
    position: static;
    width: 115%;
    margin-left: -8%; }
  .locale-selector.in .modal-dialog, .locale-selector.fade .modal-dialog {
    opacity: 1;
    position: static;
    height: auto;
    min-height: 0; }
  .locale-selector.slideup, .locale-selector.slidedown {
    overflow-y: hidden;
    display: block;
    -webkit-transition: max-height 0.5s ease-in-out;
    -moz-transition: max-height 0.5s ease-in-out;
    -o-transition: max-height 0.5s ease-in-out;
    transition: max-height 0.5s ease-in-out; }
  .locale-selector.slideup {
    max-height: 0; }
  .locale-selector.slidedown {
    max-height: 450px; }
  .locale-selector .modal-body {
    padding: 1rem 7%; }
  .locale-selector .modal-dialog {
    margin: 0; }
  .locale-selector [class*="region-"] {
    clear: both;
    padding-top: .5rem; }
    .locale-selector [class*="region-"]:first-child {
      padding-top: 0; }
  .locale-selector [class*="flag-"] {
    font-size: 12px;
    font-size: 0.75rem;
    padding: 0 0 0 25px;
    padding: 0 0 0 1.5625rem;
    margin-bottom: 5px;
    margin-bottom: 0.3125rem;
    height: auto; }
    .locale-selector [class*="flag-"]:before {
      top: 2px;
      width: 16px;
      width: 1rem;
      height: 11px;
      height: 0.6875rem; }
  .locale-modal [class*="region-"] {
    width: 100%;
    clear: both;
    float: none;
    display: block;
    margin-right: auto;
    margin-left: auto;
    display: block;
    clear: both;
    overflow: hidden;
    border-top: 1px solid #666;
    margin-top: 16px;
    margin-top: 1rem;
    padding-top: 16px;
    padding-top: 1rem; }
    .locale-modal [class*="region-"]:first-child {
      border-top: 0;
      margin-top: 0;
      padding-top: 0; }
  .modal-open {
    overflow-y: visible; }
  .region-northamerica .language-list {
    width: 100%;
    clear: both;
    float: none;
    display: block;
    margin-right: auto;
    margin-left: auto; }
  .region-northamerica .language {
    width: 48.93617%;
    float: left;
    margin-right: 2.12766%; }
    .region-northamerica .language:nth-child(2), .region-northamerica .language:last-child {
      float: right;
      margin-right: 0; }
  .region-europe .language-list {
    width: 48.93617%;
    float: left;
    margin-right: 2.12766%; }
    .region-europe .language-list:last-child {
      float: right;
      margin-right: 0; }
  .region-apac {
    clear: both; }
    .region-apac .language {
      width: 48.93617%;
      float: left;
      margin-right: 2.12766%; }
      .region-apac .language:nth-child(2n) {
        float: right;
        margin-right: 0; }
  .modal-close,
  .modal-backdrop,
  .locale-header {
    display: none; } }

@media (min-width: 640px) {
  .locale-selector {
    z-index: 10; }
    .locale-selector.in {
      display: inherit; }
    .locale-selector [class*="flag-"] {
      height: 23px;
      height: 1.4375rem;
      margin-bottom: 20px;
      margin-bottom: 1.25rem;
      padding: 4px 0 4px 45px;
      padding: 0.25rem 0 0.25rem 2.8125rem;
      font-size: 16px;
      font-size: 1rem; }
      .locale-selector [class*="flag-"]:before {
        top: 2px;
        top: 0.125rem;
        width: 32px;
        width: 2rem;
        height: 21px;
        height: 1.3125rem; }
    .locale-selector [class*="region-"] {
      clear: both; }
  .pane-full-footer .container {
    position: relative; }
  .modal-link.locale {
    padding: 0 15px 0 35px;
    padding: 0 0.9375rem 0 2.1875rem; }
    .no-svg .modal-link.locale {
      padding-left: 10px;
      padding-left: 0.625rem; }
    .modal-link.locale .icon-caret {
      display: none; }
    .pane-full-footer .localization-modal .modal-link.locale {
      position: absolute;
      right: 38px;
      right: 2.375rem;
      bottom: 7px;
      bottom: 0.4375rem;
      padding: 9px 21px 9px 36px;
      padding: 0.5625rem 1.3125rem 0.5625rem 2.25rem;
      background-color: #222;
      border: 1px solid #666; }
  .region-europe .language-list {
    display: inline; }
  .language-list .language {
    width: 31.91489%;
    float: left;
    margin-right: 2.12766%; }
    .language-list .language:nth-child(3), .language-list .language:nth-child(6) {
      float: right;
      margin-right: 0; }
  .language-list + .language-list .language:nth-child(3), .language-list + .language-list .language:nth-child(6) {
    margin-right: 0; }
  .language-list + .language-list .language:nth-child(1), .language-list + .language-list .language:nth-child(4), .language-list + .language-list .language:nth-child(7) {
    float: right;
    margin-right: 0; } }

@media (min-width: 960px) {
  .language-list .language {
    clear: both;
    width: 100%;
    float: left;
    margin-left: 0;
    margin-right: 0; }
    .language-list .language:nth-child(3), .language-list .language:nth-child(6) {
      clear: both;
      float: none;
      margin: auto; }
  .language-list + .language-list .language:nth-child(1), .language-list + .language-list .language:nth-child(4), .language-list + .language-list .language:nth-child(7) {
    clear: both;
    float: none;
    margin: auto; }
  .locale-selector [class*="region-"] {
    clear: none; }
  .locale-selector [class*="flag-"] {
    height: 33px;
    height: 2.0625rem;
    margin-bottom: 20px;
    margin-bottom: 1.25rem;
    padding: 4px 0 4px 60px;
    padding: 0.25rem 0 0.25rem 3.75rem;
    font-size: 16px;
    font-size: 1rem; }
    .locale-selector [class*="flag-"]:before {
      top: -2px;
      top: -0.125rem;
      width: 48px;
      width: 3rem;
      height: 33px;
      height: 2.0625rem; }
  .region-northamerica,
  .region-apac {
    width: 23.40426%;
    float: left;
    margin-right: 2.12766%; }
  .region-europe {
    width: 48.93617%;
    float: left;
    margin-right: 2.12766%; }
    .region-europe .language-list {
      display: block;
      width: 48.93617%;
      float: left;
      margin-right: 2.12766%; }
      .region-europe .language-list:last-child {
        float: right;
        margin-right: 0; }
      .region-europe .language-list + .language-list {
        margin-right: 0; }
  .region-apac {
    float: right;
    margin-right: 0; } }

.element-invisible,
[data-action="is-hidden"] {
  display: none !important; }

.is-hidden,
.hidden,
.lazy-load {
  display: none; }

.show-for-region-eu {
  display: none; }
  .superregion-europe .show-for-region-eu {
    display: inherit; }

.show-for-region-na {
  display: none; }
  .superregion-north-america .show-for-region-na {
    display: inherit; }

.show-for-region-apac {
  display: none; }
  .superregion-apac .show-for-region-apac {
    display: inherit; }

.hide-for-region-eu {
  display: inherit; }
  .superregion-europe .hide-for-region-eu {
    display: none; }

.hide-for-region-na {
  display: inherit; }
  .superregion-north-america .hide-for-region-na {
    display: none; }

.hide-for-region-apac {
  display: inherit; }
  .superregion-apac .hide-for-region-apac {
    display: none; }

.is-invisible {
  visibility: hidden; }

.is-visible {
  visibility: visible; }

@media (min-width: 0) and (max-width: 640px) {
  .hide-on-mobile {
    display: none !important; } }

@media (min-width: 640px) {
  .hide-on-desk {
    display: none !important; } }

@media (min-width: 640px) and (max-width: 960px) {
  .hide-on-middle {
    display: none !important; } }

@media (min-width: 960px) {
  .hide-on-large {
    display: none !important; } }

.lt-ie9 .hide-on-desk,
.lt-ie9 .hide-on-middle,
.lt-ie9 .hide-on-large {
  display: none !important; }

.is-shown,
[data-action="is-showing"] {
  display: inherit !important; }

.align-left {
  text-align: left !important; }

.align-center {
  text-align: center !important; }

.align-right {
  text-align: right !important; }

.align-justify {
  text-align: justify !important; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0; }

.no-select {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none; }

.list-links {
  clear: both; }
  .list-links li {
    margin-bottom: 20px;
    margin-bottom: 1.25rem;
    font-style: normal;
    font-family: "Gotham A", "Gotham B", "M Hei PRC W45", "M Hei HK W42", "M Hei HK W40", "HelveticaNeue-Regular", "Helvetica Neue Regular", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 15px;
    line-height: 21px;
    font-size: 0.9375rem;
    line-height: 1.3125rem;
    clear: both;
    cursor: pointer;
    color: #c00; }
    .list-links li a {
      color: #c00; }
      .list-links li a:hover {
        color: #f00; }
    .list-links li:hover {
      color: #f00; }

.list-link {
  margin-bottom: 20px;
  margin-bottom: 1.25rem;
  font-style: normal;
  font-family: "Gotham A", "Gotham B", "M Hei PRC W45", "M Hei HK W42", "M Hei HK W40", "HelveticaNeue-Regular", "Helvetica Neue Regular", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 15px;
  line-height: 21px;
  font-size: 0.9375rem;
  line-height: 1.3125rem;
  clear: both;
  cursor: pointer;
  color: #c00; }
  .list-link a {
    color: #c00; }
    .list-link a:hover {
      color: #f00; }
  .list-link:hover {
    color: #f00; }

.basic-fade-out {
  -webkit-transition: opacity 0.5s ease-in-out;
  -moz-transition: opacity 0.5s ease-in-out;
  -o-transition: opacity 0.5s ease-in-out;
  transition: opacity 0.5s ease-in-out;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opactiy=0);
  -khtml-opacity: 0;
  -moz-opacity: 0;
  opacity: 0; }

.basic-fade-in {
  -webkit-transition: opacity 0.5s ease-in-out;
  -moz-transition: opacity 0.5s ease-in-out;
  -o-transition: opacity 0.5s ease-in-out;
  transition: opacity 0.5s ease-in-out;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter: alpha(opactiy=100);
  -khtml-opacity: 1;
  -moz-opacity: 1;
  opacity: 1; }

.is-scrollable {
  overflow-y: auto; }

.offwindow {
  position: absolute;
  top: -400px;
  left: -400px;
  height: 1px;
  width: 1px;
  margin-top: -1px; }
  .offwindow .lazy-load {
    height: 0;
    width: 0; }

.svg .icon-png {
  display: none; }

.no-svg .icon-svg {
  display: none; }

.caption-line {
  position: relative;
  margin-top: 45px;
  margin-top: 2.8125rem;
  padding-top: 45px;
  padding-top: 2.8125rem; }
  .caption-line:before {
    content: " ";
    position: absolute;
    top: 0;
    width: 100px;
    height: 1px;
    background-color: black; }
  .caption-line.caption-line-alternate {
    margin-top: 0;
    padding-top: 0; }
    .caption-line.caption-line-alternate:before {
      top: -20px; }

.no-bullets {
  list-style: none; }
  .no-bullets li {
    list-style-image: none;
    list-style-type: none;
    margin-left: 0; }

.no-bullet {
  list-style-image: none;
  list-style-type: none;
  margin-left: 0; }

.pull-quote {
  font-size: 40px;
  font-size: 2.5rem;
  font-style: italic; }
  @media (min-width: 0) and (max-width: 640px) {
    .pull-quote {
      margin-top: 20px;
      margin-top: 1.25rem;
      margin-bottom: 20px;
      margin-bottom: 1.25rem;
      padding-top: 20px;
      padding-top: 1.25rem;
      padding-bottom: 20px;
      padding-bottom: 1.25rem;
      font-size: 30px;
      font-size: 1.875rem;
      border-top: 1px solid #ccc;
      border-bottom: 1px solid #ccc; } }

article.node-unpublished {
  background-color: #fff; }

.blog .image-left,
.blog .image-right {
  clear: both;
  overflow: hidden; }
  .blog .image-left .left, .blog .image-left .right,
  .blog .image-right .left,
  .blog .image-right .right {
    margin-top: 6px;
    margin-top: 0.375rem;
    padding-bottom: 15px;
    padding-bottom: 0.9375rem;
    max-width: 200px; }
  .blog .image-left .left,
  .blog .image-right .left {
    float: left;
    padding-right: 15px;
    padding-right: 0.9375rem; }
  .blog .image-left .right,
  .blog .image-right .right {
    float: right;
    padding-left: 15px;
    padding-left: 0.9375rem; }

.flyout {
  top: -59px;
  top: -3.6875rem; }

.form-item [class*="errors-list"] {
  bottom: -19px;
  bottom: -1.1875rem;
  width: 100%;
  text-transform: lowercase; }
  .i18n-fr_BE .form-item [class*="errors-list"],
  .i18n-nl_BE .form-item [class*="errors-list"],
  .i18n-da .form-item [class*="errors-list"],
  .i18n-de .form-item [class*="errors-list"],
  .i18n-fr .form-item [class*="errors-list"],
  .i18n-it .form-item [class*="errors-list"],
  .i18n-nl .form-item [class*="errors-list"],
  .i18n-no .form-item [class*="errors-list"],
  .i18n-de_AT .form-item [class*="errors-list"],
  .i18n-de_CH .form-item [class*="errors-list"],
  .i18n-fr_CH .form-item [class*="errors-list"],
  .i18n-it_CH .form-item [class*="errors-list"],
  .i18n-sv_SE .form-item [class*="errors-list"],
  .i18n-fr_CA .form-item [class*="errors-list"],
  .i18n-zh_CN .form-item [class*="errors-list"],
  .i18n-ja_JP .form-item [class*="errors-list"] {
    bottom: inherit;
    top: 60px;
    top: 3.75rem; }

.form-item [class*="error"] + [class*="errors-list"] li {
  font-size: 12px;
  font-size: 0.75rem;
  color: #c00; }

.common-form-layouts [class*="-first-name"] {
  width: 47.82609%;
  float: left;
  margin-right: 4.34783%; }

.common-form-layouts [class*="-last-name"] {
  width: 47.82609%;
  float: right;
  margin-right: 0; }

.common-form-layouts .has-middle-name [class*="-first-name"] {
  width: 30.43478%;
  float: left;
  margin-right: 4.34783%; }
  @media (min-width: 0) and (max-width: 640px) {
    .common-form-layouts .has-middle-name [class*="-first-name"] {
      width: 100%;
      float: left;
      margin-left: 0;
      margin-right: 0; } }

.common-form-layouts .has-middle-name [class*="-middle-name"] {
  width: 30.43478%;
  float: left;
  margin-right: 4.34783%; }
  @media (min-width: 0) and (max-width: 640px) {
    .common-form-layouts .has-middle-name [class*="-middle-name"] {
      width: 100%;
      float: left;
      margin-left: 0;
      margin-right: 0; } }

.common-form-layouts .has-middle-name [class*="-last-name"] {
  width: 30.43478%;
  float: right;
  margin-right: 0; }
  @media (min-width: 0) and (max-width: 640px) {
    .common-form-layouts .has-middle-name [class*="-last-name"] {
      width: 100%;
      float: left;
      margin-left: 0;
      margin-right: 0; } }

.common-form-layouts .has-local-name [class*='-local-name'] {
  width: 47.82609%;
  float: left;
  margin-right: 4.34783%;
  margin-right: 52.17391%; }

.common-form-layouts .contact-info [class*="-phone-number"] {
  width: 30.43478%;
  float: left;
  margin-right: 4.34783%; }

.common-form-layouts .contact-info [class*="-email"] {
  width: 65.21739%;
  float: right;
  margin-right: 0; }

.common-form-layouts .contact-info [class*="-username"] {
  clear: both; }

.common-form-layouts [class*='-city'],
.common-form-layouts [class*='-province'] {
  width: 30.43478%;
  float: left;
  margin-right: 4.34783%; }

.common-form-layouts [class*='-postal-code'] {
  width: 30.43478%;
  float: right;
  margin-right: 0; }

.common-form-layouts [class*="-district"] {
  clear: both; }

.province-hidden .common-form-layouts [class*='-city'] {
  width: 82.6087%;
  float: left;
  margin-right: 4.34783%; }

.common-form-layouts .province-hidden [class*='-city'] {
  width: 65.21739%;
  float: left;
  margin-right: 4.34783%; }

.common-form-layouts .has-standard-address-layout [class*='-city'],
.common-form-layouts .has-standard-address-layout [class*='-province'] {
  width: 30.43478%;
  float: left;
  margin-right: 4.34783%; }

.common-form-layouts .has-standard-address-layout [class*='-postal-code'] {
  width: 30.43478%;
  float: right;
  margin-right: 0; }

.common-form-layouts [class*="-district"] {
  clear: both; }

.common-form-layouts [class*='-date-month'] {
  width: 30.43478%;
  float: left;
  margin-right: 4.34783%; }

.common-form-layouts [class*='-date-day'] {
  width: 30.43478%;
  float: left;
  margin-right: 4.34783%; }

.common-form-layouts [class*='-date-year'] {
  width: 30.43478%;
  float: right;
  margin-right: 0; }

.common-form-layouts .does-not-have-middle-name [class*="-middle-name"] {
  display: none; }

#SnapABug_bImg {
  max-width: 50%; }

.panel-pane.pane-user-login {
  display: none !important; }

html.page-has-skinny-footer body.admin-menu {
  margin-top: 0 !important;
  padding-top: 28px !important; }

html body.panels-ipe {
  margin-bottom: 0 !important; }

html body.admin-menu #admin-menu {
  -webkit-box-shadow: 0 0 0 transparent;
  -moz-box-shadow: 0 0 0 transparent;
  box-shadow: 0 0 0 transparent;
  width: 100% !important; }

html body.admin-menu #admin-menu-wrapper {
  font-size: 10px !important; }

.i18n-en_CA .hide-for-i18n-en_CA,
.i18n-fr_CA .hide-for-i18n-fr_CA,
.i18n-en .hide-for-i18n-en,
.i18n-fr_BE .hide-for-i18n-fr_BE,
.i18n-nl_BE .hide-for-i18n-nl_BE,
.i18n-da .hide-for-i18n-da,
.i18n-de .hide-for-i18n-de,
.i18n-fr .hide-for-i18n-fr,
.i18n-en_GB .hide-for-i18n-en_GB,
.i18n-it .hide-for-i18n-it,
.i18n-nl .hide-for-i18n-nl,
.i18n-no .hide-for-i18n-no,
.i18n-de_AT .hide-for-i18n-de_AT,
.i18n-de_CH .hide-for-i18n-de_CH,
.i18n-fr_CH .hide-for-i18n-fr_CH,
.i18n-it_CH .hide-for-i18n-it_CH,
.i18n-sv_SE .hide-for-i18n-sv_SE,
.i18n-en_EU .hide-for-i18n-en_EU,
.i18n-en_AU .hide-for-i18n-en_AU,
.i18n-zh_CN .hide-for-i18n-zh_CN {
  display: none; }