/*! HTML5 Boilerplate v8.0.0 | MIT License | https://html5boilerplate.com/ */

/* main.css 2.1.0 | MIT License | https://github.com/h5bp/main.css#readme */
/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */
*,
html{
  padding: 0;
  margin: 0;
}
html {
  color: #222;
  font-size: 1em;
  line-height: 1.4;
  /*overflow-y:overlay;*/
  overflow-x: hidden;
}

/*
 * Remove text-shadow in selection highlight:
 * https://twitter.com/miketaylr/status/12228805301
 *
 * Vendor-prefixed and regular ::selection selectors cannot be combined:
 * https://stackoverflow.com/a/16982510/7133471
 *
 * Customize the background color to match your design.
 */
 :root{
  --primary-color: #C7A47C;
  --light-blue: #1B516F;
  --dark-blue: #16304B;
  --light:#FAF7F3;
  --white:#fff;
  --dark-brown:#333633;
 }

::-moz-selection {
  background: #b3d4fc;
  text-shadow: none;
}

::selection {
  background: #b3d4fc;
  text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */

hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 1em 0;
  padding: 0;
}

/*
 * Remove the gap between audio, canvas, iframes,
 * images, videos and the bottom of their containers:
 * https://github.com/h5bp/html5-boilerplate/issues/440
 */

audio,
canvas,
iframe,
img,
svg,
video {
  vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
  resize: vertical;
}
body{
  background-color: var(--light);
  font-family: 'Gilroy';
  font-weight: normal;
  overflow-x: hidden;
}
img{
  width: 100%;
  height: auto;
}
/*#investir,
#banner-investir{
  display: none;
}*/
.plyr__video-embed{height: 100vh!important;}
header{
  background-color: var(--primary-color);
  padding: 1.5em 0;
}
header .logo img{
  width: 100%;
  height: auto;
}
header .menu{
  text-align: right;
  padding-top: 9px;
}
header nav ul{
  margin: 0;
  padding: 0;
}
header nav ul li{
  display: inline-block;
  width: auto;
  margin: 0 1.5%;
}
header nav ul li a{
  font-weight: 500;
  font-size: 0.9rem;
  line-height: 1.1rem;
  letter-spacing: 1.9px;
  color: var(--white);
  text-decoration: none;
}
section.banner-principal img{
  width: 100%;
  height: auto;
}
nav.change-page a.change-content{
  text-decoration: none;
  font-weight: bold;  
  font-size:1.1rem;
  text-transform: uppercase;
  color: var(--dark-blue);
  letter-spacing: 2px;
  border: 0px;
  display: inline-block;
  transition: 0.5s;
  position: relative;
  line-height: 55px;
}
nav.change-page a.morar{
    padding-right:35px;
    cursor: pointer;
    width:291px;
    height: 56px;
}
a.investir{
  padding-left: 31px;
  cursor: pointer;
  margin-left: -52px;
  width:304px;
  height: 56px;
}
#morar a.morar{
    background: url(../img/_button-morar-ativo.png) no-repeat left center transparent;
}
#morar a.investir{
    background: url(../img/_button-investir.png) no-repeat left center transparent;
}
#investir a.morar{
  background: url(../img/_button-morar.png) no-repeat left center transparent;
}
#investir a.investir{
  background: url(../img/_button-investir-ativo.png) no-repeat left center transparent;
}

nav.change-page button.morar:hover{
  color: var(--white)
}
button.investir:hover{
  color: var(--primary-color)
}
section h2{
  color: var(--primary-color);
  text-transform: uppercase;
  /*font-size: 3.5rem;
  line-height: 5.6rem;*/
  /*font-size:2.4rem;
  line-height:3.5rem; */
  font-size: 1.2rem;
  line-height: 2rem;
  font-weight: 500;
  text-align: center;
  letter-spacing: 2px;
}
section p{
  color: var(--dark-blue);
  /*font-size: 1.2rem;
  line-height: 2.5rem;*/
  font-size:0.8rem;
  line-height:1.6rem;
  color:var(--light-blue);      
  font-weight:normal;
  letter-spacing: 2px;
  text-transform: uppercase;
}
#investir #sobre p{
  color: var(--dark-brown);
}
section a{
    text-decoration: none;
    padding: 10px 25px;
    font-weight: bold;
    letter-spacing: 2px;
    font-size:0.8rem;
    margin-top: 2em;
    display: inline-block;

    -webkit-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
}
section a.gold-bt{
  background-color: var(--primary-color);
  border:2px solid var(--primary-color);  
}
#morar section a.gold-bt{
  color: var(--dark-blue);
}

