@import url(https://fonts.googleapis.com/css2?family=Barlow+Condensed:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&display=swap);

@font-face {
  font-family: InnovaLight;
  src: url(../../fonts/innova-condensed-light.woff)
}

@font-face {
  font-family: Innova;
  src: url(../../fonts/innova-condensed-regular.woff)
}

@font-face {
  font-family: InnovaSemiBold;
  src: url(../../fonts/innova-condensed-semiBold.woff)
}

@font-face {
  font-family: InnovaBold;
  src: url(../../fonts/innova-condensed-bold.woff)
}

.cursor-pointer,
button {
  cursor: pointer
}

.divisor,
hr.divisao {
  opacity: 1;
  border-top: 0
}

.accordion-personalizado .accordion-button::after,
.accordion-personalizado .accordion-button:not(.collapsed)::after {
  background-image: url(../assets/icons/accordeon-icon-open.svg)
}

.bannerHomeImg,
.image-cover {
  object-fit: cover
}

::-webkit-scrollbar {
  width: 6px;
  border-radius: 5px;
  background-color: #d5d5d5
}

::-webkit-scrollbar-thumb {
  background-color: #b20838;
  border-radius: 5px
}

#root,
body,
html {
  background: #fff;
  color: #000;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-family: 'Inoova', sans-serif !important
}

body {
  height: auto;
  margin: auto
}

img {
  max-width: 100%
}

ul {
  list-style: none
}

li {
  font-size: 21px
}

button {
  border: none;
  background: 0 0
}

.border-radius,
hr.divisao {
  border-radius: 10px
}

#c-bns button:first-child,
#s-bns button:first-child {
  color: #fff;
  color: var(--cc-btn-primary-text);
  background: #b20838 !important
}

.p,
p {
  margin-bottom: 0 !important;
  font-size: 24px;
  line-height: 29px;
  font-weight: 400
}

td {
  font-size: 12px;
  color: #000
}

.small,
small {
  font-size: 16px !important;
  font-weight: 400;
  line-height: 25px
}

.alt-title {
  font-size: 51px;
  line-height: 54px
}

.ff-barlow {
  font-family: 'Innova', sans-serif
}

.alt-title2 {
  font-size: 41px;
  line-height: 45px
}

.alt-plus {
  font-size: 32px;
  line-height: 36px
}

.alt-medium {
  font-size: 18px;
  line-height: 28px
}

.alt-down {
  font-size: 16px;
  line-height: 18px
}

.alt-small {
  font-size: 14px;
  line-height: 18px
}

.alt-text {
  font-size: 17px;
  line-height: 24px
}

.alt-biggest {
  font-size: 34px;
  line-height: 34px
}

.sub-text {
  font-size: 12px;
  line-height: 20px
}

.justify {
  text-align: justify
}

.divisor {
  width: 1px;
  height: 70%;
  background: #fff
}

.border-orange-left {
  border-left: 1px solid #ff8200;
  padding-left: 10px
}

.border-orange-left2 {
  border-left: 3px solid #ff8200;
  padding-left: 10px
}

.w-fit-content {
  width: fit-content !important
}

.w-max-content {
  width: max-content
}

.uppercase {
  text-transform: uppercase !important
}

.letter-spacening {
  letter-spacing: 5px
}

.thin {
  font-weight: 200 !important
}

.light {
  font-family: 'InnovaLight', sans-serif !important;
  font-weight: 300 !important
}

.regular {
  font-weight: 400 !important
}

.medium {
  font-family: 'InnovaSemiBold', sans-serif !important;
  font-weight: 500 !important
}

.semibold {
  font-family: 'InnovaSemiBold', sans-serif !important;
  font-weight: 600 !important
}

.bold,
b {
  font-family: 'InnovaBold', sans-serif !important;
  font-weight: 700
}

.extrabold {
  font-weight: 800 !important
}

.btnLink,
.btnLinkComprar {
  margin-bottom: 0;
  cursor: pointer !important
}

.py-big {
  padding: 3rem 0
}

.box-shadow {
  box-shadow: 0 3px 6px rgba(0, 0, 0, .16)
}

.shadow-inset {
  box-shadow: inset 0 0 5px rgba(0, 0, 0, .16)
}

hr {
  background: #54575a;
  opacity: .25
}

