@import url(../marketing/charging_shared.css);
.sticky-nav {
  -webkit-backface-visibility: visible;
          backface-visibility: visible;
  background-color: rgba(208, 209, 210, 0.95);
  left: 0;
  transform: translate3d(0, 0, 0);
  width: 100%;
  z-index: 1001; }
  @media (min-width: 0) and (max-width: 639px) {
    .sticky-nav {
      transform: translate3d(0, 0, 0);
      transition: transform 300ms ease-in-out; }
      .tsla-header-scrolled .sticky-nav {
        transform: translate3d(0, -52px, 0); }
        .tsla-header-scrolled .sticky-nav.tsla-prevent-scroll .tsla-header-scrolled .sticky-nav {
          transform: none;
          transition: 0 0 0; } }
  @media (min-width: 640px) {
    .sticky-nav .superregion-europe.page-modelx .sticky-nav .superregion-europe .sticky-btn--test_drive,
    .sticky-nav .superregion-europe.page-models .sticky-nav .superregion-europe .sticky-btn--test_drive {
      display: none; } }
  @media (min-width: 0) and (max-width: 639px) {
    .sticky-nav .superregion-europe.page-modelx .sticky-nav .superregion-europe a[class*='btn-'],
    .sticky-nav .superregion-europe.page-models .sticky-nav .superregion-europe a[class*='btn-'] {
      display: none; }
    .sticky-nav .superregion-europe.page-modelx .sticky-nav .superregion-europe a.sticky-btn--custom_order,
    .sticky-nav .superregion-europe.page-models .sticky-nav .superregion-europe a.sticky-btn--custom_order {
      display: inline-block; } }
  @media (min-width: 640px) {
    .sticky-nav .i18n-fr_CA.page-modelx .sticky-nav .i18n-fr_CA .sticky-btn--test_drive,
    .sticky-nav .i18n-fr_CA.page-models .sticky-nav .i18n-fr_CA .sticky-btn--test_drive {
      display: none; } }
  @media (min-width: 0) and (max-width: 639px) {
    .sticky-nav .i18n-fr_CA.page-modelx .sticky-nav .i18n-fr_CA a[class*='btn-'],
    .sticky-nav .i18n-fr_CA.page-models .sticky-nav .i18n-fr_CA a[class*='btn-'] {
      display: none; }
    .sticky-nav .i18n-fr_CA.page-modelx .sticky-nav .i18n-fr_CA a.sticky-btn--custom_order,
    .sticky-nav .i18n-fr_CA.page-models .sticky-nav .i18n-fr_CA a.sticky-btn--custom_order {
      display: inline-block; } }
  .sticky-nav .container {
    -ms-flex-line-pack: center;
        align-content: center;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-flow: row nowrap;
        flex-flow: row nowrap;
    -ms-flex-pack: justify;
        justify-content: space-between; }
    @media (min-width: 0) and (max-width: 639px) {
      .sticky-nav .container {
        -ms-flex-align: center;
            align-items: center; } }
    @media (min-width: 640px) {
      .sticky-nav .container {
        -ms-flex-align: baseline;
            align-items: baseline; } }

.sticky-nav--buttons {
  margin: 0; }
  .sticky-nav--buttons span {
    display: inline; }
  .sticky-nav--buttons .btn-primary {
    transition: all 0.5s linear;
    transform: translateZ(0);
    min-width: 0; }

.sticky-nav--title {
  font-size: 20px;
  font-weight: 100;
  line-height: 30px;
  text-align: left;
  margin-bottom: 0; }
  .page-destination-charging .sticky-nav--title {
    line-height: 1.25;
    margin-bottom: 0;
    max-width: 30%; }

.sticky-nav--link {
  padding: 0 20px; }

@media (min-width: 640px) {
  .page-has-skinny-footer .content-constrain {
    margin-bottom: 70px; }
    .i18n-de .page-has-skinny-footer .content-constrain,
    .i18n-fr .page-has-skinny-footer .content-constrain,
    .i18n-de_CH .page-has-skinny-footer .content-constrain,
    .i18n-fr_CH .page-has-skinny-footer .content-constrain,
    .i18n-fr_LU .page-has-skinny-footer .content-constrain,
    .i18n-de_LU .page-has-skinny-footer .content-constrain,
    .i18n-fr_BE .page-has-skinny-footer .content-constrain,
    .i18n-fr_CA .page-has-skinny-footer .content-constrain {
      margin-bottom: 0; }
  .page-has-skinny-footer .page-supercharger.i18n-ko_KR .content-constrain {
    margin-bottom: 0; }
  .sticky-nav {
    border-top: 1px solid #f4f4f4;
    bottom: 0;
    padding: 15px 0;
    position: fixed; }
    .sticky-nav .btn-primary,
    .sticky-nav .btn-secondary {
      margin-top: 0;
      margin-bottom: 0; }
  [id='get-updates'] {
    display: none; }
  .sticky-nav--title {
    -ms-flex-positive: 1;
        flex-grow: 1; }
  .sticky-nav--meta {
    -ms-flex-line-pack: center;
        align-content: center;
    -ms-flex-align: baseline;
        align-items: baseline;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-flow: row nowrap;
        flex-flow: row nowrap;
    -ms-flex-positive: 2;
        flex-grow: 2;
    -ms-flex-pack: end;
        justify-content: flex-end; }
  .page-modelx .sticky-nav [class*='btn-'][href*='/new'], .page-modelx .sticky-nav [class*='btn-'][href*='/preowned'] {
    display: none; }
  .page-modelx.i18n-en .sticky-nav [class*='btn-'][href*='/new'], .page-modelx.i18n-en .sticky-nav [class*='btn-'][href*='/preowned'] {
    display: inline-block; }
  .page-models.i18n-es_MX .sticky-nav [class*='btn-'][href*='/new'], .page-models.i18n-es_MX .sticky-nav [class*='btn-'][href*='/preowned'], .page-models.i18n-en_AU .sticky-nav [class*='btn-'][href*='/new'], .page-models.i18n-en_AU .sticky-nav [class*='btn-'][href*='/preowned'], .page-models.i18n-zh_CN .sticky-nav [class*='btn-'][href*='/new'], .page-models.i18n-zh_CN .sticky-nav [class*='btn-'][href*='/preowned'], .page-models.i18n-zh_TW .sticky-nav [class*='btn-'][href*='/new'], .page-models.i18n-zh_TW .sticky-nav [class*='btn-'][href*='/preowned'], .page-models.i18n-ko_KR .sticky-nav [class*='btn-'][href*='/new'], .page-models.i18n-ko_KR .sticky-nav [class*='btn-'][href*='/preowned'],
  .page-supercharger.i18n-es_MX .sticky-nav [class*='btn-'][href*='/new'],
  .page-supercharger.i18n-es_MX .sticky-nav [class*='btn-'][href*='/preowned'],
  .page-supercharger.i18n-en_AU .sticky-nav [class*='btn-'][href*='/new'],
  .page-supercharger.i18n-en_AU .sticky-nav [class*='btn-'][href*='/preowned'],
  .page-supercharger.i18n-zh_CN .sticky-nav [class*='btn-'][href*='/new'],
  .page-supercharger.i18n-zh_CN .sticky-nav [class*='btn-'][href*='/preowned'],
  .page-supercharger.i18n-zh_TW .sticky-nav [class*='btn-'][href*='/new'],
  .page-supercharger.i18n-zh_TW .sticky-nav [class*='btn-'][href*='/preowned'],
  .page-supercharger.i18n-ko_KR .sticky-nav [class*='btn-'][href*='/new'],
  .page-supercharger.i18n-ko_KR .sticky-nav [class*='btn-'][href*='/preowned'],
  .page-destination-charging.i18n-es_MX .sticky-nav [class*='btn-'][href*='/new'],
  .page-destination-charging.i18n-es_MX .sticky-nav [class*='btn-'][href*='/preowned'],
  .page-destination-charging.i18n-en_AU .sticky-nav [class*='btn-'][href*='/new'],
  .page-destination-charging.i18n-en_AU .sticky-nav [class*='btn-'][href*='/preowned'],
  .page-destination-charging.i18n-zh_CN .sticky-nav [class*='btn-'][href*='/new'],
  .page-destination-charging.i18n-zh_CN .sticky-nav [class*='btn-'][href*='/preowned'],
  .page-destination-charging.i18n-zh_TW .sticky-nav [class*='btn-'][href*='/new'],
  .page-destination-charging.i18n-zh_TW .sticky-nav [class*='btn-'][href*='/preowned'],
  .page-destination-charging.i18n-ko_KR .sticky-nav [class*='btn-'][href*='/new'],
  .page-destination-charging.i18n-ko_KR .sticky-nav [class*='btn-'][href*='/preowned'] {
    display: none; }
  .page-models.i18n-en_MO [class*='btn-'][href*='/new'], .page-models.i18n-zh_MO [class*='btn-'][href*='/new'],
  .page-supercharger.i18n-en_MO [class*='btn-'][href*='/new'],
  .page-supercharger.i18n-zh_MO [class*='btn-'][href*='/new'],
  .page-destination-charging.i18n-en_MO [class*='btn-'][href*='/new'],
  .page-destination-charging.i18n-zh_MO [class*='btn-'][href*='/new'] {
    display: none; }
  .i18n-en_AU .sticky-nav .modal-request-callback,
  .i18n-en_NZ .sticky-nav .modal-request-callback,
  .i18n-ko_KR .sticky-nav .modal-request-callback {
    display: none; }
  .i18n-de_LU .sticky-nav [href*='new'],
  .i18n-fr_LU .sticky-nav [href*='new'] {
    display: none; }
  .page-new.superregion-europe .sticky-nav [href*='drive'], .page-new.i18n-fr_CA .sticky-nav [href*='drive'],
  .page-preowned.superregion-europe .sticky-nav [href*='drive'],
  .page-preowned.i18n-fr_CA .sticky-nav [href*='drive'],
  .page-supercharger.superregion-europe .sticky-nav [href*='drive'],
  .page-supercharger.i18n-fr_CA .sticky-nav [href*='drive'],
  .page-destination-charging.superregion-europe .sticky-nav [href*='drive'],
  .page-destination-charging.i18n-fr_CA .sticky-nav [href*='drive'] {
    display: none; }
  .page-new.superregion-europe .sticky-nav [href*='new'], .page-new.i18n-fr_CA .sticky-nav [href*='new'] {
    display: none; }
  .page-new.i18n-de_AT .sticky-nav [href*='preowned'], .page-new.i18n-de .sticky-nav [href*='preowned'], .page-new.i18n-de_CH .sticky-nav [href*='preowned'] {
    display: none; }
  .page-preowned.superregion-europe .sticky-nav [href*='preowned'], .page-preowned.i18n-fr_CA .sticky-nav [href*='preowned'] {
    display: none; }
  .page-preowned.i18n-de_AT .sticky-nav [href*='new'], .page-preowned.i18n-de .sticky-nav [href*='new'], .page-preowned.i18n-de_CH .sticky-nav [href*='new'] {
    display: none; }
  .sticky-nav [id='tesla_insider_get_updates_form'] h4,
  .sticky-nav [id='tesla_insider_get_updates_form'] p {
    display: inline;
    margin: 0 auto;
    max-width: 90%; }
  .sticky-nav [id='tesla_insider_get_updates_form'] h4 {
    padding-right: 10px; }
  .sticky-nav [id='tesla_insider_get_updates_form'] .form-item-usermail {
    display: inline-block; }
  .sticky-nav [id='tesla_insider_get_updates_form'] .subtitle,
  .sticky-nav [id='tesla_insider_get_updates_form'] .separator,
  .sticky-nav [id='tesla_insider_get_updates_form'] .notice {
    display: none; }
  .i18n-ko_KR [id='tesla_insider_get_updates_form'] {
    display: none; }
  [id='tesla_insider_get_updates_form'] [id='tesla-insider-details'],
  [id='tesla_insider_get_updates_form'] .form-label,
  [id='tesla_insider_get_updates_form'] .form-text,
  [id='tesla_insider_get_updates_form'] .submit-area,
  [id='tesla_insider_get_updates_form'] .label-text {
    display: inline-block; }
  [id='tesla_insider_get_updates_form'] .form-item {
    margin: 0; }
  [id='tesla_insider_get_updates_form'] .form-text {
    background-color: #fff;
    max-width: 250px; }
  [id='tesla_insider_get_updates_form'] .btn-primary {
    background-color: transparent;
    color: #b74134;
    min-width: 0;
    padding-left: 10px;
    padding-right: 10px;
    position: relative;
    top: -1px; }
  [id='tesla_insider_get_updates_form'] .label-text {
    margin-right: 20px; } }

@media (min-width: 640px) and (max-width: 960px) {
  [id='tesla_insider_get_updates_form'] .form-label {
    display: none; }
  [id='tesla_insider_get_updates_form'] .btn-primary {
    margin: 0; } }

@media (min-width: 0) and (max-width: 639px) {
  .page-new.superregion-europe .sticky-nav .btn-back-to-front,
  .page-new.superregion-europe .sticky-nav [href*='drive'], .page-new.i18n-fr_CA .sticky-nav .btn-back-to-front,
  .page-new.i18n-fr_CA .sticky-nav [href*='drive'],
  .page-preowned.superregion-europe .sticky-nav .btn-back-to-front,
  .page-preowned.superregion-europe .sticky-nav [href*='drive'],
  .page-preowned.i18n-fr_CA .sticky-nav .btn-back-to-front,
  .page-preowned.i18n-fr_CA .sticky-nav [href*='drive'] {
    display: none; }
  .page-new.superregion-europe .sticky-nav [href*='preowned'], .page-new.i18n-fr_CA .sticky-nav [href*='preowned'] {
    display: block !important; }
  .page-preowned.superregion-europe .sticky-nav [href*='new'], .page-preowned.i18n-fr_CA .sticky-nav [href*='new'] {
    display: block !important; }
  .page-supercharger .sticky-nav,
  .page-destination-charging .sticky-nav {
    top: 0; }
  .page-supercharger.superregion-europe .sticky-nav [href*='drive'], .page-supercharger.i18n-fr_CA .sticky-nav [href*='drive'],
  .page-destination-charging.superregion-europe .sticky-nav [href*='drive'],
  .page-destination-charging.i18n-fr_CA .sticky-nav [href*='drive'] {
    display: none; }
  .sticky-nav {
    border-bottom: 1px solid #f4f4f4;
    padding: 10px 0;
    position: absolute;
    top: 52px; }
    .sticky-nav.is-stuck {
      position: fixed;
      top: 52px; }
      .admin-menu .sticky-nav.is-stuck {
        top: 80px; }
    .sticky-nav .btn-primary,
    .sticky-nav .btn-secondary {
      display: block;
      font-size: 10px;
      margin: 0;
      min-width: 100px;
      width: initial; }
    .sticky-nav .btn-primary {
      float: left; }
    .sticky-nav .btn-secondary {
      float: right;
      margin-left: 5px; }
  .sticky-nav--title {
    font-family: 'Gotham Medium', 'system', sans-serif;
    font-family: var(--tds-fonts-combined--medium);
    font-size: 13px;
    text-transform: uppercase; }
  .sticky-nav--buttons {
    margin: 0;
    padding: 0; }
  [id='tesla_insider_get_updates_form'] {
    display: none; }
    [id='tesla_insider_get_updates_form'] .form-label {
      display: none; } }