#investir section a.gold-bt{
  color: var(--dark-brown);
}
#morar section a.blue-bt{
  background-color: var(--dark-blue);
  border:2px solid var(--dark-blue);
}
#morar section a.blue-bt,
#investir section a.brown-bt{
  color: var(--primary-color);
}
#investir section a.brown-bt{
  background-color: var(--dark-brown);
  border:2px solid var(--dark-brown);
}
#investir section a.brown-bt:hover,
#morar section a.blue-bt:hover,
.formulario #btn_enviar:hover,
#morar section a.gold-bt:hover,
#investir section a.gold-bt:hover{
  background-color:var(--white);
}
#investir section a.brown-bt:hover{
  color: var(--dark-brown);
}
#morar section a.blue-bt:hover{
  color: var(--dark-blue);
}
#morar section a.gold-bt:hover,
#investir section a.gold-bt:hover,
.formulario #btn_enviar:hover{
  color: var(--primary-color);
}
#morar p,
#morar h3{
  color:var(--dark-blue);
}
#morar h3.mobiliadas{margin: 0}
.experiencias h2{
  margin-bottom: 50px;
}
#morar .estrutura p{color:var(--white)}
.change-page{
  text-align: center;
  margin:3.4em 0;
}
#morar .experiencias .content{
  max-width: 1200px;
  margin: 0 auto;
}

#morar #hospital .content{
  max-width:1058px;
  margin: 0 auto;
  display: inline-block;
  padding-bottom: 100px;
}
.experiencias h3{
  color: var(--dark-blue);
  /*font-size: 1.5rem;
  line-height:3rem;*/
  font-size:0.8rem;
  line-height:1.6rem;  
  font-weight: normal;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding-bottom:40px;
}
.video img{
  width: 100%;
  height: auto;
  margin: 30px 0 0 0;
}
#morar #sobre a{padding:0}
.video img { width: 100vw; }

.experiencias .col-4 img{
  width: auto;
  height: auto;
  padding-right: 30px;
}
.empreendimento-completo{
  background-color: var(--light);
  display: inline-block;
}
/*.empreendimento-completo .col-6.banner{margin: 0}*/
.empreendimento-completo h2{
  font-size:1.2rem;
  text-align: left;
  line-height:2rem;
  letter-spacing: 1px;
}
/*#morar .empreendimento-completo h2{
  font-size:2.4rem;
line-height: 2.75rem;
}*/

.empreendimento-completo .text img{
  width: auto;
  height: auto;  
  margin-top: 1em;
}
/*.empreendimento-completo .text .col-11{
  max-width: 400px;
  padding-left: 3%;
}
.empreendimento-completo .text .col-11.bigger{
  padding-left: 0;
  margin-left:11px;
}*/

