:root {
  --color-primary: rgb(33, 174, 228) ;
  --color-secondary: #F2EB3E; }

.color-primary, .text-primary { color: var(--color-primary)!important }
.color-secondary, .text-secondary { color: var(--color-secondary)!important }

.bg-primary { background: var(--color-primary) !important }
.bg-secondary { background: var(--color-secondary) !important }

.btn-outline-primary {
  border: 1px solid var(--color-primary);
  color: var(--color-primary)
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active {
  background: var(--color-primary);
  color: #FFF !important
}

.bg-light {background: rgb(200, 201, 202,.25) !important }

body { 
  overflow-x: hidden;
  position: relative;
  font-family: "Poppins", Sans-serif;
  font-size: 12pt;
  font-weight: 400;
  color: #111 }

a,
a:hover { color: #111 }  

.rounded-2 { border-radius: .5rem }



/* wrapper  
//////////////////////////////////////////////////*/
.wrapper {  padding: clamp(3.25rem,5vw, 5rem) 0  }

.container { max-width: 1278.98px }

@media(max-width:767.98px){
  section { overflow-x: hidden }
  .container { padding: 0 1rem }
}



/* heading / text
//////////////////////////////////////////////////*/
h1 { 
  margin-bottom: clamp(2rem, 1rem + 2vw, 4rem);
  font-size: clamp(175%, 5vw, 225%) }

h1 small { 
  font-weight: bold;
  font-size: 50% }  

h1 > small { letter-spacing: normal }

h2 { 
  margin-bottom: clamp(1rem, 1rem + 2vw, 2rem);
  font-size: clamp(150%, 5vw, 175%) }

h3 { 
  margin-bottom: clamp(1rem, 1rem + 2vw, 1.5rem);
  font-size: clamp(125%, 5vw, 150%) }

h4 { 
  margin-bottom: clamp(1rem, 1rem + 2vw, 1.5rem);
  font-size: clamp(112.5%, 5vw, 125%) }

p, li { 
  font-size: clamp(87.5%, 2vw, 100%)  }

p, ul, ol, li { margin-bottom: clamp(1rem, 1rem + 2vw, 1.5rem) }

p ~ h2,
ul ~ h2, 
ol ~ h2 { margin-top: clamp(1.25rem, 1rem + 2vw, 2.5rem) }  

.small p,
.small,
small { line-height: normal !important }

p.large,
.large p { font-size: 112.5% }

@media(max-width:767.98px){
  h1 { letter-spacing: -1px }
  h2 { letter-spacing: -.5px }
  h3 { letter-spacing: -.25px }
  h4, h5, h6 { letter-spacing: normal }
}



/* header 
//////////////////////////////////////////////////*/
header {
  z-index: 1;
  position: relative !important;
}

/* .home header {
  background: rgb(17,17,17);
  background: linear-gradient(180deg, rgba(17,17,17,1) 25%, rgba(17,17,17,0) 100%);
}

.inner header {
  background: #222;
  box-shadow: 0 .5rem .5rem rgba(0,0,0,0.05);
} */

header .nav-link { 
  font-weight: bold;
  color: #333 }

/* .inner header .nav-link { color: #333 } */

header .nav-link.active,
header .nav-link:hover,
header .nav-item.show > a { 
  font-weight: bold;
  color: var(--color-primary) }

.navbar-toggler { 
  background: var(--color-primary);
  width: 45px;
  padding: 10px;
  border: 0;
  border-radius: 0 }

.navbar-toggler span { 
  background: var(--color-secondary);
  height: 3px;
  display: block }

header .navbar-toggler span { background: #FFF }

header .navbar-toggler span:not(:last-of-type) { margin: 0 0 4px 0 }

header .navbar-toggler:hover,
header .navbar-toggler:active,
header .navbar-toggler:focus { background: var(--color-secondary) }

header .navbar-toggler:hover span,
header .navbar-toggler:active span,
header .navbar-toggler:focus span { background: #FFF }

.navbar-toggler span:not(:last-of-type) { margin: 0 0 4px 0 }

@media(min-width:992px){ 

  header .navbar-nav > * { 
    margin-left: clamp(.5rem, 1.75vw, .5rem);
    padding-top: 0;
    padding-bottom: 0;
    font-size: 95% }

}

@media(max-width:991.98px){

  header .navbar-collapse { 
    position: absolute;
    z-index: 2;
    top: 110px;
    right: 0;
    min-width: 300px;
    background: var(--color-primary) }

  header .nav-link { 
    margin: 0;
    text-transform: uppercase;
    padding: 0 30px !important;
    color: #FFF !important }

  header .nav-link:hover,
  header .nav-link:focus,
  header .nav-link:active { box-shadow: inset 0 0 100px rgba(255,255,255,0.1) }

  header .dropdown-item { text-align: center }  

  .navbar-nav.delay4 { animation-delay: 0ms !important  }

}

@media(min-width:768px) and (max-width:991.98px){ 

  header .navbar-nav { padding: 15px 0 }
  header .nav-link { padding: 7.5px 30px !important }

}

@media(max-width:575.98px){

  header { 
    padding: 0 2rem !important;
    height: 120px }

  .navbar-brand img { height: 100px }
  
  header .navbar-collapse { 
    position: fixed;
    top: 0;
    left: 0;
    width: 100%  }

  header .navbar-nav {
    justify-content: center;
    width: 100%;
    height: 100vh }  

  header .nav-item { 
    text-align: center;
    width: 100%;
    line-height: 50px }

  header .nav-link,
  header .btn { font-size: 125%  }

}



  

/* hero
//////////////////////////////////////////////////*/
.hero { 
  background: #000;
  position: relative;
  height: 100vh }

.hero-caption { 
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,calc(-50% + 85px)) }

.hero-cover {
  position: absolute;
  width: 100% }

@media(min-width:992px){
  .hero-caption h1,
  .hero-caption div { width: 50% }

  .hero-caption h1 { font-size: 375% }
  .hero-caption p { font-size: 160% }
}
  
@media(max-width:991.98px){
  .hero-cover {
    height: 100vh;
    object-fit: cover }
}



/* about 
//////////////////////////////////////////////////*/
.about {
  background: rgb(255,255,255);
  background: linear-gradient(180deg, rgba(255,255,255,0) 25%, rgba(0,0,0,1) 25%) }

.inner .about { background: #EEE }  

.about .d-flex > div { position: relative }

.about p { opacity: .5 }

@media(min-width:992px){
  .home .about img {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2 }  
}

@media(max-width:1440px){
  .about { background: #000 }
}

@media(min-width:1152px) and (max-width:1440px){
  .home .about img { top: -5rem }
}




/* vantage 
//////////////////////////////////////////////////*/
.home .vantage { padding: clamp(6.25rem, 10vw, 12.5rem) 0 }

.vantage {
  position: relative;
  z-index: 1 }
  
.vantage .row div { margin: 2rem 0 }

.vantage .row div > * { margin-bottom: 1rem }

.vantage h2 {
  letter-spacing: normal; 
  font-weight: bold;
  color:var(--color-primary) }

.vantage p { 
  opacity: .5;
  margin: 0;
  line-height: 1.5;
  font-size: 87.5% }
  
@media(min-width:992px){ 
  .vantage h2 { font-size: 140% }  

  .vantage .row { margin: 0 -3rem }

  .vantage .row > div { padding: 0 3rem }

}




/* services 
//////////////////////////////////////////////////*/
.services { background: #F7F7F7 }
.inner .services { background: var(--color-secondary) }

.services .row > div { 
  border-right: 1px solid #FFF;
  margin-bottom: 1px;
  background: #222 }

.services .row > div > div { 
  transition: all 500ms;
  background: rgb(255,255,255);
  background: linear-gradient(185deg, rgba(255,255,255,0) 36%, rgba(34,34,34,1) 70%);
  color: #FFF;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 5rem 2.5rem 2.5rem 2.5rem }

.services .ratio { 
  transition: all 300ms;
  opacity: .25 }

.services .row > div:hover .ratio { opacity: .5 }

.services h2 { 
  margin-bottom: 1rem;
  letter-spacing: normal; 
  font-weight: bold;
  color: var(--color-secondary) }

.services p { 
  opacity: .85;
  font-size: 87.5% }

.services .row > div > div > * {
  transition: all 300ms;
  position: relative;
  top: 0 }

.services .row > div:hover > div  {
  transition: all 500ms;
  background: rgb(255,255,255);
  background: linear-gradient(185deg, rgba(255,255,255,0) 26%, rgba(34,34,34,1) 60%) }

.services .row > div:hover > div > h2   { top: -.5rem }

.services .row > div:hover > div > p    { 
  opacity: 1;
  top: -1.15rem }

.services .row > div:hover > div > .btn { top: -1.5rem }

@media(min-width:992px){ 
  .services h2 { font-size: 180% }  
}

@media(max-width:991.98px){
  .services .ratio { padding-top: 150% }
}

/* blog 
//////////////////////////////////////////////////*/
.post-header h1 { text-transform: initial }

.post-header small { 
  line-height: 1.4;
  display: block;
  color: #AAA }

.post-body { margin: 30px auto }

.post-body > * > * { margin-bottom: 1rem }

.inner .posts { background: #EEE }

.posts a { 
  color: #111;
  text-decoration: none }

.posts h2 { 
  letter-spacing: normal;
  font-size: 112.5% }

.posts a:hover h2 { text-decoration: underline }

@media(min-width:768px){

  .post-header h1 { 
    margin-bottom: 1rem;
    font-sizefont-size: 300% }

  .post-header p {
    margin-bottom: 1rem;
    line-height: normal;
    font-size: 150% }

  .post-header { 
    width: 768px;
    margin: 0 auto }
  
  .post-body { width: 768px }

  .post-body > * { font-size: 112.5% }

  .post-body h2 { 
    line-height: 120%;
    font-size: 240%;
    text-transform: initial }
  
  .post-body h3 { 
    line-height: 120%;
    font-size: 180%;
    text-transform: initial }
  
  .posts .row { margin: 0 -60px }

  .posts .row > * { padding: 0 60px }

}





/* area 
//////////////////////////////////////////////////*/
.area.bg-light { background: #F3F3F3 !important } 

.area h2.position-absolute {
  opacity: 1;
  margin: 0;
  line-height: 1;
  z-index: 10000;
  display: inline;
  padding: 1rem;
  background: var(--color-secondary) }

.area.bg-light { 
  background: #F6F6F6;
  color: #111 }

.area-link {
  display: block;
  overflow: hidden;
  position: relative;
  background: #111;
  font-size: 110%;
  font-weight: bold;
  text-decoration: none !important;
  color: #FFF;
  margin: 0 .5rem 1rem .5rem;
  text-align: center }

.area-link .local {
  position: absolute;
  width: 80%;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%) }

.area-link img { 
  transition: all 300ms;
  opacity: .15 }

.area-link:hover { color: var(--color-secondary) }

.area-link:hover img { opacity: .35 }

.area .list-group { text-transform: uppercase }

.list-group { border-radius: 0 }

.list-group-item { 
  border: 0;
  line-height: 1.5;
  padding: .25rem 0;
  background: none }

.itinerario { 
  padding: 2rem;
  background: #FFF }

@media(min-width:768px){
  .area-link { width: calc(20% - 1rem) }

  .scroll {
    padding-right: 2rem;
    max-height: 617px;
    overflow-y: scroll }
}

@media(max-width:767px){
  .area-link { height: 100px }
}



/* entertainment 
//////////////////////////////////////////////////*/
.entertainment { background: var(--color-primary) }



/* contact 
//////////////////////////////////////////////////*/
.base,
.inner .contact { background: #222 url(img/bg-base2.jpg) no-repeat center top }

.home .contact .border-top { border-color: rgba(255,255,255,.1) !important }




  







/* footer 
//////////////////////////////////////////////////*/
.footer-summary {
  padding: clamp(3rem, 10vw, 7rem) 0;
  background: #FFF }

.footer-mapsite a { color: #666 }

.footer-social > div { 
  align-items: center;
  line-height: 1 }

.footer-social i { margin-right: 10px }

.footer-social small { 
  opacity: .5;
  font-size: 87.5% }

.footer-copyright { 
  color: #FFF;
  background: #222;
  font-weight: 400;
  padding: clamp(3rem, 10vw, 5rem) 0 }

.footer-copyright a.brand-flexpoint {
  display: inline-block;
  text-indent: -1000000px;
  background: url(https://www.flexpoint.com.br/addons/flexpoint-site-sign.png) top;
  width: 25px;
  height: 27px } 
  

@media(min-width:1025px) and (max-width:1152px){
  .footer-mapsite { height: 90px }
}

@media(min-width:769px) and (max-width:1024px){
  .footer-mapsite { height: 120px }
}
  
@media(min-width:769px){
  .footer-mapsite { height: 56px }
  
  .footer-mapsite a { 
    font-size: 87.5%;
    margin-right: 4rem;
    line-height: 2;
    white-space: nowrap  }
}

@media(max-width:768px){
  .footer-summary a { 
    margin-bottom: 7.5px;
    display: block }
}





  

/* form 
//////////////////////////////////////////////////*/
/* .form-control,
.custom-select { 
  border: 1px solid #F6F6F6;
  border-radius: 0;
  background-color: #FFF;
  box-shadow: inset 2px 2px 4px rgba(0,0,0,.1);
  height: 48px;
  padding: .75rem 1.25rem } */

::placeholder  { 
  font-size: 87.5%;
  font-weight: normal;
  color: #BBB }

.btn { border: 0 }

.fw-bold { font-weight: bold }

.btn-sm { 
  font-size: 87.5%;
  padding: .50rem 1rem }

.btn-lg { 
  font-size: clamp(100%, 2vw, 125%);
  padding: 1.25rem 1.5rem }

.btn-primary    { background: var(--color-primary) !important } 
.btn-secondary  { background: var(--color-secondary) !important } 
.btn-link       { color: var(--color-primary) !important } 

.btn-primary-outline {
  border: 2px solid var(--color-primary);
  color: #222 } 

.btn-primary-outline:hover,
.btn-primary-outline:focus,
.btn-primary-outline:active {
  background: var(--color-primary);
  color: #FFF } 
  
.btn-secondary-outline {
  border: 2px solid var(--color-secondary);
  color: var(--color-secondary) }  

.btn-secondary-outline:hover,
.btn-secondary-outline:active,
.btn-secondary-outline:focus {
  background: var(--color-secondary);
  color: #FFF }  

.btn-whatsapp {
  background: #31BE42;
  color: #FFF !important }  

.btn-whatsapp-outline {
  border: 2px solid #31BE42;
  color: #31BE42 }  

.btn-whatsapp-outline:hover,
.btn-whatsapp-outline:active,
.btn-whatsapp-outline:focus {
  background: #31BE42;
  color: #FFF }  

.btn-light-outline {
  border: 3px solid #999;
  color: #999 }  

.btn-light-outline:hover,
.btn-light-outline:active,
.btn-light-outline:focus {
  background: #999;
  color: #FFF }  

.btn-white {
  background: #FFF;
  color: #999 }  

.btn-white:hover,
.btn-white:active,
.btn-white:focus { background: none }  

.btn-white-outline {
  border: 1px solid #FFF;
  color: #FFF }  

.btn-white-outline:hover,
.btn-white-outline:active,
.btn-white-outline:focus { background: rgba(255,255,255,.75)  }  

.btn:active,
.btn:hover,
.btn:focus { box-shadow: inset 0 0 100px rgba(255,255,255,0.2) }



/* global 
//////////////////////////////////////////////////*/
.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both }



/* aspects ratio
//////////////////////////////////////////////////*/
[class*=ratio]{
  position: relative;
  overflow: hidden;
  display: block }

[class*=ratio] img {
  position: absolute;
  top: 50%;
  left: 50%;
  height: 100%;
  width: 100%;
  transform: translate(-50%, -50%);
  object-fit: cover }

.ratio-1p1  { padding-top: 100% }
.ratio-4p3  { padding-top: 75% }
.ratio-3p2  { padding-top: 66.66% }
.ratio-8p5  { padding-top: 62.5% }
.ratio-16p9 { padding-top: 56.25% }
.ratio-9p16 { padding-top: 177% }


  


/* ANIMATION: DELAY / DURATION
//////////////////////////////////////////////////////////////////////////////////////////*/
.delay1   { animation-delay: 500ms !important }
.delay2   { animation-delay: 1000ms !important }
.delay3   { animation-delay: 1500ms !important }
.delay4   { animation-delay: 2000ms !important }
.delay5   { animation-delay: 2500ms !important }
.delay6   { animation-delay: 3000ms !important }
.delay7   { animation-delay: 3500ms !important }
.delay8   { animation-delay: 4000ms !important }
.delay9   { animation-delay: 4500ms !important }
.delay10  { animation-delay: 5000ms !important }
.delay11  { animation-delay: 6000ms !important }

.duration100  { animation-duration: 100ms !important }
.duration200  { animation-duration: 200ms !important }
.duration300  { animation-duration: 300ms !important }
.duration400  { animation-duration: 400ms !important }
.duration500  { animation-duration: 500ms !important }
.duration600  { animation-duration: 600ms !important }
.duration700  { animation-duration: 700ms !important }
.duration800  { animation-duration: 800ms !important }
.duration900  { animation-duration: 900ms !important }
.duration1000 { animation-duration: 1000ms !important }
.duration2000 { animation-duration: 2000ms !important }
.duration3000 { animation-duration: 3000ms !important }
.duration4000 { animation-duration: 4000ms !important }
.duration5000 { animation-duration: 5000ms !important }
.duration6000 { animation-duration: 6000ms !important }
.duration7000 { animation-duration: 7000ms !important }
.duration8000 { animation-duration: 8000ms !important }
.duration9000 { animation-duration: 9000ms !important }
.duration10000 { animation-duration: 10000ms !important }
.duration20000 { animation-duration: 20000ms !important }
.duration30000 { animation-duration: 30000ms !important }

.parallax {
  display: block;
  min-height: 100%;
  position: relative;
  overflow: hidden }

.parallax img { position: absolute }




/* SVG ICONS
//////////////////////////////////////////////////////////////////////////////////////////*/
.icon { 
  display: inline-block;
  position: relative }

.icon-16 { width: 16px; height: 16px }
.icon-24 { width: 24px; height: 24px }
.icon-32 { width: 32px; height: 32px }
.icon-48 { width: 48px; height: 48px }
.icon-64 { width: 64px; height: 64px }
.icon-96 { width: 96px; height: 96px }

.icon.color-primary   { fill: var(--color-primary) }
.icon.color-secondary { fill: var(--color-secondary) }
.icon.text-white      { fill: #FFF }
.icon-whatsapp        { fill: #03B35B }




/* CSS SPRITES
//////////////////////////////////////////////////////////////////////////////////////////*/
.icon-css { 
  display: inline-block;
  position: relative;
  background: url("img/icons.png") top left no-repeat }

.icon-v6{ width:46px; height:50px; background-position:0 0; }
.icon-v4{ width:46px; height:50px; background-position:0 -50px; }
.icon-v8{ width:46px; height:50px; background-position:0 -100px; }
.icon-v2{ width:50px; height:50px; background-position:0 -150px; }
.icon-v7{ width:43px; height:50px; background-position:0 -200px; }
.icon-v5{ width:48px; height:50px; background-position:0 -250px; }
.icon-v1{ width:50px; height:50px; background-position:0 -300px; }
.icon-v3{ width:50px; height:50px; background-position:0 -350px; }

  
  



::-webkit-scrollbar { width: 5px }
::-webkit-scrollbar-track { background: #CCC }
::-webkit-scrollbar-thumb { background: var(--color-primary) }
::-webkit-scrollbar-thumb:window-inactive { background: var(--color-primary) }


.gap-2 { gap: .5rem }
.gap-3 { gap: 1rem }

label { font-size: 87.5% }

.rounded-1 { border-radius: .25rem }