/* CSS Document */
body {
  font-family: "Titillium Web", sans-serif;
  transition: 0.5;
  -webkit-transition: 0.5;
  font-size: 12px;
}
.my-btn-success {
  background-color: #42e90f !important;
}

.modal-header p,
.modal-body p,
.modal-body h4 {
  color: #fff;
  margin-bottom: 20px;
}
label {
  color: #fff;
  margin-top: 15px;
  margin-bottom: 10px;
  margin-left: 20px;
  font-weight: normal;
  font-size: 1.2em;
}

.steps-row {
  display: flex;
  flex-direction: row;
  width: 100%;
  /* background-color: red; */
  align-items: center;
}
.steps-col {
  flex: 1;
}
.steps-col-align-right {
  display: flex;
  justify-content: flex-end;
}
.steps-divider {
  width: 220px;
  background-color: #0d4d8a;
  height: 5px;
  margin-left: 20px;
  margin-right: 20px;
}
.bolota {
  width: 40px;
  height: 40px;
  border-radius: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #0e68c0;
  font-weight: bold;
  font-size: 1.6em;
  background-color: #fca728;

  cursor: pointer !important;
}
.bolota-disabled {
  width: 30px;
  height: 30px;
  border-radius: 30px;
  background-color: #0d4d8a;
  color: #0e68c0;
  font-size: 1.4em;

  cursor: pointer !important;
}

.nopadding {
  padding: 0 !important;
  margin: 0 !important;
}
.bannerHome {
  /*background-image: url(../img/bgBannerTopo.jpg);*/
  background-size: cover;
}
.bottini {
  /*margin:-50px 0px -120px 0px;*/
  background-image: none;
  background-repeat: no-repeat;
  background-position: right bottom;
  background-size: 55%;
  padding-bottom: 90px;
}
.logo img {
  width: 270px;
  padding: 65px 0px 60px 0px;
}
h1 {
  font-size: 4.5em;
  color: #0066c3;
  font-weight: bold;
  line-height: 1em;
  margin-bottom: 30px;
}
h2 {
  font-size: 5em;
  color: #0066c3;
  font-weight: 900;
  padding: 0px;
  text-transform: uppercase;
  line-height: 0.8em;
}
h3 {
  color: #282828;
  margin: 15px 0px 40px 0px;
  font-size: 1.7em;
  line-height: 35px;
}
h4 {
  color: #0066c3;
  margin: 0px;
  font-size: 1.9em;
  font-weight: bold;
}
h5 {
  color: #749ed6;
  text-transform: uppercase;
  font-size: 1.4em;
  font-weight: bold;
  line-height: 8px;
}
p {
  font-size: 1.3em;
  color: #5d5d5d;
  line-height: 1.6em;
  margin-bottom: 40px;
}
.btnVerde {
  background-color: #3dd10e;
  /*background-image: linear-gradient(0deg, #68be01, #3cd10e);*/
  color: #fff;
  text-transform: uppercase;
  border: 0px;
  border-radius: 50px;
  font-size: 1.8em;
  padding: 20px 40px 20px 40px;

  -webkit-transition: background 0.5s ease-out;
  -moz-transition: background 0.5s ease-out;
  -o-transition: background 0.5s ease-out;
  transition: background 0.5s ease-out;
}
.btnVerde:hover {
  background-color: #42e90f;
  background-position: 300px;
}

.btn-entrar {
  background: none;
  color: #0066c7;
  border: 4px solid #0066c7;
  font-size: 1.5em;
  padding: 15px 35px;
}
.btn-entrar:hover {
  background: #0066c7;
  color: #fff;
  border: 4px solid #0066c7;
}
.btnLaranja {
  background-color: #ffa800;
  color: #fff;
  text-transform: uppercase;
  border: 0px;
  border-radius: 50px;
  font-size: 1.8em;
  padding: 20px 40px 20px 40px;
}
.comoFunciona {
  background-color: #f4f4f4;
  background-image: url(../img/bgComoFunciona.jpg);
  background-size: cover;
  background-attachment: fixed;
  text-align: center;
  padding: 70px 0px 90px 0px;
}

