@media (max-width: 824px){
/* animações */
:root {
  --animate-duration: 1s;
  --animate-delay: 1s;
  --animate-repeat: 1;
}
.animate__animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-duration: var(--animate-duration);
  animation-duration: var(--animate-duration);
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
@-webkit-keyframes fadeInLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeInLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.animate__fadeInLeft {
  -webkit-animation-name: fadeInLeft;
  animation-name: fadeInLeft;
}
@-webkit-keyframes fadeInRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeInRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.animate__fadeInRight {
  -webkit-animation-name: fadeInRight;
  animation-name: fadeInRight;
}
@-webkit-keyframes fadeOutRight {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
}
@keyframes fadeOutRight {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
}
.animate__fadeOutRight {
  -webkit-animation-name: fadeOutRight;
  animation-name: fadeOutRight;
}
@-webkit-keyframes fadeOutLeft {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}
@keyframes fadeOutLeft {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}
.animate__fadeOutLeft {
  -webkit-animation-name: fadeOutLeft;
  animation-name: fadeOutLeft;
}
/* principal */
.botaoativo{
  color: #b6761d!important;
}
.drop .fa-bars, .drop .fa-times{
  color: #b6761d;
}
.trav{
  background: #b6761d;
}
.sub-all{
  color: #b6761d;
 }
/* conteúdo */
.topo{
  position: relative;
}
.img-inicio{
  width: 100%;
}
.img-logo-in{
  position: absolute;
  top: 29.5%;
  left: 4%;
  z-index: 2;
  width: 30%;  
}
.linha-in{
  position: absolute;
  z-index: -1;
  top: 56%;
  left: -47.6%;
  width: 200%;
  border-top: 2.5px solid #b6761d;
  transform: rotate(147deg);
  -ms-transform: rotate(147deg);
  -webkit-transform: rotate(147deg);
}
.triangulo-in{
  position: absolute;
  top: 17.3%;
  left: -40%;
  z-index: 1;
  margin-left: 40%;
  width: 0;
  border-left: 400px solid #fff;
  border-top: 250px solid transparent;
  border-bottom: 250px solid transparent;
}
.margin-sub{
  margin-right: -.3rem;
}
.controle-inicio{
  padding-right: 3rem;
  padding-top: 4rem;
  text-align: right;
}
.controle-inicio p{
  margin-left: 11rem;
  width: 600px;
}
.imponente h1{
  padding-top:  4rem;
}
.controle-imponente{
  position: relative;
  top: -65px;
  width: 640px;
  background-color: #222020;
  padding: 3.3rem 3.3rem 2.2rem 3.3rem;
  border-bottom: 8px solid #b6761d;
}
.controle-imponente h3, .controle-imponente p{
  text-align: left;
}
/*  Area Athenas future Living */
.area{
  text-align: center;
  margin-bottom: 5rem;
}
.area .texto-all{
  margin-bottom: 3rem;
}
.area h2{
  text-transform: uppercase;
  font-size: 2rem;
  font-family: avenirblack;
  letter-spacing: .1rem;
  color: #b6761d;
  margin-top: 2.7rem;
}
.area .texto-area{
  text-transform: uppercase;
  font-family: avenirlight;
  color: #b3b3b3;
  font-size: 1.5rem;
  letter-spacing: .5rem;   
}
.marcas{
  color: #b6761d;
}
.planta-texto{
  text-transform: none!important;
}
/* slide (fotos) */
.dif-slide{
    position: relative;
    height: 530px;
    margin-top: 2rem;  
}
.principal{
  position: absolute;
  top: 0;
  left: 82px;
  z-index: 2;
  width: 80%;
  display: block;
  margin-left: auto;
  margin-right: auto;
}
 .esquerda, .direita{
  position: absolute;
  width: 60%;
  top: 12%;
  z-index: 1;
}
.direita{
  right: 0; 
}
.voltarImg, .passarImg{
  text-decoration: none;
  position: absolute;
  top: 40%;
  z-index: 3;
  font-size: 3rem;
  color: white;
  stroke: black;
  stroke-width: 5;
}
.voltarImg{
  left: 5%;
}
.passarImg{
  right: 5%;
}
#voltarImg, #passarImg, #mallvoltarImg, #mallpassarImg{
  position: absolute;
  top: 10%;
  width: 100px;
  height: 350px;
  z-index: 150; 
}
#passarImg, #mallpassarImg{
  right: 0;
}
.legenda{
  text-align: center;
  margin-top: -3.5rem;
  color: #b3b3b3;
  font-family: avenirroman;
  font-size: 1.3rem;
  line-height: 1.70rem;
}
.mallBaixo h1{
  padding-top: 2rem;
  padding-bottom: 3rem;
}
/* Funcional */
.funcional{
  position: relative;
  margin-top: 5rem;
  overflow: hidden;
  padding-bottom: 6rem;
}
.funcional .titulo-all{
  text-align: center;
  margin-left: .5rem;
}
.funcional .sub-all, .funcional .texto-all{
  text-align: right;
  margin-right: 2.2rem;
}
.funcional .texto-all{
  text-align: right;
  margin-right: 2.7rem;
}
.linha-fun{
  position: absolute;
  z-index: -1;
  top: 60%;
  left: -115.6%;
  margin-left: 115.6px;
  width: 200%;
  border-top: 2.5px solid #b6761d;
  transform: rotate(38deg);
  -ms-transform: rotate(38deg);
  -webkit-transform: rotate(38deg);
}
.triangulo-fun{
  position: absolute;
  top: 70.7%;
  left: -10%;
  z-index: 1;
  margin-left: 10px;
  width: 0;
  border-left: 400px solid #fff;
  border-top: 250px solid transparent;
  border-bottom: 250px solid transparent;
  transform: rotate(5deg);
  -ms-transform: rotate(5deg);
  -webkit-transform: rotate(5deg);
}
/* planta */
.planta{
  position: relative;
  padding-top: 3rem;
}
.planta .titulo-all{
  margin-left: 3rem;
}
.planta .sub-all{
  margin-left: 3.5rem;
}
.planta .texto-all{
  margin-left: 3.65rem;
}
.planta-all{
  position: relative;
}
.prev-pla, .next-pla{ opacity: 1; cursor: pointer; position: absolute; width: auto; padding: 20px; color: #b3b3b3!important; font-weight: bold; transition: 0.4s ease; font-size: 4rem; z-index: 999; }
.prev-pla {left: 3%;}
.prev-pla, .next-pla {top: 80%; margin-top: -80px;}
.next-pla{
  right: 3%;
}
.fade{ 
  opacity: 1;
  transition: opacity 2s ease-in-out;
  -moz-transition: opacity 2s ease-in-out;
  -webkit-transition: opacity 2s ease-in-out;
}
.planta-all{
  padding-top: 2rem;
  width: 100%;
  height: 1050px;
}
.img-planta{
  width: 100%;
}
.plantaSlide p{
  text-align: center;
}
.planta-texto{
  width: 500px;
  font-size: 1.2rem;
  color: #b3b3b3;
  font-family: avenirlight;
  line-height: 1.8rem;
  margin-top: 1.2rem;
}
.plantaSlide div{
  padding-top: 1.3rem;
}
/* Mall topo */
#mall{
  position: relative;
  overflow: hidden;
}
#mall div:first-child{
  text-align: right;
  padding: .5rem 3rem 2rem 0;
}
#mall h1{
  margin-right: -1rem;
}

