@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700');
/* 

 /// CORES BASICAS  ///

VERDE ESCURO = #84cac2
VERDE CLARO = #E7F6EF

/// GOTHAM FONT ///

Thin: 200;
Light:  300;
Book: 400;
Medium: 500;
Bold: 600;
Black:  700;
Ultra:  800;

///////////////////// */
body {
  padding-top: 30px;
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 16px;
  font-weight: 300;
  color: #5E5E5E;
}

h1,h2,h3,h4,h5,h6{
  font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 200;
  text-transform: uppercase;
}

/* .inline-block{ display: inline-block !important } */

/* a:hover{color:#999; text-decoration: none} */

.btn{
  /* padding: 12px 36px; */
  font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 300;
  text-transform: uppercase;
  border-radius: 0;
  border-width: 2px;
 
  }

.skew-right{
  -ms-transform: skew(-12deg); /* IE 9 */
  -webkit-transform: skew(-12deg); /* Chrome, Safari, Opera */
  transform: skew(-12deg); /* Standard syntax */
  border-radius: 20px 0;
}

.skew-left{
  -ms-transform: skew(12deg); /* IE 9 */
  -webkit-transform: skew(12deg); /* Chrome, Safari, Opera */
  transform: skew(12deg); /* Standard syntax */
}

.btn-primary {
  color: #fff;
  background-color: #84cac2;
  border-color: #ffffff;
}

.btn-cadastro, .btn-acesso { 
  margin-top: 20px;
  font-size: 15px;
  font-weight: 500;
  margin-right: 10px;
  line-height: 15px
}

.btn-cadastro{
  color: #fff;
  background-color: #84cac2;
  border-color: #84cac2;
}

.btn-acesso { 
  color: #84cac2;
  background-color: #FFFFFF;
  border-color: #DDDDDD;
}

.btn-cadastro span, .btn-acesso span {
  font-size: 10px !important;
  font-weight: normal;
  line-height: 10px
}


.btn-primary:hover, .btn-cadastro:hover {
    color: #84cac2;
    background-color: #FFFFFF;
    border-color: #DDDDDD;
}

.btn-primary:active, .btn-primary.active, 
.open > .dropdown-toggle.btn-primary, 
.btn-primary:focus, 
.btn-primary.focus, 
.btn:focus, 
.btn:active:focus, 
.btn.active:focus, 
.btn.focus, 
.btn:active.focus, 
.btn.active.focus {
    color: #84cac2;
    background-color: #FFFFFF;
    border-color: #DDDDDD;
}

.btn-default{
  font-size: 20px;
  padding: 12px 36px;
}

.btn-default:hover, .btn-acesso:hover {
    color: #FFFFFF;
    background-color: #84cac2;
    border-color: #84cac2;
}

.btn-default:active, .btn-default.active, .open > .dropdown-toggle.btn-default, .btn-default:focus, .btn-default.focus, .btn:focus, .btn:active:focus, .btn.active:focus, .btn.focus, .btn:active.focus, .btn.active.focus, .btn-default:active:hover, .btn-default.active:hover, .open > .dropdown-toggle.btn-default:hover, .btn-default:active:focus, .btn-default.active:focus, .open > .dropdown-toggle.btn-default:focus, .btn-default:active.focus, .btn-default.active.focus, .open > .dropdown-toggle.btn-default.focus{
    color: #FFFFFF;
    background-color: #84cac2;
    border-color: #84cac2;
}

.logo{
  margin: 25px 0;
}

.navbar {
    position: relative;
    min-height: 80px;
    border: 1px solid transparent;
}

.navbar-default{
  font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 400;
  font-size: 14px;
  margin-bottom: 0;
  background: #FFFFFF;
  border: 0;
}

.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus{
  background-color: #84cac2;
  border-bottom: 3px solid #84cac2;
  color: #FFFFFF
}

.navbar-nav {
    margin: 0 -15px;
    border-bottom: 1px solid #84cac2
}

.navbar-header { margin-bottom: 30px; }

.container-fluid > .navbar-collapse { margin-bottom: 0; }

.nav > li { border-bottom: 1px solid #E7F6EF }

.nav > li:hover { background:#efefef }

#frase{
  padding: 7px 0; 
  text-align: center;
  background-color: #e1e1e1;
  border-bottom: 4px solid #84cac2;
}

#frase h2{color:#222222;font-weight: 600; text-transform: inherit}

.mask-bottom {
  position: relative;
  width: 100%;
  height: 450px;
  margin: 0;
  padding: 0;
}
.dest-image{
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-size: cover;
  background-position: center center;
  box-sizing: border-box;
  z-index: 3
}



.box, .box-internas{
  position: relative;
  width: 100%;
  padding: 20px 40px;
  font-size: 17px;
  color: #ffffff;
  z-index: 4;
  background: #2b897e;
  opacity: .95;
}



.box h2, .box-internas h2 { 
  font-size: 36px; 
  margin-top: 10px 
}

#rat-x-fap{
  padding: 10px 0 50px;
  text-align: center;
 
}