.recursos {
  /* background-image: url(../img/bgComoFunciona.jpg);
  background-size: cover;
  background-attachment: fixed; */

  text-align: center;
  padding: 70px 0px 50px 0px;
}
.macbookBG {
  background-image: none;
  background-position: -32% top;
  background-size: 890px;
  background-repeat: no-repeat;
  padding: 30px 0px 40px 0px !important;
}
/*.recursos .item{
	text-align: left;
	clear: both;
	margin-bottom:50px;
}*/
.recursos .item {
  text-align: center;
  margin-bottom: 50px;
}
.recursos img {
  /*width:90px;*/
  margin: 0px 15px 0px 18px;
}
.recursos .btnVerde {
  margin-top: 20px;
  font-size: 1.3em;
}
.depoimentos {
  text-align: center;
  padding: 70px 0px 50px 0px;
  background-color: #0066c3;
}
.depoimentos h2 {
  color: #fff;
}
.depoimentos h3 {
  color: #a3bde2;
}
.depoimentos h4 {
  color: #fff;
  text-transform: uppercase;
}
.depoimentos p {
  color: #fff;
}
.depoimentos img {
  margin: 0 auto 30px auto;
  width: 280px;
}
.comoConfigurar {
  background-color: #73d700;
}
.celular {
  width: 200px;
  margin: 80px auto -90px auto;
}
.comoConfigurar h2 {
  color: #fff;
  margin-top: 40px;
}
.comoConfigurar .btnVerde {
  font-size: 1.3em;
  margin: 0 auto 60px auto;
}
.tresPassos {
  text-align: center;
  padding: 60px 0px 50px 0px;
}
.tresPassos h2 {
  color: #73d700;
}
.tresPassos h3 {
}
.tresPassos h4 {
  margin-bottom: 10px;
}
.tresPassos p {
}
.tresPassos img {
  margin: 0 auto 30px auto;
  width: 250px;
}
.investimento {
  text-align: center;
  padding: 70px 0px 50px 0px;
}
.tabelaPrecos {
  border-radius: 40px;
  background-color: rgba(246, 246, 246, 0.502);
  box-shadow: 0px 20px 51px 0px rgba(0, 0, 0, 0.06);
  padding-bottom: 25px;
  margin-top: 40px;
}
.tabelaPrecos h3 {
  color: #3f3f3f;
  margin: 0px 0px 70px 0px;
  font-size: 1.5em;
  text-transform: uppercase;
  font-weight: bold;
  border-bottom: 1px solid #f2f2f2;
  padding: 40px 0px 15px 0px;
}
.tabelaPrecos h2 {
  font-size: 8.5em;
  color: #ffa800;
  font-weight: 900;
  padding: 0px;
  text-transform: uppercase;
  line-height: 50px;
}
.tabelaPrecos h2 small {
  color: #ffa800;
  font-weight: 900;
}
.tabelaPrecos h4 {
  text-transform: uppercase;
  font-size: 1.5em;
  margin: 25px 0px 0px 0px;
}
.tabelaPrecos ul li {
  color: #828282;
  font-size: 1.3em;
  line-height: 1.8em;
  text-align: left;
}
.tabelaPrecos ul {
  margin: 40px 0px 40px 0px;
}
.tabelaPrecos button {
  width: 100%;
}
.tabelaPrecos.recomendado {
  background-color: #fff;
  border-radius: 0px 0px 40px 40px;
  margin-top: 0px;
}
.recomendado ul li {
  color: #333333;
}
.labelRecomendado {
  background-color: #ffa800;
  color: #fff;
  border-radius: 40px 40px 0px 0px;
  padding: 20px 0px 20px 0px;
  font-size: 1.5em;
  text-transform: uppercase;
  font-weight: bold;
}
.clientes {
  text-align: center;
  padding: 70px 0px 50px 0px;
}
.clientes h2 {
  margin-bottom: 40px;
}
.clientes .item img {
  margin: 0 auto;
}
.servepramim {
  text-align: center;
  padding: 70px 0px 0px 0px;
  background-color: #f6f6f6;
}
.servepramim img {
  max-width: 350px;
  margin: 0 auto;
  margin-bottom: -5px;
}
.somosEspecialistas {
  background-color: #0066c3;
  padding: 50px 0px 50px 0px;
}
.somosEspecialistas h2 {
  font-size: 3.5em;
  color: #0066c3;
  font-weight: 900;
  padding: 0px;
  text-transform: uppercase;
  line-height: 50px;
  color: #fff;
  margin-top: 0px;
}
.somosEspecialistas h3 {
  margin: 0px;
  color: #fff;
}
.perguntasFrequentes {
  text-align: center;
  padding: 70px 0px 0px 0px;
}
.perguntasFrequentes .item {
  border: solid 4px #0066c3;
  border-radius: 20px;
  text-align: left;
  font-size: 1.3em;
  color: #0066c3;
  line-height: 1.6em;
  padding: 20px 80px 20px 30px;
  /* background-image: url(../img/setinhaDown.png); */
  background-repeat: no-repeat;
  background-position: right center;
  background-size: 60px;
  margin-bottom: 20px;
}
.perguntasFrequentes .item p {
  font-size: 1em;
  margin: 10px 0px 0px 0px;
  /* height: 0px; */
  overflow: auto;
  transition: 1s;
}
/* .perguntasFrequentes .item:hover > p{
	font-size: 1em;
	margin:10px 0px 0px 0px;
	height: auto;
	overflow: auto;
	transition: 1s;
} */
.rodape {
  background-color: #0066c3;
  margin-top: 50px;
  padding: 40px 0px 50px 0px;
}
.rodape h4 {
  color: #fff;
  margin: 30px 0px 16px 0px;
  font-size: 1.9em;
  font-weight: bold;
}
.rodape ul {
  margin: 0px;
  padding: 0px;
  list-style: none;
  color: #b8cbe8;
  font-size: 1.3em;
  line-height: 32px;
}
.rodape ul li {
  transition: 0.5s;
}
.rodape ul li:hover {
  color: #dce9fc;
}
.rodape p {
  color: #fff;
  margin-top: 50px;
}
.form-control {
  font-size: 1.3em;
  border-radius: 30px;
  height: auto;
  border: 0px;
  margin-bottom: 10px;
  padding: 13px 0px 13px 20px;
}
textarea.form-control {
  height: 130px;
}
::placeholder {
  color: #bebebe !important;
  opacity: 1; /* Firefox */
}