.empreendimento-completo .text h3{
  color:var(--light-blue);
  font-size:0.8rem;
  line-height:1.6rem;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
}
#morar .empreendimento-completo .text h3{
  /*font-size: 1rem;
  line-height:1.8rem;*/
  font-size:0.8rem;
  line-height:1.6rem;
}
#morar .empreendimento-completo .beneficios{
  padding-top:8%;
}
#morar .empreendimento-completo .beneficio{
  margin: 15px 0;
  display: inline-block;
}
.estrutura{
  background-color: var(--dark-blue);
  padding: 100px 0;
  text-align: center;
  margin-top: -6px;
  display: inline-block;
  width: 100%;
}
#investir .estrutura{
  padding: 100px 0 0px 0;
}
.estrutura,
#investir .clube-de-lazer,
#investir #estrutura.estrutura{
  margin-top: -7px;
}
#morar .estrutura{
  padding-bottom: 0;
}
.estrutura h2{
  text-align: left;
  /*font-weight: 500;
  font-size:2.7rem;
  line-height:3.2rem;
  letter-spacing: 1px;*/
  margin: 15px 0 35px 0;
}
.estrutura p{
  color: var(--white);
  text-align: left;
  /*font-size: 1.5rem;
  line-height: 2rem;*/
  letter-spacing: 2px;
}
.estrutura .col-3,
.estrutura .col-2,
.estrutura .col-4{
  text-align: center;
}
.estrutura .col-3 img{
  width: auto;
  height: auto;
  margin-bottom: 20px;
}
.estrutura .lista{
  margin-bottom: 80px;
}
.estrutura .lista p{
  /*font-size: 1.27rem;
  line-height: 2.1rem;*/
  text-align: center;
}
.estrutura a.primary-bt,
a.primary-bt{
    background-color: var(--primary-color);
    color: var(--dark-blue);
    text-decoration: none;
    padding: 10px 25px;
    font-weight: bold;
    letter-spacing: 2px;
    font-size: 1rem;
    margin-top: 1.8em;
    display: inline-block;
}
.estrutura a.primary-bt{
  margin-top: 3.5em;
}
.servicos-pay-per-use{
  background-color: var(--primary-color);
  padding: 100px 0 50px 0;
}
.servicos-pay-per-use,
#morar .experiencias{
  display: inline-block;
  width: 100%;
}
.servicos-pay-per-use h2{
  color: var(--white);
  /*font-size:2.44rem;
  line-height:3rem;*/ 
  margin-bottom: 0.5rem;
}
.servicos-pay-per-use p{
  text-align: center;
  margin: 0;
  /*font-size: 1.57rem;
  font-weight: normal;*/
}
.servicos-pay-per-use img{
  width: auto;
}
.servicos-pay-per-use article{
  margin-top: 50px;
}
.servicos-pay-per-use div{
  text-align: center;
}
.servicos-pay-per-use div h4{
  color: var(--white);
  font-weight: 500;
  font-size:0.8rem;
  line-height:1.2rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-top:25px;
}
.servicos-pay-per-use .col-4 p{
  border-right: 1px solid var(--white);
  /*font-size: 1.3rem;
  line-height: 2rem;*/
  font-weight: normal;
}
#investir #estrutura.estrutura{padding: 0 0 100px 0}
/*.servicos-pay-per-use .col-4 p:last-child{
  min-height: 280px;
}*/
.escolhas{
  padding: 100px 0;
  display: inline-block;
  width: 100vw;
  text-align: center;
}
/*.escolhas h2{
  font-size:2.4rem;
  line-height:3.5rem; 
}*/
.escolhas table{
  margin:50px auto 20px auto;
}
.escolhas table td:last-child{
  border-right:0;
  text-align: right;
  font-weight: bold;
  font-size: 1rem;
  line-height:1.6rem;
  text-align: center;
}
.escolhas table td{
  border-right:2px solid var(--primary-color);
  border-bottom:2px solid var(--primary-color);
  padding: 10px 20px;
  margin: 0;
  text-align: center;
  color: var(--light-blue);
}
.escolhas table td:first-child{
  text-align: right;
  font-weight:bold;
  font-size: 1rem;
  line-height:1.2rem;
}
.escolhas tbody tr:last-child td{
  border-bottom: 0;
}
.escolhas table td img{
  width: auto;
  height: auto;
}
.clube-de-lazer{
  background-color: var(--dark-blue);
  padding:50px 0 0 0;
}
#morar .clube-de-lazer,
#morar .apts-planejados {
  padding-top: 50px;
}
#morar .clube-de-lazer p,
#morar .apts-planejados p{
  padding-top:30px;
  padding-bottom:50px;
  margin: 0 auto;
}
#morar #apartamentos.apts-planejados p{
  padding-bottom:50px;
  color:var(--dark-blue);
}
#morar .escolhas img{  
  max-width: 850px;
    margin: 50px 0;
}
.apts-planejados.box2,
#investir .apts-planejados.box2{
  padding-bottom:100px;
}
#morar .clube-de-lazer p,
#morar .apts-planejados p,
#morar .localizacao p,
#investir .clube-de-lazer p,
#investir .apts-planejados p,
#investir .localizacao p{
  text-align: center;
  font-weight: normal;
  color: var(--primary-color);
}
#investir .localizacao p{
  color: var(--white);
}
.apts-planejados.box2{
  padding-top:0;
  text-align: center;
}
.localizacao{
  background-color: var(--dark-blue);
  padding: 50px 0;
}
.localizacao h2{
  margin-bottom:10px;
}
.localizacao p{
  color:var(--white);
  margin: 0;
  font-weight:bold;
}
.formulario{
  background-color: var(--primary-color);
  padding: 50px 0;
}
.formulario h2{
  color: var(--white);
  font-size:1rem;
  line-height:1.6rem;
  text-align: center;
  font-weight:normal;
  letter-spacing: 2px;
  margin-bottom:1em;
}
.formulario input,
.formulario select{
  order: -1;
  border:0;
  padding:10px;
  color: var(--dark-blue);
}
.formulario #mandatory {
  margin-top: 10px;
}
.formulario #btn_enviar{
  background-color: transparent;
  border:1px solid var(--white);
  color:var(--white);
  font-weight: bold;
  font-size:0.8rem;
  line-height: 1.2rem;
  width: 135px;
  letter-spacing: 2px;
  cursor: pointer;
  order: 10;
}
.formulario #btn_enviar:disabled{
  opacity: .7;
  cursor: wait;
}
#cf-turnstile-widget[data-fail] ~ #btn_enviar {
  cursor: not-allowed;
}
.formulario form#mail:invalid #btn_enviar {
  cursor: progress;
}

