@font-face {
  font-family: 'Louis';
  src: url("../fonts/louisregular-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/louisregular-webfont.woff") format("woff"), url("../fonts/louisregular-webfont.ttf") format("truetype"), url("../fonts/louisregular-webfont.svg#Louis-Regular") format("svg");
  font-weight: normal;
  font-style: normal; }
@font-face {
  font-family: 'Louis-bold';
  src: url("../fonts/louisbold-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/louisbold-webfont.woff") format("woff"), url("../fonts/louisbold-webfont.ttf") format("truetype"), url("../fonts/louisbold-webfont.svg#Louis-Regular") format("svg");
  font-weight: normal;
  font-style: normal; }
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/roboto-v18-latin-regular.eot");
  src: local("Roboto"), local("Roboto-Regular"), url("../fonts/roboto-v18-latin-regular.eot?#iefix") format("embedded-opentype"), url("../fonts/roboto-v18-latin-regular.woff2") format("woff2"), url("../fonts/roboto-v18-latin-regular.woff") format("woff"), url("../fonts/roboto-v18-latin-regular.ttf") format("truetype"), url("../fonts/roboto-v18-latin-regular.svg#Roboto") format("svg"); }
@font-face {
  font-family: 'Roboto-Bold';
  font-style: normal;
  font-weight: 700;
  src: url("../fonts/roboto-v18-latin-700.eot");
  src: local("Roboto Bold"), local("Roboto-Bold"), url("../fonts/roboto-v18-latin-700.eot?#iefix") format("embedded-opentype"), url("../fonts/roboto-v18-latin-700.woff2") format("woff2"), url("../fonts/roboto-v18-latin-700.woff") format("woff"), url("../fonts/roboto-v18-latin-700.ttf") format("truetype"), url("../fonts/roboto-v18-latin-700.svg#Roboto") format("svg"); }
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0; }

body {
  font-size: 16px;
  margin: 0;
  position: relative; }

a {
  color: inherit;
  text-decoration: underline; }

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: Louis-bold;
  font-weight: 400;
  margin: 0; }

p {
  font-family: 'Louis';
  color: #4d4d4d;
  font-size: 18px; }