hr.divisao {
  width: 5px;
  height: 50%;
  background: #ff8100
}

h1 {
  font-size: 30px;
  line-height: 36px
}

h2 {
  font-size: 27px;
  line-height: 31px;
  font-weight: 800
}

.btnLink,
a {
  font-size: 18px
}

a,
a:hover {
  color: #6d6d6d;
  font-weight: 400
}

a {
  line-height: 21px;
  text-decoration: none !important
}

.pointer-events-none {
  pointer-events: none
}

.show-read-more .more-text,
.show-read-more2 .more-text2 {
  display: none
}

.accordion-personalizado.text-vermelho .accordion-button,
.text-red {
  color: #b20838 !important
}

.text-creme {
  color: #f4d9c0 !important
}

.text-orange {
  color: #ff8200 !important
}

.text-pink {
  color: #f6989b !important
}

.text-dark-pink {
  color: #9a6263 !important
}

.text-blue {
  color: #0b3077 !important
}

.text-light-blue {
  color: #1f6ca4 !important
}

.text-green {
  color: #60be9b !important
}

.text-green-blue {
  color: #15a8ab !important
}

.text-cyan {
  color: #26bebb !important
}

.text-dark-green {
  color: #19b174 !important
}

.text-white {
  color: #fff !important
}

.text-grey {
  color: #6d6d6d !important
}

.text-black {
  color: #000 !important
}

.text-orange-brown {
  color: #ca7938 !important
}

.text-light-brown {
  color: #a47e66 !important
}

.hover-blue {
  transition: .2s
}

.hover-blue:hover {
  color: #0b3077
}

.bg-red {
  background: #b20838
}

.bg-orange {
  background: #f9bb75
}

.bg-light-orange {
  background: #f6d0a9
}

.bg-white {
  background: #fff
}

.bg-creme {
  background: #fff0d7
}

.bg-blue {
  background: #304271
}

.bg-green {
  background: #60be9b
}

.bg-green-blue {
  background: #15a8ab
}

.bg-dark-green {
  background: rgba(48, 66, 113, .34)
}

.bg-light-green {
  background: rgba(149, 170, 154, .24)
}

.bg-grey {
  background: #f2f2f2
}

.bg-light-pink {
  background: #f6b09d
}

.bg-brown {
  background: #816c55
}

.slick-next,
.slick-prev {
  width: 10px !important;
  height: 23px !important;
  background-image: url(../assets/icons/arrow-carrossel.png) !important;
  background-size: cover !important
}

.bg-light-blur {
  background-color: rgba(255, 255, 255, .75);
  backdrop-filter: blur(20px)
}

.bg-transparent-blur {
  background-color: rgba(255, 255, 255, .2);
  backdrop-filter: blur(20px)
}

.border-radius-medium {
  border-radius: 20px
}

.border-radius-large {
  border-radius: 25px
}

.border-radius-big {
  border-radius: 35px
}

.border-radius-shape {
  border-radius: 35px 35px 0
}

.slick-prev {
  transform: translate(0, -50%) rotateZ(180deg) !important
}

.slick-next:before,
.slick-prev:before {
  content: "" !important
}

.slick-dots li button:before {
  font-family: slick !important;
  font-size: 12px !important;
  line-height: 20px !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 5px !important;
  height: 5px !important;
  content: "" !important;
  text-align: center !important;
  opacity: 1 !important;
  background: #ffffff9f;
  border: 1px solid #ffffff9f;
  border-radius: 100% !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  transition: .1s !important
}

.slick-dots li.slick-active button:before {
  content: "";
  opacity: 1 !important;
  color: #fff !important;
  border: 1px solid #fff !important;
  transition: .1s !important;
  background: #fff;
  box-shadow: 0 0 6px rgba(0, 0, 0, .16)
}

.slick-dots li {
  margin: 0 5px !important
}

.slick-dots {
  position: absolute !important;
  bottom: -50px !important;
  height: fit-content
}

.next-arrow,
.prev-arrow {
  width: 12px;
  height: 24px;
  background-image: url(../assets/icones/arrow-carrossel.svg);
  background-position: center;
  background-size: auto;
  background-repeat: no-repeat;
  transition: .3s
}