#rat-x-fap .slogan{
  position: relative;
  display: inline-block;
  padding: 20px 50px;
  color: #fff;
  background: #84cac2;
}

#rat-x-fap .slogan h2{ font-weight: 500}

#conteudo-home {
  font-size: 18px
}

#conteudo-home h3{
  font-size: 44px
}

#conteudo-home .btn { margin-top: 30px }

.mask-img {
    position: relative;
    width: 100%;
    height: 230px;
    margin: 30px 0 0 0;
    padding: 0;
  }

  .cont-image{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    box-sizing: border-box;
    z-index: 3
  }

#conteudo-internas{
  padding: 0;
  margin: 10px 0 0 0;
} 

#conteudo-internas h1, 
#conteudo-internas h2, 
#conteudo-internas h3, 
#conteudo-internas h4, 
#conteudo-internas h5, 
#conteudo-internas h6{
  
  margin:40px 0 30px 
}

#conteudo-internas .mask-img{
    margin-bottom: 20px
}

#conteudo-internas .panel-group { margin-top: 20px }
#conteudo-internas .panel-heading { padding: 0 }

#conteudo-internas .panel-heading a { color: #84cac2 }

#conteudo-internas .panel-heading a:hover,
#conteudo-internas .panel-heading a:focus,
#conteudo-internas .panel-heading a:visited { 
  text-decoration: none!important;
   }

#conteudo-internas .panel-title {
  margin:0;
  padding: 10px 15px;
  font-weight: 500
}

#conteudo-internas .panel-group .panel{ 
  margin-bottom: 20px;
  border-radius: 0 
}

#conteudo-internas .panel-default > .panel-heading:hover {
    color: #fff !important;
    background-color: #84cac2;
    border-color: #84cac2;
    border-radius: 0 
}
#conteudo-internas .panel-default > .panel-heading:hover > a { color: #fff }

#conteudo-internas .list-group-item-heading{
  margin:0;
  padding: 10px 0;
  font-weight: 500;
}
#conteudo-internas .list-group-item{ 
  border-radius: 0 
}

#conteudo-internas .list-group-item.active .list-group-item-text, 
#conteudo-internas .list-group-item.active:hover .list-group-item-text, 
#conteudo-internas .list-group-item.active:focus .list-group-item-text {
    color: #ffffff;
    font-size: 18px
}

#conteudo-internas .list-group .text-primary{
  font-weight: 500;
  word-break: break-word;
}

#conteudo-internas .list-group-data { color: #0095c9 }

address {
  padding: 0;
  margin: 50px 0 0;
  background: #84cac2;
  color: #fff;
  font-size: 16px
}

address a {
  color: #fff;
}
address a:hover {
  color: #E7F6EF;
  text-decoration: none
}

address > div > div > div{
  margin: 10px 0;
}

.vertical-center {
  text-align: center;
  vertical-align: middle;
  width: inherit;
}

address > div > div > div > div > img { display: inline-block !important}

/* AJUSTE APENAS PARA TABLET */
@media(min-width: 767px) and (max-width: 991px){
  address{font-size: 12px}
}

@media(min-width: 767px){
  /* address { margin: 0 } */
  
  address .vertical-center {
    display: table-cell;
    text-align: left;
    height: 90px;
  }
  
  address > div > div > div.col-sm-1.col-sm-push-5.hidden-xs > div { text-align: center }
}

footer{
  padding: 35px 0 0;
  margin: 35px 0 35px;
  border-top: 1px solid #CCCCCC
}
/* 
==================================================
RESPONSIVE
==================================================
 */

 #topo { 
  border-top: 1px solid #ccc;
  padding-bottom: 20px;
 }

