:root {
  --btn-default-background: #d09e63;
  --btn-default-background-hover: #000000;
  --btn-default-color: #000000;
  --btn-default-color-hover: #ffffff;

  --carousel-indicators: #000000;

  --navbar-background: #000000;
  --navbar-link-color: #d09e63;
  --navbar-link-color-hover: #ffffff;
  --navbar-link-background-hover: #000000;
  --navbar-btn-color: #000000;
  --navbar-btn-background: #d09e63;

  --banner01-text-color: #d09e63;

  --banner02-contato-background: #d09e63;
  --banner02-contato-color: #000000;
  --banner02-text-color: #ffffff;

  --login-text-color: #ffffff;

  --toolbar-gradient-inicio: #000000;
  --toolbar-gradient-fim: #d09e63;

  --app-color: #000000;
}

/*-------------------------------------
/ Configurações gerais
---------------------------------------*/
.btn { font-size: 1em; }

.form-control {
  font-size: 1em;
}

.btn-default {
  background-color: var(--btn-default-background);
  border: none;
  color: var(--btn-default-color);
}

.btn-default:hover {
  background-color: var(--btn-default-background-hover);
  color: var(--btn-default-color-hover);
}

section, footer {
  padding: 60px 0;
}

section .container h2,
footer .container h2 {
  color: #3F3F3F;
  font-weight: bold;
  font-size: 1.6em;
  margin-top: 0;
}

section .container h2 + p,
footer .container h2 + p  {
  margin-bottom: 46px;
}