footer .company{
  background-color: var(--dark-blue);  
  text-align: center;
  position: relative;
}
#morar footer .company p,
#investir  footer .company p{
  color: var(--white);
  font-weight: normal;
  font-size: 0.8rem!important; 
  text-transform: none;
}
footer .company img{
  width: auto;
  height: auto;
}
footer .company img.logo{
   padding: 50px 0;
}
#whats a.bt-whats-morar,
#whats a.bt-whats-investir{
  position: fixed;
  background-color:#2FA84C;
  bottom: 0;
  position: fixed;
  color: var(--white);
  text-decoration: none;
  font-size:0.9rem;
  font-family: 'Roboto Condensed', sans-serif;
  font-weight: 700;
  padding:7px 20px;
  letter-spacing: 2px;
}
#whats a img{margin-left: 10px;width: 25px;}
#whats .bt-whats-morar{
right:25px;
}
#whats .bt-whats-investir{
right:90px;
}



#investir .experiencias{
  text-align: center;
  padding-top: 50px;
  padding-bottom: 100px;
}
#investir #sobre{
  display: inline-block;
  width: 100%;
}
#investir #sobre h2{
    margin-bottom: 0px;
}
/*#investir .experiencias h2,
#investir section h2{
  font-size: 2.4rem;
  line-height: 3.5rem;
  letter-spacing: 1px;
}*/
#investir .experiencias p{
  /*font-size: 1.9rem;
  line-height: 1.35rem;*/
  letter-spacing: 1px;
  padding: 0.7em 0;
}
#investir .experiencias article{
  border-right: 2px solid var(--primary-color);
  margin-top:4em;
}
#investir .experiencias article:nth-child(3),
#investir .estrutura .text .col-4.last,
#morar .servicos-pay-per-use .last p{
  border-right:0;
}
#investir .experiencias article img{
  width: auto;
}
#investir .experiencias article h4,
#investir .experiencias article p{
  font-weight: bold;
  color: var(--dark-blue);
  /*font-size: 1.3rem;
  line-height:2.2rem;  */
}
#investir .experiencias article h4{
  margin-top: 1em;
}
#investir .experiencias article p{
  font-weight: normal;
}
/*#investir .experiencias .boxes{
  display: inline-block;
}*/
#investir .estrutura h2,
#investir .estrutura p,
.estrutura.estrutura-solucao h2,
.estrutura.estrutura-solucao p{
  text-align: center;
}
#investir .estrutura p{
  font-weight: normal;
  padding-top: 1em;
  /*font-size: 1.4rem;*/
}
#investir #estrutura.estrutura p{
  padding-top:0;
}
#investir .estrutura{
  background-color: var(--primary-color);
}
#investir .estrutura h2{
  color: var(--dark-brown);
  text-align:left;
  /*font-size: 2.8rem;*/
}
#investir .estrutura p{
  text-align: left;
  font-weight: normal;
}
#investir .estrutura .text h2{
  text-align: center;
  color: var(--white);
  padding: 100px 0 50px 0;
  /*font-weight:bold;
  font-size: 2.45rem;*/
}
#investir .experiencias article img{padding-right: 0}
#investir .estrutura .text .col-4{
  border-right: 1px solid var(--white);
}
#investir #estrutura.estrutura .text .col-4,
#investir #estrutura.estrutura .text .col-4.last p{border-right:0}

