body,
h1 {
    font-family: 'Exo', sans-serif !important;
}
.whatsapp{
    display: none!important;
}

body {
    color: #616161;
}

img {
    display: initial;
}

.servico object {
    max-width: 100%;
}

#sp-top-bar{
	/*display: none !important;*/
}

#sp-top-bar {
    background: #e2e2e2;
    padding: 0px;
}

#sp-top-bar a:hover,
#sp-top-bar a:active,
#sp-top-bar a:focus {
    color: #76b82a;
}

#sp-top-bar .redes {
    font-size: 23px;
    color: #adadad;
}

#sp-top-bar .topbar,
#sp-top-bar .topbar a {
    color: #3B5266;
    line-height: 33px;
}

#sp-top-bar > .container,
#sp-header > .container {
    max-width: 100%;
}

.peca-agora {
    /*display: none !important;*/
    font-weight: bold !important;
    font-size: 16px !important;
    color: #fff !important;
}

.peca-agora:before {
    content: '';
    position: absolute;
    width: 100%;
    height: 30px;
    left: 0px;
    top: 34px;
    border-radius: 15px;
    background-color: #76b728;
    z-index: -1;
}

.logo-image {
    height: auto !important;
}

.sp-megamenu-parent > li > a,
.sp-megamenu-parent > li > span {
    color: #005460;
    font-size: 18px;
    text-transform: capitalize;
    font-weight: 300;
}

.sp-megamenu-parent > li.active > a,
.sp-megamenu-parent > li.active:hover > a,
.sp-megamenu-parent > li:hover > a{
    color: #005460;
    font-size: 18px;
    text-transform: capitalize;
    font-weight: 300;
}

.sp-megamenu-parent .sp-dropdown li.sp-menu-item > a:hover {
    color: #ffffff;
    background-color: #255962;
}

.sp-megamenu-parent .sp-dropdown li.sp-menu-item.active > a {
    color: #fff;
    background-color: #255962;
}

.sp-has-child>a{
    pointer-events: none;
}

.sp-megamenu-parent .sp-dropdown .sp-dropdown-inner {
    border-radius: 20px;
    width: 174px;
    text-align: center;
    overflow: hidden;
}

.sp-megamenu-parent .sp-dropdown .sp-dropdown-inner {
    box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.5);
    padding: 0px 0px;
}

.sp-megamenu-parent .sp-dropdown li.sp-menu-item > a,
.sp-megamenu-parent .sp-dropdown li.sp-menu-item span:not(.sp-menu-badge) {
    padding: 20px 0;
}

#sp-main-body {
   padding: 0;
   font-size: 16px !important;
}

#sp-header .container .container-inner .row,
#sp-footer .container .container-inner .row {
    margin-right: 0;
    margin-left: 0;
}

#sp-footer, #sp-bottom {
    background: none;
    color: #616161;
}

#sp-footer1{
    padding: 0px;
}

#sp-footer>.container {
    max-width: 100% !important;
    padding: 0px;
    margin: 0px;
}

#sp-footer .container-inner {
    padding: 0;
    border-top: none;
}

#sp-footer a:hover,
#sp-bottom a:hover,
#sp-footer a:active,
#sp-bottom a:active,
#sp-footer a:focus,
#sp-bottom a:focus {
    color: #76b82a;
}

.no-padding{
	padding: 0 !important;
}

.com-sipag #sp-main-body>.container {
    padding: 0;
    margin: 0;
    width: 100%;
    max-width: 100%;
}

.text-branco{
    color: #fff;
}
.text-preta{
    color: #000;
}
.text-cinza{
    color: #adadad;
}
.text-titulos{
    color: #4f4f4f;
}
.text-texto{
    color: #616161;
}
.text-verde-claro{
    color: #afca0b;
}
.text-verde-medio{
    color: #76b82a;
}
.text-turquesa{
    color: #38b6ab;
}
.text-azulado{
    color: #007a8c;
}
.text-petroleo{
    color: #005460;
}
.text-roxo{
    color: #49479d;
}