#mall div:first-child p{
  margin-right: .3rem;
}
#mall .img-inicio{
  width: 87%;
}
.mall-caixa-baixo{
  position: relative;
}
.mall-caixa-baixo h3{
  padding-top: 2rem;
  text-align: center;
}
.mall-caixa-baixo div{
  text-align: right;
  padding: 6rem 4rem 6rem 0;
}
.mall-caixa-baixo .img-logo-in{
  top: 23.5%;
  left: 6%;
} 
.triangulo-mall-um, .linha-mall-um, .triangulo-mall-dois, .linha-mall-dois{
  position: absolute;
  z-index: -1;
}
.linha-mall-um,.linha-mall-dois {
  left: -47.6%;
  width: 200%;
  border-top: 2.5px solid #b6761d;
}
.triangulo-mall-um{
  top: -11.5%;
  left: -60%;
  margin-left: 40%;
  width: 0;
  border-left: 400px solid #fff;
  border-top: 250px solid transparent;
  border-bottom: 250px solid transparent;
  transform: rotate(-10deg);
  -ms-transform: rotate(-10deg);
  -webkit-transform: rotate(-10deg);
}
.linha-mall-um{
  top: -7.5%;
  transform: rotate(138deg);
  -ms-transform: rotate(138deg);
-webkit-transform: rotate(138deg);
}
.triangulo-mall-dois{
 
  top: 38.7%;
  left: -40%;
  margin-left: 40%;
  width: 0;
  border-left: 1400px solid #fff;
  border-top: 1250px solid transparent;
  border-bottom: 1250px solid transparent;
}
.linha-mall-dois{
  top: 55.5%;
  transform: rotate(41.5deg);
  -ms-transform: rotate(41.5deg);
  -webkit-transform: rotate(41.5deg);
}
/* footer */
.lista-bloco{
  color: #b6761d;
}
.loca-conjunto{
  border-bottom: 8px solid #b6761d;
}
.btn-mapa, .btn-mapa:hover, .btn-mapa:visited, .btn-mapa:active{
  border: 1px solid #b6761d;
  color: #b6761d;
}
/* novo */
.area{
  position: relative;
}
.prev-pla, .next-pla, .prev_dif, .next_dif{ opacity: 1; cursor: pointer; position: absolute; width: auto; padding: 20px; color: #484848!important; font-weight: bold; transition: 0.4s ease; font-size: 40px; }
.prev_dif, .next_dif {bottom: 37%; margin-bottom: -37px;}
.next_dif{ right: -1rem; }
.prev_dif{left: -1rem}
.carousel p, .carousel h2{
  text-transform: uppercase;
}
.area .carousel{
  margin-top: -2rem;
}

}
@media (max-width: 824px){
  .next_dif{ right: 10%; }
  .prev_dif{left: 10%;}
  .planta-all{
    padding-top: 2rem;
    width: 100%;
    height: 800px;
  }
}
@media (max-width: 812px){
  .triangulo-in{
    top: 16.7%;
  }
  .controle-inicio p{
    margin-left: 10.3rem;
    width: 600px;
  }
}

