:root {
--icon16: 16px;
--icon24: 24px;
--font12: 12px;
--font13: 13px;
--font14: 14px;
--font20: 20px;
--font24: 24px;
--font32: 32px;
--s3d-title: 28px;
--s3d-header: 60px;
--offset: 12px;
--controller-w: 198px;
--controller-h: 203px;
--controller-btn: 28px;
--controller-padding: 20px;
--table-row-height: 50px;
--link-fz-flat: 19px;
--info-offset-buttom: 20px;
--filter-width: 520px;
--filter-offset-hor: 50px;
--filter-offset-ver: 50px;
--size-btn-circle: 60px;
--menu-h: 82px;
--btn: 36px;
--smarto-logo-w: 56px;
--smarto-logo-h: 60px;
--flyby-flats-count-bg: yellow;
--flyby-flats-count-color: blue;
--not-found-color: #f1b16129;
}
.tablet.landscape,
.tablet.portrait {
--s3d-header: calc(var(--space-4) + 42px);
}
.tablet.landscape [data-type=floor],
.tablet.landscape [data-type=flat],
.tablet.portrait [data-type=floor],
.tablet.portrait [data-type=flat] {
--controller-w: 100%;
}
@media screen and (max-width: 1440px) {
:root {
--table-row-height: 44px;
--filter-width: 520px;
--filter-offset-hor: 30px;
}
}
@media screen and (max-width: 1280px) {
:root {
--offset-controller-hor: 25px;
}
}
@media screen and (max-width: 1024px) {
:root {
--controller-w: 100%;
--controller-h: 76px;
--controller-btn: 40px;
--filter-width: 70%;
--menu-h: 78px;
--smarto-logo-w: 36px;
--smarto-logo-h: 40px;
}
}
@media screen and (max-width: 680px) {
:root {
--s3d-title: 18px;
--s3d-header: 50px;
--controller-w: 100%;
--controller-h: 60px;
--filter-width: 100%;
--filter-offset-hor: 20px;
--filter-offset-ver: 30px;
--size-btn-circle: 36px;
--menu-h: 58px;
}
}
.mobile.landscape {
--controller-h: 36px;
--s3d-header: 40px;
--s3d-title: 18px;
--btn: 30px;
}
.whitespace-nowrap {
white-space: nowrap;
}
.text-uppercase {
text-transform: uppercase;
}
.text-uppercase-important {
text-transform: uppercase !important;
}
.text-uppercase-important span {
text-transform: uppercase !important;
}
@font-face {
font-family: "Inter Display";
font-display: swap;
src: url(//the-light.com.ua/wp-content/themes/3d/assets/fonts/Inter/Inter-Light.ttf) format("truetype");
font-style: normal;
font-weight: 300;
}
@font-face {
font-family: "Inter Display";
font-display: swap;
src: url(//the-light.com.ua/wp-content/themes/3d/assets/fonts/Inter/Inter-Regular.ttf) format("truetype");
font-style: normal;
font-weight: 400;
}
@font-face {
font-family: "Inter Display";
font-display: swap;
src: url(//the-light.com.ua/wp-content/themes/3d/assets/fonts/Inter/Inter-Medium.ttf) format("truetype");
font-style: normal;
font-weight: 500;
}
@font-face {
font-family: "Inter Display";
font-display: swap;
src: url(//the-light.com.ua/wp-content/themes/3d/assets/fonts/Inter/Inter-SemiBold.ttf) format("truetype");
font-style: normal;
font-weight: 600;
}
@font-face {
font-family: "Inter Display";
font-display: swap;
src: url(//the-light.com.ua/wp-content/themes/3d/assets/fonts/Inter/Inter-Bold.ttf) format("truetype");
font-style: normal;
font-weight: 700;
}
@font-face {
font-family: "Inter Display";
font-display: swap;
src: url(//the-light.com.ua/wp-content/themes/3d/assets/fonts/Inter/Inter-ExtraLight.ttf) format("truetype");
font-style: normal;
font-weight: 200;
}
.text-style-3-d-fonts-1920-h-1 {
font-size: 32px;
font-family: "Inter Display", sans-serif;
font-weight: 300;
font-style: normal;
line-height: 130%;
letter-spacing: -1px;
text-decoration: none;
text-transform: none;
}
.text-style-3-d-fonts-1920-h-2-regular {
font-size: 20px;
font-family: "Inter Display", sans-serif;
font-weight: 400;
font-style: normal;
line-height: 130%;
text-decoration: none;
text-transform: none;
}
.text-style-3-d-fonts-1920-h-2-semi-bold {
font-size: 20px;
font-family: "Inter Display", sans-serif;
font-weight: 600;
font-style: normal;
line-height: 130%;
text-decoration: none;
text-transform: none;
}
.text-style-3-d-fonts-1920-h-2-bold {
font-size: 20px;
font-family: "Inter Display", sans-serif;
font-weight: 700;
font-style: normal;
line-height: 130%;
text-decoration: none;
text-transform: none;
}
.text-style-3-d-fonts-1920-body-bold {
font-size: 13px;
font-family: "Inter Display", sans-serif;
font-weight: 700;
font-style: normal;
line-height: 130%;
text-decoration: none;
text-transform: none;
}
.text-style-3-d-fonts-1920-body-medium {
font-size: 13px;
font-family: "Inter Display", sans-serif;
font-weight: 500;
font-style: normal;
line-height: 130%;
text-decoration: none;
text-transform: none;
}
.text-style-3-d-fonts-1920-body-regular, .filter-subtitle {
font-size: 13px;
font-family: "Inter Display", sans-serif;
font-weight: 400;
font-style: normal;
line-height: 140%;
text-decoration: none;
text-transform: none;
}
.text-style-3-d-fonts-1920-super-tiny {
font-size: 10px;
font-family: "Inter Display", sans-serif;
font-weight: 500;
font-style: normal;
line-height: 100%;
text-decoration: none;
text-transform: none;
}
.text-style-3-d-fonts-1920-semi-tiny {
font-size: 14px;
font-family: "Inter Display", sans-serif;
font-weight: 400;
font-style: normal;
line-height: 140%;
text-decoration: none;
text-transform: none;
}
.text-style-3-d-fonts-1360-h-1 {
font-size: 48px;
font-family: Inter;
font-weight: 400;
font-style: normal;
line-height: 100%;
letter-spacing: -0.02em;
text-decoration: none;
text-transform: uppercase;
}
.text-style-3-d-fonts-1360-h-2 {
font-size: 32px;
font-family: Inter;
font-weight: 400;
font-style: normal;
line-height: 120%;
letter-spacing: -0.02em;
text-decoration: none;
text-transform: uppercase;
}
.text-style-3-d-fonts-1360-h-3 {
font-size: 24px;
font-family: Inter;
font-weight: 400;
font-style: normal;
line-height: 130%;
text-decoration: none;
text-transform: uppercase;
}
.text-style-3-d-fonts-1360-h-4 {
font-size: 16px;
font-family: Inter;
font-weight: 500;
font-style: normal;
line-height: 130%;
text-decoration: none;
text-transform: none;
}
.text-style-3-d-fonts-360-h-1 {
font-size: 32px;
font-family: Inter;
font-weight: 400;
font-style: normal;
line-height: 100%;
letter-spacing: -0.02em;
text-decoration: none;
text-transform: uppercase;
}
.text-style-3-d-fonts-360-h-2 {
font-size: 28px;
font-family: Inter;
font-weight: 400;
font-style: normal;
line-height: 120%;
letter-spacing: -0.02em;
text-decoration: none;
text-transform: uppercase;
}
.text-style-3-d-fonts-360-h-3 {
font-size: 22px;
font-family: Inter;
font-weight: 500;
font-style: normal;
line-height: 130%;
text-decoration: none;
text-transform: none;
}
.text-style-3-d-fonts-360-h-4 {
font-size: 16px;
font-family: Inter;
font-weight: 500;
font-style: normal;
line-height: 130%;
text-decoration: none;
text-transform: none;
}
label, button {
font-family: "Inter Display", sans-serif;
} html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
border: 0;
font: inherit;
font-size: 100%;
margin: 0;
padding: 0;
vertical-align: baseline;
} article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
display: block;
}
body {
line-height: 1;
}
ol,
ul {
list-style: none;
}
blockquote,
q {
quotes: none;
}
blockquote:before, blockquote:after {
content: "";
content: none;
}
q:before, q:after {
content: "";
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
body,
div,
dl,
dt,
dd,
ul,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
code,
form,
fieldset,
input,
textarea,
p,
blockquote,
th,
td {
margin: 0;
padding: 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
fieldset,
img,
abbr {
border: 0;
}
address,
caption,
cite,
code,
dfn,
em,
strong,
th,
var {
font-style: normal;
font-weight: normal;
}
ul li {
list-style: none;
}
caption,
th {
text-align: left;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-size: 100%;
font-weight: normal;
}
sup {
vertical-align: text-top;
}
sub {
vertical-align: text-bottom;
}
input,
textarea,
select {
font-family: inherit;
font-size: inherit;
font-weight: inherit;
}
legend {
color: #000000;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
main {
display: block;
}
img {
height: auto;
max-width: 100%;
}
@keyframes s3dAnimateArrowHelperGif {
from {
transform: translateX(0);
}
95%, to {
transform: translateX(30%);
}
}
@keyframes s3dAnimateArrow {
0%, 10% {
transform: translateX(0);
}
50% {
transform: translateX(20%);
}
90%, 100% {
transform: translateX(0);
}
}
@keyframes s3dPulse {
0% {
transform: scale(0.95);
}
70% {
transform: scale(1);
}
100% {
transform: scale(0.95);
}
}
@keyframes loader {
0% {
transform: scale(1);
}
50% {
transform: scale(1.1);
}
100% {
transform: scale(1);
}
}
@keyframes intervalHamburgerBorder {
0%, 50% {
opacity: 0;
-webkit-transform: scale(1);
transform: scale(1);
}
50% {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}
80% {
-webkit-transform: scale(1.6);
transform: scale(1.6);
}
100% {
opacity: 0;
-webkit-transform: scale(1.6);
transform: scale(1.6);
}
}
@keyframes fadeInPopup {
from {
opacity: 0;
visibility: hidden;
}
to {
opacity: 1;
visibility: visible;
}
}
@keyframes fadeInPopup {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes fsAnimate {
17% {
border-bottom-right-radius: 3px;
}
25% {
transform: translateY(9px) rotate(22.5deg);
}
50% {
transform: translateY(18px) scale(1, 0.9) rotate(45deg);
border-bottom-right-radius: 40px;
}
75% {
transform: translateY(9px) rotate(67.5deg);
}
100% {
transform: translateY(0) rotate(90deg);
}
}
@keyframes fsShadow {
50% {
transform: scale(1.2, 1);
}
}
.s3d-filter-wrap {
position: absolute;
top: 0;
left: 0;
display: flex;
flex-direction: column;
align-items: flex-start;
height: 100%;
height: calc(var(--vh, 1vh) * 100);
width: var(--filter-width);
visibility: hidden;
background: var(--color-surface-gray-100);
z-index: 120;
transform: translateX(-100%);
transition: opacity 0.25s ease-out;
transition: transform 0.3s linear, opacity 0.2s linear;
overflow-y: scroll;
overflow-x: hidden;
-ms-overflow-style: none; }
.s3d-filter-wrap::-webkit-scrollbar {
height: 8px;
cursor: pointer;
}
.s3d-filter-wrap::-webkit-scrollbar-thumb {
background: var(--color-surface-gray-600);
border-radius: 4px;
cursor: pointer;
}
.s3d-filter-wrap::-webkit-scrollbar-thumb:active {
background-color: gray;
cursor: pointer;
}
.s3d-filter-wrap::-webkit-scrollbar {
width: var(--space-2);
}
.s3d-filter-wrap .s3d-card {
margin: 5px 0;
}
.s3d-filter-wrap .js-filter-range {
margin-bottom: var(--space-5);
}
.s3d-filter-wrap .js-filter-range:last-child {
margin-bottom: 0;
}
.s3d-filter-wrap .Range__title {
margin-bottom: var(--space-2);
color: var(--text-gray-700);
}
.s3d-filter-wrap.hidden-when-change-parent {
opacity: 0 !important;
}
.s3d-filter-wrap.s3d-open-filter {
transform: translateX(0);
transition: transform 0.3s linear, opacity 0.2s linear;
opacity: 1;
}
.s3d-filter-wrap:not(.s3d-show) .irs-max,
.s3d-filter-wrap:not(.s3d-show) .irs-min,
.s3d-filter-wrap:not(.s3d-show) .irs--flat .irs-from,
.s3d-filter-wrap:not(.s3d-show) .irs--flat .irs-to,
.s3d-filter-wrap:not(.s3d-show) .irs--flat .irs-single {
visibility: hidden !important;
}
.s3d-filter-wrap .s3d-filter__close-wrap {
position: absolute;
right: var(--space-4);
height: var(--icon16);
width: var(--icon16);
height: var(--space-6);
width: var(--space-6);
display: flex;
justify-content: center;
align-items: center;
align-content: center;
padding: 0;
cursor: pointer;
z-index: 50;
}
.s3d-filter-wrap .s3d-filter__close-wrap svg {
height: 100%;
width: 100%;
fill: var(--icon-gray-900);
transition: 0.3s ease-in-out;
transform-origin: center;
transform-box: fill-box;
}
@media screen and (min-width: 1023px) {
.s3d-filter-wrap .s3d-filter__close-wrap:hover svg {
transform: rotate(90deg);
}
}
.s3d-filter-wrap .s3d-filter__top-sticky {
position: sticky;
top: 0;
z-index: 2;
padding: calc(var(--s3d-header) + var(--space-2)) var(--space-5) 0 var(--space-5);
background-color: var(--color-gray-100);
width: 100%;
}
@media screen and (max-width: 600px) {
.s3d-filter-wrap .s3d-filter__top-sticky {
padding-top: var(--space-5);
}
}
.s3d-filter-wrap .s3d-filter__top {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
padding: 0 var(--space-5) var(--filter-offset-ver) var(--space-5);
z-index: 1;
}
.s3d-filter-wrap .s3d-filter__top .s3d-filter__title {
display: flex;
align-items: center;
justify-content: flex-start;
width: auto;
margin-left: var(--space-4);
margin-right: auto;
}
.s3d-filter-wrap .s3d-filter__top .s3d-filter {
position: relative;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
width: 100%;
gap: var(--space-5);
transition: height 0.4s ease-in-out;
overflow-y: hidden;
}
@media screen and (max-width: 1024px) {
.s3d-filter-wrap .s3d-filter__top .s3d-filter__input-wrapper {
width: 100%;
}
}
.s3d-filter-wrap .s3d-filter__top .s3d-filter::-webkit-scrollbar {
width: 2px;
display: none;
}
.s3d-filter-wrap .s3d-filter__top .s3d-filter::-webkit-scrollbar-track {
-webkit-box-shadow: none;
background: var(--surface-gray-700);
}
.s3d-filter-wrap .s3d-filter__top .s3d-filter::-webkit-scrollbar-thumb {
background: var(--surface-gray-900);
-webkit-box-shadow: none;
}
.s3d-filter-wrap .s3d-filter__top .s3d-filter::-webkit-scrollbar-thumb:window-inactive {
background: var(--surface-gray-900);
}
.s3d-filter-wrap .s3d-filter__top .s3d-filter .s3d-filter__range-wrapper,
.s3d-filter-wrap .s3d-filter__top .s3d-filter .s3d-filter__checkboxes-wrapper {
display: flex;
align-items: center;
justify-content: flex-start;
width: 100%;
gap: var(--space-1);
}
.s3d-filter-wrap .s3d-filter__top .s3d-filter .s3d-filter__range-wrapper .s3d-filter__param,
.s3d-filter-wrap .s3d-filter__top .s3d-filter .s3d-filter__checkboxes-wrapper .s3d-filter__param {
width: 100%;
}
.s3d-filter-wrap .s3d-filter__top .s3d-filter .s3d-filter__range-wrapper .s3d-filter__param-title,
.s3d-filter-wrap .s3d-filter__top .s3d-filter .s3d-filter__checkboxes-wrapper .s3d-filter__param-title {
text-align: left;
display: flex;
align-items: center;
justify-content: flex-start;
width: auto;
margin-bottom: var(--space-2);
color: var(--text-gray-700);
}
.s3d-filter-wrap .s3d-filter__top .s3d-filter .s3d-filter__range-wrapper {
flex-direction: column;
}
.s3d-filter-wrap .s3d-filter__top .s3d-filter .s3d-filter__input-wrapper input {
border-radius: var(--border-space-2);
padding-top: var(--space-3);
padding-bottom: var(--space-3);
width: 100%;
background-color: var(--color-surface-gray-200);
}
.s3d-filter-wrap .s3d-filter__top .s3d-filter .s3d-filter__input-wrapper input::placeholder {
color: var(--text-gray-600);
}
.s3d-filter-wrap .s3d-filter__top .s3d-filter .s3d-filter__input-wrapper input:focus {
background-color: var(--color-gray-100);
}
@media (hover: hover) {
.s3d-filter-wrap .s3d-filter__top .s3d-filter .s3d-filter__input-wrapper input:hover {
background-color: var(--color-surface-gray-300);
}
}
.s3d-filter-wrap .s3d-filter__top .s3d-filter .s3d-filter__checkboxes-wrapper {
flex-direction: row;
flex-wrap: wrap;
}
.s3d-filter-wrap .s3d-filter__top .s3d-filter .s3d-filter__checkboxes-wrapper .s3d-filter__checkbox__row {
display: flex;
align-items: center;
justify-content: flex-start;
flex-wrap: wrap;
gap: 4px;
max-height: 100px;
overflow-y: auto;
}
.s3d-filter-wrap .s3d-filter__top .s3d-filter .s3d-filter__checkboxes-wrapper .s3d-filter__checkbox__row::-webkit-scrollbar {
width: 4px;
height: 4px;
cursor: pointer;
}
.s3d-filter-wrap .s3d-filter__top .s3d-filter .s3d-filter__checkboxes-wrapper .s3d-filter__checkbox__row::-webkit-scrollbar-thumb {
background: var(--color-surface-gray-600);
border-radius: var(--border-space-2);
cursor: pointer;
}
.s3d-filter-wrap .s3d-filter__top .s3d-filter .s3d-filter__checkboxes-wrapper .s3d-filter__checkbox__row::-webkit-scrollbar-track {
background: transparent;
}
.s3d-filter-wrap .s3d-filter__top .s3d-filter .s3d-filter__checkboxes-wrapper .s3d-filter__checkbox__row {
scrollbar-face-color: var(--color-surface-gray-600);
scrollbar-track-color: transparent;
}
.s3d-filter-wrap .s3d-filter__top .s3d-filter .s3d-filter__checkboxes-wrapper .s3d-filter__checkbox__row.s3d-filter__checkbox__row--wide {
margin-left: calc(var(--space-2) * -1);
}
.s3d-filter-wrap .s3d-filter__top .s3d-filter .s3d-filter__checkboxes-wrapper .s3d-filter__checkbox__row.s3d-filter__checkbox__row--wide label {
width: auto;
min-width: 24%;
padding-left: 8px;
padding-right: 8px;
}
.s3d-filter-wrap .s3d-filter__view-type-wrapper {
display: flex;
justify-content: center;
align-items: center;
position: sticky;
top: calc(var(--s3d-header) + 80px);
width: 100%;
z-index: 2;
background-color: var(--color-gray-200);
}
.s3d-filter-wrap .s3d-filter__view-type-wrapper .s3d-filter__hide {
padding-top: var(--space-2);
}
.s3d-filter-wrap .s3d-filter__view-type-wrapper:not(.is-sticky) .s3d-filter__hide {
background: var(--colors-surface-gray-surface-gray-200-transparent-72, rgba(250, 251, 254, 0.72));
pointer-events: none;
}
.s3d-filter-wrap .s3d-filter__view-type-wrapper:not(.is-sticky) .s3d-filter__hide svg {
fill: var(--Colors-Text-Gray-text-gray-600, #AEBECC);
}
.s3d-filter-wrap .s3d-filter__view-type-wrapper:not(.is-sticky) .s3d-filter__hide span {
color: var(--Colors-Text-Gray-text-gray-600, #AEBECC);
}
@media screen and (max-width: 600px) {
.s3d-filter-wrap .s3d-filter__view-type-wrapper {
top: calc(var(--s3d-header) + 45px);
}
}
.s3d-filter-wrap .s3d-filter__view-type {
position: absolute;
left: var(--space-5);
display: flex;
align-items: center;
justify-content: center;
justify-self: center;
}
.s3d-filter-wrap .s3d-filter__view-type button {
--size: 32px;
width: var(--size);
height: var(--size);
background: none;
border: none;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
cursor: pointer;
border-radius: var(--border-space-1);
overflow: hidden;
border: 1px solid var(--border-gray-400);
transition: 0.25s ease-in-out;
background-color: var(--color-surface-gray-200);
}
.s3d-filter-wrap .s3d-filter__view-type button svg {
width: 85.7142857143%;
height: 85.7142857143%;
fill: var(--icon-gray-900);
transition: 0.25s ease-in-out;
}
.s3d-filter-wrap .s3d-filter__view-type button.active {
background-color: var(--color-surface-brand-800);
}
.s3d-filter-wrap .s3d-filter__view-type button.active svg {
fill: var(--icon-gray-200);
}
@media (hover: hover) {
.s3d-filter-wrap .s3d-filter__view-type button:not(.active):hover {
background-color: var(--color-surface-gray-400-transperent-88);
border-color: var(--color-surface-gray-400-transperent-88);
}
.s3d-filter-wrap .s3d-filter__view-type button:not(.active):hover svg {
fill: var(--icon-gray-900);
}
}
.s3d-filter-wrap .s3d-filter__view-type > * {
width: 28px;
height: 28px;
}
.s3d-filter-wrap .s3d-filter__hide {
font-size: 13px;
font-family: "Inter Display", sans-serif;
font-weight: 400;
font-style: normal;
line-height: 140%;
text-decoration: none;
text-transform: none;
display: flex;
align-items: center;
justify-content: center;
padding: 0 var(--space-6) var(--space-4);
background: var(--color-surface-gray-100);
font-size: var(--font14);
color: var(--text-gray-900);
transition: color 0.4s ease-in-out;
border-radius: 0 0 var(--space-2) var(--space-2);
gap: 12px;
transition: 0.25s ease-out;
}
.s3d-filter-wrap .s3d-filter__hide:not([data-sort=none]) {
cursor: pointer;
}
.s3d-filter-wrap .s3d-filter__hide * {
pointer-events: none;
}
.s3d-filter-wrap .s3d-filter__hide:after {
content: "";
border-top: 3px solid var(--icon-gray-700);
border-right: 3px solid var(--icon-gray-700);
border-radius: var(--border-space-05);
transition: transform 0.5s ease-out;
transform: rotate(-45deg) translateY(50%);
display: flex;
align-items: center;
justify-content: center;
height: 8px;
width: 8px;
display: none;
}
.s3d-filter-wrap .s3d-filter__hide svg {
width: var(--space-4);
height: var(--space-4);
fill: var(--icon-gray-700);
transform-origin: center;
transform-box: fill-box;
transition: 0.25s ease-out;
transform: rotate(180deg);
}
@media screen and (min-width: 1023px) {
.s3d-filter-wrap .s3d-filter__hide:hover {
box-shadow: 0px 2px 1px 0px var(--colors-effects-shadow-gray-900-transparent-24, rgba(32, 35, 38, 0.24));
}
.s3d-filter-wrap .s3d-filter__hide:hover:after {
transition: transform 0.3s ease-in-out;
}
}
.s3d-filter-wrap .s3d-filter__scroll-active .s3d-filter__top-results {
display: none;
}
.s3d-filter-wrap .s3d-filter__scroll-active .s3d-filter__table {
margin: 0;
}
.s3d-filter-wrap .s3d-filter__scroll-active .s3d-filter__hide:after {
transform: rotate(135deg) translateY(-10%);
}
.s3d-filter-wrap.s3d-filter__scroll-active .s3d-filter__hide svg {
transform: rotate(180deg);
}
@media (hover: hover) {
.s3d-filter-wrap.s3d-filter__scroll-active .s3d-filter__hide:hover svg {
transform: rotate(0deg);
}
}
@media (hover: hover) {
.s3d-filter-wrap .smarto_powered a {
position: relative;
}
.s3d-filter-wrap .smarto_powered a:before {
content: "";
position: absolute;
width: 100%;
height: 1px;
bottom: 0;
left: 0;
background-color: var(--icon-gray-900);
visibility: hidden;
transform: scaleX(0);
transition: all 0.3s ease-in-out;
transform-origin: left;
}
.s3d-filter-wrap .smarto_powered a:hover:before {
visibility: visible;
transform: scaleX(1);
}
}
.s3d-filter-wrap .s3d-filter__body .s3d-card .s3d-card__info-label-wrapper, .s3d-filter-wrap .s3d-filter__body .s3d-card .s3d-infoBox__flat__wrapper-label {
padding-right: 20%;
}
.s3d-filter-desktop-infobox {
position: absolute;
z-index: 121;
left: var(--filter-width);
top: 0;
pointer-events: none;
width: 185px;
height: 125px;
background-color: var(--color-surface-gray-100);
opacity: 0;
visibility: hidden;
padding: var(--space-2);
transition: 0.25s ease-out;
border-radius: var(--border-space-1);
}
.s3d-filter-desktop-infobox img {
width: 100%;
height: 100%;
object-fit: contain;
}
.s3d-filter-desktop-infobox.active {
opacity: 1;
visibility: visible;
}
.filter-subtitle {
color: var(--text-gray-700);
}
@media screen and (min-width: 769px) {
.filter-subtitle {
margin-bottom: 0;
}
}
.tablet .s3d-filter-desktop-infobox,
.mobile .s3d-filter-desktop-infobox {
display: none !important;
}
.mobile .s3d-filter-wrap .s3d-filter__top .s3d-filter__hide:after {
transform: rotate(-45deg) translateY(0);
}
.mobile .s3d-filter__scroll-active .s3d-filter__top .s3d-filter__hide:after {
transform: rotate(135deg) translateY(25%);
}
.mobile .s3d__slideModule > .s3d-filter-wrap .s3d-filter__top .s3d-filter {
justify-content: flex-start;
}
.flat-not-marked-message .tippy-box {
background-color: var(--surface-gray-700);
padding: 8px;
border-radius: var(--border-space-2);
}
.flat-not-marked-message .tippy-arrow {
color: var(--surface-gray-700);
}
.s3d-filter-wrap.s3d-planning-filter-wrap {
padding: 0 var(--space-5) var(--space-5) var(--space-5);
transform: none;
border-radius: var(--border-space-3);
height: auto;
overflow-y: auto;
max-height: 87svh;
}
.s3d-filter-wrap.s3d-planning-filter-wrap .s3d-filter__top {
justify-content: flex-start;
height: auto !important;
padding: 0;
}
.s3d-filter-wrap.s3d-planning-filter-wrap .s3d-filter__close-wrap,
.s3d-filter-wrap.s3d-planning-filter-wrap .s3d-filter__view-type,
.s3d-filter-wrap.s3d-planning-filter-wrap .s3d-filter__hide,
.s3d-filter-wrap.s3d-planning-filter-wrap .s3d-filter__table {
display: none;
}
.s3d-filter-wrap.s3d-planning-filter-wrap .s3d-filter__top-sticky {
padding: var(--space-5) 0 0 0;
}
.desktop .s3d-filter-wrap.s3d-planning-filter-wrap {
height: auto;
}
.tablet .s3d-filter-wrap .s3d-filter {
overflow-y: auto;
justify-content: flex-start;
}
.tablet .s3d-filter-wrap .s3d-filter > * {
flex-shrink: 0;
}
.tablet .s3d-filter-wrap .s3d-filter > :nth-child(n+2) {
margin-top: 12px;
}
.tablet .s3d-filter-wrap .s3d-filter__body tr {
width: 100%;
}
.tablet .s3d-filter-wrap .s3d-filter__body tr .s3d-filter__td {
flex-grow: 1;
}
.mobile .flat-not-marked-message {
transform: translate(-50%, 0) !important;
left: 50% !important;
top: auto !important;
bottom: 0 !important;
text-align: center;
}
.mobile .flat-not-marked-message .tippy-arrow {
display: none !important;
}
.mobile .s3d-filter-wrap {
height: calc(var(--vh, 1vh) * 100);
overflow-y: auto;
border-radius: var(--border-space-2);
}
.mobile .s3d-filter-wrap:not(.s3d-open-filter) {
opacity: 0;
}
.mobile .s3d-filter-wrap .s3d-filter__table {
height: auto;
}
.mobile .s3d-filter-wrap .s3d-filter__close-wrap {
top: var(--space-2);
}
.mobile .s3d-filter-wrap .s3d-filter__top {
padding-top: var(--space-2);
}
.mobile .s3d-filter-wrap.s3d-planning-filter-wrap.s3d-open-filter {
transition: none;
height: calc(var(--vh, 1vh) * 100 - var(--mobile-controller-height) - var(--space-5));
overflow-y: auto;
top: var(--space-4);
}
.mobile .s3d-pl__filter-container {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 10000;
pointer-events: none;
background-color: transparent;
transition: background-color 0.3s ease-in-out;
}
.mobile .s3d-pl__filter-container .s3d-filter-wrap {
pointer-events: all;
}
.mobile .js-s3d-filter-open .s3d-pl__filter-container {
display: block;
background-color: var(--bg-overlay);
}
.mobile .js-s3d-filter-open .header {
opacity: 0;
pointer-events: none;
}
.mobile .s3d-filter {
overflow: hidden;
}
.mobile .s3d-filter-wrap .s3d-filter__top .s3d-filter__reset {
position: static;
}
.mobile .s3d-filter-checkboxes {
flex-wrap: wrap;
}
.mobile .s3d-filter-wrap .s3d-filter__close-wrap svg {
width: 24px;
height: 24px;
}
@-webkit-keyframes heartbeat {
from {
-webkit-transform: rotate(-45deg) translateY(50%) scale(1);
transform: rotate(-45deg) translateY(50%) scale(1);
-webkit-transform-origin: center center;
transform-origin: center center;
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
10% {
-webkit-transform: rotate(-45deg) translateY(50%) scale(0.91);
transform: rotate(-45deg) translateY(50%) scale(0.91);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
17% {
-webkit-transform: rotate(-45deg) translateY(50%) scale(0.98);
transform: rotate(-45deg) translateY(50%) scale(0.98);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
33% {
-webkit-transform: rotate(-45deg) translateY(50%) scale(0.87);
transform: rotate(-45deg) translateY(50%) scale(0.87);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
45% {
-webkit-transform: rotate(-45deg) translateY(50%) scale(1);
transform: rotate(-45deg) translateY(50%) scale(1);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
}
@keyframes heartbeat {
from {
-webkit-transform: rotate(-45deg) translateY(50%) scale(1);
transform: rotate(-45deg) translateY(50%) scale(1);
-webkit-transform-origin: center center;
transform-origin: center center;
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
10% {
-webkit-transform: rotate(-45deg) translateY(50%) scale(0.91);
transform: rotate(-45deg) translateY(50%) scale(0.91);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
17% {
-webkit-transform: rotate(-45deg) translateY(50%) scale(0.98);
transform: rotate(-45deg) translateY(50%) scale(0.98);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
33% {
-webkit-transform: rotate(-45deg) translateY(50%) scale(0.87);
transform: rotate(-45deg) translateY(50%) scale(0.87);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
45% {
-webkit-transform: rotate(-45deg) translateY(50%) scale(1);
transform: rotate(-45deg) translateY(50%) scale(1);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
}
.s3d-filter__table {
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
background-color: var(--color-surface-gray-200);
}
.s3d-filter__table::-webkit-scrollbar {
width: 2px;
}
.s3d-filter__table::-webkit-scrollbar-track {
-webkit-box-shadow: none;
background: #f4f8fd;
}
.s3d-filter__table::-webkit-scrollbar-thumb {
background: #e3ebf3;
-webkit-box-shadow: none;
}
.s3d-filter__table::-webkit-scrollbar-thumb:window-inactive {
background: #e3ebf3;
}
.s3d-filter__table .s3d-filter__head {
position: sticky;
top: 0;
width: 100%;
}
[data-view-type=card] .s3d-filter__head {
display: none;
}
.s3d-filter__table .s3d-filter__head .s3d-filter__tr:not(.hide) {
height: calc(var(--table-row-height) + var(--filter-table-offset-top));
background-color: var(--color-surface-gray-200);
}
.s3d-filter__table [data-view-type=card],
.s3d-filter__table .card-view {
--gap: var(--space-4);
padding: var(--gap);
padding-top: calc(var(--gap) * 1.5);
display: flex;
flex-wrap: wrap;
justify-content: space-between;
padding-left: var(--space-4);
padding-right: var(--space-4);
}
.s3d-filter__table [data-view-type=card] > *,
.s3d-filter__table .card-view > * {
width: calc(50% - var(--gap) / 4);
}
@media screen and (max-width: 680px) {
.s3d-filter__table [data-view-type=card],
.s3d-filter__table .card-view {
padding: calc(var(--gap) * 1.5) 20px 20px;
}
.s3d-filter__table [data-view-type=card] > *,
.s3d-filter__table .card-view > * {
width: calc(100% - var(--gap) / 4);
}
}
.s3d-filter__table .s3d-filter__tr {
display: flex;
justify-content: space-between;
width: 100%;
height: var(--table-row-height);
transition: background-color 0.4s ease-in-out;
cursor: pointer;
}
.s3d-filter__table .s3d-filter__tr:nth-child(2n) {
background-color: var(--color-surface-gray-200);
}
@media screen and (min-width: 1023px) {
.s3d-filter__table .s3d-filter__tr:nth-child(2n):hover {
background-color: #ffffff;
transition: background-color 0.4s ease-in-out;
}
}
@media screen and (min-width: 1023px) {
.s3d-filter__table .s3d-filter__tr:hover {
background-color: #ffffff;
transition: background-color 0.4s ease-in-out;
}
}
.s3d-filter__table .s3d-filter__th {
font-size: 13px;
font-family: "Inter Display", sans-serif;
font-weight: 400;
font-style: normal;
line-height: 140%;
text-decoration: none;
text-transform: none;
color: var(--text-gray-700);
vertical-align: bottom;
align-self: flex-end;
display: flex;
align-items: center;
justify-content: center;
padding-bottom: 15px;
transition: color 0.4s ease-in-out;
text-align: center;
width: 90%;
padding-top: 50px;
}
.s3d-filter__table .s3d-filter__th--offset {
width: var(--space-1);
}
.s3d-filter__table .s3d-filter__th .s3d-sort__arrow {
height: var(--icon16);
transform-origin: center;
transition: transform 0.4s ease-in-out, fill 0.4s ease-in-out;
fill: var(--icon-gray-700);
flex-shrink: 0;
width: var(--space-4);
height: var(--space-4);
}
.s3d-filter__table .s3d-filter__th.s3d-sort-active svg {
transform: rotate(180deg);
}
.s3d-filter__table .s3d-filter__th:hover {
color: var(--color-brand-800);
}
.s3d-filter__table .s3d-filter__th:hover [fill] {
fill: var(--color-brand-800);
}
.s3d-filter__table .s3d-filter__td {
font-size: var(--font14);
font-family: "Inter Display", sans-serif;
font-weight: 400;
line-height: 130%;
color: #000000;
align-self: center;
vertical-align: middle;
transition: color 0.4s ease-in-out;
text-align: center;
width: 90%;
white-space: nowrap;
}
.s3d-filter__table .s3d-filter__td-status-label {
width: var(--space-2);
height: var(--space-2);
border-radius: 50%;
margin-left: auto;
margin-right: auto;
}
.s3d-filter__table .s3d-filter__td--offset {
width: 20px;
}
.s3d-filter__table .s3d-filter__td .s3d__favourite {
border-radius: 0;
border: none;
background: transparent;
margin: 0 auto;
}
.s3d-filter__table .s3d-filter__td .s3d__favourite svg {
fill: transparent;
fill: var(--icon-gray-900);
transition: stroke 0.3s ease-in-out, fill 0.3s ease-in-out;
}
.s3d-filter__table .s3d-filter__td .s3d__favourite:hover input:not(:checked) + svg {
fill: var(--color-brand-900);
}
.s3d-filter__table .s3d-filter__td .s3d__favourite input:checked + svg {
fill: var(--color-semantic-success);
}
@media screen and (max-width: 1440px) {
.s3d-filter__table .s3d-sort__arrow {
margin-left: 4px;
}
}
.s3d-filter__grid {
display: none;
flex-wrap: center;
width: 100%;
height: 100%;
background-color: #f4f8fd;
overflow-y: auto;
}
.s3d-filter__grid::-webkit-scrollbar {
width: 2px;
}
.s3d-filter__grid::-webkit-scrollbar-track {
-webkit-box-shadow: none;
background: #f4f8fd;
}
.s3d-filter__grid::-webkit-scrollbar-thumb {
background: #e3ebf3;
-webkit-box-shadow: none;
}
.s3d-filter__grid::-webkit-scrollbar-thumb:window-inactive {
background: #e3ebf3;
}
.s3d-ctr[data-type=plannings] ~ .s3d-filter-wrap .s3d-filter__table {
display: none;
}
.tablet .s3d-filter__table table {
width: 100%;
}
.mobile .s3d-filter__table .s3d-filter__th .s3d-sort__arrow {
display: none;
}
.mobile .s3d-filter__td {
font-size: 12px;
}
.mobile .s3d-filter__th:nth-last-child(3),
.mobile td.s3d-filter__td:nth-last-child(3),
.mobile .s3d-filter__th:nth-last-child(2),
.mobile td.s3d-filter__td:nth-last-child(2) {
width: 45%;
}
.mobile .s3d-filter__th:nth-child(2),
.mobile .s3d-filter__th:nth-child(3),
.mobile .s3d-filter__th:nth-child(4),
.mobile td.s3d-filter__td:nth-child(2),
.mobile td.s3d-filter__td:nth-child(3),
.mobile td.s3d-filter__td:nth-child(4) {
width: 50%;
}
.s3d-filter__th[data-sort=none] {
width: 40%;
}
.s3d-filter__tr .s3d-filter__td.favourite {
width: 40%;
}
.s3d-popup-flyby {
position: relative;
display: flex;
flex-direction: column;
padding: var(--space-3);
width: 250px;
margin-left: calc(var(--filter-width) - 3px);
background: #f4f8fd;
border-radius: var(--border-space-2);
text-align: center;
}
.s3d-popup-flyby__wrap {
position: fixed;
width: 100%;
height: 100%;
display: flex;
align-items: center;
z-index: 9999;
visibility: hidden;
pointer-events: none;
opacity: 0;
transition: opacity 0.4s ease-in;
}
.s3d-popup-flyby__wrap.s3d-active {
opacity: 1;
visibility: visible;
pointer-events: all;
}
.s3d-popup-flyby__close {
position: absolute;
top: 0;
right: 0;
width: 24px;
height: 24px;
z-index: 2;
transform: translate(0, 0);
transform-origin: center;
transition: transform 0.4s ease-out;
pointer-events: painted;
cursor: pointer;
}
.s3d-popup-flyby__close:after, .s3d-popup-flyby__close:before {
content: "";
position: absolute;
display: inline-block;
transform-origin: center;
top: 50%;
left: 50%;
width: 60%;
height: 1px;
background: var(--icon-gray-900);
transition: all 0.4s cubic-bezier(0.14, 1.12, 0.43, 0.55);
}
.s3d-popup-flyby__close:after {
transform: translate(-50%, -50%) rotate(45deg);
}
.s3d-popup-flyby__close:before {
transform: translate(-50%, -50%) rotate(-45deg);
}
@media screen and (min-width: 1023px) {
.s3d-popup-flyby__close:hover {
transform: rotate(90deg);
}
.s3d-popup-flyby__close:hover:after, .s3d-popup-flyby__close:hover:before {
background: #000000;
}
}
.s3d-popup-flyby__title {
padding-left: var(--space-2);
padding-right: var(--space-2);
padding-top: var(--space-2);
color: var(--text-gray-900);
}
.s3d-popup-flyby__text {
margin: 20px 0 0;
font-weight: 400;
font-size: var(--font14);
line-height: 1.3em;
color: var(--text-gray-800);
margin-bottom: var(--space-4);
padding-left: var(--space-2);
padding-right: var(--space-2);
}
.s3d-popup-flyby__link {
position: relative;
font-family: "Inter Display", sans-serif;
font-weight: 400;
font-size: var(--font14);
line-height: 1em;
color: #f4f8fd;
height: 50px;
border: none;
border-radius: var(--border-space-2);
background: #000000;
margin-top: 25px;
padding: 0;
letter-spacing: 0.1em;
text-align: center;
text-transform: uppercase;
pointer-events: painted;
cursor: pointer;
transition: background-color 0.4s ease-in;
}
@media screen and (min-width: 1023px) {
.s3d-popup-flyby__link:hover {
background: #000000;
}
}
.s3d-popup-flyby__bg {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
display: flex;
justify-content: flex-start;
align-content: flex-end;
align-items: flex-end;
z-index: -1;
}
.s3d-popup-flyby__bg-all {
position: absolute;
right: 0;
height: 100%;
width: calc(100% - var(--filter-width));
background: rgba(42, 51, 65, 0.8);
}
.s3d-popup-flyby__bg-active {
height: 100%;
width: var(--filter-width);
background: rgba(42, 51, 65, 0.8);
}
@media screen and (max-width: 680px) {
.s3d-popup-flyby__bg-active {
background: rgba(42, 51, 65, 0.6);
}
}
.s3d-popup-flyby__active {
position: fixed;
display: table;
z-index: 10000;
}
.s3d-popup-flyby__active * {
background: transparent !important;
}
@media screen and (max-width: 1024px) {
.s3d-popup-flyby {
padding: 30px;
}
}
@media screen and (max-width: 680px) {
.s3d-popup-flyby {
position: absolute;
max-width: 80%;
left: 50%;
margin: 0;
transform: translateX(-50%) translateY(-50%) !important;
top: 50% !important;
}
.s3d-popup-flyby__link {
height: 40px;
}
.s3d-popup-flyby__bg-active {
width: 0;
transform: none !important;
}
}
.s3d-popup-flyby__bg + .s3d-popup-flyby::after {
content: "";
position: absolute;
left: -6px;
top: 50%;
transform: translateY(-50%);
width: 0;
height: 0;
border-right: 8px solid white;
border-top: 14px solid transparent;
border-bottom: 14px solid transparent;
border-radius: 8px;
}
@media screen and (max-width: 680px) {
.s3d-popup-flyby__bg + .s3d-popup-flyby::after {
display: none !important;
}
}
.s3d__helper-gif__wrap {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
background: var(--color-effect-900-transparent-40);
z-index: 9999;
color: var(--color-gray-200);
opacity: 0;
display: none;
visibility: hidden;
pointer-events: none;
transition: all 0.2s ease-in-out;
}
.s3d__helper-gif__wrap.s3d-active {
opacity: 1;
visibility: visible;
pointer-events: painted;
display: flex;
cursor: default;
}
.s3d__helper-gif__wrap .s3d__helper-gif {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
margin: auto 0;
}
.s3d__helper-gif__wrap .s3d__helper-gif__gif {
position: relative;
display: flex;
justify-content: center;
align-items: center;
height: 300px;
width: 300px;
}
.s3d__helper-gif__wrap .s3d__helper-gif__gif object {
position: absolute;
top: 0;
left: 50%;
display: inline-block;
height: 100%;
width: 100%;
transform: translate(-50%, 0);
opacity: 0;
}
@media screen and (max-width: 1440px) {
.s3d__helper-gif__wrap .s3d__helper-gif__gif {
height: 250px;
width: 250px;
}
}
@media screen and (max-width: 680px) {
.s3d__helper-gif__wrap .s3d__helper-gif__gif {
height: 150px;
width: 150px;
}
}
.s3d__helper-gif__wrap .s3d__helper-gif__title {
font-family: "Inter Display", sans-serif;
font-weight: 400;
line-height: 130%;
font-size: 72px;
text-align: center;
text-transform: uppercase;
pointer-events: none;
margin-top: 50px;
margin-bottom: 20px;
}
@media screen and (max-width: 1024px) {
.s3d__helper-gif__wrap .s3d__helper-gif__title {
font-size: 46px;
}
}
.s3d__helper-gif__wrap .s3d__helper-gif__group {
display: flex;
align-items: center;
gap: 30px;
}
.s3d__helper-gif__wrap .s3d__helper-gif__group .s3d__helper-gif__count {
font-family: "Inter Display", sans-serif;
font-weight: 400;
line-height: 130%;
font-size: 72px;
pointer-events: none;
}
@media screen and (max-width: 1024px) {
.s3d__helper-gif__wrap .s3d__helper-gif__group .s3d__helper-gif__count {
font-size: 46px;
}
}
.s3d__helper-gif__wrap .s3d__helper-gif__group .s3d__helper-gif__link {
position: relative;
display: flex;
justify-content: center;
align-items: center;
height: 90px;
width: 90px;
border-radius: 50%;
background: var(--color-gray-200);
cursor: pointer;
animation: s3dAnimateArrowHelperGif 0.6s cubic-bezier(0.32, 0.87, 0.42, 1) infinite alternate-reverse;
}
@media screen and (max-width: 1024px) {
.s3d__helper-gif__wrap .s3d__helper-gif__group .s3d__helper-gif__link {
height: 60px;
width: 60px;
}
}
.s3d__helper-gif__wrap .s3d__helper-gif__group .s3d__helper-gif__link:after {
box-sizing: border-box;
content: "";
position: absolute;
top: 0;
left: 0;
display: inline-block;
height: 100%;
width: 100%;
border: 4px solid var(--border-gray-200);
border-radius: 50%;
z-index: -1;
animation: intervalHamburgerBorder 1.2s infinite;
}
.s3d__helper-gif__wrap .s3d__helper-gif__group .s3d__helper-gif__link svg {
display: inline-block;
height: 35%;
width: 35%;
stroke: #f4f8fd;
}
.s3d__helper-gif__wrap .s3d__helper-gif__close {
font-family: "Inter Display", sans-serif;
font-weight: 400;
line-height: 130%;
font-size: var(--font14);
cursor: pointer;
margin-top: 50px;
}
.mobile.landscape .s3d__helper-gif__wrap {
height: calc(var(--vh) * 100);
}
.mobile.landscape .s3d__helper-gif__wrap .s3d__helper-gif__group {
gap: 8px;
}
.mobile.landscape .s3d__helper-gif__wrap .s3d__helper-gif__close {
margin-top: 20px;
}
.mobile.landscape .s3d__helper-gif__wrap .s3d__helper-gif .s3d__helper-gif__gif {
height: 20vh;
width: 20vh;
}
.mobile.landscape .s3d__helper-gif__wrap .s3d__helper-gif__title {
font-size: 12px;
margin-top: 20px;
margin-bottom: 10px;
}
.mobile.landscape .s3d__helper-gif__wrap .s3d__helper-gif__link {
width: 30px;
height: 30px;
}
.mobile.landscape .s3d__helper-gif__wrap .s3d__helper-gif__count {
font-size: 12px;
}
.s3d__button {
display: flex;
align-items: center;
justify-content: center;
z-index: 100;
width: var(--btn);
height: var(--btn);
border-radius: var(--border-space-2);
background: #e0c7aa;
border: none;
overflow: hidden;
padding: 0;
transition: background 0.3s ease-in;
cursor: pointer;
}
.s3d__button svg {
display: flex;
height: var(--icon24);
width: var(--icon24);
pointer-events: none;
fill: #000000;
}
.s3d__button[disabled] {
cursor: no-drop;
}
@media screen and (min-width: 1023px) {
.s3d__button:hover {
background: #e3c29b;
}
.s3d__button:hover svg {
fill: #000000;
}
}
.s3d-ctr {
z-index: 120;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: transparent;
pointer-events: none;
}
.s3d-ctr__nav {
position: fixed;
left: 0;
bottom: 0;
justify-content: flex-start;
flex-direction: column;
height: var(--controller-h);
width: var(--controller-w);
padding: var(--controller-padding);
align-items: flex-start;
pointer-events: painted;
display: none;
border-radius: 12px 12px 0 0;
z-index: 101;
background: #f4f8fd;
border: 1px solid #cbd0db;
}
.s3d-ctr__nav.s3d-display {
display: none !important;
}
@media screen and (max-width: 1024px) {
.s3d-ctr__nav {
flex-direction: row;
align-items: center;
padding: 0 var(--offset);
gap: 5px;
border-radius: 0;
display: none !important;
opacity: 0;
pointer-events: none;
}
.s3d-ctr__nav .s3d-nav {
padding: 0;
margin: 0;
min-width: 100px;
}
.s3d-ctr__nav .s3d-ctr__option.active:after {
border-top: 1px solid #000000;
border-right: 1px solid #000000;
}
}
@media screen and (max-width: 680px) {
.s3d-ctr__nav {
padding: 0 4px;
gap: 2px;
}
}
.s3d-ctr__nav__title {
margin: 0 auto 10px 0;
font-family: "Inter Display", sans-serif;
font-weight: 400;
font-size: var(--font20);
line-height: 130%;
text-align: left;
color: #000000;
}
@media screen and (max-width: 1024px) {
.s3d-ctr__nav__title {
display: none;
}
}
.s3d-ctr__nav .s3d-nav__btn {
display: flex;
justify-content: flex-start;
align-content: center;
align-items: center;
width: 100%;
min-width: 128px;
height: var(--controller-btn);
margin: 1px 0;
padding: 0 8px;
border: 1px solid #e3ebf3;
background: #e3ebf3;
border-radius: var(--border-space-2);
cursor: pointer;
transition: all 0.5s ease-in-out;
font-family: "Inter Display", sans-serif;
font-style: normal;
font-weight: 400;
font-size: var(--font14);
line-height: 130%;
text-align: left;
color: #000000;
white-space: nowrap;
}
@media screen and (max-width: 1024px) {
.s3d-ctr__nav .s3d-nav__btn {
text-align: center;
justify-content: center;
}
}
@media screen and (max-width: 680px) {
.s3d-ctr__nav .s3d-nav__btn {
min-width: fit-content;
width: 100%;
padding: 0 3px;
}
}
.s3d-ctr__nav .s3d-nav__btn:hover:not(.active):not([disabled]) {
background: #c0d1e1;
border: 1px solid #c0d1e1;
color: #000000;
}
.s3d-ctr__nav .s3d-nav__btn.active {
cursor: no-drop;
background: #e0c7aa;
border: 1px solid #e0c7aa;
color: #000000;
}
.s3d-ctr__nav .s3d-nav__btn[disabled] {
cursor: no-drop;
background: #ecf2f8;
border: 1px solid #ecf2f8;
color: #c0d1e1;
}
.s3d-ctr__nav .s3d-ctr__option {
position: relative;
}
@media screen and (max-width: 1024px) {
.s3d-ctr__nav .s3d-ctr__option {
flex-direction: column;
flex-wrap: nowrap;
}
}
.s3d-ctr__nav .s3d-ctr__option__buttons {
position: absolute;
top: 0;
right: 0;
transform: translate(100%, -50%);
visibility: hidden;
opacity: 0;
pointer-events: none;
padding: 0 0 0 var(--controller-padding);
transition: opacity 0.5s ease-in-out;
max-height: 250px;
overflow-y: auto;
width: 125px;
}
@media screen and (max-width: 1024px) {
.s3d-ctr__nav .s3d-ctr__option__buttons {
left: 0;
transform: translate(0, -105%);
padding: 0;
height: fit-content;
}
.s3d-ctr__nav .s3d-ctr__option__buttons .s3d-nav__btn {
background-color: #e0c7aa;
color: #000000;
}
}
.s3d-ctr__nav .s3d-ctr__option__buttons .active {
display: none;
}
.s3d-ctr__nav .s3d-ctr__option:after {
content: "";
border-top: 1px solid #000000;
border-right: 1px solid #000000;
position: absolute;
top: 50%;
right: 10px;
transform: translateY(-50%) rotate(135deg);
transition: all 0.4s ease-in-out;
height: 6px;
width: 6px;
}
@media screen and (max-width: 1024px) {
.s3d-ctr__nav .s3d-ctr__option:after {
transform: translate(0, -50%) rotate(135deg);
}
}
@media screen and (max-width: 680px) {
.s3d-ctr__nav .s3d-ctr__option:after {
content: none;
}
}
.s3d-ctr__nav .s3d-ctr__option:focus .s3d-ctr__option__buttons, .s3d-ctr__nav .s3d-ctr__option:hover .s3d-ctr__option__buttons {
opacity: 1;
visibility: visible;
pointer-events: painted;
}
.s3d-ctr__nav .s3d-ctr__option:focus:after, .s3d-ctr__nav .s3d-ctr__option:hover:after {
transform: rotate(45deg) translateY(-50%);
border-top: 1px solid #000000;
border-right: 1px solid #000000;
}
@media screen and (max-width: 1024px) {
.s3d-ctr__nav .s3d-ctr__option:focus:after, .s3d-ctr__nav .s3d-ctr__option:hover:after {
transform: translate(0, -50%) rotate(-45deg);
}
}
.s3d-ctr__menu-3d {
bottom: 0;
height: auto;
background: transparent;
padding: 12px calc(var(--smarto-logo-w) + 12px) 12px calc(var(--controller-w) + 12px);
visibility: hidden;
position: fixed;
left: 0;
right: 0;
pointer-events: none;
width: 100%;
z-index: 99;
display: flex;
flex-direction: row-reverse;
align-items: center;
justify-content: space-between;
}
@media screen and (max-width: 1024px) {
.s3d-ctr__menu-3d {
padding: var(--offset);
bottom: calc(var(--controller-h) - 1px);
}
}
@media screen and (max-width: 680px) {
.s3d-ctr__menu-3d {
padding: 4px;
flex-direction: column;
}
}
.s3d-ctr__menu-3d-compass-nav {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
gap: 10px;
pointer-events: none;
background: #f4f8fd;
padding: 6px;
border-radius: var(--border-space-2);
margin: auto;
display: none;
}
.tablet .s3d-ctr__menu-3d-compass-nav {
position: fixed;
left: 0;
top: 50%;
width: 100%;
justify-content: space-between;
background: transparent;
transform: translateY(-50%);
}
.desktop .s3d-ctr__menu-3d-compass-nav {
position: fixed;
left: 0;
top: 50%;
width: 100%;
justify-content: space-between;
background: transparent;
transform: translateY(-50%);
}
.s3d-ctr__menu-3d-compass-nav > * {
pointer-events: all;
}
.s3d-ctr__menu-3d-compass-nav .s3d-ctr__menu-3d__compass-wrapper {
position: relative;
pointer-events: none;
display: none;
}
.s3d-ctr__menu-3d-compass-nav .s3d-ctr__menu-3d__compass-wrapper .s3d-ctr__menu-3d__compass {
position: relative;
width: 300px;
height: 39px;
overflow: hidden;
}
.s3d-ctr__menu-3d-compass-nav .s3d-ctr__menu-3d__compass-wrapper .s3d-ctr__menu-3d__compass:before {
content: "";
position: absolute;
left: 0;
top: 0;
width: 30%;
height: 100%;
background: linear-gradient(90deg, #f4f8fd 0%, rgba(255, 255, 255, 0.5466561625) 50%, rgba(255, 255, 255, 0) 100%);
z-index: 2;
}
.s3d-ctr__menu-3d-compass-nav .s3d-ctr__menu-3d__compass-wrapper .s3d-ctr__menu-3d__compass:after {
content: "";
position: absolute;
right: 0;
top: 0;
width: 30%;
height: 100%;
background: linear-gradient(270deg, #f4f8fd 0%, rgba(255, 255, 255, 0.5466561625) 50%, rgba(255, 255, 255, 0) 100%);
z-index: 2;
}
@media screen and (max-width: 1024px) {
.s3d-ctr__menu-3d-compass-nav .s3d-ctr__menu-3d__compass-wrapper .s3d-ctr__menu-3d__compass {
width: 200px;
}
}
@media screen and (max-width: 680px) {
.s3d-ctr__menu-3d-compass-nav .s3d-ctr__menu-3d__compass-wrapper .s3d-ctr__menu-3d__compass {
width: 200px;
}
}
.s3d-ctr__menu-3d-compass-nav .s3d-ctr__menu-3d__compass-wrapper .s3d-ctr__menu-3d__compass__inner {
position: absolute;
width: auto;
top: 0;
right: 0;
overflow: visible;
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
will-change: transform;
}
.s3d-ctr__menu-3d-compass-nav .s3d-ctr__menu-3d__compass-wrapper .s3d-ctr__menu-3d__compass__inner .compass-text {
font-family: "Inter Display", sans-serif;
font-weight: 400;
line-height: 130%;
font-size: 30px;
text-transform: uppercase;
color: #000000;
transition: transform 0.1s ease;
align-self: center;
padding: 0 3px;
}
@media screen and (max-width: 680px) {
.s3d-ctr__menu-3d-compass-nav .s3d-ctr__menu-3d__compass-wrapper .s3d-ctr__menu-3d__compass__inner .compass-text {
font-size: 28px;
}
}
.s3d-ctr__menu-3d-compass-nav .s3d-ctr__menu-3d__compass-wrapper .s3d-ctr__menu-3d__compass__inner .compass-line-big {
font-family: "Inter Display", sans-serif;
font-weight: 400;
line-height: 130%;
font-size: 28px;
text-transform: uppercase;
color: #000000;
transition: transform 0.1s ease;
align-self: center;
padding: 0 3px;
}
.s3d-ctr__menu-3d-compass-nav .s3d-ctr__menu-3d__compass-wrapper .s3d-ctr__menu-3d__compass__inner .compass-line-small {
font-family: "Inter Display", sans-serif;
font-weight: 400;
line-height: 130%;
font-size: 20px;
text-transform: uppercase;
color: #6c7a88;
padding: 0 3px;
transition: transform 0.1s ease;
align-self: center;
}
.s3d-ctr__menu-3d-buttons {
display: none;
width: auto;
align-items: center;
justify-content: center;
gap: 4px;
margin-top: 8px;
}
.s3d-ctr__menu-3d-buttons__mobile-opener {
display: none;
}
.s3d-ctr__menu-3d-buttons .s3d-ctr__filter {
z-index: 1;
display: none;
gap: 8px;
}
@media screen and (min-width: 1023px) {
.s3d-ctr__menu-3d-buttons .s3d-ctr__filter:hover .s3d-ctr__filter__icon circle:nth-of-type(1) {
cx: 5.5;
}
.s3d-ctr__menu-3d-buttons .s3d-ctr__filter:hover .s3d-ctr__filter__icon circle:nth-of-type(2) {
cx: 5.5;
}
.s3d-ctr__menu-3d-buttons .s3d-ctr__filter:hover .s3d-ctr__filter__icon circle:nth-of-type(3) {
cx: 20.5;
}
}
.s3d-ctr__menu-3d-buttons .s3d-ctr__filter__icon {
height: var(--icon16);
width: var(--icon16);
}
@media screen and (max-width: 680px) {
.s3d-ctr__menu-3d-buttons .s3d-ctr__filter__icon {
display: none;
}
}
.s3d-ctr__menu-3d-buttons .s3d-ctr__filter__icon svg {
width: 100%;
height: 100%;
fill: #000000;
stroke: #000000;
}
.s3d-ctr__menu-3d-buttons .s3d-ctr__filter__icon circle {
transition: cx 0.5s ease-in-out;
}
.s3d-ctr__menu-3d-buttons .s3d-ctr__infra-button {
position: relative;
pointer-events: painted;
z-index: 1;
display: none;
}
.s3d-ctr__menu-3d-buttons .s3d-ctr__infra-button__select {
background: #000000;
display: flex;
justify-content: flex-start;
align-items: center;
width: 33px;
height: 16px;
margin-left: 8px;
border-radius: 43px;
padding: 2px;
overflow: hidden;
cursor: pointer;
}
.s3d-ctr__menu-3d-buttons .s3d-ctr__infra-button__select-circle {
height: 14px;
width: 14px;
border-radius: 50%;
background: #e0c7aa;
}
.s3d-ctr__menu-3d-buttons .s3d-ctr__infra-button__select i {
transform: translateX(100%);
transition: transform 0.4s ease-in-out;
}
.s3d-ctr__menu-3d-buttons .s3d-ctr__infra-button__select input:checked + i {
transform: translateX(0);
}
.s3d-ctr__menu-3d-buttons .s3d-ctr__helper {
z-index: 1;
display: none;
width: var(--btn);
}
.s3d-ctr__menu-3d-buttons input {
display: none;
}
.s3d-ctr__menu-3d-btn-style {
display: flex;
flex-direction: row;
justify-content: center;
justify-content: space-between;
align-items: center;
padding: var(--space-2) var(--space-3);
border: 1px solid var(--border-gray-600-transparent-40);
border-radius: var(--border-space-2);
background: #f4f8fd;
background-color: var(--color-surface-gray-200-transperent-88);
font-size: 13px;
color: #000000;
pointer-events: painted;
transition: all 0.3s ease-in;
overflow: hidden;
cursor: pointer;
font-size: 13px;
font-family: "Inter Display", sans-serif;
font-weight: 400;
font-style: normal;
line-height: 140%;
text-decoration: none;
text-transform: none;
}
.s3d-ctr__menu-3d-btn-style .checkbox-wrapper-6 {
margin-left: 8px;
}
@media (hover: hover) {
.s3d-ctr__menu-3d-btn-style:hover {
border-color: var(--border-gray-600-transparent-88);
background-color: var(--color-surface-gray-400-transperent-88);
}
}
@media screen and (min-width: 1023px) {
.s3d-ctr__menu-3d-btn-style.btn-style-hover:hover {
border: 1px solid #c0d1e1;
background: #e3ebf3;
color: #000000;
}
}
.s3d-ctr__menu-3d-btn-style[disabled] {
opacity: 0.5;
pointer-events: none;
}
.s3d-ctr__menu-3d-btn-style[disabled] .checkbox-wrapper-6 {
pointer-events: none;
}
.desktop .s3d-ctr__option__buttons {
max-height: 250px;
overflow-y: auto;
scrollbar-width: none;
--webkit-scrollbar: none;
}
.desktop .s3d-ctr__option__buttons::-webkit-scrollbar {
display: none;
}
.desktop .s3d-ctr__option__buttons--floors {
top: auto;
bottom: 0;
transform: translate(100%, 0%);
}
.tablet .s3d-ctr__option__buttons {
width: 175px;
}
.tablet .s3d-ctr__nav .s3d-nav__btn {
min-width: auto;
flex-grow: 1;
}
@media screen and (max-width: 1024px) {
.tablet .s3d-ctr__nav .s3d-nav__btn {
width: max-content;
}
}
.tablet .s3d-ctr__menu-3d-buttons > :nth-child(n+2) {
margin-left: 4px;
}
.mobile .s3d-ctr__menu-3d-buttons {
transition: 0.25s ease-in-out;
transform: translateY(100%);
display: none !important;
position: relative;
z-index: 100;
justify-content: flex-start;
position: fixed;
right: 0;
left: auto;
top: auto;
bottom: var(--menu-h);
flex-direction: row;
flex-wrap: wrap;
align-items: flex-start;
height: auto;
background: white;
padding: 8px;
}
.mobile .s3d-ctr__menu-3d-buttons.s3d-show {
transform: translateY(0%);
}
.mobile .s3d-ctr__menu-3d-buttons__mobile-opener {
width: 42px;
height: 42px;
pointer-events: all;
position: absolute;
right: 0;
bottom: calc(100% + 8px);
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
background-color: white;
padding: 4px;
}
.mobile .s3d-ctr__menu-3d-buttons__mobile-opener [data-when-opened] {
display: none;
}
.mobile .s3d-ctr__menu-3d-buttons__mobile-opener [data-when-closed],
.mobile .s3d-ctr__menu-3d-buttons__mobile-opener [data-when-opened] {
animation: fadeInPopup 0.5s ease-in-out forwards;
}
.mobile .s3d-ctr__menu-3d-buttons__mobile-opener svg {
width: 100%;
height: 100%;
}
.mobile .s3d-ctr__menu-3d-buttons__mobile-opener svg [fill] {
fill: red;
}
.mobile .s3d-ctr__menu-3d-buttons__mobile-opener svg [stroke] {
stroke: red;
}
.mobile .s3d-ctr__menu-3d-buttons__mobile-opener input {
display: none;
}
.mobile .s3d-ctr__menu-3d-buttons.s3d-show [data-when-closed] {
display: none;
}
.mobile .s3d-ctr__menu-3d-buttons.s3d-show [data-when-opened] {
display: block;
}
.mobile .s3d-ctr__menu-3d-buttons > * {
flex-shrink: 0;
flex-grow: 1;
}
.mobile .s3d-ctr__option__buttons {
scrollbar-width: none;
--webkit-scrollbar: none;
}
.mobile .s3d-ctr__option__buttons--floors {
left: auto;
right: 0;
}
.mobile .s3d-ctr__option__buttons > * {
width: 125px !important;
}
.mobile .s3d-ctr .s3d-nav__btn {
font-size: 10.5px;
width: 10.28%;
}
.s3d__choose--flat {
position: relative;
z-index: 1;
display: none;
padding: 0;
border: none;
background: var(--color-surface-gray-200-transperent-88);
}
.s3d__choose--flat input {
display: none;
}
.s3d__choose--flat--button {
z-index: 1;
transition: background-color 0.6s ease-in-out, color 0.3s ease-in-out;
cursor: pointer;
text-align: center;
width: 97px;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
padding: var(--space-3);
border-radius: var(--border-space-2);
}
.s3d__choose--flat--button.current {
pointer-events: none;
}
.s3d__choose--flat--button.current span {
color: var(--text-gray-900);
}
.s3d__choose--flat--button-bg {
border-radius: var(--border-space-2);
}
@media (hover: hover) {
.s3d__choose--flat--button:hover {
border-color: var(--border-gray-600-transparent-88);
background-color: var(--color-surface-gray-400-transperent-88);
}
}
@media screen and (max-width: 680px) {
.s3d__choose--flat--button {
width: 50%;
flex-grow: 1;
}
}
.s3d__choose--flat--button input:checked + span {
color: var(--text-gray-200);
}
@media screen and (min-width: 1023px) {
.s3d__choose--flat--button input:checked:hover + span {
color: var(--text-gray-900);
cursor: no-drop;
}
}
.s3d__choose--flat--button input:not(checked) + span {
color: #000000;
}
@media screen and (min-width: 1023px) {
.s3d__choose--flat--button input:not(checked):hover {
background: #e3ebf3;
}
}
.s3d__choose--flat--button span {
transition: color 0.3s ease-in-out;
}
.s3d__choose--flat--button-bg {
position: absolute;
left: 0;
height: 100%;
width: 97px;
display: flex;
justify-content: center;
align-items: center;
pointer-events: none;
overflow: hidden;
z-index: 0;
}
@media screen and (max-width: 680px) {
.s3d__choose--flat--button-bg {
width: 87px;
}
}
.s3d__choose--flat--button-bg svg {
height: 100%;
width: 200%;
flex: 1 0 200%;
fill: var(--color-surface-brand-800);
}
@media screen and (min-width: 1025px) {
.s3d__choose--flat--button-bg svg {
height: calc(100% + 1px);
}
}
.s3d-ctr__theme {
visibility: visible;
transition: all 0.4s ease-in-out;
z-index: 1;
display: none;
padding: 0;
border: none;
width: 84px;
}
.s3d-ctr__theme--currencies {
width: 100px;
height: 40px;
}
.s3d-ctr__theme input[type=checkbox] {
height: 0;
width: 0;
visibility: hidden;
}
.s3d-ctr__theme label {
width: 100%;
height: 40px;
background: transparent;
position: relative;
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--border-space-2);
}
.s3d-ctr__theme label div,
.s3d-ctr__theme label svg {
width: 40px;
height: 40px;
padding: var(--space-2);
fill: #000000;
display: flex;
align-items: center;
justify-content: center;
z-index: 1;
cursor: pointer;
transition: 0.25s ease-out;
border-radius: var(--border-space-2);
}
.s3d-ctr__theme label div:hover,
.s3d-ctr__theme label svg:hover {
background-color: var(--color-surface-gray-400-transperent-88);
}
.s3d-ctr__theme label div {
width: 51px;
height: 40px;
flex-shrink: 0;
}
.s3d-ctr__theme label svg:first-child {
margin-right: var(--space-1);
}
.s3d-ctr__theme label:after {
content: "";
position: absolute;
top: 50%;
left: 0;
transform: translate(0, -50%);
width: 40px;
height: 40px;
background: var(--color-surface-brand-800);
border-radius: var(--border-space-2);
border: 1px solid var(--border-brand-900);
transition: all 0.3s ease-in-out;
z-index: -1;
}
.s3d-ctr__theme--currencies label:after {
width: 48px;
}
.s3d-ctr__theme--currencies label:before {
content: "";
z-index: -1;
position: absolute;
left: 0;
top: 0;
width: calc(100% - 2px);
height: calc(100% - 2px);
border-radius: var(--space-2);
border: 1px solid var(--border-gray-600-transparent-40);
}
.s3d-ctr__theme input:not(:checked) + label div:first-child,
.s3d-ctr__theme input:not(:checked) + label svg:first-child {
background-color: transparent;
}
.s3d-ctr__theme input:not(:checked) + label div:first-child,
.s3d-ctr__theme input:not(:checked) + label svg:first-child {
fill: var(--icon-gray-200);
color: var(--text-gray-200);
}
.s3d-ctr__theme input:checked + label div:last-child,
.s3d-ctr__theme input:checked + label svg:last-child {
background-color: transparent;
fill: var(--icon-gray-200);
color: var(--text-gray-200);
}
.s3d-ctr__theme input:checked + label:after {
left: 100%;
transform: translate(-100%, -50%);
}
.s3d-infoBox {
position: fixed;
top: 50%;
left: 100%;
width: auto;
height: auto;
display: flex;
flex-direction: column;
justify-content: flex-start;
opacity: 0;
border-radius: var(--space-2);
transform: translate(0, -50%);
z-index: 999;
transition: transform 0.5s ease-in 0.3s, opacity 0.3s ease-in 0.1s, visibility 0.3s ease-in 0.4s;
pointer-events: none;
visibility: hidden;
}
@media screen and (max-width: 1024px) {
.s3d-infoBox {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
}
.s3d-infoBox__close {
display: none;
border: none;
background: none;
}
.s3d-infoBox__close svg {
fill: var(--icon-gray-900);
}
@media screen and (max-width: 1024px) {
.s3d-infoBox__close {
height: 24px;
width: 24px;
display: flex;
align-items: center;
justify-content: center;
}
.s3d-infoBox__close svg {
width: 24px;
height: 24px;
flex-shrink: 0;
}
}
.s3d-infoBox__image {
display: flex;
justify-content: center;
align-items: center;
border: none;
height: auto;
width: 100%;
order: 1;
z-index: 2;
transition: opacity 0.6s cubic-bezier(0.41, 0.57, 0.26, 1);
}
.s3d-infoBox__image img {
display: inline-block;
object-fit: contain;
max-width: 100%;
height: 100%;
}
.s3d-infoBox .s3d-infoBox__info {
padding: 24px;
gap: 12px;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
width: 100%;
}
.s3d-infoBox .s3d-infoBox__info .s3d-infoBox__title {
width: 100%;
}
.s3d-infoBox .s3d-infoBox__info .s3d-infoBox__table {
width: 100%;
}
.s3d-infoBox .s3d-infoBox__info .s3d-infoBox__table tbody {
gap: 8px;
display: flex;
flex-direction: column;
}
.s3d-infoBox .s3d-infoBox__info .s3d-infoBox__table .s3d-infoBox__row {
font-family: "Inter Display", sans-serif;
font-weight: 400;
line-height: 130%;
font-size: var(--font14);
display: flex;
align-items: flex-end;
justify-content: space-between;
}
.s3d-infoBox .s3d-infoBox__info .s3d-infoBox__table .s3d-infoBox__row .s3d-infoBox__name {
display: flex;
align-items: flex-end;
flex: 1 1 10%;
text-transform: capitalize;
}
.s3d-infoBox .s3d-infoBox__info .s3d-infoBox__table .s3d-infoBox__row .s3d-infoBox__name:after {
content: "";
display: flex;
flex: 1 1 5%;
margin: 0 0.5ch 0.4ch;
border-bottom: 1px solid #b2aa9c;
}
.s3d-infoBox__link {
display: none;
align-items: center;
justify-content: center;
align-self: center;
width: 100%;
height: var(--btn);
background: #000000;
font-family: "Inter Display", sans-serif;
font-weight: 400;
line-height: 130%;
font-size: var(--font14);
color: #f4f8fd;
border-radius: var(--border-space-2);
border: none;
}
@media screen and (max-width: 1024px) {
.s3d-infoBox__link {
display: flex;
}
}
.s3d-infoBox__general, .s3d-infoBox__sold, .s3d-infoBox__sale-close, .s3d-infoBox__flatSold, .s3d-infoBox__infrastructure {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
width: 100%;
padding: var(--offset);
background: #f4f8fd;
gap: 12px;
max-width: 320px;
}
@media screen and (max-width: 1024px) {
.s3d-infoBox__general, .s3d-infoBox__sold, .s3d-infoBox__sale-close, .s3d-infoBox__flatSold, .s3d-infoBox__infrastructure {
min-width: 200px;
}
}
.s3d-infoBox__general .s3d-infoBox__title, .s3d-infoBox__sold .s3d-infoBox__title, .s3d-infoBox__sale-close .s3d-infoBox__title, .s3d-infoBox__flatSold .s3d-infoBox__title, .s3d-infoBox__infrastructure .s3d-infoBox__title {
font-family: "Inter Display", sans-serif;
font-weight: 400;
line-height: 130%;
font-size: 20px;
font-style: normal;
font-weight: 600;
line-height: 130%; color: #000000;
text-align: center;
text-transform: uppercase;
}
.s3d-infoBox__general .s3d-infoBox__subtitle, .s3d-infoBox__sold .s3d-infoBox__subtitle, .s3d-infoBox__sale-close .s3d-infoBox__subtitle, .s3d-infoBox__flatSold .s3d-infoBox__subtitle, .s3d-infoBox__infrastructure .s3d-infoBox__subtitle {
font-size: 13px;
font-style: normal;
font-weight: 400;
line-height: 130%;
color: #000000;
}
.s3d-infoBox__infrastructure {
padding: var(--space-1);
gap: 0;
}
.s3d-infoBox__infrastructure-title {
padding-top: var(--space-5);
padding-bottom: var(--space-5);
}
@media screen and (max-width: 768px) {
.s3d-infoBox__infrastructure-title {
padding-top: var(--space-3);
padding-bottom: var(--space-3);
}
}
@media screen and (max-width: 1024px) {
.s3d-infoBox__infrastructure .s3d-infoBox__close {
position: absolute;
right: 0;
top: 0;
background: var(--color-surface-gray-200);
border-bottom-left-radius: var(--space-2);
border-bottom-right-radius: var(--space-2);
}
}
.s3d-infoBox__general {
padding: var(--space-5);
}
.s3d-infoBox__general .s3d-infoBox__title-wrap {
width: 100%;
display: flex;
justify-content: flex-start;
}
.s3d-infoBox__general span.s3d-infoBox__title {
background-color: var(--color-brand-800);
border: 1px solid var(--color-brand-900);
border-radius: var(--border-space-1);
color: var(--text-gray-200);
width: fit-content;
padding: var(--space-1) var(--space-3);
}
@media screen and (max-width: 1024px) {
.s3d-infoBox__sold {
min-width: 94px;
}
}
.s3d-infoBox__flat .s3d-infoBox__title {
width: 100%;
}
@media screen and (max-width: 600px) {
.s3d-infoBox__flat .s3d-infoBox__title.s3d-infoBox__title-no-bottom-margin {
margin-top: 0;
}
}
.s3d-infoBox__flat .ButtonWithoutIcon {
width: 100%;
text-align: center;
}
.s3d-infoBox__general {
width: 235px;
flex-direction: row;
flex-wrap: wrap;
column-gap: 0;
row-gap: var(--space-5);
border-radius: var(--border-space-2);
background-color: var(--color-surface-gray-200);
}
.s3d-infoBox__general .s3d-infoBox__close {
position: absolute;
top: 3px;
right: 3px;
}
.s3d-infoBox__general .ButtonWithoutIcon {
width: 100%;
text-align: center;
}
.s3d-infoBox__general .s3d-infoBox__title {
width: 100%;
text-align: left;
color: var(--text-gray-900);
font-size: 20px;
font-family: "Inter Display", sans-serif;
font-weight: 400;
font-style: normal;
line-height: 130%;
text-decoration: none;
text-transform: none;
}
.s3d-infoBox__general .s3d-infoBox__subtitle {
color: var(--text-gray-800);
font-size: 13px;
font-family: "Inter Display", sans-serif;
font-weight: 400;
font-style: normal;
line-height: 140%;
text-decoration: none;
text-transform: none;
}
.s3d-infoBox__general .s3d-infoBox__block {
width: 100%;
}
.s3d-infoBox__general .s3d-infoBox__link {
display: flex;
}
.s3d-infoBox__floor {
background: #f4f8fd;
width: 240px;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: space-between;
}
@media screen and (max-width: 1024px) {
.s3d-infoBox__floor {
width: 100%;
min-width: 60vw;
}
}
.s3d-infoBox__floor .s3d-infoBox__info .s3d-infoBox__title {
color: #000000;
}
.s3d-infoBox__floor .s3d-infoBox__info .s3d-infoBox__table .s3d-infoBox__row .s3d-infoBox__name {
color: #000000;
}
.s3d-infoBox__infrastructure {
background-color: var(--color-surface-gray-200);
border-radius: var(--border-space-2);
}
@media screen and (min-width: 769px) {
.s3d-infoBox__infrastructure {
gap: 0;
}
}
@media screen and (max-width: 768px) {
.s3d-infoBox__infrastructure {
gap: var(--space-2);
}
}
.s3d-infoBox__infrastructure .s3d__close.s3d-infoBox__close {
align-self: flex-end;
}
.s3d-infoBox__infrastructure .ButtonWithoutIcon {
width: 100%;
}
.s3d-infoBox__infrastructure-title {
color: var(--text-gray-900);
font-size: 20px;
font-family: "Inter Display", sans-serif;
font-weight: 400;
font-style: normal;
line-height: 130%;
text-decoration: none;
text-transform: none;
}
.s3d-infoBox__infrastructure-vr-icon {
width: 56px;
height: 56px;
position: absolute;
left: 50%;
top: 0;
transform: translateX(-50%) translatey(-50%);
border-radius: 50%;
background-color: var(--color-surface-gray-900);
display: flex;
align-items: center;
justify-content: center;
}
.s3d-infoBox__infrastructure-vr-icon svg {
fill: var(--icon-gray-200);
width: 24px;
height: 24px;
}
.s3d-infoBox__infrastructure img {
border-radius: var(--border-space-2);
}
.s3d-infoBox__sold {
display: flex;
flex-direction: row-reverse;
justify-content: flex-start;
border-radius: var(--border-space-2);
padding: var(--space-2);
max-width: 184px;
}
.s3d-infoBox__sold .s3d-infoBox__title {
font-size: 13px;
font-family: "Inter Display", sans-serif;
font-weight: 400;
font-style: normal;
line-height: 140%;
text-decoration: none;
text-transform: none;
}
.s3d-infoBox__flat {
padding: var(--space-2) var(--space-2) var(--space-5);
--info-column-gap: var(--space-2);
background: var(--color-surface-gray-100);
width: 280px;
display: flex;
flex-direction: column;
align-items: stretch;
justify-content: space-between;
border-radius: var(--border-space-2);
overflow: hidden;
}
.s3d-infoBox__flat .s3d-infoBox__close {
padding: 0;
z-index: 10;
}
.s3d-infoBox__flat .ButtonWithoutIcon {
width: 100%;
}
.s3d-infoBox__flat__image-wrapper {
width: calc(100% - var(--space-2) * 2);
margin-top: var(--space-2);
margin-left: auto;
margin-right: auto;
border-radius: var(--border-space-2);
overflow: hidden;
padding: var(--space-2);
background-color: var(--color-surface-gray-100);
}
.s3d-infoBox__flat .s3d-infoBox__image {
position: relative;
padding-bottom: 52.5%;
height: auto;
min-height: 220px;
}
.s3d-infoBox__flat .s3d-infoBox__image img {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
object-fit: contain;
}
.s3d-infoBox__flat__wrapper-label {
margin: 0;
margin-top: 0;
}
.s3d-infoBox__flat__alert-header {
display: flex;
align-items: center;
justify-content: space-between;
}
.s3d-infoBox__flat__alert-header div {
display: flex;
align-items: center;
justify-content: space-between;
}
.s3d-infoBox__flat__alert__badge {
font-size: 13px !important;
}
.s3d-infoBox__flat__alert__middle {
text-transform: uppercase;
margin-top: 12px;
}
.s3d-infoBox__flat__alert-title {
display: flex;
align-items: center;
justify-content: flex-start;
margin-bottom: var(--space-2);
font-size: 14px;
font-family: "Inter Display", sans-serif;
font-weight: 400;
font-style: normal;
line-height: 140%;
text-decoration: none;
text-transform: none;
color: var(--color-gray-700);
gap: 3px;
}
.s3d-infoBox__flat-bottom {
padding: 0 var(--space-3);
}
.s3d-infoBox__flat__alert {
z-index: 3;
padding: var(--space-1) var(--space-3);
font-size: 13px;
font-family: "Inter Display", sans-serif;
font-weight: 400;
font-style: normal;
line-height: 140%;
text-decoration: none;
text-transform: none;
border-radius: var(--border-space-1);
display: flex;
align-items: center;
color: var(--text-gray-200);
text-transform: uppercase;
}
.s3d-infoBox__flat__alert--with-icon {
padding: var(--space-1) var(--space-1) var(--space-1) var(--space-3);
}
.s3d-infoBox__flat__alert--left {
right: auto;
left: var(--padding);
}
.s3d-infoBox__flat__alert--dark {
background-color: var(--color-surface-gray-900);
}
.s3d-infoBox__flat__alert[data-sale="1"] {
background: var(--color-surface-semantic-success);
}
.s3d-infoBox__flat__alert svg {
margin-left: 8px;
width: 16px;
height: 16px;
fill: var(--icon-gray-200);
}
.s3d-infoBox__flat__alert__status-icon {
width: 16px;
height: 16px;
}
.s3d-infoBox__flat__alert[data-sale="0"] {
background: var(--color-semantic-danger);
}
.s3d-infoBox__flat__alert[data-sale="1"] {
background: var(--color-surface-semantic-success);
}
.s3d-infoBox__flat__alert[data-sale="2"] {
background: #6d6805;
}
.s3d-infoBox__flat__alert[data-sale="3"] {
background: #000000;
}
.s3d-infoBox__flat__block {
width: calc(100% - var(--info-column-gap) * 0.5);
}
.s3d-infoBox__flat__text {
font-size: 13px;
font-style: normal;
font-weight: 400;
line-height: 130%;
color: var(--text-gray-800);
}
.s3d-infoBox__flat__textBold {
font-size: 20px;
font-style: normal;
font-weight: 400;
line-height: 130%;
font-weight: 700;
}
@media screen and (max-width: 680px) {
.s3d-infoBox__flat {
width: calc(100vw - var(--space-4) * 2);
width: 280px;
}
}
.s3d-infoBox__flat .s3d-infoBox__info {
padding: var(--padding);
row-gap: var(--space-3);
column-gap: var(--info-column-gap);
display: flex;
align-items: flex-start;
justify-content: flex-start;
flex-wrap: wrap;
width: 100%;
padding: calc(var(--padding) * 2);
padding-top: var(--padding);
}
.s3d-infoBox__flat .s3d-infoBox__info .ButtonWithoutIcon {
width: 100%;
}
.s3d-infoBox__flat .s3d-infoBox__info .s3d-infoBox__table {
width: 100%;
}
.s3d-infoBox__flat .s3d-infoBox__info .s3d-infoBox__table tbody {
gap: 8px;
display: flex;
flex-direction: column;
}
.s3d-infoBox__flat .s3d-infoBox__info .s3d-infoBox__table .s3d-infoBox__row {
font-family: "Inter Display", sans-serif;
font-weight: 400;
line-height: 130%;
font-size: var(--font14);
display: flex;
align-items: flex-end;
justify-content: space-between;
}
.s3d-infoBox__flat .s3d-infoBox__info .s3d-infoBox__table .s3d-infoBox__row .s3d-infoBox__name {
display: flex;
align-items: flex-end;
flex: 1 1 10%;
text-transform: capitalize;
color: #000000;
}
.s3d-infoBox__flat .s3d-infoBox__info .s3d-infoBox__table .s3d-infoBox__row .s3d-infoBox__name:after {
content: "";
display: flex;
flex: 1 1 5%;
margin: 0 0.5ch 0.4ch;
border-bottom: 1px solid #b2aa9c;
}
.s3d-infoBox__flat .s3d-infoBox__info .s3d-infoBox__table .s3d-infoBox__row .s3d-infoBox__value {
padding: 2px 8px;
border-radius: var(--border-space-2);
color: #000000;
}
.s3d-infoBox__flat .s3d-infoBox__info .s3d-infoBox__table .s3d-infoBox__row .s3d-infoBox__value[data-sale="0"] {
background: var(--color-semantic-danger);
color: var(--text-gray-200);
}
.s3d-infoBox__flat .s3d-infoBox__info .s3d-infoBox__table .s3d-infoBox__row .s3d-infoBox__value[data-sale="1"] {
background: var(--color-surface-semantic-success);
color: var(--text-gray-200);
}
.s3d-infoBox__flat .s3d-infoBox__info .s3d-infoBox__table .s3d-infoBox__row .s3d-infoBox__value[data-sale="2"] {
background: #6d6805;
color: var(--text-gray-200);
}
.s3d-infoBox__flat .s3d-infoBox__info .s3d-infoBox__table .s3d-infoBox__row .s3d-infoBox__value[data-sale="3"] {
background: #000000;
color: var(--text-gray-200);
}
.s3d-infoBox__flat .s3d-infoBox__info .s3d-infoBox__link {
background: #000000;
color: #f4f8fd;
display: block;
}
.tablet .s3d-infoBox,
[data-s3d-touch-mode=touch] .s3d-infoBox,
.primary_input_touch.touchOnly .s3d-infoBox {
top: 50%;
bottom: auto;
transform: translateX(-50%) translateY(-50%);
}
@media screen and (min-width: 1920px) {
.tablet .s3d-infoBox,
[data-s3d-touch-mode=touch] .s3d-infoBox,
.primary_input_touch.touchOnly .s3d-infoBox {
left: 50%;
}
}
.tablet .s3d-infoBox__close,
[data-s3d-touch-mode=touch] .s3d-infoBox__close,
.primary_input_touch.touchOnly .s3d-infoBox__close {
z-index: 150;
}
.tablet .s3d-infoBox__image,
[data-s3d-touch-mode=touch] .s3d-infoBox__image,
.primary_input_touch.touchOnly .s3d-infoBox__image {
width: 100%;
}
.tablet .s3d-infoBox__info,
[data-s3d-touch-mode=touch] .s3d-infoBox__info,
.primary_input_touch.touchOnly .s3d-infoBox__info {
width: 100%;
}
.tablet .s3d-infoBox,
[data-s3d-touch-mode=touch] .s3d-infoBox,
.primary_input_touch.hybrid .s3d-infoBox {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.tablet .s3d-infoBox__close,
[data-s3d-touch-mode=touch] .s3d-infoBox__close,
.primary_input_touch.hybrid .s3d-infoBox__close {
display: flex;
height: var(--btn);
width: var(--btn);
align-items: center;
justify-content: center;
padding: 0;
cursor: pointer;
}
.tablet .s3d-infoBox__sold,
.tablet .s3d-infoBox__sale-close,
.tablet .s3d-infoBox__flatSold,
.tablet .s3d-infoBox__infrastructure,
[data-s3d-touch-mode=touch] .s3d-infoBox__sold,
[data-s3d-touch-mode=touch] .s3d-infoBox__sale-close,
[data-s3d-touch-mode=touch] .s3d-infoBox__flatSold,
[data-s3d-touch-mode=touch] .s3d-infoBox__infrastructure,
.primary_input_touch.hybrid .s3d-infoBox__sold,
.primary_input_touch.hybrid .s3d-infoBox__sale-close,
.primary_input_touch.hybrid .s3d-infoBox__flatSold,
.primary_input_touch.hybrid .s3d-infoBox__infrastructure {
width: 300px;
}
.tablet .s3d-infoBox__general,
[data-s3d-touch-mode=touch] .s3d-infoBox__general,
.primary_input_touch.hybrid .s3d-infoBox__general {
max-width: 256px !important;
}
.tablet .s3d-infoBox__infrastructure .s3d-infoBox__close,
[data-s3d-touch-mode=touch] .s3d-infoBox__infrastructure .s3d-infoBox__close,
.primary_input_touch.hybrid .s3d-infoBox__infrastructure .s3d-infoBox__close {
border-radius: 50%;
background-color: var(--color-surface-gray-200);
border: 1px solid var(--border-gray-600-transparent-40);
z-index: 10;
transform: translate(60%, -60%);
padding: var(--space-2);
}
.tablet .s3d-infoBox__infrastructure:after, .tablet .s3d-infoBox__general:after, .tablet .s3d-infoBox__flat:after,
[data-s3d-touch-mode=touch] .s3d-infoBox__infrastructure:after,
[data-s3d-touch-mode=touch] .s3d-infoBox__general:after,
[data-s3d-touch-mode=touch] .s3d-infoBox__flat:after,
.primary_input_touch.hybrid .s3d-infoBox__infrastructure:after,
.primary_input_touch.hybrid .s3d-infoBox__general:after,
.primary_input_touch.hybrid .s3d-infoBox__flat:after {
content: "";
position: fixed;
left: 50%;
top: 50%;
background: var(--bg-overlay);
width: 100vw;
height: 100vh;
transform: translate(-50%, -50%);
z-index: -1;
pointer-events: none;
}
.tablet .s3d-infoBox__link,
[data-s3d-touch-mode=touch] .s3d-infoBox__link,
.primary_input_touch.hybrid .s3d-infoBox__link {
display: flex;
}
.mobile .s3d-infoBox__infrastructure:after, .mobile .s3d-infoBox__general:after, .mobile .s3d-infoBox__flat:after {
content: "";
position: fixed;
left: 50%;
top: 50%;
background: var(--bg-overlay);
width: 100vw;
height: 100vh;
transform: translate(-50%, -50%);
z-index: -1;
pointer-events: none;
}
.mobile .s3d-infoBox__sold .s3d-infoBox__close {
width: 24px;
height: 24px;
}
.mouseOnly.desktop [data-s3d-touch-mode=mouse] .s3d-infoBox {
pointer-events: none !important;
}
.fs-preloader {
background-color: #fff;
height: 100%;
width: 100%;
position: fixed;
left: 0;
top: 0;
z-index: 10000;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
visibility: visible;
opacity: 1;
transition: all 0.5s ease-in-out;
gap: 16px;
}
.fs-preloader-logo {
width: 125px;
height: auto;
animation: 3s ease-in-out loader infinite;
}
@media screen and (max-width: 680px) {
.fs-preloader-logo {
width: 120px;
}
}
.fs-preloader.loading {
visibility: hidden;
opacity: 0;
}
.fs-preloader.loading .fs-preloader-logo {
animation: none;
}
.rotate-screen-warning {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: #f4f8fd;
z-index: 10000;
display: flex;
flex-wrap: wrap;
align-items: flex-start;
justify-content: center;
display: none;
padding-inline: 20px;
}
.mobile.landscape .rotate-screen-warning {
display: flex;
}
.rotate-screen-warning svg {
max-height: 80%;
margin: auto;
}
.rotate-screen-warning__title {
width: 100%;
text-align: center;
font-family: "Inter Display", sans-serif;
font-weight: 400;
line-height: 130%;
color: #000000;
}
.rotate-screen-warning__arrow {
-webkit-animation: hoyoverse_landscapeAni 1.5s ease infinite alternate;
animation: hoyoverse_landscapeAni 1.5s ease infinite alternate;
transform-origin: center;
transform-box: fill-box;
}
@keyframes animName {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(-360deg);
}
}
@-webkit-keyframes hoyoverse_landscapeAni {
0% {
-webkit-transform: rotate(-90deg);
}
30% {
-webkit-transform: rotate(-90deg);
}
70% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(0deg);
}
}
@keyframes hoyoverse_landscapeAni {
0% {
transform: rotate(-90deg);
}
30% {
transform: rotate(-90deg);
}
70% {
transform: rotate(0deg);
}
100% {
transform: rotate(0deg);
}
}
.fs-preloader-before {
position: absolute;
top: 50%;
left: 50%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
transform: translate(-50%, -50%);
visibility: hidden;
opacity: 0;
z-index: 9000;
pointer-events: none;
color: #f4f8fd;
gap: 16px;
transition: 0.2s ease-in-out;
}
.fs-preloader-before.preloader-active {
visibility: visible;
opacity: 1;
transition: 0.2s ease-in-out;
}
.fs-preloader-before-background {
position: absolute;
width: 320px;
height: 320px;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background-color: rgba(0, 0, 0, 0.5);
border-radius: 20px;
display: none;
}
.fs-preloader-before-precent {
position: relative;
z-index: 1;
}
.fs-preloader-before-box {
width: 50px;
height: 50px;
background: #f4f8fd;
border-radius: 3px;
}
.fs-preloader-before.preloader-active .fs-preloader-before-box {
animation: fsAnimate 1.3s linear infinite;
}
.fs-preloader-before-shadow {
width: 50px;
height: 5px;
background: #f4f8fd;
opacity: 0.1;
border-radius: 50%;
}
.fs-preloader-before.preloader-active .fs-preloader-before-shadow {
animation: fsShadow 2s linear infinite;
}
.fs-preloader-before-text-large {
font-family: "Inter Display", sans-serif;
font-size: 24px;
line-height: 120%;
max-width: 90%;
text-align: center;
text-transform: uppercase;
color: #f4f8fd;
}
.fs-preloader-before-text-subtitle {
color: #f4f8fd;
text-align: center;
}
.fs-preloader-before .fs-preloader-precent {
position: relative;
}
.horizontal-mob-curtain {
position: fixed;
left: 0;
top: 0;
width: 100vw;
height: 100vh;
background-color: #f4f8fd;
color: #000000;
font-family: "Inter Display", sans-serif;
font-size: 5vw;
line-height: 100%;
display: none;
justify-content: center;
align-items: center;
z-index: 500;
text-align: center;
}
.mobile.landscape .horizontal-mob-curtain {
display: flex;
}
.fs-preloader-precent,
.fs-preloader-before-precent__progress {
display: none;
}
.errorPopup {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
padding-bottom: 23px;
z-index: 2;
}
.errorPopup__container {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
width: 100%;
background: var(--color-surface-gray-200);
}
.errorPopup__head {
padding: 0;
}
.errorPopup__body {
flex: 1 1 100%;
padding: 0;
margin-top: 20px;
}
.errorPopup__body span {
color: var(--color-semantic-danger);
}
.errorPopup__footer {
display: flex;
padding: 0;
margin-top: 30px;
}
.errorPopup__title {
font-size: var(--font32);
line-height: 1em;
text-transform: uppercase;
font-family: "Inter Display", sans-serif;
color: var(--color-gray-900);
}
.errorPopup__description {
width: 100%;
text-align: center;
font-size: var(--font14);
line-height: 1.6em;
margin-top: 10px;
color: var(--color-gray-800);
}
.errorPopup__description:first-child {
margin-top: 0;
}
.errorPopup__link {
display: flex;
justify-content: center;
align-items: center;
height: 50px;
width: 220px;
text-decoration: none;
border-radius: 50px;
background: #000000;
color: #f4f8fd;
font-size: var(--font14);
letter-spacing: 0.1em;
font-family: "Inter Display", sans-serif;
text-transform: uppercase;
}
.errorPopup__time {
color: #e0c7aa;
}
@media screen and (max-width: 680px) {
.errorPopup {
padding: 30px;
max-width: 100%;
}
.errorPopup__body {
margin-top: 15px;
}
.errorPopup__footer {
margin-top: 15px;
}
.errorPopup__link {
height: 40px;
width: 155px;
}
}
.send-error-popup {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
gap: 10px;
transform: translateY(-100%);
z-index: -1;
}
.send-error-popup__wrap {
width: 100%;
position: absolute;
bottom: 0;
left: 0;
transform: translateY(100%);
overflow: hidden;
}
.send-error-popup__message {
color: var(--color-semantic-danger);
font-size: var(--font13);
line-height: 1.3em;
}
.send-error-popup__icon {
display: inline-block;
height: 24px;
width: 24px;
fill: var(--color-semantic-danger);
}
.error-progress {
width: 100%;
height: 2px;
background: #000000;
overflow: hidden;
}
.s3d-flat {
display: grid;
grid-template-columns: 264px var(--space-4) auto var(--space-4) 20%;
grid-template-rows: var(--s3d-header) calc(100vh - var(--s3d-header) - var(--menu-h)) var(--menu-h);
grid-auto-flow: dense;
grid-template-areas: ". . . . ." "info . content content content" "menu . content content content";
width: 100%;
height: 100%;
}
.s3d-flat__floor {
padding-top: max(3.33vw, 40px);
padding-left: 24px;
padding-right: 24px;
}
@media screen and (max-width: 768px) {
.s3d-flat__floor {
padding-left: 20px;
padding-right: 20px;
}
}
.s3d-flat .s3d-flat__floor-info {
cursor: grab;
user-select: none;
}
.s3d-flat .s3d-flat__floor-info polygon {
pointer-events: all;
}
.s3d-flat__floor-plan-container {
display: grid;
grid-template-columns: 1fr max-content;
align-items: center;
grid-template-areas: "title title" "floor nav";
}
.s3d-flat__floor-plan-container [data-flat-floor-list] {
overflow: hidden;
width: 225px;
}
.s3d-flat__floor-plan-container .s3d-flat__floor {
grid-area: floor;
}
.s3d-flat__floor-plan-container-nav {
grid-area: nav;
}
.s3d-flat__floor-plan-container-nav > :nth-child(n+2) {
margin-top: var(--space-1);
}
.s3d-flat__floor-plan-container-title {
grid-area: title;
display: flex;
align-items: center;
justify-content: flex-start;
}
.s3d-flat__floor-plan-container-title svg {
width: var(--space-6);
height: var(--space-6);
padding: var(--space-1);
border: 1px solid var(--border-gray-900);
margin-left: var(--space-1);
border-radius: var(--border-space-2);
cursor: pointer;
}
.s3d-flat__content-wrapper {
grid-area: content;
overflow-y: auto;
}
.s3d-flat__content-wrapper::-webkit-scrollbar {
width: 10px;
height: 10px;
cursor: pointer;
}
.s3d-flat__content-wrapper::-webkit-scrollbar-thumb {
background: var(--color-surface-gray-600);
border-radius: var(--border-space-2);
cursor: pointer;
}
.s3d-flat__content-wrapper::-webkit-scrollbar-track {
background: transparent;
}
.s3d-flat__content-wrapper {
scrollbar-face-color: var(--color-surface-gray-600);
scrollbar-track-color: transparent;
}
.s3d-flat__content-screen {
position: relative;
padding: var(--space-4);
border: 1px solid var(--border-gray-400);
border-radius: var(--border-space-2);
}
.s3d-flat__content-screen.no-borders {
border: none;
padding: 0;
}
.s3d-flat__content-screen iframe {
width: 100%;
height: 70vh;
}
.s3d-flat__content-screen ~ .s3d-flat__content-screen {
margin-top: var(--space-8);
}
@media screen and (max-width: 1024px) {
.s3d-flat {
height: auto;
grid-template-columns: 1fr 30%;
grid-template-rows: var(--s3d-header) auto min-content var(--menu-h);
grid-template-areas: ". ." "img floorInfo" "info info" "menu menu";
}
}
@media screen and (max-width: 680px) {
.s3d-flat {
grid-template-columns: 1fr;
grid-template-rows: var(--s3d-header) auto auto auto var(--menu-h);
grid-template-areas: "." "img" "info" "floorInfo" "menu";
}
}
.s3d-flat__image-container {
width: 100%;
height: 100%;
grid-area: img;
}
.s3d-flat__image-container .s3d-flat__image {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
padding: 40px;
transition: height 0.4s linear;
overflow: hidden;
}
@media screen and (max-width: 1024px) {
.s3d-flat__image-container .s3d-flat__image {
padding: 20px;
height: calc(100vh - var(--s3d-header) - var(--controller-h) - var(--menu-h));
}
}
.s3d-flat__image-container .s3d-flat__image img {
display: inline-block;
object-fit: contain;
object-position: center;
cursor: pointer;
height: 100%;
width: 100%;
}
.s3d-flat__floor {
grid-area: floorInfo;
display: flex;
flex-direction: column;
justify-content: space-between;
justify-content: center;
align-items: center;
}
@media screen and (max-width: 680px) {
.s3d-flat__floor {
height: auto;
flex-direction: column-reverse;
}
}
.s3d-flat__floor-clue {
margin-bottom: 8px;
font-size: 13px;
font-family: "Inter Display", sans-serif;
font-weight: 400;
font-style: normal;
line-height: 140%;
text-decoration: none;
text-transform: none;
color: var(--color-surface-gray-700);
text-align: center;
}
.s3d-flat__floor-wrapper {
width: 50%;
overflow: hidden;
}
@media screen and (max-width: 768px) {
.s3d-flat__floor-wrapper {
width: 100%;
}
}
.s3d-flat__floor-info-wrapper {
padding-bottom: 24px;
overflow: hidden;
}
@media screen and (max-width: 768px) {
.s3d-flat__floor-info-wrapper {
padding-bottom: 16px;
}
}
.s3d-flat__floor-info-wrapper svg {
width: 100%;
height: 100%;
max-height: 80vh;
}
.s3d-flat__floor-info .s3d-flat__to--floor {
display: flex;
align-items: center;
justify-content: center;
font-family: "Inter Display", sans-serif;
font-weight: 400;
line-height: 130%;
font-size: var(--font14);
color: #f4f8fd;
background: #000000;
border: 1px solid #000000;
border-radius: var(--border-space-2);
height: var(--btn);
cursor: pointer;
transition: all 0.4s ease-in-out;
padding: 0 16px;
}
@media screen and (min-width: 1023px) {
.s3d-flat__floor-info .s3d-flat__to--floor:hover {
color: #000000;
background: rgba(255, 255, 255, 0);
border: 1px solid #000000;
}
}
.s3d-flat__floor .s3d-flat-price__wrapper {
width: 100%;
height: auto;
background: #f4f8fd;
padding: var(--offset);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 8px;
}
.s3d-flat__floor .s3d-flat-price__wrapper .main-price {
font-family: "Inter Display", sans-serif;
font-weight: 400;
line-height: 130%;
font-size: var(--font32);
color: #000000;
}
.s3d-flat__floor .s3d-flat-price__wrapper .old-price {
font-family: "Inter Display", sans-serif;
font-weight: 400;
line-height: 130%;
font-size: var(--font14);
color: #000000;
text-decoration-line: line-through;
}
.s3d-flat__floor .s3d-flat-price__wrapper .s3d-flat-price-timer {
border: 1px solid #c0d1e1;
border-radius: var(--border-space-2);
gap: 4px;
padding: 12px;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.s3d-flat__floor .s3d-flat-price__wrapper .s3d-flat-price-timer-text {
text-align: center;
font-family: "Inter Display", sans-serif;
font-weight: 400;
line-height: 130%;
font-size: var(--font14);
color: #000000;
}
.s3d-flat__floor .s3d-flat-price__wrapper .s3d-flat-price-timer .timer .timer__items {
display: flex;
}
.s3d-flat__floor .s3d-flat-price__wrapper .s3d-flat-price-timer .timer .timer__items .timer__item {
position: relative;
min-width: 20px;
margin-left: 10px;
margin-right: 10px;
text-align: center;
font-family: "Inter Display", sans-serif;
font-weight: 400;
line-height: 130%;
font-size: var(--font20);
color: #000000;
}
.s3d-flat__floor .s3d-flat-price__wrapper .s3d-flat-price-timer .timer .timer__items .timer__item:before {
content: attr(data-title);
display: block;
position: absolute;
left: 50%;
bottom: 0;
transform: translateX(-50%);
}
.s3d-flat__floor .s3d-flat-price__wrapper .s3d-flat-price-timer .timer .timer__items .timer__item:not(:last-child)::after {
content: ":";
position: absolute;
right: -15px;
}
.s3d-flat .s3d__callback {
font-family: "Inter Display", sans-serif;
font-weight: 400;
line-height: 130%;
font-size: var(--font14);
color: #000000;
background: #e0c7aa;
border-radius: var(--border-space-2);
border: 1px solid #e0c7aa;
z-index: 2;
height: var(--btn);
padding: 0 16px;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease-in-out;
cursor: pointer;
width: 100%;
width: auto;
}
.s3d-flat .s3d__callback svg {
display: none;
}
@media screen and (min-width: 1023px) {
.s3d-flat .s3d__callback:hover {
color: #000000;
background: #e3c29b;
border: 1px solid #e3c29b;
}
}
.s3d-flat__info-wrapper {
grid-area: info;
background-color: var(--color-surface-gray-300);
padding: var(--space-4);
border: 1px solid var(--border-gray-600-transparent-40);
border-radius: var(--border-space-2);
height: max-content;
}
.s3d-flat__info-block-label-wrapper {
display: flex;
flex-wrap: wrap;
gap: var(--space-05);
margin-bottom: var(--space-4);
}
.s3d-flat__info-block-top-info {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
margin-bottom: var(--space-4);
}
.s3d-flat__info-block-bottom {
display: flex;
flex-wrap: wrap;
gap: var(--space-05);
}
.s3d-flat__info-block-bottom > .ButtonWithoutIcon {
animation: flatCallBackHeartbeat 7.5s infinite;
animation-delay: 4s;
}
.s3d-flat__info-block-price-wrapper {
display: flex;
flex-direction: column;
margin-bottom: var(--space-4);
}
.s3d-flat__info-block-label {
border: 1px solid var(--border-gray-500);
background-color: var(--color-surface-gray-300);
border-radius: var(--border-space-1);
padding: var(--space-05) var(--space-1);
font-size: 13px;
font-family: "Inter Display", sans-serif;
font-weight: 400;
font-style: normal;
line-height: 140%;
text-decoration: none;
text-transform: none;
color: var(--text-gray-800);
}
.s3d-flat__info-block-double-item {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
}
.s3d-flat__info-block-double-item--with-offset {
margin-bottom: var(--space-4);
}
.s3d-flat__info-block-double-item > * {
width: calc(50% - var(--space-05) / 2);
}
.s3d-flat__info-block-status-label {
border-radius: var(--border-space-1);
padding: var(--space-1) var(--space-2);
font-size: 13px;
font-family: "Inter Display", sans-serif;
font-weight: 400;
font-style: normal;
line-height: 140%;
text-decoration: none;
text-transform: none;
display: flex;
align-items: center;
}
.s3d-flat__info-block-status-label svg {
width: 16px;
height: 16px;
margin-left: var(--space-1);
}
.s3d-flat__gallery-container-slide {
position: relative;
padding-bottom: 52.5%;
margin-bottom: var(--space-2);
}
.s3d-flat__gallery-container-slide img {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
object-fit: contain;
}
.s3d-flat__gallery-container-navigation {
margin-left: auto;
margin-right: auto;
display: flex;
align-items: center;
justify-content: center;
}
.s3d-flat__gallery-container-navigation > button:first-child {
margin-right: var(--space-3);
}
.s3d-flat__gallery-container-navigation > button:last-child {
margin-left: var(--space-3);
}
.s3d-flat__explication-screen {
display: grid;
grid-template-columns: 250px 1fr;
column-gap: var(--space-4);
margin-bottom: var(--space-4);
}
.s3d-flat__explication-screen-slide {
position: relative;
padding-bottom: 52.5%;
}
.s3d-flat__explication-screen-slide img {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
object-fit: contain;
}
.s3d-flat__explication-screen-slider {
display: grid;
align-items: center;
}
.s3d-flat__explication-screen-table {
padding: var(--space-4);
border-radius: var(--border-space-2);
background-color: var(--color-surface-gray-300);
height: max-content;
}
.s3d-flat__explication-screen-table-navigation {
display: flex;
flex-wrap: wrap;
row-gap: var(--space-05);
margin-bottom: var(--space-1);
}
.s3d-flat__explication-screen-table-navigation > * {
width: 50%;
}
.s3d-flat__explication-screen-info-row {
display: flex;
align-items: center;
}
.s3d-flat__explication-screen-info-row ~ .s3d-flat__explication-screen-info-row {
margin-top: var(--space-1);
}
.s3d-flat__explication-screen-info-row-title {
flex-grow: 1;
display: flex;
align-items: center;
}
.s3d-flat__explication-screen-info-row-title:after {
content: "";
display: block;
align-self: flex-end;
flex-grow: 1;
height: 1px;
margin-bottom: var(--space-1);
background-color: var(--color-surface-gray-600);
margin-left: var(--space-3);
margin-right: var(--space-3);
}
.s3d-flat__explication-screen-info-row-value {
white-space: nowrap;
}
.s3d-flat__other-flats-table {
width: 100%;
}
.s3d-flat__other-flats-table tr {
transition: 0.25s ease-out;
}
.s3d-flat__other-flats-table tr:nth-child(n+2) {
border-bottom: 1px solid var(--border-gray-400);
}
.s3d-flat__other-flats-table th {
text-align: center;
padding-top: var(--space-2);
padding-bottom: var(--space-2);
}
.s3d-flat__other-flats-table td {
padding-top: var(--space-5);
padding-bottom: var(--space-5);
text-align: center;
}
.s3d-flat__other-flats-table .s3d-card__status {
position: static;
width: max-content;
margin: auto;
}
@media (hover: hover) {
.s3d-flat__other-flats-table tr:hover {
background-color: var(--color-surface-gray-100);
}
}
.s3d-flat__documentation-screen {
display: grid;
gap: var(--space-2);
grid-template-columns: 1fr 1fr;
margin-top: var(--space-10);
}
.s3d-flat__documentation-screen-title {
width: 100%;
padding: var(--space-4);
grid-area: 1/1/1/3;
}
.s3d-flat__financial-terms-screen {
display: grid;
align-items: start;
gap: var(--space-2);
grid-template-columns: 1fr 1fr 1fr 1fr;
margin-top: var(--space-8);
}
.s3d-flat__financial-terms-screen-title {
width: 100%;
padding: var(--space-4);
padding-bottom: var(--space-2);
grid-area: 1/1/1/5;
}
@media screen and (max-width: 1440px) {
.s3d-flat__financial-terms-screen {
grid-template-columns: 1fr 1fr 1fr;
}
}
@media screen and (max-width: 1240px) {
.s3d-flat__financial-terms-screen {
grid-template-columns: 1fr 1fr;
}
.s3d-flat__financial-terms-screen-title {
width: 100%;
padding: var(--space-4);
grid-area: 1/1/1/3;
}
}
.s3d-flat__construction-progress-screen {
display: flex;
flex-wrap: wrap;
--offset: var(--space-2);
margin-left: calc(var(--offset) * -1);
margin-right: calc(var(--offset) * -1);
margin-top: var(--space-8);
}
.s3d-flat__construction-progress-screen-title {
width: calc(100% - var(--offset) * 2);
margin-left: calc(var(--offset));
margin-right: calc(var(--offset));
padding: var(--space-4);
}
.s3d-flat__construction-progress-screen-inner-title {
margin-bottom: var(--space-4);
font-size: 20px;
font-family: "Inter Display", sans-serif;
font-weight: 400;
font-style: normal;
line-height: 130%;
text-decoration: none;
text-transform: none;
color: var(--text-gray-900);
}
.s3d-flat__construction-progress-screen-left {
width: calc(50% - var(--offset) * 2);
margin-left: calc(var(--offset));
margin-right: calc(var(--offset));
padding: var(--space-8);
border-radius: var(--border-space-2);
border: 1px solid var(--border-gray-400);
}
.s3d-flat__construction-progress-screen-text {
margin-bottom: var(--space-4);
}
.s3d-flat__construction-progress-screen-right {
width: calc(50% - var(--offset) * 2);
margin-left: calc(var(--offset));
margin-right: calc(var(--offset));
padding: var(--space-4);
border-radius: var(--border-space-2);
border: 1px solid var(--border-gray-400);
text-align: center;
}
.s3d-flat__construction-progress-screen-slide {
position: relative;
padding-bottom: 62.5%;
border-radius: var(--border-space-1);
overflow: hidden;
cursor: grab;
}
.s3d-flat__construction-progress-screen-slide:active {
cursor: grabbing;
}
.s3d-flat__construction-progress-screen-slide img {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
object-fit: cover;
border-radius: var(--border-space-1);
}
.s3d-flat__construction-progress-screen .swiper-container {
overflow: hidden;
}
.s3d-flat__construction-progress-screen .swiper-pagination {
display: flex;
align-items: center;
justify-content: center;
margin-top: var(--space-4);
}
.s3d-flat__construction-progress-screen .swiper-pagination span {
width: 1ch;
display: inline-block;
}
.s3d-flat__construction-progress-screen .swiper-pagination button:first-child {
margin-right: var(--space-4);
}
.s3d-flat__construction-progress-screen .swiper-pagination button:last-child {
margin-left: var(--space-4);
}
.s3d-flat__button-up {
margin-left: auto;
margin-bottom: var(--space-10);
padding-right: var(--space-10);
text-align: right;
cursor: pointer;
}
@media (hover: hover) {
.s3d-flat__button-up:hover [fill] {
fill: var(--icon-gray-900);
}
}
.desktop .s3d-flat .s3d-flat__gallery-container-navigation {
margin-bottom: calc(var(--space-8) * -1);
}
.mobile .s3d__wrapper__flat {
height: calc(var(--vh, 1vh) * 100);
padding-bottom: var(--mobile-controller-height);
max-height: none !important;
}
.mobile .s3d__wrapper__flat .pinch-zoom-container {
padding-bottom: 100%;
height: auto !important;
margin-top: var(--space-2);
margin-bottom: var(--space-2);
}
.mobile .s3d-flat .s3d__callback {
height: var(--btn);
width: calc(var(--btn) * 1.35);
padding: 0;
}
.mobile .s3d-flat .s3d__callback svg {
display: block;
width: 65%;
height: 65%;
}
.mobile .s3d-flat .s3d__callback span {
display: none;
}
.mobile .s3d-flat .s3d__callback path {
fill: #000000;
}
.mobile .s3d-flat .s3d-flat__3d-tour {
height: var(--btn);
width: calc(var(--btn) * 1.35);
}
.mobile .s3d-flat .s3d-flat__3d-tour svg {
display: block;
width: 65%;
height: 65%;
}
.mobile .s3d-flat .s3d-flat__3d-tour span {
display: none;
}
.mobile .s3d-flat .s3d-flat__3d-tour path {
fill: #000000;
}
.mobile .s3d-flat__button-up {
text-align: center;
margin-bottom: var(--space-4);
margin-top: var(--space-4);
padding-right: 0;
}
.s3d-flat__info-container {
width: var(--controller-w);
height: auto;
border: 1px solid #e0c7aa;
background: var(--surface-gray-300);
border-radius: 12px;
padding: var(--offset);
z-index: 3;
left: 0;
bottom: var(--controller-h);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
overflow: hidden;
}
@media screen and (max-width: 1024px) {
.s3d-flat__info-container {
overflow: initial;
position: static;
}
}
.s3d-flat__info-container .s3d-info__table {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: space-between;
gap: 8px;
height: 100%;
width: 100%;
}
.s3d-flat__info-container .s3d-info__table::-webkit-scrollbar {
width: 2px;
}
.s3d-flat__info-container .s3d-info__table::-webkit-scrollbar-track {
-webkit-box-shadow: none;
background: #8f9393;
}
.s3d-flat__info-container .s3d-info__table::-webkit-scrollbar-thumb {
background: #000000;
-webkit-box-shadow: none;
}
.s3d-flat__info-container .s3d-info__table::-webkit-scrollbar-thumb:window-inactive {
background: #000000;
}
.s3d-flat__info-container .s3d-info__table .s3d-info__row .s3d-info__value {
padding: 2px 8px;
border-radius: var(--border-space-2);
}
.s3d-flat__info-container .s3d-info__table .s3d-info__row .s3d-info__value[data-sale="0"] {
background: var(--color-semantic-danger);
color: var(--text-gray-200);
}
.s3d-flat__info-container .s3d-info__table .s3d-info__row .s3d-info__value[data-sale="1"] {
background: var(--color-surface-semantic-success);
color: var(--text-gray-200);
}
.s3d-flat__info-container .s3d-info__table .s3d-info__row .s3d-info__value[data-sale="2"] {
background: #6d6805;
color: var(--text-gray-200);
}
.s3d-flat__info-container .s3d-info__table .s3d-info__row .s3d-info__value[data-sale="3"] {
background: #000000;
color: var(--text-gray-200);
}
.s3d-flat__menu-container {
grid-area: menu;
min-height: var(--smarto-logo-h);
height: var(--menu-h);
position: fixed;
bottom: 0;
left: 0;
right: 0;
width: 100%;
background: #f4f8fd;
z-index: 100;
opacity: 1;
visibility: visible;
display: flex;
align-items: center;
justify-content: center;
gap: var(--offset);
border-top: 1px solid #cbd0db;
position: static;
}
@media screen and (max-width: 1024px) {
.s3d-flat__menu-container {
bottom: var(--controller-h);
gap: 4px;
}
}
.s3d-flat__buttons-wrap {
display: flex;
justify-content: space-between;
align-items: center;
}
.s3d-flat__buttons-wrap .s3d-flat__buttons-view {
justify-content: center;
align-content: center;
display: none;
}
.s3d-flat__buttons-wrap .s3d-flat__buttons-view.show {
display: flex;
}
.s3d-flat__buttons-wrap .s3d-flat__buttons-view input {
display: none;
}
.s3d-flat__buttons-wrap .s3d-flat__buttons-view input:checked + span {
color: #000000;
}
.s3d-flat__buttons-wrap .s3d-flat__buttons-view .s3d-flat__select {
display: flex;
justify-content: flex-start;
align-items: center;
width: 43px;
height: 25px;
margin: 0 15px;
background: #f4f8fd;
border-radius: var(--border-space-2);
padding: 2px;
overflow: hidden;
cursor: pointer;
}
.s3d-flat__buttons-wrap .s3d-flat__buttons-view .s3d-flat__select-circle {
height: 19px;
width: 19px;
border-radius: 50%;
background: #f4f8fd;
}
.s3d-flat__buttons-wrap .s3d-flat__buttons-view .s3d-flat__select i {
transition: transform 0.4s ease-in-out;
}
.s3d-flat__buttons-wrap .s3d-flat__buttons-view .s3d-flat__select input + i {
transform: translateX(0);
}
.s3d-flat__buttons-wrap .s3d-flat__buttons-view .s3d-flat__select input:checked + i {
transform: translateX(100%);
}
.s3d-flat__buttons-wrap .s3d-flat__buttons-view .s3d-flat__radio {
cursor: pointer;
}
.s3d-flat__buttons-wrap .s3d-flat__buttons {
position: relative;
display: flex;
justify-content: center;
align-items: center;
z-index: 1;
overflow: hidden;
background: #f4f8fd;
border-radius: var(--border-space-2);
border: 1px solid #c0d1e1;
}
.s3d-flat__buttons-wrap .s3d-flat__buttons-bg {
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 0;
height: 100%;
display: flex;
justify-content: center;
pointer-events: none;
overflow: hidden;
z-index: 0;
}
.s3d-flat__buttons-wrap .s3d-flat__buttons-bg svg {
height: 100%;
width: 200%;
fill: #e3ebf3;
}
.s3d-flat__buttons-wrap .s3d-flat__buttons .s3d-flat__button {
z-index: 3;
cursor: pointer;
height: var(--btn);
padding: 0 16px;
}
@media screen and (max-width: 680px) {
.s3d-flat__buttons-wrap .s3d-flat__buttons .s3d-flat__button {
width: var(--btn);
padding: 0;
}
}
.s3d-flat__buttons-wrap .s3d-flat__buttons .s3d-flat__button span {
font-family: "Inter Display", sans-serif;
font-weight: 400;
line-height: 130%;
font-size: var(--font14);
display: flex;
justify-content: center;
align-items: center;
align-content: center;
height: 100%;
width: 100%;
color: #000000;
text-transform: uppercase;
white-space: nowrap;
transition: background-color 0.6s ease-in-out, color 0.6s ease-in-out;
}
.s3d-flat__buttons-wrap .s3d-flat__buttons .s3d-flat__button-input {
display: none;
}
.s3d-flat__buttons-wrap .s3d-flat__buttons .s3d-flat__button-input:checked ~ span {
color: #000000;
cursor: no-drop;
}
.s3d-flat__3d-tour,
.s3d-flat__view-from-window,
.s3d-show-in-3d,
.s3d-flat__gallery-btn {
border-radius: var(--border-space-2);
background: #f4f8fd;
border: 1px solid #c0d1e1;
color: #000000;
height: var(--btn);
padding: 0 16px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
text-decoration: none;
transition: all 0.3s ease-in-out;
z-index: 2;
text-align: center;
}
@media screen and (min-width: 1023px) {
.s3d-flat__3d-tour:hover,
.s3d-flat__view-from-window:hover,
.s3d-show-in-3d:hover,
.s3d-flat__gallery-btn:hover {
color: #000000;
border: 1px solid #c0d1e1;
background-color: #e3ebf3;
transition: all 0.3s ease-in-out;
}
.s3d-flat__3d-tour:hover span,
.s3d-flat__view-from-window:hover span,
.s3d-show-in-3d:hover span,
.s3d-flat__gallery-btn:hover span {
color: #000000;
transition: all 0.3s ease-in-out;
}
.s3d-flat__3d-tour:hover svg,
.s3d-flat__view-from-window:hover svg,
.s3d-show-in-3d:hover svg,
.s3d-flat__gallery-btn:hover svg {
fill: #000000;
transition: all 0.3s ease-in-out;
}
}
@media screen and (max-width: 680px) {
.s3d-flat__3d-tour,
.s3d-flat__view-from-window,
.s3d-show-in-3d,
.s3d-flat__gallery-btn {
padding: 0 5px;
}
}
.s3d-flat__3d-tour span,
.s3d-flat__view-from-window span,
.s3d-show-in-3d span,
.s3d-flat__gallery-btn span {
font-family: "Inter Display", sans-serif;
font-weight: 400;
line-height: 130%;
font-size: var(--font14);
color: #000000;
transition: all 0.3s ease-in-out;
}
.s3d-flat__3d-tour svg,
.s3d-flat__view-from-window svg,
.s3d-show-in-3d svg,
.s3d-flat__gallery-btn svg {
fill: #000000;
transition: all 0.3s ease-in-out;
}
.s3d-flat__3d-tour svg {
display: none;
}
.s3d-flat__small-button-with-icon {
display: flex;
align-items: center;
justify-content: center;
transition: background 0.3s ease-in, color 0.3s ease-in-out;
text-decoration: none;
z-index: 2;
font-size: var(--font14);
padding: var(--space-1) var(--space-3);
text-transform: uppercase;
border: 1px solid var(--border-gray-600-transparent-40);
border-radius: var(--border-space-2);
color: var(--text-gray-900);
font-size: 13px;
font-family: "Inter Display", sans-serif;
font-weight: 400;
font-style: normal;
line-height: 140%;
text-decoration: none;
text-transform: none;
background-color: transparent;
cursor: pointer;
}
.s3d-flat__small-button-with-icon span {
max-width: calc(100% - (var(--space-3) * 2 + var(--space-1)));
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.s3d-flat__small-button-with-icon input {
display: none;
}
.s3d-flat__small-button-with-icon svg {
width: 24px;
height: 24px;
margin-right: var(--space-1);
fill: var(--icon-gray-900);
flex-shrink: 0;
}
@media screen and (min-width: 1023px) {
.s3d-flat__small-button-with-icon:hover {
background-color: var(--color-surface-gray-400);
}
}
.s3d-flat__small-button-with-icon [data-in-fav] {
display: none;
}
.s3d-flat__small-button-with-icon.added-to-favourites {
background-color: var(--color-surface-brand-800);
border-color: var(--border-brand-800);
color: var(--text-gray-200);
}
.s3d-flat__small-button-with-icon.added-to-favourites [data-not-in-fav] {
display: none;
}
.s3d-flat__small-button-with-icon.added-to-favourites [data-in-fav] {
display: block;
}
.s3d-flat__small-button-with-icon.added-to-favourites svg {
fill: var(--icon-gray-200);
}
@media screen and (min-width: 1023px) {
.s3d-flat__small-button-with-icon.added-to-favourites:hover {
background-color: var(--color-surface-brand-900);
}
}
.s3d-flat__polygon {
stroke: black;
stroke-width: 3;
}
.s3d-flat__polygon[data-sold=false] {
transition: all 0.5s ease;
cursor: pointer;
fill: rgba(255, 255, 255, 0);
fill: var(--color-surface-success-available-transparent-20);
}
.s3d-flat__polygon[data-sold=true] {
fill: rgba(0, 0, 0, 0);
fill: var(--color-surface-gray-900-transperent-40);
pointer-events: none;
}
.s3d-flat__polygon.not-active {
fill: rgba(0, 0, 0, 0);
fill: var(--color-surface-gray-900-transperent-40);
}
@media screen and (min-width: 1023px) {
.s3d-flat__polygon:hover:not([data-sold=true]) {
fill: var(--color-surface-success-available-hover-transparent-60);
}
}
.mfp-zoom-out-cur,
.mfp-zoom-out-cur .mfp-image-holder .mfp-close {
cursor: pointer !important;
}
.mfp-container {
height: 90vh;
width: 95vw;
left: 50%;
top: 50%;
background: var(--surface-gray-900-transperent-40);
}
@media (max-width: 900px) {
.mfp-container {
padding-left: 0 !important;
padding-right: 0 !important;
}
}
.mfp-image-holder .mfp-figure {
background-color: var(--color-surface-gray-200);
}
.mfp-image-holder .mfp-close {
position: absolute;
right: var(--space-5) !important;
top: var(--space-5);
width: 24px !important;
height: 24px;
padding-right: 0 !important;
text-align: center !important;
font-size: 24px !important;
line-height: 24px;
color: transparent !important;
padding: 0;
transition: all 0.3s ease-in-out;
opacity: 1 !important;
transform-origin: center;
}
@media (hover: hover) {
.mfp-image-holder .mfp-close:hover {
transform: rotate(180deg);
}
}
.mfp-image-holder .mfp-close::after {
content: "";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-image: url("data:image/svg+xml,%3Csvg class='ICON_TEST' width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M7.99995 7.29285L8.35351 7.6464L12.5 11.7928L16.6464 7.6464L17 7.29285L17.7071 7.99995L17.3535 8.35351L13.2071 12.5L17.3535 16.6464L17.7071 17L17 17.7071L16.6464 17.3535L12.5 13.2071L8.35351 17.3535L7.99995 17.7071L7.29285 17L7.6464 16.6464L11.7928 12.5L7.6464 8.35351L7.29285 7.99995L7.99995 7.29285Z' fill='%231A1E21'/%3E%3C/svg%3E%0A");
background-repeat: no-repeat;
background-size: contain;
}
.mfp-image-holder .mfp-close:active {
top: var(--space-5) !important;
}
.mfp-image-holder .mfp-content {
width: calc(100% - var(--space-20));
height: calc(100% - var(--space-20));
}
@media screen and (max-width: 600px) {
.mfp-image-holder .mfp-content {
width: calc(100% - var(--space-6));
height: calc(100% - var(--space-6));
}
}
.mfp-figure {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
width: 100%;
}
.mfp-figure:after {
content: none;
}
.mfp-figure figure {
height: 100%;
width: 100%;
}
.mfp-figure img.mfp-img {
height: 100%;
width: 100%;
padding: 40px;
object-fit: contain;
} .dropup {
position: relative;
display: inline-block;
z-index: 2;
}
.dropup .dropbtn {
width: 100%;
}
.dropup-content {
display: none;
position: absolute;
bottom: 0;
left: 100%;
min-width: 100px;
width: auto;
z-index: 1;
}
.dropup-content a:hover {
background-color: #ddd;
}
.dropup-content button {
position: relative;
width: 100%;
}
@media screen and (min-width: 1023px) {
.dropup:hover .dropbtn {
color: #000000;
border: 1px solid #c0d1e1;
background-color: #e3ebf3;
}
.dropup:hover .dropbtn span {
color: #000000;
}
.dropup:hover .dropbtn svg {
fill: #000000;
}
}
.dropup:hover .dropup-content {
display: block;
column-count: 1;
column-gap: 12px;
border-radius: var(--border-space-2);
background-color: var(--color-surface-gray-300);
padding: var(--space-4);
border: 1px solid var(--border-gray-600-transparent-40);
right: 0;
left: auto;
}
@media screen and (max-width: 1024px) {
.dropup:hover .dropup-content {
right: 0;
}
}
.dropup:hover .dropup-content .dropup-content-group {
break-inside: avoid-column;
width: 100%;
}
.dropup:hover .dropup-content .dropup-content-group .dropup-content-group-title {
margin-bottom: 8px;
font-weight: 500;
color: var(--text-gray-900);
}
.c3-text {
font-size: 13px;
font-family: "Inter Display", sans-serif;
font-weight: 400;
font-style: normal;
line-height: 140%;
text-decoration: none;
text-transform: none;
fill: var(--text-gray-900) !important;
}
.c3-bars path {
fill: var(--color-surface-brand-800) !important;
stroke: var(--color-surface-brand-800) !important;
}
.c3-axis .tick text {
fill: var(--text-gray-700) !important;
font-size: 12px;
font-family: "Inter Display", sans-serif;
font-weight: 500;
font-style: normal;
line-height: 100%;
text-decoration: none;
text-transform: none;
}
.c3-axis .tick text tspan:last-child {
font-size: 13px;
font-family: "Inter Display", sans-serif;
font-weight: 400;
font-style: normal;
line-height: 140%;
text-decoration: none;
text-transform: none;
fill: var(--text-gray-900) !important;
transform: translateY(2px);
}
.c3 line,
.c3 path {
stroke: var(--border-gray-400);
}
.c3-chart-bars {
pointer-events: none;
}
@-webkit-keyframes flatCallBackHeartbeat {
from {
-webkit-transform: scale(1);
transform: scale(1);
-webkit-transform-origin: center center;
transform-origin: center center;
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
2% {
-webkit-transform: scale(0.96);
transform: scale(0.96);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
4% {
-webkit-transform: scale(0.99);
transform: scale(0.99);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
6% {
-webkit-transform: scale(0.93);
transform: scale(0.93);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
9% {
-webkit-transform: scale(1);
transform: scale(1);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
}
@keyframes flatCallBackHeartbeat {
from {
-webkit-transform: scale(1);
transform: scale(1);
-webkit-transform-origin: center center;
transform-origin: center center;
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
2% {
-webkit-transform: scale(0.96);
transform: scale(0.96);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
4% {
-webkit-transform: scale(0.99);
transform: scale(0.99);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
6% {
-webkit-transform: scale(0.93);
transform: scale(0.93);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
9% {
-webkit-transform: scale(1);
transform: scale(1);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
}
div:where(.swal2-container) div:where(.swal2-popup) {
border-radius: 0;
}
.s3d-pdf-popup {
font-family: "Inter Display", sans-serif;
}
.s3d-pdf-popup .pdf-icon {
position: absolute;
top: 0;
left: 50%;
transform: translate(-50%, -50%);
padding: 30px;
border-radius: 50%;
background-color: white;
}
.s3d-pdf-popup .swal2-popup {
padding: 48px 0;
border-radius: 0;
}
.s3d-pdf-popup .swal2-close {
position: absolute;
transition: all 0.5s ease-out;
}
.s3d-pdf-popup .swal2-close:hover {
transform: scale(1.2);
}
.s3d-pdf-popup .swal2-title {
position: relative;
font-size: 32px;
font-family: "Inter Display", sans-serif;
font-weight: 300;
font-style: normal;
line-height: 130%;
text-decoration: none;
text-transform: none;
font-size: 32px;
text-transform: uppercase;
padding: 0;
margin-bottom: 20px;
color: var(--text-gray-900);
}
.s3d-pdf-popup .swal2-title::after {
content: "";
position: absolute;
bottom: -12px;
left: 50%;
transform: translate(-50%, 0);
width: 50px;
height: 1px;
background-color: #d1d9e1;
}
.s3d-pdf-popup .swal2-actions {
margin: 0;
}
.s3d-pdf-popup .swal2-actions button {
padding: 0;
border-radius: 128px;
}
.s3d-pdf-popup .swal2-actions button a {
display: flex;
justify-content: center;
align-items: center;
text-transform: uppercase;
padding: 20px 32px;
}
.s3d-pdf-popup .swal2-actions button a span {
margin-left: 12px;
}
.s3d-pdf-popup .swal2-confirm {
background-color: var(--color-surface-brand-800);
border-color: var(--border-brand-900);
color: var(--color-surface-gray-200);
font-size: 13px;
font-family: "Inter Display", sans-serif;
font-weight: 400;
font-style: normal;
line-height: 140%;
text-decoration: none;
text-transform: none;
}
.s3d-pdf-popup .swal2-confirm a {
text-decoration: none;
color: inherit;
}
.tablet .s3d-flat {
display: flex;
flex-direction: column;
height: calc(var(--vh, 1vh) * 100);
overflow-y: auto;
padding-top: calc(var(--s3d-header) + var(--space-4));
padding-bottom: var(--mobile-controller-height);
}
.tablet .s3d-flat__info-wrapper {
column-count: 2;
}
.tablet .s3d-flat__info-wrapper > * {
break-inside: avoid-column;
}
.tablet .s3d-flat__floor-plan-container {
grid-template-columns: max-content 1fr;
gap: var(--space-2);
grid-template-areas: "floor floor" "title nav";
}
.tablet .s3d-flat__floor-plan-container .ButtonWithoutIcon {
margin-left: auto;
margin-right: auto;
display: block;
margin-top: var(--space-2);
}
.tablet .s3d-flat__floor-plan-container-nav {
display: flex;
margin: auto;
}
.tablet .s3d-flat__floor-plan-container-nav > :nth-child(n+2) {
margin-top: 0;
margin-left: var(--space-1);
}
.tablet .s3d-flat__gallery-container {
overflow: hidden;
}
.tablet .s3d-flat__gallery-container-slide {
padding-bottom: 52.5%;
}
.tablet .s3d-flat__explication-screen {
grid-template-columns: 1fr;
max-height: none;
display: flex;
align-items: center;
align-content: center;
flex-direction: column-reverse;
height: auto;
}
.tablet .s3d-flat__explication-screen-slider {
width: 100%;
margin-bottom: var(--space-2);
}
.tablet .s3d-flat__explication-screen-table {
width: 320px;
max-width: 320px;
background-color: transparent;
}
.tablet .s3d-flat__explication-screen-table .s3d-ctr__menu-3d-btn-style {
background-color: transparent;
}
.tablet .s3d-flat__content-wrapper {
overflow: initial;
}
.tablet .s3d-flat__documentation-screen {
grid-template-columns: 1fr;
}
.tablet .s3d-flat__documentation-screen-title {
padding: 0;
margin-bottom: var(--space-2);
}
.tablet .s3d-flat__documentation-screen .FlatDocCard {
grid-column-start: 1;
grid-column-end: 2;
}
.tablet .s3d-flat__construction-progress-screen-title {
padding: 0;
margin-bottom: var(--space-3);
}
.tablet .s3d-flat__construction-progress-screen-right {
width: calc(100% - var(--offset) * 2);
margin-top: var(--space-2);
text-align: left;
padding: var(--space-4);
}
.tablet .s3d-flat__construction-progress-screen-slide {
padding-bottom: 52.5%;
}
.tablet .s3d-flat__construction-progress-screen-left {
width: calc(100% - var(--offset) * 2);
}
.tablet .s3d-flat__floor-info {
width: 100%;
height: 100%;
}
.tablet .s3d-flat__floor-info-wrapper {
height: 50vh;
}
.tablet.landscape .s3d-flat__info-wrapper {
max-width: 50%;
}
.mobile .s3d-flat {
display: flex;
flex-direction: column;
overflow: initial;
padding-top: calc(var(--s3d-header) + var(--space-4));
padding-bottom: var(--mobile-controller-height);
margin-bottom: calc(var(--mobile-controller-height) * -1);
padding-left: var(--space-2);
padding-right: var(--space-2);
background-color: var(--color-surface-gray-200);
}
.mobile .s3d-flat__content-screen {
background-color: var(--color-surface-gray-100);
padding-bottom: var(--space-2);
}
.mobile .s3d-flat .s3d-flat__content-screen ~ .s3d-flat__content-screen {
margin-top: var(--space-4);
}
.mobile .s3d-flat__content-wrapper {
overflow: initial;
}
.mobile .s3d-flat__floor-plan-container {
grid-template-columns: max-content 1fr;
gap: var(--space-2);
grid-template-areas: "title" "floor" "nav";
}
.mobile .s3d-flat__floor-plan-container .ButtonWithoutIcon {
margin-left: auto;
margin-right: auto;
display: block;
margin-top: var(--space-2);
}
.mobile .s3d-flat__floor-plan-container-nav {
display: flex;
margin: auto;
}
.mobile .s3d-flat__floor-plan-container-nav > :nth-child(n+2) {
margin-top: 0;
margin-left: var(--space-1);
}
.mobile .s3d-flat__gallery-container {
overflow: hidden;
}
.mobile .s3d-flat__gallery-container-slide {
position: relative;
padding-bottom: 100%;
}
.mobile .s3d-flat__explication-screen {
grid-template-columns: 1fr;
max-height: none;
display: flex;
align-items: center;
align-content: center;
flex-direction: column-reverse;
height: auto;
}
.mobile .s3d-flat__explication-screen-slider {
width: 100%;
margin-bottom: var(--space-2);
}
.mobile .s3d-flat__explication-screen-slide {
padding-bottom: 100%;
}
.mobile .s3d-flat__explication-screen-table {
width: 100%;
background-color: transparent;
padding: 0;
}
.mobile .s3d-flat__explication-screen-table .s3d-ctr__menu-3d-btn-style {
background-color: transparent;
}
.mobile .s3d-flat__other-flats-table {
border-collapse: separate;
border-spacing: var(--space-2) 0;
}
.mobile .s3d-flat__other-flats-table th {
vertical-align: middle;
}
.mobile .s3d-flat__other-flats-table td {
padding-top: var(--space-3);
padding-bottom: var(--space-3);
vertical-align: middle;
}
.mobile .s3d-flat__other-flats-table .s3d-card__status {
display: flex;
flex-direction: column-reverse;
padding: var(--space-1);
border-radius: var(--border-space-2);
}
.mobile .s3d-flat__other-flats-table .ButtonWithoutIcon {
padding: var(--space-1);
}
.mobile .s3d-flat__documentation-screen {
grid-template-columns: 1fr;
}
.mobile .s3d-flat__documentation-screen-title {
padding: 0;
margin-bottom: var(--space-2);
}
.mobile .s3d-flat__documentation-screen .FlatDocCard {
grid-column-start: 1;
grid-column-end: 2;
}
.mobile .s3d-flat__financial-terms-screen {
grid-template-columns: 1fr;
}
.mobile .s3d-flat__financial-terms-screen-title {
padding: 0;
margin-bottom: var(--space-2);
margin-top: var(--space-4);
}
.mobile .s3d-flat__financial-terms-screen .FlatFinancialTermsCard {
grid-column-start: 1;
grid-column-end: 2;
}
.mobile .s3d-flat__construction-progress-screen {
margin-top: var(--space-4);
}
.mobile .s3d-flat__construction-progress-screen-title {
padding: 0;
margin-bottom: var(--space-3);
}
.mobile .s3d-flat__construction-progress-screen-left {
width: calc(100% - var(--offset) * 2);
padding: var(--space-4);
}
.mobile .s3d-flat__construction-progress-screen-right {
width: calc(100% - var(--offset) * 2);
margin-top: var(--space-2);
text-align: left;
padding: var(--space-4);
}
.mobile .s3d-flat__construction-progress-screen-slide {
padding-bottom: 100%;
}
.s3d-floor {
--s3d-floor__menu-container-w: 264px;
display: grid;
grid-template-columns: var(--s3d-floor__menu-container-w) auto 40px var(--space-4);
grid-template-rows: var(--s3d-header) auto var(--menu-h);
grid-template-areas: ". . . ." "menu svg zoom ." "menu svg zoom .";
width: 100%;
height: 100%;
background-color: var(--color-surface-gray-200);
padding: var(--space-4);
}
.s3d-floor__title {
margin-bottom: var(--space-5);
}
.s3d-floor__title.text-style-3-d-fonts-1920-h-1 {
text-transform: uppercase;
}
.s3d-floor__info-container {
margin-bottom: var(--space-5);
}
.s3d-floor__info-container__title {
margin-bottom: 8px;
}
.s3d-floor__info-container2 {
margin-bottom: var(--space-5);
}
.s3d-floor__info-container2 > * {
white-space: nowrap;
}
.s3d-floor__info-container2__title {
margin-bottom: 8px;
}
.s3d-floor .s3d-floor__menu-container {
position: relative;
flex-direction: column;
width: auto;
min-height: auto;
height: auto;
background-color: var(--color-surface-gray-100);
border-radius: var(--border-space-2);
padding: var(--space-5);
display: flex;
flex-direction: column;
grid-area: menu;
height: max-content;
}
@media screen and (min-width: 1025px) {
.s3d-floor .s3d-floor__menu-container {
max-height: calc(100vh - var(--s3d-header) - var(--space-5));
overflow-y: auto;
overflow-x: hidden;
}
}
.s3d-floor .s3d-floor__menu-container .s3d-floor__info-container {
position: static;
}
.s3d-floor .s3d-floor__menu-container .s3d-floor__tabs-wrapper .CheckboxWithLabel {
margin-top: var(--space-1);
}
.s3d-floor .s3d-floor__menu-container .s3d-floor__tabs {
flex-direction: column;
}
.s3d-floor .s3d-floor__menu-container .s3d-floor__nav {
width: 100%;
}
.s3d-floor .s3d-floor__menu-container .s3d-floor__nav [data-swiper-floor-list-wrapper] {
width: auto;
}
@media screen and (min-width: 768px) {
.s3d-floor .s3d-floor__menu-container .s3d-floor__nav [data-swiper-floor-list-wrapper] {
width: 100%;
padding-left: var(--space-4);
padding-right: var(--space-4);
}
}
@media screen and (max-width: 1024px) {
.s3d-floor {
height: auto;
grid-template-columns: 1fr;
grid-template-rows: var(--s3d-header) auto min-content var(--menu-h);
grid-template-areas: "." "svg" "info" "menu";
}
}
.s3d-floor__svg-container {
overflow: hidden;
}
.s3d-floor__svg-wrapper {
display: flex;
justify-content: center;
align-items: center;
text-align: center;
overflow: hidden;
}
@media screen and (min-width: 1025px) {
.s3d-floor__svg-wrapper {
width: 100%;
height: 100%;
}
}
.s3d-floor__svg-container {
grid-area: svg;
max-height: 100%;
width: 100%;
padding: 40px;
align-self: center;
height: calc(var(--vh, 1vh) * 100 - var(--s3d-header) - var(--space-4) * 2);
}
.s3d-floor__svg-container--inner {
overflow: hidden;
width: 100%;
height: 100%;
}
.s3d-floor__svg-container svg {
max-height: calc(var(--vh, 1vh) * 100 - var(--s3d-header));
}
@media screen and (min-width: 1025px) {
.s3d-floor__svg-container svg {
width: 100%;
height: 100%;
}
}
.s3d-floor__svg-container use {
pointer-events: none;
}
.s3d-floor .s3d-floor__nav p {
display: none;
}
.s3d-floor__nav {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
position: relative;
}
.s3d-floor__nav .swiper-wrapper {
font-size: 13px;
}
.s3d-floor__nav-btn {
display: flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
border-radius: 50%;
background: var(--color-gray-200);
cursor: pointer;
transition: 0.25s ease-out;
}
.s3d-floor__nav-btn.disable {
opacity: 0.1;
background: rgb(0, 0, 0);
pointer-events: none;
}
.s3d-floor__nav-btn.disable svg path {
fill: white;
}
.s3d-floor__nav-btn:hover {
border-color: var(--border-gray-600-transparent-88);
background-color: var(--color-surface-gray-400-transperent-88);
}
@media (hover: hover) {
.s3d-floor__nav-btn, .s3d-floor__nav-btn {
position: relative;
overflow: hidden;
background-color: transparent;
background-color: var(--color-surface-gray-400-transperent-88);
}
.s3d-floor__nav-btn svg, .s3d-floor__nav-btn svg {
position: relative;
z-index: 2;
}
.s3d-floor__nav-btn:after, .s3d-floor__nav-btn:after {
content: "";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
transition: 0.25s ease-in-out;
background-color: var(--color-surface-gray-200);
border-radius: 50%;
}
.s3d-floor__nav-btn:hover:after, .s3d-floor__nav-btn:hover:after {
transform: translate3d(0, -100%, 0);
}
.s3d-floor__nav-btn.disable:after {
opacity: 0.1;
background: rgb(0, 0, 0);
}
}
.s3d-floor__nav [data-flat-floor-list] {
width: 125px;
overflow: hidden;
}
@media screen and (min-width: 1025px) {
.s3d-floor__nav [data-flat-floor-list] {
width: 125px;
}
}
.s3d-floor__nav [data-swiper-floor-list-wrapper] {
width: 290px;
overflow: hidden;
}
@media screen and (max-width: 1024px) {
.s3d-floor__nav [data-swiper-floor-list-wrapper] {
width: 100px;
}
}
@media screen and (max-width: 680px) {
.s3d-floor__nav [data-swiper-floor-list-wrapper] {
width: 60px;
}
}
.s3d-floor__nav [data-swiper-floor-list-wrapper] .swiper-floor-list button.swiper-floor-list__slide {
font-size: 13px;
font-family: "Inter Display", sans-serif;
font-weight: 400;
font-style: normal;
line-height: 140%;
text-decoration: none;
text-transform: none;
background: none;
border: none;
color: var(--text-gray-900);
padding: 0;
transition: 0.25s ease-out;
width: 24px;
height: 24px;
border-radius: var(--border-space-1);
cursor: pointer;
border: 1px solid transparent;
}
@media screen and (min-width: 1023px) {
.s3d-floor__nav [data-swiper-floor-list-wrapper] .swiper-floor-list button.swiper-floor-list__slide:hover {
background-color: var(--color-surface-gray-300);
border-color: var(--border-gray-400);
}
}
.s3d-floor__nav [data-swiper-floor-list-wrapper] .swiper-floor-list button.swiper-floor-list__slide.active {
background-color: var(--surface-gray-900);
color: var(--text-gray-200);
}
.s3d-floor__nav [data-current-floor] {
color: #000000;
font-family: "Inter Display", sans-serif;
font-weight: 400;
line-height: 130%;
font-size: var(--font32);
width: 40px;
text-align: center;
}
.s3d-floor__nav button .floor-list {
position: absolute;
left: 0;
bottom: 100%;
background: var(--color-surface-gray-100);
width: 320px;
z-index: 100;
border-radius: var(--border-space-2);
display: flex;
flex-wrap: wrap;
align-items: flex-start;
align-content: flex-start;
padding: 20px;
gap: 4px;
opacity: 0;
pointer-events: none;
transition: 0.25s ease-out;
}
.s3d-floor__nav button .floor-list__title {
width: 100%;
text-align: left;
font-size: 20px;
font-family: "Inter Display", sans-serif;
font-weight: 400;
font-style: normal;
line-height: 130%;
text-decoration: none;
text-transform: none;
margin-bottom: 8px;
text-transform: capitalize;
color: var(--text-gray-900);
}
.s3d-floor__nav button .floor-list button {
font-family: "Inter Display", sans-serif;
font-weight: 400;
line-height: 130%;
width: 24px;
height: 24px;
border-radius: var(--space-1);
transition: 0.25s ease-out;
display: flex;
align-items: center;
justify-content: center;
font-size: var(--font14);
line-height: 130%;
background: transparent;
border-color: transparent;
border: 1px solid transparent;
color: var(--text-gray-900);
cursor: pointer;
}
.s3d-floor__nav button .floor-list button.active {
background-color: var(--surface-gray-900);
color: var(--text-gray-200);
}
@media (hover: hover) {
.s3d-floor__nav button .floor-list button:not(.active):hover {
background-color: var(--color-surface-gray-300);
border-color: var(--border-gray-400);
}
}
@media screen and (min-width: 1023px) {
.s3d-floor__nav button:hover .floor-list {
opacity: 1;
pointer-events: all;
}
}
@media screen and (max-width: 680px) {
.s3d-floor__tabs-wrapper:hover .s3d-floor__tabs {
opacity: 1;
visibility: visible;
transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out;
gap: 2px;
}
}
.s3d-floor__tabs-wrapper .s3d-floor__tabs {
display: flex;
align-items: center;
justify-content: center;
}
@media screen and (max-width: 680px) {
.s3d-floor__tabs-wrapper .s3d-floor__tabs {
flex-direction: column-reverse;
opacity: 0;
visibility: hidden;
position: absolute;
bottom: 100%;
transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out;
margin-bottom: 2px;
}
}
.s3d-floor__tabs-wrapper .s3d-floor__tabs .s3d-floor__tab {
border-top: 1px solid #c0d1e1;
border-bottom: 1px solid #c0d1e1;
border-right: 1px solid #c0d1e1;
border-left: none;
border-radius: 0;
height: var(--btn);
position: relative;
display: flex;
align-items: center;
justify-content: center;
padding: 0 16px;
cursor: pointer;
background: transparent;
}
@media screen and (max-width: 680px) {
.s3d-floor__tabs-wrapper .s3d-floor__tabs .s3d-floor__tab {
background: #f4f8fd;
width: 120px;
border-radius: var(--border-space-2);
}
}
.s3d-floor__tabs-wrapper .s3d-floor__tabs .s3d-floor__tab svg {
display: none;
height: 12px;
position: absolute;
top: -6px;
left: 50%;
transform: translateX(-50%);
}
@media screen and (max-width: 680px) {
.s3d-floor__tabs-wrapper .s3d-floor__tabs .s3d-floor__tab svg {
display: none;
}
}
.s3d-floor__tabs-wrapper .s3d-floor__tabs .s3d-floor__tab:first-child {
border-radius: var(--border-space-2) 0 0 8px;
border-left: 1px solid #c0d1e1;
}
@media screen and (max-width: 680px) {
.s3d-floor__tabs-wrapper .s3d-floor__tabs .s3d-floor__tab:first-child {
border-radius: var(--border-space-2);
}
}
.s3d-floor__tabs-wrapper .s3d-floor__tabs .s3d-floor__tab:last-child {
border-radius: 0 8px 8px 0;
}
@media screen and (max-width: 680px) {
.s3d-floor__tabs-wrapper .s3d-floor__tabs .s3d-floor__tab:last-child {
border-radius: var(--border-space-2);
}
}
.s3d-floor__tabs-wrapper .s3d-floor__tabs .s3d-floor__tab[data-rooms="1"] {
color: #000000;
}
@media screen and (max-width: 680px) {
.s3d-floor__tabs-wrapper .s3d-floor__tabs .s3d-floor__tab[data-rooms="1"] {
border-left: 1px solid #000000;
border-right: 1px solid #000000;
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;
}
}
.s3d-floor__tabs-wrapper .s3d-floor__tabs .s3d-floor__tab[data-rooms="1"] svg {
fill: #000000;
stroke: #000000;
}
.s3d-floor__tabs-wrapper .s3d-floor__tabs .s3d-floor__tab[data-rooms="1"].active {
color: #f4f8fd;
background: #000000;
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;
border-right: 1px solid #000000;
border-left: 1px solid #000000;
}
@media screen and (max-width: 680px) {
.s3d-floor__tabs-wrapper .s3d-floor__tabs .s3d-floor__tab[data-rooms="1"].active {
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;
border-right: 1px solid #000000;
border-left: 1px solid #000000;
}
}
.s3d-floor__tabs-wrapper .s3d-floor__tabs .s3d-floor__tab[data-rooms="2"] {
color: #000000;
}
@media screen and (max-width: 680px) {
.s3d-floor__tabs-wrapper .s3d-floor__tabs .s3d-floor__tab[data-rooms="2"] {
border-left: 1px solid #000000;
border-right: 1px solid #000000;
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;
}
}
.s3d-floor__tabs-wrapper .s3d-floor__tabs .s3d-floor__tab[data-rooms="2"] svg {
fill: #000000;
stroke: #000000;
}
.s3d-floor__tabs-wrapper .s3d-floor__tabs .s3d-floor__tab[data-rooms="2"].active {
color: #f4f8fd;
background: #000000;
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;
border-right: 1px solid #000000;
border-left: none;
}
@media screen and (max-width: 680px) {
.s3d-floor__tabs-wrapper .s3d-floor__tabs .s3d-floor__tab[data-rooms="2"].active {
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;
border-right: 1px solid #000000;
border-left: 1px solid #000000;
}
}
.s3d-floor__tabs-wrapper .s3d-floor__tabs .s3d-floor__tab[data-rooms="3"] {
color: #000000;
}
@media screen and (max-width: 680px) {
.s3d-floor__tabs-wrapper .s3d-floor__tabs .s3d-floor__tab[data-rooms="3"] {
border-left: 1px solid #000000;
border-right: 1px solid #000000;
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;
}
}
.s3d-floor__tabs-wrapper .s3d-floor__tabs .s3d-floor__tab[data-rooms="3"] svg {
fill: #000000;
stroke: #000000;
}
.s3d-floor__tabs-wrapper .s3d-floor__tabs .s3d-floor__tab[data-rooms="3"].active {
color: #f4f8fd;
background: #000000;
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;
border-right: 1px solid #000000;
border-left: none;
}
@media screen and (max-width: 680px) {
.s3d-floor__tabs-wrapper .s3d-floor__tabs .s3d-floor__tab[data-rooms="3"].active {
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;
border-right: 1px solid #000000;
border-left: 1px solid #000000;
}
}
.s3d-floor__tabs-wrapper .s3d-floor__tabs .s3d-floor__tab[data-rooms="4"] {
color: #000000;
}
@media screen and (max-width: 680px) {
.s3d-floor__tabs-wrapper .s3d-floor__tabs .s3d-floor__tab[data-rooms="4"] {
border-left: 1px solid #000000;
border-right: 1px solid #000000;
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;
}
}
.s3d-floor__tabs-wrapper .s3d-floor__tabs .s3d-floor__tab[data-rooms="4"] svg {
fill: #000000;
stroke: #000000;
}
.s3d-floor__tabs-wrapper .s3d-floor__tabs .s3d-floor__tab[data-rooms="4"].active {
color: #f4f8fd;
background: #000000;
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;
border-right: 1px solid #000000;
border-left: none;
}
@media screen and (max-width: 680px) {
.s3d-floor__tabs-wrapper .s3d-floor__tabs .s3d-floor__tab[data-rooms="4"].active {
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;
border-right: 1px solid #000000;
border-left: 1px solid #000000;
}
}
.s3d-floor__tabs-wrapper .s3d-floor__tabs .s3d-floor__tab[data-rooms=all] {
color: #000000;
}
@media screen and (max-width: 680px) {
.s3d-floor__tabs-wrapper .s3d-floor__tabs .s3d-floor__tab[data-rooms=all] {
border-left: 1px solid #000000;
border-right: 1px solid #000000;
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;
}
}
.s3d-floor__tabs-wrapper .s3d-floor__tabs .s3d-floor__tab[data-rooms=all].active {
color: #f4f8fd;
background: #000000;
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;
border-right: 1px solid #000000;
border-left: none;
}
@media screen and (max-width: 680px) {
.s3d-floor__tabs-wrapper .s3d-floor__tabs .s3d-floor__tab[data-rooms=all].active {
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;
border-right: 1px solid #000000;
border-left: 1px solid #000000;
}
}
.s3d-floor .s3d-ctr__menu-3d-btn-style {
justify-content: space-between;
margin: var(--space-5) 0;
}
.s3d-floor__overlay {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: var(--surface-gray-900-transperent-40);
z-index: 10;
pointer-events: none;
opacity: 0;
transition: 0.25s ease-out;
}
.s3d-floor.with-overlay .s3d-floor__overlay {
pointer-events: all;
opacity: 1;
}
.s3d-floor__zoom-wrapper {
display: none;
align-items: center;
justify-content: center;
flex-direction: column;
grid-area: zoom;
margin-top: var(--space-4);
}
.s3d-floor__zoom-wrapper > :nth-child(n+2) {
margin-top: var(--space-1);
}
.desktop .s3d-floor__svg-container {
width: calc(100% - var(--space-4));
margin-left: auto;
}
.desktop .s3d-floor__zoom-wrapper {
padding-right: var(--space-4);
position: relative;
margin-top: 0;
}
.desktop .s3d-floor__zoom-wrapper:after {
position: absolute;
content: "";
width: var(--space-2);
left: 100%;
top: 0;
height: 100%;
}
.mobile .s3d-floor {
overflow-y: auto;
height: calc(var(--vh, 1vh) * 100);
overflow-y: auto;
display: flex;
flex-direction: column;
align-content: center;
padding-bottom: calc(var(--mobile-controller-height) + var(--space-2));
padding-top: calc(var(--s3d-header) + var(--space-2));
padding-left: var(--space-2);
padding-right: var(--space-2);
}
.mobile .s3d-floor > .s3d-floor__nav-wrapper {
text-align: center;
margin-top: var(--space-4);
}
.mobile .s3d-floor > .s3d-floor__nav-wrapper [data-swiper-floor-list-wrapper] {
width: 175px;
}
.mobile .s3d-floor > * {
flex-shrink: 0;
}
.mobile .s3d-floor__svg-container {
height: 50vh;
max-height: none;
}
.mobile .s3d-floor__svg-container .s3d-floor__svg-wrapper,
.mobile .s3d-floor__svg-container .s3d-floor__svg {
width: 100%;
height: 100%;
max-height: none;
}
.mobile .s3d-floor .s3d-floor__menu-container {
order: 1;
}
.mobile .s3d-floor .s3d-floor__svg-container {
order: 2;
padding: 0;
}
.mobile .s3d-floor > .s3d-floor__nav-wrapper {
order: 4;
}
.mobile .s3d-floor .s3d-floor__zoom-wrapper {
order: 3;
flex-direction: row;
}
.mobile .s3d-floor .s3d-floor__zoom-wrapper > :nth-child(n+2) {
margin-top: 0;
margin-left: var(--space-1);
}
.mobile .s3d-floor__info-container2 {
margin-bottom: 0;
}
.tablet.landscape .s3d-floor {
grid-template-rows: var(--s3d-header) 57.5% min-content var(--menu-h);
}
.tablet.landscape .s3d-floor svg.s3d-floor__svg,
.tablet.landscape .s3d-floor div.s3d-floor__svg {
height: 100%;
}
.tablet.portrait .s3d-floor {
height: calc(var(--vh, 1vh) * 100);
grid-template-columns: 1fr;
align-items: start;
grid-template-rows: var(--s3d-header) min-content auto calc(80px + var(--space-4)) var(--menu-h);
grid-template-areas: "." "menu" "svg" "zoom" "info";
}
.tablet.portrait .s3d-floor__menu-container {
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
gap: var(--space-3);
}
.tablet.portrait .s3d-floor__menu-container > div {
width: calc(33% - var(--space-3));
text-align: center;
}
.tablet.portrait .s3d-floor__zoom-wrapper {
flex-direction: row;
}
.tablet.portrait .s3d-floor__zoom-wrapper > :nth-child(n+2) {
margin-top: 0;
margin-left: var(--space-1);
}
.tablet.portrait .s3d-floor__nav-wrapper {
position: fixed;
bottom: calc(var(--mobile-controller-height) + 8px);
}
.tablet.portrait .s3d-floor__info-container2 {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.tablet.portrait .s3d-floor__tabs-wrapper {
display: flex;
flex-wrap: wrap;
}
.tablet.portrait .s3d-floor__tabs-wrapper .s3d-floor__info-container__title {
width: 100%;
text-align: left;
}
.tablet.portrait .s3d-floor__tabs-wrapper .CheckboxWithLabel {
width: 50%;
}
.s3d-fv,
.s3d-pl {
display: grid;
height: 100%;
width: 100%;
grid-template-areas: "amount amount amount" ". content .";
grid-template-columns: calc(var(--controller-w) + var(--offset)) auto calc(var(--controller-w) + var(--offset));
grid-template-rows: auto 1fr;
overflow: hidden;
padding-top: var(--s3d-header);
font-size: 20px;
font-family: "Inter Display", sans-serif;
font-weight: 400;
font-style: normal;
line-height: 130%;
text-decoration: none;
text-transform: none;
}
.s3d-fv [data-compare-pdf],
.s3d-pl [data-compare-pdf] {
display: none;
}
@media screen and (max-width: 1440px) {
.s3d-fv,
.s3d-pl {
grid-template-columns: calc(var(--controller-w) + var(--offset)) auto var(--offset);
}
}
@media screen and (max-width: 1440px) and (min-width: 1024px) {
.s3d-fv,
.s3d-pl {
--filter-width: 375px;
}
}
@media screen and (max-width: 1024px) {
.s3d-fv,
.s3d-pl {
grid-template-columns: 1fr;
grid-template-rows: auto 1fr;
grid-template-areas: "amount" "content";
}
}
.s3d-fv__mobile-results,
.s3d-pl__mobile-results {
padding-top: var(--space-3);
padding-left: var(--space-2);
padding-right: var(--space-2);
}
.s3d-fv__not-found,
.s3d-pl__not-found {
color: var(--text-gray-900);
text-align: left;
background-color: var(--not-found-color);
padding: var(--space-4);
border-radius: var(--border-space-3);
margin-bottom: var(--space-4);
margin-top: 0;
}
@media screen and (max-width: 768px) {
.s3d-fv__not-found,
.s3d-pl__not-found {
margin: var(--space-2);
}
}
.s3d-fv__not-found-top,
.s3d-pl__not-found-top {
display: flex;
align-items: center;
justify-content: center;
color: var(--text-gray-900);
}
.s3d-fv__not-found-top svg,
.s3d-pl__not-found-top svg {
width: 24px;
height: 24px;
fill: var(--icon-warning);
margin-right: var(--space-3);
}
.s3d-fv__not-found-bottom,
.s3d-pl__not-found-bottom {
font-size: 13px;
color: var(--color-gray-700);
text-align: center;
}
.s3d-fv__container,
.s3d-pl__container {
grid-area: content;
display: flex;
height: 100%;
flex-direction: column;
align-content: flex-start;
overflow: hidden;
}
.s3d-fv__container .s3d-fv__list,
.s3d-fv__container .s3d-pl__list,
.s3d-pl__container .s3d-fv__list,
.s3d-pl__container .s3d-pl__list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(285px, 1fr));
grid-auto-rows: max-content;
column-gap: 20px;
width: 100%;
overflow-y: auto;
margin-left: 0;
margin-right: 0;
-ms-overflow-style: none; scrollbar-width: thin; scrollbar-color: var(--color-surface-gray-600) transparent;  }
.s3d-fv__container .s3d-fv__list::-webkit-scrollbar,
.s3d-fv__container .s3d-pl__list::-webkit-scrollbar,
.s3d-pl__container .s3d-fv__list::-webkit-scrollbar,
.s3d-pl__container .s3d-pl__list::-webkit-scrollbar {
width: 4px;
border-radius: 4px;
cursor: pointer;
}
.s3d-fv__container .s3d-fv__list::-webkit-scrollbar-track,
.s3d-fv__container .s3d-pl__list::-webkit-scrollbar-track,
.s3d-pl__container .s3d-fv__list::-webkit-scrollbar-track,
.s3d-pl__container .s3d-pl__list::-webkit-scrollbar-track {
background: #f0f0f0;
border-radius: 4px;
}
.s3d-fv__container .s3d-fv__list::-webkit-scrollbar-thumb,
.s3d-fv__container .s3d-pl__list::-webkit-scrollbar-thumb,
.s3d-pl__container .s3d-fv__list::-webkit-scrollbar-thumb,
.s3d-pl__container .s3d-pl__list::-webkit-scrollbar-thumb {
background: var(--color-surface-gray-600);
border-radius: 4px;
cursor: pointer;
}
.s3d-fv__container .s3d-fv__list::-webkit-scrollbar-thumb:active,
.s3d-fv__container .s3d-pl__list::-webkit-scrollbar-thumb:active,
.s3d-pl__container .s3d-fv__list::-webkit-scrollbar-thumb:active,
.s3d-pl__container .s3d-pl__list::-webkit-scrollbar-thumb:active {
background-color: var(--color-surface-gray-600);
cursor: pointer;
border-radius: 4px;
}
@media screen and (max-width: 1440px) {
.s3d-fv__container .s3d-fv__list,
.s3d-fv__container .s3d-pl__list,
.s3d-pl__container .s3d-fv__list,
.s3d-pl__container .s3d-pl__list {
grid-template-columns: repeat(auto-fill, minmax(267px, 1fr));
}
}
@media screen and (max-width: 1024px) {
.s3d-fv__container .s3d-fv__list,
.s3d-fv__container .s3d-pl__list,
.s3d-pl__container .s3d-fv__list,
.s3d-pl__container .s3d-pl__list {
grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
margin-top: var(--offset);
padding: 0 var(--offset);
}
}
@media screen and (max-width: 680px) {
.s3d-fv__container .s3d-fv__list,
.s3d-fv__container .s3d-pl__list,
.s3d-pl__container .s3d-fv__list,
.s3d-pl__container .s3d-pl__list {
margin-top: 0;
}
.s3d-fv__container .s3d-fv__list.list,
.s3d-fv__container .s3d-pl__list.list,
.s3d-pl__container .s3d-fv__list.list,
.s3d-pl__container .s3d-pl__list.list {
margin-top: var(--space-2);
}
}
.s3d-fv__container .s3d-pl__list.list,
.s3d-pl__container .s3d-pl__list.list {
display: flex;
flex-direction: column;
}
.s3d-fv__container .s3d-pl__list.list .s3d-card,
.s3d-pl__container .s3d-pl__list.list .s3d-card {
position: relative;
flex-direction: row;
box-sizing: border-box;
width: 100%;
height: 200px;
min-height: 200px;
padding: 20px;
margin: var(--space-2) 0;
}
.s3d-fv__container .s3d-pl__list.list .s3d-card:first-child,
.s3d-pl__container .s3d-pl__list.list .s3d-card:first-child {
margin-top: 0;
}
.s3d-fv__container .s3d-pl__list.list .s3d-card .s3d-card__header,
.s3d-pl__container .s3d-pl__list.list .s3d-card .s3d-card__header {
min-width: 560px;
width: 560px;
}
@media screen and (min-width: 1025px) and (max-width: 1420px) {
.s3d-fv__container .s3d-pl__list.list .s3d-card .s3d-card__header,
.s3d-pl__container .s3d-pl__list.list .s3d-card .s3d-card__header {
width: 410px;
min-width: 410px;
}
}
.s3d-fv__container .s3d-pl__list.list .s3d-card .s3d-card__image,
.s3d-pl__container .s3d-pl__list.list .s3d-card .s3d-card__image {
position: absolute;
left: 0px;
top: 0px;
bottom: 0px;
box-sizing: border-box;
width: 200px;
height: 100%;
padding: 40px;
margin: 0;
min-height: 100%;
}
.s3d-fv__container .s3d-pl__list.list .s3d-card .left,
.s3d-pl__container .s3d-pl__list.list .s3d-card .left {
position: absolute;
left: 220px;
bottom: 50px;
height: min-content;
padding: 0;
}
.s3d-fv__container .s3d-pl__list.list .s3d-card .right,
.s3d-pl__container .s3d-pl__list.list .s3d-card .right {
position: absolute;
top: 8px;
right: 8px;
}
.s3d-fv__container .s3d-pl__list.list .s3d-card .s3d-card__middle, .s3d-fv__container .s3d-pl__list.list .s3d-card .s3d-infoBox__flat__alert__middle,
.s3d-pl__container .s3d-pl__list.list .s3d-card .s3d-card__middle,
.s3d-pl__container .s3d-pl__list.list .s3d-card .s3d-infoBox__flat__alert__middle {
position: absolute;
left: 220px;
top: 50px;
width: 320px;
height: min-content;
padding: 0;
}
@media screen and (min-width: 1241px) and (max-width: 1520px) {
.s3d-fv__container .s3d-pl__list.list .s3d-card .s3d-card__middle, .s3d-fv__container .s3d-pl__list.list .s3d-card .s3d-infoBox__flat__alert__middle,
.s3d-pl__container .s3d-pl__list.list .s3d-card .s3d-card__middle,
.s3d-pl__container .s3d-pl__list.list .s3d-card .s3d-infoBox__flat__alert__middle {
width: 240px;
}
}
@media screen and (min-width: 1025px) and (max-width: 1240px) {
.s3d-fv__container .s3d-pl__list.list .s3d-card .s3d-card__middle, .s3d-fv__container .s3d-pl__list.list .s3d-card .s3d-infoBox__flat__alert__middle,
.s3d-pl__container .s3d-pl__list.list .s3d-card .s3d-card__middle,
.s3d-pl__container .s3d-pl__list.list .s3d-card .s3d-infoBox__flat__alert__middle {
width: 170px;
}
}
.s3d-fv__container .s3d-pl__list.list .s3d-card .s3d-card__info-label-wrapper, .s3d-fv__container .s3d-pl__list.list .s3d-card .s3d-infoBox__flat__wrapper-label,
.s3d-pl__container .s3d-pl__list.list .s3d-card .s3d-card__info-label-wrapper,
.s3d-pl__container .s3d-pl__list.list .s3d-card .s3d-infoBox__flat__wrapper-label {
position: absolute;
left: 427px;
bottom: 50px;
height: 26px;
margin: 0;
padding: 0;
}
.s3d-fv__container .s3d-pl__list.list .s3d-card .s3d-card__info-wrapper,
.s3d-pl__container .s3d-pl__list.list .s3d-card .s3d-card__info-wrapper {
display: flex;
flex-direction: row-reverse;
gap: 0;
width: 100%;
padding: 0;
}
.s3d-fv__container .s3d-pl__list.list .s3d-card .s3d-card__table,
.s3d-pl__container .s3d-pl__list.list .s3d-card .s3d-card__table {
position: relative;
display: flex;
align-items: center;
width: 50%;
top: 30px;
height: 38px;
padding-left: 30px;
text-align: start;
}
.s3d-fv__container .s3d-pl__list.list .s3d-card .s3d-card__title,
.s3d-pl__container .s3d-pl__list.list .s3d-card .s3d-card__title {
position: relative;
width: 50%;
top: 30px;
height: 38px;
padding-right: 30px;
text-align: end;
}
.s3d-fv__container .s3d-pl__list.list .s3d-card .s3d-card__title::after,
.s3d-pl__container .s3d-pl__list.list .s3d-card .s3d-card__title::after {
content: "/";
position: absolute;
right: 0;
}
.s3d-fv__container .s3d-fv__list,
.s3d-pl__container .s3d-fv__list {
margin-bottom: var(--offset);
}
.s3d-fv__container .s3d-fv__list .s3d-card .s3d__close,
.s3d-pl__container .s3d-fv__list .s3d-card .s3d__close {
display: flex;
}
.s3d-fv__container .s3d-fv__list .s3d-card .s3d-card__status,
.s3d-pl__container .s3d-fv__list .s3d-card .s3d-card__status {
top: auto;
bottom: 0;
border-radius: var(--border-space-2) var(--border-space-2) 0 var(--border-space-2);
}
.s3d-fv .s3d__wrapper__plannings__filter,
.s3d-pl .s3d__wrapper__plannings__filter {
display: none;
}
@media screen and (max-width: 680px) {
.s3d-fv .s3d__wrapper__plannings__filter,
.s3d-pl .s3d__wrapper__plannings__filter {
display: flex;
align-items: center;
justify-content: center;
position: fixed;
bottom: var(--controller-h);
left: 0;
width: 100%;
height: var(--menu-h);
background: #f4f8fd;
visibility: visible;
border-top: 1px solid #cbd0db;
}
.s3d-fv .s3d__wrapper__plannings__filter .s3d-ctr__menu-3d-btn-style,
.s3d-pl .s3d__wrapper__plannings__filter .s3d-ctr__menu-3d-btn-style {
visibility: visible;
border: 1px solid #000000;
color: #000000;
}
.s3d-fv .s3d__wrapper__plannings__filter .s3d-ctr__menu-3d-btn-style .s3d-ctr__filter__icon,
.s3d-pl .s3d__wrapper__plannings__filter .s3d-ctr__menu-3d-btn-style .s3d-ctr__filter__icon {
margin-right: 8px;
display: flex;
align-items: center;
justify-content: center;
}
.s3d-fv .s3d__wrapper__plannings__filter .s3d-ctr__menu-3d-btn-style .s3d-ctr__filter__icon svg,
.s3d-pl .s3d__wrapper__plannings__filter .s3d-ctr__menu-3d-btn-style .s3d-ctr__filter__icon svg {
height: var(--icon16);
width: var(--icon16);
stroke: #000000;
}
}
.s3d-fv__toggle-list,
.s3d-pl__toggle-list {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
margin-bottom: var(--space-4);
padding-left: var(--space-4);
padding-right: var(--space-4);
}
@media screen and (max-width: 1366px) {
.s3d-fv__toggle-list,
.s3d-pl__toggle-list {
margin-bottom: var(--space-2);
}
}
@media screen and (max-width: 768px) {
.s3d-fv__toggle-list,
.s3d-pl__toggle-list {
padding-left: var(--space-4);
padding-right: var(--space-4);
margin-bottom: 0;
}
.s3d-fv__toggle-list button span,
.s3d-pl__toggle-list button span {
display: none;
}
}
.s3d-fv__toggle-list-buttons-bg,
.s3d-pl__toggle-list-buttons-bg {
position: absolute;
z-index: 1;
top: 0;
left: 0px;
width: 100px;
height: 100%;
background-color: var(--color-surface-brand-800);
border-color: var(--border-brand-900);
border-radius: var(--border-space-2);
transition: all 0.25s ease-out;
}
@media screen and (max-width: 768px) {
.s3d-fv__toggle-list-buttons-bg,
.s3d-pl__toggle-list-buttons-bg {
width: 40px;
}
}
.s3d-fv__toggle-list-buttons,
.s3d-pl__toggle-list-buttons {
position: relative;
display: flex;
flex-direction: row;
background-color: var(--color-surface-gray-200-transperent-88);
border-radius: var(--border-space-2);
border: 1px solid var(--border-gray-400);
cursor: pointer;
overflow: hidden;
}
.s3d-fv__toggle-list-buttons .ButtonIconLeft,
.s3d-pl__toggle-list-buttons .ButtonIconLeft {
display: flex;
justify-content: center;
width: 90px;
position: relative;
border: none;
}
@media screen and (max-width: 768px) {
.s3d-fv__toggle-list-buttons .ButtonIconLeft,
.s3d-pl__toggle-list-buttons .ButtonIconLeft {
width: 40px;
padding: var(--space-2);
}
}
.s3d-fv__toggle-list-buttons .ButtonIconLeft span,
.s3d-pl__toggle-list-buttons .ButtonIconLeft span {
position: relative;
z-index: 2;
transition: all 0.9s ease-out;
}
@media screen and (max-width: 768px) {
.s3d-fv__toggle-list-buttons .ButtonIconLeft span,
.s3d-pl__toggle-list-buttons .ButtonIconLeft span {
display: none;
}
}
.s3d-fv__toggle-list-buttons .ButtonIconLeft svg,
.s3d-pl__toggle-list-buttons .ButtonIconLeft svg {
position: relative;
z-index: 2;
fill: var(--icon-gray-900);
transition: all 0.9s ease-out;
}
@media screen and (max-width: 768px) {
.s3d-fv__toggle-list-buttons .ButtonIconLeft svg,
.s3d-pl__toggle-list-buttons .ButtonIconLeft svg {
margin-right: 0;
}
}
.s3d-fv__toggle-list-buttons .ButtonIconLeft svg path,
.s3d-pl__toggle-list-buttons .ButtonIconLeft svg path {
fill: var(--icon-gray-900);
}
.s3d-fv__toggle-list-buttons .ButtonIconLeft.active,
.s3d-pl__toggle-list-buttons .ButtonIconLeft.active {
color: var(--icon-gray-200);
pointer-events: none;
}
.s3d-fv__toggle-list-buttons .ButtonIconLeft.active svg,
.s3d-pl__toggle-list-buttons .ButtonIconLeft.active svg {
fill: var(--icon-gray-200);
}
.s3d-fv__toggle-list-buttons .ButtonIconLeft.active svg path,
.s3d-pl__toggle-list-buttons .ButtonIconLeft.active svg path {
fill: var(--icon-gray-200);
}
.s3d-fv__toggle-list-buttons .ButtonIconLeft.active,
.s3d-pl__toggle-list-buttons .ButtonIconLeft.active {
background-color: var(--color-surface-brand-800);
border-color: var(--border-brand-900);
color: var(--icon-gray-200);
}
@media (hover: hover) {
.s3d-fv__toggle-list-buttons:hover,
.s3d-pl__toggle-list-buttons:hover {
border-color: var(--border-gray-600-transparent-88);
background-color: var(--color-surface-gray-400-transperent-88);
}
.s3d-fv .ButtonIconLeft.active:hover,
.s3d-pl .ButtonIconLeft.active:hover {
background-color: var(--color-surface-brand-800);
border-color: var(--border-brand-900);
color: var(--icon-gray-200);
}
}
.s3d-pl {
grid-template-areas: "filter content content" "filter content content";
grid-template-columns: var(--filter-width) auto calc(var(--controller-w) + var(--offset));
grid-template-rows: auto 100%;
padding: calc(var(--space-4) + var(--s3d-header)) var(--space-4) var(--space-4);
height: calc(var(--vh) * 100);
align-self: flex-end;
column-gap: var(--space-4);
}
.s3d-pl__list {
margin-top: 0;
margin-bottom: 0;
transition: 0.35s ease-out;
}
@media screen and (max-width: 600px) {
.s3d-pl__list {
transition: none;
}
}
@media screen and (max-width: 768px) {
.s3d-pl__mobile-results {
display: none;
}
}
.s3d-pl__toggle-list {
margin-top: var(--space-2);
}
.s3d-pl__toggle-list-mobile-amount {
margin-left: var(--space-5);
margin-right: auto;
}
@media screen and (min-width: 769px) {
.s3d-pl__toggle-list-mobile-amount {
display: none;
}
}
.s3d-pl__container {
position: relative;
}
.s3d-pl__container-pending {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 10;
background-color: var(--color-special-200-transparent-40);
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: 0.15s ease-out;
}
.s3d-pl__container.pending .s3d-pl__container-pending {
opacity: 1;
visibility: visible;
pointer-events: painted;
}
.s3d-pl__container.pending .s3d-pl__list {
opacity: 0;
}
.s3d-pl__container:not(.pending) .lds-ring div {
animation: none;
}
.s3d-pl__filter-container {
grid-area: filter;
}
.s3d-pl__filter-container:empty {
display: none;
}
.s3d-pl__filter-container > * {
position: static;
}
@media screen and (max-width: 1160px) {
.desktop .s3d-pl {
grid-template-columns: min(350px, 100vw) auto calc(var(--controller-w) + var(--offset));
padding-bottom: 0;
}
}
.tablet .s3d-pl {
align-self: flex-start;
padding-top: var(--s3d-header);
}
.tablet .s3d__wrapper__plannings__filter {
display: flex;
align-items: center;
justify-content: center;
position: fixed;
bottom: var(--controller-h);
left: 0;
width: 100%;
height: var(--menu-h);
background: #f4f8fd;
visibility: visible;
border-top: 1px solid #cbd0db;
}
.tablet .s3d__wrapper__plannings__filter .s3d-ctr__menu-3d-btn-style {
visibility: visible;
border: 1px solid #000000;
color: #000000;
}
.tablet .s3d__wrapper__plannings__filter .s3d-ctr__menu-3d-btn-style .s3d-ctr__filter__icon {
margin-right: 8px;
display: flex;
align-items: center;
justify-content: center;
}
.tablet .s3d__wrapper__plannings__filter .s3d-ctr__menu-3d-btn-style .s3d-ctr__filter__icon svg {
height: var(--icon16);
width: var(--icon16);
stroke: #000000;
}
@media screen and (min-width: 1365px) {
.tablet.landscape .s3d-fv__container .s3d-pl__list,
.tablet.landscape .s3d-pl__container .s3d-pl__list {
height: calc(var(--vh, 1vh) * 100);
}
.tablet.landscape .s3d-filter-wrap.s3d-planning-filter-wrap {
bottom: 0;
}
.tablet.landscape .s3d__wrapper__plannings__filter {
position: fixed;
bottom: 0;
}
}
.tablet .s3d-pl {
grid-template-areas: "content content content" "content content content";
padding: calc(var(--s3d-header) + var(--space-1)) 0 0 0;
grid-template-columns: 1fr 1fr 1fr;
}
.tablet .s3d-pl .s3d__wrapper__plannings__filter {
display: none;
}
.tablet .s3d-pl .s3d-filter-wrap {
position: fixed;
left: 0;
top: auto;
height: max-content;
bottom: var(--mobile-controller-height);
transform: translateX(-100%);
}
.tablet .s3d-pl .s3d-filter-wrap .s3d-filter__close-wrap {
display: flex;
top: 16px;
width: 24px;
height: 24px;
right: var(--space-3);
}
.tablet .s3d-pl .s3d-filter-wrap.s3d-open-filter {
transform: translateX(0);
}
.mobile .s3d-card {
transition: none;
}
.mobile .s3d-pl {
grid-template-areas: "content";
padding: 0;
grid-template-columns: 1fr;
grid-template-rows: 1fr;
column-gap: 0;
padding-top: calc(var(--s3d-header) + var(--space-2));
}
.mobile .s3d-pl .s3d__wrapper__plannings__filter {
display: none;
}
.mobile .s3d-pl .s3d-filter-wrap {
position: fixed;
left: 0;
top: auto;
height: max-content;
bottom: var(--mobile-controller-height);
transform: translateX(-100%);
width: calc(100vw - var(--space-8));
left: var(--space-4);
transition: 0.25s ease-in !important;
}
.mobile .s3d-pl .s3d-filter-wrap .s3d-filter__close-wrap {
display: flex;
top: 10px;
right: calc(var(--space-3) * -1);
top: var(--space-5);
}
.mobile .s3d-pl .s3d-filter-wrap.s3d-open-filter {
transform: translateX(0);
}
.s3d-fv {
padding-left: var(--space-4);
padding-right: var(--space-4);
padding-top: calc(var(--s3d-header) + var(--space-4));
grid-template-areas: "amount amount amount" "content content content";
}
.s3d-fv .s3d-fv__container .s3d-fv__list {
display: flex;
align-items: flex-start;
grid-gap: 0;
overflow-x: auto;
flex-grow: 1;
-ms-overflow-style: none; overscroll-behavior: none;
}
.s3d-fv .s3d-fv__container .s3d-fv__list::-webkit-scrollbar {
width: 8px;
height: 8px;
cursor: pointer;
}
.s3d-fv .s3d-fv__container .s3d-fv__list::-webkit-scrollbar-thumb {
background: var(--color-surface-gray-600);
border-radius: var(--border-space-2);
cursor: pointer;
}
.s3d-fv .s3d-fv__container .s3d-fv__list::-webkit-scrollbar-track {
background: transparent;
}
.s3d-fv .s3d-fv__container .s3d-fv__list {
scrollbar-face-color: var(--color-surface-gray-600);
scrollbar-track-color: transparent;
}
.s3d-fv .s3d-fv__container .s3d-fv__list::-webkit-scrollbar {
height: 8px;
cursor: pointer;
}
.s3d-fv .s3d-fv__container .s3d-fv__list::-webkit-scrollbar-thumb {
background: var(--color-surface-gray-600);
border-radius: 4px;
cursor: pointer;
}
.s3d-fv .s3d-fv__container .s3d-fv__list::-webkit-scrollbar-thumb:active {
background-color: gray;
cursor: pointer;
}
.s3d-fv .s3d-fv__container .s3d-fv__list > * {
flex-shrink: 0;
min-width: 320px;
width: 17vw;
}
.s3d-fv__amount-flat {
grid-area: amount;
padding: var(--space-2);
display: flex;
align-items: center;
justify-content: space-between;
}
@media screen and (max-width: 768px) {
.s3d-fv__amount-flat {
padding-left: 0;
padding-right: 0;
padding-top: 0;
}
}
.s3d-fv__amount-flat > :first-child {
margin-right: auto;
}
.s3d-fv__amount-flat > :nth-child(n+2) {
margin-left: var(--space-2);
}
.s3d-fv .EmptyFavourites {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
align-self: center;
justify-self: center;
width: 100% !important;
flex-grow: 1;
height: 100%;
}
.s3d-fv .EmptyFavourites svg {
width: 24px;
height: 24px;
fill: var(--icon-gray-700);
}
.tablet .s3d-fv {
padding-left: var(--space-4);
padding-right: var(--space-4);
padding-top: calc(var(--s3d-header) + var(--space-4));
grid-template-areas: "amount amount amount" "content content content";
}
.tablet .s3d-fv .s3d-fv__container .s3d-fv__list {
display: flex;
grid-gap: 0;
overflow-x: auto;
}
.tablet .s3d-fv .s3d-fv__container .s3d-fv__list::-webkit-scrollbar {
width: 10px;
height: 10px;
cursor: pointer;
}
.tablet .s3d-fv .s3d-fv__container .s3d-fv__list::-webkit-scrollbar-thumb {
background: var(--color-surface-gray-600);
border-radius: var(--border-space-2);
cursor: pointer;
}
.tablet .s3d-fv .s3d-fv__container .s3d-fv__list::-webkit-scrollbar-track {
background: transparent;
}
.tablet .s3d-fv .s3d-fv__container .s3d-fv__list {
scrollbar-face-color: var(--color-surface-gray-600);
scrollbar-track-color: transparent;
}
.tablet .s3d-fv .s3d-fv__container .s3d-fv__list > * {
flex-shrink: 0;
width: 40%;
}
.mobile .s3d-fv {
padding-left: var(--space-2);
padding-right: var(--space-2);
padding-top: calc(var(--s3d-header) + var(--space-2));
}
.mobile .s3d-fv .EmptyFavourites {
padding-bottom: var(--mobile-controller-height);
}
.mobile .s3d-fv .EmptyFavourites__title {
text-align: center;
}
.mobile .s3d-fv__amount-flat {
flex-wrap: wrap;
justify-content: flex-start;
font-size: var(--font24);
}
.mobile .s3d-fv__amount-flat > :nth-child(n+2) {
margin-left: initial;
}
.mobile .s3d-fv__amount-flat > :nth-child(2), .mobile .s3d-fv__amount-flat > :nth-child(1) {
width: 100%;
margin-bottom: var(--space-2);
}
.mobile .s3d-fv__amount-flat .ButtonIconLeft {
margin-left: var(--space-2);
}
.mobile .s3d-fv .s3d-fv__container {
padding: 0;
height: calc(100% - var(--mobile-controller-height));
}
.mobile .s3d-fv .s3d-fv__container .s3d-fv__list {
padding: 0;
grid-gap: var(--space-2);
margin-top: 0;
}
.mobile .s3d-pl__container .s3d-pl__list.list .s3d-card {
height: auto;
min-height: auto;
flex-wrap: wrap;
overflow: initial;
display: grid;
grid-template-columns: 1fr 1.45fr;
grid-template-rows: auto auto auto auto;
gap: var(--space-4) var(--space-6);
padding: var(--space-2) var(--space-5) var(--space-2) var(--space-2);
grid-template-areas: "labels labels" "image info" "image info2" "labels2 labels2";
position: relative; padding-bottom: calc(var(--space-6) + 13px + var(--space-6));
}
.mobile .s3d-pl__container .s3d-pl__list.list .s3d-card__image {
position: relative;
padding: var(--space-2);
width: auto;
height: auto;
min-height: initial;
padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4);
grid-area: image;
}
.mobile .s3d-pl__container .s3d-pl__list.list .s3d-card__header {
width: auto;
min-width: auto;
grid-area: labels;
padding-bottom: 0;
}
.mobile .s3d-pl__container .s3d-pl__list.list .s3d-card__info-wrapper {
grid-area: info2;
flex-wrap: wrap;
justify-content: flex-end;
}
.mobile .s3d-pl__container .s3d-pl__list.list .s3d-card__middle, .mobile .s3d-pl__container .s3d-pl__list.list .s3d-infoBox__flat__alert__middle {
position: static;
width: auto;
height: auto;
grid-area: info;
font-family: "Inter Display";
font-size: 24px;
font-style: normal;
font-weight: 300;
line-height: 120%; }
.mobile .s3d-pl__container .s3d-pl__list.list .s3d-card__info-label-wrapper, .mobile .s3d-pl__container .s3d-pl__list.list .s3d-infoBox__flat__wrapper-label {
position: static;
position: absolute;
bottom: calc(var(--space-6) + 2px);
left: var(--space-5);
}
.mobile .s3d-pl__container .s3d-pl__list.list .s3d-card__table {
position: static;
padding-left: 0;
height: auto;
width: auto;
}
.mobile .s3d-pl__container .s3d-pl__list.list .s3d-card__title {
position: static;
padding-right: 0;
width: auto;
height: auto;
}
.mobile .s3d-pl__container .s3d-pl__list.list .s3d-card__title:after {
display: none;
}
.mobile .s3d-pl__container .s3d-pl__list.list .s3d-card .left {
position: static;
}
.mobile .s3d-pl__container .s3d-pl__list.list .s3d-card .right {
width: 24px;
height: 24px;
}
.mobile .s3d-pl__container .s3d-pl__list.list .s3d-card .right label {
padding: 0;
}
.s3d__svgWrap {
z-index: 51;
position: absolute;
top: 0;
left: 0;
display: flex;
justify-content: center;
width: 100%;
height: 100%;
align-items: center;
}
.s3d__svgWrap svg {
display: block;
width: 100%;
height: 100%;
fill: transparent;
margin: 0 auto;
opacity: 0;
visibility: hidden;
pointer-events: none;
}
.s3d__svgWrap.s3d__svg__active {
z-index: 55;
}
.s3d__svgWrap.s3d__svg__active svg {
opacity: 1;
visibility: visible;
pointer-events: painted;
}
.s3d__svg-container {
z-index: 55;
display: block !important;
}
.s3d-svg__build {
cursor: pointer;
transition: 0.25s ease-out;
}
.s3d-svg__build[data-type=sold] {
cursor: no-drop;
}
.s3d-svg__build[data-type=slider_popup] {
cursor: pointer;
fill: rgba(0, 0, 0, 0.6);
}
.s3d-svg__house {
cursor: pointer;
transition: 0.25s ease-out;
}
.s3d-svg__house[data-type=infrastructure], .s3d-svg__house[data-type=sold] {
cursor: no-drop;
}
.s3d-svg__house[data-type=slider_popup] {
cursor: pointer;
fill: rgba(0, 0, 0, 0.6);
}
.s3d-svg__house[data-type=flyby] {
stroke: #fff;
stroke-width: 4px;
transition: fill 0.25s ease-out;
}
.s3d-svg__house:hover:not(.polygon__flat-svg) {
fill: rgba(0, 0, 0, 0.7);
}
.s3d-svg__house:hover[data-type=floor], .s3d-svg__house:hover[data-type=flat] {
stroke-width: 2;
stroke: #f4f8fd;
}
.polygon__filter-select {
fill: rgba(0, 0, 0, 0.6);
}
.polygon__flat-svg {
fill: rgba(0, 0, 0, 0.8);
}
.polygon__flat-svg {
fill: rgba(255, 255, 255, 0.75) !important;
}
.polygon__active-flat:not(.s3d__active) {
fill: var(--color-surface-success-available-hover-transparent-60);
}
.polygon__filter-select {
fill: rgba(0, 0, 0, 0.6);
transition: 0.25s ease-out;
}
svg polygon.preview,
svg polygon.active,
svg .polygon__flat-svg {
stroke: rgb(255, 255, 255);
stroke-width: 6;
opacity: 1;
animation: stroke-pulsation 1.6s infinite cubic-bezier(0, 0, 0.12, 1.02);
}
.safari svg polygon.preview,
.safari svg polygon.active,
.safari svg .polygon__flat-svg {
animation: none;
}
@keyframes stroke-pulsation {
0% {
stroke-width: 2;
}
20% {
stroke-width: 6;
}
100% {
stroke-width: 2;
}
}
[data-type=pin] {
cursor: initial;
}
[data-type=pin][data-href] {
cursor: pointer;
}
[data-type=pin][data-href] polygon {
cursor: pointer;
}
[data-type=pin] polygon {
opacity: 0;
fill: rgba(181, 159, 86, 0.7);
transition: opacity 0.25s ease-out;
cursor: inherit;
}
[data-type=pin] .text-background,
[data-type=pin] text {
transform-origin: center;
transform-box: fill-box;
transform: translateY(-52px) translateX(-30px);
}
[data-type=pin] .text-background {
fill: #0e0e0e;
transition: 0.25s ease-out;
opacity: 0;
}
[data-type=pin] text {
transition: 0.25s ease-out;
opacity: 0;
font-weight: 400;
font-size: 1rem;
fill: #fff;
}
[data-type=pin] rect:not(.text-background) {
transform-origin: center;
transform-box: fill-box;
transition: 0.25s ease-out;
transform: translate(-50%, -50%) scale(1);
}
[data-type=pin]:hover polygon {
opacity: 1;
}
[data-type=pin]:hover rect:not(.text-background) {
transform: translate(-50%, -50%) scale(1.2);
}
[data-type=pin]:hover .text-background,
[data-type=pin]:hover text {
opacity: 1;
animation: fadeInBottom 0.25s ease-out 1;
}
@keyframes fadeInBottom {
from {
opacity: 0;
transform: translateY(-35px) translateX(-30px);
}
to {
opacity: 1;
transform: translateY(-52px) translateX(-30px);
}
}
foreignObject {
pointer-events: none;
transform-origin: center;
transform-box: fill-box;
transform: translate(-50%, -50%);
}
.s3d-flyby-tooltip {
display: flex;
flex-direction: column;
column-gap: 4px;
pointer-events: none;
}
.s3d-flyby-tooltip__title {
background-color: #ca3c32;
font-size: 20px;
font-style: normal;
font-weight: 600;
line-height: 130%; padding: 4px 8px;
color: white;
white-space: nowrap;
text-align: center;
border-radius: 6px;
font-family: Proxima Nova;
}
.s3d-flyby-tooltip > svg {
display: block;
margin-left: auto;
margin-right: auto;
width: 16px;
height: 16px;
}
.s3d-flyby-tooltip__result {
background-color: white;
color: #000;
padding: 4px 8px;
text-align: center;
border-radius: 6px;
}
.s3d-card {
position: relative;
display: flex;
flex-direction: column;
background-color: var(--color-gray-100);
padding: var(--space-2) var(--space-2) var(--space-5);
transition: border 0.4s ease-in-out;
cursor: pointer;
border-radius: var(--border-space-2);
overflow: hidden;
min-height: 360px;
height: auto;
transition: box-shadow 0.3s ease;
margin: 10px 0;
}
.s3d-card:hover {
box-shadow: 0px 0px 10px 0px var(--color-shadow-gray-900-transperent-40);
}
@media screen and (min-width: 1023px) {
.s3d-card:hover {
border-color: var(--border-gray-600);
}
.s3d-card:hover .s3d-card__image img {
transform: scale(1.05);
}
}
@media screen and (max-width: 680px) {
.s3d-card {
min-height: 300px;
}
}
.s3d-card__badge, .s3d-infoBox__flat__alert__badge {
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
padding: var(--space-1) var(--space-2);
color: var(--color-gray-700);
font-size: 12px;
line-height: 100%;
text-transform: uppercase;
border-radius: var(--border-space-2);
border: 1px solid var(--border-gray-400);
}
.s3d-card__badge-icon {
width: var(--space-4);
height: var(--space-4);
}
.s3d-card__header {
padding-bottom: var(--space-4);
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
}
.s3d-card__header .left {
display: flex;
}
.s3d-card__middle, .s3d-infoBox__flat__alert__middle {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 12px;
font-size: var(--font32);
color: var(--color-gray-900);
font-weight: 300;
line-height: 120%;
letter-spacing: -2px;
}
.s3d-card__middle .decorative-slash, .s3d-infoBox__flat__alert__middle .decorative-slash {
color: var(--color-gray-600);
}
.s3d-card__image {
position: relative;
height: 220px;
min-height: 220px;
width: 100%;
padding: calc(var(--offset) / 2);
padding-bottom: var(--space-2);
margin-bottom: var(--space-2);
display: flex;
align-items: center;
justify-content: center;
transition: border-bottom 0.4s ease-in-out;
border-radius: var(--border-space-1);
background-color: var(--color-surface-gray-100);
}
@media screen and (max-width: 680px) {
.s3d-card__image {
height: 170px;
min-height: 170px;
padding: 12px;
}
}
.s3d-card__image img {
display: inline-block;
max-height: 100%;
max-width: 100%;
object-fit: contain;
transition: transform 0.4s ease-in-out;
}
.s3d-card__image-info {
display: flex;
align-items: center;
justify-content: space-between;
gap: 4px;
height: auto;
width: auto;
padding: var(--space-1) var(--space-2);
font-size: 13px;
font-family: "Inter Display", sans-serif;
font-weight: 400;
font-style: normal;
line-height: 140%;
text-decoration: none;
text-transform: none;
border-radius: var(--border-space-2);
}
.s3d-card__image-info > svg {
width: 24px;
height: 24px;
}
.s3d-card__image-info.s3d-card__status {
font-size: 12px;
text-transform: uppercase;
color: var(--color-gray-200);
border-radius: var(--border-space-2);
}
.s3d-card__image-info.s3d-card__status svg {
width: 16px;
height: 16px;
flex-shrink: 0;
fill: var(--icon-gray-200);
}
.s3d-card__image-info.s3d-card__status[data-sale="0"] {
background: var(--color-semantic-danger);
}
.s3d-card__image-info.s3d-card__status[data-sale="1"] {
background: var(--color-surface-semantic-success);
}
.s3d-card__image-info.s3d-card__status[data-sale="2"] {
background: #6d6805;
}
.s3d-card__image-info.s3d-card__status[data-sale="3"] {
background: #000000;
}
.s3d-card__image-info.s3d-card__rooms-count {
left: 0;
top: 0;
top: 50%;
background-color: var(--icon-gray-900);
color: var(--text-gray-200);
}
.s3d-card__info-wrapper {
padding: 0 var(--space-3);
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: start;
height: 100%;
width: 100%;
gap: var(--space-2);
}
.s3d-card__info-wrapper .s3d-card__title {
font-size: 32px;
font-family: "Inter Display", sans-serif;
font-weight: 300;
font-style: normal;
line-height: 130%;
letter-spacing: -1px;
text-decoration: none;
text-transform: none;
color: var(--text-gray-900);
margin-bottom: calc(var(--space-2) * -1);
font-size: 28px;
}
.s3d-card__info-wrapper .s3d-card__table {
width: 100%;
display: flex;
align-items: flex-start;
justify-content: flex-start;
flex-wrap: wrap;
gap: 2px 8px;
}
.s3d-card__info-wrapper .s3d-card__table .s3d-card__row {
display: flex;
align-items: center;
justify-content: flex-start;
font-size: 14px;
font-family: "Inter Display", sans-serif;
font-weight: 400;
font-style: normal;
line-height: 140%;
text-decoration: none;
text-transform: none;
color: var(--color-gray-700);
gap: 3px;
}
.s3d-card__info-wrapper .s3d-card__buttons {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
gap: 8px;
margin-top: auto;
}
.s3d-card__info-wrapper .s3d-card__buttons button {
flex-grow: 1;
text-align: center;
}
.s3d-card__info-label-wrapper, .s3d-infoBox__flat__wrapper-label {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: flex-start;
gap: 12px;
margin-top: 12px;
}
.s3d-card__info-label, .s3d-infoBox__flat__label {
font-size: 12px;
font-family: Inter Display;
font-weight: 400;
font-style: normal;
line-height: 100%;
text-decoration: none;
text-transform: none;
color: var(--color-gray-700);
text-transform: uppercase;
}
.s3d-card .s3d__close {
display: none;
position: absolute;
top: calc(var(--offset) / 2);
right: calc(var(--offset) / 2);
z-index: 50;
height: var(--icon16);
width: var(--icon16);
border: none;
align-items: center;
justify-content: center;
background: transparent;
cursor: pointer;
padding: 0;
}
@media screen and (min-width: 1023px) {
.s3d-card .s3d__close:hover svg {
transition: fill 0.4s ease-in-out;
fill: var(--icon-gray-900);
}
}
@media screen and (max-width: 680px) {
.s3d-card .s3d__close {
top: 12px;
right: 12px;
}
}
.s3d-card .s3d__close svg {
width: 100%;
height: 100%;
transition: fill 0.4s ease-in-out;
fill: var(--icon-gray-900);
}
.s3d-card__right-bottom-button {
position: absolute;
right: var(--space-3);
bottom: var(--space-4);
z-index: 2;
padding: var(--space-05);
border-radius: var(--space-2);
width: var(--space-6);
height: var(--space-6);
}
.s3d-card__right-bottom-button svg {
width: 100%;
height: 100%;
}
@media (hover: hover) {
.s3d-card__right-bottom-button {
transition: 0.25s ease-in-out;
}
.s3d-card__right-bottom-button [fill] {
transition: 0.25s ease-in-out;
}
.s3d-card__right-bottom-button:hover {
background: var(--color-surface-gray-400-transperent-88);
}
.s3d-card__right-bottom-button:hover [fill] {
fill: var(--color-brand-800);
}
.s3d-card__right-bottom-button:hover [stroke] {
stroke: var(--color-brand-800);
}
}
.tablet .s3d-card__info-wrapper {
padding: 0 var(--space-3);
}
* {
box-sizing: border-box;
}
html,
body,
.page__content,
.page__inner {
height: calc(var(--vh, 1vh) * 100);
min-height: 100vh;
margin: 0;
padding: 0;
overflow: hidden;
}
html.mobile body,
html.mobile .page__content,
html.mobile .page__inner {
min-height: calc(var(--vh, 1vh) * 100);
}
body {
display: block;
font-family: "Inter Display", sans-serif;
}
body[data-type=plannings] .s3d-pl,
body[data-type=plannings] .s3d-flat,
body[data-type=plannings] .s3d-floor,
body[data-type=plannings] .s3d-fv,
body[data-type=plannings] .s3d-villa__video-screen,
body[data-type=plannings] .errorPopup__container,
body[data-type=flat] .s3d-pl,
body[data-type=flat] .s3d-flat,
body[data-type=flat] .s3d-floor,
body[data-type=flat] .s3d-fv,
body[data-type=flat] .s3d-villa__video-screen,
body[data-type=flat] .errorPopup__container,
body[data-type=floor] .s3d-pl,
body[data-type=floor] .s3d-flat,
body[data-type=floor] .s3d-floor,
body[data-type=floor] .s3d-fv,
body[data-type=floor] .s3d-villa__video-screen,
body[data-type=floor] .errorPopup__container,
body[data-type=favourites] .s3d-pl,
body[data-type=favourites] .s3d-flat,
body[data-type=favourites] .s3d-floor,
body[data-type=favourites] .s3d-fv,
body[data-type=favourites] .s3d-villa__video-screen,
body[data-type=favourites] .errorPopup__container {
background: url(//the-light.com.ua/wp-content/themes/3d/assets/s3d/images/background-inside.jpg);
background-repeat: repeat;
}
.menu-wrap {
background: url(//the-light.com.ua/wp-content/themes/3d/assets/s3d/images/background-inside.jpg);
background-repeat: repeat;
}
sup {
font-size: 0.7em;
line-height: 0.7em;
transform: translateY(-30%);
vertical-align: super;
}
.unselectable {
-webkit-touch-callout: none; user-select: none; }
.tablet.portrait .s3d__wrap {
overflow-x: auto;
overflow-y: hidden;
justify-content: flex-start;
align-items: flex-start;
}
.s3d-mobile .s3d__wrap {
overflow-x: auto;
overflow-y: hidden;
justify-content: flex-start;
align-items: flex-start;
overscroll-behavior: none;
}
.s3d-mobile-only:not(.rc) {
display: none;
}
@media screen and (max-width: 1024px) {
.s3d-mobile .s3d__wrapper__flat {
overflow: auto;
padding-bottom: 0;
}
}
.s3d__slideModule {
z-index: 1;
position: relative;
display: flex;
width: 100%;
height: 100vh;
overflow: hidden;
}
.s3d__flyby-container {
display: flex;
width: 100%;
height: 100%;
overflow: hidden;
z-index: 10;
}
.s3d__flyby-container.hide-svg .s3d__svgWrap svg {
opacity: 0;
}
.s3d__flyby-container:before {
content: "";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 15%;
background: none;
z-index: 101;
pointer-events: none;
}
.s3d__wrap {
z-index: 5;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
background-color: var(--color-surface-gray-200);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
.s3d__wrap::-webkit-scrollbar {
height: 2px;
width: 2px;
}
.s3d__wrap::-webkit-scrollbar-track {
-webkit-box-shadow: none;
background: #f4f8fd;
}
.s3d__wrap::-webkit-scrollbar-thumb {
background: #000000;
-webkit-box-shadow: none;
}
.s3d__wrap::-webkit-scrollbar-thumb:window-inactive {
background: #000000;
}
.s3d__clouds {
position: absolute;
z-index: 3;
left: 50%;
top: 50%;
width: 100%;
height: 100%;
transform: translate(-50%, -50%);
pointer-events: none;
}
.s3d__clouds img {
object-fit: cover;
animation: move1 70s linear infinite;
opacity: 0.35;
}
@keyframes move1 {
from {
transform: translateX(-100%);
}
to {
transform: translateX(100%);
}
}
.s3d-info__title {
font-size: var(--font20);
font-family: "Inter Display", sans-serif;
font-weight: 400;
line-height: 130%;
color: #000000;
text-align: center;
text-transform: uppercase;
margin-bottom: var(--info-offset-buttom);
}
.s3d-info__table {
width: 100%;
}
.s3d-info__table tbody {
width: 100%;
}
.s3d-info__row {
display: flex;
align-items: flex-end;
font-size: var(--font14);
font-family: "Inter Display", sans-serif;
font-weight: 400;
line-height: 130%;
color: #000000;
margin-bottom: 8px;
}
.s3d-info__row:last-child {
margin: 0;
}
@media screen and (min-width: 1025px) {
.s3d-info__row {
position: relative;
}
.s3d-info__row:before {
content: none;
position: absolute;
right: 0;
bottom: 0;
padding: 4px;
background-color: #000;
color: #fff;
pointer-events: none;
opacity: 0;
transition: 0.25s ease-out;
z-index: 10;
}
.s3d-info__row:hover:before {
opacity: 1;
}
}
.s3d-info__name {
display: flex;
align-items: flex-end;
flex-grow: 1;
white-space: nowrap;
}
.s3d-info__name:after {
content: "";
display: flex;
flex: 1 1 5%;
margin: 0 0.5ch 0.4ch;
border-bottom: 1px solid var(--color-surface-gray-400);
}
.s3d-info__value {
white-space: nowrap;
text-align: right;
}
@media screen and (min-width: 1025px) {
.s3d-info__value {
position: relative;
}
}
.s3d-show {
visibility: visible !important;
}
.s3d-display {
display: flex !important;
}
.s3d-display-none {
display: none !important;
}
.tippy-box {
background: transparent;
padding: 0;
}
.tippy-box .tippy-content {
padding: 0;
}
@media screen and (max-width: 1440px) {
.tippy-box {
padding: 0 25px;
}
}
.wrapper__first-info {
z-index: 205;
position: fixed;
top: 0;
left: 0;
display: flex;
justify-content: center;
width: 100%;
height: 100%;
align-items: center;
visibility: hidden;
background: rgba(20, 1, 1, 0.5);
}
.wrapper__first-info.active {
display: flex;
}
.s3d__add-to-favourite {
background: transparent;
border: none;
display: flex;
align-items: center;
justify-content: center;
pointer-events: painted;
cursor: pointer;
border-radius: var(--border-space-2);
}
@media screen and (min-width: 769px) {
.s3d__add-to-favourite {
transition: all 0.3s linear;
}
}
@media screen and (max-width: 600px) {
.s3d__add-to-favourite {
padding-top: calc(var(--space-2) - 0.5px);
padding-bottom: calc(var(--space-2) - 0.5px);
}
}
.s3d__add-to-favourite.added-to-favourites {
background: var(--color-surface-brand-800);
border-color: var(--border-brand-800);
}
.s3d__add-to-favourite.added-to-favourites svg {
fill: var(--icon-gray-200);
}
@media screen and (min-width: 1023px) {
.s3d__add-to-favourite:hover {
background: var(--color-surface-gray-400-transperent-88);
border-color: var(--border-gray-600-transparent-40);
}
.s3d__add-to-favourite:hover svg {
fill: #000000;
}
}
.s3d__add-to-favourite input {
display: none;
}
.s3d__add-to-favourite input:not(checked) + svg {
fill: var(--icon-gray-900);
}
.s3d__add-to-favourite svg {
fill: var(--icon-gray-900);
width: auto;
width: 24px;
height: 24px;
transition: all 0.3s ease-in-out;
}
.pinch-zoom-container {
width: 100%;
}
@media screen and (max-width: 768px) {
.pinch-zoom-container {
min-height: calc(var(--vh) * 100);
}
}
.mobile .s3d__slideModule {
height: calc(var(--vh, 1vh) * 100);
}
.mobile.landscape .s3d__wrap {
overflow-y: auto;
overflow-x: hidden;
overscroll-behavior: none;
height: calc(var(--vh) * 100);
}
.mobile.landscape .s3d__favourite {
--btn: 24px;
--icon24: 14px;
}
.mobile.landscape .s3d__favourite-count {
width: 14px;
height: 14px;
top: -5px;
right: -5px;
font-size: 8px;
}
.mobile.landscape .s3d__title svg {
height: 20px;
}
.js-s3d-flat__3d-tour foreignObject svg .SvgPin__icon-bg {
transition: fill 0.3s ease-in-out, stroke 0.3s ease-in-out;
}
.js-s3d-flat__3d-tour:hover {
cursor: pointer;
}
.mobile .s3d__wrap {
height: calc(var(--vh) * 100);
}
.mobile .js-s3d__wrapper__canvas {
height: calc(var(--vh) * 100);
}
.s3d-bottom-popup {
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 1000;
background: var(--color-surface-brand-900);
color: var(--text-gray-200);
padding: var(--space-2);
display: flex;
justify-content: center;
align-items: center;
box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
padding: var(--space-2) var(--space-4);
width: 100%;
}
.s3d-bottom-popup:not([style]) {
animation: slide-in-bottom-s3d-bottom-popup 0.3s 1 ease-out;
}
.s3d-bottom-popup__buttons {
margin-left: var(--space-6);
}
.s3d-bottom-popup__close {
width: var(--space-6);
height: var(--space-6);
position: absolute;
right: var(--space-2);
top: var(--space-2);
fill: var(--icon-gray-200);
}
@keyframes slide-in-bottom-s3d-bottom-popup {
0% {
-webkit-transform: translateY(100%);
transform: translateY(100%);
opacity: 0;
}
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
opacity: 1;
}
}
.smarto_logo {
display: block;
position: absolute;
right: 0;
bottom: -4px;
z-index: 1000;
pointer-events: all;
height: auto;
}
.smarto_logo img {
object-fit: cover;
width: var(--smarto-logo-w);
height: var(--smarto-logo-h);
transform: translate(20px, 20px);
transition: transform 0.4s ease-in-out;
cursor: pointer;
}
@media screen and (min-width: 1023px) {
.smarto_logo:hover img {
transform: translate(0, 0);
transition: transform 0.4s ease-in-out;
}
}
@media screen and (max-width: 1024px) {
.smarto_logo {
bottom: 0;
transform: translate(38%, 40%);
}
.smarto_logo img {
transform: translate(0, 0);
}
}
.tablet .smarto_logo,
.mobile .smarto_logo {
bottom: calc(var(--menu-h) - 22px);
top: auto;
left: auto;
right: 0;
width: 27px;
height: 27px;
}
.tablet .smarto_logo img,
.mobile .smarto_logo img {
transform: none;
}
.tablet .smarto_logo {
bottom: 0;
width: 36px;
height: 36px;
transform: none;
}
.tablet .smarto_logo img,
.mobile .smarto_logo img {
width: 100%;
height: 100%;
object-fit: contain;
}
.tablet [data-type=genplan] .smarto_logo,
.tablet [data-type=plannings] .smarto_logo {
z-index: 500;
}
.mobile .smarto_logo {
bottom: 0;
transform: none;
}
.mobile .smarto_logo img {
transform: none;
}
.s3d-header {
position: fixed;
top: 0;
left: 0;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 var(--offset);
height: var(--s3d-header);
background: transparent;
z-index: 102;
pointer-events: none;
opacity: 0;
visibility: hidden;
}
.s3d-header > * {
pointer-events: all;
}
.s3d-header .s3d__menu ~ .s3d__menu {
margin-left: 8px;
}
.s3d-header .s3d__menu {
border-radius: var(--border-space-2);
background: #e0c7aa;
pointer-events: painted;
cursor: pointer;
height: var(--btn);
width: var(--btn);
position: relative;
transition: background 0.4s ease-in-out;
}
.s3d-header .s3d__menu-elem-wrapper {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
gap: 3px;
}
.s3d-header .s3d__menu-elem-wrapper span {
width: 13px;
height: 1.5px;
border: 2px;
background: #000000;
}
.s3d-header .s3d__menu-elem-wrapper span:first-child {
width: 7.5px;
transition: width 0.4s ease-in-out;
}
@media screen and (min-width: 1023px) {
.s3d-header .s3d__menu:hover {
background: #e0c7aa;
transition: background 0.4s ease-in-out;
}
.s3d-header .s3d__menu:hover .s3d__menu-elem-wrapper span:first-child {
width: 13px;
transition: width 0.4s ease-in-out;
}
}
.s3d__compass {
width: 114px;
height: 114px;
margin-left: var(--offset);
margin-right: auto;
}
.s3d__compass svg {
height: 100%;
width: 100%;
}
@media screen and (max-width: 680px) {
.s3d__compass {
height: 80px;
width: 80px;
}
}
.s3d__favourite {
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--border-space-2);
border: 1px solid var(--border-gray-600-transparent-40);
pointer-events: painted;
padding: var(--space-2);
background: var(--color-surface-gray-200-transperent-88);
cursor: pointer;
transition: all 0.3s linear;
}
.s3d__favourite input {
display: none;
}
.s3d__favourite-container {
position: relative;
}
.s3d__favourite-count {
font-size: 10px;
font-family: "Inter Display", sans-serif;
font-weight: 500;
font-style: normal;
line-height: 100%;
text-decoration: none;
text-transform: none;
position: absolute;
top: -10px;
right: -10px;
z-index: 10;
display: flex;
justify-content: center;
align-items: center;
height: 20px;
width: 20px;
background: var(--color-surface-semantic-success);
border-radius: 50%;
color: var(--text-gray-200);
}
.s3d__favourite-count[data-count="0"] {
display: none;
}
.s3d__favourite-count:not([data-count="0"]) {
background: var(--color-surface-semantic-success);
color: var(--text-gray-200);
}
.s3d__favourite-count:not([data-count="0"]) + .s3d__favourite {
border-color: var(--border-brand-900);
background-color: var(--color-surface-brand-800);
}
.s3d__favourite-count:not([data-count="0"]) + .s3d__favourite svg {
stroke: none;
fill: var(--icon-gray-200);
}
.s3d__favourite-count:not([data-count="0"]) + .s3d__favourite:hover {
background: var(--color-surface-brand-800);
}
.s3d__favourite-count:not([data-count="0"]) + .s3d__favourite:hover svg {
transition: all 0.3s linear;
}
.s3d__favourite-count:not([data-count="0"]) + .s3d__favourite:hover {
border-color: var(--border-brand-800);
background-color: var(--color-surface-brand-700);
}
.s3d__favourite svg {
height: var(--icon24);
width: var(--icon24);
stroke: none;
fill: var(--icon-gray-900);
transition: all 0.3s linear;
}
.s3d__favourite:hover {
border-color: var(--border-gray-600-transparent-88);
background-color: var(--color-surface-gray-400-transperent-88);
}
.s3d__favourite:hover svg {
transition: all 0.3s linear;
}
.s3d-favourite__pulse {
position: fixed;
cursor: pointer;
fill: var(--icon-gray-900);
stroke: var(--icon-gray-900);
transform-origin: center;
animation: s3dPulse 0.5s 0.5 ease-out;
z-index: 2000;
}
.s3d__title {
color: #000000;
font-size: var(--s3d-title);
font-family: "Inter Display", sans-serif;
font-weight: 400;
line-height: 130%;
height: var(--s3d-header);
text-align: center;
letter-spacing: -0.02em;
text-transform: uppercase;
left: 50%;
width: max-content;
transform: translateX(-50%);
display: flex;
align-items: center;
justify-content: center;
position: fixed;
z-index: 102;
}
.s3d__title.not-active {
display: none;
}
.mobile .s3d__favourite {
padding-top: calc(var(--space-2) - 1px);
padding-bottom: calc(var(--space-2) - 1px);
}
.menu-wrap {
position: fixed;
top: 0;
right: 0;
z-index: 2000;
width: 100%;
max-width: 590px;
height: 100vh;
visibility: hidden;
opacity: 0;
background-color: var(--color-surface-gray-200);
display: flex;
align-items: center;
justify-content: center;
transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
padding: 80px;
}
@media screen and (max-width: 768px) {
.menu-wrap {
padding: var(--space-8);
}
}
.menu-wrap.active {
visibility: visible;
opacity: 1;
transition: visibility 0.3s ease-in-out;
animation: slide-in-right 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}
.menu-wrap.slide-out-right {
-webkit-animation: slide-out-right 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
animation: slide-out-right 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}
.menu-wrap-bg {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
height: 85%;
z-index: -1;
}
@media screen and (max-width: 1024px) {
.menu-wrap .smarto_logo {
bottom: -3px;
top: auto;
}
}
.menu-header {
position: fixed;
right: 0;
top: 0;
width: 100%;
max-width: 590px;
height: var(--s3d-header);
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 var(--offset);
z-index: 4;
}
.menu-header-title {
display: none;
}
.menu-header-close {
pointer-events: painted;
cursor: pointer;
height: var(--btn);
width: var(--btn);
position: relative;
transition: background 0.4s ease-in-out;
position: absolute;
right: var(--space-10);
top: var(--space-10);
z-index: 3;
}
@media screen and (max-width: 768px) {
.menu-header-close {
right: var(--space-2);
top: var(--space-2);
}
}
.menu-header-close-elem-wrapper {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
}
.menu-header-close-elem-wrapper span {
width: 13px;
height: 1.5px;
border: 2px;
background: var(--icon-gray-900);
transform: rotate(45deg);
}
.menu-header-close-elem-wrapper span:last-child {
transform: rotate(-45deg);
margin-top: -1.5px;
}
@media (hover: hover) {
.menu-header-close {
transform-origin: center;
transition: 0.25s ease-in-out;
}
.menu-header-close:hover {
transform: rotate(180deg);
}
}
.menu-nav {
height: 100%;
width: 100%;
display: flex;
align-items: flex-start;
justify-content: flex-start;
flex-direction: column;
gap: 60px;
overflow-y: auto;
}
.menu-nav li {
width: auto;
}
.menu-nav li a {
transition: color 0.3s ease-in-out;
}
.menu-nav-wrap {
overflow: hidden;
height: 100%;
width: 100%;
display: flex;
align-items: flex-start;
justify-content: flex-start;
}
.menu-nav-link {
font-family: "Inter Display";
font-size: 48px;
font-style: normal;
font-weight: 300;
line-height: 120%; text-transform: uppercase;
text-transform: uppercase;
color: var(--text-gray-800);
}
.menu-nav-link a {
text-decoration: none;
color: var(--text-gray-800);
}
@media (hover: hover) {
.menu-nav-link a {
position: relative;
overflow: hidden;
display: block;
}
.menu-nav-link a span {
display: block;
transition: transform 0.3s ease-in-out;
}
.menu-nav-link a:after {
content: attr(data-title);
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
color: var(--text-gray-900);
transition: transform 0.3s ease-in-out;
transform: translate3d(0, -100%, 0);
}
.menu-nav-link a:hover span {
transform: translate3d(0, 100%, 0);
}
.menu-nav-link a:hover:after {
transform: translate3d(0, 0, 0);
}
}
@media screen and (min-width: 1023px) {
.menu-nav-link a:hover {
color: var(--text-gray-900);
transition: color 0.3s ease-in-out;
}
}
@media screen and (max-width: 768px) {
.menu-nav-link {
font-family: "Inter Display";
font-size: 36px;
font-style: normal;
font-weight: 300;
line-height: 120%; text-transform: uppercase;
}
}
.menu-nav-link2 {
font-size: 20px;
font-family: "Inter Display", sans-serif;
font-weight: 400;
font-style: normal;
line-height: 130%;
text-decoration: none;
text-transform: none;
text-align: center;
text-decoration: none;
text-transform: uppercase;
}
@media screen and (max-width: 768px) {
.menu-nav-link2 {
font-size: 14px;
line-height: 140%;
}
}
.menu-nav-link2 a {
text-decoration: none;
color: var(--text-gray-700);
}
@media screen and (min-width: 1023px) {
.menu-nav-link2 a:hover {
color: var(--text-gray-900);
transition: color 0.3s ease-in-out;
}
}
.menu-nav-link2-wrap {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
gap: var(--space-1);
margin-top: var(--space-20);
}
@media screen and (max-width: 768px) {
.menu-nav-link2-wrap {
margin-top: var(--space-8);
}
}
@keyframes slide-in-right {
0% {
-webkit-transform: translateX(100%);
transform: translateX(100%);
opacity: 0;
}
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
opacity: 1;
}
}
@keyframes slide-out-right {
0% {
-webkit-transform: translateX(0);
transform: translateX(0);
opacity: 1;
}
100% {
-webkit-transform: translateX(100%);
transform: translateX(100%);
opacity: 0;
}
}
[data-demo_view] .s3d-ctr__nav,
[data-demo_view] .s3d__compass,
[data-demo_view] .s3d-ctr__helper,
[data-demo_view] .s3d__svg-container,
[data-demo_view] polygon,
[data-demo_view] header {
pointer-events: none !important;
opacity: 0 !important;
}
.form-layout {
position: fixed;
left: 0;
top: 0;
width: 100vw;
height: 100vh;
z-index: 1001;
background: var(--bg-overlay);
display: flex;
align-items: center;
justify-content: center;
transition: visibility 0.3s ease-in-out, opacity 0.3s ease-in-out;
visibility: hidden;
opacity: 0;
}
@media screen and (max-width: 600px) {
.form-layout {
height: calc(var(--vh, 1vh) * 100);
background-color: var(--surface-gray-900-transperent-40);
}
}
.form-layout .form-overflow {
width: 100%;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
gap: var(--space-6);
max-height: 50vh;
overflow-y: auto;
}
.form-layout .ButtonWithoutIcon {
width: 100%;
cursor: pointer;
padding: calc(-1px + var(--space-4)) var(--space-4);
}
.form-layout .form {
position: relative;
background-color: var(--color-surface-gray-200);
padding: var(--space-8);
}
.form-layout .form--popup {
display: flex;
gap: var(--space-20);
padding: var(--space-12);
max-width: 920px;
overflow: hidden;
}
@media screen and (max-width: 768px) {
.form-layout .form--popup {
width: calc(100% - var(--space-3) * 2);
flex-direction: column;
gap: var(--space-5);
}
}
.form-layout .form--popup__img {
position: absolute;
left: 0;
bottom: 0;
width: 33.33%;
transform: translate(-10%, 10%);
height: auto;
}
@media screen and (max-width: 768px) {
.form-layout .form--popup__img {
display: none;
}
}
@media screen and (min-width: 769px) {
.form-layout .form--popup__intro {
width: 39.93%;
}
}
.form-layout .form--popup__title {
font-size: 32px;
font-family: "Inter Display", sans-serif;
font-weight: 300;
font-style: normal;
line-height: 130%;
letter-spacing: -1px;
text-decoration: none;
text-transform: none;
color: var(--text-gray-900);
text-align: left;
margin-bottom: var(--space-6);
}
@media screen and (max-width: 768px) {
.form-layout .form--popup__title {
font-family: "Inter Display";
font-size: 24px;
font-style: normal;
font-weight: 300;
line-height: 120%; text-align: center;
}
}
.form-layout .form--popup__description {
font-size: 13px;
font-family: "Inter Display", sans-serif;
font-weight: 400;
font-style: normal;
line-height: 140%;
text-decoration: none;
text-transform: none;
color: var(--text-gray-800);
text-align: left;
margin-bottom: var(--space-3);
}
@media screen and (min-width: 769px) {
.form-layout .form--popup form {
width: 50%;
}
}
.form-layout .form__title {
font-size: 32px;
font-family: "Inter Display", sans-serif;
font-weight: 300;
font-style: normal;
line-height: 130%;
letter-spacing: -1px;
text-decoration: none;
text-transform: none;
color: var(--text-gray-800);
text-align: left;
margin-bottom: var(--space-3);
}
.form-layout .form form {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--space-6);
}
.form-layout .form form .form-field {
width: 100%;
position: relative;
}
.form-layout .form form .form-field-input__title {
color: var(--text-gray-900);
font-family: "Inter Display";
font-size: 13px;
font-style: normal;
font-weight: 400;
line-height: 130%;
margin-bottom: var(--space-2);
}
.form-layout .form form .form-field input {
width: 100%;
background-color: var(--color-surface-gray-200);
color: var(--text-gray-900);
border-radius: 0;
}
.form-layout .form form .form-field input::placeholder {
color: var(--text-gray-600);
}
.form-layout .form form .form-field input:focus {
background-color: var(--color-gray-100);
}
.form-layout .form form .form-field .Textarea {
border-radius: 0;
background-color: var(--color-surface-gray-200);
}
.form-layout .form form .form-field .Textarea:focus {
background-color: var(--color-gray-100);
}
.form-layout .form form .form-field .input-message {
font-size: 12px;
font-family: "Inter Display", sans-serif;
font-weight: 500;
font-style: normal;
line-height: 100%;
text-decoration: none;
text-transform: none;
color: var(--text-gray-900);
position: absolute;
left: 0;
bottom: -15px;
}
.form-layout .form form .form-field[data-status=field--error] .input-message {
color: var(--text-danger);
}
.form-layout .form form .submit-wrapper {
display: flex;
justify-content: center;
align-self: flex-start;
min-width: 170px;
}
.form-layout .form form .ButtonWithoutIcon,
.form-layout .form form .form__submit {
align-self: flex-start;
width: fit-content;
border-radius: var(--border-space-32);
padding: var(--space-5) var(--space-8);
gap: var(--space-3);
cursor: pointer;
}
@media screen and (max-width: 1920px) {
.form-layout .form form .ButtonWithoutIcon,
.form-layout .form form .form__submit {
padding: var(--space-5) var(--space-8);
}
}
@media screen and (max-width: 768px) {
.form-layout .form form .ButtonWithoutIcon,
.form-layout .form form .form__submit {
padding: var(--space-3) var(--space-8);
}
}
.form-layout .form form .ButtonWithoutIcon span,
.form-layout .form form .form__submit span {
text-transform: uppercase;
}
@media screen and (max-width: 1366px) {
.form-layout .form form .ButtonWithoutIcon span,
.form-layout .form form .form__submit span {
font-size: 11px;
}
}
.form-layout .form-layout-close {
position: absolute;
right: var(--space-5);
top: var(--space-5);
width: 24px;
height: 24px;
border-radius: 50%;
border: none;
cursor: pointer;
transition: 0.3s ease-in-out;
}
@media screen and (min-width: 1023px) {
.form-layout .form-layout-close:hover {
transform: rotate(90deg);
}
}
.mobile.landscape .form-layout {
--size-btn-circle: 24px;
}
.mobile.landscape .form-layout .form__title {
font-size: 18px;
text-align: left;
}
.mobile.landscape .form-layout .form-layout-close {
right: 10px;
top: 10px;
left: auto;
}
.mobile.landscape .form-layout .form {
padding: 20px;
height: 100%;
width: 80%;
overflow-y: auto;
overflow-x: hidden;
padding-bottom: 50px;
}
.mobile.landscape .form-layout .form form {
justify-content: flex-start;
}
.mobile.landscape .form-layout .form form .form-field input {
padding: 10px;
font-size: 12px;
}
.mobile .form-layout-close {
right: var(--space-2);
top: var(--space-2);
}
.mobile .form-layout .form {
padding: var(--space-8) var(--space-6);
gap: var(--space-6);
}
.mobile .form-layout .form .form-overflow {
max-height: 60vh;
overflow-y: auto;
gap: var(--space-4);
justify-content: flex-start;
}
.mobile .form-layout .form--popup__title {
margin-bottom: var(--space-3);
}
.mobile .form-layout .form--popup__description {
margin-bottom: 0;
text-align: center;
font-family: "Inter Display";
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 140%; }
.mobile .form-layout .form form {
gap: var(--space-6);
}
.mobile .form-layout .form__title {
font-size: 20px;
font-family: "Inter Display", sans-serif;
font-weight: 700;
font-style: normal;
line-height: 130%;
text-decoration: none;
text-transform: none;
} .form-progress-button {
position: relative;
display: inline-block;
text-align: center;
cursor: pointer;
}
@media screen and (max-width: 768px) {
.form-progress-button {
transform: scale(0.75);
transform-origin: top left;
margin-bottom: -7px;
}
} .form-progress-button button {
display: block;
margin: 0 auto;
padding: 0;
height: 70px;
text-transform: uppercase;
border: 1px solid var(--color-brand-800);
border-radius: 40px;
background: var(--color-brand-800);
color: var(--text-gray-200);
padding: var(--space-6) var(--space-8);
font-family: "Inter Display";
font-size: 13px;
font-style: normal;
font-weight: 400;
line-height: 130%; -webkit-tap-highlight-color: transparent;
-webkit-transition: background-color 0.3s, color 0.3s, width 0.3s, border-width 0.3s, border-color 0.3s;
transition: background-color 0.3s, color 0.3s, width 0.3s, border-width 0.3s, border-color 0.3s;
cursor: pointer;
}
.form-progress-button button:hover {
border-color: var(--border-brand-800);
background-color: var(--color-surface-brand-700);
}
.form-progress-button button:focus {
outline: none;
} .form-progress-button button span {
-webkit-transition: opacity 0.3s 0.1s;
transition: opacity 0.3s 0.1s;
} .form-progress-button svg {
position: absolute;
top: 0;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
pointer-events: none;
}
.form-progress-button svg path {
opacity: 0;
fill: none;
}
.form-progress-button svg.form-progress-circle path {
stroke: var(--color-brand-800);
stroke-width: 5;
}
.form-progress-button svg.checkmark path,
.form-progress-button svg.cross path {
stroke: var(--color-surface-gray-300);
stroke-linecap: round;
stroke-width: 4;
-webkit-transition: opacity 0.1s;
transition: opacity 0.1s;
} .loading.form-progress-button button {
width: 70px; border-width: 5px;
border-color: var(--color-surface-gray-300);
background-color: transparent;
color: #fff;
}
.loading.form-progress-button span {
-webkit-transition: opacity 0.15s;
transition: opacity 0.15s;
}
.loading.form-progress-button span,
.success.form-progress-button span,
.error.form-progress-button span {
opacity: 0; }
.success.form-progress-button button,
.error.form-progress-button button {
-webkit-transition: background-color 0.3s, width 0.3s, border-width 0.3s;
transition: background-color 0.3s, width 0.3s, border-width 0.3s;
}
.success.form-progress-button button {
border-color: var(--color-brand-800);
background-color: var(--color-brand-800);
}
.error.form-progress-button button {
border-color: var(--color-semantic-danger);
background-color: var(--color-semantic-danger);
}
.loading.form-progress-button svg.form-progress-circle path {
stroke-dasharray: 204.2437133789;
stroke-dashoffset: 204.2437133789;
-webkit-animation: strokeanim 2s linear infinite;
animation: strokeanim 2s ease-in-out infinite;
animation-direction: alternate;
transform-origin: center;
transform-box: fill-box;
}
.loading.form-progress-button svg.form-progress-circle path,
.success.form-progress-button svg.checkmark path,
.error.form-progress-button svg.cross path {
opacity: 1;
-webkit-transition: stroke-dashoffset 0.3s;
transition: stroke-dashoffset 0.3s;
} .elastic.form-progress-button button {
-webkit-transition: background-color 0.3s, color 0.3s, width 0.3s cubic-bezier(0.25, 0.25, 0.4, 1), border-width 0.3s, border-color 0.3s;
-webkit-transition: background-color 0.3s, color 0.3s, width 0.3s cubic-bezier(0.25, 0.25, 0.4, 1.6), border-width 0.3s, border-color 0.3s;
transition: background-color 0.3s, color 0.3s, width 0.3s cubic-bezier(0.25, 0.25, 0.4, 1.6), border-width 0.3s, border-color 0.3s;
}
.loading.elastic.form-progress-button button {
-webkit-transition: background-color 0.3s, color 0.3s, width 0.3s cubic-bezier(0.6, 0, 0.75, 0.75), border-width 0.3s, border-color 0.3s;
-webkit-transition: background-color 0.3s, color 0.3s, width 0.3s cubic-bezier(0.6, -0.6, 0.75, 0.75), border-width 0.3s, border-color 0.3s;
transition: background-color 0.3s, color 0.3s, width 0.3s cubic-bezier(0.6, -0.6, 0.75, 0.75), border-width 0.3s, border-color 0.3s;
}
@keyframes strokeanim {
50% {
transform: rotate(360deg);
}
to {
stroke-dashoffset: 0;
transform: rotate(0deg);
}
}
.vr-popup {
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 100%;
height: 100%;
padding: 20px;
background-color: var(--bg-overlay);
z-index: 1000;
display: flex;
align-items: center;
justify-content: center;
animation: fadeInPopup 0.3s ease-in-out;
}
.vr-popup__content {
width: 100%;
height: 100%;
position: relative;
border-radius: var(--border-space-2);
overflow: hidden;
}
.vr-popup__content img {
width: 100%;
height: 100%;
object-fit: contain;
margin: auto;
}
.vr-popup__content iframe {
width: 100%;
height: 100%;
}
.vr-popup__text-wrapper {
display: none;
position: absolute;
left: 1px;
top: 1px;
background-color: var(--color-200-trancperent-88);
border-radius: var(--border-space-2);
padding: var(--space-4);
max-width: 290px;
}
.vr-popup__text-wrapper:empty {
display: none;
}
.vr-popup__title {
color: var(--text-gray-900);
font-size: 20px;
font-family: "Inter Display", sans-serif;
font-weight: 400;
font-style: normal;
line-height: 130%;
text-decoration: none;
text-transform: none;
}
.vr-popup__text {
color: var(--text-gray-800);
margin-top: var(--space-5);
font-size: 13px;
font-family: "Inter Display", sans-serif;
font-weight: 400;
font-style: normal;
line-height: 140%;
text-decoration: none;
text-transform: none;
}
.vr-popup__close {
position: absolute;
z-index: 201;
right: 30px;
top: 30px;
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
padding: 0;
border-radius: var(--border-space-2);
background-color: var(--color-surface-gray-200);
border: 1px solid var(--border-gray-600-transparent-40);
cursor: pointer;
}
.vr-popup__close svg {
width: 24px;
height: 24px;
transition: 0.3s ease-in-out;
transform-origin: center;
transform-box: fill-box;
fill: var(--icon-gray-900);
}
@media screen and (min-width: 1023px) {
.vr-popup__close svg:hover {
transform: rotate(90deg);
}
}
.mobile .vr-popup__content {
padding: 0;
}
.slider-popup {
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: min(100vw, 1200px);
height: 80%;
background-color: #e0c7aa;
border-radius: 6px;
z-index: 56;
display: flex;
align-items: center;
justify-content: center;
animation: fadeInPopup 0.3s ease-in-out;
}
.slider-popup__navigation {
position: absolute;
width: max-content;
left: 50%;
bottom: 0;
transform: translateY(-50%) translateX(-50%);
display: flex;
justify-content: space-between;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
z-index: 4;
}
.slider-popup .swiper-container {
overflow: hidden;
width: 100%;
flex-grow: 1;
}
.slider-popup .swiper-container .swiper-slide {
display: flex;
align-items: center;
justify-content: center;
}
.slider-popup .swiper-container .swiper-slide img {
width: 100%;
height: 100%;
object-fit: contain;
}
.slider-popup__title {
color: #f4f8fd;
font-weight: 400;
font-size: 14px;
line-height: 130%;
text-align: center;
letter-spacing: -0.02em;
text-transform: uppercase;
height: 40px;
display: flex;
justify-content: center;
align-items: center;
}
.slider-popup__content {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
padding-left: 12px;
padding-right: 12px;
padding-bottom: 12px;
}
.slider-popup__content iframe {
width: 100%;
height: 100%;
}
.slider-popup__close {
position: absolute;
right: 12px;
top: 12px;
width: 16px;
height: 16px;
cursor: pointer;
z-index: 4;
}
.slider-popup__close circle {
fill: #000000;
transition: 0.3s ease-in-out;
}
.slider-popup__close path {
stroke: #f4f8fd;
transition: 0.3s ease-in-out;
}
@media screen and (min-width: 1023px) {
.slider-popup__close:hover circle {
fill: #e0c7aa;
}
.slider-popup__close:hover path {
stroke: #f4f8fd;
}
}
.flat-gallery-popup {
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
z-index: 103;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.95);
display: flex;
align-items: center;
justify-content: center;
animation: fadeInPopup 0.4s ease-in-out;
--offset: 20px;
}
@media screen and (max-width: 1024px) {
.flat-gallery-popup {
--offset: 10px;
}
}
.flat-gallery-popup__content {
width: calc(100% - var(--offset) * 2);
height: calc(100% - var(--offset) * 2);
display: flex;
align-items: center;
justify-content: center;
background-color: #f4f8fd;
position: relative;
}
.flat-gallery-popup__content iframe {
width: 100%;
height: 100%;
}
.flat-gallery-popup__content .flat-gallery-popup__buttons {
position: absolute;
left: 0;
top: 50%;
width: 100%;
transform: translateY(-50%);
display: flex;
align-items: center;
justify-content: space-between;
padding-left: var(--offset);
padding-right: var(--offset);
z-index: 2;
}
.flat-gallery-popup__content .flat-gallery-popup__buttons .flat-gallery-popup__button {
display: flex;
align-items: center;
justify-content: center;
width: var(--size-btn-circle);
height: var(--size-btn-circle);
border-radius: 50%;
border: 1px solid #000000;
background-color: transparent;
overflow: hidden;
padding: 0;
transition: background-color 0.3s ease-in, border 0.3s ease-in-out;
cursor: pointer;
}
.flat-gallery-popup__content .flat-gallery-popup__buttons .flat-gallery-popup__button svg {
display: flex;
height: auto;
width: 30%;
stroke: #000000;
transition: stroke 0.3s ease-in;
}
@media screen and (min-width: 1023px) {
.flat-gallery-popup__content .flat-gallery-popup__buttons .flat-gallery-popup__button:hover {
border: 1px solid #e3c29b;
background-color: #e3c29b;
}
.flat-gallery-popup__content .flat-gallery-popup__buttons .flat-gallery-popup__button:hover svg {
stroke: #000000;
}
}
.flat-gallery-popup__content .flat-gallery-popup__buttons .flat-gallery-popup__button.flat-gallery-popup__button-right {
transform: rotate(180deg);
}
.flat-gallery-popup__content .flat-gallery-popup__buttons .flat-gallery-popup__button[disabled] {
opacity: 0.5;
pointer-events: none;
}
.flat-gallery-popup__content .swiper-container {
width: 85%;
height: 85%;
overflow: hidden;
}
@media screen and (max-width: 680px) {
.flat-gallery-popup__content .swiper-container {
width: 80%;
}
}
.flat-gallery-popup__content .swiper-container .swiper-slide {
object-fit: contain;
}
.flat-gallery-popup__close {
position: absolute;
right: calc(var(--offset) * 2);
top: calc(var(--offset) * 2);
width: var(--size-btn-circle);
height: var(--size-btn-circle);
cursor: pointer;
transition: 0.3s ease-out;
}
.flat-gallery-popup__close circle {
fill: #e0c7aa;
transition: 0.3s ease-in-out;
}
.flat-gallery-popup__close path {
stroke: #000000;
transition: 0.3s ease-in-out;
}
@media screen and (min-width: 1023px) {
.flat-gallery-popup__close:hover circle {
fill: #e3c29b;
}
.flat-gallery-popup__close:hover path {
stroke: #000000;
}
}
.mobile.landscape .s3d-card {
min-height: auto;
}
.mobile.landscape .s3d-card .s3d-card__info-wrapper {
padding: 12px;
}
.mobile.landscape .s3d-card .s3d-card__info-wrapper .s3d-card__title {
--font20: 14px ;
}
.mobile.landscape .s3d-card .s3d-card__image {
height: 30vh;
min-height: 30vh;
}
.mobile.landscape .s3d-floor .s3d-floor__info {
--controller-w: 100%;
padding-bottom: var(--menu-h);
}
.mobile.landscape .s3d__wrapper__flat {
height: 100%;
}
.mobile.landscape .s3d-flat {
height: 100%;
grid-template-rows: var(--s3d-header) 70vh min-content min-content calc(var(--menu-h));
grid-template-areas: ". ." "img img" "info info" "floorInfo floorInfo" "flat-menu flat-menu";
}
.mobile.landscape .s3d-flat .s3d-flat__menu-container {
justify-content: flex-start;
padding-left: var(--offset);
padding-bottom: var(--offset);
}
.mobile.landscape .s3d-flat .s3d-flat__menu-container, .mobile.landscape .s3d-flat__menu {
--menu-h: 40px;
background-color: transparent;
border: none;
}
.mobile.landscape .s3d-flat__info-container {
width: 100%;
}
.mobile.landscape .s3d-flat .s3d-flat__floor {
padding-bottom: calc(var(--menu-h) + 40px);
}
.mobile.landscape .s3d-ctr__option__buttons--floors {
column-count: 2;
}
.mobile.landscape .s3d-ctr__menu-3d {
padding-top: 4px;
padding-bottom: 4px;
}
.mobile.landscape .s3d-ctr__nav .s3d-nav__btn span {
background: white;
height: 149%;
width: auto;
display: flex;
align-items: center;
padding-right: 4px;
}
.mobile.landscape .s3d-ctr__menu-3d {
background: none;
}
.mobile.landscape .s3d-ctr__menu-3d .s3d-ctr__menu-3d-compass-nav {
transform-origin: center;
transform: scale(0.85);
background-color: #fff;
border-radius: 12px;
}
.mobile.landscape .s3d-pl__amount-flat {
display: none;
}
.mobile.landscape .s3d-fv__container .s3d-fv__list,
.mobile.landscape .s3d-fv__container .s3d-pl__list,
.mobile.landscape .s3d-pl__container .s3d-fv__list,
.mobile.landscape .s3d-pl__container .s3d-pl__list {
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
height: 100%;
margin-top: 0;
overscroll-behavior: none;
}
.mobile.landscape [data-type=flyby] .s3d-filter-wrap {
--filter-width: 65%;
}
.mobile.landscape [data-type=flyby] .s3d-filter-wrap .s3d-filter__top {
height: 100% !important;
}
.mobile.landscape [data-type=flyby] .s3d-filter-wrap .s3d-filter__top .s3d-filter {
overflow-y: auto;
height: 70vh;
justify-content: space-between;
}
.mobile.landscape [data-type=flyby] .s3d-filter-wrap .s3d-filter__hide,
.mobile.landscape [data-type=flyby] .s3d-filter-wrap .s3d-filter__table {
display: none;
}
.mobile.landscape [data-type=plannings] .s3d-filter-wrap .s3d-filter__top .s3d-filter__input-wrapper {
transform: scale(0.85);
transform-origin: left;
bottom: calc(100% + 5px);
}
.mobile.landscape [data-type=plannings] .s3d-filter-wrap .s3d-filter__top .s3d-filter__input-wrapper .s3d-filter__param-title {
display: none;
}
.mobile.landscape [data-type=plannings] .s3d-filter__top {
height: auto !important;
}
.mobile.landscape [data-type=plannings] .s3d-filter__top .s3d-filter__reset {
position: sticky;
top: 0;
}
.mobile.landscape [data-type=plannings] .s3d-filter-wrap.s3d-planning-filter-wrap {
padding-top: 5px;
}
.mobile.landscape [data-type=plannings] .s3d-filter {
align-items: flex-start;
gap: 20px;
}
.mobile.landscape .s3d-filter-wrap.active-filter {
visibility: visible !important;
}
.mobile.landscape .s3d-filter__top .s3d-filter__range-wrapper .s3d-filter__range {
--filter-margin-bottom: 0;
}
.mobile.landscape .s3d-ctr[data-type=plannings] ~ .s3d-filter-wrap {
--menu-h: 60px;
overflow: auto;
overscroll-behavior: none;
}
.mobile.landscape .s3d-filter__top .s3d-filter .s3d-filter__row .s3d-filter__reset {
margin-top: 0;
}
.mobile.landscape .s3d-header .s3d__menu[data-s3d-share] {
margin-left: auto;
}
.mobile.landscape .s3d-infoBox__flat {
flex-direction: column;
}
.s3dFlybySideChooser {
position: relative;
pointer-events: all;
z-index: 4;
border-radius: var(--border-space-2);
border: none;
display: flex;
align-items: center;
width: 100%;
background-color: var(--color-surface-gray-400);
}
.s3dFlybySideChooser:empty {
display: none;
}
.s3dFlybySideChooser > * {
width: 50%;
}
.s3dFlybySideChooser__title {
display: flex;
height: var(--item-h);
padding: 10px 16px;
align-items: center;
justify-content: center;
gap: 8px;
border: 1px solid var(--border-brand-900);
background: var(--color-surface-brand-800);
border-radius: var(--border-space-2);
color: var(--text-gray-200);
cursor: pointer;
}
.s3dFlybySideChooser__item {
height: var(--item-h);
background: #f4f8fd;
padding: 12px 16px;
cursor: pointer;
border: 1px solid #c0d1e1;
border-radius: var(--border-space-2);
display: flex;
align-items: center;
justify-content: flex-start;
}
.s3dFlybySideChooser__item:hover {
background: var(--3-d-colours-gray, #828282);
color: #d9d9d9;
}
.s3dFlybySideChooser:hover .s3dFlybySideChooser__title::after {
transform: rotate(180deg);
}
.s3dFlybySideChooser:hover .s3dFlybySideChooser__content {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
.mobile .s3dFlybySideChooser {
width: 120px;
}
.mobile .s3dFlybySideChooser__item {
padding: 6px 8px;
}
.mobile .s3dFlybySideChooser__title {
padding: 6px 8px;
}
.mobile.portrait .s3d-ctr__menu-3d {
display: flex;
}
.mobile.portrait .s3d-ctr__menu-3d-compass-nav {
justify-content: space-between;
}
.mobile.portrait .s3d-ctr__menu-3d__compass-wrapper {
display: none;
}
.mobile.portrait .s3d-ctr__menu-3d-compass-nav {
position: fixed;
top: 50%;
width: 100%;
background-color: transparent;
}
.mobile.portrait .s3d-ctr__menu-3d-buttons {
width: 100%;
justify-content: flex-start;
overflow: visible;
}
.mobile.portrait .s3d-ctr__menu-3d-buttons > * {
flex-shrink: 0;
}
.mobile.portrait .s3d-ctr__menu-3d-buttons .s3d__choose--flat--button {
width: 65px;
overflow: hidden;
text-overflow: ellipsis;
}
.mobile.portrait .s3d-ctr__menu-3d-buttons .s3d__choose--flat--button span {
max-width: calc(100% - 8px);
overflow: hidden;
display: block;
text-overflow: ellipsis;
white-space: nowrap;
}
.checkbox-wrapper-6 {
pointer-events: all;
--width:40px;
--height: 24px ;
}
.checkbox-wrapper-6 .tgl {
display: none;
}
.checkbox-wrapper-6 .tgl,
.checkbox-wrapper-6 .tgl:after,
.checkbox-wrapper-6 .tgl:before,
.checkbox-wrapper-6 .tgl *,
.checkbox-wrapper-6 .tgl *:after,
.checkbox-wrapper-6 .tgl *:before,
.checkbox-wrapper-6 .tgl + .tgl-btn {
box-sizing: border-box;
}
.checkbox-wrapper-6 .tgl::-moz-selection,
.checkbox-wrapper-6 .tgl:after::-moz-selection,
.checkbox-wrapper-6 .tgl:before::-moz-selection,
.checkbox-wrapper-6 .tgl *::-moz-selection,
.checkbox-wrapper-6 .tgl *:after::-moz-selection,
.checkbox-wrapper-6 .tgl *:before::-moz-selection,
.checkbox-wrapper-6 .tgl + .tgl-btn::-moz-selection,
.checkbox-wrapper-6 .tgl::selection,
.checkbox-wrapper-6 .tgl:after::selection,
.checkbox-wrapper-6 .tgl:before::selection,
.checkbox-wrapper-6 .tgl *::selection,
.checkbox-wrapper-6 .tgl *:after::selection,
.checkbox-wrapper-6 .tgl *:before::selection,
.checkbox-wrapper-6 .tgl + .tgl-btn::selection {
background: none;
}
.checkbox-wrapper-6 .tgl + .tgl-btn {
outline: 0;
display: block;
width: var(--width);
height: var(--height);
position: relative;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
box-shadow: inset 0px 0px 2px rgba(32, 35, 38, 0.24);
}
.checkbox-wrapper-6 .tgl + .tgl-btn:after,
.checkbox-wrapper-6 .tgl + .tgl-btn:before {
position: relative;
display: block;
content: "";
width: calc(var(--width) / 2);
height: calc(var(--width) / 2);
box-shadow: 0px 1px 2px var(--shadow-gray-900-transparent-40);
}
.checkbox-wrapper-6 .tgl + .tgl-btn:after {
left: 0;
}
.checkbox-wrapper-6 .tgl + .tgl-btn:before {
display: none;
}
.checkbox-wrapper-6 .tgl:checked + .tgl-btn:after {
left: calc(50% - 2px);
}
.checkbox-wrapper-6 .tgl-light + .tgl-btn {
background: var(--surface-gray-700);
border-radius: 2em;
padding: 2px;
transition: all 0.4s ease;
}
.checkbox-wrapper-6 .tgl-light + .tgl-btn:after {
border-radius: 50%;
background: #fff;
transition: all 0.2s ease;
}
.checkbox-wrapper-6 .tgl-light:checked + .tgl-btn {
background: var(--color-surface-semantic-success);
}
.button-desktop-text-mobile-icon {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
padding: 12px 16px;
height: var(--btn);
width: fit-content;
border: 1px solid #c0d1e1;
border-radius: var(--border-space-2);
background: #f4f8fd;
font-family: "Inter Display", sans-serif;
font-weight: 400;
line-height: 130%;
font-size: var(--font14);
color: #000000;
pointer-events: painted;
transition: all 0.3s ease-in;
overflow: hidden;
cursor: pointer;
}
.button-desktop-text-mobile-icon [fill] {
fill: #000000;
}
.button-desktop-text-mobile-icon [stroke] {
stroke: #000000;
}
.desktop .button-desktop-text-mobile-icon svg {
display: none;
}
html:not(.desktop) .button-desktop-text-mobile-icon span {
display: none;
}