.slide-arrow {
  position: absolute;
  top: 50%;
  margin-top: -15px
}

.prev-arrow {
  left: 8vw;
  transform: rotate(180deg);
  z-index: 1
}

.next-arrow {
  right: 8vw
}

.next-arrow:hover,
.prev-arrow:hover {
  opacity: .7;
  transition: .3s
}

.slick-slide img {
  display: inline !important
}

.accordion-personalizado .accordion-button:not(.collapsed) {
  color: #b20838 !important;
  background-color: transparent !important;
  box-shadow: none !important;
  border-color: #b20838
}

.accordion-personalizado .accordion-button:focus,
.accordion-personalizado .accordion-button:hover {
  z-index: 3;
  color: #b20838 !important;
  border-color: #b20838 !important;
  outline: 0;
  box-shadow: none !important
}

.accordion-personalizado .accordion-button {
  margin: 10px 0;
  padding: 5px 20px;
  color: #fff !important;
  font-weight: 600 !important;
  border-radius: 10px !important;
  border: 1px solid #b20838;
  transition: .3s ease-out
}

.accordion-personalizado .accordion-body {
  padding: 5px 20px
}

.accordion-personalizado .accordion-button::after {
  flex-shrink: 0;
  width: 14px;
  height: 7px;
  margin-left: auto;
  content: "";
  background-repeat: no-repeat;
  background-size: 14px;
  transform: rotate(-180deg);
  transition: transform .2s ease-in-out
}

.accordion-personalizado .accordion-flush .accordion-item,
.accordion-personalizado .accordion-flush .accordion-item:last-child {
  border-bottom: 1px solid #707070 !important
}

.numero {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  background: #b20838;
  color: #fff;
  border-radius: 100%
}

.btnLink {
  line-height: 18px;
  transition: .3s;
  padding: 10px 20px;
  border-radius: 10px
}

.btnLinkComprar {
  font-size: 15px;
  line-height: 15px;
  transition: .3s;
  padding: 10px 5px;
  border-radius: 10px
}

.btn-black,
.btn-green,
.btn-vermelho {
  border-radius: 10px;
  transition: .3s ease-out;
  color: #fff
}

.btn-blue,
.btn-blue-green {
  display: block;
  padding: 10px 20px
}

.btn-vermelho {
  background-color: #a32035
}

.btn-vermelho:hover {
  background: #841a2b;
  color: #fff
}

.btn-green {
  background-color: #21d263
}

.btn-green:hover {
  background: #1cba57;
  color: #fff
}

.btn-black {
  background-color: #000
}

.btn-blue,
.btn-blue-green,
.btn-white {
  width: fit-content;
  transition: .4s
}

.btn-black:hover {
  color: #fff
}

.btn-yellow {
  background: #ff8200;
  color: #fff
}

.btn-yellow:hover {
  background: #e7a65c
}

.btn-brown {
  background: #6e4635;
  color: #f9bb75
}

.btn-brown:hover {
  background: #69402e;
  color: #f9bb75
}

.btn-light-brown {
  background: #f4d9c0;
  color: #6e4635
}

.btn-blue {
  background: #304271;
  color: #fff
}

.btn-blue:hover {
  background: #13223a;
  color: #fff
}

.btn-blue-green {
  background: 0 0;
  border: 1px solid #15a8ab;
  color: #15a8ab
}

.btn-blue-green:hover {
  background: #15a8ab;
  color: #fff
}

.btn-white {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 7px 20px;
  background: #fff;
  border: 1px solid #fff
}

.form-control-personalizado,
.form-select {
  display: block;
  line-height: 18px;
  background-color: transparent;
  background-clip: padding-box;
  transition: .5s;
  width: 100%
}

.btn-white:hover {
  color: #15a8ab
}

.form-control-personalizado {
  padding: 7px 10px;
  font-size: 16px;
  color: #6d6d6d;
  border: 1px solid #6d6d6d;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border-radius: 10px
}

.form-control-personalizado:focus,
.form-control-personalizado:focus-visible,
.form-control-personalizado:hover,
.form-select:focus,
.form-select:hover {
  border-color: #b20838;
  box-shadow: none
}

