html, body{
margin:0;
padding:0;
font-family: 'Montserrat', sans-serif;
background:#Ffff;
}
ul{
margin:0;
padding:0;
}
ul li{
padding:0;
margin:0;
list-style: none;
font-family: 'Montserrat', sans-serif;
}
img{
max-width: 100%;
height:auto;
border:0;
outline: 0;
}
button, input, a, select{
outline: 0 !important;
border:0;
text-decoration: none;
font-family: 'Montserrat', sans-serif;
}
a, span, p, h1, h2, h3, h4, h5, h6, small{
  font-family: 'Montserrat', sans-serif !important;
}
a{
text-decoration:none;
font-family: 'Montserrat', sans-serif;
}
.container{
width:1220px;
max-width: 100%;
}
.js .anime {
opacity: 0;
transform: translate3D(0px, 80px, 0px);
}
.js .anime-init {
opacity: 1;
transform: translate3D(0px, 0px, 0px);
transition:1.5s all ease;
}
.content-topo{
display: flex;
justify-content: space-between;
}
.content-topo .texto{
width:500px;
}
.content-topo .video{
width:calc(100% - 550px);
}
.video-container {
overflow: hidden;
position: relative;
width:100%;
} 
.video-container::after {
padding-top: 56.25%;
display: block;
content: '';
}
.video-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.video-container:before{
content:"";
width:100%;
height:100%;
background:rgba(8, 8, 8, 0.404);
position: absolute;
left:0;
top:0;
z-index:2;
visibility: visible;
opacity: 1;
-webkit-transition: ease-in-out 1s;
-o-transition: ease-in-out 1s;
transition: ease-in-out 1s;
}
.video-container .bt-play{
position:absolute;
top:50%;
left:50%;
transform:translatex(-50%) translatey(-50%);
z-index: 3;
max-width: 110px;
cursor:pointer;
visibility: visible;
opacity: 1;
-webkit-transition: ease-in-out 1s;
-o-transition: ease-in-out 1s;
transition: ease-in-out 1s;
}
.video-container.rodando .bt-play, .video-container.rodando:before{
opacity: 0;
visibility: hidden;
pointer-events: none;
-webkit-transition: ease-in-out 1s;
-o-transition: ease-in-out 1s;
transition: ease-in-out 1s;
}
.content-topo .texto h2{
text-align: left;
font: normal normal bold 28px/36px Montserrat;
letter-spacing: 0px;
color: #FFFFFF;
max-width: 920px;
margin:0 auto 30px;
}
.content-topo p{
text-align: left;
font: normal normal 500 19px/27px Montserrat;
letter-spacing: 0px;
color: #FFFFFF;
max-width: 800px;
margin:0 auto 25px;
}
.content-topo .bt-abre-contato{
margin:0;
}
.topo{
min-height:100vh;
display: flex;
align-items:center;
background:url(https://images.cativecomunicacao.com.br/bikeoeste/bg_topo.jpg);
background-size: cover;
background-position: center;
padding-top:70px;
position: relative;
}
.cabecalho{
position: fixed;
width:100%;
z-index:999;
left:0;
top:60px;
}
.bt-abre-contato{
display: flex;
align-items: center;
justify-content: center;
background: #528A45;
border-radius: 30px;
height: 48px;
font: normal normal 900 17px/19px Montserrat;
letter-spacing: 0px;
color: #FFFFFF;
max-width: 100%;
width: 367px;
transition: ease-in-out 0.3s;
margin:auto;
}
.bt-abre-contato img{
margin-right:10px;
}
.bt-abre-contato:hover{
background:#50c437;
box-shadow: 0 0 20px rgb(80, 196, 55,.5);
color:#fff;
transition: ease-in-out 0.3s;
}
.content-header{
display: flex;
background: #fff;
border-radius: 7px;
padding: 15px 20px;
align-items: center;
justify-content: space-between;
}
.content-header .logo{
max-width: 140px;
}
.content-header .menu ul{
display: flex;
align-items: center;
padding-right:10px;
}
.content-header .menu ul li a{
position: relative;
font: normal normal normal 16px/24px Montserrat;
letter-spacing: 0px;
color: #007FFF;
transition: ease-in-out 0.3s;
}
.content-header .menu ul li a:hover{
font: normal normal normal 16px/24px Montserrat;
letter-spacing: 0px;
color: #000C5E;
transition: ease-in-out 0.3s;
}
.content-header .menu ul li:not(:last-child) a{
margin-right: 54px;
}
.icon-down{
position: absolute;
left: 50%;
transform: translatex(-50%);
bottom: 30px;
}
.content-sobre h2{
text-align: left;
font: normal normal 900 58px/77px Montserrat;
letter-spacing: 0px;
color: #007FFF;
max-width: 500px;
margin-bottom: 0;
}
.content-sobre h4{
text-align: left;
font: normal normal 600 22px/34px Montserrat;
letter-spacing: 0px;
color: #000C5E;
max-width: 480px;
margin-bottom: 0;
}
.content-sobre{
align-items: center;
background:url(https://images.cativecomunicacao.com.br/bikeoeste/bg_text.png);
background-size: 85%;
background-position: top left;
background-repeat: no-repeat;
padding:25px 0;
max-width: 1140px;
margin:auto;
}
.content-sobre .lado-2{
display: flex;
justify-content: flex-end;
}
.sobre{
padding:50px 0;
}
.boxes-beneficios{
display: flex;
justify-content: space-between;
}
.boxes-beneficios .beneficio{
padding:10px;
}
.boxes-beneficios .beneficio .texto{
background: #007FFF;
border-radius: 14px;
padding:25px 10px 15px;
text-align: center;
color:#fff;
min-height: 180px;
}
.boxes-beneficios .beneficio .icone{
text-align: center;
margin-bottom: -18px;
}
.boxes-beneficios .beneficio .icone img{
max-width: 116px;
}
.boxes-beneficios .beneficio .texto p{
text-align: center;
font: normal normal 500 14px/21px Montserrat;
letter-spacing: 0px;
color: #FFFFFF;
margin-bottom: 0;
}
.boxes-beneficios .beneficio .texto h5{
text-align: center;
font: normal normal bold 19px/24px Montserrat;
letter-spacing: 0px;
color: #FFFFFF;
text-transform: uppercase;
min-height:48px;
display: flex;
align-items: center;
justify-content: center;
}
.beneficio-01 .texto{
width:347px;
max-width: 100%;
}
.beneficio-02 .texto{
width:227px;
max-width: 100%;
}
.beneficio-03 .texto{
width:192px;
max-width: 100%;
}
.beneficio-04 .texto{
width:293px;
max-width: 100%;
}
.acao-contato p{
text-align: center;
font: normal normal 500 19px/30px Montserrat;
letter-spacing: 0px;
color: #000C5E;
max-width:800px;
margin:0 auto 25px;
}
.boxes-beneficios{
margin-bottom: 60px;
}
.beneficios{
padding:20px 0 60px;
}
.pecas .lista-itens ul:first-child{
margin-right:90px;
}
.pecas .lista-itens ul li{
text-align: left;
font: normal normal 600 19px/35px Montserrat;
letter-spacing: 0px;
color: #262223;
}
.pecas .lista-itens{
display: flex;
}
.pecas .row{
align-items:center;
}
.pecas h2{
text-align: center;
font: normal normal 900 48px/60px Montserrat;
letter-spacing: 0px;
color: #007FFF;
max-width: 970px;
margin: 0 auto 40px;
}
.pecas{
padding:20px 0 60px;
}
.marcas .title-marcas{
background: #007FFF 0% 0% no-repeat padding-box;
border-radius: 27px;
padding: 20px 40px;
}
.marcas .title-marcas h2{
text-align: center;
font: normal normal 900 44px/55px Montserrat;
letter-spacing: 0px;
color: #FFFFFF;
margin: auto;
max-width: 980px;
}
.marcas h3{
text-align: center;
font: normal normal 900 37px/60px Montserrat;
letter-spacing: 0px;
color: #007FFF;
margin-bottom: 20px;
}
.marcas .logo-marcas{
display: flex;
align-items: center;
display: flex;
align-items: center;
margin: 30px 0;
justify-content: space-between;
}
.marcas{
padding:30px 0 75px;
}
.content-app{
display: flex;
align-items: center;
justify-content: space-between;
}
.content-app .texto h2{
text-align: left;
font: normal normal 900 46px/56px Montserrat;
letter-spacing: 0px;
color: #007FFF;
margin-bottom: 30px;
}
.content-app .texto{
width:550px;
}
.content-app .imagem{
width:calc(100% - 550px);
}

.content-app .texto h4{
text-align: left;
font: normal normal 600 26px/50px Montserrat;
letter-spacing: 0px;
color: #000C5E;
max-width: 470px;
margin-bottom: 50px;
}
.plataformas{
display: flex;
align-items: center;
justify-content: space-between;
padding-right:60px;
}
.plataformas img{
width:auto;
height:66px;
}
.app{
padding:20px 0 80px;
}
.historia{
background:#007FFF;
padding:50px 0 20px;
}
.historia h2{
text-align: left;
font: normal normal 900 37px/48px Montserrat;
letter-spacing: 0px;
color: #FFFFFF;
margin-bottom: 40px;
}
.historia p{
text-align: left;
font: normal normal 600 19px/37px Montserrat;
letter-spacing: 0px;
color: #FFFFFF;
margin-bottom: 30px;
}
.historia img{
width: auto;
max-height: 825px;
}


.rodape{
background:#0202020D;
padding-top:50px;
}
.content-footer{
display: flex;
justify-content: space-between;
padding-bottom:30px;
padding-right:15px;
padding-left:15px;
border-bottom: 1px solid #707070;
}
.aba-logo{
min-width:40%;
}
.aba-logo img{
width: 240px;
}
.aba h6{
margin-top: 0;
margin-bottom: 10px;
text-align: left;
font: normal normal 700 18px/22px Montserrat;
letter-spacing: 0px;
color: #000;
}
.aba ul li a{
font-size:16px;
color:#000;
font-weight:500;
line-height:34px;
display: flex;
align-items: center;
}
.aba ul li a img{
margin-right:7px;
}
.copyright{
padding:15px 0 25px;
text-align: left;
font: normal normal medium 16px/37px Montserrat;
letter-spacing: 0px;
color: #262223;
}
.cabecalho.sticky{
top:0;
background:#fff;
box-shadow:0 0 20px rgb(0,0,0,.5);
-webkit-transition: ease-in-out 1s;
-o-transition: ease-in-out 1s;
transition: ease-in-out 1s;
}
.cabecalho{
-webkit-transition: ease-in-out 1s;
-o-transition: ease-in-out 1s;
transition: ease-in-out 1s;
}
.modal-open {
display: flex;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, 0.75);
-webkit-transition: ease-in-out .5s;
-o-transition: ease-in-out .5s;
transition: ease-in-out .5s;
}
.fora-modal {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
z-index: 1;
cursor: pointer;
}
.content-modal-form{
background: #FFFFFF 0% 0% no-repeat padding-box;
border-radius: 8px;
width: 485px;
padding: 25px 32px;
position: relative;
z-index: 2;
}
.close-form{
position: absolute;
top: -15px;
right: -15px;
width: 36px;
height: 36px;
background: #fff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
border: 2px solid #000;
cursor: pointer;
}
.formulario h3{
text-align: left;
font: normal normal bold 22px/28px Montserrat;
letter-spacing: 0px;
color: #007FFF;
margin-bottom: 40px;
}
input.form-control{
border:0;
border-bottom: 1px solid #979797;
font-size:15px;
color:#000;
height: 35px;
padding: 5px 15px;
margin-bottom: 30px;
border-radius: 0;
}
label{
text-align: left;
font: normal normal normal 15px/22px Montserrat;
letter-spacing: 0px;
color: #222B45;
opacity: 0.5;
}
.btn-iniciar{
width: 100%;
background: #007FFF;
border-radius: 37px;
height: 48px;
text-align: center;
font: normal normal bold 14px/18px Nunito;
letter-spacing: 0px;
color: #FFFFFF;
text-transform: uppercase;
margin-top: 25px;
outline: 0;
box-shadow: none;
}
.btn-iniciar:hover{
background:#0354a5;
color:#fff;
}
.llformCustom {
background-color: transparent !important;
padding: 0 !important;
max-width: 1050px;
margin: auto;
}
.llformCustom > div {
padding: 8px 0 !important;
}
.llformCustom .hidden {
display: none;
}
.llformCustom .field-error {
color: red;
display: none;
font-family: 'Inter', sans-serif;
font-size: 12px;
font-weight: 400;
padding: 5px 0 0 2px;
}
.llformCustom .field-error.show {
display: block !important;
}
.llformCustom .button-bar {
text-align: left;
}
.llformCustom .error-box {
background-color: transparent;
color: red;
display: none;
font-family: 'Roboto', sans-serif;
font-size: 22px;
font-weight: 400;
margin: -30px -20px !important;
padding: 50px 0 !important;
text-align: center;
}
.llformCustom .error-box.show {
display: block !important;
}
.llformCustom .error-box > img {
width: 100px;
}
.llformCustom .error-box > div {
 padding: 15px 0;
}
.llformCustom .loading-box {
background-color: transparent;
color: #ffffff;
display: none;
font-family: 'Roboto', sans-serif;
font-size: 22px;
font-weight: 400;
margin: -30px -20px !important;
padding: 50px 0 !important;
text-align: center;
}
.llformCustom .loading-box.show {
display: block !important;
}
.llformCustom .loading-box > img {
width: 100px;
}
.llformCustom .loading-box > div {
padding: 15px 0;
}
.llformCustom .error-box.loading,
.llformCustom .loading-box.loading {
display: block !important;
}
label {
text-align: left;
font: normal normal normal 15px/22px Montserrat;
letter-spacing: 0px;
color: #222B45;
opacity: 0.5;
display: block;
}
input {
border: 0;
border-bottom: 1px solid #979797;
font-size: 15px;
color: #000;
height: 35px;
padding: 5px 15px;
margin-bottom: 30px;
border-radius: 0;
box-shadow: none !important;
display: block;
width:100%;
}



@media(max-width:1500px){
  .content-header{
  padding:10px 20px;
  }
  .content-header .logo {
    max-width: 110px;
  }
  .cabecalho{
  top:20px;
  }
  .content-topo{
    max-width: 1100px;
    margin: auto;
  }
  .content-topo .texto h2 {
    text-align: left;
    font: normal normal bold 25px/32px Montserrat;
    margin-bottom: 20px;
  }
  .content-topo p {
    text-align: left;
    font: normal normal 500 16px/23px Montserrat;
    margin-bottom: 20px;
  }
  .video-container .bt-play{
  max-width:88px;
  }
  .icon-down{
  max-width:30px;
  }


}

@media(max-width:992px){
.content-topo{
display: block;
}
.content-topo .texto, .content-topo .video{
width:100%;
}
.content-topo .video{
margin-bottom: 20px;
}
.content-topo .texto h2 {
font: normal normal bold 22px/30px Montserrat;
text-align:center;
margin-bottom: 30px;
}
.content-topo p {
  text-align: center;
  font: normal normal 500 16px/24px Montserrat;
}
.video-container .bt-play {
  max-width: 76px;
}
.topo{
padding-bottom:90px;
padding-top:120px;
}



.cabecalho {
top: 0;
background: #fff;
}
.content-header .logo {
  max-width: 125px;
}
.content-header .menu {
  display: block;
  position: fixed;
  background: #fff;
  width: 320px;
  right: 0;
  top: 81px;
  height: calc(100vh - 81px);
  padding: 30px;
  z-index: 500;
  overflow: hidden;
  overflow-y: auto;
  transition: -webkit-transform .50s ease;
  transition: transform .50s ease;
  transition: transform .50s ease,-webkit-transform .50s ease;
  -webkit-transform: translate3d(320px,0,0);
  transform: translate3d(320px,0,0);
}
.menu-button {
position: relative;
width: 34px;
height: 34px;
padding: 0;
background:none !important;
cursor: pointer;
border: none !important;
outline: 0 !important;
}	
.menu-button::after, .menu-button::before {
content: '';
position: absolute;
top: 50%;
right: 0;
width: 100%;
height: 4px;
border-radius: 0px;
pointer-events: none;
-webkit-transition: -webkit-transform .25s;
-webkit-transform-origin: 50% 50%;
transform-origin: 100% 50%;
transition: all .5s;
}
.menu-button::before {
width: 100%;
-webkit-transform: translate3d(0,-10px,0) scale3d(.8,1,1);
transform: translate3d(0,-12px,0) scale3d(1,1,1);
transition: all .5s;
}
.menu-button::after {
-webkit-transform: translate3d(0,10px,0) scale3d(.8,1,1);
transform: translate3d(0,12px,0) scale3d(1,1,1);
transition: all .5s;
}
.menu-button span {
position: absolute;
right: 0;
overflow: hidden;
width: 80%;
height: 4px;
border-radius: 0px;
text-indent: 200%;
-webkit-transition: opacity .25s;
transition: all .5s;
background: #000;
}
.menu-button span, .menu-button::after, .menu-button::before {
background: #000;
}	
.menu-button-open::before {
-webkit-transform: rotate3d(0,0,1,45deg);
transform: rotate3d(0,0,1,45deg);
}
.menu-button-open::after, .menu-button-open::before {
transform-origin: 50% 50%;
transition: all .5s;
}
.menu-button-open::after {
-webkit-transform: rotate3d(0,0,1,-45deg);
transform: rotate3d(0,0,1,-45deg);
}	
.menu-button-open span {
opacity: 0;
}
.content-header .menu.menu-open {
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
.content-header {
padding: 10px 0px;
}
.content-header .menu ul li:not(:last-child) a {
margin-right: 0;
}
.content-header .menu ul {
display: block;
}
.content-header .menu ul li a {
font: normal normal normal 18px/50px Nunito;
display: block;
text-align: center;
}
.content-header .menu ul li a:hover{
font: normal normal bold 18px/50px Nunito
}
.content-topo{
display: block;
}
.copyright {
font: normal normal 500 15px/37px Nunito;
text-align: center;
}
.content-footer, .copyright {
flex-wrap: wrap;
}
.aba-logo {
min-width: 100%;
width: 100%;
text-align: center;
margin-bottom: 30px;
}
.aba-links {
width: 100%;
text-align: center;
margin-bottom: 20px;
}
.aba h6 {
text-align: center;
}
.aba ul li a {
justify-content: center;
}
.icon-down{
max-width:34px;
}
.content-sobre h2 {
font: normal normal 900 28px/44px Montserrat;
margin-bottom: 35px;
text-align: center;
}
.content-sobre h4 {
font: normal normal 600 18px/30px Montserrat;
text-align: center;
}
.boxes-beneficios .beneficio .texto{
width:100%;
}
.boxes-beneficios .beneficio .icone img {
max-width: 110px;
margin: auto;
}
.beneficios-mobile {
width: calc(100% + 24px);
margin-left: -12px;
}
.boxes-beneficios .beneficio .texto h5 {
font: normal normal bold 17px/24px Montserrat;
}
.beneficios .slick-dots, .galeria .slick-dots{
display: flex;
align-items: center;
justify-content: center;
}
.beneficios .slick-dots li button, .galeria .slick-dots li button{
background:#282828;
}
.beneficios .slick-dots li.slick-active button, .galeria .slick-dots li.slick-active button{
background:#007FFF;
}
.slick-dots li button {
  margin: 0 5px;
  font-size: 0;
  background: #fff;
  width: 14px;
  height: 14px;
  border-radius: 50%;
}
.pecas h2 {
text-align: center;
font: normal normal 900 32px/42px Montserrat;
}
.pecas .lista-itens ul:first-child {
margin-right: auto;
}
.pecas .lista-itens {
display: flex;
flex-wrap: wrap;
}
.pecas .lista-itens ul{
width:285px;
margin: auto;
}
.pecas img{
margin-top:35px;
}
.marcas .title-marcas h2, .marcas h3, .content-app .texto h2 {
text-align: center;
font: normal normal 900 32px/42px Montserrat;
}
.marcas .logo-marcas{
flex-wrap:wrap;
justify-content: center;
}
.content-app .texto h4 {
text-align: center;
font: normal normal 600 20px/37px Montserrat;
}
.plataformas img {
width: 100%;
height: auto;
}
.plataformas a{
display: flex;
width:49%;
}
.plataformas{
padding-right:0;
}
.historia h2 {
text-align: center;
font: normal normal 900 32px/42px Montserrat;
}
.historia p {
text-align: center;
font: normal normal 600 17px/28px Montserrat;
margin-bottom: 20px;
}
.copyright {
font: normal normal 500 15px/20px montserrat;
text-align: center;
}
.aba-logo img {
width: 180px;
}

}