@media (min-width: 0) and (max-width: 375px) {
  .sticky-nav .btn-primary,
  .sticky-nav .btn-secondary {
    min-width: 0;
    padding-left: 10px;
    padding-right: 10px; } }

[id='stationary-storage-callback-modal'] .modal-dialog {
  top: 15%;
  min-height: auto; }

[id='stationary-storage-callback-modal'] .modal-contact-pref::after {
  content: ' ';
  display: block;
  clear: both; }

[id='stationary-storage-callback-modal'] .separator {
  width: 100%;
  border-top: 1px solid #757575;
  border-top: 1px solid var(--tds-color--grey35);
  margin: 36px 0 20px;
  height: 0;
  clear: both; }
  [id='stationary-storage-callback-modal'] .separator::before {
    content: none; }

[id='stationary-storage-callback-modal'] .modal-body {
  padding-top: 30px; }
  @media (min-width: 0) and (max-width: 639px) {
    [id='stationary-storage-callback-modal'] .modal-body {
      padding-left: 20px;
      padding-right: 20px; } }

[id='stationary-storage-callback-modal'] .modal-title {
  padding-top: 50px;
  margin-bottom: 0; }

[id='stationary-storage-callback-modal'] .form-item:nth-child(even) {
  width: 49.15254%;
  float: left;
  margin-right: 1.69492%; }

[id='stationary-storage-callback-modal'] .form-item:nth-child(odd), [id='stationary-storage-callback-modal'] .form-item.form-item-propertyType, [id='stationary-storage-callback-modal'] .form-item.form-item-inquiryType {
  width: 49.15254%;
  float: right;
  margin-right: 0; }

[id='stationary-storage-callback-modal'] .form-item.form-item-address1,
[id='stationary-storage-callback-modal'] .form-item.form-item-contact-pref ~ .form-item-email {
  width: 100%;
  float: left;
  margin-left: 0;
  margin-right: 0; }

@media (min-width: 640px) {
  [id='stationary-storage-callback-modal'] .form-item.form-item-contact-pref ~ .form-item-email {
    width: 49.15254%;
    float: right;
    margin-right: 0; }
  [id='stationary-storage-callback-modal'] .form-item.form-item-address1 {
    width: 32.20339%;
    float: left;
    margin-right: 1.69492%; }
  [id='stationary-storage-callback-modal'] .form-item.form-item-contact-pref,
  [id='stationary-storage-callback-modal'] .form-item.form-item-contact-pref + .form-item-phone {
    width: 23.72881%;
    float: left;
    margin-right: 1.69492%; }
  [id='stationary-storage-callback-modal'] .form-item.form-item-city, [id='stationary-storage-callback-modal'] .form-item.form-item-state, [id='stationary-storage-callback-modal'] .form-item.form-item-postalcode, [id='stationary-storage-callback-modal'] .form-item.form-item-address2 {
    width: 15.25424%;
    float: left;
    margin-right: 1.69492%; } }

[id='stationary-storage-callback-modal'] .form-type-checkbox {
  padding-top: 22px; }

[id='stationary-storage-callback-modal'] .form-type-select {
  margin-bottom: 17px; }

[id='stationary-storage-callback-modal'] .form-select-overlay {
  overflow: visible; }

[id='stationary-storage-callback-modal'] .submit-area {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-flow: row nowrap;
      flex-flow: row nowrap;
  -ms-flex-pack: end;
      justify-content: flex-end;
  -ms-flex-align: center;
      align-items: center;
  -ms-flex-line-pack: center;
      align-content: center; }

[id='stationary-storage-callback-modal'] .notice {
  padding-right: 30px; }

[id='stationary-storage-callback-modal'] .thanks {
  text-align: center;
  padding-bottom: 30px; }
  [id='stationary-storage-callback-modal'] .thanks h3 {
    display: none; }
  [id='stationary-storage-callback-modal'] .thanks p {
    margin: 0; }