input:-webkit-autofill,
input:-webkit-autofill:focus,
input:-webkit-autofill:hover,
select:-webkit-autofill,
select:-webkit-autofill:focus,
select:-webkit-autofill:hover,
textarea:-webkit-autofill,
textarea:-webkit-autofill:focus,
textarea:-webkit-autofill:hover {
  border: 1px solid #6d6d6d;
  -webkit-text-fill-color: #6D6D6D;
  -webkit-box-shadow: 0 0 0 1000px #fff inset;
  transition: background-color 5000s ease-in-out
}

input.file {
  position: fixed;
  left: -100%
}

input[type=radio] {
  accent-color: #15A8AB
}

.placeholder-blue::placeholder {
  color: #304271
}

.form-label {
  font-size: 24px
}

.form-select {
  padding: 10px;
  font-size: 16px;
  border: 1px solid #304271;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border-radius: 13px
}

.form__group {
  position: relative;
  padding: 15px 0 0
}

.form__field {
  font-family: inherit;
  width: 100%;
  border: 0;
  border-bottom: 1px solid #6e4635;
  outline: 0;
  font-size: 18px;
  color: #6e4635;
  padding: 10px 0 0;
  background-image: url(../assets/icones/search-icon.svg);
  background-position: center left;
  background-size: auto;
  background-repeat: no-repeat;
  transition: border-color .2s
}

.offset-top,
.offset-top-interno {
  background: #fff;
  border-radius: 15px;
  box-shadow: 0 -4px 7px rgba(0, 0, 0, .16)
}

.form__field::placeholder {
  color: transparent
}

.form__field:placeholder-shown~.form__label {
  font-size: 18px;
  cursor: text;
  top: 20px
}

.form__field:focus~.form__label,
.form__label {
  display: block;
  transition: .2s;
  font-size: 12px;
  font-weight: 400;
  position: absolute
}

.form__label {
  top: 0;
  padding: 0
}

.form__field:focus {
  font-weight: 400;
  border-width: 1px
}

.datatable tbody,
.datatable thead {
  border-bottom: 1px solid rgba(78, 77, 77, .2)
}

.form__field:focus~.form__label {
  top: 0
}

.form__field:invalid,
.form__field:required {
  box-shadow: none
}

.offset-top {
  margin-top: -25px
}

.offset-top-interno {
  margin-top: -75px
}

.z-index-acima {
  position: relative;
  z-index: 100
}

header {
  width: 100%;
  background: #000;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 500
}

.linha-abaixo-hover {
  position: relative;
  transition: .3s
}

.boxPecas,
.boxPecas h3 {
  transition: .3s ease-out
}

.linha-abaixo-hover::before {
  content: "";
  position: absolute;
  left: 0;
  top: 100%;
  width: 0%;
  height: 1.5px;
  border-radius: 5px;
  background: #15a8ab;
  background: -moz-linear-gradient(90deg, #15a8ab 50%, #304271 100%);
  background: -webkit-linear-gradient(90deg, #15a8ab 50%, #304271 100%);
  background: linear-gradient(90deg, #15a8ab 50%, #304271 100%);
  transition: .3s ease-out
}

.datatable,
.linha-abaixo-hover.active::before,
.linha-abaixo-hover:hover::before {
  width: 100%
}

.customModal {
  position: fixed;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, .2);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  z-index: 600
}

.customModal .modalBody {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 70vw;
  max-width: 1450px;
  max-height: 80vh;
  overflow-y: auto;
  padding: 20px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 3px 6px rgba(0, 0, 0, .2);
  transform: translateX(-50%) translateY(-50%);
  z-index: 605
}

.customModal .modalBody::-webkit-scrollbar {
  width: 0;
  height: 0
}

.customModal .modalBody::after {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 17px
}

.customModal.pink .modalBody::after {
  background: var(--main-pink)
}

.customModal.purple .modalBody::after {
  background: var(--main-purple)
}

.customModal.blue .modalBody::after {
  background: var(--dark-blue)
}

.overflow-content-modal {
  max-height: 60vh;
  overflow-y: auto
}

.overflow-content-modal::-webkit-scrollbar {
  width: 2px;
  background-color: rgba(124, 124, 124, .3)
}

.datatable thead {
  background: #f7f8f9
}

.datatable thead tr th {
  color: #4e4d4d;
  font-weight: 600;
  padding: 10px 15px
}

.datatable tbody tr td {
  color: #4e4d4d;
  font-weight: 400;
  padding: 10px 15px
}

.datatable tr:nth-child(2n) {
  background-color: #f9f9f9
}

.bannerHome {
  width: 100%;
  height: 50vh;
  min-height: 850px;
  max-height: 850px;
  background: #eee;
  position: relative;
  overflow: hidden
}

.bannerHomeImg {
  object-position: 20%;
  width: 100%;
  height: 100%
}

.boxPecas {
  height: 250px;
  background: center/100% #000;
  display: flex;
  align-items: end;
  justify-content: center;
  padding: 20px 10px;
  cursor: pointer
}

.bg-cruzetas,
.imgAtendimento {
  background-size: cover;
  background-position: center
}

.bg-coroa-pinhao,
.bg-cruzetas,
.bg-eixo-cardan,
.bg-oleos {
  padding-top: 60px;
  padding-bottom: 60px
}

.boxPecas#rolamentos {
  background-image: url(../assets/banner/rolamentos-bg.jpg)
}

.boxPecas#cruzetas {
  background-image: url(../assets/banner/cruzetas-bg.jpg)
}