.bg-branco{
    background-color: #ffffff;
}
.bg-cinza{
    background-color: #adadad;
}
.bg-cinza-claro{
    background-color: #f6f6f6;
}
.bg-titulos{
    background-color: #4f4f4f;
}
.bg-texto{
    background-color: #616161;
}
.bg-verde-claro{
    background-color: #afca0b;
}
.bg-verde-medio{
    background-color: #76b82a;
}
.bg-turquesa{
    background-color: #38b6ab;
}
.bg-azulado{
    background-color: #007a8c;
}
.bg-petroleo{
    background-color: #005460;
}
.bg-roxo{
    background-color: #49479d;
}

.btn{
    border-radius: 20px!important;
    text-transform: uppercase;
    padding: 8px 17px;
    font-weight: 700!important;
    letter-spacing: .5px;
    font-size: 16px;
    line-height: 21px;
}

.btn-border-cinza{
    background-color: initial !important;
    border-color: #616161;
    color: #616161;
}

a {
    color: #293340;
}

a:hover,
a:focus,
a:active,
a:hover.btn,
a:focus.btn,
a:active.btn {
    color: inherit;
    text-decoration: underline;
}

.btn-cinza{
    background-color: #adadad;
}
.btn-cinza-claro{
    background-color: #f6f6f6;
}
.btn-verde-claro{
    background-color: #afca0b;
    color: #fff !important;
}
.btn-verde-medio{
    background-color: #76b82a;
    color: #fff !important;
}
.btn-turquesa{
    background-color: #38b6ab;
    color: #fff !important;
}
.btn-azulado{
    background-color: #007a8c;
    color: #fff !important;
}
.btn-petroleo{
    background-color: #005460;
    color: #fff !important;
}
.btn-roxo{
    background-color: #49479d;
    color: #fff !important;
}

h1,
h2,
h3,
h4,
h5{
    font-weight: bold;
    color: #4f4f4f;
}

#banner{
    background-color: #fff;
    position: relative;
    color: #fff !important;
}

.carousel-indicators li {
    width: 14px;
    height: 14px;
    border-radius: 50%;
}

.carousel-indicators {
    right: unset;
    bottom: 20px;
}

#banner img{
    width: 100%;
}

#banner .carousel-caption{
    display: flex;
    justify-content: center;
    flex-direction: column;
    top: 0;
    bottom: 0;
    width: 30%;
}

#banner h1,
#banner h2,
#banner h3,
#banner h4,
#banner h5{
    color: #fff;
}

#banner h1{
    font-size: 3rem;
}

#peca-sua-maquininha {
    padding: 60px 0px;
}

#peca-sua-maquininha #beneficios {
    margin-top: 60px;
}

#peca-sua-maquininha #beneficios div.imagem {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 60px;
    margin: 0 0 1em;
}

#peca-sua-maquininha p {
    margin-top: 20px;
}

#peca-sua-maquininha a {
    margin-top: 40px;
}

#nossas-maquinas {
    padding: 60px 25px;
}

#maquinas a{
    color: #616161;
}

#maquinas .maquina{
    background-color: #e5e5e5;
    border-radius: 17px;
    min-height: 310px;
    padding: 20px;
    font-weight: 500;
    margin-top: 20px;
}

#maquinas .maquina:hover {
    background-color: #49479D;
    color:  #fff !important;
    transition: 0.5s;
}

#maquinas .maquina:hover a,
#maquinas .maquina:hover h5,
#maquinas .maquina:hover h1 {
    color:  #fff !important;
    transition: 0.5s;
}

#maquinas .maquina:hover img {
    transform: scale(1.2);
    transition: 0.5s;
}

.maquina .preco {
    margin: 20px 0px;
    /*min-height: 160px;*/
}

.maquina .preco h1,
#taxas .preco h1 {
    font-size: 3.0rem;
    font-weight: unset;
}