#investir .estrutura .col-4 h4{
  color: var(--white);
  font-size: 1rem;
  letter-spacing: 2px;
  margin-top:1em;
  text-transform: uppercase;
}
#investir #estrutura .col-4 div{
    text-align: center;
}
#investir .estrutura .col-4 p{
  color: var(--dark-brown);
  text-align: center;
}
/*#investir .experiencias a,
#investir .estrutura a,
#investir .apts-planejados a{
    background-color: var(--dark-brown);
    color: var(--primary-color);
    text-decoration: none;
    padding: 10px 25px;
    font-weight: 600;
    letter-spacing: 2px;
    font-size:1.15rem;
    display: inline-block;
} */
#investir .estrutura.estrutura-solucao{
  background-color: var(--dark-brown);
  padding-bottom: 0;
}
#investir .estrutura.estrutura-solucao h2,
#investir .estrutura.estrutura-solucao p{
  background-color: var(--dark-brown);
  text-align: center;
}
#investir .estrutura.estrutura-solucao h2{
  color: var(--primary-color)
}
#investir .estrutura.estrutura-solucao p{
  color: var(--white)
}
#investir .estrutura a{
  margin-top:4em;
}
.estrutura .col-4 img.logo-hospital{max-width:300px}
.estrutura.estrutura-solucao .col-4 img{max-width: fit-content;}
#investir .estrutura.estrutura-solucao h2{margin: 0}
#investir .estrutura.estrutura-solucao{padding: 50px 0;}
#estrutura .col-4 img{width:auto;}
#investir .estrutura.estrutura-solucao .lista{
    display: inline-block;
    width: 100%;
    margin-top: 50px;
    margin-bottom: 0;
}
#investir .clube-de-lazer{
  background-color: var(--dark-brown);
  text-align: center;
}
#investir .clube-de-lazer p{
  /*line-height: 2.35rem;*/
  padding:30px 0 50px 0px;
}
#investir .clube-de-lazer a{
    margin-bottom:3em;
}
#investir .apts-planejados p{
  /*font-size: 1.9rem;*/
  color: var(--dark-brown)
    padding-top:30px;
    padding-bottom:50px;
}
#investir .formulario h2{
  font-size: 1.1rem;
}
#investir .localizacao,
#investir footer .company{
  background-color: var(--dark-brown);
}
#investir .localizacao{
  padding: 80px 0;
} 
#investir .apts-planejados{
  padding:50px 0;
}
/* ==========================================================================
   Author's custom styles
   ========================================================================== */

/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Hide visually and from screen readers
 */

.hidden,
[hidden] {
  display: none !important;
}

/*
 * Hide only visually, but have it available for screen readers:
 * https://snook.ca/archives/html_and_css/hiding-content-for-accessibility
 *
 * 1. For long content, line feeds are not interpreted as spaces and small width
 *    causes content to wrap 1 word per line:
 *    https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
 */