@media (max-width: 768px) and (max-height: 1024px){
  .triangulo-in{
    top: 14.3%;
  }
  .controle-inicio p{
    margin-left: 13.5rem;
    width: 500px;
  }
  .imponente h1{
    font-size: 10rem;
  }
  .controle-imponente{
    width: 640px;
  }
  .principal{
    left: 78px;
  }
  .esquerda, .direita{
    top: 11%;
  }
  .prev-pla, .next-pla {top: 76%; margin-top: -76px;}
  .linha-mall-um{
    top: -5.5%;
  }
  .mall-caixa-baixo div{
    padding-top: 4rem;
  }
}

@media (max-width: 736px){ 
  .triangulo-in{
    top: 12.7%;
  }
  .controle-inicio p{
    margin-left: 11.8rem;
    width: 500px;
  }
  .principal{
    left: 74px;
  }
  .legenda{
    margin-top: -6.5rem;
  }
  .prev-pla, .next-pla {top: 73%; margin-top: -73px;}
  .planta{
    margin-bottom: -5rem;
  }
  .triangulo-mall-um{
    top: -12.5%;
  }
}

@media (max-width: 731px){
  .triangulo-in{
    top: 12.5%;
  }
  .imponente h1{
    font-size: 9rem;
    margin-left: .5rem;
  }
  .controle-inicio p{
    margin-left: 11.3rem;
  }
  .controle-imponente{
    width: 620px;
  }
  .area h2{
    font-size: 1.7rem;
  }
  .area .texto-area{
    font-size: 1.3rem;
  }
}

@media (max-width: 667px){
  .triangulo-in{
    top: 8.4%;
    left: -45%;
  }
  .img-logo-in{
    top: 26.5%;
  }
  .linha-in{
    left: -49.6%;
  }
  .controle-inicio p{
    margin-left: 10.6rem;
    width: 450px;
  }
  .imponente h1{
    font-size: 8rem;
  }
  .controle-imponente{
    width: 580px;
  }
  .principal{
    left: 67px;
  }
  .esquerda, .direita{
    top: 9%;
  }
  .voltarImg, .passarImg{
    top: 33%;
  }
  #voltarImg, #passarImg, #mallvoltarImg, #mallpassarImg{
    top: 9%;
    height: 290px;
  }
  .legenda{
    margin-top: -8rem;
  }
  .funcional h1{
    font-size: 8rem;
  }
  .prev-pla, .next-pla {top: 67%; margin-top: -67px;}
  .triangulo-mall-um{
    top: -15.5%;
  }
}
@media (max-width: 640px){
  .triangulo-in{
    top: 6.7%;
    left: -50%;
  }
  .linha-in{
    left: -55%;
  }
  .controle-inicio p{
    margin-left: 10.6rem;
    width: 420px;
  }
  .principal{
    left: 65px;
  }
  .legenda{
    margin-top: -9.5rem;
  }
  .prev-pla, .next-pla {top: 65%; margin-top: -65px;}
  .triangulo-mall-um{
    top: -16.5%;
  }
  .mall-caixa-baixo div{
    padding-top: 2.5rem;
  }
  .mallBaixo h1:last-child{
    font-size: 8rem;
  }
  .next_dif{ right: 10%; }
  .prev_dif{left: 10%;}
}