.maquina .nome {
    min-height: 80px;
}

#maquinas ul {
    list-style: none;
    min-height: 410px;
    padding: 0px 0px 0px 25px;
}

#taxas ul {
    list-style: none;
    padding: 0px 0px 0px 25px;
}

#maquinas li,
#taxas li {
    margin-bottom: 10px;
}

#maquinas li:before,
#taxas li:before {
    font-family: 'FontAwesome';
    font-size: 20px;
    content: '\f058';
    position: absolute;
    left: 0px;
    color: #83ba56;
    line-height: 24px;
}

#taxas .taxa{
    /*min-height: 538px;*/
}

#banner-peca-sua-sipag{
    margin: 60px;
}

#banner-peca-sua-sipag .container{
    display: grid;
    height: 433px;
    background-image: url(../../../images/sipag2021/peca_sua_sipag.jpg);
    background-size: 100%;
    background-repeat: no-repeat;
}

#banner-peca-sua-sipag2{
    margin: 60px;
}

#banner-peca-sua-sipag2 .container{
    display: grid;
    height: 433px;
    background-image: url(../../../images/sipag2021/peca_sua_sipag2.jpg);
    background-size: 100%;
    background-repeat: no-repeat;
}

#mapa-sipag {
    position: relative;
    padding: 60px 0px;
}

#mapa-sipag:before {
    content: '';
    position: absolute;
    width: 40px;
    height: 100%;
    background-color: #025360;
    top: 0;
}

#mapa-sipag #info-porcentagem{
    position: absolute;
    bottom: 0;
    right: 0;
    color: #025360;
    text-align: right;
}

#taxas-credenciamento {
    padding: 60px 0px;
}

#quem-tem-sipag-recomenda {
    min-height: 490px;
    padding: 60px 0px;
}

#quem-tem-sipag-recomenda .info{
    position: absolute;
    top: 290px;
    width: 100%;
}

#quem-tem-sipag-recomenda .nav {
    margin-top: 44px;
}

#quem-tem-sipag-recomenda .nav-pills .nav-link img{
    border-radius: 50%;
    width: 40px;
    opacity: .5;
}

#quem-tem-sipag-recomenda .nav-pills .nav-link.active img{
    border-radius: 50%;
    transform: scale(2);
    transition: 0.5s;
    opacity: 1;
}

#quem-tem-sipag-recomenda .nav-pills .nav-link.active,
#quem-tem-sipag-recomenda .nav-pills .show>.nav-link {
    color: transparent;
    background-color: transparent;
}

#quem-tem-sipag-recomenda .cargo{
    font-weight: normal;
}

#quem-tem-sipag-recomenda #pills-tabContent .tab-pane > h3{
    height: 150px;
    display: flex;
    align-items: center;
}

#taxas-credenciamento input {
    font-size: 22px;
    border-radius: 20px;
    padding: .375rem 2rem;
}

#taxas-credenciamento .input-group-append {
    position: absolute;
    right: 0;
    height: 100%;
    z-index: 9999999;\
}

#taxas-credenciamento .input-group-append button {
    background-color: transparent;
}

#sobre{
    background-image: url(../../../images/sipag2021/bg_setas_verdes.png);
    background-repeat: no-repeat;
    background-position: right top;
    /*background-size: 8rem;*/

    line-height: 30px;
}

#conheca {
    background-color: rgb(118 184 42 / 20%);
    background-image: url(../../../images/sipag2021/bg_setas_brancas.png);
    background-repeat: no-repeat;
    background-position: left center;
}

#valores {
    padding: 60px 20px;
}

#curiosidades {
    padding: 30px 0px 60px 0px;
}

#duvidas-frequentes a[data-toggle="collapse"] {
    display: block;
    width: 100%;
    font-size: 20px;
    font-weight: 500;
}