@media (min-width: 767px){
   #topo { 
  border-bottom: 1px solid #ccc;
  padding-bottom: 0px;
 }

 .btn-cadastro, .btn-acesso { 
  margin-top: 30px;
}

  .btn-primary {
    color: #fff;
    background-color: #84cac2;
    border-color: #84cac2;
  }

  .margin-top-25{ margin-top: 12px }
  .margin-top-50{ margin-top: 25px }
  .margin-top-75{ margin-top: 0 }

  .navbar { min-height: 55px }

  .navbar-collapse.collapse{
    display: inline-block !important
  }

  .navbar-default .navbar-nav > .active > a, 
  .navbar-default .navbar-nav > .active > a:hover, 
  .navbar-default .navbar-nav > .active > a:focus{
    background-color: #FFFFFF;
    border-bottom: 3px solid #84cac2;
    color: inherit;
  }

  .navbar-nav {
    border-bottom: 0;
    margin-bottom: 0;
  }

  .nav > li { border-bottom: 0 }

  .nav > li > a{
    padding: 10px 10px 5px;
    font-size: 14px
  }

  .nav > li.active { border-bottom: 0 !important }

  .nav > li:hover{
    background-color: #FFFFFF;
    border-bottom: 3px solid #efefef 
  }

  .navbar-nav > li:last-of-type {
      margin-right: 20px ;
      /* padding-right: 10px  */
  }


  .divisor-right, .divisor-left{
    position: absolute;
    width: 400px;
    height: 8px;
    background: #84cac2;
    z-index: 5555;
  }
  .divisor-right{
    top: 130px;
    left: 50%;
  }
  .divisor-left{
    top: 130px;
    left: -50%;
  }

  .mask-bottom, .mask-bottom-internas {
    position: relative;
    width: 100%;
    
    margin: 0;
    padding: 0;
      /* mask: url('../img/mask-bottom.svg') center bottom;
      mask-size: cover;
      mask-repeat: repeat-x;
      -webkit-mask: url('../img/mask-bottom.svg') center bottom;
      -webkit-mask-size: cover;
      -webkit-mask-repeat: no-repeat; */
  }

   .mask-bottom {
    height: 500px;
   }

   .mask-bottom-internas {
    height: 350px;
   }

   .box, .box-internas {
    position: absolute;
    width: auto;
    left: 60px;
    /* height: 440px; */

  }

  .box { width: 400px; top: 35px; }

  .box-internas { 
    top: 0px;
  -ms-transform: skew(-12deg); /* IE 9 */
  -webkit-transform: skew(-12deg); /* Chrome, Safari, Opera */
  transform: skew(-12deg); /* Standard syntax */
   }

  .dest-image {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-size: cover;
    background-position: bottom right;
    background-repeat: no-repeat;
    box-sizing: border-box;
    z-index: 3;
  }

  .mask-img {
    position: relative;
    width: 100%;
    height: 330px;
    margin: 0;
    padding: 0;
      mask: url('../img/mask-img-direita.svg') center center;
      mask-size: contain;
      mask-repeat: no-repeat;
      -webkit-mask: url('../img/mask-img-direita.svg') center center;
      -webkit-mask-size: contain;
      -webkit-mask-repeat: no-repeat;
  }

  .cont-image{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-size: contain;
    background-position: center center;
    box-sizing: border-box;
    z-index: 3
  }

  #conteudo-home p { margin-top: 40px }

  #conteudo-internas .img-right {
    width: 50%;
    float: right;
}

  #conteudo-internas .img-left {
      width: 50%;
      margin-right: 20px;
      float: left;
  }

  #conteudo-internas .mask-img{
    height: 210px;
    margin-bottom: 0;
  }
  
} /* FIM RESPONSIVE 767 */

@media(min-width: 992px){
   .nav > li > a{
    padding: 18px 12px 4px;
    font-size: 14px
  }

  .btn-primary{ padding: 12px 20px }

  .box, .box-internas{
    left: 100px;
  }
  .margin-top-25{ margin-top: 12px }
  .margin-top-50{ margin-top: 20px }
  .margin-top-75{ margin-top: 30px }

   .mask-bottom-internas {
    height: 400px;
   }

  #conteudo-internas .mask-img{
    height: 260px;
  }

}/* FIM RESPONSIVE 992 */

@media(min-width: 1200px){
  /* .box, .box-internas{
    left: 50px;
  } */
  .margin-top-25{ margin-top: 25px }
  .margin-top-50{ margin-top: 50px }
  .margin-top-75{ margin-top: 90px }

  #conteudo-internas .mask-img{
    height: 320px;
  }

  .mask-bottom-internas {
    height: 450px;
   }

}/* FIM RESPONSIVE 992 */

@media(min-width: 1440px){
.mask-bottom-internas {
    height: 500px;
   }
  }

@media (min-width: 767px) and (max-width: 991px){
  .nav > li > a {
    padding: 18px 5px 2px;
    /* font-size: 12px; */
  }
  .btn-primary {
    margin-top: 5px;
    padding: 5px 7px;
    font-size: 12px;
  }
}