/*! HTML5 Boilerplate v8.0.0 | MIT License | https://html5boilerplate.com/ */

/* main.css 3.0.0 | MIT License | https://github.com/h5bp/main.css#readme */
/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */
html {
  color: #222;
  font-size: 1em;
  line-height: 1.4;
  font-family: "Inter", serif;
}

.toast { border-radius: 2px; top: 35px; width: auto; margin-top: 10px; position: relative; max-width: 100%; height: auto; min-height: 48px; line-height: 1.5em; word-break: break-all; background-color: #0057be !important; padding: 10px 25px; font-size: 1.1rem; font-weight: 300; color: #fff; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; cursor: default; }

/*
 * Remove text-shadow in selection highlight:
 * https://twitter.com/miketaylr/status/12228805301
 *
 * Customize the background color to match your design.
 */

::-moz-selection {
  background: #b3d4fc;
  text-shadow: none;
}

::selection {
  background: #b3d4fc;
  text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */

hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 1em 0;
  padding: 0;
}

/*
 * Remove the gap between audio, canvas, iframes,
 * images, videos and the bottom of their containers:
 * https://github.com/h5bp/html5-boilerplate/issues/440
 */

audio,
canvas,
iframe,
img,
svg,
video {
  vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}

body{width: 100%; height: 100%;}
html{width: 100%; height: 100%;}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
  resize: vertical;
}