#duvidas-frequentes .conteudo {
    margin-top: 5px;
    padding-top: 5px;
    border-top: 1px solid #dedede;
}

#duvidas #maquinas {
    font-size: 12px;
}

#duvidas #maquinas h1 {
    font-size: 2.5rem;
}

#duvidas #maquinas h5 {
    font-size: 1.0rem;
}

#duvidas #maquinas .maquina {
    padding: 10px;
}

#duvidas .duvida .conteudo a.turquesa,
#duvidas .duvida .conteudo a.turquesa:hover{
    color: #38b6ab;
}

a[aria-expanded="false"]::after {
  content: "\f107";
  color: #83BA56;
  top: -2px;
  right: 0px;
  position: absolute;
  font-family: "FontAwesome";
  font-size:  28px;
}

a[aria-expanded="true"]::after {
  content: "\f106";
  color: #83BA56;
  top: -2px;
  right: 0px;
  position: absolute;
  font-family: "FontAwesome";
  font-size:  28px;
}

#duvidas .categorias a[aria-expanded="false"]::after,
#duvidas .categorias a[aria-expanded="true"]::after {
     content: "";
}

#servicos .servico {
    padding-bottom:  40px;
    border-bottom:  1px solid #000;
}

#duvidas .categorias .icon {
    height: 55px;
}

#duvidas .categorias p {
    height: 48px;
    font-size: 14px;
    font-weight: 500;
}

#duvidas .titulo span{
    margin-left: 60px;
}

#duvidas .titulo img{
    height: 30px;
    position: absolute;
    top: 13px;
    left: 15px;
}

#duvidas .border-right,
#duvidas .border-left {
    border-color: #255962 !important;
}

#duvidas .duvida a,
#duvidas .duvida a:hover {
    color:  #76b82a;
}

#contato #content {
    margin-top: -80px;
    border-radius: 1rem;
}

#maquinasCarousel .table td,
#maquinasCarousel .table th {
    border-top: 0px;
    padding: 0.55rem;
}

#maquinasCarousel tr td:first-child {
    width: 13%;
}

#maquinasCarousel .carousel-item {
    min-height: 833px;
}

#maquinasCarousel h4{
    font-weight: 500;
}

#maquinasCarousel h5{
    margin-top: 28px;
    color: #005460;
}

#SIPAGUINHA3G ul,
#servicos ul,
#duvidas ul {
    list-style: none;
    display: flex;
    justify-content: space-between;
    padding: 0;
}

#sipag .fa-chevron-left,
#sipag .fa-chevron-right,
#maquinas-detalhadas .fa-chevron-left,
#maquinas-detalhadas .fa-chevron-right {
    width: 40px;
    height: 40px;
    background: #83ba56 no-repeat center center;
    background-size: 35px;
    border-radius: 50%;
    padding: 59%;
    color: #255962;
}

#sipag .carousel-control-next {
    right: 21px;
}

#sipag .tipo:first-child {
    margin-top: -13px;
}

#sipag .tipo {
    height: 104px;
}

#sipag .tipo:last-child {
    margin-top: 3px;
}

#sipag .tipo h4::before {
    content: '-';
    position: absolute;
    left: -15px;
    color: #025460;
}

.midia{
    color: #979797;
    font-size: 1.8rem;
}

.midia a{
    text-shadow: 0px 2px 3px #afafaf;;
}

#portal_logista #conteudo:before {
    content: '';
    position: absolute;
    left: 30px;
    height: 100%;
    width: 60px;
    background-image: url(../../../images/sipag2021/textura.png);
    background-repeat: no-repeat;
}

#simulador hr {
    border-bottom: 2px solid #49479d;
    padding: 0;
    margin: 0;
}

#simulador .perguntas {
    padding: 50px 0px;
    border-bottom: 1px solid #ccc;
}

#simulador .form-check-label {
    margin-left: 20px;
}

#simulador .card-body {
    padding-left: 0px;
    padding-right: 0px;
}

