html {
overflow-x: hidden;
}
body { overflow-x: clip; }
#main {
min-height: 60vh;
height: auto;
}
.content-info {
min-height: 60vh !important;
}
.columna {
width: 100%;
height: 100px; flex-direction: row;
backdrop-filter: blur(0px);
-webkit-backdrop-filter: blur(0px);
border:0px !important; 
#logo {
padding: 10px 0 0 15px;
z-index:9;
}
}
body.scrolled {
.columna {
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
}
#menu {
left: 0px;
&.open {
width: 100%;
left: 0;
}
}
#menu {
left: 0px;
}
#menu.open {
width: 100%;
left: 0;
}
#menu ul {
padding: 0;
list-style: none;
text-align: center;
width: 100%;
}
#menu ul li {
padding-bottom: 10px;
opacity: 0;
transform: translateX(-300px);
transition: all 0.5s ease-in-out;
}
#menu ul li a .char {
display: inline-block;
opacity: 0;
transform: translateX(10px);
transition: opacity calc(0.5s + (var(--char-fade-random) * 1.2s)) ease, transform 0.5s ease;
}
#menu.open ul li {
opacity: 1;
transform: translateX(0);
}
#menu.open ul li:nth-child(1) { transition-delay: 0.1s; --li-delay: 0.1s; }
#menu.open ul li:nth-child(2) { transition-delay: 0.2s; --li-delay: 0.2s; }
#menu.open ul li:nth-child(3) { transition-delay: 0.3s; --li-delay: 0.3s; }
#menu.open ul li:nth-child(4) { transition-delay: 0.4s; --li-delay: 0.4s; }
#menu.open ul li:nth-child(5) { transition-delay: 0.5s; --li-delay: 0.5s; }
#menu.open ul li:nth-child(6) { transition-delay: 0.6s; --li-delay: 0.6s; }
#menu.open ul li:nth-child(7) { transition-delay: 0.7s; --li-delay: 0.7s; }
#menu.open ul li a .char {
opacity: 1;
transform: translateX(0);
transition-delay: calc(var(--li-delay) + (var(--char-random) * 1.0s));
}
#menu .social ul {
opacity: 0;
transition: all 0.7s ease-in-out;
}
#menu.open .social ul {
opacity: 1;
}
@supports (-webkit-touch-callout: none) {
#menu ul li a span,
#menu ul li a .char {
display: inline-block;
visibility: visible;
}
}
.menu-hamburger {
position: relative;
z-index: 9;
}
.ham.active {
.line {
stroke: var(--color-primario);
}
}
h1 {
font-size: 3rem !important;
padding-top: 150px;
}
h1.title {
font-size: 2.5rem !important;
}
h1.small {
font-size: 1.5rem !important;
}
h2 {
font-size: 2rem !important;
}
h2.title {
font-size: 1.5rem !important;
}
h4, .h4 {
font-size: 1.2rem !important;
}
h2.error {
font-size: 6rem !important;
font-weight: bold;
padding-top: 100px !important;
}
.citacion {
height: auto;
}
.img60-mob {
height: 60vh !important;
}
.info_plano_lejos {
width:270px; border-left: 10px solid #CCCEB7;
}  @media (min-width: 576px) { 
}  @media (min-width: 768px) { 
}  @media (min-width: 992px) { 
#main {
&.home,
&.ubicacion,
&.proyecto,
&.viviendas,
&.contacto {
min-height: 100vh;
height: 100vh;
}
&.galeria {
height: auto;
}
}
.content-info {
min-height: 100vh !important;
}
.columna {
width: 170px;
height: 100vh;
border: 0px;
flex-direction: column;
border-right: 1px solid var(--color-evidenciado) !important;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
#logo {
padding: 5px 5px 0 5px;
}
}
#menu {
left: 170px;
&.open {
width: 400px;
left: 170px;
}
}
#menu {
left: 170px;
}
#menu.open {
width: 400px;
left: 170px;
}
#info_viviendas {
width: 400px;
} #plano_viviendas {
.viv.active {
transform: translate(var(--move-x, 0px), var(--move-y, 0px)) scale(2);
&#viv_1 {
image {
transform-origin: 140px 0;
}
}
&#viv_3 {
image {
transform-origin: -150px 0;
}
}
&#viv_4 {
image {
transform-origin: -150px 0;
}
}
&#viv_5 {
image {
transform-origin: -150px 0;
}
}
&#viv_7 {
image {
transform-origin: 140px 0;
}
}
}
}
.ham.active {
.line {
stroke: var(--color-primario);
}
}
h1 {
font-size: 4.3rem !important;
padding-top: 0px;
}
h1.title {
font-size: 3rem !important;
}
h1.small {
font-size: 1.8rem !important;
}
h2 {
font-size: 3rem !important;
}
h2.title {
font-size: 2.5rem !important;
}
h4, .h4 {
font-size: 1.2rem !important;
}
.citacion {
height: 100vh;
}
.img60-mob {
height: 100% !important;
}
h2.error {
font-size: 10rem !important;
font-weight: bold;
padding-top: 0px !important;
}
.info_plano_lejos {
width:270px; 
}
#plano_viviendas .viv.active#V1 {
transform: translate(calc(var(--move-x) + 50px), calc(var(--move-y) + 0px)) scale(2.1);
}
#plano_viviendas .viv.active#V2 {
transform: translate(calc(var(--move-x) - 120px), calc(var(--move-y) + 0px)) scale(2.1);
}
#plano_viviendas .viv.active#V3 {
transform: translate(calc(var(--move-x) - 200px), calc(var(--move-y) + 0px)) scale(2.1);
}
#plano_viviendas .viv.active#V4 {
transform: translate(calc(var(--move-x) - 250px), calc(var(--move-y) + 0px)) scale(2.1);
}
#plano_viviendas .viv.active#V5 {
transform: translate(calc(var(--move-x) - 200px), calc(var(--move-y) + 0px)) scale(2.1);
}
#plano_viviendas .viv.active#V6 {
transform: translate(calc(var(--move-x) - 100px), calc(var(--move-y) + 0px)) scale(2.1);
}
#plano_viviendas .viv.active#V7 {
transform: translate(calc(var(--move-x) + 50px), calc(var(--move-y) + 0px)) scale(2.1);
}
}  @media (min-width: 1200px) { 
#menu {
&.open {
width: 600px;
}
}
#menu.open {
width: 600px;
}
#info_viviendas {
width: 400px;
} #plano_viviendas {
margin-left: 80px;
.viv.active {
transform: translate(var(--move-x, 0px), var(--move-y, 0px)) scale(2.3);
&#viv_1 {
image {
transform-origin: 140px 0;
}
}
&#viv_3 {
image {
transform-origin: -100px 0;
}
}
&#viv_4 {
image {
transform-origin: -100px 0;
}
}
&#viv_5 {
image {
transform-origin: -100px 0;
}
}
&#viv_7 {
image {
transform-origin: 140px 0;
}
}
}
}
#plano_viviendas .viv.active#V1 {
transform: translate(calc(var(--move-x) + 50px), calc(var(--move-y) + 0px)) scale(2.2);
}
#plano_viviendas .viv.active#V2 {
transform: translate(calc(var(--move-x) - 100px), calc(var(--move-y) + 0px)) scale(2.2);
}
#plano_viviendas .viv.active#V3 {
transform: translate(calc(var(--move-x) - 200px), calc(var(--move-y) + 0px)) scale(2.2);
}
#plano_viviendas .viv.active#V4 {
transform: translate(calc(var(--move-x) - 250px), calc(var(--move-y) + 0px)) scale(2.2);
}
#plano_viviendas .viv.active#V5 {
transform: translate(calc(var(--move-x) - 150px), calc(var(--move-y) + 0px)) scale(2.2);
}
#plano_viviendas .viv.active#V6 {
transform: translate(calc(var(--move-x) - 50px), calc(var(--move-y) + 0px)) scale(2.2);
}
#plano_viviendas .viv.active#V7 {
transform: translate(calc(var(--move-x) + 50px), calc(var(--move-y) + 0px)) scale(2.2);
}
}  @media (min-width: 1400px) { 
#menu {
&.open {
width: 600px;
}
}
#menu.open {
width: 600px;
}
#info_viviendas {
margin-left: 0px;
width: 600px;
} #plano_viviendas {
.viv.active {
&#viv_1 {
image {
transform-origin: left 0;
}
}
&#viv_3 {
image {
transform-origin: 100px 0;
}
}
&#viv_4 {
image {
transform-origin: 100px 0;
}
}
&#viv_5 {
image {
transform-origin: 100px 0;
}
}
&#viv_7 {
image {
transform-origin: left 0;
}
}
}
}
.info_plano_lejos {
width:300px; 
} #plano_viviendas .viv.active#V1 {
transform: translate(calc(var(--move-x) - 50px), calc(var(--move-y) + 0px)) scale(2.3);
}
#plano_viviendas .viv.active#V2 {
transform: translate(calc(var(--move-x) - 50px), calc(var(--move-y) + 0px)) scale(2.3);
}
#plano_viviendas .viv.active#V3 {
transform: translate(calc(var(--move-x) - 0px), calc(var(--move-y) + 0px)) scale(2.3);
}
#plano_viviendas .viv.active#V4 {
transform: translate(calc(var(--move-x) - 0px), calc(var(--move-y) + 0px)) scale(2.3);
}
#plano_viviendas .viv.active#V5 {
transform: translate(calc(var(--move-x) - 0px), calc(var(--move-y) + 0px)) scale(2.3);
}
#plano_viviendas .viv.active#V6 {
transform: translate(calc(var(--move-x) - 0px), calc(var(--move-y) + 0px)) scale(2.3);
}
#plano_viviendas .viv.active#V7 {
transform: translate(calc(var(--move-x) - 0px), calc(var(--move-y) + 0px)) scale(2.3);
}
}
@media (min-width: 1600px) { 
#plano_viviendas {
margin-left: 0px;
}
}     @media (max-width: 575.98px) { 
}  @media (max-width: 767.98px) { 
}  @media (max-width: 991.98px) { 
}  @media (max-width: 1199.98px) { 
}  @media (max-width: 1399.98px) { 
}