.boxPecas#coroa {
  background-image: url(../assets/banner/coroa-bg.jpg)
}

.boxPecas#oleos {
  background-image: url(../assets/banner/oleos-bg-v2.jpg)
}

.boxPecas#eixos {
  background-image: url(../assets/banner/eixos-bg.jpg)
}

.boxPecas h3 {
  transform: translateY(0)
}

.boxPecas:hover {
  background-size: 110%
}

.boxPecas:hover h3 {
  transform: translateY(-10px)
}

.linha-vermelha {
  position: relative;
  margin-bottom: 50px
}

.linha-vermelha::before {
  position: absolute;
  top: 60%;
  left: 50%;
  content: "";
  width: 90%;
  height: 110%;
  border: 3px solid #b20838;
  border-radius: 10px;
  transform: translateY(-50%) translateX(-50%)
}

.imgAtendimento {
  width: 100%;
  height: 320px;
  background-image: url(../assets/banner-webp/bg-atendimento-diferenciado.webp);
  position: relative
}

.imgAtendimento::after {
  content: "Conte com atendimento diferenciado";
  position: absolute;
  top: 25px;
  right: 0;
  width: fit-content;
  padding: 15px;
  background: #b20838;
  border-radius: 0 10px 10px 0;
  color: #fff;
  font-family: "Innova", sans-serif;
  transform: translateX(80%)
}

.bg-cruzetas {
  background-image: url(../assets/banner/img-cruzetas.jpg)
}

.red-dot {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 10px;
  height: 10px;
  background: #b20838;
  color: #fff;
  border-radius: 100%
}

.bg-coroa-pinhao,
.bg-eixo-cardan,
.bg-frota-parceira,
.bg-oleos {
  background-size: cover;
  background-position: center
}

.bg-coroa-pinhao {
  background-image: url(../assets/banner/img-coroa-pinhao.jpg)
}

.bg-oleos {
  background-image: url(../assets/banner/img-oleos.jpg)
}

.bg-eixo-cardan {
  background-image: url(../assets/banner/img-eixo-cardan.jpg)
}

.bg-frota-parceira {
  padding: 40px 80px;
  border-radius: 17px;
  background-image: url(../assets/banner-webp/img-frota-parceira.webp)
}