[id='system_messages'] {
  background-color: #eee;
  background-color: var(--tds-color--grey60); }
  [id='system_messages'] ul.tabs::before, [id='system_messages'] ul.tabs::after {
    content: '';
    display: table; }
  [id='system_messages'] ul.tabs::after {
    clear: both; }
  [id='system_messages'] ul.tabs li {
    display: inline-block;
    float: left;
    margin-right: 20px;
    padding: 10px 0; }
  [id='system_messages'] ul.tabs a {
    color: #393c41; }
  [id='system_messages'] .panel-pane {
    font-size: 14px; }

[id='second-nav'] .nav-block li {
  float: left;
  list-style-image: none;
  list-style-type: none;
  margin-right: 15px;
  padding-bottom: 0; }
  [id='second-nav'] .nav-block li a {
    box-shadow: none;
    color: #393c41;
    font-size: 13px;
    line-height: 48px;
    padding: 32px 0 8px; }
    [id='second-nav'] .nav-block li a:hover {
      color: #000; }
  [id='second-nav'] .nav-block li.nav-selected .nav-link {
    box-shadow: 0 1px 0 0 currentColor;
    box-shadow: 0 var(--tds-border-width--small) 0 0 currentColor; }
  [id='second-nav'] .nav-block li.last, [id='second-nav'] .nav-block li:last-child {
    margin-right: 0; }

.sub-nav-mobile {
  margin: 0 20px; }
  .sub-nav-mobile ul {
    border: 1px solid #d0d1d2;
    border: 1px solid var(--tds-color--grey50);
    padding: 20px;
    margin: 0;
    border-radius: 10px;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    background: #fff; }
  .sub-nav-mobile li {
    -ms-flex-positive: 1;
        flex-grow: 1;
    text-align: center; }
  .sub-nav-mobile a {
    color: #393c41;
    font-size: 12px; }
    .sub-nav-mobile a:hover {
      color: #b74134; }
  .sub-nav-mobile.floating-nav {
    position: fixed;
    margin: 0;
    width: 100%;
    top: -100px;
    z-index: 100;
    transition: top .5s; }
    .sub-nav-mobile.floating-nav nav {
      margin: 0 20px; }
    .sub-nav-mobile.floating-nav.show {
      top: 60px; }
  .sub-nav-mobile.non-floating-nav {
    margin-top: 20px; }

.section-sub-nav {
  position: relative; }
  .section-sub-nav::before, .section-sub-nav::after {
    content: '';
    display: table; }
  .section-sub-nav::after {
    clear: both; }
  .section-sub-nav .container {
    position: relative; }
    .page-models-preowned .section-sub-nav .container .sub-nav {
      margin-right: 20px; }
  .tsla-header-semitransparent .section-sub-nav,
  .tsla-header-transparent .section-sub-nav {
    margin-top: 96px; }
  .section-sub-nav .section-title {
    border-bottom: 1px solid #f4f4f4;
    color: #000;
    font-size: 30px;
    margin-bottom: 35px;
    padding-bottom: 25px;
    padding-top: 0;
    position: relative;
    top: 0;
    font-weight: normal;
    margin-top: 0; }
    @media (min-width: 0) and (max-width: 639px) {
      .section-sub-nav .section-title {
        border-bottom: 0;
        font-size: 24px; } }
    .section-sub-nav .section-title a {
      color: #000; }
  .section-sub-nav .sub-nav {
    clear: both;
    position: absolute;
    right: 20px;
    top: 9px; }
    [dir='rtl'] .section-sub-nav .sub-nav {
      right: auto;
      left: 20px; }
    .section-sub-nav .sub-nav .nav-item {
      display: block;
      float: left;
      margin: 0 0 0 20px; }
      .section-sub-nav .sub-nav .nav-item:first-child {
        margin-left: 0; }
    .section-sub-nav .sub-nav .nav-selected .nav-link {
      opacity: .7; }
    .section-sub-nav .sub-nav .nav-selected .nav-item {
      display: block;
      float: left;
      margin: 0 0 0 20px; }
      .section-sub-nav .sub-nav .nav-selected .nav-item:first-child {
        margin-left: 0; }
    .section-sub-nav .sub-nav .nav-link {
      color: #393c41;
      font-size: 13px;
      text-decoration: none;
      box-shadow: none; }
    .section-sub-nav .sub-nav .btn-order {
      color: #fff;
      font-size: 8px; }
      .i18n-zh_CN .section-sub-nav .sub-nav .btn-order {
        font-size: 13px;
        padding: 6px 12px 5px;
        position: relative;
        top: -2px; }
  .section-sub-nav .separator-before {
    border-left: 1px solid rgba(57, 60, 65, 0.5);
    padding-left: 20px; }
  .section-sub-nav .separator-after {
    border-right: 1px solid rgba(57, 60, 65, 0.5);
    padding-right: 20px; }
  .section-sub-nav.alternative .section-title,
  .alternative .section-sub-nav .section-title {
    border-bottom: 1px solid rgba(255, 255, 255, 0.5);
    color: #fff; }
    .section-sub-nav.alternative .section-title a,
    .alternative .section-sub-nav .section-title a {
      color: #fff; }
  .section-sub-nav.alternative .nav-link,
  .alternative .section-sub-nav .nav-link {
    color: #fff;
    transition: color 100ms linear; }
    .section-sub-nav.alternative .nav-link:hover,
    .alternative .section-sub-nav .nav-link:hover {
      color: #f4f4f4;
      transition: color 100ms linear; }
  .section-sub-nav.alternative .sub-nav a,
  .alternative .section-sub-nav .sub-nav a {
    color: #fff; }
  .section-sub-nav.alternative .separator-before,
  .alternative .section-sub-nav .separator-before {
    border-left-color: rgba(255, 255, 255, 0.5); }
  .section-sub-nav.alternative .separator-after,
  .alternative .section-sub-nav .separator-after {
    border-right-color: rgba(255, 255, 255, 0.5); }
  .section-sub-nav.no-keyline .section-title,
  .no-keyline .section-sub-nav .section-title {
    border-bottom: 0;
    margin-bottom: 0; }

.nav-left {
  float: left; }

.nav-right {
  float: right; }

.nav-centered {
  display: block;
  margin: auto;
  overflow: hidden;
  text-align: center; }

@media (min-width: 0) and (max-width: 639px) {
  .section-sub-nav .sub-nav {
    display: none; } }

@media (min-width: 640px) {
  .nav_search {
    display: -ms-flexbox;
    display: flex;
    padding: 0 0 22px;
    text-align: right;
    width: auto; }
    .expanded-search .nav_search {
      float: right;
      text-align: right;
      width: auto; }
    [dir='rtl'] .nav_search {
      float: left; } }

main .nav_search {
  display: none; }
  @media (min-width: 640px) {
    main .nav_search {
      display: -ms-flexbox;
      display: flex;
      -ms-flex-align: end;
          align-items: flex-end; }
      main .nav_search .nav-left {
        float: left; }
      main .nav_search .nav-right {
        float: right; } }

.nav-sticky {
  max-width: 1440px;
  position: absolute;
  top: -1px;
  width: 100%;
  z-index: 10; }
  .nav-sticky.nav-animate {
    transition: top 0.5s linear;
    transform: translateZ(0); }
    .nav-sticky.nav-animate.is-stuck, .nav-sticky.nav-animate.nav-animate-away {
      transition: top 0.5s linear;
      transform: translateZ(0); }
  .nav-sticky.is-stuck, .nav-sticky.nav-animate-away {
    max-width: 1440px;
    position: fixed;
    width: 100%;
    z-index: 10; }
  .nav-sticky.nav-animate-away {
    top: -100px; }
  .section-sub-nav .nav-sticky .sub-nav {
    top: 21px; }

.nav-pill {
  text-align: center; }
  .nav-pill .nav-block {
    border-radius: 100px;
    border: 1px solid #f4f4f4;
    border: 1px solid var(--tds-color--grey70);
    display: inline-block;
    margin-bottom: 1px;
    overflow: hidden; }
  .nav-pill .nav-link {
    font-weight: 100;
    color: #000;
    cursor: pointer;
    display: block;
    font-size: 18px;
    padding: 16px 0;
    width: 175px; }
  .nav-pill .nav-selected {
    background-color: #a2a3a5;
    color: #000; }
  .nav-pill .nav-item {
    border-left: 1px solid #f4f4f4;
    margin: 0; }
    .nav-pill .nav-item:first-child {
      border-left: 0; }

@media (min-width: 0) and (max-width: 639px) {
  .section-sub-nav {
    margin-top: 33px; }
    .section-sub-nav .sub-nav {
      display: none; }
    .section-sub-nav .section-title {
      margin-bottom: 27px; }
      .page-about .section-sub-nav .section-title {
        padding-bottom: 18px; }
      .page-about-legal .section-sub-nav .section-title {
        padding-bottom: 22px; }
      .page-careers .section-sub-nav .section-title {
        margin-bottom: 31px; }
    .header-semitransparent .section-sub-nav,
    .header-transparent .section-sub-nav {
      margin-top: 83px; } }

.section-image {
  max-height: 100%;
  max-width: 100%; }

@media (min-width: 640px) {
  .section-wrap {
    padding: 70px 0; } }

@media (min-width: 0) and (max-width: 639px) {
  .section-wrap {
    padding: 35px 0; } }

@media (min-width: 640px) {
  .section-wrap .section-wrap {
    padding: 35px 0; } }

@media (min-width: 640px) {
  .section-container-grid {
    clear: both;
    overflow: hidden; }
    .section-container-grid .section-image {
      width: 49.15254%;
      float: left;
      margin-right: 1.69492%; }
    .section-container-grid .section-content {
      width: 40.67797%;
      float: left;
      margin-right: 1.69492%;
      margin-left: 8.47458%; }
    .section-container-grid .container {
      display: -ms-flexbox;
      display: flex;
      -ms-flex-flow: row nowrap;
          flex-flow: row nowrap;
      -ms-flex-pack: justify;
          justify-content: space-between;
      -ms-flex-align: center;
          align-items: center;
      -ms-flex-line-pack: center;
          align-content: center; } }
  @media (min-width: 640px) and (min-width: 640px) {
    .section-container-grid .section-alternating {
      margin-left: 8.47458%;
      margin-left: 8.47458%;
      -ms-flex-order: 2;
          order: 2; } }

@media (min-width: 640px) {
  .section-container [class*='section-'] {
    width: 49.15254%;
    float: left;
    margin-right: 1.69492%;
    margin-left: 25.42373%;
    margin-right: 25.42373%; } }

.section-hero {
  display: block;
  margin: auto; }
  @media (min-width: 0) and (max-width: 639px) {
    .section-hero {
      max-width: 70%; } }

.section-release_notes {
  overflow: hidden;
  background-color: #d0d1d2;
  background-color: var(--tds-color--grey50); }
  @media (min-width: 640px) {
    .section-release_notes {
      padding-bottom: 200px; } }
  .section-release_notes .section-title--hed {
    font-size: 18px;
    line-height: 20px;
    padding-top: 0;
    color: #000; }
    @media (min-width: 640px) {
      .section-release_notes .section-title--hed {
        width: 32.20339%;
        float: left;
        margin-right: 1.69492%;
        color: #5c5e62;
        color: var(--tds-color--grey30);
        text-align: left; } }
  .section-release_notes .section-title--dek {
    margin-top: 10px; }
    @media (min-width: 0) and (max-width: 639px) {
      .section-release_notes .section-title--dek {
        text-align: center; }
        .i18n-zh_HK .section-release_notes .section-title--dek,
        .i18n-ja_JP .section-release_notes .section-title--dek,
        .i18n-zh_CN .section-release_notes .section-title--dek,
        .i18n-zh_MO .section-release_notes .section-title--dek {
          text-align: left; } }
  .section-release_notes .section-title--lede {
    color: #393c41;
    font-weight: bold;
    margin-bottom: 10px; }
    @media (min-width: 0) and (max-width: 639px) {
      .section-release_notes .section-title--lede {
        text-align: left; } }
  .section-release_notes .list-item {
    margin-bottom: 10px; }

.release-notes--categories::before, .release-notes--categories::after {
  content: '';
  display: table; }

.release-notes--categories::after {
  clear: both; }

@media (min-width: 0) and (max-width: 639px) {
  .release-notes--categories {
    margin-top: 22px; } }

@media (min-width: 640px) {
  .release-notes--categories .column:nth-child(odd) {
    width: 32.20339%;
    float: left;
    margin-right: 1.69492%; }
  .release-notes--categories .column:nth-child(even) {
    width: 32.20339%;
    float: right;
    margin-right: 0; } }

.release-notes--categories:nth-last-child(n+2) {
  padding-bottom: 70px; }
  @media (min-width: 640px) {
    .release-notes--categories:nth-last-child(n+2) {
      padding-bottom: 90px; } }

@media (min-width: 640px) {
  .release-notes--category:first-child .section-title--lede {
    margin-top: 0; } }

@media (min-width: 0) and (max-width: 639px) {
  .section-title--hed {
    padding-top: 40px;
    text-align: center; } }

.section-autopilot .section-title--hed,
.section-software--testimonial .section-title--hed {
  padding-top: 40px; }

.section-title--hed + .section-title--lede {
  padding-top: 10px;
  margin-top: 10px; }

@media (min-width: 0) and (max-width: 639px) {
  .section-title--lede {
    text-align: center; }
    .i18n-zh_CN .section-title--lede,
    .i18n-ja_JP .section-title--lede,
    .i18n-zh_TW .section-title--lede,
    .i18n-ko_KR .section-title--lede,
    .i18n-zh_MO .section-title--lede,
    .i18n-zh_HK .section-title--lede {
      text-align: left; } }

.section-title--lede + .section-title--lede {
  margin-top: 0; }

.section-title--lede:last-child {
  margin-bottom: 0;
  padding-bottom: 0; }

.section-list--dek {
  padding-left: 20px;
  list-style-type: none; }
  .section-list--dek .list-item {
    margin-bottom: 10px; }
    .section-list--dek .list-item::before {
      left: -20px;
      top: -2px;
      font-size: 9px;
      display: block;
      position: relative;
      max-width: 0;
      max-height: 0;
      color: #f4f4f4;
      content: '\25A0'; }
    .section-list--dek .list-item:last-child {
      margin-bottom: 0; }

.container-icons {
  overflow: hidden;
  clear: both; }
  .container-icons [class*='section-title--'] {
    text-align: center;
    font-size: 13px;
    line-height: 1.25;
    max-width: 210px;
    width: 100%; }
    .i18n-zh_HK .container-icons [class*='section-title--'],
    .i18n-ja_JP .container-icons [class*='section-title--'],
    .i18n-zh_CN .container-icons [class*='section-title--'],
    .i18n-zh_MO .container-icons [class*='section-title--'] {
      text-align: left; }
  .container-icons .section-title--lede {
    font-family: 'Gotham Medium', 'system', sans-serif;
    font-family: var(--tds-fonts-combined--medium);
    color: #393c41; }
  .container-icons .section-title--dek {
    margin-top: 5px;
    margin-bottom: 0; }
  .container-icons .column {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-flow: column nowrap;
        flex-flow: column nowrap;
    -ms-flex-pack: center;
        justify-content: center;
    -ms-flex-align: center;
        align-items: center; }
    @media (min-width: 0) and (max-width: 639px) {
      .container-icons .column:not(:last-child) {
        padding-bottom: 40px; } }
  .container-icons .icon-container {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-flow: column nowrap;
        flex-flow: column nowrap;
    -ms-flex-pack: center;
        justify-content: center;
    -ms-flex-align: center;
        align-items: center;
    width: 64px;
    height: 64px;
    margin: 30px auto;
    overflow: hidden;
    text-align: center; }
  @media (min-width: 640px) {
    .container-icons .section-image {
      max-height: 100%;
      text-align: center;
      display: block;
      margin: auto; }
    .container-icons.four-up .column {
      width: 23.72881%;
      float: left;
      margin-right: 1.69492%; }
      .container-icons.four-up .column:last-child {
        float: right;
        margin-right: 0; }
    .container-icons.three-up .column {
      width: 32.20339%;
      float: left;
      margin-right: 1.69492%; }
      .container-icons.three-up .column:last-child {
        float: right;
        margin-right: 0; }
    .container-icons.two-up .column {
      width: 49.15254%;
      float: left;
      margin-right: 1.69492%; }
      .container-icons.two-up .column:last-child {
        float: right;
        margin-right: 0; } }

.main-title {
  font-size: 34px; }
  @media (min-width: 0) and (max-width: 639px) {
    .main-title {
      font-size: 28px; } }

.smaller-title {
  font-size: 30px; }
  @media (min-width: 0) and (max-width: 639px) {
    .smaller-title {
      font-size: 26px; } }

.section-title {
  padding: 0;
  font-size: 34px; }
  @media (min-width: 0) and (max-width: 639px) {
    .section-title {
      font-size: 28px; } }

.btn-transparent {
  background-color: rgba(0, 0, 0, 0.3); }

.section-sub-nav {
  margin-top: 44px; }
  .section-sub-nav .section-title {
    border-bottom: 1px solid #000; }

li nav-item a {
  text-decoration: none; }

.flex-wrapper {
  display: -ms-flexbox;
  display: flex; }
  @media (min-width: 0) and (max-width: 639px) {
    .flex-wrapper {
      -ms-flex-direction: column;
          flex-direction: column; } }
  .flex-wrapper.column {
    -ms-flex-direction: column;
        flex-direction: column; }

.section-image {
  line-height: 0; }

.section-wrap {
  padding-bottom: 70px;
  padding-top: 70px; }
  @media (min-width: 0) and (max-width: 639px) {
    .section-wrap {
      padding-bottom: 35px;
      padding-top: 35px; } }

.column {
  float: none !important; }

@media (min-width: 640px) {
  .four-up .column {
    width: 23.72881%;
    float: left;
    margin-right: 1.69492%; }
    .four-up .column:last-child {
      float: right;
      margin-right: 0; }
  .three-up .column {
    width: 32.20339%;
    float: left;
    margin-right: 1.69492%; }
    .three-up .column:last-child {
      float: right;
      margin-right: 0; }
  .two-up .column {
    width: 49.15254%;
    float: left;
    margin-right: 1.69492%; }
    .two-up .column:last-child {
      float: right;
      margin-right: 0; }
  .one-up .column {
    width: 100%;
    clear: both;
    float: none;
    display: block;
    margin-right: auto;
    margin-left: auto; }
    .one-up .column:last-child {
      float: right;
      margin-right: 0; } }

.multi-column-container,
.multi-column-item {
  list-style: none;
  margin: 0;
  padding: 0; }

.multi-column-container {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap; }
  .multi-column-container .multi-column-item {
    display: -ms-flexbox;
    display: flex;
    width: 100%; }
    .multi-column-container .multi-column-item .multi-column-content {
      display: -ms-flexbox;
      display: flex;
      -ms-flex-direction: column;
          flex-direction: column;
      width: 100%; }
      .multi-column-container .multi-column-item .multi-column-content.image-content {
        display: block; }
      .multi-column-container .multi-column-item .multi-column-content .container {
        display: -ms-flexbox;
        display: flex;
        -ms-flex: 1 0 auto;
            flex: 1 0 auto;
        -ms-flex-direction: column;
            flex-direction: column;
        -ms-flex-pack: center;
            justify-content: center; }
        .multi-column-container .multi-column-item .multi-column-content .container:not(.solar-roof-marketing-blurb-right):not(.solar-roof-marketing-blurb-left) {
          margin-left: 25%;
          padding-left: 0;
          padding-right: 50px; }
        .multi-column-container .multi-column-item .multi-column-content .container .section-title {
          margin-top: 22px; }
      @media (min-width: 0) and (max-width: 639px) {
        .multi-column-container .multi-column-item .multi-column-content .container {
          margin: 0 auto;
          padding: 20px;
          text-align: center; } }
      .multi-column-container .multi-column-item .multi-column-content .split-50-50:first-child {
        width: 49.15254%;
        float: left;
        margin-right: 1.69492%; }
      .multi-column-container .multi-column-item .multi-column-content .split-50-50:last-child {
        width: 49.15254%;
        float: right;
        margin-right: 0; }
  @media all and (min-width: 40em) {
    .multi-column-container .multi-column-item {
      width: 50%; }
      .multi-column-container .multi-column-item.no-split {
        width: 100%; }
      .multi-column-container .multi-column-item.split-33-66:first-child {
        width: 33.33%; }
      .multi-column-container .multi-column-item.split-33-66:last-child {
        width: 66.66%; }
      .multi-column-container .multi-column-item.split-40-60:first-child {
        width: 40%; }
      .multi-column-container .multi-column-item.split-40-60:last-child {
        width: 60%; }
      .multi-column-container .multi-column-item.split-60-40:first-child {
        width: 60%; }
      .multi-column-container .multi-column-item.split-60-40:last-child {
        width: 40%; }
      .multi-column-container .multi-column-item.split-66-33:first-child {
        width: 66.10169%;
        float: left;
        margin-right: 1.69492%; }
      .multi-column-container .multi-column-item.split-66-33:last-child {
        width: 32.20339%;
        float: right;
        margin-right: 0; }
      .multi-column-container .multi-column-item.split-75-25:first-child {
        width: 74.57627%;
        float: left;
        margin-right: 1.69492%; }
      .multi-column-container .multi-column-item.split-75-25:last-child {
        width: 23.72881%;
        float: right;
        margin-right: 0; } }

.darker-background {
  background: #f2f2f2; }

.container-icons {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
      justify-content: center; }
  @media (min-width: 0) and (max-width: 639px) {
    .container-icons {
      -ms-flex-direction: column;
          flex-direction: column; } }
  .container-icons .section-image {
    height: 70px;
    max-height: none;
    width: 100%; }
  .container-icons .column {
    float: none; }
    .container-icons .column.last-child {
      float: none; }
  .container-icons [class*='section-title--'] {
    max-width: 70%; }
    @media (min-width: 0) and (max-width: 639px) {
      .container-icons [class*='section-title--'] {
        max-width: 100%; } }

.icon-wrapper {
  padding: 20px; }

.section-divider {
  background: #a2a3a5;
  background: var(--tds-color--grey40);
  height: 1px;
  margin: 70px 0;
  width: 100%; }

.section-inquire_form {
  background-color: #f2f2f2;
  text-align: center; }
  .section-inquire_form .section-title {
    padding-bottom: 80px; }
  .section-inquire_form .thanks p {
    margin: auto; }
  .section-inquire_form .stationary-storage-details {
    text-align: left; }
    @media (min-width: 0) and (max-width: 639px) {
      .section-inquire_form .stationary-storage-details .form-item {
        width: 100%; } }
    .section-inquire_form .stationary-storage-details .form-item-firstname,
    .section-inquire_form .stationary-storage-details .form-item-email,
    .section-inquire_form .stationary-storage-details .form-item-country,
    .section-inquire_form .stationary-storage-details .form-item-company {
      width: 48.27586%;
      float: left;
      margin-right: 3.44828%; }
    .section-inquire_form .stationary-storage-details .form-item-lastname,
    .section-inquire_form .stationary-storage-details .form-item-phone,
    .section-inquire_form .stationary-storage-details .form-item-postalcode,
    .section-inquire_form .stationary-storage-details .form-item-role {
      width: 48.27586%;
      float: right;
      margin-right: 0;
      clear: none; }
    .section-inquire_form .stationary-storage-details .form-item-businessType {
      clear: both; }
    .section-inquire_form .stationary-storage-details .form-item-additional-info {
      clear: both; }
    .section-inquire_form .stationary-storage-details .form-item-opt-in {
      clear: both; }
    .section-inquire_form .stationary-storage-details .form-item {
      margin-bottom: 24px; }
    .section-inquire_form .stationary-storage-details .parsley-errors-list {
      text-align: right;
      height: 0; }
      .section-inquire_form .stationary-storage-details .parsley-errors-list li {
        margin-left: auto; }
    @media (min-width: 0) and (max-width: 639px) {
      .section-inquire_form .stationary-storage-details .additional-information-type .form-item {
        width: 100%; } }
    @media (min-width: 640px) {
      .section-inquire_form .stationary-storage-details .additional-information-type .form-item {
        width: 31.03448%;
        float: left;
        margin-right: 3.44828%;
        margin-left: 10px;
        margin-right: 10px; }
        .section-inquire_form .stationary-storage-details .additional-information-type .form-item:first-child {
          margin-left: 0; }
        .section-inquire_form .stationary-storage-details .additional-information-type .form-item:last-child {
          width: 31.03448%;
          float: right;
          margin-right: 0;
          clear: none;
          margin-left: 0; } }
    .section-inquire_form .stationary-storage-details .additional-information-type .form-item .parsley-error {
      color: #a2a3a5;
      color: var(--tds-color--grey40); }
    .section-inquire_form .stationary-storage-details.us-locale .form-item-contact-pref,
    .section-inquire_form .stationary-storage-details.us-locale .form-item-phone {
      width: 22.41379%;
      float: left;
      margin-right: 3.44828%;
      clear: none; }
      @media (min-width: 0) and (max-width: 639px) {
        .section-inquire_form .stationary-storage-details.us-locale .form-item-contact-pref,
        .section-inquire_form .stationary-storage-details.us-locale .form-item-phone {
          width: 100%; } }
    @media (min-width: 0) and (max-width: 639px) {
      .section-inquire_form .stationary-storage-details.us-locale .form-item-phone {
        margin-right: 0; } }
    .section-inquire_form .stationary-storage-details.us-locale .form-item-country {
      clear: left; }
    .section-inquire_form .stationary-storage-details.us-locale .form-item-email {
      margin-right: 0%; }
      @media (min-width: 0) and (max-width: 639px) {
        .section-inquire_form .stationary-storage-details.us-locale .form-item-email {
          width: 100%;
          float: left;
          margin-left: 0;
          margin-right: 0; } }
  .section-inquire_form .terms-and-conditions {
    margin: 22px auto;
    width: 75%; }
    @media (min-width: 0) and (max-width: 639px) {
      .section-inquire_form .terms-and-conditions {
        width: 100%; } }

@media (min-width: 640px) {
  .section-cta .btn,
  .section-cta .btn-large,
  .section-cta .btn-transactional {
    min-width: 200px; }
  .section-cta a:first-child {
    margin-right: 10px; } }

.section-cta.top {
  border-bottom: 1px solid rgba(0, 0, 0, 0.4);
  text-align: center; }
  @media (min-width: 0) and (max-width: 639px) {
    .section-cta.top {
      padding-left: 20px;
      padding-right: 20px; } }
  .section-cta.top.btn-group {
    margin: 0;
    padding-bottom: 15px;
    padding-top: 15px; }

.container-buttons {
  text-align: center; }

@media (min-width: 640px) {
  .pane-skinny-footer {
    margin-top: 0;
    padding-top: 20px; } }

.basic-article > .container {
  padding: 0;
  max-width: 1440px; }

.hide-on-desktop {
  display: none !important; }
  @media (min-width: 0) and (max-width: 639px) {
    .hide-on-desktop {
      display: block !important; } }

h1 {
  margin-bottom: 10px; }

@media (min-width: 0) and (max-width: 639px) {
  h1,
  .section-title {
    font-size: 30px;
    font-weight: 200; } }

.sticky-nav--title {
  padding-bottom: 0; }

.hero-container .container {
  position: absolute;
  width: 100%;
  top: 0;
  right: 0;
  left: 0;
  margin: auto; }

.hero-container .section-title {
  color: #fff; }
  #page-supercharger .hero-container .section-title {
    text-transform: none;
    text-shadow: none;
    font-size: 30px; }

.hero-container .hero-search {
  margin: 0 auto;
  margin-top: 12%;
  width: 40%; }
  @media (min-width: 0) and (max-width: 639px) {
    #page-supercharger .hero-container .hero-search {
      width: auto; } }
  .hero-container .hero-search .form-text {
    font-size: 15px;
    font-weight: 300;
    border: 0; }

h4 {
  font-weight: normal; }

@media (min-width: 0) and (max-width: 639px) {
  h2 {
    font-size: 20px;
    font-weight: 200; } }

main {
  background-color: white; }

.map-search [type='text'] {
  background-color: #fff; }

.link-button {
  display: inline-block;
  cursor: pointer;
  font-size: 15px; }

.button {
  text-transform: uppercase;
  font-size: 13px;
  color: #fff;
  padding: 7px 24px;
  background-color: #393c41;
  display: inline-block;
  cursor: pointer;
  -webkit-font-smoothing: subpixel-antialiased; }
  :hover .button {
    color: #fff; }

.hide-nicely {
  transition: opacity .5s;
  opacity: 0; }
  .no-opacity .hide-nicely {
    display: none; }

.show-nicely {
  transition: opacity .5s;
  opacity: 1; }
  .no-opacity .show-nicely {
    display: inline-block; }

.mini-title {
  margin-bottom: 20px; }

.row {
  padding-top: 80px; }
  .row .container {
    height: 100%; }
    @media (min-width: 0) and (max-width: 639px) {
      .row .container {
        border: none; } }
  @media (min-width: 0) and (max-width: 639px) {
    .row {
      padding-top: 40px;
      padding-bottom: 40px;
      border-bottom: 1px solid #e5e5e5; } }

.vertical-separator {
  padding-left: 8px;
  margin-left: 4px;
  border-left: 1px solid #5c5e62;
  border-left: 1px solid var(--tds-color--grey30); }

.list-links li {
  margin-bottom: 10px; }

.subsection {
  margin-top: 60px; }

.section-hero-video {
  width: 100%; }

.nav-container {
  margin-top: 97px;
  padding-bottom: 60px;
  border-bottom: 1px solid #fff;
  color: #fff; }
  .nav-container .section-title {
    font-family: 'Gotham Medium', 'system', sans-serif;
    font-family: var(--tds-fonts-combined--medium);
    display: inline;
    float: left; }
  .nav-container .nav-block {
    display: inline;
    float: right;
    margin: 7px 0 0 0; }
    .nav-container .nav-block .nav-item {
      display: inline; }
      .nav-container .nav-block .nav-item.nav-selected a {
        color: #f4f4f4; }
    .nav-container .nav-block .nav-link {
      font-size: 13px;
      color: #fff;
      margin-left: 20px; }

#destination-charger {
  text-align: center; }
  #destination-charger .section-content {
    max-width: 600px;
    margin: 0 auto; }
  #destination-charger .list-links li {
    display: inline; }
  #destination-charger .container {
    padding-bottom: 110px;
    border-bottom: none; }
    @media (min-width: 0) and (max-width: 639px) {
      #destination-charger .container {
        padding-bottom: 0; } }

#location-map {
  height: 755px;
  position: relative; }
  #location-map .locations-overlay {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0; }
  #location-map .controls,
  #location-map .section-content,
  #location-map .search-wrapper {
    position: absolute;
    width: 100%;
    text-align: center;
    padding: 20px; }
  #location-map .section-content,
  #location-map .search-wrapper {
    background-color: #fff;
    background-color: rgba(255, 255, 255, 0.85); }
  #location-map .controls {
    bottom: 100px; }
  #location-map .search-wrapper {
    bottom: 0;
    padding: 15px; }
    #location-map .search-wrapper .form-wrapper {
      width: 400px;
      margin: auto;
      position: relative; }
    #location-map .search-wrapper .form-item {
      margin-bottom: 0;
      position: static;
      display: inline-block; }
    #location-map .search-wrapper a {
      margin-left: 20px; }
    #location-map .search-wrapper .form-text {
      font-weight: 300; }
    #location-map .search-wrapper [type='text']:focus {
      outline: none;
      border-color: transparent; }
  #location-map .section-content {
    height: auto;
    top: 0;
    border-bottom: none;
    background-color: #fff;
    background-color: rgba(255, 255, 255, 0.85);
    padding: 20px; }
  #location-map .location-filters {
    margin: 0 auto;
    padding: 0;
    text-align: center;
    overflow: visible; }
    #location-map .location-filters .filter {
      transition: top .3s ease-out;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
      position: relative;
      top: 10px;
      display: inline-block;
      overflow: hidden; }
      #location-map .location-filters .filter.is-checked {
        transition: top .3s ease-out;
        top: 0; }
      .lt-ie9 #location-map .location-filters .filter {
        border: 1px solid #d6d6d6; }
    #location-map .location-filters .filter-label {
      -webkit-user-select: none;
         -moz-user-select: none;
          -ms-user-select: none;
              user-select: none;
      font-size: 15px;
      padding: 16px 43px;
      display: block;
      width: 220px;
      position: relative;
      background-color: #f0f0f0;
      text-align: center;
      font-size: 14px;
      color: #000;
      text-transform: none;
      cursor: pointer;
      transition: border-color .3s;
      border-bottom: solid #f0f0f0 3px; }
      #location-map .location-filters .filter-label.is-checked {
        transition: border-color .3s;
        border-color: #c00;
        background-color: #fff; }
      #location-map .location-filters .filter-label::before {
        width: 22px;
        height: 31px;
        position: absolute;
        top: 10px;
        /* left: 10px;*/
        content: ' '; }
    #location-map .location-filters [type='checkbox'] {
      position: absolute;
      left: -99em; }
      #location-map .location-filters [type='checkbox']::before {
        transition: opacity .03s linear;
        opacity: 0; }
      #location-map .location-filters [type='checkbox']:checked + .icon-close {
        display: block;
        background: url("/sites/default/files/images/charging/filter_close_black.svg") 0 0 no-repeat; }
        #location-map .location-filters [type='checkbox']:checked + .icon-close:before {
          transition: opacity .03s linear;
          opacity: 1; }
      .lt-ie9 #location-map .location-filters [type='checkbox']::before {
        display: none; }
      .lt-ie9 #location-map .location-filters [type='checkbox'] .is-checked .icon-close:before {
        display: block; }
    #location-map .location-filters .icon-close {
      height: 12px;
      width: 12px;
      position: absolute;
      right: 5px;
      top: 5px;
      z-index: 2; }
      .location-filters #location-map .location-filters .icon-close {
        display: none; }
      .checkbox-right #location-map .location-filters .icon-close {
        right: 10px;
        top: 7px; }
  #location-map .filter-label.icon-dest-charger:before,
  #location-map .filter-label.icon-supercharger:before {
    width: 28px;
    height: 28px;
    top: 10px; }
  #location-map .icon-supercharger::before {
    left: 30px;
    background-image: url("/sites/default/files/images/charging/icon-supercharger.png?20150804"); }
    @media screen and (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2), (min--moz-device-pixel-ratio: 2) {
      #location-map .icon-supercharger::before {
        background-image: url("/sites/default/files/images/charging/icon-supercharger@2x.png?20150804");
        background-size: contain;
        left: 30px; } }
  #location-map .icon-dest-charger:before {
    background-image: url("/sites/default/files/images/charging/icon-charging-big.png?20150804");
    left: 10px; }
    @media screen and (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2), (min--moz-device-pixel-ratio: 2) {
      #location-map .icon-dest-charger:before {
        background-image: url("/sites/default/files/images/charging/icon-charging-big@2x.png?20150804");
        background-size: contain;
        left: 10px; } }