::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
color: #9AB2C2; opacity: 1; /* Firefox */ }
:-ms-input-placeholder { /* Internet Explorer 10-11 */
color: #9AB2C2; }
:-o-input-placeholder { /* Internet Explorer 10-11 */
color: #9AB2C2; }
:-moz-input-placeholder { /* Internet Explorer 10-11 */
color: #9AB2C2; }
::-ms-input-placeholder { /* Internet Explorer 10-11 */
color: #9AB2C2; }


.mobile{display: none;}
.tablet{display: none;}
.desktop{display: block;}
.opacidade{opacity: 0;}
#ancora-ofertas{width: 1px; height: 1px; position: absolute; left: 0px; top: -20px;}
#barra-veiculos-slider{display: none;}



/* ==========================================================================
   Ínicio home
   ========================================================================== */
#ornamento-home{width:600px; height: 563px; position: absolute; left: 0px; top: 0px; background: url('../img/bolinhas.png'); background-size: 600px;}
#view-home{width: 1200px; height: 100%; position: relative; margin: auto; overflow: hidden; z-index: 90;}
#conteudo-view-home{width: 60%; height: 100%; position: relative; float: left;} 
#ornamento-fotos-home{width: 40%; height: 100%; position: relative; float: left;}
#faixa-conteudo-home { width: 100%; height: 600px; position: absolute; top: 70px; margin-top: unset; }

#faixa-logo-home{width: 100%; height: auto; position: relative; float: left;}
#logo-int-home{width: 320px; height: 37px; position: relative; float: left; background: url('../img/logo-jorlan-rodape.png'); background-size: 320px;}

#faixa-conteudo-home h1{width: 100%; height: auto; position: relative; float: left; font-size: 42px; color:#49667F; font-weight: 700;}
#faixa-conteudo-home p{width: 100%; height: auto; position: relative; float: left; margin-top: -10px; font-size: 20px; color: #3D3D3D; padding-right: 200px;}

#faixa-lojas{width: 100%; height: auto; position: relative; float: left; margin-top: 20px;}
.item-loja{width: 33.3%; height: auto; position: relative; float: left; padding: 0px 20px;}
.legenda-loja{width: 100%; height: auto; position: relative; float: left; font-size: 18px; color: #361D1E; text-align: center;} 
.foto-loja { width: 100%; height: 160px; position: relative; float: left; margin-top: 10px; border-radius: 20px; overflow: hidden; }
.foto-int-loja{width: 350px; height: 300px; position: absolute; left: 50%; top: 50%; margin-top: -150px; margin-left: -175px;}
.faixa-cta-loja{width: 100%; height: auto; position: relative; float: left; margin-top: 15px;}
.cta-int{width: 150px; height: auto; position: relative; margin: auto; padding: 7px 0px; font-size: 16px; color: #8CA0A7; border-radius: 20px; cursor: pointer; border: 1px solid #8CA0A7; text-align: center;}
.cta-int:hover{background-color: #0B70CB; color: #fff; border:1px solid #8CA0A7;}
.item-loja:hover .cta-int{background-color: #0B70CB; color: #fff; border:1px solid #8CA0A7;}


#faixa-blocos-fotos-home{width: 100%; height: 100%; position: relative; float: left; overflow: hidden;}
#container-blocos-out{width:400px; height: 2500px; position: absolute; left: 50%; margin-left: -200px;}

.item-bloco-foto-ornamento{width: 380px; height: 380px; position: relative; float: left; margin-left: 10px; margin-bottom: 10px; background-color: #0B70CB; border-radius: 20px; overflow: hidden;}
.item-foto-ornamento-int-home{width: 400px; height: 400px; position: absolute; left: 50%; top: 50%; margin-left: -200px; margin-top: -200px;}

/*Ofetas página seleção LP*/
.item-lp-selecao{width: 100%; height: auto; position:relative; float:left; background-color: #EDF3FB; border-radius: 15px; margin-bottom: 5px; padding: 30px 0px; cursor: pointer;} 
.item-lp-selecao:hover{background-color:#2683ff;}

.img-carro-lp { width: 30%; height: auto; position: relative; float: left; padding: 0px 14px; }
.sobre-lp-lista { width: 50%; height: auto; position: relative; float: left; padding: 0px 20px; }
.nome-lp { width: 100%; height: auto; position: relative; float: left; margin-top: 20px; font-size: 24px; color: #000000; padding: 0px 20px; font-weight: 600; }
.ofertas-lp-lista { width: 100%; height: auto; position: relative; float: left; font-size: 17px; color: #000; padding: 0px 20px; }
.icone-lista-lp{width: 20%; height: 100%; position: absolute;  right: 10px; top: 0px;}
.icone-lp{width: 40px; height: 40px; position: absolute; left: 50%; margin-left: -20px; top: 50%; margin-top: -20px; background: url('../img/sete-p.png'); background-size: 40px;}

.item-lp-selecao:hover .nome-lp{color: #fff;}
.item-lp-selecao:hover .ofertas-lp-lista{color: #fff;}
.item-lp-selecao:hover .icone-lp{background: url('../img/seta-b.png'); background-size: 40px;}

.fix-view-home{overflow: unset !important; padding-bottom: 100px;}
.fix-blocos-home{position: fixed !important; right: 0px; }
.faixa-fix-lps{width: 100%; height: 100px; position: relative; float: left;}

/* ==========================================================================
   Topo LP
   ========================================================================== */
#barra-menu-topo{width: 100%; height: 150px; position: fixed; top: 0px; padding-top: 40px; z-index: 9999;}

#cta-ofertas-topo{width: auto; height: auto; position: absolute; left: 30px; top: 44px; padding: 15px 30px 15px 60px; border-radius: 150px; border: 0.3px solid #44618C; color: #fff; font-size: 20px;}
#icn-ofertas-topo{width: 34px; height: 34px; position: absolute; left: 16px; top: 11px; background: url('../img/icn-ofertas.png'); background-size: 34px;}

#cta-wpp-topo{width: auto; height: auto; position: absolute; right: 30px; top: 44px; padding: 15px 30px 15px 60px; border-radius: 150px; border: 0.3px solid #64E877; color: #fff; font-size: 20px;}
#icn-wpp-topo{width: 34px; height: 34px; position: absolute; left: 16px; top: 11px; background: url('../img/wpp-icn.png'); background-size: 34px;}

#cta-telefone-topo { width: auto; height: auto; position: absolute; right: 230px; top: 44px; padding: 15px 30px 15px 60px; border-radius: 150px; border: 0.3px solid #44618C; color: #fff; font-size: 20px; }
#icn-telefone-topo{width: 34px; height: 34px; position: absolute; left: 16px; top: 11px; background: url('../img/icn-ofertas.png'); background-size: 34px;}

#menu-topo { width: 420px; height: 72px; position: relative; margin: auto; border-radius:150px; overflow: hidden; border: 0.3px solid #44618C;}
#logo-jorlan {
width: 192px;
height: 20px;
position: absolute;
left: 50%;
margin-left: -96px;
top: 24px;
background: url('../img/logo-jorlan.png');
background-size: 192px;
}

#tag-veiculos-menu-topo{width: 140px; height: 150px; position: absolute; right: 0px; background-color:#3F5C86; display: none !important;}
#tag-veiculos-menu-topo:hover {background-color:#0559D6;}
#txt-veiculos-menu-topo{width: 100%; height: auto; position: relative; float: left; margin-top:  22px; font-size: 20px; color: #fff; text-align: center;}

#icn-menu-topo{width:40px; height:40px; position: absolute; left: -18px; top:15px; background-color:#3F5C86; border-radius: 50%;}
#icn-int-m-topo { width: 28px; height: 28px; position: absolute; left: 50%; top: 50%; margin-top: -14px; margin-left: -14px; background: url('../img/icn-wheel.png') no-repeat center; background-size: 28px;            /* Suaviza a rotação com prefixos */ -webkit-transition: -webkit-transform 0.1s linear; -moz-transition: -moz-transform 0.1s linear; -ms-transition: -ms-transform 0.1s linear; -o-transition: -o-transform 0.1s linear; transition: transform 0.1s linear; }

#tag-veiculos-menu-topo:hover #icn-menu-topo{background-color:#0559D6;}
.blur-overlay { background: rgba(0, 39, 98, 0.6); /* Fundo azul com transparência */ backdrop-filter: blur(10px); /* Efeito de desfoque */ -webkit-backdrop-filter: blur(10px); /* Compatibilidade com Safari */ -moz-backdrop-filter: blur(10px); /* Suporte potencial futuro no Firefox */ -ms-backdrop-filter: blur(10px); /* Compatibilidade com Internet Explorer (não funcional atualmente) */ -o-backdrop-filter: blur(10px); /* Compatibilidade com Opera antigo */ backdrop-filter: blur(10px); }
.blur-overlay-wpp { background: rgba(51, 119, 63, 0.8); /* Fundo azul com transparência */ backdrop-filter: blur(10px); /* Efeito de desfoque */ -webkit-backdrop-filter: blur(10px); /* Compatibilidade com Safari */ -moz-backdrop-filter: blur(10px); /* Suporte potencial futuro no Firefox */ -ms-backdrop-filter: blur(10px); /* Compatibilidade com Internet Explorer (não funcional atualmente) */ -o-backdrop-filter: blur(10px); /* Compatibilidade com Opera antigo */ backdrop-filter: blur(10px); }

#div-banner-topo-lp{width: 100%; height:auto; position: relative; float: left; overflow: hidden;}
#mascara-banner{width: 100%; height: 400px; position: absolute; left: 0px; bottom: -50px; z-index: 30; background: url('../img/mascara-2.png'); background-repeat: repeat-x;}
.swiper { width: 100%; height: auto; }

#div-conteudo-banner{width: 100%; height: 100%; position:absolute; z-index: 50;}

#chamada-banner-topo { width: 100%; height: auto; position: absolute; bottom: 20px; z-index: 999; }
#chamada-banner-topo h1{width: 100%; height: auto; position: absolute; text-align: center; bottom: 70px; font-size: 68px; color: #fff; font-weight: 600;}
#chamada-banner-topo p{width: 100%; height: auto; position: absolute; bottom:50px; font-size: 28px; color: #fff; text-align: center; font-weight: 300;}

#div-faixa-ofertas-imperdiveis{width: 100%; height:auto; position: relative;  float: left; text-align: center; font-size: 24px; padding: 24px 0px; color: #000000; background-color: #FFBF00; font-weight: 500; z-index: 999; cursor: pointer;}
#div-faixa-ofertas-imperdiveis:hover {background-color:#36489e; color: #fff;}
#div-faixa-ofertas-imperdiveis:hover #tag-veiculo{background-color:#4357b4;}

#tag-veiculo{width: 140px; height: 140px; position: absolute; left: 50%; margin-left: -470px; top: 50%; margin-top: -70px; background-color: #3F5C87; border-radius: 20px; overflow: hidden;}
#icn-veiculo-tag { width: 90px; height: 90px; position: absolute; left: -50%; margin-left: -45px; top: 50%; margin-top: -45px; background: url('../img/icn-car-tag.png'); background-size: 90px;  /* Aplicando a animação com prefixos */ -webkit-animation: moverTag 10s infinite ease-in-out; -moz-animation: moverTag 10s infinite ease-in-out; -ms-animation: moverTag 10s infinite ease-in-out; -o-animation: moverTag 10s infinite ease-in-out; animation: moverTag 10s infinite ease-in-out; }

@-webkit-keyframes moverTag {
  0% { left: -50%; }
  30% { left: 50%; }
  90% { left: 50%; /* Mantém no centro por 5 segundos */ }
  100% { left: 150%; }
}
@-moz-keyframes moverTag {
  0% { left: -50%; }
  30% { left: 50%; }
  90% { left: 50%; }
  100% { left: 150%; }
}
@-ms-keyframes moverTag {
  0% { left: -50%; }
  30% { left: 50%; }
  90% { left: 50%; }
  100% { left: 150%; }
}
@-o-keyframes moverTag {
  0% { left: -50%; }
  30% { left: 50%; }
  90% { left: 50%; }
  100% { left: 150%; }
}
@keyframes moverTag {
  0% { left: -50%; }
  30% { left: 50%; }
  90% { left: 50%; }
  100% { left: 150%; }
}

/*Inicio cores veiculo*/
#div-s2 { width: 100%; height: auto; position: relative; float: left; background-color: #fff; margin-top: -110px; }
#view-div-s2{width: 1200px; height: auto; position: relative; margin: auto;}

#view-div-s2 h2{width: 100%; height: auto; position: relative; float: left; margin-top: 120px; font-size: 48px; color: #000; text-align: center; font-weight: 600;}
#view-div-s2 p {width: 100%; height: auto; position: relative; float: left; margin-top: 0px; font-size: 22px; color: #000; text-align: center; padding: 0px 200px;}

#faixa-veiculo-s2{width: 100%; height: auto; position: relative; float: left; margin-top: 20px;}
#view-veiculo-s2{width: 700px; height: auto; position: relative; margin: auto; z-index: 20;}

#tipografica-veiculo-s2{width: 100%; height:290px; position:absolute; top:50%; margin-top:0px; overflow: hidden;}
#faixa-tipografia-int{width: 6000px; height: 100%; position: absolute; left: 0px; font-size: 260px; color:#F6F6F6; font-weight: 900; text-transform: uppercase;}

#faixa-cta-cores-veiculos{width: 100%; height: auto; position: relative; float: left;}
#cta-ofertas-s2{width: 320px; height: auto; position: relative; margin: auto; padding: 14px 0px; background-color:#3F5C87; color: #fff; font-size: 20px; text-align: center; border-radius: 100px;}
.icn-oferta{width: 34px; height: 34px; position: absolute; right: 14px; top: 10px; background: url('../img/offer-icn.png'); background-size: 34px;}

#cta-ofertas-s2:hover{background-color:#0559D6;}

#faixa-selecao-cores{width: 100%; height: auto; position: relative; float: left; margin-top: 50px;}
#selecao-int-cores { width: 400px; height: auto; position: relative; margin: auto; display: flex; /* Torna a div flexível */ flex-wrap: wrap; /* Permite que os itens quebrem linha, se necessário */ justify-content: center; /* Centraliza horizontalmente */ align-items: center; /* Centraliza verticalmente */ gap: 20px; /* Substitui o margin-right para espaçamento uniforme */ }
.item-cor { width: 30px; height: 30px; background-color: #dadada; border-radius: 50%; cursor: pointer; border:0px solid #dadada;  transition: linear 0.1s;  -mos-transition: linear 0.1s; -ms-transition: linear 0.1s; -o-transition: linear 0.1s;  }
.item-cor:hover {border:3px solid #dadada; }

/* ==========================================================================
   Inicio S3
   ========================================================================== */
#div-s3{width: 100%; height: auto; position: relative; float: left; margin-top: 110px;}
#view-div-s3{width:1400px; height: auto; left: 50%; position: relative; float: left; margin-left: -700px; background-color:#1F418F; border-radius: 30px; padding: 20px 60px 100px 60px;}

#div-s3-conteud-d{width: 60%; height: auto; position: relative; float: left;}
#div-s3-conteud-d h3{width: 40%; height: auto; position: relative; float: left; margin-top: 80px; color: #fff; font-size:36px; font-weight: 600;}
#div-s3-conteud-d p{width: 100%; height: auto; position: relative; float: left; margin-top: 0px; line-height: 28px; color: #fff; font-size: 19px; font-weight: 300; padding-right: 180px;}

#div-conteudo-d-e{width: 40%; height: auto; position: relative; float: left;}

.item-bloco-conteudo-s3{width: 50%; height: 150px; position: relative; float: left; padding-top:70px;}
.item-bloco-conteudo-s3 h4{width: 100%; height: auto; position: relative; float: left; font-size: 24px; color: #fff; font-weight: 600;}
.item-bloco-conteudo-s3 p{width: 100%; height: auto; position: relative; float: left; margin-top: -15px; font-size: 22px; color: #fff; font-weight: 300;}

/*Inicio ofertas*/
#faixa-ofertas{width: 100%; height: auto; position: relative; float: left; background-color: #fff; overflow: hidden;}
#view-faixa-ofertas{width: 1400px; height: auto; position: relative; margin: auto;}
#faixa-chamada-ofertas { width: 100%; height: auto; position: relative; float: left; margin-top: 45px; }
#faixa-chamada-ofertas h3 { width: 100%; height: auto; position: relative; float: left; margin-top: 30px; line-height: 55px; font-weight: 600; text-align: center; }
#faixa-chamada-ofertas p { width: 100%; height: auto; position: relative; float: left; margin-top: -20px; font-size: 24px; color: #000000; text-align: center; padding: 0px 20px;/* padding-right: 20px; */ }

#controles-slider-ofertas{width: 250px; height: 90px; position: absolute; right: 0px; bottom: 0px;}
.item-controle-slider{width: 55px; height: 55px; position: relative; float: right; margin-left: 15px; opacity: 0.6;}
.item-controle-slider:hover{opacity: 1;}
.ctrl{background: url('../img/ctrl.png'); background-size: 55px;}
.ctrr{background: url('../img/ctrr.png'); background-size: 55px;}

/* ==========================================================================
   Faixa ofertas
   ========================================================================== */
#faixa-card-sofertas{width: 100%; height: auto; position: relative; float: left; margin-top: 10px; padding-bottom: 50px;}

/*card oferta*/
.icn-juridico { width: 20px; height: 20px; position: absolute; right: 15px; top: 31px; background-color: #8be1ee; border-radius: 50%; cursor: pointer; padding: 5px 10px 13px 10px; }
.modal { background-color: #ffffff !important; border-radius: 10px !important; overflow: hidden;}
.modal-overlay{display: none !important;}

.info-modal {width: 90%;}
.modal .modal-footer { background-color: #4873cb; }
.btn-flat { color: #ffffff; }


.card-oferta{width: 300px; height: auto; position: relative; float: left; margin-left: 40px; margin-right: -30px !important; padding-top: 30px; padding-bottom: 65px; background-color:#F1F7FC; border-radius: 14px;}
.tag-card-topo { width: 150px; height: auto; position: relative; margin: unset; margin-left: 25px; padding: 10px 20px 10px 39px; background-color: #4160BE; color: #fff; font-size: 13px; font-weight: 600; border-radius: 15px; text-align: center; }
.icn-tag-card-oferta{width: 20px; height: 20px; position: absolute; left: 10px; top: 9px; background: url('../img/icn-oferta.png'); background-size: 20px;}

.faixa-ft-veiculo-card{width: 100%; height: auto; position: relative; float: left; margin-top: 20px;}
.veiculo-int{width: 90%; height: auto; position: relative; margin: auto;}

.infos-veiculo-oferta{width:100%; height: 150px; position: relative; float: left; margin-top: 10px; padding:0px 30px; box-sizing:border-box;}
.nome-veiculo-card{width:100%; height: 40px; position: relative; float: left; margin-top: 10px; font-size: 18px; font-weight: 600; color: #000000; }
.sobre-oferta-veiculo{width: 100%; height: auto; position: relative; float: left; font-size: 17px; line-height: 24px; color: #000; padding-right: 40px;}

.faixa-tag-validade-oferta{width: 100%; height: auto; position: relative; float: left; margin-top: 20px;}
.tag-validade-campanha { width: 180px; height: auto; position: relative; margin: auto; background-color: #FFBF00; padding: 5px 20px 5px 40px; border-radius: 80px; font-weight: 500; text-align: center; }
.icn-tag-validade-oferta{width: 30px; height: 30px; position: absolute; left: 0px; top: 1px; background-color: #0F5ED9; border-radius: 50%;}
.icn-int-validade-oferta{width: 22px; height: 22px; position: absolute; left: 50%; top: 50%; margin-left: -11px; margin-top: -11px; background: url('../img/clock.png'); background-size: 22px;}




@keyframes girarRelogio {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.icn-int-validade-oferta { animation: girarRelogio 10s linear infinite; /* Roda suavemente */ -webkit-animation: girarRelogio 10s linear infinite; -moz-animation: girarRelogio 10s linear infinite; -o-animation: girarRelogio 10s linear infinite; -ms-animation: girarRelogio 10s linear infinite; }

.faixa-cta-oferta{width: 100%; height: auto; position: relative; float: left; margin-top: 40px; margin-bottom: -30px;}
.cta-solicitar-contato{width: 200px; height: auto; position: relative; margin: auto; padding:12px 22px; background-color:#3F5C87; color: #fff; font-size: 17px; text-align: center; font-weight: 300; border-radius: 100px; cursor: pointer; opacity: 1 !important;}
.cta-solicitar-contato:hover{background-color:#0559D6;}
.icn-cta-oferta{width: 30px; height: 30px; position: absolute; right: 10px; top: 9px;  border-radius: 0% !important; background:url('../img/phone.png'); background-size:30px;}
.icn-cta-oferta-wpp{width: 30px; height: 30px; position: absolute; right: 10px; top: 9px;  border-radius: 0% !important; background:url('../img/phone-wpp.png'); background-size:30px;}
.card-oferta:hover .cta-solicitar-contato{opacity: 1;}

.cta-card-wpp{background-color: #25D366 !important;}
.cta-card-wpp:hover{background-color:#1FB356 !important;}

/* ==========================================================================
   Inicio Banner galeria video
   ========================================================================== */
#div-s4 { width: 100%; height: auto; position: relative; float: left; margin-top: 130px; }
#faixa-banner-galeria{width: 100%; height: auto; position: relative; float: left;}

#conteudo-banner-galeria{width: 100%; height: 250px; position: relative; float: left; z-index: 90; margin-top: -20px; background-color:#2A3C5A;}
#view-conteudo-banner{width: 1400px; height: auto; position: relative; margin: auto;}
#view-conteudo-banner h3{width: 100%; height: auto; position: relative; float: left; margin-top: -100px; font-size: 50px; color: #fff; font-weight: 600;}
#view-conteudo-banner spam{color:#FFBF00;}
#view-conteudo-banner p{width: 45%; height: auto; position: relative; float: left; margin-top: -35px; font-size: 24px; color: #fff; font-weight: 300;}

#faixa-cta-galeria {width: 100%; height: auto; position: relative; float: left; margin-top: 0px;}
#cta-video-galeria {width: auto; height: auto; position: relative; float: left; padding: 14px 30px 14px 70px; background-color:#4160BE; font-size: 18px;  color: #fff; border-radius: 100px; cursor: pointer;}
.icn-play{width: 40px; height: 40px; position: absolute; left: 20px; top: 8px; background: url('../img/icn-play.png'); background-size: 40px;}

#cta-video-galeria:hover{background-color:#0559D6;}

#controles-galeria{width: 200px; height: auto; position: absolute; right: 0px;}
.item-controle-slider-galeria{width: 55px; height: 55px; position: relative; float: right; margin-left: 15px; opacity: 0.6;}
.item-controle-slider-galeria:hover{opacity: 1;}
.ctrl-b{background: url('../img/ctrl-b.png'); background-size: 55px;}
.ctrr-b{background: url('../img/ctrr-b.png'); background-size: 55px;}

#faixa-galeria{width: 100%; height: 400px; position: relative; float: left; overflow: hidden;}
.item-foto-galeria{width: 33.33% !important; height: 400px !important; position: relative; float: left; overflow: hidden;}
.img-galeria{width: 750px; height: 400px; position: absolute; left: 50%; top: 50%; margin-left:-375px; margin-top:-250px;}

/*Inicio como é comprar com a jorlan*/
#div-s7 { width: 100%; height: 670px; position: relative; float: left; overflow: hidden; margin-top: -50px; padding-top: 50px; }
#view-div-s7{width: 1400px; height: auto; position: relative; margin: auto;}

#conteudo-e-s7{width: 50%; height: auto; position: relative; float: left;}
#conteudo-e-s7 h3{width: 55%; height: auto; position: relative; float: left; font-size: 48px; color: #000; font-weight: 700;}
#conteudo-e-s7 p {width:65%; height: auto; position: relative; float: left; margin-top: -10px; font-size: 24px; color: #000; font-weight: 400;}

#faixa-depoimentos{width: 100%; height: auto; position: relative; float: left; margin-top: 10px; overflow: hidden;}

/*item depoimento*/
.item-card-depoimento{width: 280px !important; height: 140px !important; position: relative; float: left; margin-left: 20px; margin-right: -15px; border-radius: 15px; background-color: #001C43; padding: 30px 30px;}
.nome-depoimento {width: 100%; height: auto; position: relative; float: left; font-size: 20px; color: #fff; font-weight: 600;}
.depoimento {width: 100%; height: auto; position: relative; float: left; margin-top: 10px; font-size: 16px; color: #fff; font-weight: 300;}
.estrelas-depoimento {width: 100px; height: auto; position: absolute; right: 20px; top: 35px;}
.estrelas { width: 15px; height: 15px; position: relative; float: right; margin-left: 5px; background: url('../img/estrelas.png'); background-size: 15px;   /* Prefixos para animação */ -webkit-animation: girar 3s infinite ease-in-out; /* Para navegadores WebKit */ -moz-animation: girar 3s infinite ease-in-out;   /* Para navegadores Gecko */ -o-animation: girar 3s infinite ease-in-out;     /* Para navegadores Opera antigo */ animation: girar 3s infinite ease-in-out;        /* Versão padrão */ }
.logo-chevrolet{width:56px; height: 28px; position: absolute; right: 25px; bottom: 25px; background: url('../img/logo-chevrolet.png'); background-size: 56px; background-repeat: no-repeat;}

#faixa-controles-depoimentos{width: 100%; height: auto; position: relative; float: left; margin-top: 30px;}
#view-controles-depoimentos{width: 1400px; height: auto; position: relative; margin: auto;}

.item-controle-slider-dep{width: 55px; height: 55px; position: relative; float: left; margin-right: 15px; opacity: 0.6;}
.item-controle-slider-dep:hover{opacity: 1;}
.ctrl-dep{background: url('../img/ctrl.png'); background-size: 55px;}
.ctrr-dep{background: url('../img/ctrr.png'); background-size: 55px;}

/*Ornamento depoimentos*/
#ornamento-depoimentos{width: 60%; height: 650px; position: absolute; margin-top: -190px; right: -150px; z-index: 90;}
#bg-ornamento-depoimentos { width: 100%; height: 100%; position: absolute; z-index: 1; background-color: #fff; -webkit-filter: blur(90px); -ms-filter: blur(90px); -o-filter: blur(90px); -moz-filter: blur(90px); filter: blur(90px); }

#bloco-imagens-ornamento-depoimentos{width: 54%; height: 740px; position: absolute; top: -50px; right: 0px; z-index: 90; overflow: hidden; z-index: 390;}
.coluna-ornamento-depoimento{width: 33.33%; height: 100%; position: relative; float: left; overflow: hidden;}

.bloco-foto{width: 90%; height: 340px; position: relative; float: left; margin-left: 5%; margin-bottom:30px; background-color: #E0E4E6; border-radius: 30px; overflow: hidden;}
.bf-1{top: 225px;}
.bf-2{top:-90px; margin-bottom: -62px;}
.bf-3{top:-190px; margin-bottom: -160px;}

.foto-int-bloco{width: 400px; height:594px; position: absolute; left: 50%; top: 50%; margin-left: -240px; margin-top: -297px;}
.fix-ft3{margin-top:-190px;}
.fix-ft4{margin-left:-115px;}

/* Animação padrão */
@-webkit-keyframes flutuar {
  0%, 100% { -webkit-transform: translateY(0); transform: translateY(0); }
  50% { -webkit-transform: translateY(-20px); transform: translateY(-20px); }
}
@-moz-keyframes flutuar {
  0%, 100% { -moz-transform: translateY(0); transform: translateY(0); }
  50% { -moz-transform: translateY(-20px); transform: translateY(-20px); }
}
@-o-keyframes flutuar {
  0%, 100% { -o-transform: translateY(0); transform: translateY(0); }
  50% { -o-transform: translateY(-20px); transform: translateY(-20px); }
}
@keyframes flutuar {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-20px); }
}

/* Configuração individual de cada div com tempos diferentes */
.anima-1 { animation: flutuar 3s infinite ease-in-out; -webkit-animation: flutuar 3s infinite ease-in-out; -moz-animation: flutuar 3s infinite ease-in-out; -o-animation: flutuar 3s infinite ease-in-out; }
.anima-2 { animation: flutuar 4s infinite ease-in-out; -webkit-animation: flutuar 4s infinite ease-in-out; -moz-animation: flutuar 4s infinite ease-in-out; -o-animation: flutuar 4s infinite ease-in-out; }
.anima-3 { animation: flutuar 5s infinite ease-in-out; -webkit-animation: flutuar 5s infinite ease-in-out; -moz-animation: flutuar 5s infinite ease-in-out; -o-animation: flutuar 5s infinite ease-in-out; }

@-webkit-keyframes girar {

  /* Para navegadores baseados no WebKit */
  0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
  25% { -webkit-transform: rotate(45deg); transform: rotate(45deg); }
  50% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
  75% { -webkit-transform: rotate(-45deg); transform: rotate(-45deg); }
  100% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
}
@-moz-keyframes girar {

  /* Para navegadores baseados no Gecko (Firefox) */
  0% { -moz-transform: rotate(0deg); transform: rotate(0deg); }
  25% { -moz-transform: rotate(45deg); transform: rotate(45deg); }
  50% { -moz-transform: rotate(0deg); transform: rotate(0deg); }
  75% { -moz-transform: rotate(-45deg); transform: rotate(-45deg); }
  100% { -moz-transform: rotate(0deg); transform: rotate(0deg); }
}
@-o-keyframes girar {

  /* Para navegadores baseados no Opera antigo */
  0% { -o-transform: rotate(0deg); transform: rotate(0deg); }
  25% { -o-transform: rotate(45deg); transform: rotate(45deg); }
  50% { -o-transform: rotate(0deg); transform: rotate(0deg); }
  75% { -o-transform: rotate(-45deg); transform: rotate(-45deg); }
  100% { -o-transform: rotate(0deg); transform: rotate(0deg); }
}
@keyframes girar {

  /* Versão padrão */
  0% { transform: rotate(0deg); }
  25% { transform: rotate(45deg); }
  50% { transform: rotate(0deg); }
  75% { transform: rotate(-45deg); }
  100% { transform: rotate(0deg); }
}


/* ==========================================================================
   Faixa formulário proposta
   ========================================================================== */
#faixa-formulario-proposta{width: 100%; height: 380px; position: relative; float: left; background-color:#1F418F;}
#view-formulario-proposta{width: 1400px; height: 100%; position:relative; margin: auto;}

#chamda-form-proposta{width:35%; height: 100%; position: relative; float: left;}
#chamda-form-proposta h2 {width: 80%; height: auto; position: relative; float: left; margin-top: 80px; font-size: 38px; color: #fff; font-weight: 600;}
#chamda-form-proposta p {width: 100%; height: auto; position: relative; float: left; margin-top: -10px; font-size: 20px; font-weight: 300; color: #fff;}

#div-box-formulario{width: 65%; height: 100%; position: relative; float: left; padding-left: 50px;}
#box-form-int-negociacao{width: 100%; height: auto; position: relative; float: left; margin-top: 100px;}

#box-form-int-negociacao input{ width: 32%; height: auto; position: relative; float: left; margin-right:1%; padding: 16px 20px; color: #021C43 !important; font-size: 18px; background-color: #F1F7FC; border-radius: 10px; box-sizing: border-box; }

#faixa-cta-form-negociacao {width: 100%; height: auto; position: relative; float: left; margin-top: -5px;}
#cta-formulario-negociacao{width: auto; height: auto; position: relative; float: left; padding: 14px 70px 14px 25px; background-color:#4C77DC;  color:#fff; font-size: 18px; border-radius: 80px; border: 1px solid #7C98DC; cursor: pointer;}
#cta-formulario-negociacao:hover{background-color:#3D5FB0;}

#icn-cta-formulario-negociacao{width: 30px; height: 30px; position: absolute; right: 15px; top: 12px; background: url('../img/icn-cta-formulario-negociacao.png'); background-size: 30px;}
#faixa-cta-form-negociacao p {width: 45%; height: auto; position: relative; float: left; margin-left: 15px; margin-top: 5px; color: #fff;}
#faixa-cta-form-negociacao p a { color: #FFBF00; font-weight: 700;}

/* ==========================================================================
   Lojas
   ========================================================================== */
#div-lojas{width: 100%; height: 350px; position: relative; float: left; margin-top: 70px;}
#view-div-lojas{width: 1400px; height: auto; position: relative; margin: auto;}

#conteudo-lojas{width: 30%; height: 100%; position: relative; float: left; background-color: #fff;}
#conteudo-lojas h2{width: 100%; height: auto; position: relative; float: left; margin-top: 80px; font-size:46px; color:#000; font-weight: 600;}
#conteudo-lojas p{width: 100%; height: auto; position: relative; float: left; margin-top: -10px; font-size: 22px; color: #000;}

#controle-lojas{width: 100%; height: auto; position: relative; float: left;}
.item-controle-slider-lojas{width: 55px; height: 55px; position: relative; float: left; margin-right: 15px; opacity: 0.6;}
.item-controle-slider-lojas:hover{opacity: 1;}
.ctrl-lojas{background: url('../img/ctrl.png'); background-size: 55px;}
.ctrr-lojas{background: url('../img/ctrr.png'); background-size: 55px;}

/*Cards lojas*/
#div-cards-lojas{width: 60%; height: auto; position: absolute; right: 0px; top: 40px; overflow: hidden;}

/*Item card loja*/
.item-card-loja{width: 320px !important; height: 400px !important;  position: relative; float: left; margin-right: 10px; background-color:#10213F; border-radius: 18px; overflow: hidden;}
.foto-card-loja{width: 100%; height: auto; position: relative; float: left;}
.bloco-infos-card-loja{width: 100%; height: auto; position: relative; float: left; margin-top: -20px; padding: 20px 20px;}
.bloco-infos-card-loja h2{width: 100%; height: auto; position: relative; float: left; font-size: 22px; color: #fff; font-weight: 500;}
.bloco-infos-card-loja p { width: 91%; height: auto; position: relative; float: left; margin-top: -15px; font-size: 15px; color: #fff; font-weight: 300; }

.faixa-cta-card-loja{width:100%; height: auto; position: absolute; bottom: 30px;}

.cta-card-loja{width: auto; height: auto; position: relative; float: left; margin-left: 20px; padding: 10px 50px 10px 20px; background-color:#3F5C87; color:#fff; border: 1px solid #5C83BE; border-radius: 100px; cursor: pointer;}
.icn-cta-card-loja{width: 25px; height: 25px; position: absolute; right: 12px; top: 10px; background: url('../img/pin.png'); background-size: 25px;}
.cta-card-loja:hover{background-color:#3561A6;}

#div-rodape{width: 100%; height: auto; position: relative; float: left; margin-top: 230px; padding-bottom: 70px; background-color: #f7f9fc;}
#view-div-rodape{width: 1400px; height: auto; position: relative; margin: auto;}
#faixa-logo-jorlan-rodape{width: 100%; height: auto; position: relative; float: left; margin-top: 90px;}
#logo-jorlan-rodape{width:300px; height: 34px; position: relative; margin: auto; background: url('../img/logo-jorlan-rodape.png'); background-size: 300px;}

#view-div-rodape h3{width: 100%; height: auto; position: relative; float: left; margin-top: 20px; color: #000; font-size: 26px; text-align: center; font-weight: 600;}
#view-div-rodape p{width:100%; height: auto; position: relative; float: left; margin-top: -5px; font-size: 14px; color: #000; text-align: center; padding: 0px 200px;}

#barra-veiculos { width: 100%; height: 350px; position: fixed; bottom: -1500px; z-index: 9999; background-color: #fff; border-radius: 70px 70px 0px 0px; -webkit-box-shadow: 0px 0px 35px 0px rgba(0, 0, 0, 0.26); -moz-box-shadow: 0px 0px 35px 0px rgba(0, 0, 0, 0.26); -moz-box-shadow: 0px 0px 35px 0px rgba(0, 0, 0, 0.26); -ms-box-shadow: 0px 0px 35px 0px rgba(0, 0, 0, 0.26); -o-box-shadow: 0px 0px 35px 0px rgba(0, 0, 0, 0.26); box-shadow: 0px 0px 35px 0px rgba(0, 0, 0, 0.26); }
#toolbar-barra-veiculos{width: 100%; height: auto; position: relative; float: left; margin-top: 40px; padding: 0px 70px;}
#txt-toolbar-veiculos{width: auto; height: auto; position: relative; float: left; font-size: 28px; font-weight: 600; color: #1F418F;}

#barra-categoria-veiculos{width: 800px; height: auto; position: relative; margin: auto;}

/*item cta veiculo*/
.item-cta-veiculo{width: 190px; height: auto; position: relative; float: left; text-align: center; font-size: 16px; color: #000; padding: 10px 0px; border-radius: 40px; cursor: pointer; margin-right: 10px;}
.item-cta-veiculo:hover{background-color:#0C4CB0; color: #fff;}

.atv-cta-veiculo{background-color:#0C4CB0; color: #fff;}
.fechar-barra-veiculos{width: 45px; height: 45px; position: relative; float: right; margin-top: -2px; background-color: #000; border-radius: 50%; cursor: pointer;}
.fechar-icn{width: 32px; height: 32px; position: absolute; left: 50%; top: 50%; margin-left: -16px; margin-top: -16px; background: url('../img/fechar.png'); background-size: 32px;}

#faixa-veiculos-janela{width: 90%; height: auto; position: relative; float: left; margin-left: 5%; margin-top: 40px; overflow: hidden; padding: 0px 50px;}

.item-carro-janela{width: 250px !important; height: auto; position: relative; float: left;}
.img-carro-janela{width: 100%; height: auto; position: relative; margin: auto;}
.legenda-veiculo-janela{width: 100%; height: auto; position: relative; float: left; font-size: 16px; color: #000; text-align: center;}

.ctrl-veiculo{width: 50px; height: 50px; position: absolute; left: 60px; top: 50%; margin-top: -5px; background: url('../img/ctrr.png'); background-size:50px; z-index: 90; cursor: pointer; }
.ctrr-veiculo{width: 50px; height: 50px; position: absolute; right: 60px; top: 50%; margin-top: -5px; background: url('../img/ctrl.png'); background-size:50px; z-index: 90; cursor: pointer; }


/*Seleção de formulários*/
#janela-selecao-formularios{width: 1200px; height: 220px; position: fixed; left: 50%; margin-left: -600px; top: 350%; margin-top: -150px; background-color: #fff; border-radius: 20px; z-index: 29999 !important; opacity: 0;}
#janela-selecao-formularios-header{width: 100%; height: auto; position: relative; float: left; padding: 0px 20px; }
#janela-selecao-formularios-header h2{width: 70%; height: auto; position: relative; float: left; margin-top: 35px; font-size: 22px; color: #000; font-size: 500; font-weight: 500; padding: 0px 10px;}

.fechar-formulario-selecao {width: 45px; height: 45px; position: relative; float: right; margin-top: 20px; background-color: #000; border-radius: 50%; cursor: pointer;}
.fechar-formulario-icn-selecao {width: 32px; height: 32px; position: absolute; left: 50%; top: 50%; margin-left: -16px; margin-top: -16px; background: url('../img/fechar.png'); background-size: 32px;}

#faixa-btns-formularios{width: 100%; height: auto; position: relative; float: left; margin-top: 10px; padding: 0px 20px;}
.item-btn-selecao-formulario{width: 23.5%; height: 90px; position: relative;  float: left; margin-left: 0.75%; margin-right: 0.75%; background-color:#F1F7FC; border-radius: 10px; cursor: pointer;}

.item-btn-selecao-formulario:hover{background-color:#d8ecfe;}

.icn-selecao-formulario{width: 25%; height: 100%; position: relative; float: left;}
.icn-selecao-formulario-int{width: 30px; height: 30px; position: absolute; top: 50%; left: 50%; margin-left: -20px; margin-top: -20px;}

.legenda-btn-selecao{width: 75%; height: 100%; position: relative; float: left;}
.nome-form{width: 100%; height: auto; position: relative; float: left; margin-top: 18px; padding: 0px 0px; color: #000; font-size: 17px; font-weight: 600;}
.sobre-formulario{width: 100%; height: auto; position: relative; float: left; margin-top: 0px; padding: 0px 10px 0px 0px; color: #000; font-size: 12px;}

/*Ínicio formulários*/
#mascara-formulario{width: 100%; height: 0%;  position: fixed; z-index: 10000 !important; background-color: #dee6f1; opacity: 0.9;}

/*Formulário me liguem*/
#box-formulario-me-liguem { width: 400px; height: 690px; position: fixed; left: 50%; top: 250%; margin-left: -200px; margin-top: -345px; background-color: #fff; border-radius: 20px; z-index: 99999 !important; opacity: 0; }
.header-formulario { width: 100%; height: auto; position: relative; float: left; margin-top: 28px; padding: 0px 30px; }
.icn-formulario{width: 45px; height: 45px; position: relative; float: left;  margin-top: 0px;}

.legenda-formulario{width: 60%; height: auto; position: relative; float: left; margin-left: 20px;}
.legenda-formulario h2{width: 100%; height: auto; position: relative; float: left; margin-top: 0px; font-size: 20px; color: #000; font-weight: 500;}
.legenda-formulario p{width: 80%; height: auto; position: relative; float: left; margin-top: -20px; font-size: 16px; color: #000;}

.fechar-formulario { width: 45px; height: 45px; position: relative; float: right; margin-top: 2px; background-color: #000; border-radius: 50%; cursor: pointer; }
.fechar-formulario-icn {width: 32px; height: 32px; position: absolute; left: 50%; top: 50%; margin-left: -16px; margin-top: -16px; background: url('../img/fechar.png'); background-size: 32px;}

.box-campos-formulario-c1{width: 100%; height: auto; position: relative; float: left; margin-top: 20px; padding: 0px 30px;}
.box-campos-formulario-c1 input { width: 100%; height: auto !important; position: relative; float: left; margin-bottom: 7px !important; padding: 18px 20px !important; color: #3F5C87 !important; font-size: 15px !important; background-color: #F1F7FC !important; border-radius: 10px !important; box-sizing: border-box !important;  border: 0px solid #fff !important;}
.box-campos-formulario-c1 select { width: 100%; height: auto !important; position: relative; float: left; margin-bottom: 7px !important; padding: 10px 20px !important; color: #3F5C87 !important; font-size: 15px !important; background-color: #F1F7FC !important; border-radius: 10px !important; box-sizing: border-box !important;  border: 0px solid #fff !important;}

.select-wrapper input.select-dropdown { position: relative; cursor: pointer; background-color: transparent; border: none; border-bottom: 1px solid #9e9e9e; outline: none; height: 3rem; line-height: 1rem; width: 100%; font-size: 1rem; margin: 0 0 20px 0; padding: 0; display: block; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
.select-wrapper span.caret { display:none !important; }

.box-campos-formulario-c1 textarea { width: 100%; height: 100px !important; position: relative; float: left; padding: 20px 20px !important; background-color: #F1F7FC !important; border-radius: 10px !important; font-size: 15px !important; color: #3F5C87; border-bottom: 0px solid #dadada !important; border: 0px solid #dadada !important; box-sizing: border-box !important; }

.box-campos-formulario-c3{width: 100%; height: auto; position: relative; float: left; margin-top: 20px; padding: 0px 30px;}
.campo-label-c3{width: 32%; height: auto; position: relative; float: left; padding: 0px 0px; margin-bottom: 4px; margin-right: 1.2% !important;}
.campo-label-c3b{width: 15.4%; height: auto; position: relative; float: left; padding: 0px 0px; margin-bottom: 4px; margin-right: 1% !important;}
.campo-label-c3b:last-child{margin-right:0% !important;}

.campo-label-c3c{width: 60%; height: auto; position: relative; float: left; padding-top: 20px; margin-bottom: 4px; margin-left: 1%; margin-right: 1% !important;}
.campo-label-c3d{width: 30%; height: auto; position: relative; float: left; padding-top: 20px; margin-bottom: 4px; margin-left: 1%;}

.box-campos-formulario-c3 input { width: 100% !important; height: auto !important; position: relative; float: left; padding: 18px 20px !important; color: #3F5C87 !important; font-size: 15px !important; background-color: #F1F7FC !important; border-radius: 10px !important; box-sizing: border-box !important;  border: 0px solid #fff !important;}
.box-campos-formulario-c3 select { width: 100%; height: auto !important; position: relative; float: left; margin-bottom: 7px !important; padding: 10px 20px !important; color: #3F5C87 !important; font-size: 15px !important; background-color: #F1F7FC !important; border-radius: 10px !important; box-sizing: border-box !important;  border: 0px solid #fff !important;}
.label-campo{width: 100%; height: auto; position: relative; float: left; font-size: 14px; color: #416078; padding-left: 14px; margin-bottom: 5px;}
.terms{width: 100%; height: auto; position: relative; float: left; margin-top: 15px; }
[type="checkbox"] + label { position: relative; padding-left: 35px; cursor: pointer; display: inline-block; height: 5px; line-height: 25px; font-size: 13px; line-height: -13px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }

/* Esconde o checkbox padrão */
input[type="checkbox"] { appearance: none; -webkit-appearance: none; -moz-appearance: none; width: 30px !important; height: 30px !important; border: 2px solid #0056b3; border-radius: 4px; display: inline-block; position: relative; cursor: pointer; background: #fff; }
input[type="checkbox"] + label:before { width: 24px; height: 24px; top: 2px; }

/* Adiciona um efeito ao marcar */
input[type="checkbox"]:checked { background: #0056b3; }
input[type="checkbox"]:checked + label:after { width: 10px; height: 18px; border-width: 3px; left: 8px; top: 2px; }

/* Estiliza o label */
label[for="termos"] { font-size: 14px; color: #333; cursor: pointer; margin-left: 8px; padding-top: 4px; }

.dropdown-content li > span {
    color: #333 !important; /* Substitua #333 pela cor desejada */
}

.cta-formulario{width: 100%; height: auto; position: relative; float: left; margin-top: 30px;}
.cta-formulario-int{width:340px; height: auto; position: relative; margin: auto; padding: 15px 20px; color: #fff; background-color:#3F5C87; border-radius: 50px; text-align: center; cursor: pointer;} 

.cta-formulario-int:hover{background-color:#304667;}

.cta-formulario-int-b{width:340px; height: auto; position: relative; margin-top: -25px; padding: 15px 20px; color: #fff; background-color:#3F5C87; border-radius: 50px; text-align: center; cursor: pointer;} 

.cta-formulario-int-b:hover{background-color:#1f375c;}

.icn-cta-form{width: 30px; height: 35px; position: absolute; right: 10px; top: 10px; background:url('../img/phone.png'); background-size: 30px; background-repeat: no-repeat;}

/*Usado como entrada*/
#box-formulario-usado-entrada { width: 950px; height: 610px; position: fixed; left: 50%; top: 250%; margin-left: -475px; margin-top: -320px; background-color: #fff; border-radius: 20px; z-index: 99999; opacity: 0;}
#box-formulario-financiado{width: 950px; height: 610px; position: fixed; left: 50%; top: 250%; margin-left: -475px; margin-top: -330px; background-color: #fff; border-radius: 20px; z-index: 99999; opacity: 0;}
#box-formulario-pagar-a-vista { width: 450px; height: 700px; position: fixed; left: 50%; top: 250%; margin-left: -225px; margin-top: -350px; background-color: #fff; border-radius: 20px; z-index: 99999 !important; opacity: 0; }


/*
 * Allow only vertical resizing of textareas.
 */
::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
color: #416078; opacity: 1; /* Firefox */ }
:-ms-input-placeholder { /* Internet Explorer 10-11 */
color: #416078; }
:-o-input-placeholder { /* Internet Explorer 10-11 */
color: #416078; }
:-moz-input-placeholder { /* Internet Explorer 10-11 */
color: #416078; }
::-ms-input-placeholder { /* Microsoft Edge */
color: #416078; }


input:focus, textarea:focus, select:focus { outline: none !important; box-shadow: none !important; border-bottom: 0px solid #ccc !important; /* Substitua pela cor desejada */ }



@media only screen  
and (min-width:2000px) 
and (max-width:3200px) {

#faixa-galeria{width: 100%; height: 517px; position: relative; float: left; overflow: hidden;}
.item-foto-galeria{width: 33.33% !important; height: 400px !important; position: relative; float: left; }
.img-galeria{width: 1000px; height: 533px; position: absolute; left: 50%; top: 50%; margin-left:-500px; margin-top:-266px;}

}

@media only screen  
and (min-width:1200px) 
and (max-width:1450px) {

.desktop{display: none;}
.tablet{display: block;}
.mobile{display: none;}  

#view-div-s3 { width: 95%; height: auto; left: 2.5%; position: relative; float: left; margin-left: 0px; background-color: #1F418F; border-radius: 20px; padding: 20px 40px 100px 40px; }
#div-s3-conteud-d h3 { width: 60%; height: auto; position: relative; float: left; margin-top: 80px; color: #fff; font-size: 36px; font-weight: 600; }
.item-bloco-conteudo-s3 h4 { width: 100%; height: auto; position: relative; float: left; font-size: 22px; color: #fff; font-weight: 600; }
.item-bloco-conteudo-s3 p { width: 100%; height: auto; position: relative; float: left; margin-top: -15px; font-size: 18px; color: #fff; font-weight: 300; }

#div-conteudo-banner{width: 100%; height: 100%; position:absolute; z-index: 50;}

#chamada-banner-topo { width: 100%; height: auto; position: absolute; bottom: 20px; z-index: 999; }
#chamada-banner-topo h1{width: 100%; height: auto; position: absolute; text-align: center; bottom: 70px; font-size: 68px; color: #fff; font-weight: 600;}
#chamada-banner-topo p{width: 100%; height: auto; position: absolute; bottom:50px; font-size: 28px; color: #fff; text-align: center; font-weight: 300;}



#div-faixa-ofertas-imperdiveis { width: 100%; height: auto; position: relative; float: left; text-align: center; font-size: 20px; padding: 17px 0px; color: #000000; background-color: #FFBF00; font-weight: 500; z-index: 999; }
#tag-veiculo { width: 110px; height: 110px; position: absolute; left: 50%; margin-left: -470px; top: 50%; margin-top: -56px; background-color: #3F5C87; border-radius: 18px; overflow: hidden; }
#icn-veiculo-tag { width: 70px; height: 70px; position: absolute; left: -50%; margin-left: -35px; top: 50%; margin-top: -35px; background: url('../img/icn-car-tag.png'); background-size: 70px; -webkit-animation: moverTag 10s infinite ease-in-out; -moz-animation: moverTag 10s infinite ease-in-out; -ms-animation: moverTag 10s infinite ease-in-out; -o-animation: moverTag 10s infinite ease-in-out; animation: moverTag 10s infinite ease-in-out; }
#view-div-s2 h2 { width: 100%; height: auto; position: relative; float: left; margin-top: 120px; font-size: 44px; color: #000; text-align: center; font-weight: 600; }
#view-div-s2 p { width: 100%; height: auto; position: relative; float: left; margin-top: 0px; font-size: 20px; color: #000; text-align: center; padding: 0px 230px; }
#faixa-veiculo-s2 { width: 100%; height: auto; position: relative; float: left; margin-top: 20px; margin-bottom: 20px; }
#view-veiculo-s2 { width: 640px; height: auto; position: relative; margin: auto; z-index: 20; }
#faixa-selecao-cores { width: 100%; height: auto; position: relative; float: left; margin-top: 40px; }
.item-cor { width: 25px; height: 25px; background-color: #dadada; border-radius: 50%; cursor: pointer; border: 0px solid #dadada; transition: linear 0.1s; -mos-transition: linear 0.1s; -ms-transition: linear 0.1s; -o-transition: linear 0.1s; }
#view-faixa-ofertas { width: 1100px; height: auto; position: relative; margin: auto; }
#faixa-chamada-ofertas h3 { width: 100%; height: auto; position: relative; float: left; font-size: 36px; margin-top: 10px; line-height: 39px; font-weight: 600; }
#faixa-chamada-ofertas p { width: 100%; height: auto; position: relative; float: left; margin-top: -18px; font-size: 22px; color: #000000; padding-right: 0px; }
#faixa-card-sofertas { width: 100%; height: auto; position: relative; float: left; margin-top: 30px; padding-bottom: 50px; }
.item-controle-slider { width: 45px; height: 45px; position: relative; float: right; margin-left: 10px; opacity: 0.6; }
.ctrl { background: url('../img/ctrl.png'); background-size: 45px; }
.ctrr { background: url('../img/ctrr.png'); background-size: 45px; }

.cta-solicitar-contato { width: 200px; height: auto; position: relative; margin: auto; padding: 12px 22px; background-color: #3F5C87; color: #fff; font-size: 17px; text-align: center; font-weight: 300; border-radius: 100px; cursor: pointer; }

#view-conteudo-banner { width: 1100px; height: auto; position: relative; margin: auto; }
#view-conteudo-banner h3 { width: 100%; height: auto; position: relative; float: left; margin-top: -60px; font-size: 40px; color: #fff; font-weight: 600; }
#view-conteudo-banner p { width: 45%; height: auto; position: relative; float: left; margin-top: -7px; font-size: 19px; color: #fff; font-weight: 300; }
#cta-video-galeria { width: auto; height: auto; position: relative; float: left; padding: 14px 25px 14px 73px; background-color: #4160BE; font-size: 18px; color: #fff; border-radius: 100px; cursor: pointer; }
.item-controle-slider-galeria { width: 45px; height: 45px; position: relative; float: right; margin-left: 15px; opacity: 0.6; }
.ctrl-b { background: url('../img/ctrl-b.png'); background-size: 45px; }
.ctrr-b { background: url('../img/ctrr-b.png'); background-size: 45px; }
#faixa-galeria { width: 100%; height: 350px; position: relative; float: left; overflow: hidden; }
.item-foto-galeria { width: 33.33% !important; height: 300px !important; position: relative; float: left; }


/*Inicio como é comprar com a jorlan*/
#div-s7 { width: 100%; height: 670px; position: relative; float: left; overflow: hidden; margin-top: -50px; padding-top: 50px; }
#view-div-s7 { width: 1100px; height: auto; position: relative; margin: auto; }
#conteudo-e-s7 h3 { width: 55%; height: auto; position: relative; float: left; margin-top: 45px; font-size: 37px; color: #000; font-weight: 700; }
#conteudo-e-s7 p { width: 65%; height: auto; position: relative; float: left; margin-top: -10px; font-size: 19px; color: #000; font-weight: 400; }
#view-controles-depoimentos { width: 1100px; height: auto; position: relative; margin: auto; }
.item-controle-slider-dep { width: 45px; height: 45px; position: relative; float: left; margin-right: 10px; opacity: 0.6; }
.ctrl-dep { background: url('../img/ctrl.png'); background-size: 45px; }
.ctrr-dep { background: url('../img/ctrr.png'); background-size: 45px; }
#bloco-imagens-ornamento-depoimentos { width: 45%; height: 740px; position: absolute; top: -110px; right: 0px; z-index: 90; overflow: hidden; z-index: 390; }
.bloco-foto { width: 90%; height: 250px; position: relative; float: left; margin-left: 5%; margin-bottom: 31px; background-color: #E0E4E6; border-radius: 30px; overflow: hidden; }
.foto-int-bloco { width: 240px; height: 574px; position: absolute; left: 50%; top: 50%; margin-left: -110px; margin-top: -217px; }
.fix-ft4 { margin-left: -75px; margin-top: -133px; }
.bf-3 { top: 0px; margin-bottom: 20px; }
.bf-2 { top: 2px; margin-bottom: 28px; }
.bf-1 { top: 278px; }

.tag-card-topo { width: 150px; height: auto; position: relative; margin: unset; margin-left: 25px; padding: 10px 20px 10px 39px; background-color: #4160BE; color: #fff; font-size: 13px; font-weight: 600; border-radius: 15px; text-align: center; }

#view-formulario-proposta { width: 1100px; height: 100%; position: relative; margin: auto; }
#chamda-form-proposta h2 { width: 80%; height: auto; position: relative; float: left; margin-top: 93px; font-size: 28px; color: #fff; font-weight: 600; }
#chamda-form-proposta p { width: 100%; height: auto; position: relative; float: left; margin-top: -10px; font-size: 18px; font-weight: 300; color: #fff; }
#box-form-int-negociacao { width: 100%; height: auto; position: relative; float: left; margin-top: 120px; }
#box-form-int-negociacao input { width: 32%; height: auto; position: relative; float: left; margin-right: 1%; padding: 15px 20px; color: #1F418F !important; font-size: 18px; background-color: #F1F7FC; border-radius: 10px; box-sizing: border-box; }
#cta-formulario-negociacao { width: auto; height: auto; position: relative; float: left; padding: 14px 70px 14px 25px; background-color: #4C77DC; color: #fff; font-size: 16px; border-radius: 80px; border: 1px solid #7C98DC; cursor: pointer; }
#icn-cta-formulario-negociacao { width: 25px; height: 25px; position: absolute; right: 21px; top: 13px; background: url('../img/icn-cta-formulario-negociacao.png'); background-size: 25px; }
#faixa-cta-form-negociacao p { width: 57%; height: auto; position: relative; float: left; margin-left: 15px; margin-top: 5px; font-size: 16px; color: #fff; }
#view-div-lojas { width: 1100px; height: auto; position: relative; margin: auto; }
#conteudo-lojas { width: 34%; height: 100%; position: relative; float: left; background-color: #fff; }
#conteudo-lojas h2 { width: 100%; height: auto; position: relative; float: left; margin-top: 114px; font-size: 36px; color: #000; font-weight: 600; }
#conteudo-lojas p { width: 100%; height: auto; position: relative; float: left; margin-top: -10px; font-size: 20px; color: #000; }
.item-controle-slider-lojas { width: 45px; height: 45px; position: relative; float: left; margin-right: 10px; opacity: 0.6; }
.ctrl-lojas { background: url('../img/ctrl.png'); background-size: 45px; }
.ctrr-lojas { background: url('../img/ctrr.png'); background-size: 45px; }
.bloco-infos-card-loja h2 { width: 100%; height: auto; position: relative; float: left; font-size: 20px; color: #fff; font-weight: 500; }
.bloco-infos-card-loja p { width: 80%; height: auto; position: relative; float: left; margin-top: -15px; font-size: 14px; color: #fff; font-weight: 300; }
.cta-card-loja { width: auto; height: auto; position: relative; float: left; margin-left: 20px; padding: 10px 41px 10px 20px; background-color: #3F5C87; color: #fff; font-size: 15px; border: 1px solid #5C83BE; border-radius: 100px; cursor: pointer; }
.icn-cta-card-loja { width: 20px; height: 20px; position: absolute; right: 12px; top: 11px; background: url('../img/pin.png'); background-size: 20px; }
#view-div-rodape { width: 1100px; height: auto; position: relative; margin: auto; }
#view-div-rodape h3 { width: 100%; height: auto; position: relative; float: left; margin-top: 20px; color: #000; font-size: 18px; text-align: center; font-weight: 600; }
#view-div-rodape p { width: 100%; height: auto; position: relative; float: left; margin-top: -5px; font-size: 12px; color: #000; text-align: center; padding: 0px 80px; }

}  


@media only screen  
and (min-width:1000px) 
and (max-width:1200px) {


.desktop{display: none;}
.tablet{display: block;}
.mobile{display: none;}  


/* ==========================================================================
   Ínicio home
   ========================================================================== */
#ornamento-home { width: 600px; height: 563px; position: absolute; left: -50px; top: -70px; background: url('../img/bolinhas.png'); background-size: 600px; }
#view-home { width: 950px; height: 100%; position: relative; margin: auto; overflow: hidden; z-index: 90; }
#conteudo-view-home { width: 70%; height: 100%; position: relative; float: left; }
#ornamento-fotos-home { width: 30%; height: 100%; position: relative; float: left; }
#faixa-conteudo-home { width: 94%; height: 600px; position: absolute; top: 50px; margin-top: unset; }
#faixa-conteudo-home h1 { width: 100%; height: auto; position: relative; float: left; font-size: 34px; color: #49667F; font-weight: 700; }
#faixa-conteudo-home p { width: 100%; height: auto; position: relative; float: left; margin-top: -10px; font-size: 17px; color: #3D3D3D; padding-right: 200px; }
#container-blocos-out { width: 300px; height: 2500px; position: absolute; left: 50%; margin-left: -150px; }
.item-bloco-foto-ornamento { width: 280px; height: 230px; position: relative; float: left; margin-left: 10px; margin-bottom: 10px; background-color: #0B70CB; border-radius: 20px; overflow: hidden; }
.item-foto-ornamento-int-home { width: 300px; height: 300px; position: absolute; left: 50%; top: 50%; margin-left: -150px; margin-top: -149px; }

#view-div-s3 { width: 95%; height: auto; left: 2.5%; position: relative; float: left; margin-left: 0px; background-color: #1F418F; border-radius: 20px; padding: 20px 40px 100px 40px; }
#div-s3-conteud-d h3 { width: 60%; height: auto; position: relative; float: left; margin-top: 80px; color: #fff; font-size: 36px; font-weight: 600; }
.item-bloco-conteudo-s3 h4 { width: 100%; height: auto; position: relative; float: left; font-size: 22px; color: #fff; font-weight: 600; }
.item-bloco-conteudo-s3 p { width: 100%; height: auto; position: relative; float: left; margin-top: -15px; font-size: 18px; color: #fff; font-weight: 300; }

#div-conteudo-banner{width: 100%; height: 100%; position:absolute; z-index: 50;}
#chamada-banner-topo { width: 100%; height: auto; position: absolute; bottom: 20px; z-index: 999; }
#chamada-banner-topo h1{width: 100%; height: auto; position: absolute; text-align: center; bottom: 70px; font-size: 68px; color: #fff; font-weight: 600;}
#chamada-banner-topo p{width: 100%; height: auto; position: absolute; bottom:50px; font-size: 28px; color: #fff; text-align: center; font-weight: 300;}


#div-faixa-ofertas-imperdiveis { width: 100%; height: auto; position: relative; float: left; text-align: center; font-size: 20px; padding: 17px 0px; color: #000000; background-color: #FFBF00; font-weight: 500; z-index: 999; }
#tag-veiculo { width: 110px; height: 110px; position: absolute; left: 50%; margin-left: -470px; top: 50%; margin-top: -56px; background-color: #3F5C87; border-radius: 18px; overflow: hidden; }
#icn-veiculo-tag { width: 70px; height: 70px; position: absolute; left: -50%; margin-left: -35px; top: 50%; margin-top: -35px; background: url('../img/icn-car-tag.png'); background-size: 70px; -webkit-animation: moverTag 10s infinite ease-in-out; -moz-animation: moverTag 10s infinite ease-in-out; -ms-animation: moverTag 10s infinite ease-in-out; -o-animation: moverTag 10s infinite ease-in-out; animation: moverTag 10s infinite ease-in-out; }

#div-s3-conteud-d p { width: 100%; height: auto; position: relative; float: left; margin-top: 0px; line-height: 27px; color: #fff; font-size: 18px; font-weight: 300; padding-right: 100px; }

#view-div-s2 { width: 950px; height: auto; position: relative; margin: auto; }
#view-div-s2 h2 { width: 100%; height: auto; position: relative; float: left; margin-top: 120px; font-size: 44px; color: #000; text-align: center; font-weight: 600; }
#view-div-s2 p { width: 100%; height: auto; position: relative; float: left; margin-top: 0px; font-size: 20px; color: #000; text-align: center; padding: 0px 230px; }
#faixa-veiculo-s2 { width: 100%; height: auto; position: relative; float: left; margin-top: 20px; margin-bottom: 20px; }
#view-veiculo-s2 { width: 640px; height: auto; position: relative; margin: auto; z-index: 20; }
#faixa-selecao-cores { width: 100%; height: auto; position: relative; float: left; margin-top: 40px; }
.item-cor { width: 25px; height: 25px; background-color: #dadada; border-radius: 50%; cursor: pointer; border: 0px solid #dadada; transition: linear 0.1s; -mos-transition: linear 0.1s; -ms-transition: linear 0.1s; -o-transition: linear 0.1s; }
#view-faixa-ofertas { width: 950px; height: auto; position: relative; margin: auto; }
#faixa-chamada-ofertas h3 { width: 100%; height: auto; position: relative; float: left; font-size: 36px; margin-top: 10px; line-height: 39px; font-weight: 600; }
#faixa-chamada-ofertas p { width: 100%; height: auto; position: relative; float: left; margin-top: -18px; font-size: 22px; color: #000000; padding-right: 0px; }
#faixa-card-sofertas { width: 100%; height: auto; position: relative; float: left; margin-top: 30px; padding-bottom: 50px; }
#controles-slider-ofertas { width: 250px; height: 74px; position: absolute; right: 0px; bottom: 0px; }
.item-controle-slider { width: 45px; height: 45px; position: relative; float: right; margin-left: 10px; opacity: 0.6; }
.ctrl { background: url('../img/ctrl.png'); background-size: 45px; }
.ctrr { background: url('../img/ctrr.png'); background-size: 45px; }

.cta-solicitar-contato { width: 200px; height: auto; position: relative; margin: auto; padding: 12px 22px; background-color: #3F5C87; color: #fff; font-size: 17px; text-align: center; font-weight: 300; border-radius: 100px; cursor: pointer; }
#view-conteudo-banner { width: 950px; height: auto; position: relative; margin: auto; }
#view-conteudo-banner h3 { width: 100%; height: auto; position: relative; float: left; margin-top: -60px; font-size: 40px; color: #fff; font-weight: 600; }
#view-conteudo-banner p { width: 45%; height: auto; position: relative; float: left; margin-top: -7px; font-size: 19px; color: #fff; font-weight: 300; }
#cta-video-galeria { width: auto; height: auto; position: relative; float: left; padding: 14px 25px 14px 73px; background-color: #4160BE; font-size: 18px; color: #fff; border-radius: 100px; cursor: pointer; }
.item-controle-slider-galeria { width: 45px; height: 45px; position: relative; float: right; margin-left: 15px; opacity: 0.6; }
.ctrl-b { background: url('../img/ctrl-b.png'); background-size: 45px; }
.ctrr-b { background: url('../img/ctrr-b.png'); background-size: 45px; }
#faixa-galeria { width: 100%; height: 350px; position: relative; float: left; overflow: hidden; }
.item-foto-galeria { width: 33.33% !important; height: 300px !important; position: relative; float: left; }

/*Inicio como é comprar com a jorlan*/
#div-s7 { width: 100%; height: 670px; position: relative; float: left; overflow: hidden; margin-top: -50px; padding-top: 50px; }
#view-div-s7 { width: 950px; height: auto; position: relative; margin: auto; }
#conteudo-e-s7 h3 { width: 55%; height: auto; position: relative; float: left; margin-top: 45px; font-size: 37px; color: #000; font-weight: 700; }
#conteudo-e-s7 p { width: 65%; height: auto; position: relative; float: left; margin-top: -10px; font-size: 19px; color: #000; font-weight: 400; }
#view-controles-depoimentos { width: 950px; height: auto; position: relative; margin: auto; }
.item-controle-slider-dep { width: 45px; height: 45px; position: relative; float: left; margin-right: 10px; opacity: 0.6; }
.ctrl-dep { background: url('../img/ctrl.png'); background-size: 45px; }
.ctrr-dep { background: url('../img/ctrr.png'); background-size: 45px; }
#bloco-imagens-ornamento-depoimentos { width: 45%; height: 740px; position: absolute; top: -110px; right: 0px; z-index: 90; overflow: hidden; z-index: 390; }
.bloco-foto { width: 90%; height: 250px; position: relative; float: left; margin-left: 5%; margin-bottom: 31px; background-color: #E0E4E6; border-radius: 30px; overflow: hidden; }
.foto-int-bloco { width: 240px; height: 574px; position: absolute; left: 50%; top: 50%; margin-left: -110px; margin-top: -217px; }
.fix-ft4 { margin-left: -75px; margin-top: -133px; }
.bf-3 { top: 0px; margin-bottom: 20px; }
.bf-2 { top: 2px; margin-bottom: 28px; }
.bf-1 { top: 278px; }
.tag-card-topo { width: 150px; height: auto; position: relative; margin: auto; padding: 10px 20px 10px 39px; background-color: #4160BE; color: #fff; font-size: 13px; font-weight: 600; border-radius: 15px; text-align: center; }

#view-formulario-proposta { width: 950px; height: 100%; position: relative; margin: auto; }
#chamda-form-proposta h2 { width: 80%; height: auto; position: relative; float: left; margin-top: 93px; font-size: 28px; color: #fff; font-weight: 600; }
#chamda-form-proposta p { width: 100%; height: auto; position: relative; float: left; margin-top: -10px; font-size: 18px; font-weight: 300; color: #fff; }
#box-form-int-negociacao { width: 100%; height: auto; position: relative; float: left; margin-top: 120px; }
#box-form-int-negociacao input { width: 32%; height: auto; position: relative; float: left; margin-right: 1%; padding: 15px 20px; color: #fff; font-size: 18px; background-color: #F1F7FC; border-radius: 10px; box-sizing: border-box; }
#cta-formulario-negociacao { width: auto; height: auto; position: relative; float: left; padding: 14px 70px 14px 25px; background-color: #4C77DC; color: #fff; font-size: 16px; border-radius: 80px; border: 1px solid #7C98DC; cursor: pointer; }
#icn-cta-formulario-negociacao { width: 25px; height: 25px; position: absolute; right: 21px; top: 13px; background: url('../img/icn-cta-formulario-negociacao.png'); background-size: 25px; }
#faixa-cta-form-negociacao p { width: 40%; height: auto; position: relative; float: left; margin-left: 15px; margin-top: 5px; font-size: 12px; color: #fff; }
#view-div-lojas { width: 950px; height: auto; position: relative; margin: auto; }
#conteudo-lojas { width: 34%; height: 100%; position: relative; float: left; background-color: #fff; }
#conteudo-lojas h2 { width: 100%; height: auto; position: relative; float: left; margin-top: 114px; font-size: 36px; color: #000; font-weight: 600; }
#conteudo-lojas p { width: 100%; height: auto; position: relative; float: left; margin-top: -10px; font-size: 20px; color: #000; }
.item-controle-slider-lojas { width: 45px; height: 45px; position: relative; float: left; margin-right: 10px; opacity: 0.6; }
.ctrl-lojas { background: url('../img/ctrl.png'); background-size: 45px; }
.ctrr-lojas { background: url('../img/ctrr.png'); background-size: 45px; }
.bloco-infos-card-loja h2 { width: 100%; height: auto; position: relative; float: left; font-size: 20px; color: #fff; font-weight: 500; }
.bloco-infos-card-loja p { width: 80%; height: auto; position: relative; float: left; margin-top: -15px; font-size: 14px; color: #fff; font-weight: 300; }
.cta-card-loja { width: auto; height: auto; position: relative; float: left; margin-left: 20px; padding: 10px 41px 10px 20px; background-color: #3F5C87; color: #fff; font-size: 15px; border: 1px solid #5C83BE; border-radius: 100px; cursor: pointer; }
.icn-cta-card-loja { width: 20px; height: 20px; position: absolute; right: 12px; top: 11px; background: url('../img/pin.png'); background-size: 20px; }
#view-div-rodape { width: 950px; height: auto; position: relative; margin: auto; }
#view-div-rodape h3 { width: 100%; height: auto; position: relative; float: left; margin-top: 20px; color: #000; font-size: 18px; text-align: center; font-weight: 600; }
#view-div-rodape p { width: 100%; height: auto; position: relative; float: left; margin-top: -5px; font-size: 12px; color: #000; text-align: center; padding: 0px 80px; }

/*Inicio janela veículos*/
#barra-categoria-veiculos { width: 640px; height: auto; position: relative; margin: auto; }
.item-cta-veiculo { width: 150px; height: auto; position: relative; float: left; text-align: center; font-size: 13px; color: #000; padding: 10px 0px; border-radius: 40px; cursor: pointer; margin-right: 10px; }
.atv-cta-veiculo{background-color:#0C4CB0; color: #fff;}


  /* Início seleção formulário */
  #janela-selecao-formularios { width: 90%; height: 350px; position: fixed; left: 5%; margin-left: -0px; top: 250%; margin-top: -150px; background-color: #fff; border-radius: 20px; z-index: 9999; opacity: 0;}
  .item-btn-selecao-formulario { width: 48%; height: 101px; position: relative; float: left; margin-left: 0.75%; margin-right: 0.75%; margin-bottom: 10px; background-color: #F1F7FC; border-radius: 10px; cursor: pointer; }
  .icn-selecao-formulario-int { width: 30px; height: 30px; position: absolute; top: 50%; left: 50%; margin-left: -15px; margin-top: -15px; }
  .nome-form { width: 100%; height: auto; position: relative; float: left; margin-top: 18px; padding: 0px 0px; color: #000; font-size: 18px; font-weight: 600; }
  .sobre-formulario { width: 100%; height: auto; position: relative; float: left; margin-top: 0px; padding: 0px 10px 0px 0px; color: #000; font-size: 13px; }



}


@media only screen  
and (min-width:750px) 
and (max-width:1000px) {

  .desktop { display: none; }
  .tablet { display: block; }
  .mobile { display: none; }

  /* ==========================================================================
   Ínicio home
   ========================================================================== */
#ornamento-home { width: 600px; height: 563px; position: absolute; left: -110px; top: -50px; background: url('../img/bolinhas.png'); background-size: 600px; display: none;}
#view-home { width: 100%; height: 100%; position: relative; margin: auto; overflow: hidden; z-index: 90; }
#conteudo-view-home { width: 70%; height: 100%; position: relative; float: left; padding: 0px 30px; }
#ornamento-fotos-home { width: 40%; height: 100%; position: absolute; float: unset; right: -100px; }
#faixa-conteudo-home { width: 100%; height: 600px; position: absolute; top: 40px; margin-top: unset; }
#faixa-conteudo-home h1 { width: 100%; height: auto; position: relative; float: left; font-size: 27px; color: #49667F; font-weight: 600; }
#faixa-conteudo-home p { width: 100%; height: auto; position: relative; float: left; margin-top: -10px; font-size: 16px; color: #3D3D3D; padding-right: 20px; }
.foto-loja { width: 100%; height: 110px; position: relative; float: left; margin-top: 10px; border-radius: 16px; overflow: hidden; }
.foto-int-loja { width: 240px; height: 300px; position: absolute; left: 50%; top: 50%; margin-top: -108px; margin-left: -119px; }
.cta-int { width: 120px; height: auto; position: relative; margin: auto; padding: 7px 0px; font-size: 16px; color: #8CA0A7; border-radius: 20px; cursor: pointer; border: 1px solid #8CA0A7; text-align: center; }
.item-bloco-foto-ornamento { width: 360px; height: 380px; position: relative; float: left; margin-left: 80px; margin-bottom: 10px; background-color: #0B70CB; border-radius: 20px; overflow: hidden; }
.item-foto-ornamento-int-home { width: 400px; height: 300px; position: absolute; left: 50%; top: 50%; margin-left: -190px; margin-top: -200px; }
   
  #logo-int-home { width: 250px; height: 32px; position: relative; float: left; margin-bottom: -8px; margin-top: 5px; background: url('../img/logo-jorlan-rodape.png'); background-size: 250px; background-repeat: no-repeat; }

   #cta-wpp-topo { width: auto; height: auto; position: absolute; right: 15px; top: 44px; padding: 15px 30px 15px 60px; border-radius: 150px; border: 0.3px solid #64E877; color: #fff; font-size: 20px; }
   #cta-ofertas-topo{width: auto; height: auto; position: absolute; left: 15px; top: 44px; padding: 15px 30px 15px 60px; border-radius: 150px; border: 0.3px solid #44618C; color: #fff; font-size: 20px;}

  /* ==========================================================================
   Topo LP
   ========================================================================== */
  #menu-topo { width: 200px; height: 67px; position: relative; margin: auto; border-radius: 150px; overflow: hidden; border: 0.3px solid #44618C; }
#logo-jorlan {
width: 172px;
height: 20px;
position: absolute;
left: 50%;
top: 23px;
margin-left: -76px;
background: url('../img/logo-jorlan.png');
background-size: 152px;
background-repeat: no-repeat;
}
#tag-veiculos-menu-topo { width: 121px; height: 65px; position: absolute; right: 0px; background-color: #3F5C86; }
  #txt-veiculos-menu-topo { width: 100%; height: auto; position: relative; float: left; margin-top: 19px; font-size: 18px; color: #fff; text-align: center; }
  #icn-menu-topo { width: 35px; height: 35px; position: absolute; left: -18px; top: 14px; background-color: #3F5C86; border-radius: 50%; }
  #icn-int-m-topo { width: 24px; height: 24px; position: absolute; left: 50%; top: 50%; margin-top: -12px; margin-left: -11px; background: url('../img/icn-wheel.png') no-repeat center; background-size: 24px; -webkit-transition: -webkit-transform 0.1s linear; -moz-transition: -moz-transform 0.1s linear; -ms-transition: -ms-transform 0.1s linear; -o-transition: -o-transform 0.1s linear; transition: transform 0.1s linear; }
  #tipografica-veiculo-s2 { width: 100%; height: 290px; position: absolute; top: 50%; margin-top: -49px; overflow: hidden; }
  #cta-ofertas-s2 { width: 287px; height: auto; position: relative; margin: auto; padding: 14px 30px 14px 0px; background-color: #3F5C87; color: #fff; font-size: 20px; text-align: center; border-radius: 100px; }
  #view-div-s3 { width: 95%; height: auto; left: 2.5%; position: relative; float: left; margin-left: 0px; background-color: #1F418F; border-radius: 20px; padding: 20px 40px 10px 40px; }
  #div-s3-conteud-d h3 { width: 60%; height: auto; position: relative; float: left; margin-top: 40px; color: #fff; font-size: 34px; font-weight: 600; }
  .item-bloco-conteudo-s3 h4 { width: 100%; height: auto; position: relative; float: left; font-size: 16px; color: #fff; font-weight: 600; }
  .item-bloco-conteudo-s3 p { width: 100%; height: auto; position: relative; float: left; margin-top: -15px; font-size: 14px; color: #fff; font-weight: 300; }

  #div-conteudo-banner{width: 100%; height: 100%; position:absolute; z-index: 50;}

  #chamada-banner-topo { width: 100%; height: auto; position: absolute; bottom: -10px; z-index: 999; }
  #chamada-banner-topo h1{width: 100%; height: auto; position: absolute; text-align: center; bottom: 70px; font-size: 42px; color: #fff; font-weight: 600;}
  #chamada-banner-topo p{width: 100%; height: auto; position: absolute; bottom:50px; font-size: 20px; color: #fff; text-align: center; font-weight: 300;}


  /* ==========================================================================
   Inicio S3
   ========================================================================== */
  #div-s3 { width: 100%; height: auto; position: relative; float: left; margin-top: 60px; }
  #div-s3-conteud-d { width: 100%; height: auto; position: relative; float: left; }
  #div-conteudo-d-e { width: 100%; height: auto; position: relative; float: left; }
  .item-bloco-conteudo-s3 { width: 25%; height: 150px; position: relative; float: left; padding-top: 0px; }
  #div-faixa-ofertas-imperdiveis { width: 100%; height: auto; position: relative; float: left; text-align: center; font-size: 20px; padding: 17px 0px; color: #000000; background-color: #FFBF00; font-weight: 500; z-index: 999; }
  #tag-veiculo { width: 110px; height: 110px; position: absolute; left: 50%; margin-left: -351px; top: 50%; margin-top: -56px; background-color: #3F5C87; border-radius: 18px; overflow: hidden; }
  #icn-veiculo-tag { width: 70px; height: 70px; position: absolute; left: -50%; margin-left: -35px; top: 50%; margin-top: -35px; background: url('../img/icn-car-tag.png'); background-size: 70px; -webkit-animation: moverTag 10s infinite ease-in-out; -moz-animation: moverTag 10s infinite ease-in-out; -ms-animation: moverTag 10s infinite ease-in-out; -o-animation: moverTag 10s infinite ease-in-out; animation: moverTag 10s infinite ease-in-out; }
  #div-s3-conteud-d p { width: 100%; height: auto; position: relative; float: left; margin-top: 0px; line-height: 27px; color: #fff; font-size: 17px; font-weight: 300; padding-right: 20px; }
  #view-div-s2 { width: 730px; height: auto; position: relative; margin: auto; }
  #view-div-s2 h2 { width: 100%; height: auto; position: relative; float: left; margin-top: 90px; font-size: 34px; color: #000; text-align: center; font-weight: 600; }
  #view-div-s2 p { width: 100%; height: auto; position: relative; float: left; margin-top: 0px; font-size: 18px; color: #000; text-align: center; padding: 0px 50px; }
  #faixa-veiculo-s2 { width: 100%; height: auto; position: relative; float: left; margin-top: 10px; margin-bottom: 20px; }
  #view-veiculo-s2 { width: 550px; height: auto; position: relative; margin: auto; z-index: 20; }
  #faixa-selecao-cores { width: 100%; height: auto; position: relative; float: left; margin-top: 40px; }
  .item-cor { width: 25px; height: 25px; background-color: #dadada; border-radius: 50%; cursor: pointer; border: 0px solid #dadada; transition: linear 0.1s; -mos-transition: linear 0.1s; -ms-transition: linear 0.1s; -o-transition: linear 0.1s; }
  #view-faixa-ofertas { width: 700px; height: auto; position: relative; margin: auto; }
  #faixa-chamada-ofertas h3 { width: 100%; height: auto; position: relative; float: left; font-size: 28px; margin-top: 10px; line-height: 32px; font-weight: 600; text-align: center; }
  #faixa-chamada-ofertas p { width: 100%; height: auto; position: relative; float: left; margin-top: -16px; font-size: 20px; color: #000000; padding-right: 20px; padding-left: 20px; text-align: center; }
  #controles-slider-ofertas { width: 120px; height: 74px; position: absolute; right: 0px; bottom: 0px; }

  .sobre-oferta-veiculo { width: 100%; height: auto; position: relative; float: left; font-size: 15px; line-height: 23px; color: #000; padding-right: 40px; }

  .item-controle-slider { width: 40px; height: 40px; position: relative; float: right; margin-left: 10px; opacity: 0.6; }
  .ctrl { background: url('../img/ctrl.png'); background-size: 40px; }
  .ctrr { background: url('../img/ctrr.png'); background-size: 40px; }
  .cta-solicitar-contato { width: 200px; height: auto; position: relative; margin: auto; padding: 12px 22px; background-color: #3F5C87; color: #fff; font-size: 17px; text-align: center; font-weight: 300; border-radius: 100px; cursor: pointer; }
  #view-conteudo-banner { width: 700px; height: auto; position: relative; margin: auto; }
  #view-conteudo-banner h3 { width: 100%; height: auto; position: relative; float: left; margin-top: -60px; font-size: 34px; color: #fff; font-weight: 600; }
  #view-conteudo-banner p { width: 63%; height: auto; position: relative; float: left; margin-top: -7px; font-size: 18px; color: #fff; font-weight: 300; }
  #cta-video-galeria { width: auto; height: auto; position: relative; float: left; padding: 14px 25px 14px 73px; background-color: #4160BE; font-size: 18px; color: #fff; border-radius: 100px; cursor: pointer; }
  .item-controle-slider-galeria { width: 45px; height: 45px; position: relative; float: right; margin-left: 15px; opacity: 0.6; }
  .ctrl-b { background: url('../img/ctrl-b.png'); background-size: 45px; }
  .ctrr-b { background: url('../img/ctrr-b.png'); background-size: 45px; }

  .img-galeria { width: 370px; height: 400px; position: absolute; left: 50%; top: 50%; margin-left: -187px; margin-top: -110px; }
  #faixa-galeria { width: 100%; height: 150px; position: relative; float: left; overflow: hidden; }
  .item-foto-galeria { width: 33.33% !important; height: 150px !important; position: relative; float: left; overflow: hidden; }

  /* ==========================================================================
   Inicio Banner galeria video
   ========================================================================== */
  #conteudo-banner-galeria { width: 100%; height: 200px; position: relative; float: left; z-index: 90; margin-top: -20px; background-color: #2A3C5A; }
  #faixa-cta-galeria { width: 100%; height: auto; position: relative; float: left; margin-top: 5px; }
  #controles-galeria { width: 200px; height: auto; position: absolute; right: 0px; top: 13px; }

  /*Inicio como é comprar com a jorlan*/
  #div-s7 { width: 100%; height: 670px; position: relative; float: left; overflow: hidden; margin-top: 0px; padding-top: 50px; }
  #view-div-s7 { width: 700px; height: auto; position: relative; margin: auto; }
  #conteudo-e-s7 h3 { width: 90%; height: auto; position: relative; float: left; margin-top: 55px; font-size: 32px; color: #000; line-height: 37px; font-weight: 700; }
  #conteudo-e-s7 p { width: 100%; height: auto; position: relative; float: left; margin-top: -10px; font-size: 18px; color: #000; font-weight: 400; }
  #view-controles-depoimentos { width: 700px; height: auto; position: relative; margin: auto; }
  .item-controle-slider-dep { width: 40px; height: 40px; position: relative; float: left; margin-right: 10px; opacity: 0.6; }
  .ctrl-dep { background: url('../img/ctrl.png'); background-size: 40px; }
  .ctrr-dep { background: url('../img/ctrr.png'); background-size: 40px; }
  #bloco-imagens-ornamento-depoimentos { width: 45%; height: 740px; position: absolute; top: -110px; right: 0px; z-index: 90; overflow: hidden; z-index: 390; }
  .bloco-foto { width: 90%; height: 250px; position: relative; float: left; margin-left: 5%; margin-bottom: 31px; background-color: #E0E4E6; border-radius: 30px; overflow: hidden; }
  .foto-int-bloco { width: 240px; height: 574px; position: absolute; left: 50%; top: 50%; margin-left: -110px; margin-top: -217px; }
  .fix-ft4 { margin-left: -75px; margin-top: -133px; }
  .bf-3 { top: 0px; margin-bottom: 20px; }
  .bf-2 { top: 2px; margin-bottom: 28px; }
  .bf-1 { top: 278px; display: none; }
  .tag-card-topo { width: 150px; height: auto; position: relative; margin: auto; padding: 10px 20px 10px 39px; background-color: #4160BE; color: #fff; font-size: 13px; font-weight: 600; border-radius: 15px; text-align: center; }

  /* ==========================================================================
   Faixa formulário proposta
   ========================================================================== */
  #chamda-form-proposta { width: 40%; height: 100%; position: relative; float: left; }
  #div-box-formulario { width: 60%; height: 100%; position: relative; float: left; padding-left: 50px; }
  #faixa-cta-form-negociacao { width: 100%; height: auto; position: relative; float: left; margin-top: 11px; }

  /* ==========================================================================
   Lojas
   ========================================================================== */
  #div-lojas { width: 100%; height: 350px; position: relative; float: left; margin-top: 0px; }
  #controle-lojas { width: 130px; height: auto; position: relative; float: right; }

  /*Cards lojas*/
  #div-cards-lojas { width: 100%; height: auto; position: relative; float: left; right: 0px; top: 20px; overflow: hidden; }

  /*Item card loja*/
  .item-card-loja { width: 320px !important; height: 400px !important; position: relative; float: left; margin-left: 20px; margin-right: -9px; background-color: #10213F; border-radius: 18px; overflow: hidden; }
  #div-rodape { width: 100%; height: auto; position: relative; float: left; margin-top: 290px; padding-bottom: 70px; background-color: #f7f9fc; }
  #faixa-logo-jorlan-rodape { width: 100%; height: auto; position: relative; float: left; margin-top: 60px; }

  #view-formulario-proposta { width: 700px; height: 100%; position: relative; margin: auto; }
  #chamda-form-proposta h2 { width: 80%; height: auto; position: relative; float: left; margin-top: 93px; font-size: 25px; line-height: 28px; color: #fff; font-weight: 600; }
  #chamda-form-proposta p { width: 100%; height: auto; position: relative; float: left; margin-top: -10px; font-size: 15px; font-weight: 300; color: #fff; }
  #box-form-int-negociacao { width: 100%; height: auto; position: relative; float: left; margin-top: 48px; }
  #box-form-int-negociacao input { width: 100%; height: auto; position: relative; float: left; margin-right: 1%; padding: 14px 20px; margin-bottom: 8px; color: #fff; font-size: 18px; background-color: #F1F7FC; border-radius: 10px; box-sizing: border-box; }
  #cta-formulario-negociacao { width: auto; height: auto; position: relative; float: left; padding: 12px 60px 12px 25px; background-color: #4C77DC; color: #fff; font-size: 14px; border-radius: 80px; border: 1px solid #7C98DC; cursor: pointer; }
  #icn-cta-formulario-negociacao { width: 25px; height: 25px; position: absolute; right: 18px; top: 10px; background: url('../img/icn-cta-formulario-negociacao.png'); background-size: 25px; }
  #faixa-cta-form-negociacao p { width: 92%; height: auto; position: relative; float: left; margin-left: 0px; margin-top: 12px; font-size: 13px; font-weight: 300; color: #fff; }
  #view-div-lojas { width: 700px; height: auto; position: relative; margin: auto; }
  #conteudo-lojas { width: 100%; height: 100%; position: relative; float: left; background-color: #fff; }
  #conteudo-lojas h2 { width: 100%; height: auto; position: relative; float: left; margin-top: 64px; font-size: 34px; color: #000; font-weight: 600; }
  #conteudo-lojas p { width: 55%; height: auto; position: relative; float: left; margin-top: -10px; font-size: 20px; color: #000; }
  .item-controle-slider-lojas { width: 45px; height: 45px; position: relative; float: left; margin-right: 10px; opacity: 0.6; }
  .ctrl-lojas { background: url('../img/ctrl.png'); background-size: 45px; }
  .ctrr-lojas { background: url('../img/ctrr.png'); background-size: 45px; }
  .bloco-infos-card-loja h2 { width: 100%; height: auto; position: relative; float: left; font-size: 20px; color: #fff; font-weight: 500; }
  .bloco-infos-card-loja p { width: 80%; height: auto; position: relative; float: left; margin-top: -15px; font-size: 14px; color: #fff; font-weight: 300; }
  .cta-card-loja { width: auto; height: auto; position: relative; float: left; margin-left: 20px; padding: 10px 41px 10px 20px; background-color: #3F5C87; color: #fff; font-size: 15px; border: 1px solid #5C83BE; border-radius: 100px; cursor: pointer; }
  .icn-cta-card-loja { width: 20px; height: 20px; position: absolute; right: 12px; top: 11px; background: url('../img/pin.png'); background-size: 20px; }
  #view-div-rodape { width: 100%; height: auto; position: relative; margin: auto; }
  #view-div-rodape h3 { width: 100%; height: auto; position: relative; float: left; margin-top: 20px; color: #000; font-size: 25px; text-align: center; font-weight: 600; }
  #view-div-rodape p { width: 100%; height: auto; position: relative; float: left; margin-top: -5px; font-size: 12px; color: #000; text-align: center; padding: 0px 40px; }
  
  .fix-cta-financiar{margin-top: -71px !important;}

  /*Ínicio barra de veículos */
  #barra-categoria-veiculos { width: 800px; height: auto; position: relative; margin: auto; display: none; }
  #barra-veiculos-slider { width: 490px; height: 40px; position: relative; margin: auto; display: block; overflow: hidden; }
  
  #toolbar-barra-veiculos { width: 100%; height: auto; position: relative; float: left; margin-top: 40px; padding: 0px 0px; }

  .item-cta-veiculo { width: 120px; height: auto; position: relative; float: left; text-align: center; font-size: 13px; color: #000; padding: 10px 0px; border-radius: 40px; cursor: pointer; margin-right: 10px; }
  #barra-veiculos { width: 100%; height: 380px; position: fixed; bottom: -1500px; z-index: 9999; background-color: #fff; border-radius: 30px 30px 0px 0px; -webkit-box-shadow: 0px 0px 35px 0px rgba(0, 0, 0, 0.26); -moz-box-shadow: 0px 0px 35px 0px rgba(0, 0, 0, 0.26); -moz-box-shadow: 0px 0px 35px 0px rgba(0, 0, 0, 0.26); -ms-box-shadow: 0px 0px 35px 0px rgba(0, 0, 0, 0.26); -o-box-shadow: 0px 0px 35px 0px rgba(0, 0, 0, 0.26); box-shadow: 0px 0px 35px 0px rgba(0, 0, 0, 0.26); }
  .fechar-barra-veiculos { width: 45px; height: 45px; position: relative; float: right; margin-right: 17px; margin-top: -110px; background-color: #000; border-radius: 50%; cursor: pointer; }
  #barra-veiculos-slider { width: 100%; height: 40px; position: relative; float: left; margin: unset; margin-left: 0%; margin-top: 26px; padding: 0px 50px; display: block;        /* overflow: hidden; */ background-color: unset; overflow: unset; }

  #barra-veiculos { width: 100%; height: 380px; position: fixed; bottom: -1500px; z-index: 9999; background-color: #fff; border-radius: 20px 20px 0px 0px; -webkit-box-shadow: 0px 0px 35px 0px rgba(0, 0, 0, 0.26); -moz-box-shadow: 0px 0px 35px 0px rgba(0, 0, 0, 0.26); -moz-box-shadow: 0px 0px 35px 0px rgba(0, 0, 0, 0.26); -ms-box-shadow: 0px 0px 35px 0px rgba(0, 0, 0, 0.26); -o-box-shadow: 0px 0px 35px 0px rgba(0, 0, 0, 0.26); box-shadow: 0px 0px 35px 0px rgba(0, 0, 0, 0.26); }
  .fechar-barra-veiculos { width: 45px; height: 45px; position: relative; float: right; margin-top: -110px; background-color: #000; border-radius: 50%; cursor: pointer; }
  #barra-veiculos-slider { width: 90%; height: 40px; position: relative; float: left; margin: unset; margin-left: 5%; margin-top: 26px; padding: 0px 50px; display: block; overflow: unset; background-color: unset; }

  .item-cta-veiculo { width: 160px; height: auto; position: relative; float: left; text-align: center; font-size: 13px; color: #000; padding: 10px 0px; border-radius: 40px; cursor: pointer; margin-right: 10px; }
  .atv-cta-veiculo{background-color:#0C4CB0; color: #fff;}

  .ctrl-veiculo-slider { width: 40px; height: 40px; position: absolute; left: -19px; top: 50%; margin-top: -20px; background: url('../img/ctrr-slider.png'); background-size: 40px; z-index: 90; cursor: pointer; background-color: #fff; border-radius: 10px; z-index: 999; }
  .ctrr-veiculo-slider { width: 40px; height: 40px; position: absolute; right: -19px; top: 50%; margin-top: -20px; background: url('../img/ctrl-slider.png'); background-size: 40px; z-index: 90; cursor: pointer; background-color: #fff; border-radius: 10px; z-index: 999; }

  .ctrl-veiculo { width: 40px; height: 40px; position: absolute; left: 20px; top: 50%; margin-top: 25px; background: url('../img/ctrr.png'); background-size: 40px; z-index: 90; cursor: pointer; background-color: #fff; border-radius: 10px; }
  .ctrr-veiculo { width: 40px; height: 40px; position: absolute; right: 20px; top: 50%; margin-top: 25px; background: url('../img/ctrl.png'); background-size: 40px; z-index: 90; cursor: pointer; background-color: #fff; border-radius: 10px; }
  
  #txt-toolbar-veiculos { width: auto; height: auto; position: relative; float: left; margin-left: 30px; font-size: 28px; font-weight: 600; color: #1F418F; }
  #faixa-veiculos-janela { width: 100%; height: auto; position: relative; float: left; margin-left: %; margin-top: 40px; overflow: hidden; padding: 0px 0px; }

  
  /* Início seleção formulário */
  #janela-selecao-formularios { width: 90%; height: 360px; position: fixed; left: 5%; margin-left: -0px; top: 250%; margin-top: -150px; background-color: #fff; border-radius: 20px; z-index: 9999; opacity: 0;}
  .item-btn-selecao-formulario { width: 48%; height: 101px; position: relative; float: left; margin-left: 0.75%; margin-right: 0.75%; margin-bottom: 10px; background-color: #F1F7FC; border-radius: 10px; cursor: pointer; }
  .icn-selecao-formulario-int { width: 30px; height: 30px; position: absolute; top: 50%; left: 50%; margin-left: -15px; margin-top: -15px; }
  .nome-form { width: 100%; height: auto; position: relative; float: left; margin-top: 18px; padding: 0px 0px; color: #000; font-size: 18px; font-weight: 600; }
  .sobre-formulario { width: 100%; height: auto; position: relative; float: left; margin-top: 0px; padding: 0px 10px 0px 0px; color: #000; font-size: 13px; }

  /* Ínicio formulários */
  #box-formulario-usado-entrada { width: 90%; height: 618px; position: fixed; left: 5%; top: 250%; margin-left: 0px; margin-top: -320px; background-color: #fff; border-radius: 20px; z-index: 99999; overflow-y: scroll; padding-bottom: 40px; opacity: 0;}
  .campo-label-c3b { width: 15%; height: auto; position: relative; float: left; padding: 0px 0px; margin-bottom: 4px; margin-right: 1% !important; }
  .campo-label-c3c { width: 60%; height: auto; position: relative; float: left; padding-top: 0px; margin-bottom: 4px; margin-top: -24px; margin-bottom: 20px; margin-left: 1%; margin-right: 1% !important; }
  .label-campo { width: 100%; height: auto; position: relative; float: left; font-size: 11px; color: #416078; padding-left: 14px; margin-bottom: 5px; }
  .fix-terms{top: 40px;}

  /* Formulário financiamento */
  #box-formulario-financiado { width: 90%; height: 660px; position: fixed; left: 5%; top: 250%; margin-left: 0px; margin-top: -400px; background-color: #fff; border-radius: 20px; z-index: 99999; opacity: 0; overflow-y: scroll; }
  .campo-label-c3 { width: 49%; height: auto; position: relative; float: left; padding: 0px 0px; margin-bottom: 4px; margin-right: 1% !important; }
  .cta-formulario { width: 100%; height: auto; position: relative; float: left; margin-top: 30px; margin-bottom: 40px; }



}


@media only screen  
and (min-width:420px) 
and (max-width:750px) {

#mascara-formulario { width: 100%; height: 0%; position: fixed; z-index: 1000 !important; background-color: #dee6f1; opacity: 0; }

.nome-lp { width: 100%; height: auto; position: relative; float: left; margin-top: 9px; font-size: 18px; color: #000000; padding: 0px 20px; font-weight: 600; }
.ofertas-lp-lista { width: 100%; height: auto; position: relative; float: left; font-size: 15px; color: #000; padding: 0px 20px; }
.icone-lp { width: 30px; height: 30px; position: absolute; left: 50%; margin-left: -20px; top: 50%; margin-top: -15px; background: url('../img/sete-p.png'); background-size: 30px; }
.item-lp-selecao:hover .icone-lp{background: url('../img/seta-b.png'); background-size: 30px !important;}

/* ==========================================================================
   Ínicio home
   ========================================================================== */
#ornamento-home { width: 400px; height: 283px; position: absolute; left: 0px; top: -70px; background: url('../img/bolinhas.png'); background-size: 400px; }
#view-home { width: 100%; height: 100%; position: relative; margin: auto; overflow: scroll; z-index: 90; padding: 0px 22px; }
#conteudo-view-home { width: 100%; height: 100%; position: relative; float: left; }
#ornamento-fotos-home { width: 40%; height: 100%; position: relative; float: left; display: none; }
#faixa-conteudo-home { width: 100%; height: auto; position: absolute; top: 50px; margin-top: unset; }
#faixa-logo-home { width: 100%; height: auto; position: relative; float: left; }
#logo-int-home { width: 230px; height: 22px; left: 50%; position: relative; float: left; margin-left: -115px; background: url('../img/logo-jorlan-rodape.png'); background-size: 230px; }
#faixa-conteudo-home h1 { width: 100%; height: auto; position: relative; float: left; text-align: center; font-size: 22px; color: #49667F; font-weight: 600; margin-top: 25px; }
#faixa-conteudo-home p { width: 100%; height: auto; position: relative; float: left; text-align: center; margin-top: -5px; font-size: 15px; color: #3D3D3D; padding-right: 50px; padding-left: 50px;}
#faixa-lojas { width: 100%; height: auto; position: relative; float: left; margin-top: 4px; padding-bottom: 50px; }
.item-loja { width: 100%; height: auto; position: relative; float: left; padding: 16px 20px; }
.legenda-loja { width: 100%; height: auto; position: relative; float: left; font-size: 23px; color: #361D1E; text-align: center; }
.foto-loja { width: 100%; height: 236px; position: relative; float: left; margin-top: 10px; border-radius: 20px; overflow: hidden; }
.foto-int-loja { width: 410px; height: 330px; position: absolute; left: 50%; top: 50%; margin-top: -150px; margin-left: -200px; }


#ancora-ofertas{width: 1px; height: 1px; position: absolute; left: 0px; top: -70px;}
.desktop { display: none; }
.tablet { display: none; }
.mobile { display: block; }

#cta-wpp-topo { display: none; }
#cta-ofertas-topo{display: none;}

#cta-wpp-mobile { width: 180px; height: auto; position: fixed; right: 20px; margin-right: unset; bottom: 44px; padding: 15px 30px 15px 60px; border-radius: 150px; border: 0.3px solid #64E877; color: #fff; font-size: 20px; z-index: 1999; }
#icn-wpp-mobile{width: 34px; height: 34px; position: absolute; left: 16px; top: 11px; background: url('../img/wpp-icn.png'); background-size: 34px;}

#cta-ofertas-rodape { width: auto; height: auto; position: fixed; left: 30px; bottom: 44px; padding: 43px 30px 15px 30px; border-radius: 150px; border: 0.3px solid #44618C; color: #fff; font-size: 20px; display: block; z-index: 9999; }
#icn-ofertas-rodape{width:34px;height:34px;position:absolute;left:12px;top:13px;background:url('../img/icn-ofertas.png');background-size:34px;}

#selecao-int-cores { width: 90%; height: auto; position: relative; margin: auto; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 20px; }
.item-cor { width: 20px; height: 20px; background-color: #dadada; border-radius: 50%; cursor: pointer; border: 0px solid #dadada; transition: linear 0.1s; -mos-transition: linear 0.1s; -ms-transition: linear 0.1s; -o-transition: linear 0.1s; }

#menu-topo { width: 370px; height: 64px; position: relative; margin: auto; border-radius: 150px; overflow: hidden; border: 0.3px solid #44618C; }
#logo-jorlan { width: 192px; height: 20px; position: absolute; left: 50%; top: 21px; background: url('../img/logo-jorlan.png'); background-size: 173px; background-repeat: no-repeat; }
#tag-veiculos-menu-topo { width: 130px; height: 73px; position: absolute; right: 0px; background-color: #3F5C86; }
#txt-veiculos-menu-topo { width: 100%; height: auto; position: relative; float: left; margin-top: 17px; font-size: 20px; color: #fff; text-align: center; }
#icn-menu-topo { width: 40px; height: 40px; position: absolute; left: -18px; top: 11px; background-color: #3F5C86; border-radius: 50%; }
#icn-int-m-topo { width: 24px; height: 24px; position: absolute; left: 50%; top: 50%; margin-top: -12px; margin-left: -14px; background: url('../img/icn-wheel.png') no-repeat center; background-size: 24px; -webkit-transition: -webkit-transform 0.1s linear; -moz-transition: -moz-transform 0.1s linear; -ms-transition: -ms-transform 0.1s linear; -o-transition: -o-transform 0.1s linear; transition: transform 0.1s linear; }

#mascara-banner { width: 100%; height: 400px; position: absolute; left: 0px; bottom: 20px; z-index: 30; background: url('../img/mascara-2.png'); background-repeat: repeat-x; }
#div-banner-topo-lp { width: 100%; height: auto; padding-bottom: 80px; position: relative; float: left; overflow: hidden; }

#chamada-banner-topo { width: 100%; height: auto; position: absolute; bottom: 130px; z-index: 999; }
#chamada-banner-topo h1{width: 100%; height: auto; position: absolute; text-align: center; bottom: 70px; font-size: 38px; color: #fff; font-weight: 600;}
#chamada-banner-topo p{width: 100%; height: auto; position: absolute; bottom:50px; font-size: 17px; color: #fff; text-align: center; font-weight: 300;}

#div-faixa-ofertas-imperdiveis { width: 320px; height: auto; position: relative; left: 50%; float: left; margin-left: -160px; margin-top: -175px; text-align: left; font-size: 16px; padding: 15px 0px; color: #000000; background-color: #FFBF00; font-weight: 500; z-index: 999; border-radius: 11px; padding-left: 115px; padding-right: 10px; overflow: hidden; }
#tag-veiculo { width: 98px; height: 76px; position: absolute; left: 0px; margin-left: 0px; top: 0px; margin-top: 0px; background-color: #37489E; border-radius: 0px 0px 0px 0px; overflow: hidden; }
#icn-veiculo-tag { width: 60px; height: 60px; position: absolute; left: -35%; margin-left: -30px; top: 67%; margin-top: -45px; background: url('../img/icn-car-tag.png'); background-size: 60px; -webkit-animation: moverTag 10s infinite ease-in-out; -moz-animation: moverTag 10s infinite ease-in-out; -ms-animation: moverTag 10s infinite ease-in-out; -o-animation: moverTag 10s infinite ease-in-out; animation: moverTag 10s infinite ease-in-out; }

/*Inicio cores veiculo */
#div-s2 { width: 100%; height: auto; position: relative; float: left; background-color: #fff; border-radius: 40px 40px 0px 0px; margin-top: -35px; z-index: 90; }
#view-div-s2 { width: 100%; height: auto; position: relative; margin: auto;    /* border-radius: 10px 10px 0px 0px; */ }
#view-div-s2 h2 { width: 100%; height: auto; position: relative; float: left; margin-top: 50px; font-size: 24px; color: #000; text-align: left; font-weight: 600; padding: 0px 30px; }
#view-div-s2 p { width: 100%; height: auto; position: relative; float: left; margin-top: -11px; font-size: 16px; color: #000; text-align: left; padding: 0px 30px; font-weight: 400; }
#faixa-veiculo-s2 { width: 100%; height: auto; position: relative; float: left; margin-top: -10px; }
#view-veiculo-s2 { width: 90%; height: auto; position: relative; margin: auto; z-index: 20; }
#tipografica-veiculo-s2 { width: 100%; height: 230px; position: absolute; top: 48%; margin-top: -23px; overflow: hidden; }
#faixa-tipografia-int { width: 6000px; height: 100%; position: absolute; left: 0px; font-size: 145px; color: #F6F6F6; font-weight: 900; text-transform: uppercase; }
#cta-ofertas-s2 { width: 249px; height: auto; position: relative; margin: auto; padding: 14px 50px 14px 20px; background-color: #3F5C87; color: #fff; font-size: 17px; text-align: center; border-radius: 100px; margin-top: 10px; }
.icn-oferta { width: 30px; height: 30px; position: absolute; right: 18px; top: 10px; background: url('../img/offer-icn.png'); background-size: 30px; }
#faixa-selecao-cores { width: 100%; height: auto; position: relative; float: left; margin-top: 24px; }
.item-cor { width: 25px; height: 25px; background-color: #dadada; border-radius: 50%; cursor: pointer; border: 0px solid #dadada; transition: linear 0.1s; -mos-transition: linear 0.1s; -ms-transition: linear 0.1s; -o-transition: linear 0.1s; }

/* ==========================================================================
   Inicio S3
   ========================================================================== */
#div-s3 { width: 100%; height: auto; position: relative; float: left; margin-top: 40px; padding-bottom: 20px; }
#view-div-s3 { width: 100%; height: auto; left: 0%; position: relative; float: left; margin-left: 0px; background-color: #1F418F; border-radius: 40px 40px 0px 0px; padding: 30px 20px 130px 30px; }
#div-s3-conteud-d { width: 100%; height: auto; position: relative; float: left; }
#div-s3-conteud-d h3 { width: 90%; height: auto; position: relative; float: left; margin-top: 30px; color: #fff; font-size: 24px; font-weight: 500; line-height: 30px; }
#div-s3-conteud-d p { width: 100%; height: auto; position: relative; float: left; margin-top: 0px; line-height: 25px; color: #fff; font-size: 16px; font-weight: 1200; padding-right: 20px; }
#div-conteudo-d-e { width: 100%; height: auto; position: relative; float: left; }
.item-bloco-conteudo-s3 { width: 50%; height: 90px; position: relative; float: left; padding-top: 0px; }
.item-bloco-conteudo-s3 h4 { width: 100%; height: auto; position: relative; float: left; font-size: 17px; color: #fff; font-weight: 600; }
.item-bloco-conteudo-s3 p { width: 100%; height: auto; position: relative; float: left; margin-top: -9px; font-size: 17px; color: #fff; font-weight: 300; }

/*Inicio ofertas*/
#faixa-ofertas { width: 100%; height: auto; position: relative; float: left; background-color: #fff; overflow: hidden; border-radius: 40px 40px 0px 0px; z-index: 400; margin-top: -110px; }
#view-faixa-ofertas { width: 100%; height: auto; position: relative; margin: auto; }
#faixa-chamada-ofertas h3 { width: 70%; height: auto; position: relative; float: left; margin-top: 0px; margin-right: 100px; line-height: 27px; font-weight: 600; font-size: 24px; padding: 0px 30px; }
#faixa-chamada-ofertas p { width: 100%; height: auto; position: relative; float: left; margin-top: -4px; font-size: 16px; color: #000000; padding-right: 950px; padding: 0px 130px 0px 30px; }
#controles-slider-ofertas { width: 250px; height: 90px; position: absolute; right: 0px; bottom: 0px; display: none; }

/*Inicio ofertas*/
#faixa-ofertas { width: 100%; height: auto; position: relative; float: left; background-color: #fff; overflow: hidden; border-radius: 40px 40px 0px 0px; z-index: 400; margin-top: -110px; }
#view-faixa-ofertas { width: 100%; height: auto; position: relative; margin: auto; }
#faixa-chamada-ofertas h3 { width: 70%; height: auto; position: relative; float: left; margin-top: 0px; margin-right: 100px; line-height: 27px; font-weight: 600; font-size: 24px; padding: 0px 30px; text-align: left; }
#faixa-chamada-ofertas p { width: 100%; height: auto; position: relative; float: left; margin-top: -4px; font-size: 16px; color: #000000; padding-right: 950px; padding: 0px 130px 0px 30px; text-align: left; }
#controles-slider-ofertas { width: 250px; height: 90px; position: absolute; right: 0px; bottom: 0px; display: none; }

  /* ==========================================================================
     Faixa ofertas
     ========================================================================== */
  #faixa-ofertas { width: 100%; height: auto; position: relative; float: left; background-color: #fff; overflow: hidden; border-radius: 40px 40px 0px 0px; z-index: 400; margin-top: -110px; margin-bottom: 0px; padding: 0px 0px 10px 0px; }

  /*card oferta*/
  .card-oferta { width: 300px; height: auto !important; position: relative; float: left; margin-left: 40px; margin-right: -30px !important; padding-top: 30px; padding-bottom: 45px; background-color: #F1F7FC; border-radius: 14px; }
  .infos-veiculo-oferta { width: 80%; height: 150px; position: relative; float: left; margin-top: 10px; padding: 0px 30px; }
  .sobre-oferta-veiculo { width: 100%; height: auto; position: relative; float: left; font-size: 15px; line-height: 23px; color: #000; padding-right: 40px; }
  .faixa-tag-validade-oferta { width: 100%; height: auto; position: relative; float: left; top: 0px; bottom: 84px; }
  .faixa-cta-oferta { width: 100%; height: auto; position: relative; float: left; margin-top: 47px; margin-bottom: -39px; bottom: 27px; }
  .cta-solicitar-contato { width: 200px; height: auto; position: relative; margin: auto; padding: 12px 22px; background-color: #3F5C87; color: #fff; font-size: 17px; text-align: center; font-weight: 300; border-radius: 100px; cursor: pointer; opacity: 1 !important; }

  /* ==========================================================================
     Inicio Banner galeria video
     ========================================================================== */
  #div-s4 { width: 100%; height: auto; position: relative; float: left; border-radius: 40px 40px 0px 0px; overflow: hidden; margin-top: -79px; z-index: 600; }
  #conteudo-banner-galeria { width: 100%; height: auto; position: relative; float: left; z-index: 90; margin-top: -90px; padding-bottom: 36px; background-color: #2A3C5A; z-index: 600; }
  #view-conteudo-banner { width: 100%; height: auto; position: relative; margin: auto; }
  #view-conteudo-banner h3 { width: 85%; height: auto; position: relative; float: left; margin-top: -70px; margin-bottom: 40px; font-size: 30px; color: #fff; font-weight: 600; padding: 0px 30px; }
  #view-conteudo-banner p { width: 100%; height: auto; position: relative; float: left; margin-top: -28px; font-size: 16px; color: #fff; font-weight: 300; padding: 0px 30px; }
  #faixa-cta-galeria { width: 100%; height: auto; position: relative; float: left; margin-top: 4px; padding: 0px 30px; }
  #cta-video-galeria { width: auto; height: auto; position: relative; float: left; padding: 11px 18px 11px 58px; background-color: #4160BE; font-size: 16px; color: #fff; border-radius: 100px; cursor: pointer; }
  .icn-play { width: 30px; height: 30px; position: absolute; left: 17px; top: 8px; background: url('../img/icn-play.png'); background-size: 30px; }
  #controles-galeria { width: 200px; height: auto; position: absolute; right: 0px; display: none; }

  #faixa-galeria { width: 100%; height: 200px; position: relative; float: left; overflow: hidden; }
  .item-foto-galeria { width: 50% !important; height: 200px !important; position: relative; float: left; overflow: hidden; }
  .img-galeria { width: 400px; height: 400px; position: absolute; left: 50%; top: 50%; margin-left: -200px; margin-top: -102px; }

  /*Inicio como é comprar com a jorlan*/
  #div-s7 { width: 100%; height: 540px; position: relative; float: left; overflow: hidden; margin-top: -50px; padding-top: 50px; }
  #view-div-s7 { width: 100%; height: auto; position: relative; margin: auto; padding: 0px 20px; }
  #conteudo-e-s7 { width: 100%; height: auto; position: relative; float: left; }
  #conteudo-e-s7 h3 { width: 60%; height: auto; position: relative; float: left; font-size: 27px; color: #000; font-weight: 700; margin-top: 40px; }
  #conteudo-e-s7 p { width: 80%; height: auto; position: relative; float: left; margin-top: -10px; font-size: 17px; color: #000; font-weight: 400; }
  .nome-depoimento { width: 100%; height: auto; position: relative; float: left; font-size: 19px; color: #fff; font-weight: 600; }
  .depoimento { width: 100%; height: auto; position: relative; float: left; margin-top: 10px; font-size: 14px; color: #fff; font-weight: 300; }
  #faixa-controles-depoimentos { width: 100%; height: auto; position: relative; float: left; margin-top: 30px; display: none; }

  /*Ornamento depoimentos*/
  #ornamento-depoimentos { width: 60%; height: 650px; position: absolute; margin-top: -190px; right: -150px; z-index: 90; display: none; }
  #bloco-imagens-ornamento-depoimentos { width: 54%; height: 740px; position: absolute; top: -50px; right: 0px; z-index: 90; overflow: hidden; z-index: 390; display: none; }

  .item-card-depoimento { width: 240px !important; height: 140px !important; position: relative; float: left; margin-left: 20px; margin-right: -15px; border-radius: 15px; background-color: #001C43; padding: 30px 30px; }


  /* ==========================================================================
  Faixa formulário proposta
  ========================================================================== */
  #faixa-formulario-proposta { width: 100%; height: auto; position: relative; float: left; background-color: #1F418F; border-radius: 40px 40px 0px 0px; margin-top: -40px; padding-bottom: 30px; }
  #view-formulario-proposta { width: 100%; height: 100%; position: relative; margin: auto; }
  #chamda-form-proposta { width: 100%; height: 100%; position: relative; float: left; padding: 0px 30px; }
  #chamda-form-proposta h2 { width: 100%; height: auto; position: relative; float: left; margin-top: 50px; font-size: 24px; color: #fff; font-weight: 600; }
  #chamda-form-proposta p { width: 100%; height: auto; position: relative; float: left; margin-top: -10px; font-size: 16px; font-weight: 300; color: #fff; }
  #div-box-formulario { width: 100%; height: 100%; position: relative; float: left; padding-left: 30px; padding-right: 30px; }
  #box-form-int-negociacao { width: 100%; height: auto; position: relative; float: left; margin-top: 10px; }
  #box-form-int-negociacao input { width: 100%; height: auto; position: relative; float: left; margin-right: 1%; padding: 16px 20px; color: #fff; font-size: 18px; background-color: #F1F7FC; border-radius: 10px; box-sizing: border-box; }
  #faixa-cta-form-negociacao { width: 100%; height: auto; position: relative; float: left; margin-top: -5px; }
  #cta-formulario-negociacao { width: 100%; height: auto; position: relative; float: left; padding: 14px 70px 14px 25px; background-color: #4C77DC; color: #fff; font-size: 18px; border-radius: 80px; border: 1px solid #7C98DC; cursor: pointer; }
  #faixa-cta-form-negociacao p { width: 90%; height: auto; position: relative; float: left; margin-left: 15px; margin-top: 16px; font-size: 13px; color: #fff; }

  /* ==========================================================================
     Lojas
     ========================================================================== */
  #div-lojas { width: 100%; height: auto; position: relative; float: left; margin-top: 70px; }
  #view-div-lojas { width: 100%; height: auto; position: relative; margin: auto; }
  #conteudo-lojas { width: 100%; height: auto; position: relative; float: left; background-color: #fff; padding: 0px 30px; }
  #conteudo-lojas h2 { width: 100%; height: auto; position: relative; float: left; margin-top: -30px; font-size: 24px; color: #000; font-weight: 600; }
  #conteudo-lojas p { width: 100%; height: auto; position: relative; float: left; margin-top: -14px; font-size: 17px; color: #000; }
  #controle-lojas { width: 100%; height: auto; position: relative; float: left; display: none; }

  /*Cards lojas*/
  #div-cards-lojas { width: 100%; height: auto; position: relative; float: left; right: unset; top: unset; overflow: hidden; margin-top: 10px; }

  /*Item card loja*/
  .item-card-loja { width: 270px !important; height: 390px !important; position: relative; float: left; margin-right: -20px; background-color: #10213F; border-radius: 18px; overflow: hidden; margin-left: 30px; }
  .bloco-infos-card-loja { width: 100%; height: auto; position: relative; float: left; margin-top: -20px; padding: 20px 20px; }
  .bloco-infos-card-loja h2 { width: 60%; height: auto; position: relative; float: left; font-size: 19px; color: #fff; font-weight: 500; }
  .bloco-infos-card-loja p { width: 78%; height: auto; position: relative; float: left; margin-top: -15px; font-size: 14px; color: #fff; font-weight: 300; }
  .cta-card-loja { width: auto; height: auto; position: relative; float: left; margin-left: 20px; padding: 10px 50px 10px 20px; background-color: #3F5C87; color: #fff; border: 1px solid #5C83BE; border-radius: 100px; cursor: pointer; }

  #div-rodape { width: 100%; height: auto; position: relative; float: left; margin-top: 60px; padding-bottom: 130px; background-color: #f7f9fc; border-radius: 40px 40px 0px 0px; z-index: 999; }
  #view-div-rodape { width: 100%; height: auto; position: relative; margin: auto; }
  #faixa-logo-jorlan-rodape { width: 100%; height: auto; position: relative; float: left; margin-top: 50px; }
  #logo-jorlan-rodape { width: 270px; height: 34px; position: relative; margin: auto; background: url('../img/logo-jorlan-rodape.png'); background-size: 270px; }
  #view-div-rodape p { width: 100%; height: auto; position: relative; float: left; margin-top: -5px; font-size: 13px; color: #000; text-align: center; padding: 0px 30px; }


  /*Ínicio barra de veículos */
  #barra-categoria-veiculos { width: 800px; height: auto; position: relative; margin: auto; display: none; }
  #barra-veiculos-slider { width: 490px; height: 40px; position: relative; margin: auto; display: block; overflow: hidden; }
  
  #toolbar-barra-veiculos { width: 100%; height: auto; position: relative; float: left; margin-top: 40px; padding: 0px 0px; }

  .item-cta-veiculo { width: 120px; height: auto; position: relative; float: left; text-align: center; font-size: 13px; color: #000; padding: 10px 0px; border-radius: 40px; cursor: pointer; margin-right: 10px; }
  #barra-veiculos { width: 100%; height: 380px; position: fixed; bottom: -1500px; z-index: 9999; background-color: #fff; border-radius: 30px 30px 0px 0px; -webkit-box-shadow: 0px 0px 35px 0px rgba(0, 0, 0, 0.26); -moz-box-shadow: 0px 0px 35px 0px rgba(0, 0, 0, 0.26); -moz-box-shadow: 0px 0px 35px 0px rgba(0, 0, 0, 0.26); -ms-box-shadow: 0px 0px 35px 0px rgba(0, 0, 0, 0.26); -o-box-shadow: 0px 0px 35px 0px rgba(0, 0, 0, 0.26); box-shadow: 0px 0px 35px 0px rgba(0, 0, 0, 0.26); }
  .fechar-barra-veiculos { width: 45px; height: 45px; position: relative; float: right; margin-right: 17px; margin-top: -110px; background-color: #000; border-radius: 50%; cursor: pointer; }
  #barra-veiculos-slider { width: 100%; height: 40px; position: relative; float: left; margin: unset; margin-left: 0%; margin-top: 26px; padding: 0px 50px; display: block;        /* overflow: hidden; */ background-color: unset; overflow: unset; }

  #barra-veiculos { width: 100%; height: 380px; position: fixed; bottom: -1500px; z-index: 9999; background-color: #fff; border-radius: 20px 20px 0px 0px; -webkit-box-shadow: 0px 0px 35px 0px rgba(0, 0, 0, 0.26); -moz-box-shadow: 0px 0px 35px 0px rgba(0, 0, 0, 0.26); -moz-box-shadow: 0px 0px 35px 0px rgba(0, 0, 0, 0.26); -ms-box-shadow: 0px 0px 35px 0px rgba(0, 0, 0, 0.26); -o-box-shadow: 0px 0px 35px 0px rgba(0, 0, 0, 0.26); box-shadow: 0px 0px 35px 0px rgba(0, 0, 0, 0.26); }
  .fechar-barra-veiculos { width: 45px; height: 45px; position: relative; float: right; margin-top: -110px; background-color: #000; border-radius: 50%; cursor: pointer; }
  #barra-veiculos-slider { width: 90%; height: 40px; position: relative; float: left; margin: unset; margin-left: 5%; margin-top: 26px; padding: 0px 50px; display: block; overflow: unset; background-color: unset; }

  .item-cta-veiculo { width: 160px; height: auto; position: relative; float: left; text-align: center; font-size: 13px; color: #000; padding: 10px 0px; border-radius: 40px; cursor: pointer; margin-right: 10px; }
  .atv-cta-veiculo{background-color:#0C4CB0; color: #fff;}

  .ctrl-veiculo-slider { width: 40px; height: 40px; position: absolute; left: -19px; top: 50%; margin-top: -20px; background: url('../img/ctrr-slider.png'); background-size: 40px; z-index: 90; cursor: pointer; background-color: #fff; border-radius: 10px; z-index: 999; }
  .ctrr-veiculo-slider { width: 40px; height: 40px; position: absolute; right: -19px; top: 50%; margin-top: -20px; background: url('../img/ctrl-slider.png'); background-size: 40px; z-index: 90; cursor: pointer; background-color: #fff; border-radius: 10px; z-index: 999; }

  .ctrl-veiculo { width: 40px; height: 40px; position: absolute; left: 20px; top: 50%; margin-top: 25px; background: url('../img/ctrr.png'); background-size: 40px; z-index: 90; cursor: pointer; background-color: #fff; border-radius: 10px; }
  .ctrr-veiculo { width: 40px; height: 40px; position: absolute; right: 20px; top: 50%; margin-top: 25px; background: url('../img/ctrl.png'); background-size: 40px; z-index: 90; cursor: pointer; background-color: #fff; border-radius: 10px; }
  
  #txt-toolbar-veiculos { width: auto; height: auto; position: relative; float: left; margin-left: 30px; font-size: 28px; font-weight: 600; color: #1F418F; }
  #faixa-veiculos-janela { width: 100%; height: auto; position: relative; float: left; margin-left: %; margin-top: 40px; overflow: hidden; padding: 0px 0px; }
  
   
  /* Início seleção formulário */
  #janela-selecao-formularios { width: 90%; height: 581px; position: fixed; left: 5%; margin-left: -0px; top: 250%; margin-top: -335px; background-color: #fff; border-radius: 20px; z-index: 9999; opacity: 0;}
  #janela-selecao-formularios-header h2 { width: 70%; height: auto; position: relative; float: left; margin-top: 35px; font-size: 18px; color: #000; font-size: 500; font-weight: 500; padding: 0px 10px; }
  .fechar-formulario-selecao { width: 45px; height: 45px; position: relative; float: right; margin-top: 29px; background-color: #000; border-radius: 50%; cursor: pointer; }
  .item-btn-selecao-formulario { width: 98%; height: 107px; position: relative; float: left; margin-left: 0.75%; margin-right: 0.75%; margin-bottom: 10px; background-color: #F1F7FC; border-radius: 10px; cursor: pointer; }
  .icn-selecao-formulario-int { width: 30px; height: 30px; position: absolute; top: 50%; left: 50%; margin-left: -15px; margin-top: -15px; }
  .nome-form { width: 100%; height: auto; position: relative; float: left; margin-top: 18px; padding: 0px 0px; color: #000; font-size: 19px; font-weight: 600; }
  #janela-selecao-formularios { width: 90%; height: 581px; position: fixed; left: 5%; margin-left: -0px; top: 250%; margin-top: -335px; background-color: #fff; border-radius: 20px; z-index: 9999 !important; opacity: 0; }

  /* Ínicio formulários */
  #box-formulario-usado-entrada { width: 90%; height: 605px; position: fixed; left: 5%; top: 250%; margin-left: 0px; margin-top: -320px; background-color: #fff; border-radius: 20px; z-index: 99999; overflow-y: scroll; padding-bottom: 40px; }
  .campo-label-c3 { width: 49%; height: auto; position: relative; float: left; padding: 0px 0px; margin-bottom: 4px; margin-right: 1% !important; }
  .campo-label-c3b { width: 24%; height: auto; position: relative; float: left; padding: 0px 0px; margin-bottom: 4px; margin-right: 1% !important; }
  .campo-label-c3c { width: 60%; height: auto; position: relative; float: left; padding-top: 0px; margin-bottom: 4px; margin-top: -24px; margin-bottom: 20px; margin-left: 1%; margin-right: 1% !important; }
  .label-campo { width: 100%; height: auto; position: relative; float: left; font-size: 11px; color: #416078; padding-left: 14px; margin-bottom: 5px; }
  .fix-terms { top: 5px; }
  
  /* Formulário financiamento */
  #box-formulario-financiado { width: 90%; height: 660px; position: fixed; left: 5%; top: 250%; margin-left: 0px; margin-top: -340px; background-color: #fff; border-radius: 20px; z-index: 99999; opacity: 0; overflow-y: scroll; }
  .campo-label-c3 { width: 49%; height: auto; position: relative; float: left; padding: 0px 0px; margin-bottom: 4px; margin-right: 1% !important; }
  .cta-formulario { width: 100%; height: auto; position: relative; float: left; margin-top: 30px; margin-bottom: 40px; }
  .campo-label-c3d { width: 95%; height: auto; position: relative; float: left; padding-top: 0px; margin-bottom: 21px; margin-left: 1%; margin-top: -15px; }


}


@media only screen  
and (min-width:100px) 
and (max-width:420px) {


/* ==========================================================================
   Ínicio home
   ========================================================================== */
#ornamento-home { width: 400px; height: 283px; position: absolute; left: -50px; top: -70px; background: url('../img/bolinhas.png'); background-size: 400px; }
#view-home { width: 100%; height: 100%; position: relative; margin: auto; overflow: scroll; z-index: 90; padding: 0px 22px; }
#conteudo-view-home { width: 100%; height: 100%; position: relative; float: left; }
#ornamento-fotos-home { width: 40%; height: 100%; position: relative; float: left; display: none; }
#faixa-conteudo-home { width: 100%; height: auto; position: absolute; top: 50px; margin-top: unset; }
#faixa-logo-home { width: 100%; height: auto; position: relative; float: left; }
#logo-int-home { width: 230px; height: 22px; left: 50%; position: relative; float: left; margin-left: -115px; background: url('../img/logo-jorlan-rodape.png'); background-size: 230px; }
#faixa-conteudo-home h1 { width: 100%; height: auto; position: relative; float: left; text-align: center; font-size: 20px; color: #49667F; font-weight: 600; margin-top: 25px; }
#faixa-conteudo-home p { width: 100%; height: auto; position: relative; float: left; text-align: center; margin-top: 1px; font-size: 14px; color: #3D3D3D; padding-right: 0px; }
#faixa-lojas { width: 100%; height: auto; position: relative; float: left; margin-top: 4px; padding-bottom: 50px; }
.item-loja { width: 100%; height: auto; position: relative; float: left; padding: 16px 20px; }
.legenda-loja { width: 100%; height: auto; position: relative; float: left; font-size: 23px; color: #361D1E; text-align: center; }
.foto-loja { width: 100%; height: 206px; position: relative; float: left; margin-top: 10px; border-radius: 20px; overflow: hidden; }

/*Inicio ofertas*/
.img-carro-lp { width: 100%; height: auto; position: relative; float: left; padding: 0px 50px; }
.sobre-lp-lista { width: 100%; height: auto; position: relative; float: left; padding: 0px 20px; }
.nome-lp { width: 100%; height: auto; position: relative; float: left; margin-top: 20px; font-size: 18px; color: #000000; padding: 0px 20px; font-weight: 600; }
.ofertas-lp-lista { width: 100%; height: auto; position: relative; float: left; font-size: 14px; color: #000; padding: 0px 20px; }
.icone-lp { width: 30px; height: 30px; position: absolute; left: 50%; margin-left: -20px; top: unset; margin-top: unset; background: url('../img/sete-p.png'); background-size: 30px; bottom: 36px; }
.item-lp-selecao:hover .icone-lp {background: url('../img/seta-b.png');  background-size: 30px;}
.faixa-fix-lps {height: 10px;}

/*Barra de veículos*/
#barra-veiculos { width: 100%; height: 350px; position: fixed; bottom: -1500px; z-index: 9999; background-color: #fff; border-radius: 20px 20px 0px 0px; -webkit-box-shadow: 0px 0px 35px 0px rgba(0, 0, 0, 0.26); -moz-box-shadow: 0px 0px 35px 0px rgba(0, 0, 0, 0.26); -moz-box-shadow: 0px 0px 35px 0px rgba(0, 0, 0, 0.26); -ms-box-shadow: 0px 0px 35px 0px rgba(0, 0, 0, 0.26); -o-box-shadow: 0px 0px 35px 0px rgba(0, 0, 0, 0.26); box-shadow: 0px 0px 35px 0px rgba(0, 0, 0, 0.26); }
#toolbar-barra-veiculos { width: 100%; height: auto; position: relative; float: left; margin-top: 40px; padding: 0px 0px; }
#txt-toolbar-veiculos { width: auto; height: auto; position: relative; float: left; margin-left: 30px; margin-top: -7px; font-size: 22px; font-weight: 600; color: #1F418F; }
#barra-veiculos-slider { width: 100%; height: 40px; position: relative; float: left; margin: unset; margin-left: 0%; margin-top: 26px; padding: 0px 0px; display: block; overflow: unset; background-color: unset; }
.fechar-barra-veiculos { width: 40px; height: 40px; position: relative; float: right; margin-top: -101px; background-color: #000; border-radius: 50%; cursor: pointer; margin-right: 20px; }
#faixa-veiculos-janela { width: 100%; height: auto; position: relative; float: left; margin-left: 0%; margin-top: 40px; overflow: hidden; padding: 0px 0px; }


#ancora-ofertas{width: 1px; height: 1px; position: absolute; left: 0px; top: -70px;}

.desktop { display: none; }
.tablet { display: none; }
.mobile { display: block; }

#cta-wpp-topo { display: none; }
#cta-ofertas-topo{display: none;}

#cta-wpp-mobile { width: 180px; height: auto; position: fixed; right: 20px; margin-right: unset; bottom: 44px; padding: 15px 30px 15px 60px; border-radius: 150px; border: 0.3px solid #64E877; color: #fff; font-size: 20px; z-index: 1999; }
#icn-wpp-mobile{width: 34px; height: 34px; position: absolute; left: 16px; top: 11px; background: url('../img/wpp-icn.png'); background-size: 34px;}

#cta-ofertas-rodape { width: auto; height: auto; position: fixed; left: 30px; bottom: 44px; padding: 43px 30px 15px 30px; border-radius: 150px; border: 0.3px solid #44618C; color: #fff; font-size: 20px; display: block; z-index: 9999; }
#icn-ofertas-rodape{width:34px;height:34px;position:absolute;left:12px;top:13px;background:url('../img/icn-ofertas.png');background-size:34px;}

#selecao-int-cores { width: 90%; height: auto; position: relative; margin: auto; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 20px; }
.item-cor { width: 20px; height: 20px; background-color: #dadada; border-radius: 50%; cursor: pointer; border: 0px solid #dadada; transition: linear 0.1s; -mos-transition: linear 0.1s; -ms-transition: linear 0.1s; -o-transition: linear 0.1s; }

#barra-menu-topo { width: 100%; height: 150px; position: fixed; top: 0px; padding-top: 30px; z-index: 9999; }

#menu-topo { width: 320px; height: 64px; position: relative; margin: auto; border-radius: 150px; overflow: hidden; border: 0.3px solid #44618C; }
#logo-jorlan {
width: 189px;
height: 20px;
position: absolute;
left: 50%;
margin-left: -66px;
top: 23px;
background: url('../img/logo-jorlan.png');
background-size: 133px;
background-repeat: no-repeat;
}
#tag-veiculos-menu-topo { width: 132px; height: 73px; position: absolute; right: 0px; background-color: #3F5C86; }
#txt-veiculos-menu-topo { width: 100%; height: auto; position: relative; float: left; margin-top: 19px; font-size: 18px; color: #fff; text-align: center; }
#icn-menu-topo { width: 40px; height: 40px; position: absolute; left: -18px; top: 11px; background-color: #3F5C86; border-radius: 50%; }
#icn-int-m-topo { width: 24px; height: 24px; position: absolute; left: 50%; top: 50%; margin-top: -12px; margin-left: -14px; background: url('../img/icn-wheel.png') no-repeat center; background-size: 24px; -webkit-transition: -webkit-transform 0.1s linear; -moz-transition: -moz-transform 0.1s linear; -ms-transition: -ms-transform 0.1s linear; -o-transition: -o-transform 0.1s linear; transition: transform 0.1s linear; }

/*Super banner mobile*/
#mascara-banner { width: 100%; height: 400px; position: absolute; left: 0px; bottom: 30px; z-index: 30; background: url('../img/mascara-2.png'); background-repeat: repeat-x; }
#div-banner-topo-lp { width: 100%; height: auto; padding-bottom: 80px; position: relative; float: left; overflow: hidden; }

#chamada-banner-topo { width: 100%; height: auto; position: absolute; bottom: 130px; z-index: 999; }
#chamada-banner-topo h1 { width: 100%; height: auto; position: absolute; text-align: center; bottom: 69px; font-size: 35px; color: #fff; font-weight: 600; }
#chamada-banner-topo p { width: 100%; height: auto; position: absolute; bottom: 56px; font-size: 15px; color: #fff; text-align: center; font-weight: 300; }

#div-faixa-ofertas-imperdiveis { width: 320px; height: auto; position: relative; left: 50%; float: left; margin-left: -160px; margin-top: -175px; text-align: left; font-size: 16px; padding: 15px 0px; color: #000000; background-color: #FFBF00; font-weight: 300; z-index: 999; border-radius: 11px; padding-left: 115px; padding-right: 10px; overflow: hidden; }
#tag-veiculo { width: 98px; height: 74px; position: absolute; left: 0px; margin-left: 0px; top: 0px; margin-top: 0px; background-color: #3F5C87; border-radius: 0px 0px 0px 0px; overflow: hidden; }
#icn-veiculo-tag { width: 60px; height: 60px; position: absolute; left: -35%; margin-left: -30px; top: 67%; margin-top: -45px; background: url('../img/icn-car-tag.png'); background-size: 60px; -webkit-animation: moverTag 10s infinite ease-in-out; -moz-animation: moverTag 10s infinite ease-in-out; -ms-animation: moverTag 10s infinite ease-in-out; -o-animation: moverTag 10s infinite ease-in-out; animation: moverTag 10s infinite ease-in-out; }

/*Inicio cores veiculo*/
#div-s2 { width: 100%; height: auto; position: relative; float: left; background-color: #fff; border-radius: 40px 40px 0px 0px; margin-top: -35px; z-index: 90; }
#view-div-s2 { width: 100%; height: auto; position: relative; margin: auto;    /* border-radius: 10px 10px 0px 0px; */ }
#view-div-s2 h2 { width: 100%; height: auto; position: relative; float: left; margin-top: 50px; font-size: 20px; color: #000; text-align: left; font-weight: 600; padding: 0px 30px; }
#view-div-s2 p { width: 100%; height: auto; position: relative; float: left; margin-top: -11px; font-size: 14px; color: #000; text-align: left; padding: 0px 30px; font-weight: 400; }
#faixa-veiculo-s2 { width: 100%; height: auto; position: relative; float: left; margin-top: -10px; }
#view-veiculo-s2 { width: 84%; height: auto; position: relative; margin: auto; z-index: 20; }
#tipografica-veiculo-s2 { width: 100%; height: 230px; position: absolute; top: 48%; margin-top: -23px; overflow: hidden; z-index: -1; }
#faixa-tipografia-int { width: 6000px; height: 100%; position: absolute; left: 0px; font-size: 145px; color: #F6F6F6; font-weight: 900; text-transform: uppercase; }
#cta-ofertas-s2 { width: 249px; height: auto; position: relative; margin: auto; padding: 14px 50px 14px 20px; background-color: #3F5C87; color: #fff; font-size: 17px; text-align: center; border-radius: 100px; margin-top: 10px; }
.icn-oferta { width: 30px; height: 30px; position: absolute; right: 18px; top: 10px; background: url('../img/offer-icn.png'); background-size: 30px; }
#faixa-selecao-cores { width: 100%; height: auto; position: relative; float: left; margin-top: 24px; }
.item-cor { width: 25px; height: 25px; background-color: #dadada; border-radius: 50%; cursor: pointer; border: 0px solid #dadada; transition: linear 0.1s; -mos-transition: linear 0.1s; -ms-transition: linear 0.1s; -o-transition: linear 0.1s; }

/* ==========================================================================
   Inicio S3
   ========================================================================== */
#div-s3 { width: 100%; height: auto; position: relative; float: left; margin-top: 40px; padding-bottom: 20px; }
#view-div-s3 { width: 100%; height: auto; left: 0%; position: relative; float: left; margin-left: 0px; background-color: #1F418F; border-radius: 40px 40px 0px 0px; padding: 30px 20px 130px 30px; }
#div-s3-conteud-d { width: 100%; height: auto; position: relative; float: left; }
#div-s3-conteud-d h3 { width: 90%; height: auto; position: relative; float: left; margin-top: 30px; color: #fff; font-size: 22px; font-weight: 500; line-height: 27px; }
#div-s3-conteud-d p { width: 100%; height: auto; position: relative; float: left; margin-top: 0px; line-height: 22px; color: #fff; font-size: 16px; font-weight: 1200; padding-right: 20px; }

#div-conteudo-d-e { width: 100%; height: auto; position: relative; float: left; }
.item-bloco-conteudo-s3 { width: 50%; height: 90px; position: relative; float: left; padding-top: 0px; }
.item-bloco-conteudo-s3 h4 { width: 100%; height: auto; position: relative; float: left; font-size: 17px; color: #fff; font-weight: 600; }
.item-bloco-conteudo-s3 p { width: 100%; height: auto; position: relative; float: left; margin-top: -9px; font-size: 17px; color: #fff; font-weight: 300; }

/*Inicio ofertas*/
#faixa-ofertas { width: 100%; height: auto; position: relative; float: left; background-color: #fff; overflow: hidden; border-radius: 40px 40px 0px 0px; z-index: 400; margin-top: -110px; }
#view-faixa-ofertas { width: 100%; height: auto; position: relative; margin: auto; }
#faixa-chamada-ofertas h3 { width: 70%; height: auto; position: relative; float: left; margin-top: 0px; margin-right: 100px; line-height: 27px; font-weight: 600; font-size: 24px; padding: 0px 30px; }
#faixa-chamada-ofertas p { width: 100%; height: auto; position: relative; float: left; margin-top: -4px; font-size: 16px; color: #000000; padding-right: 950px; padding: 0px 130px 0px 30px; }
#controles-slider-ofertas { width: 250px; height: 90px; position: absolute; right: 0px; bottom: 0px; display: none; }

/*Inicio ofertas*/
#faixa-ofertas { width: 100%; height: auto; position: relative; float: left; background-color: #fff; overflow: hidden; border-radius: 40px 40px 0px 0px; z-index: 400; margin-top: -110px; }
#view-faixa-ofertas { width: 100%; height: auto; position: relative; margin: auto; }
#faixa-chamada-ofertas h3 { width: 80%; height: auto; position: relative; float: left; margin-top: 0px; margin-right: 100px; line-height: 27px; font-weight: 600; font-size: 22px; padding: 0px 30px; text-align: left; }
#faixa-chamada-ofertas p { width: 100%; height: auto; position: relative; float: left; margin-top: -4px; font-size: 16px; color: #000000; padding-right: 950px; padding: 0px 55px 0px 30px; text-align: left; }
#controles-slider-ofertas { width: 250px; height: 90px; position: absolute; right: 0px; bottom: 0px; display: none; }

/* ==========================================================================
   Faixa ofertas
   ========================================================================== */
#faixa-ofertas { width: 100%; height: auto; position: relative; float: left; background-color: #fff; overflow: hidden; border-radius: 0px 0px 0px 0px; z-index: 400; margin-top: -140px; padding: 30px 0px 0px 0px; }

/*card oferta*/
.card-oferta { width: 300px; height: auto !important; position: relative; float: left; margin-left: 40px; margin-right: -30px !important; padding-top: 30px; padding-bottom: 35px; background-color: #F1F7FC; border-radius: 14px; }
.nome-veiculo-card { width: 100%; height: 40px; position: relative; float: left; margin-top: 10px; font-size: 16px; font-weight: 600; color: #000000; }
.infos-veiculo-oferta { width: 80%; height: 150px; position: relative; float: left; margin-top: 10px; padding: 0px 30px; }
.sobre-oferta-veiculo { width: 100%; height: auto; position: relative; float: left; font-size: 15px; line-height: 23px; color: #000; padding-right: 40px; }
.faixa-tag-validade-oferta { width: 100%; height: auto; position: relative; float: left; margin-top: 20px; bottom: unset; margin-bottom: 10px; }
.faixa-cta-oferta { width: 100%; height: auto; position: relative; float: left; margin-top: 40px; bottom: 27px; }
.cta-solicitar-contato { width: 200px; height: auto; position: relative; margin: auto; padding: 12px 22px; background-color: #3F5C87; color: #fff; font-size: 17px; text-align: center; font-weight: 300; border-radius: 100px; cursor: pointer; opacity: 1 !important; }

.icn-cta-oferta { width: 30px; height: 30px; position: absolute; right: 10px; top: 7px; border-radius: 50%; background: url('../img/phone.png'); background-size: 30px; }
.icn-cta-oferta-wpp{width: 30px; height: 30px; position: absolute; right: 10px; top: 7px;  border-radius: 50%; background:url('../img/phone-wpp.png'); background-size:30px;}
/* ==========================================================================
   Inicio Banner galeria video
   ========================================================================== */
#div-s4 { width: 100%; height: auto; position: relative; float: left; border-radius: 40px 40px 0px 0px; overflow: hidden; margin-top: -89px; z-index: 600; }
#conteudo-banner-galeria { width: 100%; height: auto; position: relative; float: left; z-index: 90; margin-top: -90px; padding-bottom: 36px; background-color: #2A3C5A; z-index: 600; }
#view-conteudo-banner { width: 100%; height: auto; position: relative; margin: auto; }
#view-conteudo-banner h3 { width: 85%; height: auto; position: relative; float: left; margin-top: -70px; margin-bottom: 40px; font-size: 30px; color: #fff; font-weight: 600; padding: 0px 30px; }
#view-conteudo-banner p { width: 100%; height: auto; position: relative; float: left; margin-top: -28px; font-size: 16px; color: #fff; font-weight: 300; padding: 0px 30px; }
#faixa-cta-galeria { width: 100%; height: auto; position: relative; float: left; margin-top: 4px; padding: 0px 30px; }
#cta-video-galeria { width: auto; height: auto; position: relative; float: left; padding: 11px 18px 11px 58px; background-color: #4160BE; font-size: 16px; color: #fff; border-radius: 100px; cursor: pointer; }
.icn-play { width: 30px; height: 30px; position: absolute; left: 17px; top: 8px; background: url('../img/icn-play.png'); background-size: 30px; }
#controles-galeria { width: 200px; height: auto; position: absolute; right: 0px; display: none; }



#faixa-galeria { width: 100%; height: 200px; position: relative; float: left; overflow: hidden; }
.item-foto-galeria { width: 50% !important; height: 200px !important; position: relative; float: left; overflow: hidden; }
.img-galeria { width: 400px; height: 400px; position: absolute; left: 50%; top: 50%; margin-left: -200px; margin-top: -102px; }

/*Inicio como é comprar com a jorlan*/
#div-s7 { width: 100%; height: 540px; position: relative; float: left; overflow: hidden; margin-top: -50px; padding-top: 50px; }
#view-div-s7 { width: 100%; height: auto; position: relative; margin: auto; padding: 0px 20px; }
#conteudo-e-s7 { width: 100%; height: auto; position: relative; float: left; }
#conteudo-e-s7 h3 { width: 60%; height: auto; position: relative; float: left; font-size: 27px; color: #000; font-weight: 700; margin-top: 40px; }
#conteudo-e-s7 p { width: 80%; height: auto; position: relative; float: left; margin-top: -10px; font-size: 17px; color: #000; font-weight: 400; }
.nome-depoimento { width: 100%; height: auto; position: relative; float: left; font-size: 19px; color: #fff; font-weight: 600; }
.depoimento { width: 100%; height: auto; position: relative; float: left; margin-top: 10px; font-size: 14px; color: #fff; font-weight: 300; }
#faixa-controles-depoimentos { width: 100%; height: auto; position: relative; float: left; margin-top: 30px; display: none; }

/*Ornamento depoimentos*/
#ornamento-depoimentos { width: 60%; height: 650px; position: absolute; margin-top: -190px; right: -150px; z-index: 90; display: none; }
#bloco-imagens-ornamento-depoimentos { width: 54%; height: 740px; position: absolute; top: -50px; right: 0px; z-index: 90; overflow: hidden; z-index: 390; display: none; }
.item-card-depoimento { width: 240px !important; height: 140px !important; position: relative; float: left; margin-left: 20px; margin-right: -15px; border-radius: 15px; background-color: #001C43; padding: 30px 30px; }

/* ==========================================================================
Faixa formulário proposta
========================================================================== */
#faixa-formulario-proposta { width: 100%; height: auto; position: relative; float: left; background-color: #1F418F; border-radius: 40px 40px 0px 0px; margin-top: -40px; padding-bottom: 30px; }
#view-formulario-proposta { width: 100%; height: 100%; position: relative; margin: auto; }
#chamda-form-proposta { width: 100%; height: 100%; position: relative; float: left; padding: 0px 30px; }
#chamda-form-proposta h2 { width: 100%; height: auto; position: relative; float: left; margin-top: 50px; font-size: 24px; color: #fff; font-weight: 600; }
#chamda-form-proposta p { width: 100%; height: auto; position: relative; float: left; margin-top: -10px; font-size: 16px; font-weight: 300; color: #fff; }
#div-box-formulario { width: 100%; height: 100%; position: relative; float: left; padding-left: 30px; padding-right: 30px; }
#box-form-int-negociacao { width: 100%; height: auto; position: relative; float: left; margin-top: 10px; }
#box-form-int-negociacao input { width: 100%; height: auto; position: relative; float: left; margin-right: 1%; padding: 16px 20px; color: #fff; font-size: 18px; background-color: #F1F7FC; border-radius: 10px; box-sizing: border-box; }
#faixa-cta-form-negociacao { width: 100%; height: auto; position: relative; float: left; margin-top: -5px; }
#cta-formulario-negociacao { width: 100%; height: auto; position: relative; float: left; padding: 14px 70px 14px 25px; background-color: #4C77DC; color: #fff; font-size: 18px; border-radius: 80px; border: 1px solid #7C98DC; cursor: pointer; }
#faixa-cta-form-negociacao p { width: 90%; height: auto; position: relative; float: left; margin-left: 15px; margin-top: 16px; font-size: 13px; color: #fff; }

/* ==========================================================================
   Lojas
   ========================================================================== */
#div-lojas { width: 100%; height: auto; position: relative; float: left; margin-top: 70px; }
#view-div-lojas { width: 100%; height: auto; position: relative; margin: auto; }
#conteudo-lojas { width: 100%; height: auto; position: relative; float: left; background-color: #fff; padding: 0px 30px; }
#conteudo-lojas h2 { width: 100%; height: auto; position: relative; float: left; margin-top: -30px; font-size: 24px; color: #000; font-weight: 600; }
#conteudo-lojas p { width: 100%; height: auto; position: relative; float: left; margin-top: -14px; font-size: 17px; color: #000; }
#controle-lojas { width: 100%; height: auto; position: relative; float: left; display: none; }

/*Cards lojas*/
#div-cards-lojas { width: 100%; height: auto; position: relative; float: left; right: unset; top: unset; overflow: hidden; margin-top: 10px; }

/*Item card loja*/
.item-card-loja { width: 270px !important; height: 360px !important; position: relative; float: left; margin-right: -20px; background-color: #10213F; border-radius: 18px; overflow: hidden; margin-left: 30px; }
.bloco-infos-card-loja { width: 100%; height: auto; position: relative; float: left; margin-top: -20px; padding: 20px 20px; }
.bloco-infos-card-loja h2 { width: 60%; height: auto; position: relative; float: left; font-size: 19px; color: #fff; font-weight: 500; }
.bloco-infos-card-loja p { width: 78%; height: auto; position: relative; float: left; margin-top: -15px; font-size: 14px; color: #fff; font-weight: 300; }
.cta-card-loja { width: auto; height: auto; position: relative; float: left; margin-left: 20px; padding: 10px 50px 10px 20px; background-color: #3F5C87; color: #fff; border: 1px solid #5C83BE; border-radius: 100px; cursor: pointer; }

#div-rodape { width: 100%; height: auto; position: relative; float: left; margin-top: 60px; padding-bottom: 120px; background-color: #f7f9fc; border-radius: 40px 40px 0px 0px; z-index: 999; }
#view-div-rodape { width: 100%; height: auto; position: relative; margin: auto; }
#faixa-logo-jorlan-rodape { width: 100%; height: auto; position: relative; float: left; margin-top: 50px; }
#logo-jorlan-rodape { width: 270px; height: 34px; position: relative; margin: auto; background: url('../img/logo-jorlan-rodape.png'); background-size: 270px; }

#view-div-rodape h3 { width: 100%; height: auto; position: relative; float: left; margin-top: 20px; color: #000; font-size: 20px; text-align: center; font-weight: 600; }
#view-div-rodape p { width: 100%; height: auto; position: relative; float: left; margin-top: -5px; font-size: 13px; color: #000; text-align: center; padding: 0px 30px; }

/*Ínicio barra de veículos */
#barra-categoria-veiculos { width: 800px; height: auto; position: relative; margin: auto; display: none; }
.fechar-barra-veiculos { width: 40px; height: 40px; position: relative; float: right; margin-top: -101px; background-color: #000; border-radius: 50%; cursor: pointer; }
#barra-veiculos-slider { width: 90%; height: 40px; position: relative; float: left; margin: unset; margin-left: 5%; margin-top: 26px; padding: 0px 0px; display: block; overflow: unset; background-color: unset; }
.item-cta-veiculo { width: 160px; height: auto; position: relative; float: left; text-align: center; font-size: 13px; color: #000; padding: 10px 0px; border-radius: 40px; cursor: pointer; margin-right: 10px; }
.atv-cta-veiculo { background-color: #0C4CB0; color: #fff; }
.ctrl-veiculo-slider { width: 40px; height: 40px; position: absolute; left: -9px; top: 50%; margin-top: -20px; background: url('../img/ctrr-slider.png'); background-size: 40px; z-index: 90; cursor: pointer; background-color: #fff; border-radius: 10px; z-index: 999; display: none; }
.ctrr-veiculo-slider { width: 40px; height: 40px; position: absolute; right: -9px; top: 50%; margin-top: -20px; background: url('../img/ctrl-slider.png'); background-size: 40px; z-index: 90; cursor: pointer; background-color: #fff; border-radius: 10px; z-index: 999; display: none; }
.ctrl-veiculo { width: 40px; height: 40px; position: absolute; left: 20px; top: 50%; margin-top: 25px; background: url('../img/ctrr.png'); background-size: 40px; z-index: 90; cursor: pointer; background-color: #fff; border-radius: 10px; display: none; }
.ctrr-veiculo { width: 40px; height: 40px; position: absolute; right: 20px; top: 50%; margin-top: 25px; background: url('../img/ctrl.png'); background-size: 40px; z-index: 90; cursor: pointer; background-color: #fff; border-radius: 10px; display: none; }
#txt-toolbar-veiculos { width: auto; height: auto; position: relative; float: left; margin-left: 20px; margin-top: -20px; font-size: 22px; font-weight: 600; color: #1F418F; }
#faixa-veiculos-janela { width: 100%; height: auto; position: relative; float: left; margin-left: %; margin-top: 40px; overflow: hidden; padding: 0px 0px; }

/* Início seleção formulário */
#janela-selecao-formularios { width: 90%; height: 460px; position: fixed; left: 5%; margin-left: -0px; top: 250%; margin-top: -233px; background-color: #fff; border-radius: 20px; z-index: 9999; opacity: 0;}
#janela-selecao-formularios-header h2 { width: 70%; height: auto; position: relative; float: left; margin-top: 35px; font-size: 15px; color: #000; font-size: 500; font-weight: 500; padding: 0px 10px; }
.fechar-formulario-selecao { width: 45px; height: 45px; position: relative; float: right; margin-top: 29px; background-color: #000; border-radius: 50%; cursor: pointer; }
.item-btn-selecao-formulario { width: 98%; height: 77px; position: relative; float: left; margin-left: 0.75%; margin-right: 0.75%; margin-bottom: 10px; background-color: #F1F7FC; border-radius: 10px; cursor: pointer; }
.icn-selecao-formulario-int { width: 30px; height: 30px; position: absolute; top: 50%; left: 50%; margin-left: -15px; margin-top: -15px; }
.nome-form { width: 100%; height: auto; position: relative; float: left; margin-top: 12px; padding: 0px 0px; color: #000; font-size: 14px; font-weight: 600; }
.sobre-formulario { width: 90%; height: auto; position: relative; float: left; margin-top: 0px; padding: 0px 0px 0px 0px; color: #000; font-size: 12px; }

/*Inicio formulário me ligue*/
#box-formulario-me-liguem { width: 90%; height: 598px; position: fixed; left: 5%; top: 250%; margin-left: 0px; margin-top: -298px; background-color: #fff; border-radius: 20px; z-index: 9999; opacity: 1; transform: scale(0.8); -moz-transform: scale(0.8); -ms-transform: scale(0.8); -o-transform: scale(0.8); -webkit-transform: scale(0.8); opacity: 0; }
.legenda-formulario p { width: 80%; height: auto; position: relative; float: left; margin-top: -20px; font-size: 12px; color: #000; }
.box-campos-formulario-c1 { width: 100%; height: auto; position: relative; float: left; margin-top: 5px; padding: 0px 30px; }
.box-campos-formulario-c1 textarea { width: 100%; height: 60px !important; position: relative; float: left; padding: 20px 20px !important; background-color: #F1F7FC !important; border-radius: 10px !important; font-size: 15px !important; color: #3F5C87; border-bottom: 0px solid #dadada !important; border: 0px solid #dadada !important; box-sizing: border-box !important; }
.cta-formulario { width: 100%; height: auto; position: relative; float: left; margin-top: 19px; }
.cta-formulario-int { width: 90%; height: auto; position: relative; margin: auto; padding: 13px 20px; color: #fff; background-color: #3F5C87; border-radius: 50px; text-align: center; }
.icn-cta-form { width: 30px; height: 35px; position: absolute; right: 10px; top: 7px; background: url('../img/phone.png'); background-size: 30px; background-repeat: no-repeat; }

/* Ínicio formulários */
#box-formulario-usado-entrada { width: 90%; height: 480px; position: fixed; left: 5%; top: 250%; margin-left: 0px; margin-top: -240px; background-color: #fff; border-radius: 20px; z-index: 99999; overflow-y: scroll; padding-bottom: 40px; }
.header-formulario { width: 100%; height: auto; position: relative; float: left; margin-top: 28px; padding: 0px 20px; }
.legenda-formulario h2 { width: 100%; height: auto; position: relative; float: left; margin-top: 0px; font-size: 15px; color: #000; font-weight: 500; }
.legenda-formulario p { width: 80%; height: auto; position: relative; float: left; margin-top: -20px; font-size: 10px; color: #000; }
.fechar-formulario { width: 45px; height: 45px; position: relative; float: right; margin-top: -2px; background-color: #000; border-radius: 50%; cursor: pointer; }
.box-campos-formulario-c3 { width: 100%; height: auto; position: relative; float: left; margin-top: 20px; padding: 0px 20px; }
.campo-label-c3 { width: 100%; height: auto; position: relative; float: left; padding: 0px 0px; margin-bottom: -6px; margin-right: 0% !important; }
.campo-label-c3b { width: 49%; height: auto; position: relative; float: left; padding: 0px 0px; margin-bottom: 4px; margin-right: 1% !important; }
.campo-label-c3c { width: 100%; height: auto; position: relative; float: left; padding-top: 0px; margin-bottom: 4px; margin-top: -24px; margin-bottom: 40px; margin-left: 1%; margin-right: 1% !important; }
.label-campo { width: 100%; height: auto; position: relative; float: left; font-size: 12px; color: #416078; padding-left: 14px; margin-bottom: 5px; }
.fix-terms { margin-top: 29px; top: 7px; }
.cta-formulario-int-b { width: 288px; height: auto; position: relative; margin-top: -25px; padding: 15px 20px; color: #fff; background-color: #3F5C87; border-radius: 50px; text-align: center; }
.icn-cta-form { width: 30px; height: 35px; position: absolute; right: 10px; top: 8px; background: url('../img/phone.png'); background-size: 30px; background-repeat: no-repeat; }

/*Inicio formulário financiamento*/
#box-formulario-financiado { width: 90%; height: 500px; position: fixed; left: 5%; top: 250%; margin-left: 0px; margin-top: -250px; background-color: #fff; border-radius: 20px; z-index: 99999; opacity: 0; overflow-y: scroll; }
.campo-label-c3d { width: 100%; height: auto; position: relative; float: left; padding-top: 0px; margin-top: -10px; margin-bottom: 4px; margin-left: 1%; }
.cta-formulario { width: 100%; height: auto; position: relative; float: left; margin-top: 50px; margin-bottom: 30px; }

/*Inicio formulário pagar a vista*/
#box-formulario-pagar-a-vista { width: 90%; height: 500px; position: fixed; left: 5%; top: 250%; margin-left: 0px; margin-top: -250px; background-color: #fff; border-radius: 20px; z-index: 9999; opacity: 0; overflow-y: scroll; }
.cta-formulario { width: 100%; height: auto; position: relative; float: left; margin-top: 30px; margin-bottom: 30px; }

.fix-terms{margin-top: 34px;}
.fix-cta-2{margin-top: 20px; margin-bottom: -10px;}

}



/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Hide visually and from screen readers
 */

.hidden,
[hidden] {
  display: none !important;
}

/*
 * Hide only visually, but have it available for screen readers:
 * https://snook.ca/archives/html_and_css/hiding-content-for-accessibility
 *
 * 1. For long content, line feeds are not interpreted as spaces and small width
 *    causes content to wrap 1 word per line:
 *    https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
 */

.visually-hidden {
  border: 0;
  clip: rect(0, 0, 0, 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
  /* 1 */
}

/*
 * Extends the .visually-hidden class to allow the element
 * to be focusable when navigated to via the keyboard:
 * https://www.drupal.org/node/897638
 */

.visually-hidden.focusable:active,
.visually-hidden.focusable:focus {
  clip: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  position: static;
  white-space: inherit;
  width: auto;
}

/*
 * Hide visually and from screen readers, but maintain layout
 */

.invisible {
  visibility: hidden;
}

/*
 * Clearfix: contain floats
 *
 * The use of `table` rather than `block` is only necessary if using
 * `::before` to contain the top-margins of child elements.
 */

.clearfix::before,
.clearfix::after {
  content: "";
  display: table;
}

.clearfix::after {
  clear: both;
}

/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   These examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */

@media only screen and (min-width: 35em) {
  /* Style adjustments for viewports that meet the condition */
}

@media print,
  (-webkit-min-device-pixel-ratio: 1.25),
  (min-resolution: 1.25dppx),
  (min-resolution: 120dpi) {
  /* Style adjustments for high resolution devices */
}

/* ==========================================================================
   Print styles.
   Inlined to avoid the additional HTTP request:
   https://www.phpied.com/delay-loading-your-print-css/
   ========================================================================== */

@media print {
  *,
  *::before,
  *::after {
    background: #fff !important;
    color: #000 !important;
    /* Black prints faster */
    box-shadow: none !important;
    text-shadow: none !important;
  }

  a,
  a:visited {
    text-decoration: underline;
  }

  a[href]::after {
    content: " (" attr(href) ")";
  }

  abbr[title]::after {
    content: " (" attr(title) ")";
  }

  /*
   * Don't show links that are fragment identifiers,
   * or use the `javascript:` pseudo protocol
   */
  a[href^="#"]::after,
  a[href^="javascript:"]::after {
    content: "";
  }

  pre {
    white-space: pre-wrap !important;
  }

  pre,
  blockquote {
    border: 1px solid #999;
    page-break-inside: avoid;
  }

  tr,
  img {
    page-break-inside: avoid;
  }

  p,
  h2,
  h3 {
    orphans: 3;
    widows: 3;
  }

  h2,
  h3 {
    page-break-after: avoid;
  }
}