/* Customize the label (the container) */
#simulador .form-check {
  display: block;
  position: relative;
  padding-left: 50px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default checkbox */
#simulador .form-check input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
#simulador .checkmark {
    position: absolute;
    top: 4px;
    left: 0px;
    height: 25px;
    width: 60px;
    background-color: transparent;
    border: 1px solid #83ba56;
    border-radius: 8px;
}

/* On mouse-over, add a grey background color */
#simulador .form-check:hover input ~ .checkmark {
  background-color: #83ba56;
}

/* When the checkbox is checked, add a blue background */
#simulador .form-check input:checked ~ .checkmark {
  background-color: #83ba56;
}

/* Create the checkmark/indicator (hidden when not checked) */
#simulador .checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

#simulador-resultado #destaque:before{
    content: '';
    position: absolute;
    width: 100%;
    left: 0;
    top: 11px;
    border: 1px solid #4845a1;
    z-index: -1;
}

#simulador-resultado #destaque div{
    background-color: #fff;
    font-weight: bold;
    font-size: 22px;
    line-height: 24px;
}

#rodape {
    padding: 30px 0px;
}

#rodape #sitemap a,
#rodape .rodape-title{
    display: block !important;
    font-size: 14px;
    line-height: 30px;
}

#rodape .rodape-title{
    font-weight: bold;
}

#rodape #soluctions-title{
    font-weight: bold;
}

#rodape #soluctions-title:before{
    content: '';
    position: absolute;
    left: 0px;
    top: 9px;
    border: 1px solid #616161;
    width: 35%;
    height: 1px;
}

#rodape #soluctions-title:after{
    content: '';
    position: absolute;
    right: 0px;
    top: 9px;
    border: 1px solid #616161;
    width: 35%;
    height: 1px;
}

.sp-scroll-up {
    width: 80px;
    height: 80px;
    line-height: 82px;
    font-size: 24px;
    background: #83ba56;
    border-radius: 50%;
}

.fa-chevron-up:before {
    content: "\f062" !important;
}

#rodape-contato{
    padding: 120px 0px;
}

#rodape-contato h4{
    font-weight: bold;
}