[data-selected-country='northamerica'][data-selected-type='destination-supercharger'] .locations-overlay {
  background-image: url("/sites/default/files/images/charging/na_dest_super.png?20150804");
  transition: opacity .3s; }
  @media screen and (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2), (min--moz-device-pixel-ratio: 2) {
    [data-selected-country='northamerica'][data-selected-type='destination-supercharger'] .locations-overlay {
      background-image: url("/sites/default/files/images/charging/na_dest_super_2x.png?20150804"); } }

[data-selected-country='asia'],
[data-selected-country='europe'],
[data-selected-country='northamerica'],
.locations-overlay {
  background-size: cover;
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: center; }

#calculator {
  text-align: center;
  margin-bottom: 40px; }
  #calculator .drive-range {
    width: 180px; }
  #calculator .controls {
    text-align: left;
    width: 1020px; }
    #calculator .controls ul {
      overflow: auto; }
    #calculator .controls ul li {
      float: left;
      padding-left: 20px;
      padding-right: 20px; }
      #calculator .controls ul li:first-child {
        border-right: solid 1px #f0f0f0;
        padding-left: 0; }
    #calculator .controls h4 {
      color: #5c5e62;
      color: var(--tds-color--grey30);
      margin-bottom: 15px; }
    #calculator .controls p {
      color: #000; }
    #calculator .controls .label-wall40 {
      width: 380px; }
    #calculator .controls .label-super,
    #calculator .controls .label-wall80 {
      width: 200px; }
    #calculator .controls .charging-type ul {
      display: inline-block;
      color: #5c5e62;
      color: var(--tds-color--grey30);
      font-size: 15px; }
      #calculator .controls .charging-type ul li {
        border-right: solid 1px #5c5e62;
        border-right: solid 1px var(--tds-color--grey30);
        padding-left: 10px;
        padding-right: 10px; }
      #calculator .controls .charging-type ul li:last-child {
        border: none;
        padding-right: 0; }
    #calculator .controls [type='radio'] {
      position: absolute;
      left: -99em; }
      #calculator .controls [type='radio'] + label {
        border: solid 2px #f4f4f4;
        background-color: #d0d1d2;
        background-color: var(--tds-color--grey50);
        display: inline-block;
        text-align: center;
        padding: 15px;
        cursor: pointer; }
        #calculator .controls [type='radio'] + label p {
          margin: 0; }
      #calculator .controls [type='radio'].checked + label {
        border-color: #008dff; }
      #calculator .controls [type='radio']:checked + label {
        border-color: #008dff; }
    #calculator .controls .drive-range-group {
      border: solid #f4f4f4 2px;
      background-color: #d0d1d2;
      background-color: var(--tds-color--grey50); }
    #calculator .controls .drive-range-group {
      width: 170px;
      padding: 20px 0 20px 15px;
      text-align: center;
      position: relative; }
      #calculator .controls .drive-range-group .distance {
        font-size: 25px;
        position: relative;
        margin-left: -55px; }
      #calculator .controls .drive-range-group .stepper-btn-wrap {
        display: inline-block;
        width: 30px;
        height: 35px;
        background: url("/sites/default/files/images/charging/stepper.svg") top no-repeat;
        position: absolute;
        top: 20px;
        right: 14px;
        cursor: pointer; }
        .no-svg #calculator .controls .drive-range-group .stepper-btn-wrap {
          background: url("/sites/default/files/images/charging/stepper.png") top no-repeat; }
        #calculator .controls .drive-range-group .stepper-btn-wrap a {
          display: block;
          height: 50%;
          overflow: hidden;
          line-height: 100%;
          text-align: center;
          text-decoration: none; }
  #calculator .container {
    border-bottom: none; }
  #calculator .wf-datalabel-content {
    font-size: 40px;
    color: #008dff;
    font-weight: 100; }
  #calculator .wf-datalabel {
    font-size: 30px;
    display: inline-block;
    width: 25%;
    top: 20px;
    min-height: 60px; }
    #calculator .wf-datalabel h5 {
      font-size: 15px; }
  #calculator .legal {
    color: #a1a1a1;
    text-align: left;
    margin-top: 35px; }

#kilowatt_stat .wf-datalabel-content {
  color: #23b900; }

#stats {
  margin-bottom: 40px;
  margin-top: -30px; }

#subnav {
  font-size: 15px;
  margin-bottom: 50px; }
  #subnav li {
    border-top: 1px solid #f0f0f0;
    border-bottom: 1px solid #f0f0f0;
    text-align: center;
    margin: 0 15px; }
    #subnav li.last {
      margin-bottom: 0; }
  #subnav a {
    display: block;
    padding: 15px 0 15px 0; }

#page-supercharger .legend-supercharger-map {
  bottom: 116px; }

#page-supercharger .section-how-it-works {
  padding-top: 50px; }

.map-note {
  font-size: 13px; }

.section-charging-map .search-wrapper {
  position: absolute;
  bottom: 0;
  width: 100%;
  padding: 15px;
  text-align: center;
  background-color: #fff;
  background-color: rgba(255, 255, 255, 0.85); }
  .section-charging-map .search-wrapper .charging-search.map-search {
    position: static; }
  .section-charging-map .search-wrapper .form-wrapper {
    width: 400px;
    margin: auto;
    position: relative; }
  .section-charging-map .search-wrapper .form-item {
    margin-bottom: 0;
    position: static;
    display: inline-block;
    width: auto; }
  .section-charging-map .search-wrapper .form-text {
    margin-top: 0; }
  .section-charging-map .search-wrapper a {
    margin-left: 20px; }

#page-supercharger .section-station-overview {
  margin-top: 40px; }
  #page-supercharger .section-station-overview .section-content h1 {
    margin-bottom: 20px; }

@media (min-width: 640px) {
  #page-supercharger .form-text {
    width: 100%;
    margin: 0; } }