.gradientBlack {
  background: #000;
  background: -moz-linear-gradient(180deg, #000 0, #343434 100%);
  background: -webkit-linear-gradient(180deg, #000 0, #343434 100%);
  background: linear-gradient(180deg, #000 0, #343434 100%)
}

@media screen and (max-width:1399px) {
  .alt-title {
    font-size: 51px;
    line-height: 48px
  }

  .alt-plus {
    font-size: 32px;
    line-height: 32px
  }

  .alt-medium {
    font-size: 17px;
    line-height: 24px
  }

  .alt-small {
    font-size: 12px;
    line-height: 18px
  }

  .alt-text,
  .menuOpcoes li a {
    font-size: 16px;
    line-height: 21px
  }

  .alt-down {
    font-size: 14px;
    line-height: 18px
  }

  .logoMenu {
    width: 150px;
    height: 76px
  }

  .btnTelefone,
  .linkMenu {
    font-size: 16px
  }

  .bannerHome {
    min-height: 750px;
    max-height: 750px
  }
}

@media screen and (max-width:1199px) {
  .alt-plus {
    font-size: 26px;
    line-height: 28px
  }

  .alt-medium {
    font-size: 15px;
    line-height: 21px
  }

  .alt-text {
    font-size: 14px;
    line-height: 18px
  }

  .bannerHomeImg {
    object-position: 40%
  }

  .boxPecas {
    height: 220px;
    background-size: cover
  }
}

@media screen and (min-width:991px) {
  .w-lg-fit-content {
    width: fit-content
  }
}

@media screen and (max-width:991px) {
  .alt-title {
    font-size: 48px
  }

  .alt-plus {
    font-size: 24px
  }

  .alt-text {
    line-height: 21px
  }

  .alt-small {
    font-size: 11px;
    line-height: 16px
  }

  .bannerHomeImg {
    object-position: 35%
  }

  .boxPecas {
    height: 180px;
    background-size: cover
  }

  .bg-coroa-pinhao,
  .bg-cruzetas,
  .bg-eixo-cardan,
  .bg-oleos,
  .bg-rolamentos {
    padding-top: 40px;
    padding-bottom: 40px
  }

  .bg-frota-parceira {
    padding: 40px 45px
  }
}

@media screen and (min-width:768px) {
  .position-md-relative {
    position: relative
  }

  .position-md-absolute {
    position: absolute
  }

  .h-md-100 {
    height: 100%
  }

  .translate-md-middle {
    transform: translate(-50%, -50%) !important
  }
}

@media screen and (max-width:767px) {
  .alt-title {
    font-size: 28px;
    line-height: 28px
  }

  .alt-biggest {
    font-size: 24px;
    line-height: 34px
  }

  .alt-plus {
    font-size: 24px;
    line-height: 28px
  }

  .alt-medium {
    font-size: 21px;
    line-height: 21px
  }

  .barra-divisoria::before {
    display: none
  }

  .slick-dots {
    left: 50%;
    transform: translateX(-50%);
    height: fit-content;
    width: max-content !important
  }

  .slick-slide {
    margin: 0 10px
  }

  .bannerHome {
    min-height: max-content;
    max-height: max-content;
    height: max-content;
    background: #000
  }

  .bg-topo-mobile,
  .bg-topo-mobile2 {
    background-size: cover;
    background-position: center
  }

  .bg-topo-mobile {
    background-image: url(../assets/banner-webp/banner-topo-mobile.webp);
    margin-bottom: 15px
  }

  .bg-topo-mobile2 {
    background-image: url(../assets/banner-webp/banner-topo-mobile2.webp);
    padding: 40px 0
  }

  .carrosselMobile {
    height: 180px
  }

  .linha-vermelha::before {
    width: 95%
  }

  .imgAtendimento {
    height: 200px
  }

  .imgAtendimento::after {
    top: 100%;
    left: 0;
    transform: translate(0, -50%);
    font-size: 14px
  }
}

@media screen and (max-width:576px) {

  .small,
  small {
    font-size: 12px !important;
    font-weight: 400;
    line-height: 16px
  }

  .alt-down {
    font-size: 12px;
    line-height: 18px
  }

  footer .alt-down {
    line-height: 24px
  }

  .alt-biggest,
  .alt-plus {
    font-size: 21px;
    line-height: 24px
  }

  .alt-medium,
  .linha-vermelha .alt-plus {
    font-size: 15px
  }

  .alt-text {
    font-size: 14px;
    line-height: 21px
  }

  .alt-small {
    font-size: 10px;
    line-height: 16px
  }

  .form__field {
    font-size: 19px
  }

  .form__field:placeholder-shown~.form__label {
    font-size: 19px
  }

  .bg-frota-parceira {
    padding: 20px 25px
  }

  .customModal .modalBody {
    width: 90vw
  }
}

@media screen and (max-width:330px) {
  p {
    font-size: 16px
  }

  small {
    font-size: 12px
  }

  h2 {
    font-size: 18px;
    line-height: 20px
  }

  .alt-down,
  .alt-medium {
    font-size: 16px;
    line-height: 21px
  }
}