.margin-humilde {
  margin: 0 !important;
  padding: 0 !important;
}

a {
  color: #b8cbe8;
}
a:hover {
  color: #fff;
}

.container-sapatinho p {
  font-size: 1.1em;
  color: #a0a0a0;
}
.container-sapatinho a {
  color: #0066c3;
}

/* Extra small devices (portrait phones, less than 576px)
 No media query for `xs` since this is the default in Bootstrap*/

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
  .recursos .btnVerde {
    margin-top: 70px;
    font-size: 2.2em;
  }
  .servepramim img {
    max-width: 700px;
    margin: 0 auto;
    margin-bottom: -12px;
  }
  .comoFunciona .video {
    width: 65%;
    margin: 0 auto;
  }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
  .bottini {
    background-image: url(../img/henryTopo.png);
    /* background-image: url(../img/tey.jpg); */
  }
  body {
    font-size: 14px;
  }
  .macbookBG {
    background-image: url(../img/macBookMockup.jpg);
    background-position: -92% top;
    background-size: 890px;
    background-repeat: no-repeat;
    padding: 30px 0px 40px 0px !important;
  }
  .recursos .item {
    margin-bottom: 10px;
  }
  .recursos img {
    /*width:90px;*/
    margin: -13px 15px 0px -20px;
  }
  .recursos .btnVerde {
    margin-top: 70px;
    font-size: 2.2em;
  }
  .celular {
    width: 430px;
    margin: 80px auto -290px auto;
  }
  .comoConfigurar .btnVerde {
    font-size: 1.8em;
    margin: 0px;
  }
  .tresPassos {
    text-align: center;
    padding: 260px 0px 50px 0px;
  }
  .servepramim img {
    max-width: 850px;
    margin: 0 auto;
    margin-bottom: -14px;
  }
  .comoFunciona .video {
    width: 65%;
    margin: 0 auto;
  }
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
  .bottini {
    /* background-image: url(../img/henryTopo.png); */
  }
  body {
    font-size: 14px;
  }
  .macbookBG {
    background-image: url(../img/macBookMockup.jpg);
    background-position: -32% top;
    background-size: 890px;
    background-repeat: no-repeat;
    padding: 30px 0px 40px 0px !important;
  }
  .recursos .item {
    text-align: center;
    margin-bottom: 10px;
  }
  .recursos .item h4 {
    margin-bottom: 5px;
  }
  .recursos img {
    /*width:90px;*/
    margin: 0px auto 0px auto;
  }
  .recursos .btnVerde {
    margin-top: 70px;
    font-size: 2.2em;
  }
  .celular {
    width: 430px;
    margin: 80px auto -290px auto;
  }
  .comoConfigurar .btnVerde {
    font-size: 1.8em;
    margin: 0px;
  }
  .tresPassos {
    text-align: center;
    padding: 260px 0px 50px 0px;
  }
  .servepramim img {
    max-width: 850px;
    margin: 0 auto;
    margin-bottom: -14px;
  }
  .comoFunciona .video {
    width: 65%;
    margin: 0 auto;
  }
  .investimento p {
    padding-top: 70px;
  }
}