html.lenis, html.lenis body {
height: auto;
}
.lenis.lenis-smooth {
scroll-behavior: auto !important;
}
.lenis.lenis-smooth [data-lenis-prevent] {
overscroll-behavior: contain;
}
.lenis.lenis-stopped {
overflow: hidden;
}
.lenis.lenis-smooth iframe {
pointer-events: none;
}
.noise {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 999999999;
opacity: 1;
}
.noise::after {
position: absolute;
top: -10rem;
left: -10rem;
-webkit-animation: noise 2s steps(2) infinite;
animation: noise 2s steps(2) infinite;
background-image: url(//www.marcellomereu.it/wp-content/themes/marcello-child/assets/noise2.png);
background-position: 50%;
width: calc(100% + 20rem);
height: calc(100% + 20rem);
content: "";
}
@keyframes noise {
0% {
-webkit-transform: translate3d(0, 9rem, 0);
transform: translate3d(0, 9rem, 0);
}
10% {
-webkit-transform: translate3d(-1rem, -4rem, 0);
transform: translate3d(-1rem, -4rem, 0);
}
20% {
-webkit-transform: translate3d(-8rem, 2rem, 0);
transform: translate3d(-8rem, 2rem, 0);
}
30% {
-webkit-transform: translate3d(9rem, -9rem, 0);
transform: translate3d(9rem, -9rem, 0);
}
40% {
-webkit-transform: translate3d(-2rem, 7rem, 0);
transform: translate3d(-2rem, 7rem, 0);
}
50% {
-webkit-transform: translate3d(-9rem, -4rem, 0);
transform: translate3d(-9rem, -4rem, 0);
}
60% {
-webkit-transform: translate3d(2rem, 6rem, 0);
transform: translate3d(2rem, 6rem, 0);
}
70% {
-webkit-transform: translate3d(7rem, -8rem, 0);
transform: translate3d(7rem, -8rem, 0);
}
80% {
-webkit-transform: translate3d(-9rem, 1rem, 0);
transform: translate3d(-9rem, 1rem, 0);
}
90% {
-webkit-transform: translate3d(6rem, -5rem, 0);
transform: translate3d(6rem, -5rem, 0);
}
100% {
-webkit-transform: translate3d(-7rem, 0, 0);
transform: translate3d(-7rem, 0, 0);
}
}
body, html {
box-sizing: border-box;
outline: none;
font-family: "neue-haas-unica";
font-size: 13px;
line-height: 13px;
font-weight: 300;
color: #000;
overscroll-behavior: none !important;
overflow-x: hidden !important;
}
.t1 {
font-size: 60px;
line-height: 70px;
}
h1, h2, h3 {
margin: 0;
font-weight: 300;
}
a, span {
color: #000;
text-decoration: none;
}
header#masthead {
height: auto;
position: absolute;
left: 0;
top: 0;
width: 100%;
padding: 20px !important;
z-index: 99;
}
header#masthead .language-selector {
position: absolute;
left: 50%;
transform: translate(-50%, -50%);
top: 50%;
}
header#masthead .site-branding p {
margin: 0;
}
header#masthead .site-branding h1, header#masthead .site-branding a {
font-size: 13px;
line-height: 13px;
text-transform: uppercase;
}
header#masthead #site-navigation {
position: fixed;
right: 20px;
}
header#masthead #site-navigation #primary-menu-list li.menu-item:not(:last-child) {
margin-right: 10px;
}
header#masthead #site-navigation #primary-menu-list li.menu-item span, header#masthead #site-navigation #primary-menu-list li.menu-item a {
text-transform: uppercase;
}
@media screen and (max-width: 1580px) {
header#masthead .site-branding h1, header#masthead .site-branding a {
font-size: 12px;
line-height: 19px;
}
body, html {
font-size: 12px;
line-height: 12px;
}
}
::-webkit-scrollbar {
width: 0;
display: none;
}
* {
scrollbar-width: 0;
}
::selection {
background-color: #000 !important;
color: #fff !important;
}
a:hover {
text-decoration: line-through !important;
}
[data-split], [data-split-text] > p, [data-split-div] {
font-kerning: none;
-webkit-text-rendering: optimizeSpeed;
text-rendering: optimizeSpeed;
-webkit-transform: translateZ(0);
transform: translateZ(0);
opacity: 0;
will-change: transform;
}
[data-split] .line, [data-split-text] > p .line, [data-split-div] .line {
font-kerning: none;
-webkit-text-rendering: optimizeSpeed;
text-rendering: optimizeSpeed;
-webkit-transform: translateZ(0);
transform: translateZ(0);
will-change: transform;
}
.offset-2 {
margin-left: 4.33333333%;
display: inline-block !important;
}
.reac {
display: inline-block !important;
font-size: 36px;
line-height: 36px;
font-weight: bold;
}
.site-title, .wpml-ls-item, .menu-item, [data-split-start] {
opacity: 0;
-webkit-transform: translateZ(0);
transform: translateZ(0);
will-change: transform;
}
.home #first {
display: block;
margin-bottom: 50px;
}
.home #first .container {
width: 100%;
height: 100vh; height: calc(var(--vh, 1vh) * 100);
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.home #first .container .image-wrapper {
opacity: 0;
position: relative;
z-index: 99;
}
.home #first .container .image-wrapper img {
display: block;
width: 50vw;
height: auto;
}
.home #first .container .bottom-navigation {
width: 100%;
padding: 20px;
position: absolute;
bottom: 0;
left: 0;
z-index: 2;
display: flex;
align-items: flex-end;
justify-content: space-between;
}
.home #first .container .bottom-navigation .links {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: flex-end;
}
.home #first .container .bottom-navigation .links .label {
color: #909090;
text-transform: uppercase;
margin-bottom: 4px;
}
.home #first .container .bottom-navigation .links a {
text-decoration: none;
text-transform: uppercase;
display: block;
}
.home #first .container .bottom-navigation .socials {
display: flex;
flex-direction: column;
}
.home #first .container .bottom-navigation .socials span {
display: block;
}
.home #first .container .bottom-navigation .socials span:not(:last-child) {
margin-bottom: 4px;
}
.home #first .container .bottom-navigation .socials span.label {
color: #909090;
text-transform: uppercase;
}
.home #first .container .bottom-navigation .socials span a {
text-decoration: none;
text-transform: uppercase;
display: block;
}
.home #first .container .sceneWrapper {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
display: block;
z-index: 0;
pointer-events: none;
opacity: 0;
}
.home #first .container .sceneWrapper.is-visible {
opacity: 1;
transition: opacity 0.5s ease;
}
.home #first .container .sceneWrapper.is-visible .sceneContent {
transform: none;
}
.home #first .container .sceneWrapper .sceneContent {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
z-index: 1;
transform: scale(0.5);
transition: transform 1s cubic-bezier(0.22, 1.45, 0.36, 1);
}
.home #first .container .sceneWrapper .sceneContent canvas {
display: block;
width: 100%;
height: 100%;
}
.home #method {
display: flex;
align-items: center;
justify-content: center;
}
.home #method .container {
width: 100%;
height: 100vh; height: calc(var(--vh, 1vh) * 100);
padding: 20px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
position: relative;
}
.home #method .container .title {
display: flex;
align-items: stretch;
justify-content: flex-start;
position: absolute;
left: 20px;
top: 20px;
margin-bottom: 20px;
}
.home #method .container .title .left, .home #method .container .title .right {
display: flex;
flex-direction: column;
justify-content: flex-start;
}
.home #method .container .title .left {
margin-right: 5px;
line-height: 18px;
}
.home #method .container .title h2, .home #method .container .title span {
font-size: 14px;
line-height: 18px;
text-transform: uppercase;
display: block;
}
.home #method .container .title h2 p, .home #method .container .title span p {
margin: 0;
}
.home #method .container .title h2 p strong, .home #method .container .title span p strong {
font-size: 18px;
line-height: 18px;
}
.home #method .container .title span {
margin-top: 5px;
}
.home #method .container .text {
display: flex;
justify-content: flex-end;
width: 60vw;
margin-bottom: 30px;
}
.home #method .container .text p {
width: auto;
display: block;
font-size: 36px;
line-height: 46px;
font-weight: 300 !important;
}
.home #method .container .text p:first-child {
margin: 0;
}
.home #method .container .text p i {
font-size: 38px;
letter-spacing: 0.5px;
font-weight: 700 !important;
font-style: normal !important;
display: inline-block;
font-family: "the-seasons", sans-serif;
}
.home #method .container .text-right {
display: flex;
flex-direction: column;
width: 60vw;
}
.home #method .container .text-right p {
font-size: 24px;
line-height: 34px;
margin-top: 0;
}
.home #method .container .text-right p strong {
font-size: 36px;
line-height: 40px;
display: inline-block !important;
}
.home #method .container .text-bottom {
display: flex;
flex-direction: column;
width: 60vw;
margin-top: 30px;
}
.home #method .container .text-bottom p {
width: 100%;
margin-top: 0;
font-size: 18px;
line-height: 25px;
}
.home #method .container .text-bottom p strong {
font-size: 24px;
line-height: 30px;
}
.home #services .container {
width: 100%;
height: 100vh; height: calc(var(--vh, 1vh) * 100);
padding: 20px;
align-items: center;
justify-content: center;
display: flex;
flex-flow: row wrap;
justify-content: flex-start;
justify-content: space-between;
position: relative;
}
.home #services .container .intro {
position: absolute;
top: 20px;
right: 20px;
display: block;
text-align: right;
}
.home #services .container .intro h2 {
text-transform: uppercase;
text-align: right;
font-size: 14px;
line-height: 16px;
}
.home #services .container .col {
width: calc(100% / 4 - 20px);
display: flex;
flex-direction: column;
transform: translateZ(0);
position: relative;
}
.home #services .container .col .inner {
width: 100%;
display: flex;
flex-direction: column;
transform: translateZ(0);
will-change: transform;
}
.home #services .container .col .inner a {
width: 100%;
display: flex;
flex-direction: column;
transform: translateZ(0);
}
.home #services .container .col .inner a .imageWrapper {
display: block;
overflow: hidden;
}
.home #services .container .col .inner a .imageWrapper img {
display: block;
width: 100%;
height: auto;
transform-origin: left;
transition: filter 0.4s ease-in-out;
}
.home #services .container .col .inner a .name {
display: flex;
justify-content: space-between;
margin-top: 10px;
}
.home #services .container .col .inner a .name span {
display: block;
text-transform: uppercase;
}
.home #services .container .col .inner a .name span:last-child {
text-transform: lowercase;
font-size: 10px;
text-decoration: none !important;
}
.home #services .container .col .inner a:hover .imageWrapper img {
filter: grayscale(1);
}
.home #info {
padding-top: 30px;
}
.home #info .container {
width: 100%;
height: 100vh; height: calc(var(--vh, 1vh) * 100);
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.home #info .container .contact {
z-index: 1;
position: relative;
}
.home #info .container .contact span a {
display: block;
text-transform: uppercase;
}
.home #info .container .image-final {
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 20px;
}
.home #info .container .image-final img {
width: 168.36px;
height: auto;
display: block;
}
.home #info .container .credits {
position: absolute;
right: 20px;
bottom: 20px;
z-index: 1;
}
.home #info .container .credits a {
display: block;
font-size: 12px;
line-height: 12px;
text-transform: lowercase;
}
.home #info .container .credits a:hover {
text-decoration: underline;
}
.home #info .container .gallery {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 0;
}
.home #info .container .gallery img {
width: 140px;
height: auto;
position: absolute;
display: none;
transform: translateX(-50%) translateY(-50%);
}
.single-servizi #content {
min-height: 0 !important;
}
.single-servizi .alert {
font-size: 14px;
line-height: 18px;
margin-bottom: -20px;
}
.single-servizi #single {
width: 100%;
height: 100vh; height: calc(var(--vh, 1vh) * 100);
padding: 20px;
padding-top: 55px;
}
.single-servizi #single .container {
width: 100%;
height: 100%;
display: flex;
align-items: flex-start;
justify-content: flex-start;
}
.single-servizi #single .container .left, .single-servizi #single .container .right {
width: 50%;
height: 100%;
}
.single-servizi #single .container .left img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.single-servizi #single .container .right {
display: block;
}
.single-servizi #single .container .right .rightContent {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
max-height: 100vh;
height: auto;
overflow-y: auto;
padding-bottom: 120px;
}
.single-servizi #single .container .right .rightContent .text, .single-servizi #single .container .right .rightContent .title, .single-servizi #single .container .right .rightContent .contact {
max-width: 82%;
width: 100%;
}
.single-servizi #single .container .right .rightContent .title {
display: flex;
justify-content: flex-start;
margin-bottom: 20px;
padding-top: 100px;
}
.single-servizi #single .container .right .rightContent .title h1 {
font-size: 70px;
line-height: 70px;
display: block;
text-align: right;
font-weight: 700;
}
.single-servizi #single .container .right .rightContent .text {
font-size: 20px;
line-height: 26px;
}
.single-servizi #single .container .right .rightContent .text span {
display: block;
}
.single-servizi #single .container .right .rightContent .contact {
margin-top: 35px;
text-align: left;
}
.single-servizi #single .container .right .rightContent .contact span {
display: block;
text-align: left;
}
.single-servizi #single .container .right .rightContent .contact span a {
text-transform: uppercase;
}
.single-servizi.postid-48 #single .container .right .rightContent .title, .single-servizi.postid-88 #single .container .right .rightContent .title {
padding-top: 23vw;
}
@media screen and (min-width: 2000px) {
.single-servizi #single .container .right .rightContent .title {
padding-top: 340px;
}
}
@media screen and (max-width: 1600px) {
.home #method .container .title h2, .home #method .container .title span {
font-size: 12px;
line-height: 14px;
}
.home #method .container .text p {
font-size: 30px;
line-height: 39px;
}
.home #method .container .text p i {
font-size: 34px;
}
.home #method .container .text-right p {
font-size: 20px;
line-height: 28px;
}
.home #method .container .text-right, .home #method .container .text-bottom, .home #method .container .text {
width: 70vw;
}
.single-servizi #single .container .right .rightContent .text {
font-size: 18px;
line-height: 24px;
}
.single-servizi #single .container .right .rightContent .title h1 {
font-size: 55px;
line-height: 60px;
}
.reac {
display: inline-block !important;
font-size: 28px;
line-height: 28px;
}
.single-servizi #single .container .right .rightContent .title h1 {
font-size: 46px;
line-height: 54px;
}
.home #method .container .text-right p strong, .reac {
font-size: 26px;
line-height: 36px;
}
.single-servizi.postid-48 #single .container .right .rightContent .title, .single-servizi.postid-88 #single .container .right .rightContent .title {
padding-top: 65vh;
}
}
@media screen and (max-width: 1200px) {
.home #method .container .text p {
font-size: 26px;
line-height: 35px;
}
.home #method .container .text p i {
font-size: 29px;
}
.home #method .container .text-right p {
font-size: 18px;
line-height: 25px;
}
.home #method .container .text-right, .home #method .container .text-bottom, .home #method .container .text {
width: 90vw;
}
.single-servizi #single .container .right .rightContent .title {
display: flex;
margin-bottom: 20px;
padding-top: 230px;
}
.single-servizi #single .container .right .rightContent .title {
margin-bottom: 0;
}
.single-servizi.postid-48 #single .container .right .rightContent .title, .single-servizi.postid-88 #single .container .right .rightContent .title {
padding-top: 90vh;
}
}
@media screen and (max-width: 1080px) {
.single-servizi #single .container .right .rightContent .title h1 {
font-size: 38px;
line-height: 45px;
}
}
@media screen and (max-width: 800px) {
.home #first .container .image-wrapper img {
width: 90vw;
height: auto;
}
.primary-navigation > .primary-menu-container {
position: absolute !important;
right: 0;
top: 0;
}
.primary-navigation > .primary-menu-container li, .primary-navigation > .primary-menu-container a {
text-align: right;
margin: 0 !important;
}
.primary-navigation > .primary-menu-container li {
margin-bottom: 4px !important;
}
header#masthead {
padding: 5vw;
}
header#masthead .site-branding h1, header#masthead .site-branding a {
font-size: 12px;
line-height: 15px;
width: 50%;
display: block;
}
.wpml-ls-legacy-list-horizontal {
border: 0;
padding: 0;
}
header#masthead .language-selector {
position: absolute;
left: 50%;
transform: translateX(-50%);
top: 5vw;
}
.wpml-ls-legacy-list-horizontal a {
display: block;
text-decoration: none;
padding: 0 5px;
}
.home #first .container .bottom-navigation {
padding: 5vw;
}
.home #first .container .bottom-navigation .socials span {
display: block;
text-align: right;
}
.home #method .container .title {
position: relative;
left: unset;
top: unset;
margin-bottom: 40px;
width: 90vw;
}
.home #method {
margin-top: 80px;
margin-bottom: 0px;
}
.home #method .container .text p {
font-size: 19px;
line-height: 25px;
}
.home #method .container .text p i {
font-size: 19px;
line-height: 25px;
display: inline-block;
}
.home #method .container .text {
justify-content: flex-start;
}
.home #method .container .text .line {
width: 100%;
display: inline-block;
}
.home #method .container .text p {
width: 100%;
text-align: right;
display: inline-block;
}
.home #services .container .col {
width: calc(100% / 2 - 8px);
}
.home #services .container .col .inner a .name span:last-child {
display: none;
}
.home #services .container .intro {
top: 5vw;
left: 5vw;
right: auto;
}
.home #services .container {
padding-top: 70px;
}
.home #info .container {
height: auto;
}
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
overflow: hidden; }
body {
position: fixed;
overscroll-behavior-y: none;
overscroll-behavior-x: none;
}
html body #page {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
min-height: 100dvh;
overflow: hidden;
overflow-y: scroll !important;
-ms-scroll-chaining: none;
overscroll-behavior: contain; }
.single-servizi #single {
width: 100%;
height: auto;
}
.single-servizi #single .container {
height: auto;
flex-flow: row wrap;
}
.single-servizi #single .container .left, .single-servizi #single .container .right {
width: 100%;
height: auto;
order: 2;
}
.single-servizi #single .container .left {
padding-bottom: 6px;
}
.single-servizi #single .container .right {
order: 1;
margin-bottom: 0px;
}
.single-servizi #single .container .right .rightContent .text, .single-servizi #single .container .right .rightContent .title, .single-servizi #single .container .right .rightContent .contact {
width: 100%;
max-width: 100%;
}
.single-servizi #single .container .right .rightContent {
max-height: unset;
}
.single-servizi #single .container .right .rightContent .title {
display: flex;
margin-bottom: 0px;
padding-top: 30px !important;
}
.single-servizi #single .container .right .rightContent .title h1 {
font-size: 35px;
line-height: 40px;
}
.single-servizi #single .container .right .rightContent {
padding-bottom: 40px;
}
.home #method .container .text-right p, .home #method .container .text-bottom p {
font-size: 16px;
line-height: 22px;
}
.home #method .container .title h2 {
font-size: 14px;
line-height: 16px;
}
.home #method .container .title .left {
line-height: 18px;
}
.home #method .container .text-bottom {
margin-top: 0;
}
.single-servizi #single .container .right .rightContent .text span + br {
display: none !important;
}
.home #method .container {
height: auto;
}
.home #first .container {
height: 100%;
min-height: 100dvh;
}
.home #services .container {
height: auto;
}
.home #services .container .col {
margin-top: 40px;
}
.home #method .container .text p i {
letter-spacing: 0 !important;
}
.single-servizi #single .container .right .rightContent .text {
font-size: 16px;
line-height: 22px;
}
header#masthead #site-navigation {
position: relative;
right: unset;
}
.reac {
display: inline-block !important;
font-size: 23px;
line-height: 23px;
}
.home #method .container .text-right p strong {
font-size: 23px;
line-height: 23px;
}
.home #method .container .text-bottom p strong {
font-size: 23px;
line-height: 23px;
}
.single-servizi #single .container .right .rightContent .title h1 {
font-size: 31px;
line-height: 40px;
}
.home #info .container {
flex-direction: column;
margin-top: 120px;
}
.home #info .container .image-final {
position: relative;
left: unset;
bottom: unset;
transform: unset;
margin-top: 120px;
margin-bottom: 20px;
}
.home #info .container .image-final img {
width: 80px;
}
}