html,
body,
div,
span,
p,
a,
del,
em,
img,
ol,
ul,
li,
fieldset,
form,
label {
margin: 0;
padding: 0;
border: 0;
vertical-align: baseline;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
display: block;
padding: 0;
margin: 0;
}
html,
body {
line-height: 1;
min-height: 100%;
scroll-behavior: smooth;
}
html.scrolling, body.scrolling {
scroll-behavior: auto;
}
ol,
ul {
list-style: none;
}
input:focus {
outline: 0;
}
textarea:focus {
outline: 0;
}
img {
border: none;
}
h1, h2, h3, h4, h5 {
font-weight: normal;
padding: 0;
margin: 0;
}
a {
text-decoration: none;
}
body {
-webkit-text-size-adjust: none;
-webkit-font-smoothing: antialiased !important;
-moz-osx-font-smoothing: grayscale !important;
text-rendering: optimizeLegibility !important;
background: var(--grey);
/* overflow: auto; */
}
.scroll-width-catcher-element {
position: relative;
float: left;
min-height: 20vh;
height: 20;
width: 100%;
overflow: scroll;
opacity: 0;
}
.scroll-width-catcher-element2 {
position: relative;
float: left;
min-height: 40vh;
height: 40vh;
width: 100%;
}
:root {
/* --aquamarine: #50baaf;
--aquamarine-big-logo: #4aa39a; */
--aquamarine: #39d5c6;
--aquamarine-big-logo: #44cfc1;
--aquamarine-bg: #75ada6;
--aquamarine-bg: #72ada6;
/* --grey: #d0d0d0; */
--grey: #cccccc;
--grey2: #373737;
--grey3: #dadada;
--white: #FFF;
--orange: #ff5a00;
--orange2: #ff7200;
--black: #000000;
--content-margins: 0.781vw;
--header-margin-top: 0.6vw;
--logo-margin-top: 0.0vw;
--grid-col-gap: 0.546vw;
--body-width: calc(100vw - var(--scrollbar-width));
--grid-col-width: calc(var(--body-width) / 8 - var(--grid-col-gap) - var(--content-margins) * 2 / 8 + var(--grid-col-gap) / 8);
--font-size: 1.25vw;
--content-width-with-margins: calc(100% - var(--content-margins)* 2);
--arial-family: Arial, sans-serif;
--viewport-height: 100vh;
--ease-in-quad: cubic-bezier(0.55,0.085,0.68,0.53);
--ease-in-cubic: cubic-bezier(0.55,0.055,0.675,0.19);
--ease-in-quart: cubic-bezier(0.895,0.03,0.685,0.22);
--ease-in-quint: cubic-bezier(0.755,0.05,0.855,0.06);
--ease-in-expo: cubic-bezier(0.95,0.05,0.795,0.035);
--ease-in-circ: cubic-bezier(0.6,0.04,0.98,0.335);
--ease-out-quad: cubic-bezier(0.25,0.46,0.45,0.94);
--ease-out-cubic: cubic-bezier(0.215,0.61,0.355,1);
--ease-out-quart: cubic-bezier(0.165,0.84,0.44,1);
--ease-out-quint: cubic-bezier(0.23,1,0.32,1);
--ease-out-expo: cubic-bezier(0.19,1,0.22,1);
--ease-out-circ: cubic-bezier(0.075,0.82,0.165,1);
--ease-in-out-quad: cubic-bezier(0.455,0.03,0.515,0.955);
--ease-in-out-cubic: cubic-bezier(0.645,0.045,0.355,1);
--ease-in-out-quart: cubic-bezier(0.77,0,0.175,1);
--ease-in-out-quint: cubic-bezier(0.86,0,0.07,1);
--ease-in-out-expo: cubic-bezier(1,0,0,1);
--ease-in-out-circ: cubic-bezier(0.785,0.135,0.15,0.86);
--arrow-grey: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 12' fill='%23373737'%3E%3Cg%3E%3Cg%3E%3Cpath d='M10.3,5.4H0.5v1.2h9.9V5.4z M9.4,0.1L8.6,0.9l5,5.3l-5,4.9l0.8,0.8l5.8-5.7L9.4,0.1z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
--arrow-black: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 12' fill='%23000000'%3E%3Cg%3E%3Cg%3E%3Cpath d='M10.3,5.4H0.5v1.2h9.9V5.4z M9.4,0.1L8.6,0.9l5,5.3l-5,4.9l0.8,0.8l5.8-5.7L9.4,0.1z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
--transition-colorful: filter 0.9s ease-in-out 0.1s;
}
@media (orientation: portrait) {
:root {
--content-margins: 5px;
--header-margin-top: 0.9vw;
--logo-margin-top: 1vw;
--grid-col-gap: 5px;
/* --grid-col-width: calc(100vw / 7 - var(--grid-col-gap)); */
--grid-col-width: calc(var(--body-width) / 7 - var(--grid-col-gap) - var(--content-margins) * 2 / 7 + var(--grid-col-gap) / 7);
--font-size: 3.5vw;
}
}
@media all and (orientation: portrait) and (min-width: 550px) {
:root {
--header-margin-top: 0.6vw;
--logo-margin-top: 0.5vw;
--font-size: 2.3vw;
}
}
:root {
--w-x1: var(--grid-col-width);
--w-x2: calc(var(--grid-col-width) * 2 + var(--grid-col-gap));
--w-x3: calc(var(--grid-col-width) * 3 + var(--grid-col-gap) * 2);
--w-x4: calc(var(--grid-col-width) * 4 + var(--grid-col-gap) * 3);
--w-x5: calc(var(--grid-col-width) * 5 + var(--grid-col-gap) * 4);
--w-x6: calc(var(--grid-col-width) * 6 + var(--grid-col-gap) * 5);
--w-x7: calc(var(--grid-col-width) * 7 + var(--grid-col-gap) * 6);
--w-x8: calc(var(--grid-col-width) * 8 + var(--grid-col-gap) * 7);
--lft-x1: 0;
--lft-x2: calc(var(--w-x1) + var(--grid-col-gap));
--lft-x3: calc(var(--w-x2) + var(--grid-col-gap));
--lft-x4: calc(var(--w-x3) + var(--grid-col-gap));
--lft-x5: calc(var(--w-x4) + var(--grid-col-gap));
--lft-x6: calc(var(--w-x5) + var(--grid-col-gap));
--lft-x7: calc(var(--w-x6) + var(--grid-col-gap));
--lft-x8: calc(var(--w-x7) + var(--grid-col-gap));
}
* {
font-family: var(--arial-family);
font-optical-sizing: auto;
font-weight: 400;
font-style: normal;
color: var(--grey2);
font-size: var(--font-size);
/* text-transform: uppercase; */
}
body {
pointer-events: none;
}
body.dataLoaded {
pointer-events: all;
}
input, textarea {
-webkit-appearance: none;
border-radius: 0;
padding: 0;
}
input::placeholder {
color: #000;
}
::selection {
background: var(--orange);
}
::-moz-selection {
background: var(--orange);
}
.disable-scroll::-webkit-scrollbar {
display: none;
}
.disable-scroll {
scrollbar-width: none;
}
.order-button-wrap {
position: relative;
float: right;
}
.button, .button-with-arrow {
position: relative;
float: left;
padding: 0.85em 1.15em;
border-radius: 0.5em;
background-color: var(--orange);
color: var(--black);
cursor: pointer;
}
.button:hover, .button-with-arrow:hover {
background-color: var(--orange2);
}
.button-with-arrow {
background-image: var(--arrow-black);
background-repeat: no-repeat;
background-size: auto 0.75em;
background-position: 0.65em 50%;
padding: 0.85em 1.15em 0.85em 1.9em;
transition: background-position var(--ease-in-out-quart) 0.3s;
}
.button-with-arrow:hover {
background-position: 0.8em 50%;
}
.button-with-arrow.act.magic-link {
background-color: #909090;
pointer-events: all;
}
/* magic navigation */
.display-none {
/*display: none;*/
visibility: hidden;
}
.loader-layout {
position: fixed;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
overflow: hidden;
z-index: 20;
color: #fff;
/* opacity: 0.5; */
/* -webkit-mask-image: linear-gradient(rgb(0 0 0), rgb(0 0 0));
mask-image: linear-gradient(rgb(0 0 0), rgb(0 0 0)); */
/* mask-size: 100%; */
}
.loader-layout.noTransitions, .loader-layout.noTransitions * {
transition: none
}
body.dataLoaded .loader-layout {
pointer-events: none;
}
.loader-wrapper1 {
position: relative;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
overflow: hidden;
background: var(--orange);
color: var(--white);
/* transition: transform 0.9s cubic-bezier(0.55, 0.09, 0.68, 0.53); */
}
body.dataLoaded .loader-wrapper1 {
/* transform: translate3d(0px,100%,0px); */
}
body.dataReload .loader-wrapper1 {
/* transform: translate3d(0px,-100%,0px); */
}
.loader-wrapper2 {
position: relative;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
overflow: hidden;
/* transition: transform 0.9s cubic-bezier(0.55, 0.09, 0.68, 0.53); */
}
body.dataLoaded .loader-wrapper2 {
/* transform: translate3d(0px,-100%,0px); */
}
body.dataReload .loader-wrapper2 {
/* transform: translate3d(0px,100%,0px); */
}
.invisible {
pointer-events: none;
opacity: 0;
visibility: hidden;
}
.loader-logo {
position: absolute;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
background-image: url(/img/preloader.gif);
background-position: 50%;
background-repeat: no-repeat;
background-size: 140px 140px;
}
.loader-dark-fader {
position: absolute;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
background-color: rgba(0, 0, 0, 0.3);
opacity: 0;
}
.navi-lang-wrap {
position: fixed;
height: var(--viewport-height);
overflow: hidden;
width: 100%;
z-index: 15;
}
.navi-lang {
position: fixed;
/* width: calc(100% - var(--scrollbar-width) - var(--content-margins) * 2); */
width: 100%;
top: 0px;
z-index: 15;
padding-left: var(--content-margins);
padding-right: var(--content-margins);
/* top: var(--header-margin-top); */
padding-top: var(--header-margin-top);
padding-bottom: var(--header-margin-top);
transform-origin: 50% 30vw;
opacity: 0;
box-sizing: border-box;
/* backdrop-filter: blur(5px); */
backdrop-filter: blur(5px);
}
body.chromium .navi-lang {
backdrop-filter: blur(3px) url(#pageCurl);
}
body.mobile .navi-lang {
backdrop-filter: blur(5px);
}
.navi-lang::after {
content: "";
position: absolute;
width: 100%;
height: 1px;
bottom: -1px;
left: 0px;
background-color: var(--orange);
}
body.animFirstStartOnly .navi-lang {
opacity: 1;
}
.navi-lang *:not(.button-with-arrow):not(.button):not(.main-menu-btn0 *) {
color: var(--grey2);
transition: color linear 0.4s, background-color linear 0.4s;
}
body.opened-menu .navi-lang *:not(.button-with-arrow):not(.button):not(.main-menu-btn0 *) {
color: var(--grey2);
}
body:not(.dataLoaded) .navi-lang *:not(.button-with-arrow):not(.button):not(.main-menu-btn0 *) {
color: var(--grey2);
}
.magic-navigation {
position: relative;
float: left;
width: calc(var(--w-x3) + var(--grid-col-gap));
margin-left: var(--grid-col-gap);
display: grid;
grid-template-columns: repeat(3, max-content);
grid-auto-flow: row;
column-gap: 1.25em;
z-index: 2;
}
.magic-navigation li {
position: relative;
/*display: block;
float: left; */
/* width: var(--w-x1); */
/* margin-right: var(--grid-col-gap); */
/* margin-bottom: 0.37em; */
margin-bottom: 0.05em;
}
.magic-navigation a {
/* padding-left: calc(var(--font-size)* 0.85); */
padding-left: 0.85em;
padding-right: 0.2em;
/* opacity: 0; */
display: inline-block;
padding-top: 0.15em;
padding-bottom: 0.15em;
white-space: nowrap;
}
.magic-navigation a::after {
content: '';
position: absolute;
width: 0.8em;
height: 0.96em;
background: url(/img/bullet-navi3.svg) no-repeat 0% 0%;
background-size: 100% auto;
left: 0px;
top: 0.2em;
}
.magic-navigation a:hover::after, .magic-navigation li:hover a::after {
background-position: 0% 100%;
}
.magic-navigation a.act::after {
background-position: 0% 100%, 0%;
animation: none;
}
.magic-navigation li:has(.drop-down-wrapper li.act) a::after {
background-position: 0% 100%, 0%;
animation: none;
}
div.main-menu-btn {
position: absolute;
float: left;
width: 2.65em;
height: 2.65em;
z-index: 2;
right: 0;
top: 0px;
z-index: 5;
pointer-events: all;
display: none;
background-color: var(--orange);
border-radius: 0.5em;
margin-left: 0.5em;
}
@media (orientation: portrait) {
div.main-menu-btn {
display: block;
float: right;
position: relative;
}
.magic-navigation {
display: none;
}
}
div.main-menu-btn0 {
position: absolute;
float: left;
width: 20px;
height: 20px;
cursor: pointer;
transition: all 0.25s ease-in-out;
transform: translate3d(-50%, -50%, 0);
left: 50%;
top: 50%;
}
div.main-menu-btn div.line1, div.main-menu-btn div.line2, div.main-menu-btn div.line3 {
position: absolute;
float: left;
width: 100%;
height: 0.13em;
background-color: currentColor;
background-color: var(--black) !important;
left: 0px;
transition: all 0.5s ease-in-out;
transition-property: transform, background-color;
}
div.main-menu-btn div.line1, div.main-menu-btn div.line2, div.main-menu-btn div.line3 {
transform-origin: 50% 50%;
}
div.main-menu-btn div.line1 {
top: 3px;
}
div.main-menu-btn div.line2 {
top: 9px;
}
div.main-menu-btn div.line3 {
top: 15px;
}
div.main-menu-btn0:hover div.line1, div.main-menu-btn0:hover div.line2, div.main-menu-btn0:hover div.line3 {
}
body.opened-menu div.main-menu-btn0 div.line1, body.booking-menu div.main-menu-btn0 div.line1 {
transform: translate3d(0px, 6px, 0px) rotate3d(0, 0, 1, 45deg)
}
body.opened-menu div.main-menu-btn0 div.line2, body.booking-menu div.main-menu-btn0 div.line2 {
transform: translate3d(0px, 0px, 0px) scale3d(0.2,1,1);
opacity: 0;
}
body.opened-menu div.main-menu-btn0 div.line3, body.booking-menu div.main-menu-btn0 div.line3 {
transform: translate3d(0px, -6px, 0px) rotate3d(0, 0, 1, -45deg);
}
.cookie-popup {
position: fixed;
background-color: white;
padding: 12px 17px 10px 17px;
border-radius: 12px;
/* box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.25); */
text-align: center;
max-width: 400px;
z-index: 20;
bottom: 10px;
left: 50%;
transform: translate3d(-50%, 200px, 0);
display: grid;
/* grid-template-columns: repeat(2, max-content);
grid-auto-flow: row;
column-gap: 1.75em; */
}
.cookie-popup h2 {
font-size: 14px;
margin-bottom: 12px;
}
.cookie-popup button {
/* background-color: black; */
/* color: white; */
border: none;
/* padding: 7px 15px; */
font-size: 14px;
/* cursor: pointer; */
/* transition: background-color 0.3s; */
/* border-radius: 50em; */
}
.cookie-popup button:hover {
/* background-color: #333; */
}
.cookie-close-btn {
position: absolute;
top: 3px;
right: 7px;
font-size: 20px;
cursor: pointer;
background: none;
border: none;
color: #999;
color: #000 !important;
background-color: transparent !important;
font-size: 25px !important;
}
.site-logo {
position: relative;
float: left;
width: var(--w-x2);
left: 0;
top: var(--logo-margin-top);
}
.head-logo {
position: relative;
float: left;
width: calc( var(--w-x1) * 1.3 );
}
.head-moto {
position: absolute;
top:0px;
left:0px;
font-family: var(--arial-family);
font-size: 1.2em;
}
.head-moto span {
display: inline-block;
font-size: 0.95em;
margin-left:0.1em;
}
@media (orientation: portrait) {
.site-logo {
width: var(--w-x3);
display: flex;
align-items: center;
justify-content: space-between;
}
.head-moto {
font-size: 1.1em;
}
.head-logo {
position: relative;
float: left;
width: calc(var(--w-x2) + var(--w-x2) / 3);
}
}
@media all and (orientation: portrait) and (min-width: 550px) {
.head-logo {
position: relative;
float: left;
width: calc(var(--w-x2) );
}
}
.lang-menu {
position: absolute;
width: var(--w-x1);
text-align: right;
right: 0px;
top: 0px;
padding-top: 0.1em;
padding-bottom: 0.1em;
background-size: 4px 4px;
}
@media (orientation: portrait) {
.lang-menu {
/* display: none; */
}
}
.magic-link.act {
pointer-events: none;
}
.lang-riga {
position: relative;
float: left;
z-index: 1;
width: var(--w-x1);
margin-left: calc( var(--grid-col-gap) + var(--lft-x2) );
margin-left: calc( var(--grid-col-gap) );
}
.lang-menu {
position: relative;
float: left;
padding-top: 0.2em;
padding-bottom: 0.1em;
/* background: url(/img/dotted-bg2.svg) repeat 0% 0%; */
background-size: 4px 4px;
opacity: 0;
transition: opacity 0.15s ease-in-out 0.4s;
transition-delay: 0.8s;
}
body.dataLoaded .lang-menu {
opacity: 1;
transition-delay: 0.4s;
}
@media (orientation: portrait) {
.lang-riga {
/* width: var(--w-x2); */
left: var(--lft-x1);
/* background: none; */
transform: none;
margin-left: var(--grid-col-gap);
}
.riga-watch {
display: none;
}
.lang-menu {
padding-top: 0.95em;
}
}
.languages {
position: relative;
float: left;
}
@media (orientation: portrait) {
.languages{
width: 20vw;
}
}
.languages li {
float: left;
margin-right: 0.85em;
}
.languages li:last-child {
margin-right: 0;
}
.languages li a {
/* opacity: 0; */
text-transform: uppercase;
}
.languages li.act {
display: none;
}
.magic-link.act {
pointer-events: none;
}
.riga-watch {
position: relative;
float: left;
padding-top: 0.2em;
padding-bottom: 0.1em;
/* background: url(/img/dotted-bg2.svg) repeat 0% 0%; */
background-size: 4px 4px;
clear: both;
margin-top: 0.03em;
transition: opacity 0.15s ease-in-out 0.5s;
transition-delay: 0.9s;
opacity: 0;
}
body.dataLoaded .riga-watch {
opacity: 1;
transition-delay: 0.5s;
}
.rw-watch {
position: relative;
float: left;
margin-top: 0.05em;
}
@media (orientation: portrait) {
.rw-watch {
margin-top: 0.1em;
}
}
.rw-location {
position: relative;
float: left;
padding-left: 0.35em;
top: -.07vw;
cursor: default;
}
obj-clock {
width: 10em;
height: 10em;
}
#clocks_sep {
animation: clocks-sep-anim 2s steps(1, end) infinite;
}
@keyframes clocks-sep-anim {
0% {
opacity: 1;
}
50% {
opacity: 0;
}
}
/* magic navigation */
/* Drop down menu */
.magic-navigation .drop-down-wrapper a::after {
content: none;
}
.drop-down-wrapper {
position: absolute;
/* top: calc( var(--content-margins) + 1.3em ); */
top: 0;
padding-top: calc( var(--content-margins) + 1.3em );
left: 0px;
opacity: 0;
pointer-events: none;
transition: none !important;
width: calc( var(--w-x5) + var(--content-margins) );
}
.magic-navigation li:hover .drop-down-wrapper {
opacity: 1;
pointer-events: all;
/* transition: opacity var(--ease-in-out-circ) 0.4s !important; */
cursor: pointer;
}
.drop-down-wrapper ul {
position: relative;
float: left;
width: 100%;
counter-reset: dd-item;
overflow: hidden;
}
.drop-down-wrapper li {
position: relative;
float: left;
width: 100%;
counter-increment: dd-item;
margin-bottom: 0;
opacity: 0;
transition: all var(--ease-out-quart) 0.5s !important;
/* transition-delay: calc(0.5s * var(--i)) !important; */
transform: translate3d(0, -100%, 0);
}
.drop-down-wrapper li:nth-child(1) {
transition-delay: 0 !important;
z-index: 7;
}
.drop-down-wrapper li:nth-child(2) {
transition-delay: 0.05s !important;
z-index: 6;
}
.drop-down-wrapper li:nth-child(3) {
transition-delay: 0.1s !important;
z-index: 5;
}
.drop-down-wrapper li:nth-child(4) {
transition-delay: 0.15s !important;
z-index: 4;
}
.drop-down-wrapper li:nth-child(5) {
transition-delay: 0.2s !important;
z-index: 3;
}
.drop-down-wrapper li:nth-child(6) {
transition-delay: 0.25s !important;
z-index: 2;
}
.drop-down-wrapper li:nth-child(7) {
transition-delay: 0.3s !important;
z-index: 1;
}
.magic-navigation li:hover .drop-down-wrapper li {
opacity: 1;
transform: translate3d(0, 0, 0);
/* transition: opacity var(--ease-in-out-circ) 0.4s !important; */
}
.drop-down-wrapper a {
position: relative;
float: left;
width: 100%;
background-color: var(--white);
font-size: 1.2em;
transition: background-color var(--ease-in-out-circ) 0.1s !important;
white-space: normal;
box-sizing: border-box;
/* width: var(--w-x3); */
min-height: 4em;
padding-left: 2em;
padding-top: 0.3em;
padding-right: 1.5em;
border-bottom: 1px solid var(--orange);
background-image: var(--arrow-grey);
background-size: 0.9em auto;
background-position: 99% 0.45em;
background-repeat: no-repeat;
}
.drop-down-wrapper li:last-child a {
border-bottom: none;
}
.drop-down-wrapper a:hover {
background-color: var(--orange);
}
.drop-down-wrapper li.act a {
background-color: var(--orange);
}
.drop-down-wrapper a::before {
content: counter(dd-item, decimal-leading-zero) ;
position: absolute;
left: 0.3em;
top: 0.6em;
float: left;
font-size: 0.65em;
}
.drop-down-wrapper span {
position: relative;
float: left;
width: 100%;
font-size: 0.7em;
padding-top: 0.5em;
}
/* Drop down menu */
/* Magic Scroll */
.page-layout {
position: relative;
background: var(--white);
width: 100%;
}
/*
.page-scroll {
position: fixed;
width: 100%;
height: 100%;
}
*/
.page-scroll {
position: relative;
float: left;
width: 100%;
height: auto;
}
.overflow-hidden {
overflow: hidden;
height: var(--viewport-height);
}
.fake-scroll {
position: relative;
float: left;
width: 100%;
}
.site-content {
position: relative;
float: left;
width: 100%;
/* overflow: hidden; */
}
.block-sticky {
position: relative;
height: calc(100% - 100vh);
/* height: calc(100% - var(--viewport-height)); */
box-sizing: border-box;
top: 0px;
}
body.mobile .block-sticky {
/* height: 100vh; */
/* height: var(--viewport-height); */
position: sticky;
position: -webkit-sticky;
}
.magic-pixels img {
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
top: 0px;
left: 0px;
display: none;
}
.pixCanvasWrapper {
position: relative;
float: left;
width: 100%;
height: 100%;
}
.pixCanvasWrapper canvas {
position: relative;
float: left;
width: 100%;
height: 100%;
image-rendering: crisp-edges; /* for firefox */
image-rendering: pixelated;
}
/* Magic Scroll */
.loader-only-first-time {
position: absolute;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
/* background: var(--grey); */
color: var(--grey2);
}
.loader-only-first-time * {
color: var(--grey2);
font-size: 18px;
}
.lm-pic {
position: absolute;
/* width: 55vmin;
height: 55vmin; */
width: 60vw;
height: 100vh;
left: 50%;
top: 50%;
transform: translate3d(-50%, -50% ,0);
}
.lm-pic-wrapper {
position: absolute;
width: 100%;
height: auto;
top: 50%;
left: 0px;
}
.lm-pic-wrapper2 {
position: absolute;
width: 100%;
height: auto;
transform: translate3d(0,-50%,0);
height: 10.5vw;
}
.lm-loadin-text {
position: absolute;
text-align: center;
/* bottom: 20px; */
bottom: 1.3vh;
left: 0px;
width: 100%;
font-size: 18px;
display: flex;
justify-content: center;
gap: 20px;
}
@media (orientation: portrait) {
.lm-loadin-text {
bottom: 0.9vh;
}
}
.lm-lt-progress {
position: relative;
display: inline-block;
transition: opacity 0.2s;
}
svg.lm-logo-1-portrat {
display: none;
}
svg.lm-logo-2-portrat {
display: none;
}
@media (orientation: portrait) {
svg.lm-logo-1-landscape {
display: none;
}
svg.lm-logo-2-landscape {
display: none;
}
svg.lm-logo-1-portrat {
display: block;
}
svg.lm-logo-2-portrat {
display: block;
}
}
.blind {
position: absolute;
width: 100%;
}
.lm-logo-final .blind {
background-color: var(--grey);
}
.preloader-allpages {
position: absolute;
width: 100%;
height:100%;
left: 0;
top:0;
}
.preloader-allpages * {
color: var(--white);
}
.firstPreloading {
position: fixed;
width: 1px;
height: 0px;
z-index: -1500;
}
/* .grid-grid {
position: fixed;
width: calc(100% - var(--content-margins)*2);
box-sizing: border-box;
margin-left: var(--content-margins);
margin-right: var(--content-margins);
height: 100%;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-between;
z-index: 30;
}
*/
.grid-grid {
position: fixed;
width: calc(100% - var(--content-margins)*2);
box-sizing: border-box;
margin-left: var(--content-margins);
margin-right: var(--content-margins);
height: 100%;
display: block;
/* flex-direction: row;
flex-wrap: nowrap;
justify-content: space-between; */
z-index: 30;
pointer-events: none;
}
.grid-grid .grid-col {
position: relative;
float: left;
height: 100%;
border: 1px solid aquamarine;
width: var(--grid-col-width);
box-sizing: border-box;
margin-right: var(--grid-col-gap);
opacity: 0.5;
}
.grid-grid .grid-col:nth-child(8) {
margin-right: 0;
}
@media (orientation: portrait) {
.grid-grid .grid-col:last-child {
display: block;
}
.grid-grid .grid-col:nth-child(6) {
margin-right: var(--grid-col-gap);
}
.grid-grid .grid-col:nth-child(7) {
margin-right: 0;
}
.grid-grid .grid-col:last-child {
display: none;
}
}
.layout-grid-text {
position: fixed;
width: calc(100% - var(--content-margins)*2);
margin-left: var(--content-margins);
margin-right: var(--content-margins);
height: 100%;
z-index: 30;
pointer-events: none;
}
.layout-grid-text * {
position: absolute;
background:#201dc9;
left: 0px;
height: 50px;
}
.w-x1 {
width: var(--w-x1);
top: 0px;
left: var(--lft-x1);
}
.w-x2 {
width: var(--w-x2);
top: 60px;
left: var(--lft-x2);
}
.w-x3 {
width: var(--w-x3);
top: 120px;
left: var(--lft-x3);
}
.w-x4 {
width: var(--w-x4);
top: 180px;
}
.w-x5 {
width: var(--w-x5);
top: 240px;
}
.w-x6 {
width: var(--w-x6);
top: 300px;
}
.w-x7 {
width: var(--w-x7);
top: 360px;
}
/* clocks */
/* :host {
display: block;
} */
.clock {
position: relative;
--diameter: 100%;
--radius: 50%;
--hand-width: 12%;
/* width: 100%;
height: 100%; */
width: 0.85em;
height: 0.85em;
border-radius: 50%;
border: 0.1em solid currentColor;
box-sizing: border-box;
margin-left: 0.07em;
}
.hand {
background-color: currentColor;
position: absolute;
left: calc(var(--radius) - calc(var(--hand-width) / 2));
transform-origin: 50% 90%;
transform: rotateZ(var(--deg));
border-radius: 50px;
}
#hour {
--deg: 0;
top: 13%;
height: 42%;
width: 12%;
}
#minute {
--deg: 0;
top: 4%;
height: 51%;
width: 12%;
}
#second {
--deg: 0;
top: 14%;
height: 45%;
width: 1%;
transform-origin: 50% 80%;
background: #fdaa38;
z-index: 11;
}
.clock.mounted #minute,
.clock.mounted #second {
transition: transform 0.2s cubic-bezier(.4,2.08,.55,.44);
}
/* clocks */
.loader-layout {
height: var(--viewport-height);
}
.loaderAnimOpening {
animation: mask-play 0.8s steps(46) forwards 0s;
}
.loaderAnimClosing {
animation: mask-play-back 1s steps(46, end) forwards 0s;
}
/* colorful picture effect animation */
.colorful-fx {
/* filter: grayscale(100%); */
filter: blur(10px);
transition: var(--transition-colorful);
}
.colorful-fx.come-in {
filter: grayscale(0%);
filter: blur(0px);
}
/* colorful picture effect animation */
/* mainmenu mobile */
.mainmenu-overlay {
position: fixed;
z-index: 10;
width: 100%;
height: 100%;
height: var(--viewport-height);
display: flex;
align-items: center;
overflow-y: auto;
overflow-x: hidden;
}
.mainmenu-overlay * {
color: var(--grey2);
}
@media (orientation: landscape) {
.mainmenu-overlay {
pointer-events: none;
opacity: 0;
visibility: hidden;
}
}
.mainmenu-wrapper {
position: relative;
width: 100%;
min-height: 100%;
top: 0px;
left: 0px;
display: flex;
align-items: center;
}
body.opened-menu .mainmenu-overlay {
animation: mask-play 0.65s steps(46) forwards 0s;
}
body.opened-menu.mainmenu-overlay-close .mainmenu-overlay {
animation: mask-play-back 0.5s steps(46, end) forwards 0s;
}
.mo-bg-wrapper {
position: fixed;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
/* background-color: var(--grey2-bg); */
/* color: var(--brown); */
}
.mo-bg-wrapper .blind {
background-color: var(--white);
}
.mo-wrapper {
position: relative;
float: left;
width: var(--w-x7);
margin-left: var(--content-margins);
box-sizing: border-box;
margin-top: 5em;
}
.mo-navigation-menu {
position: relative;
float: left;
width: 100%;
/* border-top: 2px solid currentColor; */
counter-reset: menu-counter;
}
.mo-navigation-menu li {
counter-increment: menu-counter;
position: relative;
float: left;
width: 100%;
padding: 0.5vw 0 0.5vw 0;
/* border-bottom: 1.3px solid currentColor; */
height: 2.7em;
display: grid;
align-items: center;
grid-template-columns: var(--w-x2) var(--w-x5);
}
.mo-navigation-menu li a {
position: relative;
float: left;
/* display: inline-block; */
/* font-size: 1.4em; */
/* padding-right: 0.2em; */
/* opacity: 0; */
display: block;
padding-top: 0.15em;
padding-bottom: 0.15em;
min-height: 1em;
margin-left: var(--grid-col-gap);
font-size: 1.2em;
}
.mo-navigation-menu li::before {
content: counter(menu-counter, decimal-leading-zero) ;
position: relative;
float: left;
/* width: var(--w-x3); */
font-family: var(--arial-family);
/* padding-top: 0.5em; */
font-size: 0.7em;
}
.mo-navigation-menu li i {
display: inline-block;
font-style: normal;
font-size: 1.4em;
position: relative;
}
.mo-navigation-menu li a.act span {
font-family: var(--arial-family) !important;
font-size: var(--times-font-size);
line-height: var(--times-line-height);
}
.mo-navigation-menu li a.act i::before {
content: "[";
position: absolute;
left: -0.32em;
bottom: 0.1em;
}
.mo-navigation-menu li a.act i::after {
content: "]";
position: absolute;
right: -0.32em;
bottom: 0.1em;
}
.mo-navigation-menu li:hover a i::before {
content: "[";
position: absolute;
left: -0.32em;
bottom: 0.1em;
}
.mo-navigation-menu li:hover a i::after {
content: "]";
position: absolute;
right: -0.32em;
bottom: 0.1em;
}
.mo-line {
position: absolute;
width: 100%;
/* height: 1.3px; */
/* background: currentColor; */
top: 0px;
left: 0px;
border-top: 1.3px solid var(--orange);
transform: scale3d(0,1,1);
transform-origin: 0;
}
li:first-child .mo-line {
border-top: 2px solid var(--orange);
}
.mo-line-last {
bottom: 0px;
border-bottom: 1.3px solid var(--orange);
height: 100%;
pointer-events: none;
}
.mo-contacts {
position: relative;
float: left;
width: 100%;
margin-top: 3em;
}
.mo-contacts li {
position: relative;
float: left;
margin-left: var(--lft-x3);
width: var(--w-x5);
line-height: 1.7em;
}
.mo-contacts li:first-child {
margin-left: var(--lft-x1);
width: var(--w-x7);
line-height: 1.7em;
font-size: 1em;
}
.mo-contacts li a {
background-size: auto 0.7em;
padding-left: 1.3em;
background-repeat: no-repeat;
background-position: 0 50%;
background-image: var(--arrow-grey);
}
.mo-contacts li * {
font-size: 1.2em;
}
a.outer-link {
}
a.outer-link::after {
content: '';
display: block;
width: 0.96em;
height: 0.96em;
background: url(/img/arrow-outer.svg) no-repeat 100% 0%, url(/img/arrow-outer.svg) no-repeat 100% 0%;
background-size: contain;
position: absolute;
top: 0;
left: 100%;
transition: background-position .5s cubic-bezier(.216,.60,.350,1);
background-position: 0 0, -1em 1em;
}
a.outer-link:hover::after {
background-position: 1em -1em, 0 0;
animation: opacity-in-out 0.2s ease-in-out;
}
.mo-head {
position: relative;
float: left;
width: 100%;
/* margin-bottom: 5vw; */
/* height: 6.3em; */
}
.mo-head h4 {
position: relative;
float: left;
font-weight: normal;
font-size: 1em;
margin: 0;
font-family: var(--arial-family);
padding-bottom: 0.7em;
}
.mo-head b {
position: relative;
float: left;
font-weight: normal;
font-size: 3vw;
top: 6.5vw;
}
/* end of mainmenu mobile */
/* sumenu mobile */
.mo-black-fader {
position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.5);
backdrop-filter: blur(1px);
opacity: 0;
/* pointer-events: none; */
}
.mo-subservices {
position: absolute;
/* top: calc( var(--content-margins) + 1.3em ); */
top: 0;
/* padding-top: 3em; */
margin-top: 5em;
right: 0px;
opacity: 1;
width: calc( var(--w-x6) + var(--content-margins) + ( var(--w-x1) / 2 ) );
background-color: var(--white);
min-height: calc(100% - 7em);
transform: translate3d(100%,0,0);
}
.mo-submenu {
position: relative;
float: left;
width: 100%;
display: none;
}
.mo-subservices ul {
position: relative;
float: left;
width: 100%;
counter-reset: dd-item;
overflow: hidden;
}
.mo-subservices li {
position: relative;
float: left;
width: 100%;
counter-increment: dd-item;
margin-bottom: 0;
}
.mo-subservices a {
position: relative;
float: left;
width: 100%;
background-color: var(--white);
font-size: 1.2em;
transition: background-color var(--ease-in-out-circ) 0.1s !important;
white-space: normal;
box-sizing: border-box;
/* width: var(--w-x3); */
min-height: 4em;
padding-left: 2em;
padding-top: 0.3em;
padding-right: 1.5em;
border-top: 1px solid var(--orange);
background-image: var(--arrow-grey);
background-size: 0.9em auto;
background-position: 99% 0.45em;
background-repeat: no-repeat;
}
.mo-subservices a:hover {
background-color: var(--orange);
}
.mo-subservices a.act {
background-color: var(--orange);
}
.mo-subservices a::before {
content: counter(dd-item, decimal-leading-zero) ;
position: absolute;
left: 0.3em;
top: 0.6em;
float: left;
font-size: 0.65em;
}
.mo-subservices span {
position: relative;
float: left;
width: 100%;
font-size: 0.7em;
padding-top: 0.5em;
}
.mo-back-btn {
margin: 0.5em 0.7em;
}
/* sumenu mobile */
/* cursor */
.cursor-container {
position: fixed;
top: 0px;
left: 0px;
width: 90px;
height: 90px;
visibility: inherit;
z-index: 100;
pointer-events: none;
}
.cursor-container-wrap {
position: absolute;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
transition: transform 0.1s ease-in-out;
}
.cursor-container.mouse-down .cursor-container-wrap {
transform: scale3d(0.5, 0.5, 1);
}
.cursor-accent {
mix-blend-mode: difference;
opacity: 0.75;
opacity: 1;
}
body.mobile .cursor-container {
display: none;
}
.cursor-circle-container {
position: relative;
width: 11px;
height: 11px;
top: 38px;
left: 40px;
background: transparent;
will-change: transform;
}
.cursor-circle {
position: relative;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
}
.cursor-circle-regular {
position: absolute;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
border: 1px solid var(--orange);
border-radius: 90px;
background: rgba(244,207,180,0);
transition: all 0.02s cubic-bezier(0.21, 0.35, 0.25, 0.85);
transition-property: transform, background, border;
will-change: transform, background, border, opacity;
}
.cursor-accent .cursor-circle-regular {
transform: scale3d(4.5, 4.5, 1);
opacity: 0.1;
}
.cursorPreloader .cursor-circle-regular {
/* border: 1px solid #FFF; */
border-color: rgba(255,255,255,1);
animation: cursorPreloaderAnim 0.4s linear infinite;
}
@keyframes cursorPreloaderAnim {
0% {border-color: rgba(255,255,255,1);}
50% {border-color: rgba(255,255,255,.2);}
100% {border-color: rgba(255,255,255,1);}
}
.cursor-circle-bg {
position: absolute;
width: 100px;
height: 100px;
top: -40px;
left: -43px;
border-radius: 90px;
transition: all 0.4s cubic-bezier(0.21, 0.35, 0.25, 0.85);
transition-property: transform, background;
transform: scale3d(0.13, 0.13, 1) translate3d(-5%, -15%, 0);
background: rgba(255,255,255,0);
}
.cursor-accent .cursor-circle-bg {
background: var(--white);
/* background: #dfe236; */
transform: scale3d(0.6, 0.6, 1);
}
.cursor-loading-text {
position: absolute;
top: 2px;
left: 19px;
color: var(--white);
user-select: none;
opacity: 0;
visibility: hidden;
font-size: 12px;
}
.cursorPreloader .cursor-loading-text {
opacity: 1;
visibility: visible;
}
/* cursor */
.table-with-hint {
position: relative;
float: left;
width: 100%;
}
.table {
position: relative;
float: left;
width: 100%;
z-index: 2;
}
.table-row {
position: relative;
float: left;
width: 100%;
border-bottom: 2px solid var(--blue);
padding: 0.9em 0;
}
.table-row::after {
content: '';
position: absolute;
left: 0;
right: 0;
height: 2px;
background-color: var(--blue);
top: -2px;
}
.table-row:hover::after {
z-index: 20;
}
.table-row * {
transition: color .2s ease-in-out;
}
.table-row-hovered * {
/* color: var(--white); */
}
.table-row:nth-child(1) {
border-top: 2px solid var(--blue);
}
.table-col {
padding-left: var(--grid-col-gap);
transition: transform .2s ease-in-out;
}
.table-col:nth-child(2) {
padding-left: 0;
}
.table-row:hover .table-col:nth-child(2) {
transform: translate3d(0.3em,0,0);
}
.table-row:hover .table-col:last-child {
transform: translate3d(-0.3em,0,0);
}
.table-hover-bg {
position: absolute;
width: 100%;
height: 100%;
/* background-color: var(--blue); */
top: 0px;
left: 0px;
transform: scale3d(1,0,1);
/* background: url(/img/dotted-bg2-blue.svg) repeat 0% 0%; */
/* background: url(/img/dotted-bg2.svg) repeat 0% 0%; */
background-size: 4px 4px;
}
body.mobile .table-hover-bg {
display: none;
}
.table-row-hovered {
z-index: 200;
}
.t-col-portfolio-1, .t-col-portfolio-2, .t-col-portfolio-3, .t-col-portfolio-4 {
position: relative;
float: left;
white-space: nowrap;
font-size: 1.05em;
width: var(--w-x2);
}
.t-col-portfolio-2 {
width: var(--w-x1);
}
.t-col-portfolio-3 {
width: var(--w-x2);
}
.t-col-portfolio-4 {
width: var(--w-x1);
text-align: right;
}
@media (orientation: portrait) {
.mp-portfolio-h2 {
width: var(--w-x6);
}
.mp-portfolio-h-desc {
width: var(--w-x6);
float: left;
right: auto;
padding-top: 1.5em;
}
.table-row {
padding: 1.2em 0;
}
.t-col-portfolio-1, .t-col-portfolio-2, .t-col-portfolio-3, .t-col-portfolio-4 {
font-size: 1.3em;
}
.t-col-portfolio-1 {
width: var(--w-x4);
}
.t-col-portfolio-2 {
display: none;
}
.t-col-portfolio-3 {
display: none;
}
.t-col-portfolio-4 {
width: var(--w-x3);
}
}
.cursor-picture {
position: absolute;
left: 0;
width: 30vw;
height: 30vw;
visibility: inherit;
pointer-events: none;
mix-blend-mode: normal;
opacity: 0;
top: 0;
}
.cursor-picture-wrap0 {
position: relative;
width: 100%;
height: 100%;
left: -50%;
top: -50%;
}
.cursor-picture-wrap {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
}
.treatments-section .cursor-picture {
left: 11vw;
}
@media (max-width: 1000px) {
.cursor-picture {
width: 240px;
height: 240px;
}
}
@media (max-width: 700px) {
.cursor-picture {
width: 240px;
height: 240px;
}
}
body.mobile .cursor-picture {
display: none;
}
.cursor-picture.cursor-picture-active {
opacity: 1;
}
.cursor-picture img {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
transform: scale3d(0.4,0.4,1);
opacity: 0;
/*display: none;*/
will-change: transform;
}
.press-centre-section .cursor-picture img {
object-fit: contain;
}
/* MAIN PAGE */
.mainpage-hero {
position: relative;
float: left;
width: 100%;
height: var(--viewport-height);
/* overflow: hidden; */
}
.mp-hero-placeholder {
position: relative;
float: left;
width: 100%;
height: var(--viewport-height);
}
body.mobile .mp-hero-placeholder {
display: none;
}
.mp-hero-bg {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background-color: var(--blue);
}
.mp-hero-bg-white {
background-color: var(--white);
}
.mp-hero-video-wrapper {
position: absolute;
float: left;
width: 100%;
/* height: 100vh; */
/* height: var(--viewport-height); */
/* overflow: hidden; */
top: 0px;
left: 0px;
}
.mp-hero-video-wrapper0 {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
}
.mp-hero-video {
position: relative;
float: left;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
overflow: hidden;
}
.mp-hero-video video {
position: relative;
float: left;
width: 100%;
height: 100%;
object-fit: cover;
}
.mp-hero-pic-overvideo {
position: absolute;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
opacity: 0;
background-color: var(--grey);
background-size: auto 100%;
background-repeat: no-repeat;
background-position: 50%;
background-image: url(/img/hero-landscape/hero-roto-landscape00.jpg);
transition: opacity ease-in-out 0.5s;
}
@media (orientation: portrait) {
.mp-hero-pic-overvideo {
background-image: url(/img/hero-portrait/hero-roto-portrait00.jpg);
}
}
.mp-hero-text-over-slider {
position: absolute;
float: left;
/* width: calc(100% - var(--content-margins)* 2); */
width: var(--content-width-with-margins);
height: var(--viewport-height);
margin-left: var(--content-margins);
margin-right: var(--content-margins);
}
.scroll-down {
position: absolute;
width: 28px;
height: 38px;
left: 0px;
bottom: 24px;
animation: scrollDownAnim 2s infinite;
}
@keyframes scrollDownAnim {
0% { transform: translate3d(0px,0px,0px); }
25% { transform: translate3d(0px,20px,0px); }
26% { transform: translate3d(0px,20px,0px); }
100% { transform: translate3d(0px,0px,0px); }
}
.scroll-down-wrap {
position: relative;
width: 100%;
height: 100%;
background: url(/img/arrow-down-orange.svg) no-repeat 50% 50%;
background-size: contain;
}
.spacer-blck {
position: relative;
float: left;
width: 100%;
height: 200vh;
min-height: 400vw;
}
.mp-hero-video-wrapper {
position: absolute;
float: left;
width: 100%;
/* height: 100vh; */
height: var(--viewport-height);
/* overflow: hidden; */
top: 0px;
left: 0px;
}
.mp-hero-video {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
overflow: hidden;
}
.mp-hero-video video {
position: relative;
float: left;
/* width: 100%;
height: 100%;
object-fit: cover; */
/* width: calc(2.429* var(--viewport-height));
height: var(--viewport-height); */
width: 100vw;
height: 100vw;
object-fit: fill;
transform: translate3d(-50%, -50%, 0);
left: 50%;
top: 50%;
/* filter: brightness(0.85) contrast(1.1); */
}
.crop {
width: 1.3em;
height: 1.3em;
background: url(/img/crops.svg) no-repeat;
background-size: contain;
}
.mp-hero-crop1 {
position: absolute;
top: 44%;
left: 0px;
transform: translate3d(-49%, 0, 0);
}
.mp-hero-crop2 {
position: absolute;
top: 44%;
right: 0px;
transform: translate3d(49%, 0, 0);
}
.mp-about {
position: absolute;
top: 0;
right: 0px;
transform: translate3d(49%, 0, 0);
}
.mp-moto {
position: absolute;
bottom: 7em;
float: left;
width: calc( var(--w-x3) + var(--w-x1) / 2 );
}
.mp-moto * {
color: var(--white);
}
.mp-moto-minitext {
position: relative;
float: left;
width: 100%;
font-size: 1em;
margin-bottom: 0.7em;
}
.mp-moto h1 {
position: relative;
float: left;
width: 100%;
font-size: 5em;
line-height: 0.95em;
}
.mp-moto h1 span {
display: inline-block;
font-size: 0.95em;
}
.mp-moto h1 span b {
font-weight: normal;
position: relative;
float: left;
top: 0.1em;
font-size: 0.3em;
}
.mp-hero-text {
position: absolute;
width: var(--w-x2);
bottom: 7em;
right: 0px;
}
.mpht-lines {
position: relative;
float: left;
width: 100%;
color: var(--white);
padding-top: 0.8em;
}
.mpht-lines * {
color: var(--white);
}
.line {
position: relative;
float: left;
width: 100%;
overflow: hidden;
font-size: inherit;
}
.line-content {
position: relative;
float: left;
width: 100%;
opacity: 0;
transform: translate3d(0,100%,0);
font-size: inherit;
}
.mp-section-about {
padding-top:3em;
}
.mp-about-photo {
position: relative;
float: right;
width: var(--w-x2);
height: calc( var(--w-x2) / 0.86 );
background-position: 50%;
background-repeat: no-repeat;
background-size: cover;
margin-top: 0.5em;
}
.mp-about-text {
position: relative;
float: right;
width: var(--w-x6);
margin-right: var(--grid-col-gap);
}
.mpat1 {
position: absolute;
float: right;
width: 100%;
font-size: 1.1em;
padding-bottom: 1em;
top: 0.4em;
}
.mpat2 {
position: relative;
float: right;
width: 100%;
font-size: 2.4em;
line-height: 1.2em;
}
.mp-services-col {
position: relative;
float: left;
width: var(--w-x3);
margin-right: var(--grid-col-gap);
padding-top: 3em;
}
.mp-services-col h2 {
position: relative;
float: left;
width: 100%;
font-size: 1.6em;
padding-bottom: 0.6em;
}
.mp-services-col ul {
position: relative;
float: left;
width: 100%;
counter-reset: dd-item;
overflow: hidden;
}
.mp-services-col li {
position: relative;
float: left;
width: 100%;
counter-increment: dd-item;
margin-bottom: 0;
}
.mp-services-col a {
position: relative;
float: left;
width: 100%;
font-size: 1.2em;
transition: background-color var(--ease-in-out-circ) 0.1s !important;
white-space: normal;
box-sizing: border-box;
/* width: var(--w-x3); */
/* min-height: 2.5em; */
padding-left: 2em;
padding-top: 0.5em;
padding-bottom: 0.5em;
padding-right: 1.5em;
/* background-image: var(--arrow-grey);
background-size: 0.9em auto;
background-position: 99% 50%;
background-repeat: no-repeat; */
}
.mp-services-col li:last-child a {
border-bottom: 1px solid var(--orange);
}
/*
.mp-services-col a:hover {
background-color: var(--orange);
} */
.mp-services-col a::before {
content: counter(dd-item, decimal-leading-zero) ;
position: absolute;
left: 0.3em;
top: 1.1em;
float: left;
font-size: 0.65em;
}
.mp-services-col a::after {
content: "";
position: absolute;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
pointer-events: none;
background-image: var(--arrow-grey);
background-size: 0.9em auto;
background-position: 99% 50%;
background-repeat: no-repeat;
}
.mp-services-col span {
position: relative;
float: left;
width: 100%;
font-size: 0.7em;
padding-top: 0.5em;
}
.mpst-line {
position: absolute;
float: left;
width: 100%;
height: 1px;
background-color: var(--orange);
transform-origin: 0% 50%;
left: 0px;
top: 0px;
transform: scaleX(0);
}
.mpst-line-last {
position: relative;
float: left;
}
.table-hover-bg {
position: absolute;
width: 100%;
height: 100%;
background-color: var(--orange);
top: 0px;
left: 0px;
transform: scale3d(1,0,1);
z-index: -1;
}
.mp-section-projects {
padding-top: 8em;
}
.projects-head {
position: relative;
float: left;
width: var(--w-x3);
font-size: 3.5em;
}
.projects-head span {
position: relative;
display: inline-block;
font-size: 0.8em;
}
.projects-head span i {
font-style: normal;
font-size: 0.25em;
position: absolute;
padding-bottom: 10px;
top: -3.5em;
}
.projects-desc {
position: relative;
float: left;
width: var(--w-x3);
clear: both;
padding-top: 0.9em;
padding-bottom: 3em;
}
.projects-table {
position: relative;
float: left;
width: 100%;
counter-reset: projects-counter;
}
.projects-table li {
position: relative;
float: left;
width: 100%;
counter-increment: projects-counter;
}
.projects-table li:last-child {
border-bottom: 1px solid var(--orange);
}
.projects-table .pt-content {
position: relative;
float: left;
width: 100%;
padding-top: 0.4em;
padding-bottom: 0.4em;
}
.projects-table .pt-content::before {
content: "(" counter(projects-counter, decimal-leading-zero) ")";
position: relative;
float: left;
width: var(--w-x1);
font-size: 0.7em;
transition: transform ease-in-out 0.3s;
}
.projects-table a.table-row-hovered .pt-content::before {
transform: translate3d(var(--grid-col-gap),0,0);
}
.projects-table .pt-location {
position: relative;
float: left;
width: var(--w-x1);
/* padding-left: var(--lft-x2); */
margin-left: var(--grid-col-gap);
}
.projects-table .pt-desc {
position: relative;
float: left;
width: var(--w-x2);
margin-left: var(--grid-col-gap);
}
.projects-table .pt-photos {
position: relative;
float: left;
width: var(--w-x3);
margin-left: calc(var(--grid-col-gap)* 2 + var(--w-x1));
display: flex;
gap: var(--grid-col-gap);
justify-content: end;
filter: grayscale(100%);
}
.projects-table li:hover .pt-photos {
filter: grayscale(0%);
}
.projects-table .pt-photos .pt-photo {
position: relative;
height: calc( var(--w-x1) * 1.1 );
background-color: var(--grey2);
background-color: transparent;
width: var(--w-x1);
background-position: 50%;
background-repeat: no-repeat;
background-size: cover;
transition: transform ease-in-out 0.3s, var(--transition-colorful);
}
.projects-table a.table-row-hovered .pt-photo {
transform: translate3d(calc( var(--grid-col-gap) * -1 ),0,0);
}
.partners-wrapper {
position: relative;
float: left;
width: 100%;
}
.partners-logos {
position: relative;
float: left;
width: var(--w-x4);
/* height: calc( var(--w-x4) / 2.777 ); */
height: calc( var(--w-x4) / 1.59 );
margin-left: calc( var(--lft-x2) + var(--grid-col-gap) );
background: url(/img/partners-logos-landscape.svg) no-repeat;
background-size: contain;
margin-top: 0.9em;
}
.crop-right-top {
position: absolute;
top: 0px;
right: 0px;
transform: translate3d(48%,0,0);
}
.crop-left-bottom {
position: absolute;
bottom: 0px;
left: 0px;
transform: translate3d(-48%,0,0);
}
.mp-section-manufacture {
margin-top: 10em;
}
.mp-section-manufacture-wrap {
font-size: inherit;
/* display: inline; */
width: 100%;
float: left;
position: relative;
line-height: 1.15em;
font-size: 1.1em;
}
.manufacture-wrapper {
position: relative;
float: left;
width: 100%;
padding-top: 3em;
}
.mp-section-manufacture h3 {
position: relative;
float: left;
font-size: 2.95em;
width: 100%;
}
.mp-section-manufacture h3 span {
/* position: relative;
display: inline-block;
font-size: 0.8em; */
position: relative;
float: left;
width: 100%;
position: absolute;
float: left;
width: 100%;
top: 0.7em;
left:0px;
}
.mp-section-manufacture h3 span i {
/* font-style: normal;
font-size: 0.45em;
position: relative;
top: -1.1em;
white-space: nowrap;
padding-right: 1.2em; */
position: relative;
float: left;
width: 100%;
}
.man-pic {
position: relative;
float: left;
background-position: 50%;
background-repeat: no-repeat;
background-size: cover;
width: var(--w-x4);
height: calc( var(--w-x4) / 1.76);
}
.man-txt {
position: relative;
float: left;
width: var(--w-x2);
margin-left: var(--grid-col-gap);
}
.man-pic2 {
position: relative;
display: inline-block;
background-position: 50%;
background-repeat: no-repeat;
background-size: cover;
width: var(--w-x2);
height: calc( var(--w-x2) / 0.97);
margin-top: 3em;
}
.man-txt .man-txt2-wrap {
position: relative;
float: left;
width: 100%;
}
@media (orientation: portrait) {
.crop {
width: 0.9em;
height: 0.9em;
}
.mp-about {
top: -18.6em;
left: 0;
transform: translate3d(-49%, 0, 0);
display: none;
}
.mpat2 {
font-size: 1.8em;
}
.mp-services-col {
width: var(--w-x7);
margin-right: 0;
padding-top: 5em;
}
.mp-services-col a {
padding-top: 0.8em;
padding-bottom: 0.8em;
margin-left: 0 !important;
}
.mp-services-col h2 {
font-size: 2.5em;
}
.mp-hero-video video {
width: var(--viewport-height);
height: var(--viewport-height);
}
.mp-hero-text {
display: none;
}
.mp-moto {
width: var(--w-x6);
}
.mp-moto h1 {
font-size: 3.8em;
line-height: 0.95em;
}
.mp-about-photo {
width: var(--w-x4);
height: calc( var(--w-x4) / 0.86 );
margin-top: 0em;
}
.mp-about-text {
width: var(--w-x7);
margin-right: 0;
margin-top: 1em;
}
.projects-head {
width: var(--w-x6);
}
.projects-desc {
width: var(--w-x6);
}
.projects-table .pt-location {
width: var(--w-x6);
font-size: 1.2em;
}
.projects-table .pt-desc {
width: var(--w-x6);
margin-left: var(--lft-x2);
padding-top: 0.7em;
}
.projects-table .pt-photos {
width: var(--w-x6);
margin-left: var(--lft-x2);
display: flex;
justify-content: start;
padding-top: 0.7em;
}
.projects-table .pt-photos .pt-photo {
height: calc(var(--w-x2)* 1.1);
width: var(--w-x2);
}
.projects-table .pt-content {
padding-bottom: 1.4em;
}
.partners-wrapper .crop-left-bottom {
display: none;
}
.partners-logos {
width: var(--w-x5);
/* height: calc( var(--w-x5) / 0.91 ); */
height: calc( var(--w-x5) / 0.54 );
margin-left: var(--lft-x2);
background: url(/img/partners-logos-portrait.svg) no-repeat;
background-size: contain;
margin-top: 0.9em;
}
.mp-section-manufacture h3 {
font-size: 2.1em;
}
.mp-section-manufacture h3 span i {
/* font-size: 0.55em;
top: -0.9em; */
}
.man-pic {
width: var(--w-x7);
height: calc( var(--w-x7) / 1.76);
}
.man-txt {
width: var(--w-x3);
margin-left: 0;
margin-top: 1.8em;
}
.man-txt2 {
width: var(--w-x3);
margin-left: calc( var(--w-x1) + var(--grid-col-gap) * 2 );
}
.man-pic2 {
width: var(--w-x3);
height: calc( var(--w-x3) / 0.97);
margin-top: 2em;
}
}
.section-prlx {
position: relative;
float: left;
width: 100%;
}
.section-with-standard-margins {
width: var(--content-width-with-margins);
margin-left: var(--content-margins);
margin-right: var(--content-margins);
}
.footer-logo-wrap {
position: relative;
float: left;
width: 100%;
}
.footer-logo {
--footer-logo-size: 0.0613em;
margin-top: 10em;
}
.fl-letter {
position: relative;
float: left;
height: calc( 198 * var(--footer-logo-size) );
background-repeat: no-repeat;
background-size: contain;
background-position: 50%;
overflow: hidden;
}
.fl-placer {
position: relative;
float: left;
width: 100%;
height: 100%;
/* opacity: 0; */
transform: translate3d(0,100%,0);
}
.fl-t .fl-placer {
width: calc( 90 * var(--footer-logo-size) );
background-image: url(/img/logo-t.svg);
}
.fl-e .fl-placer {
width: calc( 151 * var(--footer-logo-size) );
background-image: url(/img/logo-e.svg);
}
.fl-h .fl-placer {
width: calc( 159 * var(--footer-logo-size) );
background-image: url(/img/logo-h.svg);
}
.fl-n .fl-placer {
width: calc( 159 * var(--footer-logo-size) );
background-image: url(/img/logo-n.svg);
}
.fl-o .fl-placer {
width: calc( 165 * var(--footer-logo-size) );
background-image: url(/img/logo-o.svg);
}
.fl-v .fl-placer {
width: calc( 150 * var(--footer-logo-size) );
background-image: url(/img/logo-v.svg);
}
.fl-e2 .fl-placer {
width: calc( 151 * var(--footer-logo-size) );
background-image: url(/img/logo-e2.svg);
}
.fl-r .fl-placer {
width: calc( 104 * var(--footer-logo-size) );
background-image: url(/img/logo-r.svg);
}
.fl-s .fl-placer {
width: calc( 137 * var(--footer-logo-size) );
background-image: url(/img/logo-s.svg);
}
.footer {
position: relative;
float: left;
margin-top: 2em;
width: 100%;
border-top: 1px solid var(--orange);
box-sizing: border-box;
/* padding-left: var(--content-margins);
padding-right: var(--content-margins); */
}
.footer a {
font-size: inherit;
}
.footer-col {
position: relative;
float: left;
line-height: 1.2em;
width: calc( var(--w-x2) + var(--grid-col-gap) );
border-right: 1px solid var(--orange);
box-sizing: border-box;
height: 25vw;
}
.footer-col1 .footer-menu, .footer-col1 .footer-col-head {
padding-left: var(--content-margins);
/* width: calc( var(--w-x2) + var(--content-margins) ); */
}
.footer-col1 {
width: calc( var(--w-x2) + var(--content-margins) - 1px );
}
.footer-menu a {
padding-left: 1em;
background-image: var(--arrow-grey);
background-size: 0.9em auto;
background-repeat: no-repeat;
background-position: 0 50%;
font-size: 1.2em;
transition: background-position var(--ease-in-out-quart) 0.3s;
}
.arrow-link {
padding-left: 1em;
background-image: var(--arrow-grey);
background-size: 0.8em auto;
background-repeat: no-repeat;
background-position: 0 50%;
transition: background-position var(--ease-in-out-quart) 0.3s;
}
.arrow-link:hover, .footer-menu a:hover {
background-position: 0.13em 50%;
}
.footer-col a {
clear: both;
position: relative;
display: block;
}
.eu-logos {
position: relative;
float: left;
width: var(--w-x2);
}
.footer-menu {
position: relative;
float: left;
width: 100%;
line-height: 1.65em;
padding-top: 1em;
}
.footer-col-head {
position: relative;
float: left;
width: 100%;
border-bottom: 1px solid var(--orange);
box-sizing: border-box;
font-size: 1.8em;
padding-top: 0.7em;
padding-bottom: 0.7em;
padding-left: var(--grid-col-gap);
}
.copyright {
position: absolute;
bottom: 0.5em;
left: var(--content-margins);
}
.footer-bottom-element {
position: absolute;
bottom: 0.5em;
left: var(--grid-col-gap);
}
.fbe-small {
font-size: 0.8em;
}
.footer-button-area {
position: relative;
float: left;
width: 100%;
border-bottom: 1px solid var(--orange);
box-sizing: border-box;
font-size: 1em;
padding-top: 1.1em;
padding-bottom: 1.1em;
padding-left: var(--grid-col-gap);
}
.footer-liaa-logos {
position: relative;
float: left;
bottom: 0px;
width: calc(100% - var(--grid-col-gap));
height: 4.8em;
left: var(--grid-col-gap);
margin-top: 0.3em;
}
.eufonds-desc {
position: relative;
float: left;
width: 100%;
font-size: 0.75em;
line-height: 1em;
box-sizing: border-box;
padding-left: var(--grid-col-gap);
margin-top: 0.5em;
}
.eufonds-desc p {
font-size: inherit;
}
.footer-col-last {
border: none;
}
@media (orientation: portrait) {
.footer {
margin-left: var(--content-margins);
margin-right: var(--content-margins);
width: calc( 100% - var(--content-margins) * 2 );
border: none;
}
.footer-logo {
--footer-logo-size: 0.02188em;
}
.footer-col1 {
display: none;
}
.footer-col {
width: calc(var(--w-x7));
border: none;
height: auto;
margin-bottom: 5em;
border-top: 1px solid var(--orange);
}
.footer-bottom-element {
position: relative;
float: left;
bottom: auto;
padding-top: 0.5em;
}
.eufonds-desc {
padding-bottom: 5em;
}
.copyright {
position: relative;
float: left;
width: 100%;
}
.footer-col-last{
margin-bottom: 2em;
}
.footer-liaa-logos {
height: 6.9em;
}
}
/* MAIN PAGE */
/* ABOUT */
.section-about {
padding-top: 10em;
}
.left-located-h1 {
position: relative;
float: left;
width: var(--w-x3);
font-size: 4.3em;
line-height: 1.15em;
}
.scroll-down-regular-placer {
position: absolute;
top: 0px;
left: 0px;
margin-top: calc( var(--viewport-height) - 40px );
}
.scroll-down-regular-placer .scroll-down{
position: relative;
}
.sec-about-right-col {
position: relative;
float: left;
width: var(--w-x3);
margin-left: var(--grid-col-gap);
}
.sarc-text {
position: relative;
float: left;
width: 100%;
font-size: 1.5em;
line-height: 1.2em;
}
.sarc-desc {
position: relative;
float: left;
width: 100%;
padding-top: 3em;
}
.sarc-moto {
position: relative;
float: left;
width: 100%;
font-size: 4.0em;
line-height: 0.9em;
padding-top: 0.1em;
}
.sarc-moto span {
display: inline-block;
font-size: 0.95em;
}
.sarc-moto span b {
font-weight: normal;
position: relative;
float: left;
top: 0.1em;
font-size: 0.3em;
}
.sarc-photo {
position: relative;
float: left;
width: var(--w-x3);
height: calc( var(--w-x3) / 0.855 );
background-position: 50%;
background-repeat: no-repeat;
background-size: cover;
margin-top: 2.2em;
margin-bottom: 5em;
}
@media (orientation: portrait) {
.section-about {
padding-top: 7em;
}
.left-located-h1 {
width: 100%;
font-size: 4em;
}
.scroll-down-regular-placer {
margin-top: calc( var(--viewport-height) - 40px );
display: none;
}
.sec-about-right-col {
width: 100%;
margin-left: 0
}
.sarc-text {
margin-top: 1em;
}
.sarc-desc {
padding-top: 5em;
}
.sarc-moto {
font-size: 3.5em;
}
.sarc-photo {
width: var(--w-x7);
height: calc( var(--w-x7) / 0.855 );
margin-bottom: 0em;
}
}
/* ABOUT */
/* PROJECTS */
.section-projects {
padding-top: 10em;
}
.intro-text-projects {
position: relative;
float: left;
width: var(--w-x4);
font-size: 2.2em;
}
.projects-table-lifts {
padding-top: 5em;
}
.other-projects {
position: relative;
float: left;
width: 100%;
}
.section-project-current {
padding-top: 6em;
}
.project-right-col {
position: sticky;
float: right;
width: var(--w-x4);
top: 6em;
}
.prc-intro, .current-project-head, .prc-desc {
position: relative;
float: left;
width: var(--w-x4);
}
.current-project-head {
/* font-size: 4em; */
font-size: 3em;
line-height: 1.1em;
}
.prc-desc {
margin-top: 2em;
}
.prc-desc p {
position: relative;
float: left;
padding-bottom: 1em;
}
.description-table {
position: relative;
float: left;
width: 100%;
counter-reset: desc-table;
margin-top: 2em;
}
.description-table li {
position: relative;
float: left;
width: 100%;
padding-top: 0.8em;
padding-bottom: 0.8em;
counter-increment: desc-table;
}
.description-table li:last-child {
border-bottom: 1px solid var(--orange);
}
.dt-content {
position: relative;
float: left;
width: 100%;
}
.dt-left-col {
position: relative;
float: left;
width: var(--w-x3);
box-sizing: border-box;
padding-left: 1.5em;
}
.description-table .dt-left-col::before {
content: counter(desc-table, decimal-leading-zero) ;
position: absolute;
font-size: 0.7em;
left: 0;
top: 0.15em;
transition: transform ease-in-out 0.3s;
}
.description-table li:hover .dt-left-col::before {
transform: translate3d(0.3em,0,0);
}
.dt-right-col {
position: relative;
float: right;
width: var(--w-x1);
}
.other-projects-head {
padding-bottom: 1em;
}
.project-left-col {
position: relative;
float: left;
width: var(--w-x4);
}
.project-left-col img {
width: 100%;
height: auto;
display: block;
margin-bottom: 1em;
}
.project-left-col img:last-child {
margin-bottom: 0;
}
.projects-table a.act {
pointer-events: all;
}
@media (orientation: portrait) {
.section-projects {
padding-top: 7em;
}
.intro-text-projects {
width: var(--w-x6);
font-size: 1.5em;
}
.project-right-col {
position: relative;
float: left;
width: 100%;
top: auto;
}
.prc-intro, .current-project-head, .prc-desc {
width: 100%;
}
.current-project-head {
font-size: 3.2em;
}
.dt-left-col {
width: var(--w-x5);
}
.description-table {
margin-bottom: 3.5em;
}
.dt-right-col {
width: var(--w-x2);
text-align: right;
}
.project-left-col {
width: 100%;
}
.project-left-col img {
margin-bottom: 1em;
}
}
/* PROJECTS */
/* PRODUCTS */
.products-head {
padding-bottom: 0.7em;
}
.products-table {
position: relative;
float: left;
width: 100%;
counter-reset: projects-counter;
}
.products-table li {
position: relative;
float: left;
width: 100%;
counter-increment: projects-counter;
}
.products-table li:last-child {
border-bottom: 1px solid var(--orange);
}
.products-table .pt-content {
position: relative;
float: left;
width: 100%;
padding-top: 0.4em;
padding-bottom: 0.4em;
}
.products-table .pt-content::before {
content: "(" counter(projects-counter, decimal-leading-zero) ")";
position: relative;
float: left;
width: var(--w-x1);
font-size: 0.7em;
transition: transform ease-in-out 0.3s;
}
.products-table a.table-row-hovered .pt-content::before {
transform: translate3d(var(--grid-col-gap),0,0);
}
.products-table .pt-producer {
position: relative;
float: left;
width: var(--w-x1);
margin-left: var(--grid-col-gap);
}
.products-table .pt-model {
position: relative;
float: left;
width: var(--w-x1);
margin-left: var(--grid-col-gap);
}
.products-table .pt-desc {
position: relative;
float: left;
width: var(--w-x2);
margin-left: var(--grid-col-gap);
}
.products-table .pt-photos {
position: relative;
/* float: left; */
float: right;
width: var(--w-x3);
margin-left: calc(var(--grid-col-gap));
display: flex;
gap: var(--grid-col-gap);
justify-content: end;
}
.products-table .pt-photos .pt-photo {
position: relative;
height: calc( var(--w-x1) * 1.1 );
/* background-color: var(--grey2); */
background-color: transparent;
width: var(--w-x1);
background-position: 50%;
background-repeat: no-repeat;
background-size: cover;
transition: transform ease-in-out 0.3s, var(--transition-colorful);
}
.products-table a.table-row-hovered .pt-photo {
transform: translate3d(calc( var(--grid-col-gap) * -1 ),0,0);
}
.product-order {
position: relative;
float: left;
width: 100%;
border-bottom: 1px solid var(--orange);
border-top: 1px solid var(--orange);
padding-top: 0.2em;
padding-bottom: 0.2em;
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 3em;
}
.po-left {
position: relative;
}
.po-right {
position: relative;
}
.product-description {
margin-top: 2em;
margin-bottom: 5em;
}
.pd-big-text {
position: relative;
float: left;
font-size: 2.5em;
width: 100%;
margin-bottom: 3em;
}
.pd-big-text * {
font-size: inherit;
font-family: inherit;
}
.pd-left-cal {
position: sticky;
float: left;
width: var(--w-x4);
top: 4.8em;
}
.pd-head {
position: relative;
float: left;
width: var(--w-x3);
font-size: 4em;
}
.pd-desc {
position: relative;
float: left;
width: var(--w-x3);
padding-top: 2em;
}
.pd-right-cal {
position: relative;
float: left;
width: var(--w-x4);
margin-left: var(--grid-col-gap);
margin-top: 0.4em;
}
.product-description .dt-left-col {
width: var(--w-x2);
}
.product-description .dt-right-col {
width: var(--w-x2);
text-align: right;
}
.tech-spec-head {
position: relative;
float: left;
width: 100%;
font-size: 2em;
margin-bottom: 0.5em;
}
.product-description .description-table {
margin-top: 0;
margin-bottom: 6em;
}
.product-description .description-table:last-child {
margin-bottom: 0;
}
.product-description .dt-left-col.dt-left-col-link {
width: 100%;
padding-right: 1em;
}
.dt-left-col-link::after {
content: "";
position: absolute;
width: 2em;
right: 0px;
top: 0px;
height: 100%;
background-image: var(--arrow-grey);
background-position: 90% 50%;
background-size: 1em auto;
background-repeat: no-repeat;
}
@media (orientation: portrait) {
.products-table .pt-producer {
width: var(--w-x6);
font-size: 1.3em;
}
.products-table .pt-model {
width: var(--w-x6);
margin-left: var(--lft-x2);
padding-top: 0.7em;
}
.products-table .pt-desc {
width: var(--w-x6);
margin-left: var(--lft-x2);
padding-top: 0.7em;
}
.products-table .pt-photos {
width: var(--w-x6);
margin-left: var(--lft-x2);
display: flex;
justify-content: start;
padding-top: 0.7em;
}
.products-table .pt-photos .pt-photo {
height: calc(var(--w-x3)* 1.1);
width: var(--w-x3);
}
.products-table .pt-content {
padding-bottom: 1.4em;
}
.product-order {
margin-bottom: 5em;
}
.pd-big-text {
font-size: 2em;
}
.pd-left-cal {
position: relative;
width: 100%;
top:auto
}
.pd-right-cal {
width: 100%;
margin-left: 0;
}
.pd-head {
width: 100%;
font-size: 3em;
}
.pd-desc {
width: 100%;
padding-bottom: 4em;
}
.product-description .dt-left-col {
width: var(--w-x4);
}
.product-description .dt-right-col {
width: var(--w-x3);
}
}
/* PRODUCTS */
/* CONTACTS */
.contacts-section {
margin-top: 6em;
}
.contacts-h1 {
position: relative;
float: left;
width: 100%;
font-size: 4em;
}
.contacts-left-col {
position: relative;
float: left;
width: var(--w-x4);
}
.contacts-right-col {
position: relative;
float: left;
width: var(--w-x4);
margin-left: var(--grid-col-gap);
margin-top: 3.6em;
}
.contacts-mini-head {
position: relative;
float: left;
width: 100%;
font-size: 1.5em;
margin-top: 1em;
}
.contacts-section .description-table {
margin-top: 0.7em;
margin-bottom: 2em;
}
.contacts-section .dt-left-col {
width: var(--w-x2);
}
.contacts-section .dt-right-col {
width: var(--w-x2);
text-align: right;
}
.gmap {
position: relative;
float: left;
width: var(--w-x4);
height: calc( var(--w-x4) / 1.5 );
}
/* contacting form */
.cf-left {
position: relative;
float: left;
width: var(--w-x4);
}
.cf-right {
position: relative;
float: left;
width: var(--w-x4);
margin-left: var(--grid-col-gap);
}
.contacts-form {
position: relative;
float: left;
width: 100%;
}
.contacts-form h3 {
position: relative;
float: left;
width: 100%;
font-size: 3em;
margin-bottom: 0.3em;
}
.contacts-form form {
position: relative;
float: left;
width: 100%;
padding-top: 2em;
counter-reset: cont-form;
}
.contacts-form .form-field {
position: relative;
float: left;
width: 100%;
padding: 0;
box-sizing: border-box;
counter-increment: cont-form;
}
.contacts-form input, .contacts-form textarea, .contacts-form select {
background: var(--grey3);
border: none;
border-bottom: 1px solid var(--orange);
width: 100%;
color: var(--grey2);
padding: 0.75em 0 0.75em 1.5em;
box-sizing: border-box;
}
.form-field::before {
content: counter(cont-form, decimal-leading-zero);
position: absolute;
left: 0.3em;
top: 1.4em;
float: left;
font-size: 0.65em;
}
.contacts-form textarea {
height: 10.92em;
margin-bottom: 1em;
}
.form-field:first-child {
border-top: 1px solid var(--orange);
}
.contacts-form input::placeholder, .contacts-form textarea::placeholder {
color: #797979;
}
.contacts-form .btn-btn {
width: 100%;
}
.fdbk-success {
position: absolute;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
background: var(--grey3);
/* display: none; */
opacity: 0;
pointer-events: none;
}
.fdbk-success .fdbk-s-ico {
position: absolute;
width: 140px;
height: 140px;
background: url(/img/sucess-icon.svg) no-repeat;
top: 29%;
left: 50%;
transform: translate3d(-50%, -50%, 0);
}
.fdbk-success .fdbk-s-txt {
position: absolute;
width: 80%;
left: 10%;
top: calc(50% + 74px);
transform: translate3d(0, -50%, 0);
font-size: 2em;
text-align: center;
line-height: 1.4em;
}
.form-field.error-field input, .form-field.error-field textarea {
border: 1px solid red;
}
/* contacting form */
@media (orientation: portrait) {
.contacts-left-col {
width: 100%;
}
.contacts-right-col {
width: 100%;
margin-top: 1em;
margin-bottom: 2em;
}
.gmap {
width: var(--w-x7);
height: calc( var(--w-x7) / 0.8 );
}
.contacts-section .dt-left-col {
width: var(--w-x3);
}
.contacts-section .dt-right-col {
width: var(--w-x4);
}
.contacts-section .dt-left-col.dt-transport {
width: var(--w-x7);
margin-bottom: 0.3em;
}
.contacts-section .dt-right-col.dt-transport {
width: var(--w-x7);
text-align: left;
box-sizing: border-box;
padding-left: 1.5em;
}
.cf-left {
width: var(--w-x7);
}
.cf-right {
width: var(--w-x7);
margin-left: 0;
}
.cf-right .form-field:first-child {
border-top: none;
}
}
/* CONTACTS */
/* ORDER */
.order-section {
margin-top: 6em;
}
.order-h1 {
position: relative;
float: left;
width: 100%;
font-size: 4em;
}
.order-under-text {
position: relative;
float: left;
width: var(--w-x4);
padding-top: 1.3em;
}
.order-under-text-big, .order-under-text-big2 {
position: relative;
float: left;
width: var(--w-x4);
font-size: 1.5em;
padding-top: 2.5em;
padding-bottom: 0.9em;
clear: both;
}
.order-under-text-big2 {
padding-top: 1.5em;
padding-bottom: 0;
}
.order-buttons-selection {
position: relative;
float: left;
width: 100%;
/* padding-top: 1em; */
padding-bottom: 2em;
}
.order-button-sel {
font-size: 1.2em;
margin-right: 0.6em;
}
.order-cat-selection-container {
position: relative;
float: left;
width: var(--w-x4);
}
.button-with-arrow.obs-off {
background-color: #909090;
}
/*products list */
.order-menu {
position: relative;
float: left;
width: 100%;
display: none;
}
.order-menu ul {
position: relative;
float: left;
width: 100%;
counter-reset: dd-item;
overflow: hidden;
}
.order-menu li {
position: relative;
float: left;
width: 100%;
counter-increment: dd-item;
margin-bottom: 0;
}
.order-menu a {
position: relative;
float: left;
width: 100%;
background-color: transparent;
font-size: 1.2em;
transition: background-color var(--ease-in-out-circ) 0.1s !important;
white-space: normal;
box-sizing: border-box;
/* width: var(--w-x3); */
min-height: 4em;
padding-left: 2em;
padding-top: 0.3em;
padding-right: 1.5em;
border-top: 1px solid var(--orange);
background-image: var(--arrow-grey);
background-size: 0.9em auto;
background-position: 99% 0.45em;
background-repeat: no-repeat;
}
.order-menu li:last-child a {
border-bottom: 1px solid var(--orange);
}
.order-menu a:hover {
background-color: var(--orange);
}
.order-menu a.act {
background-color: var(--orange);
}
.order-menu a::before {
content: counter(dd-item, decimal-leading-zero) ;
position: absolute;
left: 0.3em;
top: 0.6em;
float: left;
font-size: 0.65em;
}
.order-menu span {
position: relative;
float: left;
width: 100%;
font-size: 0.7em;
padding-top: 0.5em;
}
.mo-back-btn {
margin: 0.5em 0.7em;
}
/*products list */
.order-preview-details {
position: relative;
float: left;
width: var(--w-x3);
clear: both;
padding-top: 4.2em;
line-height: 1.5em;
}
.opd-left {
position: relative;
float: left;
width: var(--w-x1);
}
.opd-right {
position: relative;
float: left;
width: var(--w-x2);
}
.order-form-step1, .order-form-step2 {
position: relative;
float: left;
width: 100%;
}
.order-form-step2 {
display: none;
}
.form-field.file-field input {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
opacity: 0;
}
.file-field {
height: 16em;
display: table;
background-color: var(--grey3);
border-bottom: 1px solid var(--orange);
margin-bottom: 0.8em;
}
.file-field .ff-aligner, .ff-checkbox .ff-aligner {
display: table-cell;
vertical-align: middle;
height: 90px;
width: 90%;
}
.file-field label {
/* left: 20px; */
/* width: calc(100% - 80px); */
position: relative;
float: left;
}
.file-field .label-files {
position: relative;
float: left;
font-size: 0.85em;
color: #666;
width: 100%;
padding-top: 0.35em;
}
.file-field #attachIcon {
width: 1.3em;
position: absolute;
left: 0.1em;
top: 0.2em;
}
.file-field #attachIcon path {
fill: none;
stroke: var(--orange);
stroke-width: 1.9;
stroke-miterlimit: 10;
}
.file-field::before {
display: none;
}
.btn-back {
margin-right: 0.8em;
}
.order-form-step2 .wysiwyg-editor h4 {
font-size: 1.5em;
}
.order-button-back-top {
clear: both;
top: 2.9em;
z-index: 2;
}
@media (orientation: portrait) {
.order-button-sel {
font-size: 0.82em;
margin-right: 0.6em;
}
.order-button-sel:last-child {
margin-right: 0;
}
.order-cat-selection-container {
width: var(--w-x7);
}
.order-preview-details {
width: var(--w-x7);
}
.opd-left {
width: var(--w-x3);
}
.opd-right {
width: var(--w-x4);
}
}
/* ORDER */
/* SERVICE */
.service-h1 {
font-size: 3.3em;
}
.sec-service-pic {
position: relative;
float: right;
width: var(--w-x2);
}
.sec-service-pic-img {
position: relative;
float: left;
width: var(--w-x2);
height: calc(var(--w-x2) / 1.1);
background: url(/img/service.jpg) no-repeat;
background-size: cover;
background-position: 50%;
margin-top: 1.2em;
/* filter: grayscale(100%); */
}
.request-service-button {
}
@media (orientation: portrait) {
.sec-service-pic {
float: left;
width: var(--w-x7);
margin-top: 2em;
}
.sec-service-pic-img {
width: var(--w-x7);
height: calc(var(--w-x7) / 1.1);
}
}
/* SERVICE */
/* COOKIES */
.cookies-head {
position: relative;
float: left;
width: 100%;
margin-top: 2em;
font-size: 4em;
margin-bottom: 1em;
}
.subsection-middlewide {
position: relative;
float: left;
width: var(--w-x6);
left: calc(var(--lft-x2));
}
.wysiwyg-editor p {
margin: 1.25em 0;
line-height: 1.2em;
text-align: justify;
}
.wysiwyg-editor h2, .wysiwyg-editor h3, .wysiwyg-editor h4 {
font-size: 2em;
}
.wysiwyg-editor ul, .wysiwyg-editor ol {
margin: 1em 0;
line-height: 1.2em;
}
.wysiwyg-editor li {
padding-left: 1em;
background-image: var(--arrow-grey);
background-position: 0 0.3em;
background-size: 0.8em;
margin-bottom: 0.35em;
background-repeat: no-repeat;
}
@media (orientation: portrait) {
.subsection-middlewide {
width: var(--w-x7);
left: auto;
}
}
/* COOKIES */
.contacts-ill-section {
position: relative;
float: left;
width: 98vw;
height: calc( 98vw / 1.131 );
background-image: url(/img/contacts.png);
background-repeat: no-repeat;
background-size: contain;
margin-top: 4em;
background-position: 50%;
}
@media (orientation: portrait) {
.contacts-ill-section {
background-image: url(/img/contacts-portrait.png);
height: calc( 100vw / 0.221 );
width: 100vw;
}
}
.service-ill-section {
position: relative;
float: left;
width: 98vw;
height: calc( 98vw / 0.867 );
background-image: url(/img/service-section.png);
background-repeat: no-repeat;
background-size: contain;
margin-top: 4em;
background-position: 50%;
}
@media (orientation: portrait) {
.service-ill-section {
background-image: url(/img/service-section-mobile.png);
height: calc( 100vw / 0.16 );
width: 100vw;
}
}
/* cookies banner */
:root {
--cookie-consent-animation-time: 1s;
--cookie-consent-accent-color: var(--orange);
--cookie-consent-bg-color: white;
--cookie-consent-text-color: var(--black);
--cookie-consent-font-family: sans-serif;
--cookie-consent-box-border-radius: 5px;
--cookie-consent-max-width: var(--w-x4);
--cookie-consent-max-width: 600px;
--cookie-consent-btn-radius: 4px;
--cookie-consent-box-paddings: 13px 15px;
--cookie-consent-box-margin-bottom: var(--content-margins);
--cookie-consent-box-margin-left-right: var(--content-margins);
--cookie-consent-zindex: 9;
--cookie-consent-font-size: 12px;
--cookie-consent-btn-font-size: 12px;
}
.c-b {
position: fixed;
left: 50%;
bottom: 0px;
transform: translateX(-50%);
width: 90%;
max-width: var(--cookie-consent-max-width);
overflow: hidden;
z-index: var(--cookie-consent-zindex);
}
.c-b * {
font-family: var(--cookie-consent-font-family);
}
.c-b-body {
position: relative;
float: left;
width: 100%;
background: var(--cookie-consent-bg-color);
border-radius: var(--cookie-consent-box-border-radius);
/* box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); */
padding: var(--cookie-consent-box-paddings);
box-sizing: border-box;
margin-bottom: var(--cookie-consent-box-margin-bottom);
transform: translate3d(0, calc( var(--cookie-consent-box-margin-bottom) + 100% ), 0);
transition: transform cubic-bezier(0.26, 0.43, 0.45, 0.94) var(--cookie-consent-animation-time);
}
.c-b-active .c-b-body {
transform: translate3d(0, 0%, 0);
transition: transform cubic-bezier(0.22, 0.61, 0.36, 1) var(--cookie-consent-animation-time);
}
/* add this to div tag c-b in case of left align */
.c-b-align-left {
left: var(--cookie-consent-box-margin-left-right);
transform: none;
}
/* add this to div tag c-b in case of right align */
.c-b-align-right {
right: var(--cookie-consent-box-margin-left-right);
left: auto;
transform: none;
}
.c-b-collapsed,
.c-b-expanded {
display: none;
}
.c-b-collapsed {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
}
.c-b.c-b-expanded-mode .c-b-expanded {
display: block;
}
.c-b.c-b-expanded-mode .c-b-collapsed {
display: none;
}
.c-b.c-b-collapsed-mode .c-b-collapsed {
display: flex;
}
.c-b.c-b-collapsed-mode .c-b-expanded {
display: none;
}
.cookie-text {
color: var(--cookie-consent-text-color);
font-size: var(--cookie-consent-font-size);
/* margin-bottom: calc( var(--cookie-consent-font-size) + 4px ); */
flex: 1;
}
.cookie-text a {
color: var(--cookie-consent-text-color);
font-size: var(--cookie-consent-btn-font-size);
}
.c-b-button-row {
/* display: flex;
gap: 10px;
flex-wrap: wrap; */
display: block;
float: right;
flex-shrink: 0;
display: flex;
gap: 0.5rem;
}
.c-b-expanded .c-b-button-row {
display: block;
}
.c-b-btn {
flex: 1;
padding: 10px;
padding: 4px 7px;
text-align: center;
border-radius: var(--cookie-consent-btn-radius);
/* font-weight: bold; */
cursor: pointer;
font-size: var(--cookie-consent-btn-font-size);
text-decoration: none;
border: none;
background-color: var(--cookie-consent-bg-color);
}
.c-b-btn-accept {
background-color: var(--cookie-consent-accent-color);
color: var(--cookie-consent-text-color);
padding: 4px 12px;
}
.c-b-btn-adjust {
color: var(--cookie-consent-text-color);
}
.c-b-btn-deny {
color: var(--cookie-consent-text-color);
}
.c-b-section {
/* margin-bottom: 20px; */
position: relative;
}
.c-b-section::after {
content: '';
position: absolute;
bottom: 0px;
left: 0px;
background-color: var(--cookie-consent-text-color);
opacity: 0.15;
height: 1px;
width: 100%;
}
.c-b-section:nth-child(2) {
margin-bottom: 11px;
}
.c-b-section:first-child:after {
display: none;
}
.c-b-section a {
color: var(--cookie-consent-text-color);
font-size: var(--cookie-consent-btn-font-size);
}
.c-b-section h3 {
font-size: calc( var(--cookie-consent-font-size) + 8px );
margin: 0 0 8px;
font-weight: normal;
}
.c-b-section p {
font-size: calc( var(--cookie-consent-font-size) );
color: var(--cookie-consent-text-color);
margin: 0 0 12px;
}
.cookie-option {
display: flex;
align-items: center;
justify-content: space-between;
cursor: pointer;
padding-bottom: 4px;
gap: 6px;
position: relative;
padding-top: 4px;
}
.cookie-option::after {
content: '';
position: absolute;
top: 0px;
left: 0px;
background-color: var(--cookie-consent-text-color);
opacity: 0.15;
height: 1px;
width: 100%;
}
.cookie-option .c-b-switch-label {
flex-grow: 1;
font-size: calc( var(--cookie-consent-font-size) + 2px );
color: var(--cookie-consent-text-color);
}
.c-b-toggle-icon {
font-size: calc( var(--cookie-consent-font-size) + 4px );
font-size: calc( var(--cookie-consent-font-size) + 4px );
display: inline-block;
text-align: center;
user-select: none;
}
.c-b-info-text {
font-size: 13px;
color: var(--cookie-consent-text-color);
margin: 4px 0 12px 26px;
}
.c-b-info-text:last-child {
padding-bottom: 8px;
}
.c-b-switch {
display: flex;
justify-content: space-between;
align-items: center;
}
.c-b-toggle {
position: relative;
width: 38px;
height: 24px;
}
.c-b-toggle input {
opacity: 0;
width: 0;
height: 0;
}
.c-b-slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: var(--cookie-consent-text-color);
opacity: 0.4;
border-radius: 24px;
transition: 0.3s;
}
.c-b-slider:before {
position: absolute;
content: '';
height: 20px;
width: 20px;
left: 1.5px;
bottom: 2px;
background-color: var(--cookie-consent-bg-color);
border-radius: 50%;
transition: 0.3s;
}
.c-b-toggle input:checked + .c-b-slider {
background-color: var(--cookie-consent-accent-color);
opacity: 1;
}
.c-b-toggle input:checked + .c-b-slider:before {
transform: translateX(15px);
}
.c-b-hidden {
display: none !important;
}
@media (min-width: 600px) and (max-width: 1000px ) {
:root {
--cookie-consent-max-width: var(--w-x6);
}
}
@media (orientation: portrait) and (max-width: 600px ) {
:root {
--cookie-consent-max-width: var(--w-x7);
}
.c-b {
width: calc( 100% - var(--cookie-consent-box-margin-left-right) * 2 );
}
.c-b.c-b-collapsed-mode .c-b-collapsed {
display: block;
}
.cookie-text {
margin-bottom: calc(var(--cookie-consent-font-size) + 4px);
}
.c-b-button-row {
float: none
}
.c-b-expanded .c-b-button-row {
float: none;
display: flex;
}
}
/* cookies banner */
/* MP IP-02 */
.mp-ip02-section {
}
.mp-ip02-sticky-wrap {
position: relative;
float: left;
width: 100%;
height: 150vh;
}
.mp-ip02-canvas-wrap {
position: sticky;
top: 3.8em;
/* float: left; */
width: 100%;
height: calc( var(--viewport-height) - 3.8em );
background-image: url(/img/linear-ip02-hq/linear-ip02-hq-000.png);
background-size: contain;
background-position: 50%;
background-repeat: no-repeat;
}
.mp-ip02-canvas-wrap canvas {
position: relative;
float: left;
width: 100%;
height: 100%;
}
.mp-ip02-info {
position: absolute;
bottom: 1em;
/* box-sizing: border-box; */
width: var(--content-width-with-margins);
margin-left: var(--content-margins);
margin-right: var(--content-margins);
}
.mp-ip02-name {
position: absolute;
top: 0.9em;
}
.mp-ip02-text {
position: relative;
float: left;
width: 100%;
line-height: 1.15em;
font-size: 3.65em;
}
.mp-ip02-table {
position: relative;
float: left;
width: 100%;
}
.mp-ip02-table .dt-right-col {
text-align: right;
}
.mp-ip02-table .mpst-line {
background-color: var(--grey2);
transform: scaleX(0);
}
.mp-ip02-table .description-table li:last-child {
border-bottom: none;
}
.mp-ip02-table li:last-child .dt-left-col::before {
display: none;
}
.mp-ip02-table .dt-content {
opacity: 0;
transition: opacity ease-in-out 0.6s;
}
.mp-ip02-table .table-hover-bg {
opacity: 0;
}
.text-redline {
text-indent: var(--lft-x2);
}
.text-redline .line, .text-redline .line-content {
text-indent: 0;
}
.text-redline .line:first-child .line-content {
text-indent: var(--lft-x2);
}
.ip02-btns {
position: relative;
float: left;
width: 100%;
opacity: 0;
}
.ip02-btns a:first-child {
margin-right: 0.4em;
}
.mp-ip02-table .dt-right-col {
width: var(--w-x2);
}
@media (orientation: portrait) {
.mp-ip02-table .dt-left-col {
width: var(--w-x4);
}
.mp-ip02-table .dt-right-col {
width: var(--w-x3);
}
.mp-ip02-info {
bottom: -3em;
}
.ip02-btns {
top: -4em;
}
.mp-ip02-text {
font-size: 1.9em;
}
.text-redline {
text-indent: var(--lft-x4);
}
.text-redline .line, .text-redline .line-content {
text-indent: 0;
}
.text-redline .line:first-child .line-content {
text-indent: var(--lft-x4);
}
.mp-ip02-sticky-wrap {
height: 150vh;
}
.mp-ip02-canvas-wrap {
height: var(--viewport-height);
top: 0px;
overflow: hidden;
}
.mp-ip02-canvas-wrap canvas {
/* width: 110%; */
height: 100%;
/* transform: translate3d(-7%,0,0); */
}
}
/* MP IP-02 */