@media (max-width: 568px){
  .img-logo-in{
    top: 24%; 
  }
  .triangulo-in{
    top: 1.6%;
    left: -60%;
  }
  .linha-in{
    left: -60%;
  }
  .controle-inicio p{
    margin-left: 9.3rem;
    width: 370px;
  }
  .imponente h1{
    font-size: 6.7rem;
  }
  .funcional h1{
    font-size: 6.7rem;
  }
  .mallBaixo h1:last-child{
    font-size: 6.7rem;
  }
  .controle-imponente{
    width: 510px;
    padding: 1.5rem 1.5rem .9rem 1.5rem;
  }
  .principal{
    left: 58px;
  }
  .esquerda, .direita{
    top: 7%;
  }
  .voltarImg, .passarImg{
    top: 24%;
  }
  #voltarImg, #passarImg,#mallvoltarImg, #mallpassarImg{
    top: 7%;
    width: 100px;
    height: 240px;
  }
  .legenda{
    font-size: 1.15rem;
    margin-top: -12.5rem;
  }
  .linha-fun{
    left: -130.6%;
    margin-left: 130.6px;
  }
  .triangulo-fun{
    top: 75.7%;
  }
  .planta-all{
    height: 930px;
  }
  .planta-texto{
    width: 400px;
  }
  .prev-pla, .next-pla {top: 60%; margin-top: -60px;}
  .planta{
    margin-bottom: -15rem;
  }
  .planta .titulo-all{
    margin-left: 1rem;
  }
  .planta .sub-all{
    margin-left: 1.5rem;
  }
  .planta .texto-all{
    margin-left: 1.65rem;
  }
  .triangulo-mall-um{
    top: -20.8%;
  }
  .mall-caixa-baixo div{
    padding-top: 1.7rem;
  }
   #mall div:first-child{
    padding-right: 1.5rem;
  }
  .mall-caixa-baixo div{
    padding-right: 3rem;
  }
}

@media (max-width: 414px){  
  .img-logo-in{
    top: 24%;
  }
  .triangulo-in{
    top: -13.6%;
    left: -90%;
  }
  .linha-in{
    left: -70%;
  }
  .controle-inicio{
    padding-right: 1.7rem;
  }
  .controle-inicio p{
    margin-left: 2.2rem;
    width: 350px;
  }
  .controle-imponente{
    top: -40px;
    width: 390px;
    padding: 1.5rem .8rem .9rem .8rem;
  }
  .imponente h1, .funcional h1, .mallBaixo h1:last-child{
    font-size: 5.4rem;
  }
  .area .texto-area{
    font-size: 1rem;
    letter-spacing: .35rem;
  }
  .area h2{
    font-size: 1.3rem;
  }
  .dif-slide{
    height: 330px;
    margin-top: 1rem;
  }
  .principal{
    left: 42px;
  }
  .esquerda, .direita{
    top: 7.5%;
  }
  .voltarImg, .passarImg{
    top: 26%;
  }
  #voltarImg, #passarImg, #mallvoltarImg, #mallpassarImg{
    top: 7.5%;
    height: 170px;
  }
  .legenda{
    margin-top: -5rem;
    font-size: 1rem;
  }
  .funcional .titulo-all{
    margin-left: 0;
  }
  .funcional .sub-all, .funcional .texto-all{
    margin-right: .8rem;
  }
  .funcional .texto-all{
    margin-right: 1rem;
  }
  .linha-fun{
    left: -144.6%;
    margin-left: 149.6px;
  }
  .triangulo-fun{
    top: 79.7%;
  }
  
  .planta-titulo{
    font-size: 1.25rem;
  }
  .planta-texto{
    font-size: 1rem;
    width: 280px;
  }
  .prev-pla {
    left: -2%;
  }
  .next-pla{
    right: -2%;
  }
  .prev-pla, .next-pla {top: 50%; margin-top: -50px;}
  
  .triangulo-mall-um{
    top: -34%;
  }
  .linha-mall-dois{
    top: 52.5%;
  }
  #mall h1{
    margin-right: -.2rem;
  }
  #mall div:first-child{
    padding-right: .5rem;
  }
  .mall-caixa-baixo div{
    padding-right: 2rem;
    padding-top: 1rem;
  }
  .next_dif{ right: 2%; }
  .prev_dif{left: 2%;}
  .planta-all{
    height: 870px;
  }
}