.container.desktop {
  max-width: 1122px !important;
  height: 403px; }
  .container.desktop .copys {
    position: absolute;
    width: 515px;
    padding: 58px 0 0 54px; }
    .container.desktop .copys h2 {
      font-family: 'Louis-bold';
      color: #e6ac39;
      font-size: 40px;
      width: 430px;
      line-height: 41px;
      margin-bottom: 18px;
      text-transform: uppercase;
      letter-spacing: 2px; }
    .container.desktop .copys p {
      font-family: 'Louis';
      color: #ffffff;
      font-size: 14px;
      width: 356px;
      line-height: 20px; }
  .container.desktop .buttons {
    position: absolute;
    width: 1122px;
    top: 286px;
    padding: 0px 84px 22px 443px;
    z-index: 2; }
    .container.desktop .buttons .button {
      width: 25%;
      float: left;
      text-align: center; }
      .container.desktop .buttons .button .content-circle {
        border: 2px solid #808080;
        border-radius: 50%;
        -moz-border-radius: 50%;
        -webkit-border-radius: 50%;
        height: 15px;
        width: 15px;
        margin: auto;
        background-color: #000; }
        .container.desktop .buttons .button .content-circle .circle {
          border-radius: 50%;
          -moz-border-radius: 50%;
          -webkit-border-radius: 50%;
          height: 9px;
          width: 9px;
          margin: 1px;
          cursor: pointer; }
          .container.desktop .buttons .button .content-circle .circle.none:after, .container.desktop .buttons .button .content-circle .circle.none:before {
            display: none; }
          .container.desktop .buttons .button .content-circle .circle.active {
            background-color: #eeb640; }
      .container.desktop .buttons .button .text {
        font-family: 'Louis';
        color: #ffffff;
        font-size: 12px;
        margin: 1px auto;
        width: 104px;
        line-height: 16px; }
  .container.desktop .line {
    position: absolute;
    width: 1122px;
    top: 293px;
    padding: 0px 155px 22px 514px; }
    .container.desktop .line .content {
      border-top: 2px solid #808080; }
  .container.desktop .car {
    width: 1122px;
    height: 403px; }
  .container.desktop .switch {
    position: absolute;
    width: 1122px;
    top: 347px;
    padding: 0px 249px 0 624px; }
    .container.desktop .switch .toggle-button-cover {
      width: 100%;
      display: inline-block; }
      .container.desktop .switch .toggle-button-cover .button-cover {
        width: 100%;
        display: inline-block;
        height: 42px;
        position: relative !important;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0; }
        .container.desktop .switch .toggle-button-cover .button-cover .button {
          position: relative;
          width: 122px;
          height: 21px;
          margin: 0 auto 0 auto;
          overflow: hidden; }
          .container.desktop .switch .toggle-button-cover .button-cover .button .checkbox {
            position: relative;
            width: 100%;
            height: 100%;
            padding: 0;
            margin: 0;
            opacity: 0;
            cursor: pointer;
            z-index: 3; }
            .container.desktop .switch .toggle-button-cover .button-cover .button .checkbox:checked + .knobs:before {
              content: 'TRASEIRA';
              left: 58px;
              background-color: #e7af38;
              width: 61px; }
          .container.desktop .switch .toggle-button-cover .button-cover .button .knobs {
            z-index: 2;
            transition: 0.3s ease all;
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0; }
            .container.desktop .switch .toggle-button-cover .button-cover .button .knobs:before {
              content: 'FRENTE';
              position: absolute;
              top: 3px;
              left: 4px;
              width: 54px;
              height: 15px;
              color: #fff;
              font-size: 10px;
              font-weight: bold;
              text-align: center;
              line-height: 0;
              padding: 7px 4px;
              background-color: #e7af38;
              border-radius: 20px;
              transition: 0.3s cubic-bezier(0.18, 0.89, 0.35, 1.15) all;
              transition: 0.3s ease all; }
          .container.desktop .switch .toggle-button-cover .button-cover .button .layer {
            width: 100%;
            transition: 0.3s ease all;
            z-index: 1;
            border: 2px solid #cdcdcd;
            transition: 0.3s ease all;
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0; }
            .container.desktop .switch .toggle-button-cover .button-cover .button .layer:after {
              content: 'TRASEIRA';
              position: absolute;
              top: 2px;
              left: 53px;
              width: 67px;
              height: 15px;
              color: #fff;
              font-size: 10px;
              font-weight: bold;
              text-align: center;
              line-height: 0;
              padding: 6px 4px; }
            .container.desktop .switch .toggle-button-cover .button-cover .button .layer:before {
              content: 'FRENTE';
              position: absolute;
              top: 3px;
              left: 2px;
              width: 54px;
              height: 15px;
              color: #fff;
              font-size: 10px;
              font-weight: bold;
              text-align: center;
              line-height: 0;
              padding: 5px 4px; }
          .container.desktop .switch .toggle-button-cover .button-cover .button.r {
            border-radius: 100px; }
            .container.desktop .switch .toggle-button-cover .button-cover .button.r .layer {
              border-radius: 100px; }
.container.mobile {
  max-width: 375px !important;
  background-image: url("../images/front/1.jpg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: top center;
  height: 375px;
  width: 375px;
  background-color: #000; }
  .container.mobile .slider {
    position: absolute;
    width: 307px;
    top: 244px;
    margin: 0 35px; }
    .container.mobile .slider .slide {
      margin: 0;
      list-style: none;
      padding: 0; }
      .container.mobile .slider .slide .content {
        height: 56px;
        display: flex; }
        .container.mobile .slider .slide .content .title {
          text-align: center;
          color: #ffffff;
          font-size: 21px;
          line-height: 22px;
          font-family: 'Louis';
          letter-spacing: 1px;
          width: 219px;
          margin: auto; }
    .container.mobile .slider .bx-wrapper {
      -moz-box-shadow: none !important;
      -webkit-box-shadow: none !important;
      box-shadow: none !important;
      border: none !important;
      background: transparent !important;
      margin: 0px; }
      .container.mobile .slider .bx-wrapper .bx-prev {
        left: 6% !important; }
      .container.mobile .slider .bx-wrapper .bx-next {
        right: 6% !important; }
      .container.mobile .slider .bx-wrapper .bx-pager {
        bottom: auto !important; }
      .container.mobile .slider .bx-wrapper .bx-controls-auto {
        bottom: auto !important; }
      .container.mobile .slider .bx-wrapper .bx-pager.bx-default-pager a {
        background: none repeat scroll 0 0 #ededed;
        border: none;
        border-radius: 20px;
        -moz-border-radius: 20px;
        -webkit-border-radius: 20px;
        cursor: pointer;
        display: block;
        height: 10px;
        width: 10px;
        margin-right: 5px;
        opacity: 1;
        outline: 0;
        text-indent: -9999px;
        background: #e7af38; }
        .container.mobile .slider .bx-wrapper .bx-pager.bx-default-pager a.active {
          background: #e7af38; }
        .container.mobile .slider .bx-wrapper .bx-pager.bx-default-pager a:hover {
          background: #af801e; }
      .container.mobile .slider .bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-pager {
        text-align: center;
        width: 100%;
        margin-top: -40px !important;
        padding: 0 !important; }
      .container.mobile .slider .bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-controls-auto {
        display: none; }
  .container.mobile .car {
    width: 375px;
    height: 375px; }
  .container.mobile .switch {
    position: absolute;
    width: 375px;
    top: 322px;
    padding: 0px auto; }
    .container.mobile .switch .toggle-button-cover {
      width: 100%;
      display: inline-block; }
      .container.mobile .switch .toggle-button-cover .button-cover {
        width: 100%;
        display: inline-block;
        height: 42px;
        position: relative !important;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0; }
        .container.mobile .switch .toggle-button-cover .button-cover .button {
          position: relative;
          width: 122px;
          height: 21px;
          margin: 0 auto 0 auto;
          overflow: hidden; }
          .container.mobile .switch .toggle-button-cover .button-cover .button .checkbox {
            position: relative;
            width: 100%;
            height: 100%;
            padding: 0;
            margin: 0;
            opacity: 0;
            cursor: pointer;
            z-index: 3; }
            .container.mobile .switch .toggle-button-cover .button-cover .button .checkbox:checked + .knobs:before {
              content: 'TRASEIRA';
              left: 58px;
              background-color: #e7af38;
              width: 61px; }
          .container.mobile .switch .toggle-button-cover .button-cover .button .knobs {
            z-index: 2;
            transition: 0.3s ease all;
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0; }
            .container.mobile .switch .toggle-button-cover .button-cover .button .knobs:before {
              content: 'FRENTE';
              position: absolute;
              top: 3px;
              left: 4px;
              width: 54px;
              height: 15px;
              color: #fff;
              font-size: 10px;
              font-weight: bold;
              text-align: center;
              line-height: 0;
              padding: 7px 4px;
              background-color: #e7af38;
              border-radius: 20px;
              transition: 0.3s cubic-bezier(0.18, 0.89, 0.35, 1.15) all;
              transition: 0.3s ease all; }
          .container.mobile .switch .toggle-button-cover .button-cover .button .layer {
            width: 100%;
            transition: 0.3s ease all;
            z-index: 1;
            border: 2px solid #cdcdcd;
            transition: 0.3s ease all;
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0; }
            .container.mobile .switch .toggle-button-cover .button-cover .button .layer:after {
              content: 'TRASEIRA';
              position: absolute;
              top: 2px;
              left: 53px;
              width: 67px;
              height: 15px;
              color: #fff;
              font-size: 10px;
              font-weight: bold;
              text-align: center;
              line-height: 0;
              padding: 6px 4px; }
            .container.mobile .switch .toggle-button-cover .button-cover .button .layer:before {
              content: 'FRENTE';
              position: absolute;
              top: 3px;
              left: 2px;
              width: 54px;
              height: 15px;
              color: #fff;
              font-size: 10px;
              font-weight: bold;
              text-align: center;
              line-height: 0;
              padding: 5px 4px; }
          .container.mobile .switch .toggle-button-cover .button-cover .button.r {
            border-radius: 100px; }
            .container.mobile .switch .toggle-button-cover .button-cover .button.r .layer {
              border-radius: 100px; }

@media (max-width: 974px) {
  .container.desktop {
    display: none; }
  .container.mobile {
    display: block; } }
@media (min-width: 975px) and (max-width: 1121px) {
  .container.desktop {
    display: block;
    width: 100%; }
    .container.desktop .copys {
      width: 100%;
      padding: 5.3% 4.5%; }
      .container.desktop .copys h2 {
        font-size: 34px;
        width: 48%;
        line-height: 35px; }
      .container.desktop .copys p {
        font-size: 12px;
        width: 35%;
        line-height: 17px; }
    .container.desktop .buttons {
      width: 100%;
      top: 61%;
      padding: 0px 8% 0 40%; }
      .container.desktop .buttons .button .content-circle .circle:before {
        border-color: #f00; }
      .container.desktop .buttons .button .content-circle .circle:after {
        border-color: #0f0; }
    .container.desktop .line {
      width: 100%;
      top: 63%;
      padding: 0px 14% 0 46%; }
    .container.desktop .car {
      width: 100%;
      height: auto; }
    .container.desktop .switch {
      top: 75%;
      width: 15%;
      padding-left: 60%;
      padding-right: 40%; }
  .container.mobile {
    display: none; } }
@media (min-width: 1122px) {
  .container.desktop {
    display: block;
    width: 1122px; }
  .container.mobile {
    display: none; } }

/*# sourceMappingURL=main.css.map */