.section-charging-container {
  padding: 0;
  text-align: center; }
  @media (min-width: 640px) {
    .section-charging-container:not(.section-introduction) .container:first-of-type {
      max-width: 1440px; } }
  @media (min-width: 640px) {
    .section-charging-container > .container {
      padding-left: 0;
      padding-right: 0; } }
  @media (min-width: 640px) {
    .section-charging-container .btn-primary {
      width: 250px; } }
  .section-charging-container .section-hero-container {
    padding-left: 0;
    padding-right: 0; }
  @media (min-width: 0) and (max-width: 639px) {
    .section-charging-container .section-content {
      padding: 40px 0; } }
  @media (min-width: 640px) {
    .section-charging-container .section-content {
      padding: 80px 0;
      max-width: 700px;
      margin: 0 auto; } }
  .section-charging-container .section-title--dek {
    max-width: 500px;
    margin: 22px auto; }
  @media (min-width: 0) and (max-width: 639px) {
    .section-charging-container .section-hero {
      max-width: 100%; } }
  @media (min-width: 0) and (max-width: 639px) {
    .section-charging-container {
      border: 0; } }

@media (min-width: 640px) {
  #section-multi-column > .container,
  #section-multi-column-last > .container {
    padding-left: 0;
    padding-right: 0; } }

#section-multi-column a,
#section-multi-column-last a {
  color: #3457b1;
  color: var(--tds-color--blue20); }

#section-multi-column .btn,
#section-multi-column .btn:hover,
#section-multi-column-last .btn,
#section-multi-column-last .btn:hover {
  color: #fff; }

@media (min-width: 640px) {
  #section-multi-column .btn-primary,
  #section-multi-column-last .btn-primary {
    width: auto; } }

#section-multi-column .multi-column-content .column-item-container,
#section-multi-column-last .multi-column-content .column-item-container {
  margin-left: 15%; }
  @media (min-width: 0) and (max-width: 639px) {
    #section-multi-column .multi-column-content .column-item-container,
    #section-multi-column-last .multi-column-content .column-item-container {
      min-width: 0;
      margin-left: 0;
      margin-right: 0;
      padding-left: 20px;
      padding-right: 20px; } }

#section-multi-column .image-item .section-image,
#section-multi-column .image-item .section-hero,
#section-multi-column-last .image-item .section-image,
#section-multi-column-last .image-item .section-hero {
  min-height: 1px; }

@media (min-width: 0) and (max-width: 639px) {
  #section-multi-column .image-item,
  #section-multi-column-last .image-item {
    margin-left: 0; } }