@media (min-width: 280px) and (max-width: 480px) {
    #rodape {
        text-align: center;
    }

    #rodape img {
        display:  initial;
    }

    #beneficios {
        margin: 10px;
    }

    #quem-tem-sipag-recomenda {
         margin: 10px;
    }

    #banner-peca-sua-sipag {
        margin: 10px;
        background-color: #0eb7ac;
    }

    #banner-peca-sua-sipag2 {
        margin: 10px;
        background-color: #4845a1;
    }

    #banner .carousel-inner {
        /*height: 90vh;*/
    }

    #banner .carousel-inner img {
        width: 100%;
    }

    .layout-servicos #banner .carousel-inner,
    .layout-beneficios #banner .carousel-inner,
    .layout-sipag #banner .carousel-inner,
    .layout-sipaguinha #banner .carousel-inner,
    .layout-taxas #banner .carousel-inner,
    .layout-duvidas #banner .carousel-inner {
        height: 90vh;
    }

    .layout-servicos #banner .carousel-inner img,
    .layout-beneficios #banner .carousel-inner img,
    .layout-sipag #banner .carousel-inner img,
    .layout-sipaguinha #banner .carousel-inner img,
    .layout-taxas #banner .carousel-inner img,
    .layout-duvidas #banner .carousel-inner img {
        width: auto;
        height: 90vh;
    }

    .layout-servicos #banner .carousel-caption,
    .layout-beneficios #banner .carousel-caption,
    .layout-sipag #banner .carousel-caption,
    .layout-sipaguinha #banner .carousel-caption,
    .layout-taxas #banner .carousel-caption,
    .layout-duvidas #banner .carousel-caption {
        justify-content: center;
    }

    .layout-servicos #banner .carousel-caption:before,
    .layout-beneficios #banner .carousel-caption:before,
    .layout-sipag #banner .carousel-caption:before,
    .layout-sipaguinha #banner .carousel-caption:before,
    .layout-taxas #banner .carousel-caption:before,
    .layout-duvidas #banner .carousel-caption:before {
        content: '';
        background-color: #00000090;
        width: 200%;
        height: 250px;
        position: absolute;
        left: -15px;
        z-index: 0;
        border-radius: 10px;
    }

    #banner h1,
    #banner p {
        z-index: 1;
    }

    .layout-contato #banner .carousel-inner,
    .layout-contato #banner .carousel-inner img {
        height: auto;
    }

    #sobre,
    #conheca {
        background-image: none;
    }

    #banner img {
        max-width: fit-content;
        width: auto;
    }

    #banner h1 {
        font-size: 2rem;
    }

    #banner .carousel-caption {
        /*top: 0;*/
        width: 70%;
        display: flex;
        flex-direction: column;
        justify-content: end;
        bottom: 20px;
    }

    #banner .carousel-caption .btn {
        position: absolute;
        bottom: 20px;
    }

    .carousel-indicators {
        right: 0;
        bottom: 0px;
    }

    #taxas-credenciamento input {
        font-size: 16px;
        border-radius: 20px;
    }

    .maquina {
        margin: 10px;
    }

    #nossas-maquinas {
        padding: 60px 0px;
    }

    #mapa-sipag {
        padding: 60px 10px;
    }

    #mapa-sipag h1 {
        font-size: 30px;
    }

    #mapa-sipag .mt-5 {
        margin-top: 1rem !important;
    }

    #servicos {
        padding: 25px;
    }

    #quem-tem-sipag-recomenda .info {
        position: relative;
        top: 30px;
    }

    #quem-tem-sipag-recomenda #pills-tabContent .tab-pane > h3{
        height: auto;
        display: initial;
        align-items: center;
    }

    #contato #content {
        margin-top: -24px;
    }

    #sipag .tipo:first-child {
        margin-top: initial;
    }

    #sipag .tipo {
        height: auto;
        padding: 10px;
    }

    #sipag .tipo:last-child {
        margin-top: initial;
    }

    #duvidas {
        padding: 10px;
    }

    #duvidas .categorias div.border-right {
        border-right: 0 !important;
    }

    #duvidas #guias_operacionais div.border-left{
        border-left: 0 !important;
        margin-top:  10px;
    }

    #mapa-sipag:before {
        display: none;
    }

    #mapa-sipag #info-porcentagem {
        bottom: -62px;
    }

    #portal_logista #banner img {
        width: 100%;
    }

    #portal_logista #embreve {
        text-align: center;
    }

    #portal_logista #conteudo:before {
        display: none;
    }

    #maquinas-detalhadas .carousel-inner{
        overflow: initial;
    }

    #simulador #banner img,
    #simulador-resultado #banner img {
        width: 100%;
    }

    #banner-peca-sua-sipag .container {
        height: 410px;
    }

    #banner-peca-sua-sipag .align-items-center,
    #banner-peca-sua-sipag2 .align-items-center {
        align-items: flex-end!important;
    }

    #quem-tem-sipag-recomenda h1 {
        font-size: 2.2rem;
    }

    #depoimentos h3 {
        font-size: 1.25rem;
    }

    #valores .valores-texto {
        margin-left: 16px;
    }

    #curiosidades .curiosidades-texto {
        text-align: center;
        margin-top: 10px;
    }

    #servicos .servico-titulo {
        margin-top: 15px;
    }
}

@media (min-width: 480px) and (max-width: 1025px) {
    #banner h1 {
        font-size: 2rem;
    }

    #banner .carousel-caption {
        width: 80%;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .carousel-indicators {
        display: none;
    }

    .sp-megamenu-parent{
        margin: 0 -40px;
    }

    #mapa-sipag #info-porcentagem {
        bottom: -55px;
    }
}