.sr-only {
  border: 0;
  clip: rect(0, 0, 0, 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
  /* 1 */
}

/*
 * Extends the .sr-only class to allow the element
 * to be focusable when navigated to via the keyboard:
 * https://www.drupal.org/node/897638
 */

.sr-only.focusable:active,
.sr-only.focusable:focus {
  clip: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  position: static;
  white-space: inherit;
  width: auto;
}

/*
 * Hide visually and from screen readers, but maintain layout
 */

.invisible {
  visibility: hidden;
}

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

.clearfix::before,
.clearfix::after {
  content: " ";
  display: table;
}

.clearfix::after {
  clear: both;
}

.swiper {
  width: 100%;
  height: 100%;
}
.swiper-slide{
  text-align: center;
  font-size: 18px;
  background:transparent;

  /* Center slide text vertically */
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}
.swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#morar .swiper-button-next, 
#morar .swiper-button-prev{ color:var(--dark-blue)!important }

#investir .swiper-button-next, 
#investir .swiper-button-prev{ color:var(--dark-brown)!important }



.desktop{display: block;}
.mobile{display: none;}

nav#menu-mobile{
    /*background: #e5e5e5;*/
    color: #1d1f20;
    left: 0;
    position: relative;
    top: 0;
    width: 100%;
    z-index: 9999;
}
/*** INPUT ***/
nav#menu-mobile input {
    opacity: 0;
    position: absolute;
    z-index: -1;
}
/*** LABEL ***/
nav#menu-mobile label {
    cursor: pointer;
    display: block;
    font:1.6em/1 'Oswald', sans-serif;
    /*padding: 0.5em;*/
}
/* Hamburger Icon */
#menu-mobile #menu-icon,
#menu-mobile #menu-icon:before,
#menu-mobile #menu-icon:after {
    background: #1d1f20;
    border-radius: 0.05em;
    height: 0.2em;
    transition: all 0.2s ease-in-out;
    width: 100%;
}
#menu-mobile #menu-icon {
    display: inline-block;
    margin: 0.4em 0;
    max-width: 1em;
    position: relative;
}
nav#menu-mobile label #menu-icon {
    float: right;
}
#menu-mobile #menu-icon:before,
#menu-mobile #menu-icon:after {
    content: '';
    left: 0;
    position: absolute;
}
#menu-mobile #menu-icon:before {
    top: -0.4em;
}