.banner {
  padding: 0;

  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

/* Configurações do carrousel */
.carousel-control.right,
.carousel-control.left {
  background: none;
}

.carousel-indicators .active {
  background: var(--carousel-indicators);
  width: 14px;
  height: 14px;
}

.carousel-indicators li {
  border-color: var(--carousel-indicators);
  width: 12px;
  height: 12px;
}

/*-------------------------------------
/ Barra de navegação
---------------------------------------*/
.navbar {
  background: var(--navbar-background);

  -moz-box-shadow: 0 0 15px rgba(0,0,0,0.15);
  -webkit-box-shadow: 0 0 15px rgba(0,0,0,0.15);
  box-shadow: 0 0 15px rgba(0,0,0,0.15);

  border: none;
  margin: 0;
}

.navbar .container .navbar-header { padding-bottom: 9px; }

.navbar .navbar-brand {
  padding: 8px 15px;
}

.navbar .navbar-nav > li > a {
  margin-top: 9px;
  color: var(--navbar-link-color);
  font-weight: bold;
  padding-top: 10px;
  padding-bottom: 10px;
}

.navbar .navbar-nav > li > a:hover {
  background: var(--navbar-link-background-hover);
  color: var(--navbar-link-color-hover);
}

.navbar .navbar-nav > li > .btn-success {
  color: var(--navbar-btn-color);
  background: var(--navbar-btn-background);
  border: none;
}

.navbar .navbar-toggle {
  background: #E6F1F7;
  border: none;
  margin-top: 14px;
  margin-bottom: 0;
}

.navbar .navbar-toggle:hover { background: #E6F1F7; }

.navbar .navbar-toggle .icon-bar {
  background: #3F3F3F;
}

.navbar .navbar-collapse { border-color: #E6F1F7; }

/*-------------------------------------
/ Banner 01
---------------------------------------*/

.banner01 .container {
  height: 682px;
}

.banner01 .col-md-4 {
  padding-top: 130px;
  color: var(--banner01-text-color);
}

.banner01 .col-md-8 {
  position: relative;
}

.banner01 img {
  position: absolute;
  top: 150px;
  right: 0;

}

.banner01 .container h2 {
  margin-bottom: 30px;
  color: var(--banner01-text-color);
}

.banner01 .link-agendamento {
  background: var(--banner02-contato-background);
  color: var(--banner02-contato-color);
  margin-top: 10px;
  margin-left: 10px;
}

/*-------------------------------------
/ Banner 02
---------------------------------------*/

.banner02 h1 {
  font-size: 1.5em;
}

.banner02 .btn { margin-bottom: 10px; }
.banner02 .contato {
  background: var(--banner02-contato-background);
  color: var(--banner02-contato-color);
}

.banner02 p { margin-bottom: 30px; }

.banner02 .texto {
  padding-top: 300px;
  color: var(--banner02-text-color);
}

/*-------------------------------------
/ Características do sistema
---------------------------------------*/
.caracteristicas {
  background: #000000;
}

.caracteristicas .thumbnail {
  border: none;
  background: none;
}

.caracteristicas .thumbnail h3 {
  margin-top: 0;
  color: #7E98BA;
}

h2#tituloSecaoCaracteristicas {
  color: #d09e63;
}

.caracteristicas .thumbnail p {
  color: #777;
}

p#descricaoSecaoCaracteristicas {
  color: #ffffff;
}

/*-------------------------------------
/ Planos
---------------------------------------*/
.planos {
  background: #E6F1F7;
}
.planos .sing-up-form .btn {
  margin-bottom: 40px;
}

.planos .thumbnail {
  border: none;

  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;

  -moz-box-shadow: 0 0 15px rgba(0,0,0,0.15);
  -webkit-box-shadow: 0 0 15px rgba(0,0,0,0.15);
  box-shadow: 0 0 15px rgba(0,0,0,0.15);

  min-height: 266px
}

.planos .thumbnail h3 {
  padding: 17px;
  margin: -13px -13px 10px;
  font-size: 1.6em;

  color: #FFF;

  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#24a9e4+0,12f3a7+100 */
  background: #24a9e4; /* Old browsers */
  background: -moz-linear-gradient(left,  #24a9e4 0%, #12f3a7 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(left,  #24a9e4 0%,#12f3a7 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to right,  #24a9e4 0%,#12f3a7 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#24a9e4', endColorstr='#12f3a7',GradientType=1 ); /* IE6-9 */


  -webkit-border-top-left-radius: 10px;
  -webkit-border-top-right-radius: 10px;

  -moz-border-radius-topleft: 10px;
  -moz-border-radius-topright: 10px;

  border-top-left-radius: 10px;
  border-top-right-radius: 10px;

}

.planos .valores {
  color: #24A9E4;
  margin-bottom: 10px;
}

.planos .text-left {
  float: right;
  width: 45%;
}

.planos .text-right {
  float: left;
  width: 55%;
}

.planos .valores .moeda {
  font-size: 16px;
}

.planos .valores .valor {
  font-size: 90px;
}

.planos .valores .centavos {
  display: block;
  padding-top: 30px;
}

.planos .valores .mensais {
  color: #777;
  display: block;
}

.planos p .btn-default { width: 75%; }

/*-------------------------------------
/ Aplicativo
---------------------------------------*/
.app .container h2 {
  margin: 70px 0 30px 0;
  color: #7E98B8;
}

.app p {
  color: #7E98B8;
  margin-bottom: 30px;
}

/*-------------------------------------
/ Contato
---------------------------------------*/
.contato .container h2,
.contato .container p {
  color: #fff;
}

.contato .container p { margin-bottom: 50px; }

.contato .thumbnail {
  border: none;

  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;

  -moz-box-shadow: 0 0 5px rgba(0,0,15,0.25);
  -webkit-box-shadow: 0 0 5px rgba(0,0,15,0.25);
  box-shadow: 0 0 5px rgba(0,0,15,0.25);
}

/* Informações do contato */
.contato .info-contato {
  width: 100%!important;
}

.contato .info-contato .list-contato {
  margin: 0;
  padding: 30px 20px;
  list-style: none;
}

.contato .info-contato .list-contato li {
  background-position: left;
  background-repeat: no-repeat;
  padding-left: 35px;
  line-height: 1.5em;
  margin-bottom: 20px;
  color: #7E98B9;
  font-size: 1.2em;
}

.contato .info-contato .thumbnail {
  padding-bottom: 0;
}

.contato .info-contato iframe {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;

  margin: 0;
}

/* Formulário para contato */
.contato .form-contato .thumbnail {
  background: rgba(255,255,255,0.65);
  padding: 10px;
}

.contato .form-contato .thumbnail h3 {
  margin-top: 0;
  color: #5D6F85;
  font-size: 1.2em;
}

.contato .form-contato .form-group { margin-bottom: 6px; }

.contato .form-contato .form-control { color: #5D6F85; }
.contato .form-contato input.form-control {
  height: 40px;
  border: none;
}

.contato .form-contato textarea.form-control { border: none; }

/*-------------------------------------
/ Login
---------------------------------------*/
.login {
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;

  min-height: 100vh;
  position: relative;
}

.login .area-login h3 {
  color: var(--login-text-color);
}

.login .area-login {
  padding: 20px 50px;
  margin-top: 60px;

  background: rgba(255,255,255,0.3);

  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;

  -moz-box-shadow: 0 0 15px rgba(0,0,0,0.15);
  -webkit-box-shadow: 0 0 15px rgba(0,0,0,0.15);
  box-shadow: 0 0 15px rgba(0,0,0,0.15);
}

.login .area-login input { border: none; }

.login .area-login .login-normal button {
  width: 150px;
}

.login .area-login .login-normal a {
  color: var(--login-text-color);
}

.alternative-login {
  background: #FFF;
  margin: 30px -50px -30px -50px;
  padding: 20px 50px;

  -webkit-border-radius: 0 0 10px 10px;
  -moz-border-radius: 0 0 10px 10px;
  border-radius: 0 0 10px 10px;
}

.alternative-login button {
  margin-bottom: 10px;
  width: 250px;
  padding-left: 40px;
  text-align: left;
}

.login-google {
  background: #EA4335 url(/assets/img/im-login-google.png) no-repeat 5px center;
}

.login-face {
  background: #3B5998 url(/assets/img/im-login-face.png) no-repeat 5px center;
}


@media only screen and (max-width: 767px) {
  .navbar {
    position: relative;
    background: #FFF;
  }

  .navbar .navbar-nav > li > a:hover {
    color: #3f3f3f;
  }

  .navbar .navbar-nav > li > .btn {
    margin: 0 15px;
  }

  .banner01 {
    text-align: center;
  }

  .banner01 img {
    position: static;
    margin-top: 20px;
    width: 85%;
  }

  .banner01 .col-md-4 {
    padding-top: 60px;
  }

  .banner02 .texto {
    padding-top: 200px;
  }


  /*-------------------------------------
    / Aplicativo
    ---------------------------------------*/
  .app {
    background-size: contain;
    padding-bottom: 430px;
    height: auto;
    text-align: center;
  }

  .app .container h2 {
    margin: 0;
  }

  .get-app {  }
}

@media only screen and (max-width : 425px) {
  section, footer {
    padding: 40px 0 20px;
  }

  /*-------------------------------------
    / Aplicativo
    ---------------------------------------*/
  .app {
    padding-bottom: 230px;
  }


  /*-------------------------------------
    / Login
    ---------------------------------------*/
  .login .area-login { margin-top: 0; }
  .login .area-cadastro { margin-top: 0; }
}

.login .area-cadastro h3 {
  color: var(--login-text-color);
}

.login .area-cadastro {
  margin-top: 60px;
}

.login .area-cadastro input { border: none; }

.login .area-cadastro .login-normal button {
  width: 150px;
}

.login .area-cadastro .login-normal a {
  color: var(--login-text-color);
}

/**
 * Controla o tamanho do logo conforme o layout, seguindo o mesmo padrao no hide-xs do angular material
 *  Sizes:
 *         $layout-breakpoint-xs:     600px !default;
 *         $layout-breakpoint-sm:     960px !default;
 *         $layout-breakpoint-md:     1280px !default;
 *         $layout-breakpoint-lg:     1920px !default;
 */

/*IPhone 4 SE 320x480 px*/
@media (min-width: 100px) and (max-width: 394px) {
  .login .area-cadastro {
    margin-top: 0px;
  }
}

@media (min-width: 395px) and (max-width: 599px) {
  .login .area-cadastro {
    margin-top: 0px;
  }
}

/*declarar esta classe quando não é necessário exibir detalhes do sistema, como características, planos, etc*/
.sem-detalhes-cliente {
  display: none!important;
}

/*.com-detalhes-cliente {
  display: none!important;
}*/

/*Customização mobile (/login?mobile=S), específico por ciente */
.swiper-pagination-bullet-active {
  background: var(--app-color)!important;
}

.app-mobile-background {
  background: var(--app-color)!important;
}

.app-mobile-color {
  color: var(--app-color)!important;
}

.btn-app-cadastro:hover {
  background-color: #FFF!important;
  color: var(--app-color)!important;
  border-color: transparent!important;
}

.btn-app-footer:hover {
  background-color: var(--app-color)!important;
  color: #FFF!important;
  border-color: transparent!important;
}

/*-------------------------------------
/ Política de Privacidade
---------------------------------------*/
.privacidade {
  background: #F2F9FF;
}

.privacidade .thumbnail {
  border: none;
  background: none;
}

.privacidade .thumbnail h3 {
  margin-top: 0;
  color: #7E98BA;
}

.privacidade .thumbnail p {
  color: #777;
}

.circulo-icone{
  display: inline-block;
  border-radius: 50%;
  border-image-slice: 10;
}

.borda{
  width: 104px;
  height: 104px;
  background-image: linear-gradient(var(--toolbar-gradient-inicio), var(--toolbar-gradient-fim));
  padding: 6px; /*Espessura da borda*/
}

.icone{
  padding: 18px;   /*Distancia da borda até a imagem*/
  background: #F2F9FF; /*Mesmo background definido em .privacidade*/
  width: 92px;  /*Tamanho do icone*/
}

.icone-svg{
  fill: #7e98ba; /* Cor do icone*/
}

.app-top-toolbar-7 {
  background-image: linear-gradient(to right, var(--toolbar-gradient-inicio), var(--toolbar-gradient-fim));
}

.google-maps {
  border: 0
}

.whatsapp-floating-button {
  position: fixed;
  right: 20px;
  width: 70px;
  z-index: 999;
  bottom: 20px;
}

.whatsapp-button-options {
  position: fixed;
  right: 20px;
  bottom: 95px;
  width: 70px;
  z-index: 999;
  border-radius: 10px;
  background-color: #f0f4f9;
  padding: 8px 0 8px;
}