@media (max-width: 412px){
  .triangulo-in{
    top: -13.6%;
  }
  .linha-fun{
    left: -145.6%;
    margin-left: 149.6px;
  }
  .triangulo-mall-um{
    top: -34%;
  }
  .controle-imponente{
    width: 370px;
  }
  .imponente .titulo-all, .funcional .titulo-all{
    font-size: 4.8rem;
  }
  .next_dif{ right: 0; }
  .prev_dif{left: 0;}
}

@media (max-width: 405px){
  .triangulo-in{
    top: -16%;
  }
  .triangulo-mall-um{
    top: -36%;
  }
  .rm_w{
    display: none;
  }
}

@media (max-width: 375px){
  
  /* .img-logo-in{
    top: 26%;
  } */

  .triangulo-in{
    top: -20.3%;
    left: -100%;
  }
  .linha-in{
    left: -64%;
  }
  .controle-inicio{
    padding-top: 2rem;
    padding-right: 1.7rem;
  }
  .controle-inicio p{
    margin-left: 1.9rem;
    width: 320px;
  }
  .controle-imponente{
    top: -35px;
    width: 345px;
    padding: 1.5rem .6rem .9rem .8rem;
  }
  .controle-imponente .sub-all{
    letter-spacing: .2rem;
  }
  .imponente h1, .funcional h1, .mallBaixo h1:last-child{
    font-size: 4.8rem;
  }
  .linha-fun{
    left: -150.6%;
    margin-left: 150.6px;
  }
  .triangulo-fun{
    top: 77.7%;
  }
  .planta-all{
    height: 860px;
  }
  .area .texto-area{
    font-size: 1rem;
    letter-spacing: .35rem;
  }
  .area h2{
    font-size: 1.3rem;
  }
  .dif-slide{
    height: 280px;
    margin-top: 1rem;
  }
  .principal{
    left: 38px;
  }
  .esquerda, .direita{
    top: 6.5%;
  }
  .voltarImg, .passarImg{
    top: 24%;
  }
  #voltarImg, #passarImg, #mallvoltarImg, #mallpassarImg{
    top: 6.5%;
    height: 160px;
  }
  .legenda{
    margin-top: -4rem;
    font-size: 1rem;
    margin-bottom: -3rem;
  }
  .prev-pla, .next-pla{
    font-size: 2.6rem;
  }
  .prev-pla, .next-pla {top: 44%; margin-top: -44px;}
  .triangulo-mall-um{
    top: -40%;
  }
  .mall-caixa-baixo div{
    margin-bottom: -3rem;
  }
  .mallBaixo h1{
    margin-top: 2.3rem;
    margin-bottom: -1rem;
  }
}

@media (max-width: 360px){ 
  .triangulo-in{
    top: -22.8%;
    left: -100%;
  }
  .imponente h1, .funcional h1, .mallBaixo h1:last-child{
    font-size: 4.5rem;
  }
  .linha-fun{
    left: -150.6%;
    margin-left: 150.6px;
  }
  .triangulo-fun{
    top: 77.7%;
  }
  .principal{
    left: 36px;
  }
  .esquerda, .direita{
    top: 7%;
  }
  .voltarImg, .passarImg{
    top: 28%;
  }
  #voltarImg, #passarImg, #mallvoltarImg, #mallpassarImg{
    top: 7%;
    height: 160px;
  }
  .planta-all{
    height: 750px;
  }
  .prev-pla, .next-pla {top: 50%; margin-top: -50px;}
  .titulo-all{
    font-size: 5rem;
    letter-spacing: .55rem;
  }
  .triangulo-mall-um{
    top: -42%;
  }
  .planta-all{
    height: 800px;
  }
  .imponente .titulo-all, .funcional .titulo-all{
    font-size: 4.2rem;
  }
}
 @media (max-width: 320px){
  .triangulo-in{
    top: -29%;
    left: -120%;
  }
  .linha-in{
    left: -73%;
  }
  .planta-texto{
    width: 220px;
  }
  .controle-inicio p{
    margin-left: -1.9rem;
    width: 320px;
  }
  .imponente .titulo-all, .funcional .titulo-all{
    font-size: 3.8rem;
  }
  .controle-imponente{
    width: 285px;
  }
  .linha-fun{
    left: -159.6%;
    margin-left: 159.6px;
  }
  .rm_w{
    display: none;
  }
  .planta .titulo-all, .planta .sub-all, .planta .texto-all{
    margin-left: 0.4rem!important;
  }
  .triangulo-mall-um{
    top: -45%;
  }

  .img-logo-in{
    margin-left: -1rem;
    width: 30%;  
  }
  .mall-caixa-baixo .texto-all{
    margin-right: -1.5rem;
  }
}