#menu-mobile #menu-icon:after {
    bottom: -0.4em;
}
/* Close Icon */
nav#menu-mobile input[type=checkbox]:checked + label #menu-icon {
    background: transparent;
}
nav#menu-mobile input[type=checkbox]:checked + label #menu-icon:before {
    top: 0;
    transform: rotate(-45deg);
}
nav#menu-mobile input[type=checkbox]:checked + label #menu-icon:after {
    bottom: 0;
    transform: rotate(45deg);
}
/*** MENU ***/
/* Overlay */
nav#menu-mobile input:checked ~ #overlay {
    background:var(--primary-color);
    bottom: 0;
    left: 0;
    height: 100vh;
    position: fixed;
    right: 0;
    top: 0;
    width:97vw;
    z-index: -1;
}
/* List */
nav#menu-mobile  ul {
    font-size: 1.3em;
    list-style: none;
    margin: 0;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    padding: 0;
    text-align: center;
}
nav#menu-mobile  input:checked ~ ul {
    /*margin: 1em;*/
    padding-top: 50px;
    max-height: inherit;
    opacity: 1;
    width: 100vw;
    height: 100vh;
}
nav#menu-mobile  ul > li {
    margin: 0.5em 0;
    width: 100%;
}
nav#menu-mobile  ul a {
    color: #1d1f20!important;
    text-decoration: none;
}
nav#menu-mobile  ul a:hover {
    text-decoration: underline;
}
nav#menu-mobile img{
  max-width: 230px;
  float: left;
}
@media only screen and (max-width: 992px) {
  form#mail {
    display: flex;
    flex-direction: column;
  }
  .formulario #mandatory {
    margin-bottom: 10px;
    order: 1;
  }
}
@media only screen and (min-width:1050px){
  .formulario input.col-3{ width:23%; }
  .formulario select.col-1{ width:10%; }
  .empreendimento-completo .col-6.text{
    padding-left: 50px;
    padding-top:80px;
  }
  #investir .experiencias article:nth-child(2){
    /*padding: 0 50px;*/
    min-height:319px;
  }
  #investir #sobre.experiencias article{
    padding: 0 1%;
    min-height: 260px;
  }
  #investir .experiencias article:nth-child(2){
    padding-right: 3%!important;
  }
  #investir .estrutura.estrutura-solucao .lista div:nth-child(1){
    padding-left:60px;
  }
  #investir .estrutura.estrutura-solucao .lista{
    max-width: 845px;
  }    
  #morar .empreendimento-completo .banner{    
    width: 50vw;
    display: inline-block;
    vertical-align: top;
    background:url(../img/banner12.jpg) no-repeat center right;
    height:100vh;
    background-size:cover;
    min-height:900px;
  }
  #morar .empreendimento-completo .text{
    width:49%;
    display:inline-block;
    padding:5%;
  }
  #morar .experiencias .content .col-8{
    padding-right: 3%;
  }
  #morar .empreendimento-completo .beneficios .col-1{ width: 50px; }
  #morar .empreendimento-completo .text .col-11{width:80%;}
  #investir #estrutura.estrutura .text .col-4 p{border-right: 1px solid var(--white);}
  #investir #estrutura .col-4 div,
  .servicos-pay-per-use div{ min-height: 145px; }
  #investir .estrutura.estrutura-solucao .lista .col-4{ margin: 0; }
  #investir #estrutura .col-4.space-desk,
  .servicos-pay-per-use .col-4.space-desk{margin-left:0;}
}
@media only screen and (max-width:1100px){
  .desktop{display: none;}
  .mobile{display: block;}

  header .logo img {
    width:auto;
    height: auto;
    max-width: 250px
  }
  footer .company img{max-width: 280px;}
  footer .company .investir { right: 262px;}
  section h2,
  #morar .empreendimento-completo h2{
    font-size: 1.2rem!important;
    line-height:1.8rem!important;
    margin-bottom: 20px!important;
  }
  #morar #hospital .content{padding-bottom: 0}
  .empreendimento-completo .text img,
  .estrutura.estrutura-solucao .col-4 img{margin-bottom: 20px}
  #morar .empreendimento-completo h2{margin-top:50px}
  #morar .empreendimento-completo .beneficios,
  #morar .empreendimento-completo .beneficio,
  .experiencias .col-4 img{padding:0px;text-align: center;}
  section p,
  .experiencias h3{
    font-size: 1rem!important;
    line-height:1.8rem!important;
  }
  .estrutura .col-4 img.logo-hospital{max-width:190px;}
  #morar .experiencias div.col-8{ padding: 0 2%; }
  .estrutura .lista div,
  .estrutura .lista,
  #investir .estrutura.estrutura-solucao .lista .col-4{margin-top: 25px}
  .experiencias .col-4{margin-top: 45px}
  .experiencias .col-4 img{float: none!important;margin-bottom:20px;}
  .experiencias p,
  .experiencias h3,
  .experiencias div,
  #morar .empreendimento-completo h2,
  .empreendimento-completo .text,
  #investir .estrutura h2,
  #investir .estrutura p{text-align: center;}
  .empreendimento-completo,
  .escolhas,
  #morar .apts-planejados,
  #investir .experiencias,
  #investir .apts-planejados.box2{padding-bottom: 50px}
  #morar .clube-de-lazer p{padding: 0 3% 50px 3% }
  #morar .estrutura,
  .estrutura .col-8 h2,
  .servicos-pay-per-use,
  .escolhas,
  #morar .clube-de-lazer, 
  #morar .apts-planejados,
  #investir .estrutura.estrutura-solucao,
  #investir .estrutura .text h2,
  #investir .localizacao,
  #investir .estrutura,
  #morar #apartamentos.apts-planejados{padding-top: 50px;}
  #investir .experiencias,
  #investir .estrutura .col-4 p,
  #investir .clube-de-lazer p,
  #morar .apts-planejados,
  #morar #apartamentos.apts-planejados p{padding-top: 0}
  .estrutura .col-8 h2,
  .estrutura .col-8 p{
    text-align: center;
  }
  #investir .servicos-pay-per-use article{margin: 0 2%;}
  #investir .estrutura a{margin:20px 0 0 0}
  .servicos-pay-per-use .col-4 p,
  #investir .experiencias article,
  #investir .estrutura .text .col-4{border:0; }
  .servicos-pay-per-use .col-4 p:last-child{min-height: auto}
  .formulario input, .formulario select{margin-bottom: 10px}
  footer .copyright{padding-bottom: 75px;}
  footer .company a{font-size: 0.8rem;}
  footer .company a img{width: 25px}
  #investir .experiencias article{ margin:1em 2%; }
  .estrutura .lista{margin-bottom:70px}
  #investir .estrutura .text .col-4{margin-bottom:40px;}
  #investir .clube-de-lazer a{margin: 0 0 50px 0;}
  #investir .apts-planejados{padding-bottom: 0}
  #morar #apartamentos.apts-planejados h2{margin: 0;}
  #investir .estrutura .col-4 h4,
  .servicos-pay-per-use div h4{ margin: 1em 0; }

  nav.change-page a.change-content{
    font-size:0.6rem;
    line-height:28px;
  }
  nav.change-page a.morar{
      padding-right:0px;
      margin-right:0px;
      width:165px;
      height:38px;
  }
  a.investir{
    padding-left:0px;
    margin-left:-39px;
    cursor: pointer;    
    width:165px;
    height:38px;
  }
  #morar a.morar{
      background: url(../img/_button-morar-ativo-mobile.png) no-repeat left center transparent;
      color: transparent;
  }
  #morar a.investir{
      background: url(../img/_button-investir-ativo-mobile.png) no-repeat left center transparent;
      color: transparent;
  }
  #investir a.morar{
    background: url(../img/_button-morar-mobile.png) no-repeat left center transparent;
    color: transparent;
  }
  #investir a.investir{
    background: url(../img/_button-investir-mobile.png) no-repeat left center transparent;
    color: transparent;
  }
  #whats a.bt-whats-morar, #whats a.bt-whats-investir{font-size: 0.6rem;}
  #whats a.bt-whats-morar{right:53%;}
  #whats a.bt-whats-investir{right:4%;}
  section.banner-principal img.mobile{margin-top:-7px;}
  .servicos-pay-per-use p.subtitle{padding: 0 2%;}
  

}