/**********************************************
 * 1. Software Banner
**********************************************/
.banner-software {
  position: relative;
  background-color: #f4f4f4;
  background-position: top center;
  background-repeat: no-repeat;
  background-size: cover; }
  @media (min-width: 0) and (max-width: 639px) {
    .banner-software {
      background-image: url("/tesla_theme/assets/img/features/software/section-hero-banner--touch.jpg?20170911"); } }
  @media only screen and (min-width: 0) and (max-width: 639px) and (min-device-pixel-ratio: 2), only screen and (min-width: 0) and (max-width: 639px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-width: 0) and (max-width: 639px) and (min-resolution: 192dpi), only screen and (min-width: 0) and (max-width: 639px) and (min-resolution: 2dppx) {
    .banner-software {
      background-image: url("/tesla_theme/assets/img/features/software/section-hero-banner--touch@2x.jpg?20170911"); } }
  @media (min-width: 0) and (max-width: 639px) {
      .banner-software::after {
        background-image: linear-gradient(to top, rgba(0, 0, 0, 0) 0, #171a20 100%);
        background-image: linear-gradient(to top, rgba(0, 0, 0, 0) 0, var(--tds-color--grey10) 100%); }
      .banner-software .section-container {
        padding: 380px 20px 20px; }
      .banner-software .section-title,
      .banner-software .section-description {
        text-align: center; } }
  @media (min-width: 640px) {
    .banner-software {
      background-image: url("/tesla_theme/assets/img/features/software/section-hero-banner.jpg?20170911");
      min-height: 235px;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-flow: row nowrap;
          flex-flow: row nowrap;
      clear: both;
      position: relative;
      -ms-flex-pack: end;
          justify-content: flex-end;
      -ms-flex-align: center;
          align-items: center;
      -ms-flex-line-pack: center;
          align-content: center; } }
  @media only screen and (min-width: 640px) and (min-device-pixel-ratio: 2), only screen and (min-width: 640px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-width: 640px) and (min-resolution: 192dpi), only screen and (min-width: 640px) and (min-resolution: 2dppx) {
    .banner-software {
      background-image: url("/tesla_theme/assets/img/features/software/section-hero-banner@2x.jpg?20170911"); } }
  @media (min-width: 640px) {
      .banner-software::after {
        background-image: linear-gradient(to top, rgba(0, 0, 0, 0) 50%, #171a20 100%);
        background-image: linear-gradient(to top, rgba(0, 0, 0, 0) 50%, var(--tds-color--grey10) 100%); }
      .banner-software .section-container {
        width: 40.67797%;
        float: right;
        margin-right: 0;
        padding: 100px 70px; } }
  .banner-software::after {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: block;
    position: absolute;
    content: ''; }
  .banner-software .section-container {
    position: relative;
    z-index: 1; }
  .banner-software .section-title,
  .banner-software .section-description {
    color: #fff; }
  .banner-software .btn-group {
    text-align: left; }

/**********************************************
 * 2. Autopilot Banner
**********************************************/
.banner-autopilot {
  overflow: hidden;
  text-align: center;
  background-color: #d0d1d2;
  background-color: var(--tds-color--grey50); }
  @media (min-width: 0) and (max-width: 639px) {
    .banner-autopilot {
      padding-top: 45px;
      padding-bottom: 45px; }
      .banner-autopilot .section-title {
        padding-bottom: 25px; }
      .banner-autopilot iframe {
        height: 50vw; } }
  @media (min-width: 640px) {
    .banner-autopilot {
      padding-top: 65px;
      padding-bottom: 65px; }
      .banner-autopilot .section-description {
        max-width: 650px;
        margin-left: auto;
        margin-right: auto;
        text-align: center; }
      .banner-autopilot .section-title {
        padding-bottom: 50px; } }

/**********************************************
 * 3. Service Banner
**********************************************/
@media (min-width: 640px) {
  .banner-service .banner-section--image {
    background-image: url("/tesla_theme/assets/img/service/section-banner.jpg?20170911");
    background-size: cover; } }
  @media only screen and (min-width: 640px) and (min-device-pixel-ratio: 2), only screen and (min-width: 640px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-width: 640px) and (min-resolution: 192dpi), only screen and (min-width: 640px) and (min-resolution: 2dppx) {
    .banner-service .banner-section--image {
      background-image: url("/tesla_theme/assets/img/service/section-banner@2x.jpg?20170911"); } }

/**********************************************
 * 4. Urban Supercharger
**********************************************/
@media (min-width: 640px) {
  .urban-supercharger-section .banner-section--image {
    background-image: url("/tesla_theme/assets/img/urban-supercharger/section-banner.jpg?20170911");
    background-position: center; } }
  @media only screen and (min-width: 640px) and (min-device-pixel-ratio: 2), only screen and (min-width: 640px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-width: 640px) and (min-resolution: 192dpi), only screen and (min-width: 640px) and (min-resolution: 2dppx) {
    .urban-supercharger-section .banner-section--image {
      background-image: url("/tesla_theme/assets/img/urban-supercharger/section-banner@2x.jpg?20170911"); } }

.banner-service,
.banner-two-up {
  display: -ms-flexbox;
  display: flex; }
  @media (min-width: 640px) {
    .banner-service,
    .banner-two-up {
      -ms-flex-flow: row nowrap;
          flex-flow: row nowrap; } }
  @media (min-width: 0) and (max-width: 639px) {
    .banner-service,
    .banner-two-up {
      -ms-flex-flow: column nowrap;
          flex-flow: column nowrap; } }
  @media (min-width: 640px) {
    .banner-service [class*='banner-section--'],
    .banner-two-up [class*='banner-section--'] {
      width: 50%; } }
  @media (min-width: 0) and (max-width: 639px) {
    .banner-service [class*='banner-section--'],
    .banner-two-up [class*='banner-section--'] {
      width: 100%; } }
  .banner-service .banner-section--content,
  .banner-two-up .banner-section--content {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
        align-items: center;
    text-align: left;
    -ms-flex-pack: center;
        justify-content: center;
    background-color: #393c41; }
    @media (min-width: 0) and (max-width: 639px) {
      .banner-service .banner-section--content,
      .banner-two-up .banner-section--content {
        padding: 45px 20px; }
        .banner-service .banner-section--content .section-description,
        .banner-two-up .banner-section--content .section-description {
          text-align: center;
          margin-bottom: 0; }
        .banner-service .banner-section--content .btn-group,
        .banner-service .banner-section--content .btn-transparent,
        .banner-two-up .banner-section--content .btn-group,
        .banner-two-up .banner-section--content .btn-transparent {
          margin-bottom: 0; } }
    @media (min-width: 640px) {
      .banner-service .banner-section--content,
      .banner-two-up .banner-section--content {
        padding: 60px 20px; } }
    .banner-service .banner-section--content .section-title,
    .banner-service .banner-section--content .section-description,
    .banner-two-up .banner-section--content .section-title,
    .banner-two-up .banner-section--content .section-description {
      color: #fff; }
    .banner-service .banner-section--content .banner-content,
    .banner-two-up .banner-section--content .banner-content {
      max-width: 450px; }
  .banner-service .section-image img,
  .banner-two-up .section-image img {
    display: block;
    width: 100%; }
  @media (min-width: 0) and (max-width: 639px) {
    .banner-service .section-title,
    .banner-two-up .section-title {
      text-align: center; } }

[id='model-select-modal'].modal-sales-message .modal-dialog {
  top: 15%; }
  @media screen and (max-height: 720px) {
    [id='model-select-modal'].modal-sales-message .modal-dialog {
      top: 5%; } }

[id='model-select-modal'] .modal-header {
  background: linear-gradient(to bottom, #fff, #f4f4f4);
  height: 200px; }

[id='model-select-modal'] .modal-body {
  overflow: visible;
  padding-bottom: 50px; }

[id='model-select-modal'] .modal-images {
  width: 100%;
  text-align: center;
  margin-top: -110px; }

[id='model-select-modal'] [class*='modal-images--'] {
  display: inline-block;
  width: 325px; }

[id='model-select-modal'] .modal-images--models {
  margin-right: -25px; }

[id='model-select-modal'] .modal-images--modelx {
  margin-left: -25px; }

[id='model-select-modal'] .modal-text {
  width: 100%;
  text-align: center;
  padding-top: 10px; }

[id='model-select-modal'] [class*='modal-text--'] {
  padding: 0 50px;
  display: inline-block; }

[id='model-select-modal'] .modal-text--sales {
  margin: 20px 0 -30px;
  padding-top: 20px;
  display: block;
  border-top: 1px solid #000; }
  [id='model-select-modal'] .modal-text--sales p {
    margin: 10px 0 0; }
  [id='model-select-modal'] .modal-text--sales .horizontal-list {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-flow: row nowrap;
        flex-flow: row nowrap;
    -ms-flex-pack: center;
        justify-content: center; }
    [id='model-select-modal'] .modal-text--sales .horizontal-list li {
      width: 100%;
      text-align: left; }
      [id='model-select-modal'] .modal-text--sales .horizontal-list li:first-child {
        padding-right: 20px;
        text-align: right; }

[id='model-select-modal'] .spec-list {
  text-align: center;
  padding-top: 15px;
  padding-left: 0; }

[id='model-select-modal'] .spec-item {
  line-height: 24px; }
  [id='model-select-modal'] .spec-item:first-child {
    font-family: 'Gotham Medium', 'system', sans-serif;
    font-family: var(--tds-fonts-combined--medium);
    color: #000; }
  [id='model-select-modal'] .spec-item a {
    box-shadow: 0 1px 0 0 currentColor;
    box-shadow: 0 var(--tds-border-width--small) 0 0 currentColor; }

[id='stationary-storage-callback-modal'] .modal-dialog {
  top: 15%;
  min-height: auto; }

[id='stationary-storage-callback-modal'] .modal-contact-pref::after {
  content: ' ';
  display: block;
  clear: both; }

[id='stationary-storage-callback-modal'] .separator {
  width: 100%;
  border-top: 1px solid #757575;
  border-top: 1px solid var(--tds-color--grey35);
  margin: 36px 0 20px;
  height: 0;
  clear: both; }
  [id='stationary-storage-callback-modal'] .separator::before {
    content: none; }

[id='stationary-storage-callback-modal'] .modal-body {
  padding-top: 30px; }
  @media (min-width: 0) and (max-width: 639px) {
    [id='stationary-storage-callback-modal'] .modal-body {
      padding-left: 20px;
      padding-right: 20px; } }

[id='stationary-storage-callback-modal'] .modal-title {
  padding-top: 50px;
  margin-bottom: 0; }

[id='stationary-storage-callback-modal'] .form-item:nth-child(even) {
  width: 49.15254%;
  float: left;
  margin-right: 1.69492%; }

[id='stationary-storage-callback-modal'] .form-item:nth-child(odd), [id='stationary-storage-callback-modal'] .form-item.form-item-propertyType, [id='stationary-storage-callback-modal'] .form-item.form-item-inquiryType {
  width: 49.15254%;
  float: right;
  margin-right: 0; }

[id='stationary-storage-callback-modal'] .form-item.form-item-address1,
[id='stationary-storage-callback-modal'] .form-item.form-item-contact-pref ~ .form-item-email {
  width: 100%;
  float: left;
  margin-left: 0;
  margin-right: 0; }

@media (min-width: 640px) {
  [id='stationary-storage-callback-modal'] .form-item.form-item-contact-pref ~ .form-item-email {
    width: 49.15254%;
    float: right;
    margin-right: 0; }
  [id='stationary-storage-callback-modal'] .form-item.form-item-address1 {
    width: 32.20339%;
    float: left;
    margin-right: 1.69492%; }
  [id='stationary-storage-callback-modal'] .form-item.form-item-contact-pref,
  [id='stationary-storage-callback-modal'] .form-item.form-item-contact-pref + .form-item-phone {
    width: 23.72881%;
    float: left;
    margin-right: 1.69492%; }
  [id='stationary-storage-callback-modal'] .form-item.form-item-city, [id='stationary-storage-callback-modal'] .form-item.form-item-state, [id='stationary-storage-callback-modal'] .form-item.form-item-postalcode, [id='stationary-storage-callback-modal'] .form-item.form-item-address2 {
    width: 15.25424%;
    float: left;
    margin-right: 1.69492%; } }

[id='stationary-storage-callback-modal'] .form-type-checkbox {
  padding-top: 22px; }

[id='stationary-storage-callback-modal'] .form-type-select {
  margin-bottom: 17px; }

[id='stationary-storage-callback-modal'] .form-select-overlay {
  overflow: visible; }

[id='stationary-storage-callback-modal'] .submit-area {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-flow: row nowrap;
      flex-flow: row nowrap;
  -ms-flex-pack: end;
      justify-content: flex-end;
  -ms-flex-align: center;
      align-items: center;
  -ms-flex-line-pack: center;
      align-content: center; }

[id='stationary-storage-callback-modal'] .notice {
  padding-right: 30px; }

[id='stationary-storage-callback-modal'] .thanks {
  text-align: center;
  padding-bottom: 30px; }
  [id='stationary-storage-callback-modal'] .thanks h3 {
    display: none; }
  [id='stationary-storage-callback-modal'] .thanks p {
    margin: 0; }

/*doc

---
title: Typography Variables
name: 01_typography
category: Typography
---
<br>
Styling things for international markets can sometimes be a pain. The variables located here give Developers the ability to style fonts in the website based on the locale that the page is rendered in.

Here are all the variables that are currently available

```sass_example
// Base font size
$base-font-size: 16px;

$font-path: '/assets/fonts/' !default;

// Gotham Variables
$gotham-light: 'Gotham Light'; // font-weight: 100;
$gotham-book: 'Gotham Book'; // font-weight: 300;
$gotham-medium: 'Gotham Medium'; // font-weight: 500;
$gotham-bold: 'Gotham Bold'; // font-weight: 700;

// Base font stack
$fonts-base: Arial, sans-serif;
$fonts-opensans: 'Open Sans';
$fonts-base-secondary: 'HelveticaNeue-Regular', 'Helvetica Neue Regular', 'Helvetica Neue', Helvetica, $fonts-base;
$fonts-fancypants: 'Palatino' !default;
$fonts-monospace: 'Menlo', 'Monaco', 'Courier New', monospace !default;

// Japanese font stack
$fonts-jp-primary: 'AXIS Font Japanese W55' !default;
$fonts-jp-secondary: 'Hiragino Kaku Gothic ProN' !default;

// Chinese font stack
$fonts-china-primary: 'M Hei PRC W45' !default;
$fonts-china-secondary: 'HeiS ASC Simplified Chinese', 'HeiS ASC Simplified Chinese_n5' !default;

// Traditional Chinese font stack
$fonts-traditional-chinese-primary: 'M Hei HK W42', 'M Hei HK W40' !default;
$fonts-traditional-chinese-secondary: 'HeiT ASC Traditional Chinese' !default;

// Combined China font stack
$fontstack-china-primary: $fonts-china-primary, $fonts-traditional-chinese-primary !default;
$fontstack-china-secondary: $fonts-china-secondary, $fonts-traditional-chinese-secondary !default;

// Actual font stack variables to be used by the typography mixin:
$fonts-secondary: $fontstack-china-secondary, $fonts-base-secondary !default;
```
*/
/*doc

---
categories: Variables
title: Locale Variables
name: 00_localevarsintro
---

Styling things for international markets can sometimes be a pain. The variables located here give Developers the ability to style parts of the website based on the locale that the page is rendered in. The locale class needs to be added to a part of the website that is as high up as possible - e.g. the `body` or `html` tag. For tesla.com, the locale class is added by to the `body` tag via some PHP/Drupal logic.


## Example

Here are a couple examples of how you can use the locale variables in your code.

### Basic Usage

```sass_example
.i18n-ja_JP {
  background-color: #f00;
}
```

```css_example
.i18n-jp {
  background-color: #f00;
}
```

### Parent selector usage
```sass_example
.someclass {
  color: red;
  .i18n-ja_JP & {
    color: purple;
  }
}
```

```css_example
.someclass {
  color: red;
}
.i18n-jp .someclass {
  color: purple;
}
```

## Let's talk about CSS specificity
As a developer, organization can carry significant weight when building a new gadget. You will be tempted to nest your selectors because then it looks like a neat package.

**YOU MUST FIGHT THIS URGE**. Just because you *can* nest things, doesn't necessarily mean that you *should* nest things.

When writing Sass, keep asking yourself this question:

> What will this selector look like when it is rendered in plain CSS?

If you start seeing a lot of nesting ask yourself:

> Can this become less specfiic without messing up styles downstream?
If you are unsure what your CSS would look like, just take a look at how your nesting is set up. How flat is the Sass? Are you using

Obviously, you can get much more complex selectors, but these are the two most common usages for the locale variables.

*/
/*doc
---
categories: Variables
title: All available locale variables
name: 02_localevarexample
parent: 00_localevarsintro
---

Here are all the variables that are currently available

```sass_example
// Super regions
$region-na:                  superregion-north-america;
$region-eu:                  superregion-europe;
$region-apac:                superregion-apac;
$region-me:                  superregion-middle-east;

// North America
$locale-canada_english:      i18n-en_CA; // en_CA
$locale-canada_french:       i18n-fr_CA; // fr_CA
$locale-mexico_spanish:      i18n-es_MX; // es_MX
$locale-us_english:          i18n-en_US; // US

// Europe
$locale-belgium_french:      i18n-fr_BE; // fr_BE
$locale-belgium_dutch:       i18n-nl_BE; // nl_BE
$locale-denmark_danish:      i18n-da_DK; // da_DK
$locale-germany_german:      i18n-de_DE; // de_DE
$locale-france_french:       i18n-fr_FR; // fr_FR
$locale-great_britain:       i18n-en_GB; // en_GB
$locale-italy_italian:       i18n-it_IT; // it_IT
$locale-ireland:             i18n-en_IE; // en_IE
$locale-netherlands_dutch:   i18n-nl_NL; // nl_NL
$locale-norway_norwegian:    i18n-no_NO; // no_NO

$locale-austria:             i18n-de_AT; // de_AT
$locale-switzerland_german:  i18n-de_CH; // de_CH
$locale-switzerland_french:  i18n-fr_CH; // fr_CH
$locale-switzerland_italian: i18n-it_CH; // it_CH
$locale-sweden:              i18n-sv_SE; // sv_SE
$locale-other_europe:        i18n-en_EU; // en_EU
$locale-finland:             i18n-fi_FI; // fi_FI
$locale-luxembourg_french:   i18n-fr_LU; // fr_LU
$locale-luxembourg_german:   i18n-de_LU; // de_LU
$locale-portugal:            i18n-pt_PT; // pt_PT
$locale-spain:               i18n-es_ES; // es_ES

// Asia-Pacific
$locale-australia:           i18n-en_AU; // en_AU
$locale-china:               i18n-zh_CN; // zh_CN
$locale-hongkong:            i18n-en_HK; // en_HK
$locale-hongkong_chinese:    i18n-zh_HK; // zh_HK
$locale-macau:               i18n-en_MO; // en_MO
$locale-macau_chinese:       i18n-zh_MO; // zh_MO
$locale-japan:               i18n-ja_JP; // Japan
$locale-new_zealand:         i18n-en_NZ; // en_NZ
$locale-taiwan:              i18n-zh_TW; // zh_TW
$locale-south_korea:         i18n-ko_KR; // ko_KR

// Middle-East
$locale-jordan_english:       i18n-en_JO; // en_JO
$locale-jordan_arabic:        i18n-ar_JO; // ar_JO
$locale-uae_english:          i18n-en_AE; // en_AE
$locale-uae_arabic:           i18n-ar_AE; // ar_AE
$locale-saudi-arabia_english: i18n-en_SA; // en_SA
$locale-saudi-arabia_arabic:  i18n-ar_SA; // ar_SA

// Africa
$locale-south_africa:        i18n-en_ZA; // not in Drupal language list default
```

The following variables are only to be used within the Drupal ecosystem:

```sass_example
$locale_us:                  i18n-en;    // US
$locale-denmark:             i18n-da;    // da_DK
$locale-germany:             i18n-de;    // de_DE
$locale-france:              i18n-fr;    // fr_FR
$locale-italy:               i18n-it;    // it_IT
$locale-netherlands:         i18n-nl;    // nl_NL
$locale-norway:              i18n-no;    // no_NO

```
*/
/*doc
---
title: Introduction
category: Colors
name: 00_colors
---

The colors represented below are considered approved for usage throughout the website. All of these variables can be overridden on a situational basis because they all have `!default` appended to it. This means that you can continue to use the color variables by name as listed here, but update their value to whatever you'd like for your feature.

An example of this would be the [/energy](https://www.tesla.com/energy) section of tesla.com. They are using a different color blue than the `$tesla-transactional` as listed below. The team is able use the correct color for blue but still use the correct variable. This makes it easy to update the colors across the system easily and simply without a lot of extra work.

*/
/*doc
---
title: Primary Colors
category: Colors
name: 01_colors
---


<div class="tsla-card_container">
  <div class="tsla-card_tile tsla-card-has_overlay">
    <div class="tsla-card_tile--asset" style="background-color: #c00;" data-hex="#c00" data-rgb="rgb(240,0,0)"></div>
    <div class="tsla-card_tile--meta">$tesla-primary</div>
  </div>
  <div class="tsla-card_tile tsla-card-has_overlay">
    <div class="tsla-card_tile--asset" style="background-color: #f00;" data-hex="#f00" data-rgb="rgb(255,0,0)"></div>
    <div class="tsla-card_tile--meta">$tesla-active</div>
  </div>
  <div class="tsla-card_tile tsla-card-has_overlay">
    <div class="tsla-card_tile--asset" style="background-color: #39f;" data-hex="#39f" data-rgb="rgb(51,153,255)"></div>
    <div class="tsla-card_tile--meta">$tesla-transactional</div>
  </div>
</div>

*/
/*doc
---
title: Grey Scale Colors
category: Colors
name: 02_colors
---


<div class="tsla-card_container">
  <div class="tsla-card_tile tsla-card-has_overlay">
    <div class="tsla-card_tile--asset" style="background-color: #000;" data-hex="#000" data-rgb="rgb(0,0,0)"></div>
    <div class="tsla-card_tile--meta">$black</div>
  </div>
  <div class="tsla-card_tile tsla-card-has_overlay">
    <div class="tsla-card_tile--asset" style="background-color: #111;" data-hex="#111" data-rgb="rgb(17,17,17)"></div>
    <div class="tsla-card_tile--meta">$grey-1</div>
  </div>
  <div class="tsla-card_tile tsla-card-has_overlay">
    <div class="tsla-card_tile--asset" style="background-color: #222;" data-hex="#222" data-rgb="rgb(34,34,34)"></div>
    <div class="tsla-card_tile--meta">$grey-2</div>
  </div>
  <div class="tsla-card_tile tsla-card-has_overlay">
    <div class="tsla-card_tile--asset" style="background-color: #333;" data-hex="#333" data-rgb="rgb(51,51,51)"></div>
    <div class="tsla-card_tile--meta">$grey-3</div>
  </div>
  <div class="tsla-card_tile tsla-card-has_overlay">
    <div class="tsla-card_tile--asset" style="background-color: #444;" data-hex="#444" data-rgb="rgb(68,68,68)"></div>
    <div class="tsla-card_tile--meta">$grey-4</div>
  </div>
  <div class="tsla-card_tile tsla-card-has_overlay">
    <div class="tsla-card_tile--asset" style="background-color: #666;" data-hex="#666" data-rgb="rgb(102,102,102)"></div>
    <div class="tsla-card_tile--meta">$grey-6</div>
  </div>
  <div class="tsla-card_tile tsla-card-has_overlay">
    <div class="tsla-card_tile--asset" style="background-color: #888;" data-hex="#888" data-rgb="rgb(136,136,136)"></div>
    <div class="tsla-card_tile--meta">$grey-8</div>
  </div>
  <div class="tsla-card_tile tsla-card-has_overlay">
    <div class="tsla-card_tile--asset" style="background-color: #999;" data-hex="#999" data-rgb="rgb(153,153,153)"></div>
    <div class="tsla-card_tile--meta">$grey-9</div>
  </div>
  <div class="tsla-card_tile tsla-card-has_overlay">
    <div class="tsla-card_tile--asset" style="background-color: #aaa;" data-hex="#aaa" data-rgb="rgb(170,170,170)"></div>
    <div class="tsla-card_tile--meta">$grey-a</div>
  </div>
  <div class="tsla-card_tile tsla-card-has_overlay">
    <div class="tsla-card_tile--asset" style="background-color: #bbb;" data-hex="#bbb" data-rgb="rgb(187,187,187)"></div>
    <div class="tsla-card_tile--meta">$grey-b</div>
  </div>
  <div class="tsla-card_tile tsla-card-has_overlay">
    <div class="tsla-card_tile--asset" style="background-color: #ccc;" data-hex="#ccc" data-rgb="rgb(204,204,204)"></div>
    <div class="tsla-card_tile--meta">$grey-c</div>
  </div>
  <div class="tsla-card_tile tsla-card-has_overlay">
    <div class="tsla-card_tile--asset" style="background-color: #ddd;" data-hex="#ddd" data-rgb="rgb(221,221,221)"></div>
    <div class="tsla-card_tile--meta">$grey-d</div>
  </div>
  <div class="tsla-card_tile tsla-card-has_overlay">
    <div class="tsla-card_tile--asset" style="background-color: #eee;" data-hex="#eee" data-rgb="rgb(238,238,238)"></div>
    <div class="tsla-card_tile--meta">$grey-e</div>
  </div>
  <div class="tsla-card_tile tsla-card-has_overlay">
    <div class="tsla-card_tile--asset" style="background-color: #fff;" data-hex="#fff" data-rgb="rgb(255,255,255)"></div>
    <div class="tsla-card_tile--meta">$white</div>
  </div>
</div>

*/
/*doc
---
title: Background Colors
category: Colors
name: 03_colors
---

<div class="tsla-card_container">
  <div class="tsla-card_tile tsla-card-has_overlay">
    <div class="tsla-card_tile--asset" style="background-color: #f2f2f2;" data-hex="#f2f2f2" data-rgb="rgb(242,242,242)"></div>
    <div class="tsla-card_tile--meta">$grey-background-color</div>
  </div>
  <div class="tsla-card_tile tsla-card-has_overlay">
    <div class="tsla-card_tile--asset" style="background-color: #f7f7f7;" data-hex="#f7f7f7" data-rgb="rgb(247,247,247)"></div>
    <div class="tsla-card_tile--meta">$grey-background-color-light</div>
  </div>
  <div class="tsla-card_tile tsla-card-has_overlay">
    <div class="tsla-card_tile--asset" style="background-color: #fafafa;" data-hex="#fafafa" data-rgb="rgb(250,250,250)"></div>
    <div class="tsla-card_tile--meta">$grey-background-color-lightest</div>
  </div>
  <div class="tsla-card_tile tsla-card-has_overlay">
    <div class="tsla-card_tile--asset" style="background-color: #fefefe;" data-hex="#fefefe" data-rgb="rgb(254,254,254)"></div>
    <div class="tsla-card_tile--meta">$grey-background-color-even-lighterest</div>
  </div>
</div>

*/
/*doc
---
title: Extra Colors
category: Colors
name: 04_colors
---

<div class="tsla-card_container">
  <div class="tsla-card_tile tsla-card-has_overlay">
    <div class="tsla-card_tile--asset" style="background-color: #4d4d4d;" data-hex="#4d4d4d" data-rgb="rgb(77,77,77)"></div>
    <div class="tsla-card_tile--meta">$border-footer</div>
  </div>
  <div class="tsla-card_tile tsla-card-has_overlay">
    <div class="tsla-card_tile--asset" style="background-color: #808080;" data-hex="#808080" data-rgb="rgb(128,128,128)"></div>
    <div class="tsla-card_tile--meta">$form-label-color</div>
  </div>
  <div class="tsla-card_tile tsla-card-has_overlay">
    <div class="tsla-card_tile--asset" style="background-color: #e5e5e5;" data-hex="#e5e5e5" data-rgb="rgb(229,229,229)"></div>
    <div class="tsla-card_tile--meta">$border-content</div>
  </div>
  <div class="tsla-card_tile tsla-card-has_overlay">
    <div class="tsla-card_tile--asset" style="background-color: #141414;" data-hex="#141414" data-rgb="rgb(20,20,20)"></div>
    <div class="tsla-card_tile--meta">$ui-text</div>
  </div>
</div>

*/
/*doc
---
title: Base "T-shirt" Sizes
category: Variables for Sizing
name: 00_intro
---

These variables are set up to give you a basic guideline from which to build your website. They are all override-able given the `!default` key being added.

```sass_example
$tsla-size--xsmall:  10px !default;
$tsla-size--small:   20px !default;
$tsla-size--medium:  30px !default;
$tsla-size--large:   40px !default;
$tsla-size--xlarge:  50px !default;
$tsla-size--xxlarge: 60px !default;
$tsla-size--jumbo:   70px !default;
```
*/
/*doc

---
title: Media Queries
name: 01_layout
category: Layout
---

When possible, we should aim to follow "Mobile first design" approach, i.e., desiging for smaller screens first, then tweak design / features / content for larger screens.

Below you'll see 2 sets of variables: Legacy and Next-gen. Currently [tesla.com](https://www.tesla.com) is based in the Legacy media queries and will likely remain so for the foreseeable future. We use the following media queries to create the key breakpoints in our grid system.

*/
/*doc
---
title: Available Media Queries
category: Layout
name: 02_layout
---

We have several media query variables that were developed a long time back and are starting to ... show their age. These are still relevant, but allowing for more flexibility to developers means having a few additional media queries available.

<table class="table">
  <thead class="table-head">
    <tr class="table-row">
      <th class="">Variable Name</th>
      <th class="">Value</th>
      <th class="">Sample Devices</th>
      <th class="" style="text-align: center;vertical-align: middle;">Type</th>
    </tr>
  </thead>
  <tfoot class="table-foot">
    <tr class="table-row">
      <td class="" colspan="4"><strong>Note:</strong> All of <a href="https://www.tesla.com">tesla.com</a> is built on these so-called "legacy" media queries, and therefore has been the defacto standard when it comes to building pages using breakpoints.
      </td>
    </tr>
  </tfoot">
  <tbody class="table-body">
    <tr class="table-row">
      <td class=""><code class="styleguide">$mobile-only</code></td>
      <td class=""><code class="styleguide">0-639px</code></td>
      <td class="">
        <ul>
          <li>HTC One, Galaxy S3/S4/S5 (639px)</li>
          <li>iPhone 5/5S (568px)</li>
          <li>iPhone 4 (480px)</li>
        </ul>
      </td>
      <td class="" style="text-align: center;vertical-align: middle;"><div class="particles-alert particles-alert--warn tsla-alert-inline">Legacy</div></td>
    </tr>
    <tr class="table-row">
      <td class=""><code class="styleguide">$small-desktop-only</code></td>
      <td class=""><code class="styleguide">640px-940px</code></td>
      <td class="">
        <ul>
          <li>Small screens only (640px - 960px)</li>
        </ul>
      </td>
      <td class="" style="text-align: center;vertical-align: middle;"><div class="particles-alert particles-alert--warn tsla-alert-inline">Legacy</div></td>
    </tr>
    <tr class="table-row">
      <td class=""><code class="styleguide">$small-desktop</code></td>
      <td class=""><code class="styleguide">640px+</code></td>
      <td class="">
        <ul>
          <li>Small devices (640px+)</li>
        </ul>
      </td>
      <td class="" style="text-align: center;vertical-align: middle;"><div class="particles-alert particles-alert--warn tsla-alert-inline">Legacy</div></td>
    </tr>
    <tr class="table-row">
      <td class=""><code class="styleguide">$large-desktop</code></td>
      <td class=""><code class="styleguide">960px+</code></td>
      <td class="">
        <ul>
          <li>Large desktop screens (960px+)</li>
        </ul>
      </td>
      <td class="" style="text-align: center;vertical-align: middle;"><div class="particles-alert particles-alert--warn tsla-alert-inline">Legacy</div></td>
    </tr>
  </tbody>
  <tbody class="tbody">
    <tr class="table-row">
      <td class=""><code class="styleguide">$mobile-phone-only</code></td>
      <td class=""><code class="styleguide">0-736px</code></td>
      <td class="">
        <ul>
          <li>HTC One (639px)</li>
          <li>Galaxy S3/S4/S5 (639px)</li>
          <li>iPhone 5/5S (568px)</li>
          <li>iPhone 4 (480px)</li>
          <li>iPhone 6 (667px)</li>
          <li>iPhone 6+ (736px)</li>
        </ul>
      </td>
      <td class="" style="text-align: center;vertical-align: middle;"><div class="particles-alert particles-alert--info tsla-alert-inline">New</div></td>
    </tr>
    <tr class="table-row">
      <td class=""><code class="styleguide">$tablet-only</code></td>
      <td class=""><code class="styleguide">601-1280px</code></td>
      <td class="">
        <ul>
          <li>iPad (768px - 1024px)</li>
          <li>Galaxy (800px - 1280px)</li>
          <li>Nexus (601px - 906px)</li>
          <li>Kindle (800px - 1280px)</li>
        </ul>
      </td>
      <td class="" style="text-align: center;vertical-align: middle;"><div class="particles-alert particles-alert--info tsla-alert-inline">New</div></td>
    </tr>
    <tr class="table-row">
      <td class=""><code class="styleguide">$large-devices</code></td>
      <td class=""><code class="styleguide">1200px+</code></td>
      <td class="">
        <ul>
          <li>gigantic screens?</li>
        </ul>
      </td>
      <td class="" style="text-align: center;vertical-align: middle;"><div class="particles-alert particles-alert--info tsla-alert-inline">New</div></td>
    </tr>
  </tbody>
</table>

*/
/*doc

---
title: Transitions
name: Transitions
category: Animations
---

When dealing with elements being added to the HTML DOM or taken off the DOM post-load, we may want to add animation to these transitions to make it smooth and seamless for our users.
Most popular javascript frameworks and third party packages add the following classes to indicate stages of transition:

1. `.{custom}-enter`
2. `.{custom}-enter-active`
3. `.{custom}-leave`
4. `.{custom}-leave-active`

- [ReactJS Animation](https://facebook.github.io/react/docs/animation.html)
- [AngularJS Animation](https://docs.angularjs.org/guide/animations)

## Default Animations
The default animations for Particles is created using `.enter-leave-animation-default` mixin. There are several characteristics to a default set of animations:

 1. Animated element starts off with opacity: .01,
 2. and transitions to opacity: 1 in its enter-active state with 500ms transition on all properties with no transition timing function,
 3. when leaving the DOM the element starts with opacity: 1,
 4. and transitions to opacity: .01 in its leave-active state with 300ms transition on all properties with no transition timing function.

```sass_example
@include enter-leave-animation-default(ng)
```

The above sass @include example produces the following css:

```sass_example
.ng-enter {
    opacity: .01;
}
.ng-enter.ng-enter-active {
    opacity: 1;
    -webkit-transition: opacity 500ms ease-in;
       -moz-transition: opacity 500ms ease-in;
         -o-transition: opacity 500ms ease-in;
            transition: opacity 500ms ease-in;
}
.ng-leave {
    opacity: 1;
}
.ng-leave.ng-leave-active {
    opacity: .01;
    -webkit-transition: opacity 300ms ease-in;
       -moz-transition: opacity 300ms ease-in;
         -o-transition: opacity 300ms ease-in;
            transition: opacity 300ms ease-in;
}
```

The included mixin in use:

```sass_example
@mixin enter-leave-animation-default($classname: general) {
    @include enter-animation($classname)
    @include enter-active-animation($classname, opacity, 500ms, ease-in)
    @include leave-animation($classname)
    @include leave-active-animation($classname, opacity, 300ms, ease-in)
}
```

## Custom Variations

We can customize animations for every step in 4 stages of transition by using all four mixins instead of a single general one:

```sass_example
@include enter-animation(ng)
@include enter-active-animation(ng, opacity, 500ms, ease-in)
@include leave-animation(ng)
@include leave-active-animation(ng, opacity, 300ms, ease-in)
```
The parameters passed are:

1. `$classname`  - Optional. Defaults to "general"
2. `$property`   - Optional. Defaults to "all"
3. `$duration`   - Optional. Defaults to "500ms"
4. `$function`  - Optional. Defaults to "false"

Additionally, we can customize the animation further by passing the content to the `enter-animation`, `leave-animation`, `enter-active-animation` and `leave-active-animation` mixins as follows:

```sass_example
@include enter-animation(general) {
    width: 100%;
}
@include enter-active-animation(general, width, 2s, ease-in) {
    width: 50%;
}
```

The above mixin will produce the following css:

```sass_example
.general-enter {
    width: 100%;
}
.general-enter.general-enter-active {
    width: 50%;
    -webkit-transition: width 2s ease-in;
       -moz-transition: width 2s ease-in;
         -o-transition: width 2s ease-in;
            transition: width 2s ease-in;
}
```
*/
.btn-navigate {
  background-image: url("/tesla_theme/assets/img/icon-navigate.svg"); }

[dir='rtl'] .tsla-header-main--container .container {
  -ms-flex-pack: normal;
      justify-content: normal; }
  [dir='rtl'] .tsla-header-main--container .container .tsla-header-main--logo_container {
    margin-right: 20px; }
  [dir='rtl'] .tsla-header-main--container .container [for='tsla-header-main--trigger'] {
    -ms-flex-order: -1;
        order: -1; }

[dir='rtl'] .tsla-header-main--container .tsla-header-nav--list_item_last {
  right: auto;
  left: 0; }
  [dir='rtl'] .tsla-header-main--container .tsla-header-nav--list_item_last .tsla-header-nav--list {
    margin-left: 0;
    padding-left: 0; }
    [dir='rtl'] .tsla-header-main--container .tsla-header-nav--list_item_last .tsla-header-nav--list .tsla-header-nav--primary_right {
      margin-left: 0;
      margin-right: 20px;
      padding-left: 0;
      padding-right: 10px; }

[id='one-week-w-mx-modal'] {
  z-index: 9999; }
  [id='one-week-w-mx-modal'] .modal-dialog {
    max-width: 600px;
    min-height: auto;
    text-align: center;
    top: 50%;
    transform: translateY(-50%); }
    [id='one-week-w-mx-modal'] .modal-dialog .modal-title {
      margin-bottom: 0; }
    [id='one-week-w-mx-modal'] .modal-dialog .modal-body .section-description {
      color: #5c5e62;
      color: var(--tds-color--grey30);
      margin-left: auto;
      margin-right: auto;
      margin-top: 0;
      max-width: 450px; }

@media (min-width: 0) and (max-width: 639px) {
  [id='one-week-w-mx-overlay'] {
    -ms-flex-align: center;
        align-items: center;
    background-color: #000;
    border-bottom: 1px solid #000;
    display: -ms-flexbox;
    display: flex;
    opacity: 0;
    padding: 10px 20px;
    z-index: 9999; }
    [id='one-week-w-mx-overlay'].hidden {
      display: none; }
    [id='one-week-w-mx-overlay'].overlay--enter {
      opacity: 1;
      transition-property: all; }
    [id='one-week-w-mx-overlay'] .section-description {
      color: #fff;
      font-size: 13px;
      line-height: 13px;
      margin: 0;
      text-align: left; }
    [id='one-week-w-mx-overlay'] .btn-group {
      margin: 0 10px;
      min-width: 100px;
      position: relative; }
    [id='one-week-w-mx-overlay'] .btn-primary {
      float: none; }
    [id='one-week-w-mx-overlay'] .btn-close {
      background-image: url("/tesla_theme/assets/img/icon-close-alternate.svg");
      cursor: pointer;
      height: 10px;
      position: absolute;
      right: 10px;
      top: 10px;
      width: 10px;
      z-index: 1; } }

p {
  margin: 22px 0; }

.section-title {
  margin-bottom: 10px; }

.hero-container .section-hero {
  max-width: 100%; }

@media (min-width: 0) and (max-width: 639px) {
  .page-supercharger .sticky-nav {
    top: 52px; } }

@media (min-width: 601px) and (max-width: 1280px) {
  .nav-container {
    margin-top: 65px; } }

.supercharger-section {
  margin: 75px auto 0;
  max-width: 1020px;
  padding-bottom: 75px;
  text-align: center; }

.container-inner {
  margin: auto;
  max-width: 600px; }

.supercharger-station-overview {
  border-bottom: 0; }
  .supercharger-station-overview .section-content {
    padding-top: 0; }

.supercharger-station-overview-top {
  -ms-flex-align: center;
      align-items: center;
  border-bottom: 1px solid #f4f4f4;
  border-bottom: 1px solid var(--tds-color--grey70);
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: distribute;
      justify-content: space-around;
  margin: 0 auto;
  padding-bottom: 40px; }
  .supercharger-station-overview-top .supercharger-station-img {
    width: 560px; }
  .supercharger-station-overview-top .desc {
    width: 75%; }
  .supercharger-station-overview-top .desc-inner {
    margin-left: -50px;
    margin-top: -90px;
    max-width: 420px;
    text-align: left; }

.supercharger-station-overview-bottom {
  -ms-flex-align: center;
      align-items: center;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: distribute;
      justify-content: space-around;
  margin: 50px auto 0; }
  .supercharger-station-overview-bottom .step {
    -ms-flex-item-align: start;
        align-self: flex-start;
    max-width: 290px;
    text-align: center; }
    .supercharger-station-overview-bottom .step img {
      margin-bottom: 20px;
      width: 150px; }

.supercharger--map-preloader {
  height: 0;
  width: 0; }

.supercharger-locations {
  margin-top: 0;
  max-width: 1440px;
  padding-bottom: 0;
  padding-top: 40px;
  position: relative;
  text-align: center; }
  .supercharger-locations .small {
    color: #757575;
    color: var(--tds-color--grey35);
    font-size: 12px;
    margin: 0; }
    .i18n-zh_HK .supercharger-locations .small,
    .i18n-ja_JP .supercharger-locations .small,
    .i18n-zh_CN .supercharger-locations .small,
    .i18n-zh_MO .supercharger-locations .small {
      text-align: center; }
  .supercharger-locations .search-wrapper {
    background-color: #fff;
    padding: 15px; }
    .supercharger-locations .search-wrapper .form-wrapper {
      margin: auto;
      position: relative;
      width: 400px; }
    .supercharger-locations .search-wrapper .form-item {
      display: inline-block;
      margin-bottom: 0;
      position: static; }
    .supercharger-locations .search-wrapper a {
      margin-left: 20px; }
    .supercharger-locations .search-wrapper .form-text {
      font-weight: 300;
      border: 1px solid #ccc; }
    .supercharger-locations .search-wrapper [type='text']:focus {
      border-color: transparent;
      outline: none; }

.divider {
  border-bottom: 1px solid #f4f4f4;
  border-bottom: 1px solid var(--tds-color--grey70);
  margin: 20px auto;
  max-width: 400px; }

.region-sub-nav {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: justify;
      justify-content: space-between;
  margin: auto;
  max-width: 1020px; }
  .region-sub-nav a {
    border-bottom: 5px solid #a2a3a5;
    padding-bottom: 16px;
    width: 20%; }
  .region-sub-nav .map-selected {
    border-bottom: 5px solid #171a20;
    border-bottom: 5px solid var(--tds-color--grey10);
    color: #171a20;
    color: var(--tds-color--grey10); }

.supercharger-locations-map {
  position: relative; }
  .supercharger-locations-map .supercharger-legend {
    bottom: 15px;
    color: #fff;
    font-weight: bold;
    padding: 20px;
    position: absolute;
    right: 0;
    text-align: left;
    width: 200px; }
  .supercharger-locations-map .legend-definition {
    font-size: 14px;
    min-height: 25px;
    padding-left: 29px; }
  .supercharger-locations-map .open-now {
    background-image: url("/sites/all/modules/custom/tesla_findus_map/assets/icon-supercharger@2x.png");
    background-position: left;
    background-repeat: no-repeat;
    background-size: 15px; }
  .supercharger-locations-map .coming-soon {
    background-image: url("/sites/all/modules/custom/tesla_findus_map/assets/icon-supercharger-comingsoon@2x.png");
    background-position: left;
    background-repeat: no-repeat;
    background-size: 15px; }

.super-region-map {
  background-position-x: center;
  background-position-y: -122px;
  background-repeat: no-repeat;
  background-size: 100%;
  height: 0;
  padding-top: 41.66667%;
  position: relative;
  transform: translateZ(0);
  transition: background-image .5s ease-in; }
  .super-region-map.europe + .supercharger-legend {
    left: 15px;
    right: initial; }
  .super-region-map.asia + .supercharger-legend {
    left: 50%;
    transform: translateX(-50%); }

.annual-roadtrip-credits {
  margin-top: 0;
  text-align: center; }
  @media (min-width: 0) and (max-width: 639px) {
    .annual-roadtrip-credits {
      margin-top: 0; } }
  .annual-roadtrip-credits p {
    margin: auto;
    max-width: 600px; }
  .annual-roadtrip-credits .section-hero-video {
    margin-bottom: 75px;
    margin-top: 75px; }

.annual-roadtrip-credits-img {
  background: url("/tesla_theme/assets/img/supercharger/white_modelx_sunset_med.png") no-repeat center;
  background-position-y: -240px;
  background-size: cover;
  height: 300px;
  margin-bottom: 80px; }

.supercharger-calculator--buttons {
  -ms-flex-pack: center;
      justify-content: center; }
  .supercharger-calculator--buttons .selected button {
    background-color: #171a20;
    background-color: var(--tds-color--grey10);
    color: #fff;
    color: var(--tds-color--white); }
  .supercharger-calculator--buttons button.selected, .supercharger-calculator--buttons button:focus {
    color: #fff;
    color: var(--tds-color--white);
    background-color: #171a20;
    background-color: var(--tds-color--grey10);
    box-shadow: none; }

.supercharger-calculator--vehicle div {
  height: 350px; }
  @media (min-width: 0) and (max-width: 639px) {
    .supercharger-calculator--vehicle div {
      height: 200px; } }
  .supercharger-calculator--vehicle div[data-vehicle-model] {
    display: none; }
  .supercharger-calculator--vehicle div.selected {
    display: block; }

.supercharger-calculator--vehicle .calculator-models,
.supercharger-calculator--vehicle .calculator-modelx,
.supercharger-calculator--vehicle .calculator-model3 {
  background-size: contain; }

.supercharger-calculator--savings {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: distribute;
      justify-content: space-around;
  margin: auto;
  width: 520px; }
  @media (min-width: 0) and (max-width: 639px) {
    .supercharger-calculator--savings {
      width: 100%; } }
  .supercharger-calculator--savings span p {
    margin: 0; }
  .supercharger-calculator--savings p.small {
    font-size: 11px; }

.supercharger-cost h1 {
  color: #3e6ae1;
  color: var(--tds-color--blue30); }

.gasoline-cost h1 {
  color: #171a20;
  color: var(--tds-color--grey10); }

.supercharger-calculator--min-max {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: justify;
      justify-content: space-between; }
  .supercharger-calculator--min-max p {
    font-size: smaller; }

.supercharger-calculator--slider {
  margin: 20px auto 0;
  position: relative;
  text-align: left;
  width: 800px; }
  .supercharger-calculator--slider p {
    margin: 0;
    padding-top: 0; }
  .supercharger-calculator--slider a {
    margin-top: 40px; }
  .supercharger-calculator--slider input[type='range'] {
    -webkit-appearance: none;
    background-image: linear-gradient(to right, #3e6ae1 50%, #f4f4f4 50%);
    background-image: linear-gradient(to right, var(--tds-color--blue30) 50%, #f4f4f4 50%);
    height: 5px;
    margin: 0;
    outline: none;
    padding: 0;
    position: absolute;
    top: 42px;
    width: 100%; }
    .supercharger-calculator--slider input[type='range']::-webkit-slider-thumb {
      -webkit-appearance: none !important;
      background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHdpZHRoPSI3MnB4IiBoZWlnaHQ9IjcycHgiIHZpZXdCb3g9IjAgMCA3MiA3MiIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4gICAgICAgIDx0aXRsZT50b2dnbGU8L3RpdGxlPiAgICA8ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz4gICAgPGRlZnM+PC9kZWZzPiAgICA8ZyBpZD0iUGFnZS0xIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4gICAgICAgIDxnIGlkPSJzbGlkZXIiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0xODAuMDAwMDAwLCAtNjMuMDAwMDAwKSI+ICAgICAgICAgICAgPGcgaWQ9InRvZ2dsZSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTgxLjAwMDAwMCwgNjQuMDAwMDAwKSI+ICAgICAgICAgICAgICAgIDxjaXJjbGUgaWQ9Ik92YWwiIHN0cm9rZT0iI0RERERERCIgc3Ryb2tlLXdpZHRoPSIyIiBmaWxsPSIjRkZGRkZGIiBjeD0iMzUiIGN5PSIzNSIgcj0iMzUiPjwvY2lyY2xlPiAgICAgICAgICAgICAgICA8ZyBpZD0iOjotYXJyb3dzIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxOC4wMDAwMDAsIDI1LjAwMDAwMCkiIGZpbGw9IiMzMzk5RkYiPiAgICAgICAgICAgICAgICAgICAgPHBvbHlnb24gaWQ9IlRyaWFuZ2xlIiBwb2ludHM9IjM0IDEwIDIyIDIwIDIyIDAiPjwvcG9seWdvbj4gICAgICAgICAgICAgICAgICAgIDxwb2x5Z29uIGlkPSJUcmlhbmdsZS1Db3B5IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg2LjAwMDAwMCwgMTAuMDAwMDAwKSByb3RhdGUoLTE4MC4wMDAwMDApIHRyYW5zbGF0ZSgtNi4wMDAwMDAsIC0xMC4wMDAwMDApICIgcG9pbnRzPSIxMiAxMCAwIDIwIDAgMCI+PC9wb2x5Z29uPiAgICAgICAgICAgICAgICA8L2c+ICAgICAgICAgICAgPC9nPiAgICAgICAgPC9nPiAgICA8L2c+PC9zdmc+");
      background-size: 100%;
      height: 25px;
      width: 25px; }
  .supercharger-calculator--slider .supercharger-calculator--steps {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: justify;
        justify-content: space-between;
    position: absolute;
    top: 37px;
    width: 100%; }
    .supercharger-calculator--slider .supercharger-calculator--steps span {
      background: #008000;
      height: 15px;
      width: 1px; }
  .supercharger-calculator--slider .selected-miles {
    position: absolute;
    font-size: 12px;
    bottom: -30px;
    left: 350px;
    width: 100px;
    text-align: center; }

select[id='range-dropdown'] {
  height: 40px;
  font-family: 'HeiT ASC Traditional Chinese', 'M Hei PRC W45', 'AXIS Font Japanese W55', 'FB New Gothic', 'Gotham Medium', system, sans-serif;
  font-family: var(--tds-font-combined--medium);
  font-size: 14px;
  font-size: var(--tds-font-size--30);
  line-height: 20px;
  line-height: var(--tds-line-height--20);
  font-weight: 500;
  background-color: #f4f4f4;
  background-color: var(--tds-color--grey70);
  color: #171a20;
  color: var(--tds-color--grey10);
  padding: 10px var(--tds-select-horizontal_spacer);
  padding: 10px var(--tds-select-horizontal_spacer);
  border-radius: var(--tds-select-border_radius);
  border-radius: var(--tds-select-border_radius);
  border: 1px solid #393c41;
  border: 1px solid var(--tds-color--grey20);
  transition: border 0.25s cubic-bezier(0.5, 0.25, 0.25, 0.75);
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  outline: none; }
  @media (min-width: 0) and (max-width: 639px) {
    select[id='range-dropdown'] {
      width: 100%;
      max-width: 400px;
      border-radius: 20px;
      padding-left: 20px; } }

.supercharger-calculator--disclaimer {
  margin: 60px auto 0;
  width: 800px; }
  @media (min-width: 0) and (max-width: 639px) {
    .supercharger-calculator--disclaimer {
      width: 100%; } }
  .supercharger-calculator--disclaimer p {
    font-size: 13px;
    margin: 0;
    text-align: left; }
  .supercharger-calculator--disclaimer a {
    display: block;
    margin-top: 40px; }
  @media (min-width: 0) and (max-width: 639px) {
    .supercharger-calculator--disclaimer .btn-tertiary.hide-on-desktop {
      display: -ms-inline-flexbox !important;
      display: inline-flex !important;
      color: #fff;
      color: var(--tds-color--white); } }

.calculator-models,
.calculator-modelx,
.calculator-model3 {
  background-size: 100%;
  transform: translateZ(0);
  transition: background-image .5s ease-in; }

.supercharger-technology-img {
  background: url("/tesla_theme/assets/img/supercharger/supercharger-technology.png") no-repeat center;
  background-size: 100%;
  height: 320px; }

.animation-wrapper {
  -ms-flex-align: center;
      align-items: center;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: distribute;
      justify-content: space-around;
  margin: auto;
  width: 500px; }

.enough-energy {
  margin: 0;
  opacity: 0; }

.supercharger-technology .wrapper {
  background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHdpZHRoPSIxcHgiIGhlaWdodD0iMXB4IiB2aWV3Qm94PSIwIDAgMSAxIiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPiAgICAgICAgPHRpdGxlPlJlY3RhbmdsZTwvdGl0bGU+ICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPiAgICA8ZGVmcz48L2RlZnM+ICAgIDxnIGlkPSJQYWdlLTEiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPiAgICAgICAgPHJlY3QgaWQ9IlJlY3RhbmdsZSIgZmlsbD0iI0NDQ0NDQyIgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSI+PC9yZWN0PiAgICA8L2c+PC9zdmc+");
  background-position: 80%;
  background-position-y: initial;
  background-repeat: repeat-y;
  border: 1px solid #f4f4f4;
  height: 50px;
  margin: 20px auto;
  width: 200px; }

.charge-stage {
  background: #2de028;
  height: 100%;
  width: 0; }

.timer .time {
  display: inline-block;
  text-align: right;
  width: 40px; }

.timer span {
  font-size: 28px; }
  .timer span.label {
    color: #757575;
    color: var(--tds-color--grey35);
    font-size: 18px; }

.minute-label {
  display: inline-block;
  width: 80px; }

.network-expansion {
  border-bottom: 0;
  margin-top: 0; }
  @media (min-width: 0) and (max-width: 639px) {
    .network-expansion {
      margin-top: 0; } }
  .network-expansion .content-inner {
    padding-bottom: 50px; }
  .network-expansion .section-content {
    padding-bottom: 0; }

@media (min-width: 0) and (max-width: 639px) {
  .supercharger-station-overview {
    margin-top: 40px; }
  .supercharger-section {
    padding-bottom: 37.5px;
    padding-left: 20px;
    padding-right: 20px; }
    .supercharger-section .container {
      min-width: 0; }
  .column-item-container,
  .section-hero-container {
    min-width: 0; }
  .supercharger-station-overview-top {
    display: inherit; }
    .supercharger-station-overview-top .img,
    .supercharger-station-overview-top .desc {
      width: 100%; }
    .supercharger-station-overview-top .supercharger-station {
      width: 360px; }
    .supercharger-station-overview-top .desc-inner {
      margin-left: 0;
      margin-top: 0;
      max-width: 100%;
      text-align: center; }
  .supercharger-station-overview-bottom {
    display: inherit; }
    .supercharger-station-overview-bottom .step {
      max-width: 100%; }
    .supercharger-station-overview-bottom .findus {
      margin-top: 50px; }
    .supercharger-station-overview-bottom .btn-outline {
      color: #171a20;
      color: var(--tds-color--grey10); }
  .annual-roadtrip-credits-img {
    background: url("/tesla_theme/assets/img/supercharger/white_modelx_sunset_med.png") no-repeat center;
    background-size: 100%;
    height: 240px;
    margin: auto -20px 40px; }
  .supercharger-technology-img {
    height: 200px; }
  .animation-wrapper {
    display: inherit;
    width: 100%; } }

.urban-supercharger-section {
  margin: 0 auto;
  max-width: 1440px; }
  @media (min-width: 640px) {
    .urban-supercharger-section.section-container [class*='section-'] {
      float: none;
      margin: 0;
      width: 100%; }
    .urban-supercharger-section.section-container .section-title {
      margin-bottom: 10px; }
    .urban-supercharger-section.section-container .section-description {
      margin-bottom: 22px;
      margin-top: 22px; } }

.go-anywhere {
  padding-bottom: 0; }
  .go-anywhere .section-content {
    padding-top: 0; }

[id='section-multi-column-last'] {
  padding-bottom: 75px;
  padding-top: 0; }
  @media (min-width: 0) and (max-width: 639px) {
    [id='section-multi-column-last'] .section-hero {
      max-width: 100%; } }
  [id='section-multi-column-last'] > .container {
    padding-top: 75px; }
    @media (min-width: 0) and (max-width: 639px) {
      [id='section-multi-column-last'] > .container {
        padding-top: 40px; } }

[id='page-supercharger'] .sticky-nav--buttons .sticky-nav--link {
  color: #3457b1;
  color: var(--tds-color--blue20); }

[id='page-supercharger'] .spec-list {
  padding-left: 0; }
  [id='page-supercharger'] .spec-list a {
    color: #3457b1;
    color: var(--tds-color--blue20); }

[id='request-callback-modal'] .modal-content {
  background-color: #f4f4f4;
  background-color: var(--tds-color--grey70); }