:root {
--color-black: #000;
--color-bg: #202020;
--text-dark: #1f2731;
--text-light: #eff1f7;
--text-light-secondary: rgba(239, 241, 247, 0.5);
--primary-main: #375ae6;
--surface-bg: #12141b;
--surface-footer-bg: #0d0e10;
--color-whatsapp: #25d366;
--color-telegram: #2aabee;
--color-botim: #021fe5;
--color-snapchat: #fffc00;
--color-wechat: #07c160;
--color-facebook: #0866FF;
--color-x: #000;
--color-linkedin: #0A66C2;
--color-instagram: radial-gradient(46.03% 63.89% at 96.77% 46.87%, #ff005f 0%, #fc01d8 100%), radial-gradient(84.69% 79.82% at 26.56% 107.7%, #fc0 0%, #fc0 12.42%, #fe4a05 56.72%, #ff0f3f 69.42%, rgba(254, 6, 87, 0) 100%), radial-gradient(42.97% 33.01% at 52.53% 98.59%, #fc0 0%, rgba(255, 204, 0, 0) 100%), radial-gradient(21.53% 63.19% at 13.57% 4.07%, #780cff 0%, rgba(130, 11, 255, 0) 100%);
--font-mullerNextWideTrial: MullerNextWideTrial, Tahoma, sans-serif;
--font-rf-dewi-ext: RFDewiExtended, Tahoma, sans-serif;
--font-nurma: nurma, Times New Roman, serif;
}
@font-face {
font-family: MullerNextWideTrial;
src: url(//veloralounge.com/wp-content/themes/velora-lounge/fonts/MullerNextWideTrial-Regular.eot);
src: url(//veloralounge.com/wp-content/themes/velora-lounge/fonts/MullerNextWideTrial-Regular.woff2) format('woff2'), url(//veloralounge.com/wp-content/themes/velora-lounge/fonts/MullerNextWideTrial-Regular.woff) format('woff'), url(//veloralounge.com/wp-content/themes/velora-lounge/fonts/MullerNextWideTrial-Regular.otf) format('otf'), url(//veloralounge.com/wp-content/themes/velora-lounge/fonts/MullerNextWideTrial-Regular.ttf) format('truetype'), url(//veloralounge.com/wp-content/themes/velora-lounge/fonts/MullerNextWideTrial-Regular.svg) format('svg');
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: MullerNextWideTrial;
src: url(//veloralounge.com/wp-content/themes/velora-lounge/fonts/MullerNextWideTrial-Heavy.eot);
src: url(//veloralounge.com/wp-content/themes/velora-lounge/fonts/MullerNextWideTrial-Heavy.woff2) format('woff2'), url(//veloralounge.com/wp-content/themes/velora-lounge/fonts/MullerNextWideTrial-Heavy.woff) format('woff'), url(//veloralounge.com/wp-content/themes/velora-lounge/fonts/MullerNextWideTrial-Heavy.otf) format('otf'), url(//veloralounge.com/wp-content/themes/velora-lounge/fonts/MullerNextWideTrial-Heavy.ttf) format('truetype'), url(//veloralounge.com/wp-content/themes/velora-lounge/fonts/MullerNextWideTrial-Heavy.svg) format('svg');
font-weight: 900;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: MullerNextWideTrial;
src: url(//veloralounge.com/wp-content/themes/velora-lounge/fonts/MullerNextWideTrial-ExtraBold.eot);
src: url(//veloralounge.com/wp-content/themes/velora-lounge/fonts/MullerNextWideTrial-ExtraBold.woff2) format('woff2'), url(//veloralounge.com/wp-content/themes/velora-lounge/fonts/MullerNextWideTrial-ExtraBold.woff) format('woff'), url(//veloralounge.com/wp-content/themes/velora-lounge/fonts/MullerNextWideTrial-ExtraBold.otf) format('otf'), url(//veloralounge.com/wp-content/themes/velora-lounge/fonts/MullerNextWideTrial-ExtraBold.ttf) format('truetype'), url(//veloralounge.com/wp-content/themes/velora-lounge/fonts/MullerNextWideTrial-ExtraBold.svg) format('svg');
font-weight: 750;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: RFDewiExtended;
src: url(//veloralounge.com/wp-content/themes/velora-lounge/fonts/RFDewiExtended-Ultrabold.eot);
src: url(//veloralounge.com/wp-content/themes/velora-lounge/fonts/RFDewiExtended-Ultrabold.woff2) format('woff2'), url(//veloralounge.com/wp-content/themes/velora-lounge/fonts/RFDewiExtended-Ultrabold.woff) format('woff'), url(//veloralounge.com/wp-content/themes/velora-lounge/fonts/RFDewiExtended-Ultrabold.otf) format('otf'), url(//veloralounge.com/wp-content/themes/velora-lounge/fonts/RFDewiExtended-Ultrabold.ttf) format('truetype'), url(//veloralounge.com/wp-content/themes/velora-lounge/fonts/RFDewiExtended-Ultrabold.svg) format('svg');
font-weight: 800;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: RFDewiExtended;
src: url(//veloralounge.com/wp-content/themes/velora-lounge/fonts/RFDewiExtended-Bold.eot);
src: url(//veloralounge.com/wp-content/themes/velora-lounge/fonts/RFDewiExtended-Bold.woff2) format('woff2'), url(//veloralounge.com/wp-content/themes/velora-lounge/fonts/RFDewiExtended-Bold.woff) format('woff'), url(//veloralounge.com/wp-content/themes/velora-lounge/fonts/RFDewiExtended-Bold.otf) format('otf'), url(//veloralounge.com/wp-content/themes/velora-lounge/fonts/RFDewiExtended-Bold.ttf) format('truetype'), url(//veloralounge.com/wp-content/themes/velora-lounge/fonts/RFDewiExtended-Bold.svg) format('svg');
font-weight: 700;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: RFDewiExtended;
src: url(//veloralounge.com/wp-content/themes/velora-lounge/fonts/RFDewiExtended-Semibold.eot);
src: url(//veloralounge.com/wp-content/themes/velora-lounge/fonts/RFDewiExtended-Semibold.woff2) format('woff2'), url(//veloralounge.com/wp-content/themes/velora-lounge/fonts/RFDewiExtended-Semibold.woff) format('woff'), url(//veloralounge.com/wp-content/themes/velora-lounge/fonts/RFDewiExtended-Semibold.otf) format('otf'), url(//veloralounge.com/wp-content/themes/velora-lounge/fonts/RFDewiExtended-Semibold.ttf) format('truetype'), url(//veloralounge.com/wp-content/themes/velora-lounge/fonts/RFDewiExtended-Semibold.svg) format('svg');
font-weight: 600;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: RFDewiExtended;
src: url(//veloralounge.com/wp-content/themes/velora-lounge/fonts/RFDewiExtended-Regular.eot);
src: url(//veloralounge.com/wp-content/themes/velora-lounge/fonts/RFDewiExtended-Regular.woff2) format('woff2'), url(//veloralounge.com/wp-content/themes/velora-lounge/fonts/RFDewiExtended-Regular.woff) format('woff'), url(//veloralounge.com/wp-content/themes/velora-lounge/fonts/RFDewiExtended-Regular.otf) format('otf'), url(//veloralounge.com/wp-content/themes/velora-lounge/fonts/RFDewiExtended-Regular.ttf) format('truetype'), url(//veloralounge.com/wp-content/themes/velora-lounge/fonts/RFDewiExtended-Regular.svg) format('svg');
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: nurma;
src: url(//veloralounge.com/wp-content/themes/velora-lounge/fonts/nurma-regular.eot);
src: url(//veloralounge.com/wp-content/themes/velora-lounge/fonts/nurma-regular.woff2) format('woff2'), url(//veloralounge.com/wp-content/themes/velora-lounge/fonts/nurma-regular.woff) format('woff'), url(//veloralounge.com/wp-content/themes/velora-lounge/fonts/nurma-regular.otf) format('otf'), url(//veloralounge.com/wp-content/themes/velora-lounge/fonts/nurma-regular.ttf) format('truetype'), url(//veloralounge.com/wp-content/themes/velora-lounge/fonts/nurma-regular.svg) format('svg');
font-weight: 400;
font-style: normal;
font-display: swap;
}
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: #212121;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
main {
display: block;
}
img,
svg {
width: 100%;
display: block;
height: auto;
-o-object-fit: cover;
object-fit: cover;
}
mark {
background: none;
color: inherit;
}
html {
scroll-behavior: smooth;
-webkit-text-size-adjust: 100%;
}
body {
font-family: var(--font-rf-dewi-ext);
line-height: 1.3;
font-weight: 400;
font-style: normal;
background: var(--surface-bg);
color: var(--text-light);
font-size: 3.89vw;
}
@media (min-width: 1250px), (min-width: 990px) and (orientation: landscape) {
body {
font-size: 0.83vw;
}
}
@media (min-width: 1250px), (min-width: 990px) and (orientation: landscape) {
body.overflow-hidden,
body.overflow-hidden .header {
padding-right: 17px;
}
}
* {
box-sizing: border-box;
max-height: 100000px;
}
a {
color: inherit;
outline: none;
text-decoration: none;
text-underline-offset: 0.2em;
-webkit-text-decoration-skip-ink: none;
text-decoration-skip-ink: none;
cursor: pointer;
}
button,
[role="button"] {
cursor: pointer;
}
strong {
font-weight: 700;
}
.main {
min-height: 80vh;
min-width: 360px;
}
.container {
position: relative;
z-index: 1;
padding: 0 4.44vw;
}
@media (min-width: 1250px), (min-width: 990px) and (orientation: landscape) {
.container {
max-width: 83.33vw;
padding: 0;
margin: 0 auto;
}
}
.text-center {
text-align: center;
}
.d-ib {
display: inline-block;
}
[hidden],
.hidden {
display: none !important;
}
.display-flex {
display: flex;
flex-wrap: wrap;
}
.justify-content-center {
justify-content: center;
}
.align-items-center {
align-items: center;
}
.align-self-center {
align-self: center;
}
.overflow-hidden {
overflow: hidden;
}
.position-relative {
position: relative;
}
.mobile-hidden {
display: none;
}
@media (min-width: 1250px), (min-width: 990px) and (orientation: landscape) {
.mobile-hidden {
display: block;
}
}
@media (min-width: 1250px), (min-width: 990px) and (orientation: landscape) {
.desktop-hidden {
display: none;
}
}
.svg-fill {
fill: currentColor;
}
.svg-stroke {
stroke: currentColor;
}
.logo {
width: 11.39vw;
}
@media (min-width: 1250px), (min-width: 990px) and (orientation: landscape) {
.logo {
width: 4.17vw;
transform: translate(0, -150%);
transition: 0.5s transform;
}
.logo.show {
transform: translate(0, 0%);
}
}
.burger {
display: block;
padding: 0;
border: 0;
background: rgba(68, 83, 102, 0.6);
backdrop-filter: blur(50px);
border-radius: 50%;
color: var(--text-light);
width: 11.1vw;
}
.burger svg {
display: block;
pointer-events: none;
}
.lang {
display: inline-flex;
background: rgba(68, 83, 102, 0.6);
backdrop-filter: blur(50px);
color: var(--text-light);
font-family: var(--font-rf-dewi-ext);
font-weight: 700;
gap: 2vw;
padding: 1vw;
border-radius: 10vw;
}
.lang__item {
display: flex;
align-items: center;
justify-content: center;
aspect-ratio: 1;
border-radius: 50%;
background: transparent;
transition: 0.3s color, 0.3s background;
width: 10vw;
}
.lang__item.active {
background: var(--text-light);
color: var(--text-dark);
}
.lang__item:hover {
background: rgba(239, 241, 247, 0.2);
}
@media (min-width: 1250px), (min-width: 990px) and (orientation: landscape) {
.lang {
font-size: 0.73vw;
gap: 0.3vw;
padding: 0.2vw;
border-radius: 2vw;
}
.lang__item {
width: 2.08vw;
}
}
.over {
position: relative;
z-index: 3;
border-radius: 10vw 10vw 0 0;
background: var(--surface-bg);
color: var(--text-light);
margin-top: -100vh;
min-height: 100vh;
overflow: hidden;
}
@media (min-width: 1250px), (min-width: 990px) and (orientation: landscape) {
.over {
border-radius: 5.2vw 5.2vw 0 0;
}
}
.header {
position: fixed;
z-index: 100;
top: 0;
left: 0;
width: 100%;
}
.header__row {
padding: 4.4vw 0;
display: flex;
align-items: center;
justify-content: space-between;
}
.header__lang,
.header__nav,
.header__contacts > i,
.header__drop {
display: none;
}
.header__logo {
display: block;
}
.header__contacts {
display: flex;
align-items: center;
margin: 0 0.5vw 0 0;
background: rgba(68, 83, 102, 0.6);
backdrop-filter: blur(50px);
color: var(--text-light);
border-radius: 6vw;
height: 11.1vw;
padding: 0.5em 1em;
}
.header__contacts > a {
display: flex;
align-items: center;
font-weight: 700;
font-size: 3.89vw;
font-family: var(--font-rf-dewi-ext);
}
.header__btns {
margin: 0 0.5vw 0 auto;
}
@media (min-width: 1250px), (min-width: 990px) and (orientation: landscape) {
.header.header_page .logo {
transform: translate(0, 0);
}
.header__row {
padding: 0.2vw 0;
}
.header__toggle {
display: none;
}
.header__btns {
margin: 0;
}
.header__contacts {
margin: 0 0 0 0.3vw;
gap: 0.2vw;
padding: 0.2vw 0.5vw 0.2vw 0.2vw;
height: 2.5vw;
transition: 0.3s background;
}
.header__contacts:hover {
background: rgba(98, 113, 132, 0.4);
}
.header__contacts > a {
font-size: 0.83vw;
text-decoration-line: underline;
text-decoration-color: transparent;
transition: 0.3s text-decoration-color;
}
.header__contacts > a:hover {
text-decoration-color: currentColor;
}
.header__contacts > i {
display: block;
background: var(--text-light);
width: 2.08vw;
border-radius: 50%;
color: var(--text-dark);
margin-right: 0.5vw;
}
.header__drop {
display: block;
width: 1.25vw;
color: var(--text-light);
}
.header__lang,
.header__nav {
display: block;
}
.header__nav {
margin: 0 0 0 0.43vw;
}
.header__logo {
display: block;
margin: 0 auto;
position: relative;
}
.header__menu {
display: flex;
align-items: center;
gap: 1em;
padding: 0.4vw 1.7vw 0.3vw;
height: 2.5vw;
border-radius: 1.25vw;
background: rgba(68, 83, 102, 0.6);
backdrop-filter: blur(50px);
color: var(--text-light);
transition: 0.3s background;
}
.header__menu:hover {
background: rgba(98, 113, 132, 0.4);
}
.header__menu li:not(:last-child)::after {
content: '';
display: inline-block;
margin-left: 1.1em;
vertical-align: middle;
height: 1vw;
width: 0.1vw;
background: currentColor;
opacity: 0.5;
position: relative;
top: -0.1em;
}
.header__menu li a:hover {
font-weight: 700;
letter-spacing: -0.025em;
}
.header dialog {
top: 100%;
left: auto;
right: 0;
margin-top: 0.63vw;
padding: 0;
border: 0;
background: radial-gradient(129.53% 156.66% at 57.82% -27.76%, rgba(18, 20, 27, 0.6) 0%, rgba(68, 83, 102, 0.6) 59.89%, #445366 100%);
border-radius: 1.04vw;
}
.header__popup {
padding: 1.06vw 1.24vw;
border-radius: 1.04vw;
width: 12.7vw;
color: #fff;
border: 0;
}
.header__popup::after {
content: '';
display: block;
position: absolute;
z-index: 0;
inset: 0;
backdrop-filter: blur(43px);
background: radial-gradient(129.53% 156.66% at 57.82% -27.76%, rgba(18, 20, 27, 0.6) 0%, rgba(68, 83, 102, 0.6) 59.89%, #445366 100%);
border-radius: 1.04vw;
}
.header__popup-head {
display: flex;
align-items: center;
gap: 2vw;
position: relative;
z-index: 1;
}
.header__popup-title {
display: block;
flex: 1;
letter-spacing: -0.02em;
font-weight: 600;
opacity: 0.5;
font-size: 0.53vw;
}
.header__popup-close {
flex: 0 0 1.1vw;
opacity: 0.5;
transition: 0.3s opacity;
}
.header__popup-close:hover {
opacity: 1;
}
.header__popup-list {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
gap: 0.8vw;
margin-top: 0.73vw;
}
.header__popup-list li a {
display: flex;
align-items: center;
gap: 0.63vw;
text-decoration-line: underline;
text-decoration-color: currentColor;
transition: 0.3s text-decoration-color;
font-size: 0.89vw;
font-weight: 600;
}
.header__popup-list li a:hover {
text-decoration-color: transparent;
}
.header__popup-list li a i {
display: block;
flex: 0 0 1.25vw;
transition: 0.3s color;
}
.header__popup-list li a:hover {
text-decoration-color: transparent;
}
.header__popup-list li a:hover i {
color: var(--curr-color, #fff);
}
.header__popup-list li a[aria-label="Whatsapp"] {
--curr-color: var(--color-whatsapp);
}
.header__popup-list li a[aria-label="Telegram"] {
--curr-color: var(--color-telegram);
}
.header__popup-list li a[aria-label="Snapchat"] {
--curr-color: var(--color-snapchat);
}
.header__popup-list li a[aria-label="WeChat"] {
--curr-color: var(--color-wechat);
}
.header__popup-list li a[aria-label="Botim"] {
--curr-color: var(--color-botim);
}
.header__popup-list li a[aria-label="Phone"] {
--curr-color: var(--primary-main);
}
}
.footer {
background: var(--surface-footer-bg);
position: relative;
z-index: 2;
padding: 16vw 0 10vw;
}
.footer__col-1-1 {
margin-bottom: 6vw;
}
.footer__col-1-2 {
margin-bottom: 6vw;
}
.footer__col-1-3 {
margin-bottom: 6vw;
}
.footer__title {
display: block;
font-size: 5vw;
font-weight: 600;
line-height: 1.2;
}
.footer__title mark {
color: var(--text-light-secondary);
}
.footer__email {
display: inline-block;
position: relative;
text-wrap: nowrap;
font-size: 1.2em;
font-weight: 700;
letter-spacing: -0.04em;
}
.footer__email:hover::after {
width: 0%;
}
.footer__email::after {
content: '';
display: block;
position: absolute;
bottom: 0;
left: 0%;
width: 100%;
height: 1px;
background: var(--text-light);
transition: 0.3s width;
}
.footer__label {
display: block;
margin-bottom: 2vw;
text-transform: uppercase;
color: var(--text-light-secondary);
font-size: 3.3vw;
font-weight: 600;
letter-spacing: -0.02em;
}
.footer__contacts {
display: flex;
flex-direction: column;
gap: 6vw;
}
.footer__design {
color: var(--text-light-secondary);
font-size: 3.3vw;
text-transform: uppercase;
font-weight: 600;
letter-spacing: -0.02em;
}
.footer__design a {
color: #fff;
transition: 0.3s color;
}
.footer__design a:hover {
color: #ffff01;
}
.footer__row-2 {
margin-top: 10vw;
}
.footer__logo {
display: block;
margin-bottom: 5vw;
}
.footer__head {
display: flex;
justify-content: space-between;
}
.footer__right {
text-transform: uppercase;
font-weight: 600;
text-align: right;
font-size: 3.89vw;
align-self: flex-end;
}
.footer__left {
font-weight: 600;
letter-spacing: -0.02em;
font-size: 3.33vw;
width: 60%;
text-transform: uppercase;
color: var(--text-light-secondary);
line-height: 1.7;
}
.footer__left em {
display: none;
margin: 0 1em;
font-weight: 800;
color: var(--text-light-secondary);
}
.footer__left a {
display: block;
position: relative;
text-decoration-line: underline;
text-underline-offset: 0.3em;
transition: 0.3s color;
}
.footer__left a:hover {
color: #fff;
}
@media (min-width: 1250px), (min-width: 990px) and (orientation: landscape) {
.footer {
padding: 5.8vw 0 3vw;
}
.footer__row-1 {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.footer__col-1-1 {
margin-bottom: 1.56vw;
order: 2;
width: 30vw;
text-align: right;
padding-top: 0.83vw;
}
.footer__col-1-2 {
margin-bottom: 0;
order: 1;
width: 50vw;
}
.footer__col-1-3 {
margin-bottom: 0;
order: 3;
width: 50vw;
}
.footer__col-1-4 {
order: 4;
width: 30vw;
text-align: right;
align-self: flex-end;
margin-bottom: -0.2vw;
}
.footer__title {
font-size: 1.67vw;
}
.footer__email {
font-size: 3.12vw;
}
.footer__label {
margin-bottom: 0.83vw;
font-size: 0.94vw;
}
.footer__contacts {
flex-direction: row;
gap: 6.5vw;
}
.footer__design {
font-size: 0.94vw;
}
.footer__row-2 {
margin-top: 7.9vw;
}
.footer__logo {
margin-bottom: 1.6vw;
}
.footer__right {
font-size: 1.67vw;
}
.footer__left {
font-size: 0.93vw;
padding-bottom: 0.2vw;
}
.footer__left em,
.footer__left a {
display: inline-block;
}
.footer__head {
margin-top: -0.6vw;
align-items: flex-end;
}
}
.section {
position: relative;
z-index: 1;
overflow: hidden;
padding: 12vw 0;
}
.section__title {
display: block;
font-size: 8vw;
font-family: var(--font-nurma);
line-height: 1;
font-weight: 400;
}
.section__title mark {
color: var(--text-light-secondary);
}
.section__title h2 {
display: inline;
font-weight: inherit;
font-size: inherit;
font-family: inherit;
}
.section__label {
margin-top: 3vw;
display: block;
letter-spacing: -0.02em;
color: rgba(239, 241, 247, 0.4);
font-weight: 700;
}
.section__label mark {
color: #eff1f7;
}
.section__head {
position: relative;
}
.section.section_demo {
z-index: 0;
}
@media (min-width: 1250px), (min-width: 990px) and (orientation: landscape) {
.section {
padding: 6.05vw 0;
}
.section__title {
text-align: center;
font-size: 6.77vw;
}
.section__label {
font-size: 0.94vw;
}
.section.section_promo {
padding-bottom: 3.4vw;
}
.section.section_promo .section__title {
margin-right: 4.7vw;
}
.section.section_promo .section__title mark {
display: block;
position: relative;
left: 9.5vw;
}
.section.section_promo .section__label {
margin: 0;
position: absolute;
top: 1.6vw;
right: 0;
}
.section.section_demo {
padding: 1.7vw 0 1.2vw;
overflow: visible;
}
.section.section_sets {
padding-bottom: 8.5vw;
}
.section.section_sets .section__title {
text-align: left;
text-indent: 2.6em;
}
.section.section_sets .section__label {
position: absolute;
left: 0;
top: 0.8em;
width: 5vw;
margin: 0;
}
.section.section_faq {
padding-bottom: 3.4vw;
}
.section.section_faq .section__title {
text-align: left;
}
.section.section_faq .section__label {
margin: 0;
position: absolute;
top: 1.6vw;
right: 0;
text-align: right;
}
.section.section_order {
padding-bottom: 5.7vw;
}
.section.section_order .section__title {
text-align: right;
width: 50vw;
margin-left: auto;
}
.section.section_order .section__label {
margin: 0;
position: absolute;
top: 1.6vw;
left: 0;
}
}
.slider__control {
display: flex;
justify-content: space-between;
align-items: center;
}
.slider__prev,
.slider__next {
width: 8vw;
display: block;
transition: 0.3s background;
padding: 4vw 2vw;
border-radius: 2vw;
box-sizing: content-box;
}
.slider__prev.swiper-button-disabled,
.slider__next.swiper-button-disabled {
opacity: 0.5;
cursor: default;
}
.slider__prev:hover,
.slider__next:hover {
background: rgba(185, 194, 230, 0.2);
}
.slider__arrow {
display: flex;
align-items: center;
width: -moz-fit-content;
width: fit-content;
padding: 1.5vw 2vw 1.35vw;
gap: 2vw;
border-radius: 1.5vw;
background: rgba(185, 194, 230, 0.2);
transition: 0.3s background;
}
.slider__arrow:hover {
background: rgba(185, 194, 230, 0.4);
}
.slider__arrow-count {
display: block;
text-align: center;
width: 1.6em;
line-height: 1;
}
.slider__arrow-arrow {
width: 8vw;
}
.slider__panel {
font-size: 3.33vw;
color: var(--text-light-secondary);
font-weight: 700;
text-align: center;
}
.slider__panel strong {
color: var(--text-light);
}
.slider__arrow-2 {
display: block;
border-radius: 1.5vw;
width: 8vw;
background: rgba(55, 90, 230, 0.7);
transition: 0.3s background;
}
.slider__arrow-2:hover {
background: #375ae6;
}
@media (min-width: 1250px), (min-width: 990px) and (orientation: landscape) {
.slider__arrow {
padding: 0.73vw 1.04vw 0.83vw;
border-radius: 0.6vw;
gap: 1vw;
}
.slider__arrow-count {
font-size: 1.25vw;
}
.slider__arrow-arrow {
width: 2.24vw;
}
.slider__prev,
.slider__next {
width: 2.24vw;
padding: 0.58vw 0.63vw;
border-radius: 0.42vw;
}
.slider__panel {
font-size: 1.25vw;
}
.slider__control.slider__control_v2 {
position: static;
margin: 0;
}
.slider__control.slider__control_v2 > div {
display: block;
position: absolute;
z-index: 9;
height: 100%;
top: 0;
width: 10.42vw;
}
.slider__control.slider__control_v2 > div:nth-child(1) {
left: 0;
background: linear-gradient(90deg, #12141b 0%, rgba(18, 20, 27, 0) 100%);
}
.slider__control.slider__control_v2 > div:nth-child(2) {
right: 0;
background: linear-gradient(270deg, #12141b 0%, rgba(18, 20, 27, 0) 100%);
}
.slider__control.slider__control_v2 > div:hover .slider__arrow-2 {
opacity: 1;
}
.slider__control.slider__control_v2 > div .slider__arrow-2 {
opacity: 0;
transition: 0.5s opacity, 0.5s background;
}
.slider__arrow-2 {
position: absolute;
z-index: 10;
top: 50%;
transform: translate(0, -50%);
width: 5.47vw;
border-radius: 1.25vw;
}
.slider__arrow-2.slider__arrow-2_prev {
left: 3vw;
}
.slider__arrow-2.slider__arrow-2_next {
right: 3vw;
}
} .nav {
display: none;
position: fixed;
z-index: 100;
width: 100%;
top: 0;
left: 0;
padding: 20px 0 20px;
background: #fff;
transform: translateY(-110%);
opacity: 0;
transition-duration: 0.5s;
transition-property: transform, opacity;
}
.nav.active {
opacity: 1;
transform: translateY(0);
}
.menu__item {
margin-bottom: 15px;
}
.menu__link {
display: inline-block;
}
@media (min-width: 1250px) {
.menu {
display: flex;
margin-left: -10px;
margin-right: -10px;
}
.menu__item {
margin: 0 10px;
}
}
.aside {
display: none;
position: fixed;
z-index: 110;
left: 0;
top: 0;
width: 100%;
height: 100%;
transform: translateX(-120%);
opacity: 0;
transition: 0.5s;
background: radial-gradient(102.88% 121.37% at 50% 0%, #12141b 0%, #12141b 59.89%, #303a48 100%);
overflow: auto;
}
.aside.show {
transform: translateX(0);
opacity: 1;
}
.aside.show + .aside__overlay {
display: block;
}
.aside__wrap {
position: relative;
height: 100%;
padding: 4.44vw 4.44vw 1vw;
display: flex;
flex-direction: column;
}
.aside__close {
width: 8vw;
padding: 0;
border: 0;
border-radius: 50%;
outline: none;
background: rgba(68, 83, 102, 0.6);
color: #fff;
flex: 0 0 11.1vw;
}
.aside__logo {
width: 43.3vw;
}
.aside__head {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 5vh;
}
.aside__menu {
counter-reset: cntAside;
font-family: var(--font-nurma);
font-size: 15.28vw;
line-height: 1.2;
}
.aside__menu li {
counter-increment: cntAside;
}
.aside__menu li::after {
content: counter(cntAside, decimal-leading-zero);
font-family: var(--font-mullerNextWideTrial);
font-weight: 600;
font-size: 2.78vw;
letter-spacing: -0.02em;
display: inline-block;
opacity: 0.5;
font-weight: 400;
margin-left: 0.5em;
}
.aside__nav {
margin-bottom: 12vw;
}
.aside__footer {
margin-top: auto;
padding-bottom: 5vw;
}
.aside__body {
margin-top: auto;
display: flex;
justify-content: space-between;
align-items: flex-end;
margin-bottom: 12vw;
}
.aside__label {
display: block;
margin-bottom: 4vw;
letter-spacing: -0.02em;
font-size: 2.78vw;
font-weight: 600;
opacity: 0.5;
}
.aside__mess {
display: flex;
flex-direction: column;
gap: 3vw;
font-weight: 600;
font-size: 4.72vw;
}
.aside__mess li a {
text-decoration-line: underline;
text-decoration-color: currentColor;
}
.mess {
display: flex;
gap: 4vw;
}
.mess__btn {
position: relative;
display: block;
padding: 0;
width: 10vw;
color: #fff;
border-radius: 50%;
background: rgba(255, 255, 255, 0.2);
transition-duration: 0.4s;
transition-property: background, color;
--curr-color: var(--primary-main);
overflow: hidden;
}
.mess__btn:hover,
.mess__btn.active {
background: var(--curr-color);
}
.mess__btn svg {
display: block;
fill: currentColor;
position: relative;
z-index: 1;
}
.mess__btn[aria-label="Whatsapp"] {
--curr-color: var(--color-whatsapp);
}
.mess__btn[aria-label="Telegram"] {
--curr-color: var(--color-telegram);
}
.mess__btn[aria-label="Botim"] {
--curr-color: var(--color-botim);
}
.mess__btn[aria-label="Snapchat"] {
--curr-color: var(--color-snapchat);
}
.mess__btn[aria-label="Snapchat"] svg {
position: relative;
z-index: 1;
stroke: #fff;
transition: 0.3s stroke;
}
.mess__btn[aria-label="Snapchat"]:hover svg,
.mess__btn[aria-label="Snapchat"].active svg {
stroke: #000;
}
.mess__btn[aria-label="WeChat"] {
--curr-color: var(--color-wechat);
}
.mess__btn[aria-label="Facebook"] {
--curr-color: var(--color-facebook);
}
.mess__btn[aria-label="X"] {
--curr-color: var(--color-x);
}
.mess__btn[aria-label="Linkedin"] {
--curr-color: var(--color-linkedin);
}
.mess__btn[aria-label="Instagram"]:hover::after {
opacity: 1;
}
.mess__btn[aria-label="Instagram"]::after {
content: '';
display: block;
position: absolute;
z-index: 0;
inset: 0;
background: url(//veloralounge.com/wp-content/themes/velora-lounge/img/svg/ghj.svg) center / cover no-repeat;
opacity: 0;
transition: 0.3s opacity;
}
@media (min-width: 1250px), (min-width: 990px) and (orientation: landscape) {
.mess {
gap: 0.43vw;
}
.mess__btn {
width: 2.5vw;
}
}
.btn1 {
display: inline-block;
padding: 0.85em 1.1em 0.75em;
border-radius: 1.5em;
border: none;
cursor: pointer;
outline: none;
background: var(--text-light);
text-align: center;
text-decoration: none;
color: var(--text-dark);
font-family: var(--font-rf-dewi-ext);
transition-duration: 0.4s;
transition-property: background, color;
font-weight: 700;
font-size: 3.89vw;
}
.btn1:hover {
background: #5578ff;
text-decoration: none;
color: #fff;
}
@media (min-width: 1250px), (min-width: 990px) and (orientation: landscape) {
.btn1 {
padding: 0.9em 1.95em 0.8em;
font-size: 0.83vw;
}
}
.btn {
display: inline-flex;
width: 100%;
align-items: center;
padding: 3.33vw 3.33vw 3.33vw 6vw;
border-radius: 5vw;
backdrop-filter: blur(32px);
background: rgba(185, 194, 230, 0.2) center / cover no-repeat;
font-family: var(--font-rf-dewi-ext);
color: #fff;
line-height: 1.1;
font-weight: 700;
font-size: 4.44vw;
border: 0;
text-align: left;
transition: 0.3s color, 0.3s background;
}
.btn:hover {
background-color: rgba(185, 194, 230, 0.4);
color: #fff;
}
.btn.btn_blue {
background-color: var(--primary-main);
backdrop-filter: blur(0px);
}
.btn.btn_blue:hover {
background-color: #5578ff;
}
.btn.btn_white {
background-color: #fff;
color: var(--text-dark);
}
.btn.btn_white:hover {
background-color: #5578ff;
color: #fff;
}
.btn.btn_back .btn__icon svg {
transform: rotate(180deg);
}
.btn__txt {
display: block;
flex: 1;
}
.btn__icon {
display: block;
flex: 0 0 13.3vw;
border-radius: 2.5vw;
background: rgba(255, 255, 255, 0.2);
transition: 0.3s color, 0.3s background;
}
@media (min-width: 1250px), (min-width: 990px) and (orientation: landscape) {
.btn {
padding: 0.73vw 0.73vw 1vw 1vw;
border-radius: 1.04vw;
font-size: 1.25vw;
align-items: flex-start;
width: 18vw;
}
.btn__txt {
margin-top: 0.8em;
}
.btn__icon {
flex-basis: 2.34vw;
border-radius: 0.45vw;
}
}
.btn10 {
display: inline-flex;
align-items: center;
gap: 4.6em;
padding: 0.8em 1em 0.9em;
border-radius: 0.2em;
font-size: 3.33vw;
background: rgba(49, 52, 56, 0.6);
transition: 0.3s background;
font-family: var(--font-rf-dewi-ext);
font-weight: 700;
color: #fff;
backdrop-filter: blur(50px);
}
.btn10:hover {
background: rgba(185, 194, 230, 0.2);
}
.btn10__icon {
display: block;
flex: 0 0 1.08em;
}
@media (min-width: 1250px), (min-width: 990px) and (orientation: landscape) {
.btn10 {
font-size: 1.25vw;
}
}
.form__inputs {
position: relative;
width: 100%;
}
.form__input {
width: 100%;
display: inline-block;
height: 12vw;
border-radius: 2vw;
color: #fff;
padding: 0.5em 1em 0.6em;
border: 0px solid #fff;
background: rgba(255, 255, 255, 0.2);
font-family: var(--font-rf-dewi-ext);
font-size: 3.89vw;
font-weight: 400;
outline: none;
transition: 0.3 background;
}
.form__input::-moz-placeholder {
color: rgba(255, 255, 255, 0.5);
}
.form__input::placeholder {
color: rgba(255, 255, 255, 0.5);
}
.form__input:focus {
background: rgba(255, 255, 255, 0.4);
}
.form__submit {
-webkit-appearance: none;
}
.form__submit[disabled] {
background: #004d00;
cursor: not-allowed;
}
.form__label {
display: block;
margin-bottom: 3vw;
font-size: 3.33vw;
line-height: 1.2;
}
.form__label.form__label_v1 {
margin-bottom: 0;
margin-top: 3vw;
}
.form__block {
position: relative;
z-index: 10;
}
.form__block-panel {
display: flex;
flex-direction: column;
height: 30vw;
border-radius: 2vw;
color: #fff;
padding: 4vw 6vw;
border: 0px solid #fff;
background: rgba(255, 255, 255, 0.2);
font-family: var(--font-rf-dewi-ext);
font-size: 3.89vw;
font-weight: 400;
cursor: pointer;
}
.form__block-label {
display: block;
font-size: 3.33vw;
opacity: 0.5;
}
.form__block-value {
display: block;
margin-top: auto;
font-size: 7vw;
font-weight: 600;
text-transform: uppercase;
}
.form__block-input {
position: absolute;
left: 0;
bottom: 0;
padding: 4vw 6vw;
z-index: 3;
font-size: 7vw;
font-weight: 600;
text-transform: uppercase;
border: 0;
background: none;
outline: none;
color: #fff;
font-family: var(--font-rf-dewi-ext);
width: 100%;
cursor: pointer;
vertical-align: sub;
}
.form__block-2 {
border-radius: 2vw;
color: #fff;
padding: 4vw 4vw;
border: 0px solid #fff;
background: rgba(255, 255, 255, 0.2);
}
.form__popup {
display: none;
position: absolute;
width: 100%;
bottom: 0;
margin-bottom: 14vw;
left: 0;
background: #5f7beb;
padding: 4vw;
border-radius: 4vw;
text-transform: uppercase;
letter-spacing: -0.02em;
font-weight: 600;
}
.form__popup-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1vw;
text-align: center;
}
.form__popup-title {
display: block;
margin-bottom: 1vw;
}
.form__popup-values {
display: flex;
flex-direction: column;
gap: 1vw;
width: 25vw;
margin: 0 auto;
height: 50vw;
overflow: auto;
padding: 2vw 4vw;
}
.form__popup-value {
display: block;
cursor: pointer;
outline: none;
padding: 1vw 2vw;
text-align: center;
position: relative;
transition: 0.3s color, 0.3s background;
border-radius: 2vw;
}
.form__popup-value:has(input:checked) {
background: #fff;
color: var(--primary-main);
}
.form__popup-value:hover {
background: rgba(185, 194, 230, 0.2);
}
.form__popup-value input {
position: absolute;
left: -9999px;
top: 0;
}
.form__popup-ampms {
margin-top: 2vw;
padding: 1vw;
border-radius: 2vw;
background: rgba(185, 194, 230, 0.2);
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1vw;
}
.form__popup-ampm {
display: block;
cursor: pointer;
outline: none;
padding: 1vw 2vw;
border-radius: 1vw;
text-align: center;
transition: 0.3s color, 0.3s background;
}
.form__popup-ampm:has(input:checked) {
background: rgba(255, 255, 255, 0.2);
}
.form__popup-ampm:hover {
background: rgba(185, 194, 230, 0.2);
}
.form__popup-ampm input {
position: absolute;
left: -9999px;
top: 0;
}
.form__acomplete {
display: none;
position: absolute;
width: 100%;
z-index: 10;
top: 100%;
margin-top: 1vw;
left: 0;
padding: 1vw;
border-radius: 4vw;
background: #5F7BEB;
color: #fff;
}
.form__acomplete ul {
display: flex;
flex-direction: column;
gap: 1vw;
font-size: 3.33vw;
padding: 0;
margin: 0;
list-style: none;
max-height: 80vw;
overflow: auto;
}
.form__acomplete ul li {
border-radius: 3vw;
padding: 3vw 4vw;
font-weight: 800;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
transition: 0.3s background;
}
.form__acomplete ul li:hover {
background: rgba(255, 255, 255, 0.2);
}
.form__acomplete ul li small {
display: block;
font-size: 0.6em;
font-weight: 400;
max-width: 100%;
overflow: hidden;
text-wrap: nowrap;
text-overflow: ellipsis;
}
.form__acomplete ul li p {
max-width: 100%;
overflow: hidden;
text-wrap: nowrap;
text-overflow: ellipsis;
}
.form__alert {
margin-top: 1vw;
color: #ff0;
font-size: 2.7vw;
}
@media (min-width: 1250px), (min-width: 990px) and (orientation: landscape) {
.form__inputs {
width: 29.95vw;
flex: 1;
}
.form__input {
height: 4.0625vw;
border-radius: 0.83vw;
font-size: 1.25vw;
}
.form__label {
margin-bottom: 1vw;
font-size: 0.94vw;
}
.form__label.form__label_v0 {
margin-bottom: 0;
width: 20vw;
}
.form__label.form__label_v1 {
margin-top: 1vw;
max-width: 18vw;
}
.form__label.form__label_v2 {
margin-bottom: 0;
}
.form__block {
flex: 1;
}
.form__block-panel {
border-radius: 0.83vw;
padding: 1.2vw 1.2vw 1vw;
height: 14.58vw;
}
.form__block-label {
font-size: 1.25vw;
}
.form__block-value {
font-size: 4.48vw;
}
.form__block-input {
font-size: 4.48vw;
padding: 0 1.2vw 1vw;
}
.form__block-2 {
border-radius: 0.83vw;
padding: 1.2vw 1.2vw 1vw;
}
.form__popup {
margin-bottom: 6vw;
border-radius: 0.94vw;
padding: 1.56vw 1.56vw 1.56vw;
font-size: 0.94vw;
}
.form__popup-values {
box-sizing: content-box;
width: 4.17vw;
padding: 0 0.53vw;
height: 11.6vw;
gap: 0.42vw;
}
.form__popup-values::-webkit-scrollbar-track {
border-radius: 2px;
background-color: var(--text-light-secondary);
}
.form__popup-values::-webkit-scrollbar {
width: 6px;
}
.form__popup-values::-webkit-scrollbar-thumb {
border-radius: 2px;
background-color: #fff;
}
.form__popup-value {
padding: 0.43vw 1vw 0.33vw;
border-radius: 0.63vw;
}
.form__popup-ampms {
margin-top: 0.53vw;
padding: 0.42vw;
border-radius: 0.83vw;
gap: 0.42vw;
}
.form__popup-ampm {
padding: 0.43vw 1vw 0.33vw;
border-radius: 0.63vw;
}
.form__acomplete {
padding: 0.21vw 0vw 0.21vw 0.21vw;
border-radius: 1.04vw;
overflow: hidden;
margin-top: 0.2vw;
}
.form__acomplete ul {
max-height: 16vw;
padding-right: 0.21vw;
gap: 0.21vw;
font-size: 1.51vw;
}
.form__acomplete ul::-webkit-scrollbar-track {
border-radius: 2px;
background-color: var(--text-light-secondary);
}
.form__acomplete ul::-webkit-scrollbar {
width: 6px;
}
.form__acomplete ul::-webkit-scrollbar-thumb {
border-radius: 2px;
background-color: #fff;
}
.form__acomplete ul li {
border-radius: 0.83vw;
padding: 1vw 1vw;
}
.form__alert {
position: absolute;
width: 100%;
top: 100%;
left: 0;
margin-top: 0.3vw;
font-size: 0.73vw;
}
}
.modal {
border: 0;
padding: 0;
background: none;
max-width: 92vw;
}
.modal.modal::backdrop {
background: rgba(0, 0, 0, 0.5);
}
.modal__wrap {
padding: 6vw;
position: relative;
color: #fff;
border: 0;
background: var(--primary-main);
border-radius: 6vw;
}
.modal__close {
position: absolute;
z-index: 10;
top: 4vw;
right: 4vw;
display: block;
width: 4vw;
border: 0;
padding: 2vw;
background: none;
outline: none;
color: #fff;
opacity: 0.5;
transition: 0.3s opacity;
box-sizing: content-box;
}
.modal__close:hover {
opacity: 1;
}
.modal__close svg {
pointer-events: none;
}
.modal__title {
display: block;
margin-bottom: 6vw;
text-transform: uppercase;
letter-spacing: -0.06em;
font-size: 7vw;
line-height: 1;
font-weight: 800;
}
.modal__contacts-label {
display: block;
margin-bottom: 4vw;
font-weight: 600;
}
.modal__contacts-sub {
margin-top: 6vw;
font-weight: 700;
line-height: 1.2;
font-size: 3.33vw;
}
.modal__contacts-sub mark {
display: block;
font-weight: 400;
color: var(--text-light-secondary);
}
.modal__contacts-list {
display: flex;
flex-direction: column;
gap: 1vw;
}
.modal__contacts-list + .modal__contacts-list {
margin-top: 2vw;
}
.modal__contacts-list li a {
display: flex;
align-items: center;
gap: 3vw;
background: rgba(255, 255, 255, 0.2);
border-radius: 3vw;
padding: 2vw 2vw 2vw 4vw;
font-weight: 600;
text-decoration-line: underline;
text-decoration-color: transparent;
transition: 0.3s background, 0.3s color, 0.3s text-decoration-color;
}
.modal__contacts-list li a:hover {
text-decoration-color: currentColor;
background: #fff;
color: var(--primary-main);
}
.modal__contacts-list li a:hover em {
background: rgba(55, 90, 230, 0.2);
color: var(--primary-main);
}
.modal__contacts-list li a.active {
text-decoration-color: #fff;
background: #fff;
color: var(--primary-main);
}
.modal__contacts-list li a.active em {
background: rgba(55, 90, 230, 0.2);
color: var(--primary-main);
}
.modal__contacts-list li a.active:hover {
color: #fff;
background: #5578FF;
}
.modal__contacts-list li a.active:hover em {
background: rgba(255, 255, 255, 0.2);
color: #fff;
}
.modal__contacts-list li a[aria-label="Whatsapp"] {
--curr-color: var(--color-whatsapp);
}
.modal__contacts-list li a[aria-label="Telegram"] {
--curr-color: var(--color-telegram);
}
.modal__contacts-list li a[aria-label="Snapchat"] {
--curr-color: var(--color-snapchat);
stroke: #000;
}
.modal__contacts-list li a[aria-label="WeChat"] {
--curr-color: var(--color-wechat);
}
.modal__contacts-list li a[aria-label="Botim"] {
--curr-color: var(--color-botim);
}
.modal__contacts-list li a[aria-label="Phone"] {
--curr-color: var(--primary-main);
}
.modal__contacts-list li a i {
display: block;
color: #fff;
background: var(--curr-color, #fff);
width: 6vw;
transition: 0.3s color;
border-radius: 50%;
}
.modal__contacts-list li a span {
display: block;
flex: 1;
}
.modal__contacts-list li a em {
display: block;
flex: 0 0 8vw;
border-radius: 2vw;
background: rgba(255, 255, 255, 0.2);
transition: 0.3s color, 0.3s background;
}
@media (min-width: 1250px), (min-width: 990px) and (orientation: landscape) {
.modal {
max-width: 66.35vw;
}
.modal__wrap {
padding: 3.1vw 3.1vw 3.1vw;
border-radius: 2.08vw;
}
.modal__close {
padding: 0.53vw;
width: 1.2vw;
top: 2.5vw;
right: 2.2vw;
}
.modal__title {
font-size: 4.33vw;
margin-bottom: 2.8vw;
margin-right: 5vw;
}
.modal__contacts-label {
margin-bottom: 1.8vw;
font-size: 1.67vw;
}
.modal__contacts-sub {
font-size: 0.94vw;
margin: 0;
}
.modal__contacts-list {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.53vw;
align-items: center;
}
.modal__contacts-list + .modal__contacts-list {
margin-top: 2vw;
}
.modal__contacts-list + .modal__contacts-list li:first-child {
order: 2;
}
.modal__contacts-list li a {
padding: 0.73vw 0.73vw 0.73vw 1vw;
border-radius: 0.84vw;
font-size: 1.25vw;
gap: 0.94vw;
}
.modal__contacts-list li a i {
flex-basis: 2.5vw;
}
.modal__contacts-list li a em {
flex-basis: 2.4vw;
border-radius: 0.53vw;
}
}
.widget {
display: none;
position: fixed;
z-index: 100;
left: calc(100% - 4.44vw);
bottom: 4.44vw;
transform: translate(-100%, 100vh);
transition: 0.5s transform;
}
.widget.show {
transform: translate(-100%, 0vh);
}
.widget.show.h {
transform: translate(-100%, 100vh);
}
.widget__open {
width: 16vw;
background: var(--primary-main);
border-radius: 50%;
color: #fff;
border: 0;
padding: 0;
outline: none;
cursor: pointer;
transition: 0.3s background;
overflow: hidden;
}
.widget__open:hover {
background: #5578ff;
}
.widget__open:hover .zzz {
animation: 1s rington-hover-2 forwards;
}
.widget__open:hover .ring {
animation: 1s rington-hover-1 forwards;
}
.widget__open .zzz {
opacity: 0;
transform-origin: 50% 60%;
animation: 7s rington-2 linear infinite;
}
.widget__open .ring {
transform-origin: 50% 60%;
animation: 7s rington-1 linear infinite;
}
.widget__open svg {
pointer-events: none;
}
.widget__popup {
bottom: 100%;
right: 0;
left: auto;
border: 0;
width: 80vw;
backdrop-filter: blur(43px);
background: radial-gradient(129.53% 156.66% at 57.82% -27.76%, rgba(18, 20, 27, 0.6) 0%, rgba(68, 83, 102, 0.6) 59.89%, #375ae6 100%);
color: #fff;
border-radius: 6vw;
padding: 6vw;
margin-bottom: 3vw;
}
.widget__head {
display: flex;
align-items: center;
gap: 4vw;
}
.widget__close {
display: block;
flex: 0 0 6vw;
opacity: 0.5;
transition: 0.3s opacity;
}
.widget__close:hover {
opacity: 1;
}
.widget__close svg {
pointer-events: none;
}
.widget__title {
display: block;
flex: 1;
font-size: 2.7vw;
font-weight: 600;
line-height: 1.2;
letter-spacing: -0.02em;
}
.widget__title mark {
color: var(--text-light-secondary);
}
.widget__list {
margin-top: 6vw;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 3vw 6vw;
}
.widget__list li a {
display: flex;
align-items: center;
gap: 3vw;
font-size: 2.7vw;
text-decoration-line: underline;
text-underline-offset: 0.3em;
text-decoration-color: currentColor;
transition: 0.3s text-decoration-color;
}
.widget__list li a:hover {
text-decoration-color: transparent;
}
.widget__list li a:hover i {
color: var(--curr-color, #fff);
}
.widget__list li a[aria-label="Whatsapp"] {
--curr-color: var(--color-whatsapp);
}
.widget__list li a[aria-label="Telegram"] {
--curr-color: var(--color-telegram);
}
.widget__list li a[aria-label="Snapchat"] {
--curr-color: var(--color-snapchat);
}
.widget__list li a[aria-label="WeChat"] {
--curr-color: var(--color-wechat);
}
.widget__list li a[aria-label="Botim"] {
--curr-color: var(--color-botim);
}
.widget__list li a[aria-label="Phone"] {
--curr-color: var(--primary-main);
}
.widget__list li a i {
display: block;
color: #fff;
width: 6vw;
transition: 0.3s color;
}
@media (min-width: 1250px), (min-width: 990px) and (orientation: landscape) {
.widget {
bottom: 2vw;
left: calc(100% - 2vw);
}
.widget__open {
width: 5.47vw;
}
.widget__popup {
width: 17.81vw;
padding: 1.3vw 1.3vw 1.3vw;
border-radius: 1.04vw;
margin-bottom: 1vw;
}
.widget__close {
flex-basis: 1.1vw;
}
.widget__title {
font-size: 0.53vw;
}
.widget__list {
margin-top: 1.2vw;
gap: 0.8vw 0.7vw;
}
.widget__list + .widget__list {
margin-top: 1.4vw;
display: block;
}
.widget__list li a {
gap: 0.53vw;
font-size: 0.89vw;
}
.widget__list li a i {
flex: 0 0 1.25vw;
}
}
@keyframes rington-1 {
0%,
70%,
82%,
100% {
transform: rotate(0deg);
}
71%,
75%,
79% {
transform: rotate(10deg);
}
73%,
77%,
81% {
transform: rotate(-10deg);
}
}
@keyframes rington-2 {
0%,
70%,
82%,
100% {
opacity: 0;
transform: scale(1);
}
71%,
75%,
79% {
opacity: 1;
transform: scale(1.1);
}
73%,
77%,
81% {
opacity: 1;
transform: scale(0.9);
}
}
@keyframes rington-hover-1 {
100% {
transform: rotate(10deg);
}
}
@keyframes rington-hover-2 {
100% {
opacity: 1;
transform: scale(1.1);
}
}
.ui-datepicker {
width: 79vw;
padding: 4vw;
border-radius: 4vw;
background: #5f7beb;
color: #fff;
font-size: 3.33vw;
}
.ui-datepicker td span,
.ui-datepicker td a {
text-align: center;
border-radius: 0.3em;
padding: 0.7em 0.7em;
}
.ui-datepicker td a.ui-state-highlight {
background: rgba(185, 194, 230, 0.1);
}
.ui-datepicker td a.ui-state-active {
background: #fff;
color: var(--primary-main);
}
.ui-datepicker td span {
opacity: 0.2;
}
.ui-datepicker th {
font-size: 0.67em;
opacity: 0.5;
}
.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {
aspect-ratio: 43/26;
height: auto;
color: transparent;
transition: 0.3s opacity;
right: 0;
top: 0;
}
.ui-datepicker .ui-datepicker-prev:hover,
.ui-datepicker .ui-datepicker-next:hover {
margin: 0;
opacity: 0.6;
}
.ui-datepicker .ui-datepicker-next {
background: url(//veloralounge.com/wp-content/themes/velora-lounge/img/svg/datepicker-next.svg) center / contain no-repeat;
}
@media (min-width: 1250px), (min-width: 990px) and (orientation: landscape) {
.ui-datepicker {
border-radius: 0.83vw;
padding: 1.56vw;
font-size: 0.94vw;
width: 29.9vw;
}
.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {
width: 2.24vw;
}
}
.top {
position: relative;
height: 200vh;
}
.top__inner {
position: sticky;
overflow: hidden;
height: 100vh;
height: 100svh;
top: 0;
left: 0;
width: 100%;
padding-bottom: 4.6vw;
}
.top__inner > .container {
display: flex;
flex-direction: column;
height: 100%;
}
.top__pic {
position: absolute;
z-index: 0;
inset: 0;
top: 0;
}
.top__pic img {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
-o-object-fit: cover;
object-fit: cover;
}
.top__wrap {
margin-top: 5vw;
flex: 1;
display: flex;
flex-direction: column;
}
.top__label {
display: block;
margin-bottom: 5vw;
}
.top__head {
display: flex;
justify-content: space-between;
}
.top__right {
text-transform: uppercase;
font-weight: 600;
text-align: right;
font-size: 3.89vw;
}
.top__left {
font-weight: 700;
letter-spacing: -0.02em;
font-size: 3.33vw;
width: 60%;
}
.top__left em {
display: inline-block;
margin: 0 0.3em;
font-weight: 800;
color: var(--text-light-secondary);
}
.top__footer {
margin-top: auto;
}
.top__txt {
font-size: 4.72vw;
text-indent: 7.8ch;
color: var(--text-light-secondary);
font-weight: 600;
line-height: 1.2;
letter-spacing: -0.005em;
position: relative;
}
.top__txt::before {
content: attr(data-before);
position: absolute;
top: 0.6em;
left: 0;
font-size: 0.41em;
letter-spacing: -0.02em;
text-indent: 0;
}
.top__txt mark {
color: var(--text-light);
}
.top__btns {
margin-top: 7.8vw;
display: flex;
flex-direction: column;
gap: 2vw;
}
.top__sublabel {
text-align: right;
font-size: 3.33vw;
letter-spacing: -0.02em;
}
.top__sublabel mark {
color: var(--text-light-secondary);
}
.top.top_thanks {
height: auto;
}
.top.top_thanks .top__pic {
inset: 0 0 -12vw 0;
}
.top.top_thanks .top__footer {
margin-top: 20vw;
}
.top.top_thanks .top__inner {
position: relative;
overflow: visible;
height: auto;
padding-bottom: 10vw;
}
.top.top_thanks + .footer {
border-radius: 10vw 10vw 0 0;
}
@media (min-width: 1250px), (min-width: 990px) and (orientation: landscape) {
.top__wrap {
margin-top: 1.2vw;
}
.top__label {
margin-bottom: 1.6vw;
}
.top__right {
font-size: 1.67vw;
}
.top__left {
font-size: 0.93vw;
}
.top__inner {
padding-bottom: 3vw;
}
.top__footer {
display: flex;
justify-content: space-between;
}
.top__desc {
position: relative;
width: 29.17vw;
}
.top__txt {
text-indent: 7.3ch;
font-size: 1.51vw;
}
.top__btns {
margin: 0;
flex-direction: row;
gap: 0.73vw;
}
.top.top_thanks .top__footer {
margin-top: auto;
}
.top.top_thanks .top__label {
width: 67.45vw;
}
.top.top_thanks .top__wrap {
margin-top: 1.6vw;
}
.top.top_thanks .top__desc {
width: 31vw;
}
.top.top_thanks .top__pic {
inset: 0 0 -6vw 0;
}
.top.top_thanks .top__inner {
padding-bottom: 3vw;
height: 100vh;
}
.top.top_thanks + .footer {
border-radius: 5.2vw 5.2vw 0 0;
}
.top__sublabel {
position: absolute;
right: 0;
bottom: 1.56vw;
font-size: 0.94vw;
}
}
.promo {
margin-top: 10vw;
}
.promo__pic {
position: relative;
overflow: hidden;
border-radius: 6vw;
}
.promo__pic img {
aspect-ratio: 480/580;
}
.promo__slider {
margin-top: 6vw;
}
.promo__slide {
position: relative;
}
.promo__slide::before {
content: attr(data-curr);
position: absolute;
left: 0;
top: 0;
font-size: 0.41em;
font-weight: 600;
opacity: 0.5;
letter-spacing: -0.02em;
}
.promo__txt {
position: relative;
text-indent: 7.3ch;
font-weight: 600;
line-height: 1.2;
letter-spacing: 0em;
}
.promo__nexts {
margin: 4vw 0 0 auto;
width: -moz-fit-content;
width: fit-content;
}
@media (min-width: 1250px), (min-width: 990px) and (orientation: landscape) {
.promo {
position: relative;
z-index: 5;
margin-top: -9.35vw;
display: flex;
align-items: flex-end;
}
.promo__pic {
flex: 0 0 25vw;
border-radius: 2.08vw;
}
.promo__slider {
width: 50.68vw;
margin: 0 0 0 auto;
}
.promo__slide {
padding-right: 14vw;
font-size: 1.51vw;
}
.promo__nexts {
position: absolute;
z-index: 10;
right: 0;
bottom: 0;
margin: 0;
}
}
.types {
margin-top: 10vw;
}
.types .swiper-slide {
box-sizing: content-box;
padding: 0 3vw;
width: 80vw;
}
.types__slide {
aspect-ratio: 530/722;
overflow: hidden;
border-radius: 6vw;
padding: 6vw;
display: flex;
flex-direction: column;
justify-content: space-between;
background: center / cover no-repeat;
}
.types__head {
font-weight: 700;
line-height: 1.08;
font-size: 5.5vw;
letter-spacing: -0.04em;
}
.types__label {
display: block;
margin-bottom: 2vw;
opacity: 0.5;
letter-spacing: -0.02em;
font-weight: 600;
font-size: 3.33vw;
}
.types__text {
line-height: 1.6;
}
.types__bottom {
margin-top: 6vw;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.types__sub {
width: 50%;
font-size: 3.33vw;
line-height: 1.2;
}
.types__sub.types__sub_2 {
text-align: right;
}
.types__sub mark {
display: block;
color: var(--text-light-secondary);
}
.types__btns {
width: 100%;
margin-top: 4vw;
}
.types__control {
display: none;
}
@media (min-width: 1250px), (min-width: 990px) and (orientation: landscape) {
.types {
margin-top: -1.95vw;
position: relative;
z-index: 5;
}
.types .swiper-slide {
width: 27.6vw;
padding: 0 1.04vw;
}
.types__slide {
border-radius: 2.08vw;
padding: 2.4vw 2.4vw 2.3vw;
}
.types__slide:hover .types__text {
grid-template-rows: 1fr;
}
.types__head {
font-size: 3.12vw;
}
.types__label {
margin-bottom: 0.53vw;
font-size: 0.63vw;
}
.types__text {
font-size: 1.04vw;
overflow: hidden;
display: grid;
grid-template-rows: 0fr;
transition: 0.5s grid-template-rows;
}
.types__text > div {
min-height: 0;
}
.types__bottom {
margin-top: 3.1vw;
align-items: flex-end;
}
.types__sub {
width: 33%;
font-size: 0.93vw;
padding-bottom: 1vw;
}
.types__sub.types__sub_2 {
order: 3;
}
.types__btns {
width: 18vw;
margin: 0;
}
.types__control {
display: block;
}
}
.demo__pic {
position: absolute;
z-index: 0;
inset: 0;
}
.demo__pic img {
position: relative;
height: 100%;
-o-object-fit: auto 100%;
object-fit: auto 100%;
}
.demo__head-right {
margin: 10vw 0 0 auto;
width: 50%;
}
.demo__head-right .section__title {
text-align: right;
}
.demo__title {
font-size: 6vw;
display: block;
margin-bottom: 4vw;
line-height: 1.1;
font-family: var(--font-nurma);
}
.demo__desc {
font-size: 3.89vw;
text-indent: 7.8ch;
font-weight: 600;
line-height: 1.2;
letter-spacing: -0.005em;
position: relative;
}
.demo__desc::before {
content: attr(data-before);
position: absolute;
top: 0.6em;
left: 0;
font-size: 0.41em;
letter-spacing: -0.02em;
text-indent: 0;
opacity: 0.5;
}
.demo__desc mark {
color: var(--text-light-secondary);
}
.demo__label {
display: block;
margin-bottom: 4vw;
text-align: right;
font-size: 0.8em;
letter-spacing: -0.02em;
opacity: 0.5;
}
.demo__txt-2 {
line-height: 1.6;
}
.demo__txt-2 > *:last-child {
margin-bottom: 0;
}
.demo__txt-2 p {
margin-bottom: 1.1em;
text-indent: 3em;
}
.demo__txt-2 p mark {
color: var(--text-light-secondary);
}
.demo__body {
margin-top: 50vw;
}
@media (min-width: 1250px), (min-width: 990px) and (orientation: landscape) {
.demo__head {
display: flex;
justify-content: space-between;
}
.demo__head-right {
width: 39vw;
margin-top: 0;
}
.demo__head-left {
width: 30vw;
padding-top: 2.2vw;
}
.demo__desc {
text-indent: 7.3ch;
font-size: 1.51vw;
}
.demo__title {
margin-top: 0;
margin-bottom: 2.1vw;
font-size: 3.12vw;
}
.demo__body {
margin: 23vw 0 0 auto;
width: 24.74vw;
}
.demo__txt-2 {
font-size: 1.04vw;
}
.demo__label {
margin-bottom: 2.5vw;
font-size: 0.63vw;
}
.demo__pic img {
height: auto;
}
}
.sets {
margin-top: 6vw;
}
.sets__pics {
position: relative;
overflow: hidden;
border-radius: 6vw;
}
.sets__pics img {
aspect-ratio: 610/962;
}
.sets__pics-label {
display: block;
position: absolute;
top: 6vw;
right: 6vw;
width: -moz-fit-content;
width: fit-content;
z-index: 5;
text-align: right;
font-family: var(--font-nurma);
font-size: 6vw;
line-height: 1.1;
}
.sets__list {
margin-top: 6vw;
counter-reset: cntSet;
}
.sets__list li {
border-bottom: 1px solid rgba(239, 241, 247, 0.25);
counter-increment: cntSet;
}
.sets__list li:last-child {
border-bottom-width: 0;
}
.sets__list li a {
display: block;
padding: 3vw 6vw 3.1vw 14vw;
position: relative;
font-weight: 600;
text-transform: uppercase;
line-height: 1.35;
transition: 0.3s background;
background: transparent;
}
.sets__list li a:hover {
background: rgba(85, 95, 110, 0.3);
}
.sets__list li a::before {
content: counter(cntSet, decimal-leading-zero);
display: block;
position: absolute;
left: 4vw;
top: 50%;
transform: translateY(-50%);
font-size: 0.625em;
color: var(--text-light-secondary);
}
.sets__list li a small {
margin-top: 0.3em;
text-transform: none;
display: block;
color: var(--text-light-secondary);
font-size: 0.5625em;
}
.sets__main {
overflow: visible;
}
.sets__control {
position: absolute;
z-index: 10;
top: 123vw;
left: 4vw;
right: 4vw;
padding: 2vw 4vw;
backdrop-filter: blur(50px);
background: rgba(49, 52, 56, 0.6);
border-radius: 2vw;
}
@media (min-width: 1250px), (min-width: 990px) and (orientation: landscape) {
.sets {
margin-top: -4.35vw;
}
.sets__slide {
display: flex;
justify-content: space-between;
}
.sets__pics {
order: 2;
width: 31.77vw;
border-radius: 2.08vw;
}
.sets__pics-label {
top: 2.1vw;
right: 2vw;
font-size: 3.12vw;
}
.sets__list {
margin-top: auto;
margin-bottom: -2.2vw;
width: 47.55vw;
}
.sets__list li a {
padding: 2.1vw 2vw 2vw 7.7vw;
font-size: 1.67vw;
}
.sets__list li a::before {
left: 2vw;
}
.sets__control {
top: auto;
right: 2vw;
bottom: 2vw;
left: auto;
width: 27.6vw;
padding: 0.7vw 0.5vw 0.7vw;
border-radius: 0.63vw;
}
}
.quiz {
position: relative;
overflow: hidden;
border-radius: 10vw;
background: url(//veloralounge.com/wp-content/themes/velora-lounge/img/quiz/bg.webp) center / cover no-repeat;
padding: 10vw 0;
}
.quiz__title {
display: block;
margin-bottom: -2vw;
font-family: var(--font-nurma);
font-size: 8vw;
line-height: 1;
letter-spacing: -0.01em;
text-transform: uppercase;
}
.quiz__wrapper {
position: relative;
z-index: 5;
padding: 8vw 6vw 6vw;
border-radius: 6vw;
background: var(--primary-main);
color: #fff;
}
.quiz__sub {
margin-top: 4vw;
font-weight: 700;
font-size: 3.33vw;
}
.quiz__sub mark {
color: var(--text-light-secondary);
}
.quiz__header {
display: block;
font-weight: 800;
text-transform: uppercase;
letter-spacing: -0.06em;
font-size: 6vw;
line-height: 1;
}
.quiz__panel {
margin-top: 4vw;
text-align: right;
letter-spacing: -0.02em;
font-weight: 600;
font-size: 3.33vw;
}
.quiz__panel-info {
display: block;
color: var(--text-light-secondary);
}
.quiz__panel-txt {
display: block;
}
.quiz__scale {
position: relative;
margin: 3vw 0;
height: 1.5vw;
border-radius: 1vw;
background: rgba(255, 255, 255, 0.2);
}
.quiz__scale i {
display: block;
position: absolute;
top: 0;
left: 0;
height: 100%;
border-radius: inherit;
background: #fff;
width: 10%;
transition: 0.5s width;
}
.quiz__scale i::after {
content: '';
display: block;
position: absolute;
right: 0;
top: 50%;
transform: translate(20%, -50%);
aspect-ratio: 24/22;
height: 400%;
background: url(//veloralounge.com/wp-content/themes/velora-lounge/img/quiz/thumb.svg) center / cover no-repeat;
transition: 0.5s transform;
}
.quiz__fieldset {
margin-top: 16vw;
}
.quiz__radios {
display: flex;
flex-direction: column;
gap: 3vw;
margin-bottom: 8vw;
}
.quiz__radios.quiz__radios_v1,
.quiz__radios.quiz__radios_v2,
.quiz__radios.quiz__radios_v3 {
margin-bottom: 0;
}
.quiz__radio {
display: flex;
align-items: flex-start;
gap: 3vw;
position: relative;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
font-weight: 600;
line-height: 1.2;
font-size: 4.9vw;
}
.quiz__radio:has(input:checked) .quiz__radio-svg,
.quiz__radio:hover .quiz__radio-svg {
color: #ffffff;
}
.quiz__radio input {
position: absolute;
top: 0;
left: -200vw;
}
.quiz__radio-svg {
display: block;
flex: 0 0 0.75em;
margin-top: 0.3em;
border-radius: 50%;
background: rgba(255, 255, 255, 0.2);
color: rgba(255, 255, 255, 0);
transition: 0.3s color;
}
.quiz__radiobuttons {
margin: 2vw 0 4vw;
display: grid;
grid-template-columns: 1fr;
gap: 1vw;
}
.quiz__radiobutton {
position: relative;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
font-size: 3.33vw;
display: block;
padding: 2vw 4vw;
text-align: center;
background: rgba(185, 194, 230, 0.2);
flex: 1;
font-size: 2.8vw;
font-weight: 600;
text-transform: uppercase;
color: #fff;
transition: 0.3s color, 0.3s background;
border-radius: 2vw;
}
.quiz__radiobutton:has(input:checked),
.quiz__radiobutton:hover {
background: #fff;
color: var(--primary-main);
}
.quiz__radiobutton input {
position: absolute;
top: 0;
left: -200vw;
}
.quiz__double-inputs {
display: flex;
flex-direction: column;
gap: 2vw;
}
.quiz__double-inputs.quiz__double-inputs_v1 {
margin-top: 6vw;
gap: 6vw;
}
.quiz__row-1-1,
.quiz__row-1-2,
.quiz__row-1-3,
.quiz__row-1-4,
.quiz__row-1-5 {
margin-top: 8vw;
}
.quiz__row-1-3 {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.quiz__submits {
margin-top: 8vw;
width: 100%;
}
.quiz__backs {
margin-top: 2vw;
}
.quiz__back {
display: inline-flex;
align-items: center;
gap: 2vw;
font-weight: 700;
font-size: 3.33vw;
padding: 2vw 5vw 2vw 2vw;
border-radius: 2vw;
transition: 0.3s background;
}
.quiz__back:hover {
background: rgba(185, 194, 230, 0.2);
}
.quiz__back-svg {
display: block;
width: 10vw;
}
.quiz__txt-2-1 {
margin-bottom: 10vw;
font-size: 1.2em;
font-weight: 600;
}
.quiz__list-2-1 {
font-size: 3.3vw;
color: var(--text-light-secondary);
line-height: 1.7;
}
.quiz__list-2-1 li {
display: flex;
align-items: baseline;
gap: 0.5em;
}
.quiz__list-2-1 li strong {
display: block;
color: #fff;
line-height: 1.1;
}
.quiz__col-2-2 {
margin-top: 8vw;
}
.quiz__list-2-2 {
display: flex;
flex-direction: column;
gap: 3vw;
font-size: 3.3vw;
flex: 1;
}
.quiz__list-2-2 li {
width: 100%;
display: flex;
justify-content: space-between;
align-items: baseline;
}
.quiz__list-2-2 li div:nth-child(2) {
font-size: 3.89vw;
font-weight: 700;
}
.quiz__res-name {
display: block;
margin-bottom: 3vw;
font-size: 1.2em;
font-weight: 600;
}
.quiz__res-contacts {
display: flex;
align-items: center;
gap: 4vw;
}
.quiz__res-phone {
display: block;
font-weight: 600;
}
@media (min-width: 1250px), (min-width: 990px) and (orientation: landscape) {
.quiz {
border-radius: 5.2vw;
padding: 7.1vw 0 7.1vw;
margin-bottom: 3.3vw;
background-size: 100% auto;
}
.quiz__title {
margin-bottom: -2.4vw;
font-size: 10.68vw;
}
.quiz__sub {
position: absolute;
margin: 0;
left: 0;
bottom: 0;
font-size: 0.94vw;
}
.quiz__wrapper {
width: 66.35vw;
margin-left: auto;
border-radius: 2.08vw;
padding: 3vw 3vw 2.9vw 3vw;
}
.quiz__header {
font-size: 4.32vw;
}
.quiz__head {
display: flex;
justify-content: space-between;
}
.quiz__panel {
margin: 0;
width: 6.667vw;
font-size: 0.63vw;
}
.quiz__scale {
margin: 0.8vw 0;
height: 0.3vw;
border-radius: 0.15vw;
}
.quiz__fieldset {
margin-top: 3.75vw;
}
.quiz__fieldset.quiz__fieldset_v4 {
margin-top: 2.2vw;
}
.quiz__radios {
margin-bottom: 1.95vw;
display: grid;
grid-template-columns: 16.3vw 1fr;
gap: 0.8vw 2vw;
}
.quiz__radios.quiz__radios_v1 {
grid-template-columns: 1fr 1fr;
grid-auto-flow: column;
grid-template-rows: repeat(4, 1fr);
gap: 0.8vw 0.4vw;
}
.quiz__radios.quiz__radios_v2 {
grid-template-columns: 1fr;
grid-auto-flow: column;
grid-template-rows: repeat(4, 1fr);
}
.quiz__radios.quiz__radios_v3 {
grid-template-columns: 1fr;
}
.quiz__radio {
gap: 0.33vw;
font-size: 1.67vw;
}
.quiz__radiobuttons {
margin: 0.93vw 0 1.6vw;
grid-template-columns: 1fr 1fr;
margin-right: -7.71vw;
gap: 0.2vw;
}
.quiz__radiobutton {
padding: 0.6vw 1vw 0.5vw;
border-radius: 0.63vw;
font-size: 0.94vw;
}
.quiz__double-inputs {
flex-direction: row;
gap: 0.53vw;
}
.quiz__double-inputs.quiz__double-inputs_v1 {
margin-top: 1.6vw;
gap: 0.53vw;
}
.quiz__row-1 {
display: flex;
justify-content: space-between;
align-items: flex-end;
position: relative;
}
.quiz__row-1-1 {
margin-top: 5.2vw;
}
.quiz__row-1-2 {
margin-top: 1.8vw;
}
.quiz__row-1-3 {
margin-top: 5.5vw;
}
.quiz__row-1-4 {
margin-top: 2vw;
}
.quiz__row-1-5 {
margin-top: 1vw;
}
.quiz__col-1-1 {
position: absolute;
left: 0;
bottom: 0;
}
.quiz__col-1-3 {
margin-top: 0;
margin-left: 6.9vw;
}
.quiz__col-1-4 {
width: 30vw;
}
.quiz__submits {
margin-top: 0;
margin-left: auto;
width: auto;
display: flex;
align-items: center;
gap: 2vw;
}
.quiz__backs {
order: -1;
margin: 0;
}
.quiz__back {
font-size: 1.25vw;
gap: 0.53vw;
padding: 0.5vw 1.05vw 0.5vw 0.3vw;
border-radius: 0.6vw;
}
.quiz__back-svg {
width: 2.4vw;
}
.quiz__row-2 {
display: grid;
grid-template-columns: 29.27vw 1fr;
gap: 3.2vw;
}
.quiz__col-2-2 {
margin: 0;
display: flex;
align-items: center;
}
.quiz__txt-2-1 {
font-size: 1.67vw;
margin-bottom: 1.6vw;
}
.quiz__list-2-1 {
font-size: 0.93vw;
}
.quiz__list-2-2 {
gap: 0.73vw;
font-size: 0.94vw;
}
.quiz__list-2-2 li div:nth-child(2) {
font-size: 1.25vw;
}
.quiz__res-name {
margin-bottom: 0.2vw;
font-size: 1.67vw;
}
.quiz__res-contacts {
gap: 0.62vw;
}
.quiz__res-phone {
font-size: 1.25vw;
}
}
.faq {
margin-top: 6vw;
}
.faq__pics {
position: relative;
overflow: hidden;
border-radius: 6vw;
}
.faq__pics img {
aspect-ratio: 470/757;
}
.faq__desc {
margin-top: 6vw;
}
.faq__items {
counter-reset: cntFaq;
}
.faq__items .swiper-wrapper {
display: block;
}
.faq__item {
padding: 4vw 4vw;
counter-increment: cntFaq;
border-bottom: 1px solid rgba(239, 241, 247, 0.25);
transition: 0.3s background;
background: rgba(85, 95, 110, 0);
}
.faq__item:hover,
.faq__item.open {
background: rgba(85, 95, 110, 0.3);
}
.faq__item:last-child {
border-bottom-width: 0;
}
.faq__item.open .faq__answer {
grid-template-rows: 1fr;
margin-top: 4vw;
}
.faq__item.open .faq__answer > div::before {
opacity: 0.5;
}
.faq__item.open .faq__ask i .p1 {
opacity: 0;
}
.faq__item:hover .faq__ask i .p1 {
opacity: 0;
}
.faq__ask {
display: flex;
align-items: center;
position: relative;
list-style: none;
text-transform: uppercase;
padding-left: 16vw;
font-weight: 600;
line-height: 1.35;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.faq__ask::before {
content: attr(data-curr);
display: block;
position: absolute;
left: 0;
top: 0.4em;
font-size: 0.625em;
color: var(--text-light-secondary);
font-weight: 400;
}
.faq__ask i {
display: block;
flex: 0 0 1.4em;
margin-left: 1em;
}
.faq__ask i .p1 {
transition: 0.3s opacity;
}
.faq__ask span {
display: block;
flex: 1;
}
.faq__answer {
margin-top: 0;
display: grid;
grid-template-rows: 0fr;
overflow: hidden;
transition: 0.5s grid-template-rows, 0.5s margin;
line-height: 1.5;
font-size: 3.33vw;
position: relative;
text-wrap: pretty;
}
.faq__answer > div {
min-height: 0;
}
.faq__answer > div::before {
content: 'Answer';
display: block;
float: left;
width: 16vw;
opacity: 0;
transition: 0.5s opacity;
font-size: 0.6em;
font-weight: 400;
position: relative;
top: 0.4em;
}
.faq__answer a {
display: inline-block;
position: relative;
}
.faq__answer a:hover::after,
.faq__answer a:focus ::after {
width: 0%;
}
.faq__answer a::after {
content: '';
display: block;
position: absolute;
bottom: 1px;
right: 0;
width: 100%;
height: 1px;
background: currentColor;
transition: 0.3s width;
}
.faq__btns {
display: none;
}
@media (min-width: 1250px), (min-width: 990px) and (orientation: landscape) {
.faq {
margin-top: 3.1vw;
display: grid;
grid-template-columns: 24.48vw 1fr;
gap: 5.2vw;
}
.faq__pics {
border-radius: 2.08vw;
}
.faq__desc {
margin: 0;
flex: 1;
}
.faq__items {
position: relative;
}
.faq__items .swiper {
max-height: 39.43vw;
padding-right: 2.6vw;
}
.faq__items .swiper-pagination {
right: 0;
width: 0.42vw;
border-radius: 0.2vw;
height: 100%;
left: auto;
background-color: var(--text-light-secondary);
display: flex;
flex-direction: column;
border: 0;
}
.faq__items .swiper-pagination .swiper-pagination-bullet {
width: 100%;
flex: 1;
background: #fff;
border: 0;
border-radius: 0.2vw;
margin: 0;
}
.faq__items .swiper-wrapper {
display: flex;
}
.faq__item {
padding: 2.1vw 2.1vw 2vw;
}
.faq__item.open .faq__answer {
margin-top: 1.8vw;
}
.faq__ask {
padding-left: 6.5vw;
font-size: 1.67vw;
}
.faq__answer {
font-size: 1.04vw;
max-width: 34vw;
}
.faq__answer > div::before {
width: 6.5vw;
}
.faq__btns {
display: block;
position: absolute;
z-index: 10;
left: 0;
bottom: 0;
}
}
.order {
margin-top: 16vw;
position: relative;
}
.order__pic {
position: absolute;
z-index: 0;
inset: 0;
}
.order__pic img {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.order__title {
display: block;
margin-bottom: 6vw;
font-size: 6vw;
font-family: var(--font-nurma);
line-height: 1.08;
}
.order__title mark {
color: var(--text-light-secondary);
}
.order__txt {
font-size: 3.89vw;
text-indent: 7.8ch;
color: var(--text-light);
font-weight: 600;
line-height: 1.2;
letter-spacing: -0.005em;
position: relative;
}
.order__txt::before {
content: attr(data-before);
position: absolute;
top: 0.6em;
left: 0;
color: var(--text-light-secondary);
font-size: 0.41em;
letter-spacing: -0.02em;
text-indent: 0;
}
.order__btns {
margin-top: 11vw;
}
@media (min-width: 1250px), (min-width: 990px) and (orientation: landscape) {
.order {
margin-top: 8vw;
}
.order__row {
display: flex;
align-items: flex-end;
justify-content: space-between;
}
.order__btns {
margin: 0;
width: -moz-fit-content;
width: fit-content;
}
.order__desc {
width: 30vw;
}
.order__title {
margin-bottom: 2.2vw;
font-size: 3.12vw;
}
.order__txt {
text-indent: 7.3ch;
font-size: 1.51vw;
}
.order__pic {
inset: auto 0 0 0;
}
.order__pic img {
position: relative;
height: auto;
}
}