@media only screen and (min-width: 35em) {
  /* Style adjustments for viewports that meet the condition */
}

@media print,
  (-webkit-min-device-pixel-ratio: 1.25),
  (min-resolution: 1.25dppx),
  (min-resolution: 120dpi) {
  /* Style adjustments for high resolution devices */
}

/* ==========================================================================
   Print styles.
   Inlined to avoid the additional HTTP request:
   https://www.phpied.com/delay-loading-your-print-css/
   ========================================================================== */

@media print {
  *,
  *::before,
  *::after {
    background: #fff !important;
    color: #000 !important;
    /* Black prints faster */
    box-shadow: none !important;
    text-shadow: none !important;
  }

  a,
  a:visited {
    text-decoration: underline;
  }

  a[href]::after {
    content: " (" attr(href) ")";
  }

  abbr[title]::after {
    content: " (" attr(title) ")";
  }

  /*
   * Don't show links that are fragment identifiers,
   * or use the `javascript:` pseudo protocol
   */
  a[href^="#"]::after,
  a[href^="javascript:"]::after {
    content: "";
  }

  pre {
    white-space: pre-wrap !important;
  }

  pre,
  blockquote {
    border: 1px solid #999;
    page-break-inside: avoid;
  }

  /*
   * Printing Tables:
   * https://web.archive.org/web/20180815150934/http://css-discuss.incutio.com/wiki/Printing_Tables
   */
  thead {
    display: table-header-group;
  }

  tr,
  img {
    page-break-inside: avoid;
  }

  p,
  h2,
  h3 {
    orphans: 3;
    widows: 3;
  }

  h2,
  h3 {
    page-break-after: avoid;
  }
}