html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; /*font-size: 100%;*/ /*font: inherit;*/ vertical-align: baseline; font-family: 'Poppins', sans-serif; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } html.has-scroll-smooth { overflow: hidden; } html.has-scroll-dragging { user-select: none; } .has-scroll-smooth body { overflow: hidden; } .has-scroll-smooth [data-scroll-container] { min-height: 100vh; } [data-scroll-direction="horizontal"] [data-scroll-container] { height: 100vh; display: inline-block; white-space: nowrap; } [data-scroll-direction="horizontal"] [data-scroll-section] { display: inline-block; vertical-align: top; white-space: nowrap; height: 100%; } .c-scrollbar { position: absolute; right: 0; top: 0; width: 11px; height: 100%; transform-origin: center right; transition: transform 0.3s, opacity 0.3s; opacity: 0; } .c-scrollbar:hover { transform: scaleX(1.45); } .c-scrollbar:hover, .has-scroll-scrolling .c-scrollbar, .has-scroll-dragging .c-scrollbar { opacity: 1; } [data-scroll-direction="horizontal"] .c-scrollbar { width: 100%; height: 10px; top: auto; bottom: 0; transform: scaleY(1); } [data-scroll-direction="horizontal"] .c-scrollbar:hover { transform: scaleY(1.3); } .c-scrollbar_thumb { position: absolute; top: 0; right: 0; background-color: black; opacity: 0.5; width: 7px; border-radius: 10px; margin: 2px; cursor: grab; } .has-scroll-dragging .c-scrollbar_thumb { cursor: grabbing; } [data-scroll-direction="horizontal"] .c-scrollbar_thumb { right: auto; bottom: 0; } @font-face { src: url("font/inter-ui-light-webfont.woff2") format("woff2"), url("font/inter-ui-light-webfont.woff") format("woff"); font-weight: lighter; font-style: normal; } @font-face { src: url("font/inter-ui-regular-webfont.woff2") format("woff2"), url("font/inter-ui-regular-webfont.woff") format("woff"); font-weight: normal; font-style: normal; } @font-face { src: url("font/inter-ui-medium-webfont.woff2") format("woff2"), url("font/inter-ui-medium-webfont.woff") format("woff"); font-weight: normal; font-style: normal; } /* * MEDIA QUERY */ /* VARIABLES */ * { -webkit-font-smoothing: antialiased; box-sizing: border-box; } @media only screen and (min-width: 1025px) and (max-width: 1280px) and (max-device-height: 720px) { html { font-size: 10px; } } html.has-scroll-smooth { overflow: hidden; position: fixed; left: 0; right: 0; top: 0; bottom: 0; } body { overscroll-behavior: none; overflow: hidden; background-color: #fff; } ::-webkit-scrollbar { display: none; } img { display: block; width: 100%; } .img { line-height: 0; width: 100%; } .bold { font-weight: bold; } .uppercase { text-transform: uppercase; } .hidden { visibility: hidden; } h3 { font-weight: normal; font-weight: normal; font-size: 2rem; } li { font-weight: normal; font-size: 1rem; line-height: 1.3rem; color: #000; } p { font-weight: normal; font-size: 1rem; line-height: 1.3rem; /*color:#fff;*/ /*background: linear-gradient(to right, #ebdb9c, #e8ba50 50%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;*/ } @media only screen and (min-device-width: 0px) and (max-device-width: 1023px) { p { font-size: 0.8rem; } } a { font-weight: normal; text-decoration: none; color: #F5F3F4; line-height: 1.3rem; } @media only screen and (min-device-width: 0px) and (max-device-width: 1023px) { a { font-size: 0.8rem; } } a:visited { color: #F5F3F4; } span { color: #F5F3F4; font-weight: normal; } @media only screen and (min-device-width: 0px) and (max-device-width: 1023px) { span { font-size: 0.8rem; } } .small-text { font-size: 1.1rem; line-height: 1.3rem; font-weight: normal; } @media only screen and (min-device-width: 0px) and (max-device-width: 1023px) { .small-text { font-size: 0.8rem; line-height: 1rem; } } .normal-text { font-size: 1.6rem; line-height: 2rem; font-weight: normal; } @media only screen and (min-device-width: 0px) and (max-device-width: 1023px) { .normal-text { font-size: 1.2rem; line-height: 1.5rem; } } .medium-text { font-size: 4rem; line-height: 4.6rem; font-weight: normal; } @media only screen and (min-device-width: 0px) and (max-device-width: 1023px) { .medium-text { font-size: 1.4rem; line-height: 2rem; } } @media only screen and (min-width: 768px) and (max-width: 1024px) and (min-height: 600px) and (max-height: 1024px) and (orientation: landscape) { .medium-text { font-size: 2rem; line-height: 3rem; } } @media only screen and (min-width: 1024px) and (max-width: 1366px) and (min-height: 1024px) { .medium-text { font-size: 2rem; line-height: 3rem; } } @media only screen and (min-device-width: 1281px) and (max-width: 1920px) and (max-device-height: 1080px) { .medium-text { font-size: 3rem; line-height: 3.6rem; } body .slide-text__wrapper .titoletto .main-title{ font-size: 2.7rem !important; line-height: 3.6rem !important; } .homepage section.sezione-3 .slider__box{ height: calc(65vw * 9 / 16 + 0rem); } } .big-text { font-size: 6.8rem; line-height: 7.2rem; font-weight: normal; } @media only screen and (min-device-width: 0px) and (max-device-width: 1023px) { .big-text { font-size: 2.4rem; line-height: 2.6rem; } } .big-title { font-size: 27rem; } @media only screen and (min-device-width: 0px) and (max-device-width: 1023px) { .big-title { font-size: 4rem; } } @media only screen and (min-width: 768px) and (max-width: 1024px) and (min-height: 600px) and (max-height: 1024px) and (orientation: portrait) { .big-title { font-size: 8rem; } } @media only screen and (min-width: 768px) and (max-width: 1024px) and (min-height: 600px) and (max-height: 1024px) and (orientation: landscape) { .big-title { font-size: 11rem; } } @media only screen and (min-width: 1024px) and (max-width: 1366px) and (min-height: 1024px) { .big-title { font-size: 11rem; } } @media only screen and (min-width: 1024px) and (max-width: 1366px) and (min-height: 1024px) and (orientation: landscape) { .big-title { font-size: 14rem; } } @media only screen and (min-device-width: 1281px) and (max-width: 1920px) and (max-device-height: 1080px) { .big-title { font-size: 20rem; } } @media only screen and (min-device-width: 1440px) and (max-device-width: 1440px) and (min-device-height: 900px) and (max-device-height: 900px) and (-webkit-min-device-pixel-ratio: 2) { .big-title { font-size: 15rem; } } @media only screen and (min-device-width: 1680px) and (max-device-width: 1680px) and (min-device-height: 1050px) and (max-device-height: 1050px) and (-webkit-min-device-pixel-ratio: 2) { .big-title { font-size: 17rem; } } @media only screen and (min-width: 1025px) and (max-width: 1280px) and (max-device-height: 720px) { .big-title { font-size: 22rem; } } label { font-weight: normal; font-size: 1rem; line-height: 1rem; opacity: 0.7; } input { background-color: transparent; border: none; width: 100%; padding: 0; line-height: 0; height: 100%; outline: none; font-size: 1rem; } input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { /* display: none; <- Crashes Chrome on hover */ -webkit-appearance: none; margin: 0; /* <-- Apparently some margin are still there even though it's hidden */ } input[type=number]::-webkit-outer-spin-button, input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } input[type=number] { -moz-appearance: textfield; } textarea { background-color: transparent; border: none; width: 100%; height: 10rem; outline: none; resize: none; font-size: 1rem; } .cta { display: inline-block; } .cta .cta-rect { position: relative; padding: 1.25rem 2.5rem; cursor: pointer; } @media only screen and (min-device-width: 0px) and (max-device-width: 1023px) { .cta .cta-rect { width: 60vw; padding: 0rem 1.25rem; height: 48px; } } .cta .cta-rect:hover .cta-rect__bg.white { opacity: 1; } .cta .cta-rect:hover .cta-rect__bg.black { opacity: 1; } @media only screen and (min-device-width: 0px) and (max-device-width: 1023px) { .cta .cta-rect:hover .cta-rect__bg.white { opacity: 0; } .cta .cta-rect:hover .cta-rect__bg.black { opacity: 1; } } @media only screen and (min-width: 768px) and (max-width: 1024px) and (min-height: 600px) and (max-height: 1024px) { .cta .cta-rect:hover .cta-rect__bg.white { opacity: 0; } .cta .cta-rect:hover .cta-rect__bg.black { opacity: 1; } } @media only screen and (min-width: 1024px) and (max-width: 1366px) and (min-height: 1024px) { .cta .cta-rect:hover .cta-rect__bg.white { opacity: 0; } .cta .cta-rect:hover .cta-rect__bg.black { opacity: 1; } } .cta .cta-rect:hover .cta-rect__border.white { opacity: 1; } .cta .cta-rect:hover .cta-rect__border.black { opacity: 0; } @media only screen and (min-device-width: 0px) and (max-device-width: 1023px) { .cta .cta-rect:hover .cta-rect__border.white { opacity: 0; } .cta .cta-rect:hover .cta-rect__border.black { opacity: 1; } } @media only screen and (min-width: 768px) and (max-width: 1024px) and (min-height: 600px) and (max-height: 1024px) { .cta .cta-rect:hover .cta-rect__border.white { opacity: 0; } .cta .cta-rect:hover .cta-rect__border.black { opacity: 1; } } @media only screen and (min-width: 1024px) and (max-width: 1366px) and (min-height: 1024px) { .cta .cta-rect:hover .cta-rect__border.white { opacity: 0; } .cta .cta-rect:hover .cta-rect__border.black { opacity: 1; } } .cta .cta-rect:hover .cta-rect__wrapper .cta-rect__txt p { color: #fff !important; } @media only screen and (min-device-width: 0px) and (max-device-width: 1023px) { .cta .cta-rect:hover .cta-rect__wrapper .cta-rect__txt p { color: #F5F3F4 !important; } } @media only screen and (min-width: 768px) and (max-width: 1024px) and (min-height: 600px) and (max-height: 1024px) { .cta .cta-rect:hover .cta-rect__wrapper .cta-rect__txt p { color: #F5F3F4 !important; } } @media only screen and (min-width: 1024px) and (max-width: 1366px) and (min-height: 1024px) { .cta .cta-rect:hover .cta-rect__wrapper .cta-rect__txt p { color: #F5F3F4 !important; } } .cta .cta-rect .cta-rect__bg { position: absolute; width: 100%; height: 100%; left: 0; top: 0; -webkit-transition: opacity 0.2s linear 0s; -moz-transition: opacity 0.2s linear 0s; -o-transition: opacity 0.2s linear 0s; transition: opacity 0.2s linear 0s; border-radius: 50px; } .cta .cta-rect .cta-rect__bg.white { background-color: #F5F3F4; opacity: 0; } .cta .cta-rect .cta-rect__bg.black { background-color: #191919; opacity: 1; } .cta .cta-rect .cta-rect__border { position: absolute; left: 0; top: 0; height: 100%; width: 100%; -webkit-transition: opacity 0.2s linear 0s; -moz-transition: opacity 0.2s linear 0s; -o-transition: opacity 0.2s linear 0s; transition: opacity 0.2s linear 0s; border-radius: 50px; } .cta .cta-rect .cta-rect__border.white { border: 1px solid #F5F3F4; opacity: 0; } .cta .cta-rect .cta-rect__border.black { border: 1px solid #191919; opacity: 1; } .cta .cta-rect .cta-rect__wrapper { position: relative; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; } .cta .cta-rect .cta-rect__wrapper .cta-rect__txt { position: relative; white-space: nowrap; text-align: center; } .cta .cta-rect .cta-rect__wrapper .cta-rect__txt p { font-size: 1rem; color: white; letter-spacing: 1px; -webkit-transition: color 0.3s linear 0s; -moz-transition: color 0.3s linear 0s; -o-transition: color 0.3s linear 0s; transition: color 0.3s linear 0s; } @media only screen and (min-device-width: 0px) and (max-device-width: 1023px) { .cta .cta-rect .cta-rect__wrapper .cta-rect__txt p { font-size: 0.8rem; } } .cta-stroke { display: inline-block; } .cta-stroke .cta-rect { position: relative; padding: 1.25rem 2.5rem; cursor: pointer; } @media only screen and (min-device-width: 0px) and (max-device-width: 1023px) { .cta-stroke .cta-rect { width: 100%; padding: 0rem 1.25rem; height: 48px; } } .cta-stroke .cta-rect:hover .cta-rect__bg.black { opacity: 1; } @media only screen and (min-device-width: 0px) and (max-device-width: 1023px) { .cta-stroke .cta-rect:hover .cta-rect__bg.black { opacity: 0; } } @media only screen and (min-width: 768px) and (max-width: 1024px) and (min-height: 600px) and (max-height: 1024px) { .cta-stroke .cta-rect:hover .cta-rect__bg.black { opacity: 0; } } @media only screen and (min-width: 1024px) and (max-width: 1366px) and (min-height: 1024px) { .cta-stroke .cta-rect:hover .cta-rect__bg.black { opacity: 0; } } .cta-stroke .cta-rect:hover .cta-rect__wrapper .cta-rect__txt p { color: #F5F3F4 !important; } @media only screen and (min-device-width: 0px) and (max-device-width: 1023px) { .cta-stroke .cta-rect:hover .cta-rect__wrapper .cta-rect__txt p { color: #000 !important; } } @media only screen and (min-width: 768px) and (max-width: 1024px) and (min-height: 600px) and (max-height: 1024px) { .cta-stroke .cta-rect:hover .cta-rect__wrapper .cta-rect__txt p { color: #000 !important; } } @media only screen and (min-width: 1024px) and (max-width: 1366px) and (min-height: 1024px) { .cta-stroke .cta-rect:hover .cta-rect__wrapper .cta-rect__txt p { color: #000 !important; } } .cta-stroke .cta-rect .cta-rect__bg { position: absolute; width: 100%; height: 100%; left: 0; top: 0; -webkit-transition: opacity 0.2s linear 0s; -moz-transition: opacity 0.2s linear 0s; -o-transition: opacity 0.2s linear 0s; transition: opacity 0.2s linear 0s; border-radius: 50px; } .cta-stroke .cta-rect .cta-rect__bg.black { background-color: #191919; opacity: 0; } .cta-stroke .cta-rect .cta-rect__border { position: absolute; left: 0; top: 0; height: 100%; width: 100%; -webkit-transition: opacity 0.2s linear 0s; -moz-transition: opacity 0.2s linear 0s; -o-transition: opacity 0.2s linear 0s; transition: opacity 0.2s linear 0s; border-radius: 50px; } .cta-stroke .cta-rect .cta-rect__border.black { border: 1px solid #191919; opacity: 1; } .cta-stroke .cta-rect .cta-rect__wrapper { position: relative; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; } .cta-stroke .cta-rect .cta-rect__wrapper .cta-rect__txt { position: relative; white-space: nowrap; text-align: center; } .cta-stroke .cta-rect .cta-rect__wrapper .cta-rect__txt p { font-size: 1rem; color: #000; letter-spacing: 1px; -webkit-transition: color 0.3s linear 0s; -moz-transition: color 0.3s linear 0s; -o-transition: color 0.3s linear 0s; transition: color 0.3s linear 0s; } @media only screen and (min-device-width: 0px) and (max-device-width: 1023px) { .cta-stroke .cta-rect .cta-rect__wrapper .cta-rect__txt p { font-size: 0.8rem; } } .svg-checked { fill: black; } .svg-unchecked { fill: none; stroke: black; stroke-width: 10; stroke-miterlimit: 10; } .svg-checked { fill: black; } .svg-unchecked { fill: none; stroke: black; stroke-width: 10; stroke-miterlimit: 10; } .mobile { display: none !important; } @media only screen and (min-device-width: 0px) and (max-device-width: 1023px) { .mobile { display: block !important; } } @media only screen and (min-width: 768px) and (max-width: 1024px) and (min-height: 600px) and (max-height: 1024px) and (orientation: portrait) { .mobile.exclude-tablet-portrait { display: none !important; } } @media only screen and (min-width: 1024px) and (max-width: 1366px) and (min-height: 1024px) and (orientation: portrait) { .mobile.pro-portrait { display: block !important; } } @media only screen and (min-width: 768px) and (max-width: 1024px) and (min-height: 600px) and (max-height: 1024px) and (orientation: landscape) { .mobile.pro-portrait { display: block !important; } } @media only screen and (min-width: 768px) and (max-width: 1024px) and (min-height: 600px) and (max-height: 1024px) and (orientation: landscape) { .mobile.all-tablet { display: block !important; } } @media only screen and (min-width: 1024px) and (max-width: 1366px) and (min-height: 1024px) { .mobile.all-tablet { display: block !important; } } @media only screen and (min-width: 1025px) and (max-width: 1280px) and (max-device-height: 720px) { .mobile.laptop1280 { display: block !important; } } .desktop { display: block; } @media only screen and (min-device-width: 0px) and (max-device-width: 1023px) { .desktop { display: none !important; } } @media only screen and (min-width: 768px) and (max-width: 1024px) and (min-height: 600px) and (max-height: 1024px) and (orientation: portrait) { .desktop.tablet-portrait { display: block !important; } } @media only screen and (min-width: 1024px) and (max-width: 1366px) and (min-height: 1024px) and (orientation: portrait) { .desktop.exclude-pro-portrait { display: none !important; } } @media only screen and (min-width: 768px) and (max-width: 1024px) and (min-height: 600px) and (max-height: 1024px) and (orientation: landscape) { .desktop.exclude-pro-portrait { display: none !important; } } @media only screen and (min-width: 768px) and (max-width: 1024px) and (min-height: 600px) and (max-height: 1024px) and (orientation: landscape) { .desktop.exclude-all-tablet { display: none !important; } } @media only screen and (min-width: 1024px) and (max-width: 1366px) and (min-height: 1024px) { .desktop.exclude-all-tablet { display: none !important; } } @media only screen and (min-width: 1025px) and (max-width: 1280px) and (max-device-height: 720px) { .desktop.exclude-laptop1280 { display: none !important; } } .clearfix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; } * html .clearfix { zoom: 1; } /* IE6 */ *:first-child + html .clearfix { zoom: 1; } /* IE7 */ header { position: absolute; left: 0; top: 0; width: 100%; display: none; z-index: 799; -webkit-transition: all 0.6s ease-out 0s; -moz-transition: all 0.6s ease-out 0s; -o-transition: all 0.6s ease-out 0s; transition: all 0.6s ease-out 0s; /*-webkit-transform: translateY(-100%); -moz-transform: translateY(-100%); -ms-transform: translateY(-100%); transform: translateY(-100%); -o-transform: translateY(-100%);*/ } header.active { /*-webkit-transform: translateY(0%); -moz-transform: translateY(0%); -ms-transform: translateY(0%); transform: translateY(0%); -o-transform: translateY(0%);*/ } @media only screen and (min-device-width: 0px) and (max-device-width: 1023px) { header { height: 80px; } } header .header__wrapper { position: relative; } @media only screen and (min-device-width: 0px) and (max-device-width: 1023px) { header .header__wrapper { height: 100%; display: flex; align-items: flex-end; justify-content: space-between; } } header .header__wrapper .logo { margin-left: 0vw; } @media only screen and (min-device-width: 0px) and (max-device-width: 1023px) { header .header__wrapper .logo { margin-left: 5vw; } } @media only screen and (min-width: 768px) and (max-width: 1024px) and (min-height: 600px) and (max-height: 1024px) and (orientation: landscape) { header .header__wrapper .logo { margin-left: 0; } } @media only screen and (min-width: 1024px) and (max-width: 1366px) and (min-height: 1024px) { header .header__wrapper .logo { margin-left: 5vw; } } @media only screen and (min-device-width: 1366px) and (max-device-width: 1366px) and (max-device-height: 768px) { header .header__wrapper .logo { margin-left: 0vw; } } @media only screen and (min-width: 1025px) and (max-width: 1280px) and (max-device-height: 720px) { header .header__wrapper .logo { margin-left: 0; } } @media only screen and (min-device-width: 1680px) and (max-device-width: 1680px) and (min-device-height: 1050px) and (max-device-height: 1050px) and (-webkit-min-device-pixel-ratio: 2) { header .header__wrapper .logo { margin-left: 20vw; } } @media only screen and (min-device-width: 1440px) and (max-device-width: 1440px) and (min-device-height: 900px) and (max-device-height: 900px) and (-webkit-min-device-pixel-ratio: 2) { header .header__wrapper .logo { margin-left: 20vw; } } header .header__wrapper .logo p { font-size: 8rem; font-weight: 500; line-height: 9rem; } @media only screen and (min-device-width: 0px) and (max-device-width: 1023px) { header .header__wrapper .logo p { font-size: 2.6rem; line-height: 3rem; } } @media only screen and (min-width: 768px) and (max-width: 1024px) and (min-height: 600px) and (max-height: 1024px) and (orientation: landscape) { header .header__wrapper .logo p { font-size: 6rem; line-height: 6rem; } } header .header__wrapper .right-mobile .right__wrapper { position: relative; display: flex; } header .header__wrapper .right-mobile .right__wrapper .cta { padding: 0.25rem; } header .header__wrapper .right-mobile .right__wrapper .cta .cta-rect { width: auto; } header .header__wrapper .right-mobile .right__wrapper .write { position: relative; padding: 0.25rem; margin-right: calc(5vw - 0.25rem); } header .header__wrapper .right-mobile .right__wrapper .write .write__wrapper { position: relative; display: flex; justify-content: center; align-items: center; width: 48px; } header .header__wrapper .right-mobile .right__wrapper .write .write__wrapper .image-write { position: absolute; width: 20px; } header .header__wrapper .right-mobile .right__wrapper .write .write__wrapper .image-write .svg-write { fill: #F5F3F4; } header .header__wrapper .right-mobile .right__wrapper .write .write__wrapper .image-circle { position: relative; width: 100%; } header .header__wrapper .right-mobile .right__wrapper .write .write__wrapper .image-circle .svg-circle-fill { fill: #191919; } header .header__wrapper .right { position: absolute; right: 3.75rem; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); -o-transform: translateY(-50%); } header .header__wrapper .right .right__wrapper { position: relative; display: flex; } header .header__wrapper .right .right__wrapper .cta { position: relative; -webkit-transition: opacity 0.3s linear 0s; -moz-transition: opacity 0.3s linear 0s; -o-transition: opacity 0.3s linear 0s; transition: opacity 0.3s linear 0s; opacity: 1; margin-left: 1rem; } header .header__wrapper .right .right__wrapper .cta:first-child { margin-left: 0; } header .header__wrapper .right .right__wrapper .cta.hide { opacity: 0; } @media only screen and (min-device-width: 0px) and (max-device-width: 1023px) { header .header__wrapper .right .right__wrapper .cta.hide { opacity: 1; } } .torna-su { position: fixed; right: 2.5vw; bottom: 2.5rem; width: 60px; -webkit-transform: translateX(300%); -moz-transform: translateX(300%); -ms-transform: translateX(300%); transform: translateX(300%); z-index: 99; } @media only screen and (min-device-width: 0px) and (max-device-width: 1023px) { .torna-su { right: 5vw; bottom: calc(5vw + (6rem - 60px) / 2); } } @media only screen and (min-width: 768px) and (max-width: 1024px) and (min-height: 600px) and (max-height: 1024px) { .torna-su { bottom: calc(2vw + (4rem - 60px) / 2); } } .torna-su .torna-su__wrapper { position: relative; width: 100%; } .torna-su .torna-su__wrapper .svgCircleThin { fill: none; stroke: #e8ba50 ; stroke-width: 2; stroke-miterlimit: 10; } .torna-su .torna-su__wrapper .svgCircleLarge { stroke: #e8ba50 ; fill: none; stroke-width: 1; stroke-miterlimit: 10; stroke-dasharray: 188; stroke-dashoffset: 188; } .torna-su .torna-su__wrapper .svgArrowUp { fill: #e8ba50 ; } .torna-su .torna-su__wrapper .circle-thin { position: relative; } .torna-su .torna-su__wrapper .circle-large { position: absolute; width: 100%; top: 0; left: 0; } .torna-su .torna-su__wrapper .circle-large svg { position: relative; -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform: rotate(-90deg); } .torna-su .torna-su__wrapper .arrow-up { position: absolute; width: 40px; left: 50%; top: 50%; overflow: hidden; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .torna-su .torna-su__wrapper .arrow-up span { position: relative; display: block; } .torna-su .torna-su__hit-area { position: absolute; width: 130%; height: 130%; left: 50%; top: 50%; cursor: pointer; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .video { position: fixed; left: 0; top: 0; width: 100vw; height: 100vh; z-index: 999; display: none; } .video .video__bg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; } .video .video__bg span { position: absolute; display: block; top: 0; left: 0; width: 100%; height: 0%; background-color: #191919; opacity: 0.95; } .video .video__wrapper { position: relative; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; opacity: 0; } .video .video__wrapper .video__container { position: relative; width: 75vw; height: calc(75vw * 9 / 16); background-color: black; } .video .video__wrapper .video__container iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .video .video__wrapper .video__close { position: absolute; top: 2.75rem; right: 2.75rem; padding: 1rem; } .video .video__wrapper .video__close .close__wrapper { position: relative; width: 5rem; display: flex; align-items: center; justify-content: center; } .video .video__wrapper .video__close .close__wrapper .image-close { position: absolute; } .video .video__wrapper .video__close .close__wrapper .svg-circle-fill { fill: black; } .video .video__wrapper .video__close .close__wrapper .svg-close { fill: white; } .homepage { position: relative; opacity: 0; } .homepage .placeholder { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: center center / cover no-repeat; } .homepage .swiper-container { position: relative; width: 100%; height: 100%; } .homepage .swiper-slide__wrapper { position: absolute; width: 100%; height: 100%; background: center center / cover no-repeat; } .homepage .swiper-slide__wrapper .image { width: 100%; height: 100%; } .homepage .swiper-slide__wrapper img { width: 100%; height: 100%; object-fit: cover; } .homepage .swiper-slide__overlay { position: absolute; width: 100%; height: 100%; left: 0; top: 0; background-color: black; opacity: 0.2; } .homepage .stagger-fade-rotate-words { perspective: 40vw; } .homepage .stagger-fade-rotate-words .overflow { position: relative; overflow: hidden; padding-top: 3rem; padding-bottom: 0.5rem; } @media only screen and (min-device-width: 0px) and (max-device-width: 1023px) { .homepage .stagger-fade-rotate-words .overflow { padding-top: 1rem; } } .homepage .stagger-fade-rotate-words .rotate { -webkit-transform: rotateX(-90deg); -moz-transform: rotateX(-90deg); -ms-transform: rotateX(-90deg); transform: rotateX(-90deg); } .homepage .stagger-up-word { position: relative; -webkit-transform: translateY(100%); -moz-transform: translateY(100%); -ms-transform: translateY(100%); transform: translateY(100%); -o-transform: translateY(100%); } .homepage .fade { opacity: 0; } .homepage .scroll-down { position: absolute; bottom: 3.75rem; left: 0; right: 0; padding: 1rem; z-index: 111; } @media only screen and (min-width: 768px) and (max-width: 1024px) and (min-height: 600px) and (max-height: 1024px) and (orientation: landscape) { .homepage .scroll-down { right: calc(2.5vw - 1rem); bottom: calc(2.5vw - 1rem); } } @media only screen and (min-device-width: 1440px) and (max-device-width: 1440px) and (min-device-height: 900px) and (max-device-height: 900px) and (-webkit-min-device-pixel-ratio: 2) { .homepage .scroll-down { right: calc(2.5vw - 1rem); bottom: calc(2.5vw - 1rem); } } .homepage .scroll-down .scroll-down__wrapper { position: relative; display: flex; align-items: center; justify-content: center; width: 60px; z-index: 91; text-align: center; margin: 0 auto; } .homepage .scroll-down .scroll-down__wrapper .image--circle { position: relative; width: 100%; } .homepage .scroll-down .scroll-down__wrapper .image--arrow { position: absolute; width: 100%; } .homepage .scroll-down-mobile { position: absolute; right: calc(5vw - 1rem); bottom: calc(5vw - 0.5rem); padding: 1rem; z-index: 111; } .homepage .scroll-down-mobile .scroll-down__wrapper { position: relative; display: flex; align-items: center; justify-content: center; width: 48px; z-index: 91; } .homepage .scroll-down-mobile .scroll-down__wrapper .image--circle { position: relative; width: 100%; } .homepage .scroll-down-mobile .scroll-down__wrapper .image--arrow { position: absolute; width: 100%; } .homepage .slider-mobile .slider-mobile__wrapper .slider-mobile__container { position: relative; width: 100%; height: 100%; z-index: 1; } .homepage .slider-mobile .box-mobile { position: absolute; } .homepage .slider-mobile .box-mobile .box-mobile__bg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: #191919; } .homepage .slider-mobile .box-mobile .box-mobile__wrapper { position: relative; width: 100%; height: 100%; padding-bottom: 2.5rem; } .homepage .slider-mobile .box-mobile .controls { position: relative; display: flex; margin-top: 2.5rem; margin-left: calc(5vw - 1rem); } .homepage .slider-mobile .box-mobile .control { position: relative; padding: 0.5rem; } .homepage .slider-mobile .box-mobile .control .control__wrapper { position: relative; width: 48px; } .homepage .slider-mobile .box-mobile .control .control__wrapper .image { position: absolute; left: 0; top: 0; width: 100%; } .homepage .slider-mobile .box-mobile .control .control__wrapper .image.image-circle-stroke { position: relative; } .homepage .slider { position: relative; width: 100%; height: 100%; } .homepage .slider .slider__wrapper .slide { position: absolute; left: 0; top: 0; width: 100%; height: 100%; opacity: 0; z-index: 11; } .homepage .slider .slider__wrapper .slide.slide--center { opacity: 1; z-index: 21; } .homepage .slider .slider__wrapper .slide.slide--center .slide__container { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } .homepage .slider .slider__wrapper .slide .slide__container { -webkit-transform: scale(1.2); -moz-transform: scale(1.2); -ms-transform: scale(1.2); transform: scale(1.2); } .homepage .slider .slider__box .box__bg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: #184535; } .homepage .slider .slider__box .slide-text { position: absolute; left: 3.75rem; top: 5rem; opacity: 0; -webkit-transform: translateY(150px); -moz-transform: translateY(150px); -ms-transform: translateY(150px); transform: translateY(150px); -o-transform: translateY(150px); } .homepage .slider .slider__box .slide-text.slide-text--center { opacity: 1; -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); transform: translateY(0px); -o-transform: translateY(0px); } @media only screen and (min-width: 768px) and (max-width: 1024px) and (min-height: 600px) and (max-height: 1024px) and (orientation: landscape) { .homepage .slider .slider__box .slide-text { top: 2.5vw; left: 2.5vw; } } @media only screen and (min-width: 1024px) and (max-width: 1366px) and (min-height: 1024px) { .homepage .slider .slider__box .slide-text { top: 2.5vw; left: 2.5vw; } } @media only screen and (min-device-width: 1281px) and (max-width: 1920px) and (max-device-height: 1080px) { .homepage .slider .slider__box .slide-text { top: 2.5vw; } } @media only screen and (min-device-width: 1440px) and (max-device-width: 1440px) and (min-device-height: 900px) and (max-device-height: 900px) and (-webkit-min-device-pixel-ratio: 2) { .homepage .slider .slider__box .slide-text { top: 2.5vw; left: 2.5vw; } } @media only screen and (min-device-width: 1680px) and (max-device-width: 1680px) and (min-device-height: 1050px) and (max-device-height: 1050px) and (-webkit-min-device-pixel-ratio: 2) { .homepage .slider .slider__box .slide-text { top: 2.5vw; left: 2.5vw; } } @media only screen and (min-width: 1025px) and (max-width: 1280px) and (max-device-height: 720px) { .homepage .slider .slider__box .slide-text { top: 2.5vw; left: 2.5vw; } } .homepage .slider .slider__box .control { position: absolute; padding: 0.5rem; bottom: calc(3rem - 1rem); cursor: pointer; } .homepage .slider .slider__box .control.prev { left: calc(3.75rem - 1rem); } .homepage .slider .slider__box .control.next { left: calc(3.75rem - 1rem + 45px + 60px); } @media only screen and (min-width: 768px) and (max-width: 1024px) and (min-height: 600px) and (max-height: 1024px) and (orientation: landscape) { .homepage .slider .slider__box .control { bottom: calc(2.5vw - 1rem); } .homepage .slider .slider__box .control.prev { left: calc(2.5vw - 1rem); } .homepage .slider .slider__box .control.next { left: calc(2.5vw - 1rem + 45px + 60px); } } @media only screen and (min-width: 1024px) and (max-width: 1366px) and (min-height: 1024px) { .homepage .slider .slider__box .control { bottom: calc(2.5vw - 1rem); } .homepage .slider .slider__box .control.prev { left: calc(2.5vw - 1rem); } .homepage .slider .slider__box .control.next { left: calc(2.5vw - 1rem + 45px + 60px); } } @media only screen and (min-device-width: 1281px) and (max-width: 1920px) and (max-device-height: 1080px) { .homepage .slider .slider__box .control { bottom: calc(2.5vw - 1rem); } .homepage .slider .slider__box .control.prev { left: calc(2.5vw - 1rem); } .homepage .slider .slider__box .control.next { left: calc(2.5vw - 1rem + 45px + 60px); } } @media only screen and (min-device-width: 1440px) and (max-device-width: 1440px) and (min-device-height: 900px) and (max-device-height: 900px) and (-webkit-min-device-pixel-ratio: 2) { .homepage .slider .slider__box .control { bottom: calc(2.5vw - 0.5rem); } .homepage .slider .slider__box .control.prev { left: calc(2.5vw - 1rem); } .homepage .slider .slider__box .control.next { left: calc(2.5vw - 1rem + 45px + 60px); } } .homepage .slider .slider__box .control .control__wrapper { position: relative; width: 60px; } .homepage .slider .slider__box .control .control__wrapper .image { position: absolute; left: 0; top: 0; width: 100%; } .homepage .slider .slider__box .control .control__wrapper .image.image-circle-stroke { position: relative; } .homepage .slider .slider__box .contatore { position: absolute; right: 3.75rem; bottom: 5rem; display: flex; align-items: center; color:#fff } @media only screen and (min-width: 768px) and (max-width: 1024px) and (min-height: 600px) and (max-height: 1024px) and (orientation: landscape) { .homepage .slider .slider__box .contatore { right: 2.5vw; bottom: 2.5vw; } } @media only screen and (min-width: 1024px) and (max-width: 1366px) and (min-height: 1024px) { .homepage .slider .slider__box .contatore { right: 2.5vw; bottom: 2.5vw; } } @media only screen and (min-device-width: 1440px) and (max-device-width: 1440px) and (min-device-height: 900px) and (max-device-height: 900px) and (-webkit-min-device-pixel-ratio: 2) { .homepage .slider .slider__box .contatore { right: 2.5vw; bottom: 2.5vw; } } @media only screen and (min-device-width: 1680px) and (max-device-width: 1680px) and (min-device-height: 1050px) and (max-device-height: 1050px) and (-webkit-min-device-pixel-ratio: 2) { .homepage .slider .slider__box .contatore { right: 2.5vw; bottom: 2.5vw; } } .homepage .slider .slider__box .contatore .slash { margin: 0 0.5rem; } .homepage section { position: relative; } .homepage .titoletto { position: relative; margin-bottom: 1.25rem; } @media only screen and (min-device-width: 0px) and (max-device-width: 1023px) { .homepage .titoletto { margin-bottom: 1rem; } } .homepage .titoletto p { font-weight: 500; } .homepage .description { width: 30vw; } .homepage .description p{ font-size: 16px; line-height: 20px; text-align: justify } @media only screen and (min-width: 768px) and (max-width: 1024px) and (min-height: 600px) and (max-height: 1024px) and (orientation: landscape) { .homepage .description { width: 45vw; } } @media only screen and (min-width: 1024px) and (max-width: 1366px) and (min-height: 1024px) { .homepage .description { width: 45vw; } } @media only screen and (min-device-width: 1440px) and (max-device-width: 1440px) and (min-device-height: 900px) and (max-device-height: 900px) and (-webkit-min-device-pixel-ratio: 2) { .homepage .description { width: 35vw; } } @media only screen and (min-device-width: 1680px) and (max-device-width: 1680px) and (min-device-height: 1050px) and (max-device-height: 1050px) and (-webkit-min-device-pixel-ratio: 2) { .homepage .description { width: 25vw; } } .homepage .tabulazione { position: relative; width: calc(100vw / 12); display: inline-block; } @media only screen and (min-device-width: 0px) and (max-device-width: 1023px) { .homepage .tabulazione { font-size: 1.3rem; line-height: 2rem; } } .homepage .svg-circle { fill: none; stroke-width: 1; stroke: #fff; } .homepage .svg-arrow { fill: #fff; } .homepage .svg-circle-stroke { fill: none; stroke: #fff; stroke-width: 2; stroke-miterlimit: 10; } .homepage .svg-circle-border { stroke: #fff; fill: none; stroke-width: 2; stroke-miterlimit: 10; stroke-dasharray: 182; stroke-dashoffset: 182; } .homepage .svg-coming-soon { fill: white; } .homepage section.sezione-top { width: 100vw; height: 100vh; overflow: hidden; background-color: #31594b; } @media only screen and (min-device-width: 0px) and (max-device-width: 1023px) { .homepage section.sezione-top { z-index: 99; } } .homepage section.sezione-top .intro { position: absolute; left: 7.5rem; top:35%; /* bottom: 3.75rem;*/ width: 35vw; } @media only screen and (min-device-width: 0px) and (max-device-width: 1023px) { .homepage section.sezione-top .intro { top: 10vw; left: 5vw; width: 90vw; } } @media only screen and (min-width: 768px) and (max-width: 1024px) and (min-height: 600px) and (max-height: 1024px) and (orientation: landscape) { .homepage section.sezione-top .intro { width: 60vw; } } @media only screen and (min-width: 1024px) and (max-width: 1366px) and (min-height: 1024px) { .homepage section.sezione-top .intro { width: 60vw; } } @media only screen and (min-device-width: 1440px) and (max-device-width: 1440px) and (min-device-height: 900px) and (max-device-height: 900px) and (-webkit-min-device-pixel-ratio: 2) { .homepage section.sezione-top .intro { width: 45vw; } } @media only screen and (min-width: 1025px) and (max-width: 1280px) and (max-device-height: 720px) { .homepage section.sezione-top .intro { width: 40vw; } } .homepage section.sezione-top .intro-text { position: relative; margin-bottom: 15rem; width: 100%; z-index: 81; } @media only screen and (min-device-width: 0px) and (max-device-width: 1023px) { .homepage section.sezione-top .intro-text { margin-bottom: 2.5rem; } } @media only screen and (min-width: 768px) and (max-width: 1024px) and (min-height: 600px) and (max-height: 1024px) and (orientation: landscape) { .homepage section.sezione-top .intro-text { margin-bottom: 5rem; } } @media only screen and (min-width: 1024px) and (max-width: 1366px) and (min-height: 1024px) { .homepage section.sezione-top .intro-text { margin-bottom: 5rem; } } @media only screen and (min-device-width: 1281px) and (max-width: 1920px) and (max-device-height: 1080px) { .homepage section.sezione-top .intro-text { margin-bottom: 10rem; } } @media only screen and (min-device-width: 1440px) and (max-device-width: 1440px) and (min-device-height: 900px) and (max-device-height: 900px) and (-webkit-min-device-pixel-ratio: 2) { .homepage section.sezione-top .intro-text { margin-bottom: 7.5rem; } } @media only screen and (min-width: 1025px) and (max-width: 1280px) and (max-device-height: 720px) { .homepage section.sezione-top .intro-text { margin-bottom: 5rem; } } .homepage section.sezione-top .intro-text .top { margin-bottom: 1.25rem; } .homepage section.sezione-top .intro-logo { position: relative; perspective: 40vw; z-index: 191; } @media only screen and (min-device-width: 0px) and (max-device-width: 1023px) { .homepage section.sezione-top .intro-logo { margin-left: -0.5rem; } } .homepage section.sezione-top .intro-logo h3 { color: white; font-size: 22rem; } @media only screen and (min-device-width: 0px) and (max-device-width: 1023px) { .homepage section.sezione-top .intro-logo h3 { font-size: 8rem; } } @media only screen and (min-width: 768px) and (max-width: 1024px) and (min-height: 600px) and (max-height: 1024px) { .homepage section.sezione-top .intro-logo h3 { font-size: 12rem; } } @media only screen and (min-width: 1024px) and (max-width: 1366px) and (min-height: 1024px) { .homepage section.sezione-top .intro-logo h3 { font-size: 12rem; } } @media only screen and (min-width: 1024px) and (max-width: 1366px) and (min-height: 1024px) and (orientation: landscape) { .homepage section.sezione-top .intro-logo h3 { font-size: 16rem; } } @media only screen and (min-device-width: 1281px) and (max-width: 1920px) and (max-device-height: 1080px) { .homepage section.sezione-top .intro-logo h3 { font-size: 14rem; } } .homepage section.sezione-top .slider-mobile { position: absolute; height: 100vh; width: 100vw; } .homepage section.sezione-top .slider-mobile .slider-mobile__wrapper .slider-mobile__container { position: absolute; bottom: 0; left: 0; height: 40vh; width: 85vw; } @media only screen and (min-width: 768px) and (max-width: 1024px) and (min-height: 600px) and (max-height: 1024px) and (orientation: portrait) { .homepage section.sezione-top .slider-mobile .slider-mobile__wrapper .slider-mobile__container { height: 60vh; } } .homepage section.sezione-top .slider-mobile .box-mobile { position: absolute; right: 0; bottom: 0; width: 75vw; z-index: 2; transform: scale(0.7); transform-origin: bottom right; } .homepage section.sezione-top .slider-mobile .box-mobile .box-mobile__wrapper { opacity: 0; visibility: hidden; } .homepage section.sezione-top .slider-mobile .box-mobile .control { padding: 0.5rem; } .homepage section.sezione-top .slider-mobile .box-mobile .control .control__wrapper { position: relative; width: 48px; } .homepage section.sezione-top .slider-mobile .box-mobile .control .control__wrapper .image { position: absolute; left: 0; top: 0; width: 100%; } .homepage section.sezione-top .slider-mobile .box-mobile .control .control__wrapper .image.image-circle-stroke { position: relative; } .homepage section.sezione-top .slider-mobile .box-mobile .titoletto { position: relative; width: 65vw; margin: 2.5rem auto 1rem auto; } .homepage section.sezione-top .slider-mobile .box-mobile .description { position: relative; width: 65vw; margin: 0 auto; } .homepage section.sezione-top .slider { height: 100vh; } .homepage section.sezione-top .slider.scroll-enabled .slider__box { width: 40vw; height: 18vw; } .homepage section.sezione-top .slider.scroll-enabled .slider__box:hover .box__bg { opacity: 0.7; } @media only screen and (min-width: 768px) and (max-width: 1024px) and (min-height: 600px) and (max-height: 1024px) { .homepage section.sezione-top .slider.scroll-enabled .slider__box:hover .box__bg { opacity: 1; } } @media only screen and (min-width: 1024px) and (max-width: 1366px) and (min-height: 1024px) { .homepage section.sezione-top .slider.scroll-enabled .slider__box:hover .box__bg { opacity: 1; } } @media only screen and (min-width: 768px) and (max-width: 1024px) and (min-height: 600px) and (max-height: 1024px) and (orientation: landscape) { .homepage section.sezione-top .slider.scroll-enabled .slider__box { width: 60vw; height: 30vw; } } @media only screen and (min-width: 1024px) and (max-width: 1366px) and (min-height: 1024px) { .homepage section.sezione-top .slider.scroll-enabled .slider__box { width: 60vw; height: 30vw; } } .homepage section.sezione-top .slider.scroll-enabled .slider__wrapper { clip: rect(0vh, 100vw, 100vh, 0vw); } .homepage section.sezione-top .slider.scroll-enabled .slider__wrapper .slider__container { transform: scale(1); } .homepage section.sezione-top .slider .slider__box { position: absolute; right: 0; bottom: 0; width: 25vw; height: 20vw; -webkit-transition: all 1.2s ease-in-out 0s; -moz-transition: all 1.2s ease-in-out 0s; -o-transition: all 1.2s ease-in-out 0s; transition: all 1.2s ease-in-out 0s; z-index: 101; opacity: 0.7} .homepage section.sezione-top .slider .slider__box .box__bg { opacity: 1; -webkit-transition: opacity 0.3s linear 0s; -moz-transition: opacity 0.3s linear 0s; -o-transition: opacity 0.3s linear 0s; transition: opacity 0.3s linear 0s; } .homepage section.sezione-top .slider .slider__box .box__wrapper { opacity: 0; visibility: hidden; } .homepage section.sezione-top .slider .slider__wrapper { position: absolute; width: 100%; height: 100vh; clip: rect(0vh, 100vw, 100vh, 25vw); -webkit-transition: all 1.2s ease-in-out 0s; -moz-transition: all 1.2s ease-in-out 0s; -o-transition: all 1.2s ease-in-out 0s; transition: all 1.2s ease-in-out 0s; } .homepage section.sezione-top .slider .slider__wrapper .slider__container { position: absolute; right: 0; width: 100%; height: 100%; transform-origin: right bottom; -webkit-transition: all 1.2s ease-in-out 0s; -moz-transition: all 1.2s ease-in-out 0s; -o-transition: all 1.2s ease-in-out 0s; transition: all 1.2s ease-in-out 0s; } .homepage section.sezione-top .slider .slider__wrapper .slide { width: 100vw; } .homepage section.sezione-top .slider .slider__wrapper .slide .slide__wrapper { position: absolute; left: 0; top: 0; width: 0%; height: 100%; overflow: hidden; } .homepage section.sezione-top .slider .slider__wrapper .slide .slide__wrapper .slide__container { position: absolute; left: 0; top: 0; width: 100vw; height: 100%; } .homepage section.sezione-top .slider .slider__wrapper .slide .slide__wrapper .slide__container .slide__overlay { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: #000; opacity: 0.2; z-index: 99; } .homepage section.sezione-top .slider .slider__wrapper .slide picture { position: relative; width: 100vw; height: 100vh; display: block; } .homepage section.sezione-2 { padding: 15rem 0 calc(25rem + 5vw) 0; background-color: #31594b; } @media only screen and (min-device-width: 0px) and (max-device-width: 1023px) { .homepage section.sezione-2 { padding-top: 5rem; padding-bottom: 5rem; display: flex; flex-direction: column; } } @media only screen and (min-width: 768px) and (max-width: 1024px) and (min-height: 600px) and (max-height: 1024px) and (orientation: landscape) { .homepage section.sezione-2 { padding-top: 5rem; padding-bottom: 5rem; } } @media only screen and (min-width: 1024px) and (max-width: 1366px) and (min-height: 1024px) { .homepage section.sezione-2 { padding-top: 5rem; padding-bottom: 15rem; } } @media only screen and (min-device-width: 1440px) and (max-device-width: 1440px) and (min-device-height: 900px) and (max-device-height: 900px) and (-webkit-min-device-pixel-ratio: 2) { .homepage section.sezione-2 { padding: 10rem 0 calc(25rem + 5vw) 0; } } .homepage section.sezione-2 article { position: relative; width: 75vw; margin: 0 auto; z-index: 2; } @media only screen and (min-device-width: 0px) and (max-device-width: 1023px) { .homepage section.sezione-2 article { width: 90vw; order: 2; margin-top: 3.75rem; } } .homepage section.sezione-2 .image-group { position: relative; margin-top: -5vw; margin-left: 35vw; width: 42vw; height: 42vw; z-index: 1; } @media only screen and (min-device-width: 0px) and (max-device-width: 1023px) { .homepage section.sezione-2 .image-group { margin-top: 5rem; margin-left: 15vw; width: 80vw; height: 80vw; } } @media only screen and (min-width: 768px) and (max-width: 1024px) and (min-height: 600px) and (max-height: 1024px) and (orientation: landscape) { .homepage section.sezione-2 .image-group { margin-left: 25vw; width: 60vw; height: 60vw; } } @media only screen and (min-width: 1024px) and (max-width: 1366px) and (min-height: 1024px) { .homepage section.sezione-2 .image-group { margin-left: 25vw; width: 60vw; height: 60vw; } } .homepage section.sezione-2 .image-group .image--big { position: relative; width: 100%; height: 100%; overflow: hidden; } .homepage section.sezione-2 .image-group .image--big .image--big__wrapper .image__inner { position: absolute; left: 0; bottom: 0; /*width: 42vw; height: calc(42vw * 10 / 9); */} @media only screen and (min-device-width: 0px) and (max-device-width: 1023px) { .homepage section.sezione-2 .image-group .image--big .image--big__wrapper .image__inner { width: 80vw; height: calc(80vw * 10 / 9); } } @media only screen and (min-width: 768px) and (max-width: 1024px) and (min-height: 600px) and (max-height: 1024px) and (orientation: landscape) { .homepage section.sezione-2 .image-group .image--big .image--big__wrapper .image__inner { width: 60vw; height: calc(60vw * 10 / 9); } } @media only screen and (min-width: 1024px) and (max-width: 1366px) and (min-height: 1024px) { .homepage section.sezione-2 .image-group .image--big .image--big__wrapper .image__inner { width: 60vw; height: calc(60vw * 10 / 9); } } .homepage section.sezione-2 .image-group .image--small { position: absolute; width: 15vw; height: calc(15vw * 1.25 / 1); bottom: 10vw; left: 0; -webkit-transform: translateX(-85%); -moz-transform: translateX(-85%); -ms-transform: translateX(-85%); transform: translateX(-85%); } @media only screen and (min-device-width: 0px) and (max-device-width: 1023px) { .homepage section.sezione-2 .image-group .image--small { width: 30vw; height: calc(30vw * 1.25 / 1); -webkit-transform: translateX(-10vw); -moz-transform: translateX(-10vw); -ms-transform: translateX(-10vw); transform: translateX(-10vw); } } @media only screen and (min-width: 768px) and (max-width: 1024px) and (min-height: 600px) and (max-height: 1024px) and (orientation: landscape) { .homepage section.sezione-2 .image-group .image--small { width: 30vw; height: calc(30vw * 1.25 / 1); -webkit-transform: translateX(-10vw); -moz-transform: translateX(-10vw); -ms-transform: translateX(-10vw); transform: translateX(-10vw); } } @media only screen and (min-width: 1024px) and (max-width: 1366px) and (min-height: 1024px) { .homepage section.sezione-2 .image-group .image--small { width: 30vw; height: calc(30vw * 1.25 / 1); -webkit-transform: translateX(-10vw); -moz-transform: translateX(-10vw); -ms-transform: translateX(-10vw); transform: translateX(-10vw); } } .homepage section.sezione-2 .image-group .image--small .image--small__wrapper { position: absolute; width: 100%; height: 100%; left: 0; top: 0; } .homepage section.sezione-2 .image-group .image--small .image--small__wrapper .image--small__container { position: absolute; width: 15vw; height: calc(15vw * 1.25 / 1); left: 0; top: 0; } @media only screen and (min-device-width: 0px) and (max-device-width: 1023px) { .homepage section.sezione-2 .image-group .image--small .image--small__wrapper .image--small__container { width: 30vw; height: calc(30vw * 1.25 / 1); } } @media only screen and (min-width: 768px) and (max-width: 1024px) and (min-height: 600px) and (max-height: 1024px) and (orientation: landscape) { .homepage section.sezione-2 .image-group .image--small .image--small__wrapper .image--small__container { width: 30vw; height: calc(30vw * 1.25 / 1); } } .homepage section.sezione-2 .testo-grande { position: absolute; left: 0; bottom: calc(16vw + 10rem); } @media only screen and (min-device-width: 0px) and (max-device-width: 1023px) { .homepage section.sezione-2 .testo-grande { bottom: auto; top: 5rem; } } @media only screen and (min-width: 768px) and (max-width: 1024px) and (min-height: 600px) and (max-height: 1024px) and (orientation: landscape) { .homepage section.sezione-2 .testo-grande { bottom: 0; } } @media only screen and (min-device-width: 1440px) and (max-device-width: 1440px) and (min-device-height: 900px) and (max-device-height: 900px) and (-webkit-min-device-pixel-ratio: 2) { .homepage section.sezione-2 .testo-grande { bottom: calc(10vw + 5rem); } } .homepage section.sezione-2 .testo-grande h3 { background: linear-gradient(to right, #ebdb9c, #e8ba50 50%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;font-size: 60px; padding: 30px; line-height: 85px; } .homepage section.sezione-2 .testo-grande.testo-grande--stroke { z-index: 11; } .homepage section.sezione-2 .testo-grande.testo-grande--stroke h3 { /*-webkit-text-stroke: 2px #191919;*/ color: transparent; } @media only screen and (min-device-width: 0px) and (max-device-width: 1023px) { .homepage section.sezione-2 .testo-grande.testo-grande--stroke h3 { -webkit-text-stroke: 1px #191919; } } .homepage section.sezione-3 { width: 100vw; overflow: hidden; height: calc(75vw * 9 / 16 + 10rem); margin-top: -10rem; } @media only screen and (min-device-width: 0px) and (max-device-width: 1023px) { .homepage section.sezione-3 { height: auto; margin-top: 0; } } @media only screen and (min-width: 768px) and (max-width: 1024px) and (min-height: 600px) and (max-height: 1024px) and (orientation: landscape) { .homepage section.sezione-3 { margin-top: 0; } } @media only screen and (min-width: 768px) and (max-width: 1024px) and (min-height: 600px) and (max-height: 1024px) and (orientation: landscape) { .homepage section.sezione-3 .description { width: 30vw; } } @media only screen and (min-width: 1024px) and (max-width: 1366px) and (min-height: 1024px) { .homepage section.sezione-3 .description { width: 30vw; } } @media only screen and (min-device-width: 1440px) and (max-device-width: 1440px) and (min-device-height: 900px) and (max-device-height: 900px) and (-webkit-min-device-pixel-ratio: 2) { .homepage section.sezione-3 .description { width: 30vw; } } .homepage section.sezione-3 .slider-mobile { position: relative; width: auto; height: auto; background-color: #31594b; } .homepage section.sezione-3 .slider-mobile .slider__bg { position: absolute; left: 0; bottom: 0; width: 100%; height: calc(100% - 85vw); background-color: #191919; } .homepage section.sezione-3 .slider-mobile .slider-mobile__wrapper { position: relative; margin-left: 15vw; width: 85vw; z-index: 3; height: calc(85vw * 4 / 3); } .homepage section.sezione-3 .slider-mobile .box-mobile { position: relative; } @media only screen and (min-device-width: 0px) and (max-device-width: 1023px) { .homepage section.sezione-3 .slider-mobile .box-mobile { margin-top: 2.5rem; } } .homepage section.sezione-3 .slider-mobile .box-mobile .titoletto { margin-left: 15vw; width: 80vw; } .homepage section.sezione-3 .slider-mobile .box-mobile .description { margin-left: 15vw; width: 80vw; } .homepage section.sezione-3 .slider-mobile .box-mobile .controls { position: relative; display: flex; margin-top: 2.5rem; margin-left: calc(15vw - 0.5rem); } .homepage section.sezione-3 .slider-mobile .box-mobile .control .control__wrapper { position: relative; width: 48px; } .homepage section.sezione-3 .slider-mobile .box-mobile .control .control__wrapper .image { position: absolute; left: 0; top: 0; width: 100%; } .homepage section.sezione-3 .slider-mobile .box-mobile .control .control__wrapper .image.image-circle-stroke { position: relative; } .homepage section.sezione-3 .slider__wrapper { position: absolute; z-index: 2; margin-left: 0; left: auto; right: 0; top: 0; width: 65vw; height: calc(65vw * 9 / 16); } .homepage section.sezione-3 .slider__wrapper .slide { position: absolute; left: 0; top: 0; width: 100%; height: 100%; opacity: 0; z-index: 11; } .homepage section.sezione-3 .slider__wrapper .slide .slide__wrapper { position: absolute; left: 0; top: 0; width: 0%; height: 100%; overflow: hidden; } .homepage section.sezione-3 .slider__wrapper .slide .slide__wrapper .slide__container { position: absolute; left: 0; top: 0; width: 65vw; height: 100%; } .homepage section.sezione-3 .slider__box { position: relative; right: auto; left: 0; top: 10rem; width: 73vw; height: calc(75vw * 9 / 16 + 0rem); } .homepage section.sezione-3 .slider__box .control { bottom: 5rem; -webkit-transform: translateY(50%); -moz-transform: translateY(50%); -ms-transform: translateY(50%); transform: translateY(50%); -o-transform: translateY(50%); } .homepage section.sezione-3 .slider__box .contatore { -webkit-transform: translateY(50%); -moz-transform: translateY(50%); -ms-transform: translateY(50%); transform: translateY(50%); -o-transform: translateY(50%); } @media only screen and (min-device-width: 1440px) and (max-device-width: 1440px) and (min-device-height: 900px) and (max-device-height: 900px) and (-webkit-min-device-pixel-ratio: 2) { .homepage section.sezione-3 .slider__box .contatore { bottom: 7rem; } } .homepage section.sezione-progettazione { padding-top: 50vh; padding-bottom: 40vh; overflow: hidden; } @media only screen and (min-device-width: 0px) and (max-device-width: 1023px) { .homepage section.sezione-progettazione { padding-top: 5rem; padding-bottom: 0; } } @media only screen and (min-width: 768px) and (max-width: 1024px) and (min-height: 600px) and (max-height: 1024px) and (orientation: landscape) { .homepage section.sezione-progettazione { padding-top: 30vh; } } @media only screen and (min-width: 1024px) and (max-width: 1366px) and (min-height: 1024px) { .homepage section.sezione-progettazione { padding-top: 30vh; padding-bottom: 20vh; } } @media only screen and (min-device-width: 1440px) and (max-device-width: 1440px) and (min-device-height: 900px) and (max-device-height: 900px) and (-webkit-min-device-pixel-ratio: 2) { .homepage section.sezione-progettazione { padding-bottom: 30vh; } } .homepage section.sezione-progettazione .image-group { position: relative; width: 100vw; height: 27vw; display: flex; justify-content: space-between; z-index: 6; } @media only screen and (min-device-width: 0px) and (max-device-width: 1023px) { .homepage section.sezione-progettazione .image-group { height: auto; display: block; } } .homepage section.sezione-progettazione .image-group .image { position: relative; flex-basis: 27vw; } @media only screen and (min-device-width: 0px) and (max-device-width: 1023px) { .homepage section.sezione-progettazione .image-group .image { width: 100vw; } } .homepage section.sezione-progettazione .image-group .image .image__wrapper { position: relative; width: 27vw; height: 27vw; overflow: hidden; } @media only screen and (min-device-width: 0px) and (max-device-width: 1023px) { .homepage section.sezione-progettazione .image-group .image .image__wrapper { width: 60vw; height: auto; } } .homepage section.sezione-progettazione .image-group .image .image__inner { position: absolute; top: 0; left: 0; width: 27vw; } @media only screen and (min-device-width: 0px) and (max-device-width: 1023px) { .homepage section.sezione-progettazione .image-group .image .image__inner { position: relative; width: 100%; } } @media only screen and (min-device-width: 0px) and (max-device-width: 1023px) { .homepage section.sezione-progettazione .image-group .image.image--1 { z-index: 3; } } @media only screen and (min-device-width: 0px) and (max-device-width: 1023px) { .homepage section.sezione-progettazione .image-group .image.image--1 .image__wrapper { margin-left: 40vw; } } .homepage section.sezione-progettazione .image-group .image.image--2 { margin-top: 7.5vw; } @media only screen and (min-device-width: 0px) and (max-device-width: 1023px) { .homepage section.sezione-progettazione .image-group .image.image--2 { margin-top: -5rem; z-index: 2; } } @media only screen and (min-width: 768px) and (max-width: 1024px) and (min-height: 600px) and (max-height: 1024px) and (orientation: landscape) { .homepage section.sezione-progettazione .image-group .image.image--2 { margin-top: 20vw; } } .homepage section.sezione-progettazione .image-group .image.image--3 { margin-top: -7.5vw; } @media only screen and (min-device-width: 0px) and (max-device-width: 1023px) { .homepage section.sezione-progettazione .image-group .image.image--3 { margin-top: -5rem; z-index: 1; } } @media only screen and (min-device-width: 0px) and (max-device-width: 1023px) { .homepage section.sezione-progettazione .image-group .image.image--3 .image__wrapper { margin-left: 40vw; } } .homepage section.sezione-progettazione .testo-grande { position: absolute; left: 0; top: 20%; } .homepage section.sezione-progettazione .testo-grande h3 { color: #191919; } .homepage section.sezione-progettazione .testo-grande.testo-grande--stroke { z-index: 11; } .homepage section.sezione-progettazione .testo-grande.testo-grande--stroke h3 { /*-webkit-text-stroke: 2px #191919; color: transparent;*/ } @media only screen and (min-device-width: 0px) and (max-device-width: 1023px) { .homepage section.sezione-progettazione .testo-grande.testo-grande--stroke h3 { -webkit-text-stroke: 1px #191919; } } .homepage section.sezione-5 { padding-bottom: 20rem; } @media only screen and (min-device-width: 0px) and (max-device-width: 1023px) { .homepage section.sezione-5 { padding-top: 2.5rem; padding-bottom: 7.5rem; } } @media only screen and (min-width: 768px) and (max-width: 1024px) and (min-height: 600px) and (max-height: 1024px) and (orientation: landscape) { .homepage section.sezione-5 { padding-bottom: 7.5rem; } } @media only screen and (min-width: 1024px) and (max-width: 1366px) and (min-height: 1024px) { .homepage section.sezione-5 { padding-bottom: 12.5rem; } } .homepage section.sezione-5 article { /*width: 50vw; margin-left: 25vw;*/ margin-left: 2vw; width: 95%; text-align: justify; margin-right: 2vw; } .homepage section.sezione-5 .cta { margin-left: 2vw; } .homepage section.sezione-5 article p { font-size: 20px; line-height: 30px;} @media only screen and (min-device-width: 0px) and (max-device-width: 1023px) { .homepage section.sezione-5 article { width: 90vw; margin: 2.5rem auto 0 auto; } } @media only screen and (min-width: 768px) and (max-width: 1024px) and (min-height: 600px) and (max-height: 1024px) and (orientation: portrait) { .homepage section.sezione-5 article { width: 70vw; } } @media only screen and (min-device-width: 1366px) and (max-device-width: 1366px) and (max-device-height: 768px) { .homepage section.sezione-5 article { margin-left: 20vw; width: 60vw; } } @media only screen and (min-width: 1025px) and (max-width: 1280px) and (max-device-height: 720px) { .homepage section.sezione-5 article { /*margin-left: 20vw; width: 60vw;*/ margin-left: 2vw; width: 95%; text-align: justify; margin-right: 2vw; } } @media only screen and (min-device-width: 1680px) and (max-device-width: 1680px) and (min-device-height: 1050px) and (max-device-height: 1050px) and (-webkit-min-device-pixel-ratio: 2) { .homepage section.sezione-5 article { margin-left: 20vw; width: 60vw; } } @media only screen and (min-device-width: 1440px) and (max-device-width: 1440px) and (min-device-height: 900px) and (max-device-height: 900px) and (-webkit-min-device-pixel-ratio: 2) { .homepage section.sezione-5 article { margin-left: 20vw; width: 60vw; } } .homepage section.sezione-5 .cta { /*margin-left: 25vw;*/ margin-top: 2.5rem; } @media only screen and (min-device-width: 0px) and (max-device-width: 1023px) { .homepage section.sezione-5 .cta { margin-left: 5vw; margin-top: 1.25rem; } } @media only screen and (min-width: 768px) and (max-width: 1024px) and (min-height: 600px) and (max-height: 1024px) and (orientation: portrait) { .homepage section.sezione-5 .cta { margin-left: 15vw; } } @media only screen and (min-device-width: 1366px) and (max-device-width: 1366px) and (max-device-height: 768px) { .homepage section.sezione-5 .cta { margin-left: 20vw; } } @media only screen and (min-width: 1025px) and (max-width: 1280px) and (max-device-height: 720px) { .homepage section.sezione-5 .cta { margin-left: 2vw; } } @media only screen and (min-device-width: 1680px) and (max-device-width: 1680px) and (min-device-height: 1050px) and (max-device-height: 1050px) and (-webkit-min-device-pixel-ratio: 2) { .homepage section.sezione-5 .cta { margin-left: 20vw; } } @media only screen and (min-device-width: 1440px) and (max-device-width: 1440px) and (min-device-height: 900px) and (max-device-height: 900px) and (-webkit-min-device-pixel-ratio: 2) { .homepage section.sezione-5 .cta { margin-left: 20vw; } } @media only screen and (min-device-width: 0px) and (max-device-width: 1023px) { .homepage section.sezione-5 .cta .cta-rect { width: 90vw; } } @media only screen and (min-width: 768px) and (max-width: 1024px) and (min-height: 600px) and (max-height: 1024px) and (orientation: portrait) { .homepage section.sezione-5 .cta .cta-rect { width: 40vw; } } .homepage section.sezione-video .control { position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); padding: 1rem; } .homepage section.sezione-video .control .control__wrapper { position: relative; width: 9rem; display: flex; align-items: center; justify-content: center; cursor: pointer; } @media only screen and (min-device-width: 0px) and (max-device-width: 1023px) { .homepage section.sezione-video .control .control__wrapper { width: 6rem; } } .homepage section.sezione-video .control .control__wrapper:hover .image.circle { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } @media only screen and (min-device-width: 0px) and (max-device-width: 1023px) { .homepage section.sezione-video .control .control__wrapper:hover .image.circle { -webkit-transform: scale(0.7); -moz-transform: scale(0.7); -ms-transform: scale(0.7); transform: scale(0.7); } } @media only screen and (min-width: 768px) and (max-width: 1024px) and (min-height: 600px) and (max-height: 1024px) { .homepage section.sezione-video .control .control__wrapper:hover .image.circle { -webkit-transform: scale(0.7); -moz-transform: scale(0.7); -ms-transform: scale(0.7); transform: scale(0.7); } } @media only screen and (min-width: 1024px) and (max-width: 1366px) and (min-height: 1024px) { .homepage section.sezione-video .control .control__wrapper:hover .image.circle { -webkit-transform: scale(0.7); -moz-transform: scale(0.7); -ms-transform: scale(0.7); transform: scale(0.7); } } .homepage section.sezione-video .control .control__wrapper .image { position: relative; width: 100%; } .homepage section.sezione-video .control .control__wrapper .image.play { width: 3rem; position: absolute; } @media only screen and (min-device-width: 0px) and (max-device-width: 1023px) { .homepage section.sezione-video .control .control__wrapper .image.play { width: 2.4rem; } } .homepage section.sezione-video .control .control__wrapper .image.play .svg-play { fill: white; } .homepage section.sezione-video .control .control__wrapper .image.coming { -webkit-animation: 30s rotate infinite normal linear; animation: 30s rotate infinite normal linear; } .homepage section.sezione-video .control .control__wrapper .image.pause { width: 3rem; opacity: 0; position: absolute; } .homepage section.sezione-video .control .control__wrapper .image.circle { -webkit-transition: transform 0.3s linear 0s; -moz-transition: transform 0.3s linear 0s; -o-transition: transform 0.3s linear 0s; transition: transform 0.3s linear 0s; -webkit-transform: scale(0.7); -moz-transform: scale(0.7); -ms-transform: scale(0.7); transform: scale(0.7); } .homepage section.sezione-video .control .control__wrapper .image.circle .svg-circle-fill { fill: #191919; } .homepage section.sezione-innovazione { padding-top: calc(15rem + 5vw); background-color: #F5F3F4; overflow: hidden; } @media only screen and (min-device-width: 0px) and (max-device-width: 1023px) { .homepage section.sezione-innovazione { padding-top: 10rem; } } .homepage section.sezione-innovazione article { position: absolute; width: 20vw; left: 16vw; bottom: 0; z-index: 2; } @media only screen and (min-device-width: 0px) and (max-device-width: 1023px) { .homepage section.sezione-innovazione article { position: relative; width: 90vw; left: 0; margin: 5rem auto 0 auto; } } @media only screen and (min-width: 768px) and (max-width: 1024px) and (min-height: 600px) and (max-height: 1024px) and (orientation: portrait) { .homepage section.sezione-innovazione article { width: 60vw; } } @media only screen and (min-width: 768px) and (max-width: 1024px) and (min-height: 600px) and (max-height: 1024px) and (orientation: landscape) { .homepage section.sezione-innovazione article { width: 31vw; } } @media only screen and (min-width: 1024px) and (max-width: 1366px) and (min-height: 1024px) { .homepage section.sezione-innovazione article { width: 31vw; } } .homepage section.sezione-innovazione article p { color: #191919; font-size: 1.2rem; line-height: 1.4rem; } @media only screen and (min-device-width: 0px) and (max-device-width: 1023px) { .homepage section.sezione-innovazione article p { text-transform: unset; } } .homepage section.sezione-innovazione .image-group { position: relative; margin-left: 57vw; width: 43vw; height: calc(43vw * 5 / 4); z-index: 1; } @media only screen and (min-device-width: 0px) and (max-device-width: 1023px) { .homepage section.sezione-innovazione .image-group { display: flex; justify-content: space-between; width: 100vw; height: auto; margin-left: 0; } } .homepage section.sezione-innovazione .image-group .image--big { position: relative; width: 100%; height: 100%; overflow: hidden; } @media only screen and (min-device-width: 0px) and (max-device-width: 1023px) { .homepage section.sezione-innovazione .image-group .image--big { flex-basis: 47.5vw; width: 47.5vw; } } .homepage section.sezione-innovazione .image-group .image--big .image--big__wrapper .image__inner { position: absolute; left: 0; bottom: 0; width: 43vw; height: calc(43vw * 5 / 4); } @media only screen and (min-device-width: 0px) and (max-device-width: 1023px) { .homepage section.sezione-innovazione .image-group .image--big .image--big__wrapper .image__inner { position: relative; width: 100%; height: auto; } } .homepage section.sezione-innovazione .image-group .image--small { position: absolute; width: 31vw; height: 31vw; top: -5vw; left: -10vw; -webkit-transform: translateX(-100%); -moz-transform: translateX(-100%); -ms-transform: translateX(-100%); transform: translateX(-100%); } @media only screen and (min-device-width: 0px) and (max-device-width: 1023px) { .homepage section.sezione-innovazione .image-group .image--small { position: relative; top: 0; left: 0; width: 47.5vw; flex-basis: 47.5vw; height: auto; -webkit-transform: translateX(0%); -moz-transform: translateX(0%); -ms-transform: translateX(0%); transform: translateX(0%); } } .homepage section.sezione-innovazione .image-group .image--small .image--small__wrapper { position: absolute; width: 100%; height: 100%; left: 0; top: 0; } @media only screen and (min-device-width: 0px) and (max-device-width: 1023px) { .homepage section.sezione-innovazione .image-group .image--small .image--small__wrapper { position: relative; } } .homepage section.sezione-innovazione .image-group .image--small .image--small__wrapper .image--small__container { position: absolute; width: 31vw; height: 31vw; left: 0; top: 0; } @media only screen and (min-device-width: 0px) and (max-device-width: 1023px) { .homepage section.sezione-innovazione .image-group .image--small .image--small__wrapper .image--small__container { position: relative; width: 100%; height: 100%; } } .homepage section.sezione-innovazione .testo-grande { position: absolute; left: 0; top: 15%; } @media only screen and (min-device-width: 0px) and (max-device-width: 1023px) { .homepage section.sezione-innovazione .testo-grande { top: 5rem; } } .homepage section.sezione-innovazione .testo-grande h3 { color: #191919; } .homepage section.sezione-innovazione .testo-grande.testo-grande--stroke { z-index: 11; } .homepage section.sezione-innovazione .testo-grande.testo-grande--stroke h3 { -webkit-text-stroke: 2px #191919; color: transparent; } @media only screen and (min-device-width: 0px) and (max-device-width: 1023px) { .homepage section.sezione-innovazione .testo-grande.testo-grande--stroke h3 { -webkit-text-stroke: 1px #191919; } } .homepage section.sezione-rails { padding: 20rem 0 25rem 0; overflow: hidden; } @media only screen and (min-device-width: 0px) and (max-device-width: 1023px) { .homepage section.sezione-rails { padding-top: 2.5rem; padding-bottom: 7.5rem; } } @media only screen and (min-width: 768px) and (max-width: 1024px) and (min-height: 600px) and (max-height: 1024px) and (orientation: landscape) { .homepage section.sezione-rails { padding: 10rem 0 12.5rem 0; } } @media only screen and (min-width: 1024px) and (max-width: 1366px) and (min-height: 1024px) { .homepage section.sezione-rails { padding: 10rem 0; } } @media only screen and (min-device-width: 1440px) and (max-device-width: 1440px) and (min-device-height: 900px) and (max-device-height: 900px) and (-webkit-min-device-pixel-ratio: 2) { .homepage section.sezione-rails { padding: 10rem 0; } } @media only screen and (min-device-width: 0px) and (max-device-width: 1023px) { .homepage section.sezione-rails .collection__rails { position: relative; } } .homepage section.sezione-rails .collection__rails .rail__outer { width: 100%; padding: calc(5rem + 3vw) 0rem; } @media only screen and (min-device-width: 0px) and (max-device-width: 1023px) { .homepage section.sezione-rails .collection__rails .rail__outer { padding: calc(5rem + 3vw) 0rem 2.5rem 0; } } .homepage section.sezione-rails .collection__rails .rail__outer .rail__bg { position: absolute; left: -5%; top: 0; width: 110%; height: 100%; } .homepage section.sezione-rails .collection__rails .rail__outer .rail { position: relative; display: inline-flex; white-space: nowrap; width: auto; } .homepage section.sezione-rails .collection__rails .rail__outer .rail .rail__container { display: flex; width: auto; white-space: nowrap; } .homepage section.sezione-rails .collection__rails .rail__outer .rail .rail__container .rail__item { display: inline-block; box-sizing: border-box; } .homepage section.sezione-rails .collection__rails .rail__outer .rail .rail__container .rail__item .rail-element { padding-right: 4rem; display: flex; align-items: center; } @media only screen and (min-device-width: 0px) and (max-device-width: 1023px) { .homepage section.sezione-rails .collection__rails .rail__outer .rail .rail__container .rail__item .rail-element { padding-right: 6rem; } } .homepage section.sezione-rails .collection__rails .rail__outer .rail .rail__container .rail__item .rail-element .img { position: relative; width: 10vw; height: 10vw; } .homepage section.sezione-rails .collection__rails .rail__outer .rail .rail__container .rail__item .rail-element .img.img-1 { top: -4vw; } .homepage section.sezione-rails .collection__rails .rail__outer .rail .rail__container .rail__item .rail-element .img.img-2 { top: 3.5vw; width: 20vw; } @media only screen and (min-device-width: 0px) and (max-device-width: 1023px) { .homepage section.sezione-rails .collection__rails .rail__outer .rail .rail__container .rail__item .rail-element .img.img-2 { width: 70vw; } } .homepage section.sezione-rails .collection__rails .rail__outer .rail .rail__container .rail__item .rail-element .img.img-3 { top: -3.5vw; } .homepage section.sezione-rails .collection__rails .rail__outer .rail .rail__container .rail__item .rail-element .img.img-4 { top: 3.5vw; } .homepage section.sezione-rails .collection__rails .rail__outer .rail .rail__container .rail__item .rail-element .img.img-5 { top: -2vw; width: 20vw; } @media only screen and (min-device-width: 0px) and (max-device-width: 1023px) { .homepage section.sezione-rails .collection__rails .rail__outer .rail .rail__container .rail__item .rail-element .img.img-5 { width: 70vw; } } .homepage section.sezione-rails .collection__rails .rail__outer .rail .rail__container .rail__item .rail-element .img.img-6 { top: 3.5vw; } .homepage section.sezione-rails .collection__rails .rail__outer .rail .rail__container .rail__item .rail-element .img.img-7 { top: -3.5vw; } .homepage section.sezione-rails .collection__rails .rail__outer .rail .rail__container .rail__item .rail-element .img.img-8 { top: 2vw; width: 20vw; } @media only screen and (min-device-width: 0px) and (max-device-width: 1023px) { .homepage section.sezione-rails .collection__rails .rail__outer .rail .rail__container .rail__item .rail-element .img.img-8 { width: 70vw; } } .homepage section.sezione-rails .collection__rails .rail__outer .rail .rail__container .rail__item .rail-element .img.img-9 { top: -3.5vw; } .homepage section.sezione-rails .collection__rails .rail__outer .rail .rail__container .rail__item .rail-element .img.img-10 { top: 3.5vw; } @media only screen and (min-device-width: 0px) and (max-device-width: 1023px) { .homepage section.sezione-rails .collection__rails .rail__outer .rail .rail__container .rail__item .rail-element .img { width: 35vw; height: 35vw; } } .homepage section.sezione-rails .collection__rails .rail__outer .rail .rail__container .rail__item span { box-sizing: border-box; display: block; font-size: 6rem; padding-right: 4rem; line-height: normal; color: #191919; } @media only screen and (min-device-width: 0px) and (max-device-width: 1023px) { .homepage section.sezione-rails .collection__rails .rail__outer .rail .rail__container .rail__item span { font-size: 3rem; padding-right: 6rem; } } .homepage section.sezione-rails .collection__rails .rail__outer.under .rail .rail__container .rail__item span { } .homepage section.sezione-rails .collection__rails .rail__outer.over .rail .rail__container .rail__item span { font-weight: 500; } .homepage section.sezione-slider-bottom { width: 100vw; overflow: hidden; background-color: #F5F3F4; margin-top: -1px; } @media only screen and (min-width: 768px) and (max-width: 1024px) and (min-height: 600px) and (max-height: 1024px) and (orientation: landscape) { .homepage section.sezione-slider-bottom .description { width: 30vw; } } @media only screen and (min-width: 1024px) and (max-width: 1366px) and (min-height: 1024px) { .homepage section.sezione-slider-bottom .description { width: 30vw; } } @media only screen and (min-device-width: 1440px) and (max-device-width: 1440px) and (min-device-height: 900px) and (max-device-height: 900px) and (-webkit-min-device-pixel-ratio: 2) { .homepage section.sezione-slider-bottom .description { width: 24vw; } } .homepage section.sezione-slider-bottom .slider-mobile { position: relative; } .homepage section.sezione-slider-bottom .slider-mobile .slider-mobile__wrapper .slider-mobile__container { height: calc(100vh - 50vw); } .homepage section.sezione-slider-bottom .slider-mobile .box-mobile { position: relative; width: 75vw; margin-top: -15vw; z-index: 2; } .homepage section.sezione-slider-bottom .slider-mobile .box-mobile .box-mobile__wrapper { padding-top: 2.5rem; } .homepage section.sezione-slider-bottom .slider-mobile .box-mobile .titoletto { margin-left: 5vw; width: 65vw; } .homepage section.sezione-slider-bottom .slider-mobile .box-mobile .description { margin-left: 5vw; width: 65vw; } .homepage section.sezione-slider-bottom .slider-mobile .box-mobile .controls { margin-left: calc(5vw - 0.5rem); margin-top: 2.5rem; } .homepage section.sezione-slider-bottom .slider .slider__wrapper { position: relative; margin-left: 25vw; width: 75vw; height: calc(75vw * 9 / 16); } @media only screen and (min-width: 768px) and (max-width: 1024px) and (min-height: 600px) and (max-height: 1024px) and (orientation: landscape) { .homepage section.sezione-slider-bottom .slider .slider__wrapper { margin-left: 15vw; width: 85vw; height: calc(85vw * 9 / 16); } } @media only screen and (min-width: 1024px) and (max-width: 1366px) and (min-height: 1024px) { .homepage section.sezione-slider-bottom .slider .slider__wrapper { margin-left: 15vw; width: 85vw; height: calc(85vw * 9 / 16); } } .homepage section.sezione-slider-bottom .slider .slider__wrapper .slider__container { position: absolute; right: 0; width: 100%; height: 100%; } .homepage section.sezione-slider-bottom .slider .slider__box { position: absolute; width: 29vw; height: 30vw; left: 0; bottom: 0; z-index: 101; } @media only screen and (min-width: 768px) and (max-width: 1024px) and (min-height: 600px) and (max-height: 1024px) and (orientation: landscape) { .homepage section.sezione-slider-bottom .slider .slider__box { width: 35vw; height: 35vw; } } @media only screen and (min-width: 1024px) and (max-width: 1366px) and (min-height: 1024px) { .homepage section.sezione-slider-bottom .slider .slider__box { width: 35vw; height: 35vw; } } .homepage section.sezione-slider-bottom .slider .slide { width: 75vw; } @media only screen and (min-width: 768px) and (max-width: 1024px) and (min-height: 600px) and (max-height: 1024px) and (orientation: landscape) { .homepage section.sezione-slider-bottom .slider .slide { width: 85vw; } } @media only screen and (min-width: 1024px) and (max-width: 1366px) and (min-height: 1024px) { .homepage section.sezione-slider-bottom .slider .slide { width: 85vw; } } .homepage section.sezione-slider-bottom .slider .slide .slide__wrapper { position: absolute; left: 0; top: 0; width: 0%; height: 100%; overflow: hidden; } .homepage section.sezione-slider-bottom .slider .slide .slide__wrapper .slide__container { position: absolute; left: 0; top: 0; width: 75vw; height: 100%; } @media only screen and (min-width: 768px) and (max-width: 1024px) and (min-height: 600px) and (max-height: 1024px) and (orientation: landscape) { .homepage section.sezione-slider-bottom .slider .slide .slide__wrapper .slide__container { width: 85vw; } } @media only screen and (min-width: 1024px) and (max-width: 1366px) and (min-height: 1024px) { .homepage section.sezione-slider-bottom .slider .slide .slide__wrapper .slide__container { width: 85vw; } } .homepage section.sezione-piantina .image { position: relative; } .homepage section.sezione-social { padding-top: 15rem; background-color: #191919; } @media only screen and (min-device-width: 0px) and (max-device-width: 1023px) { .homepage section.sezione-social { padding-top: 5rem; padding-bottom: 5rem; overflow: hidden; } } @media only screen and (min-width: 768px) and (max-width: 1024px) and (min-height: 600px) and (max-height: 1024px) and (orientation: landscape) { .homepage section.sezione-social { padding-top: 7.5rem; padding-bottom: 2.5rem; } } @media only screen and (min-width: 1024px) and (max-width: 1366px) and (min-height: 1024px) { .homepage section.sezione-social { padding-top: 7.5rem; padding-bottom: 2.5rem; } } @media only screen and (min-device-width: 1440px) and (max-device-width: 1440px) and (min-device-height: 900px) and (max-device-height: 900px) and (-webkit-min-device-pixel-ratio: 2) { .homepage section.sezione-social { padding-top: 10rem; padding-bottom: 5rem; } } .homepage section.sezione-social .row h3 { line-height: 20rem; color: #F5F3F4; } @media only screen and (min-device-width: 0px) and (max-device-width: 1023px) { .homepage section.sezione-social .row h3 { font-size: 3.6rem; line-height: 4rem; } } @media only screen and (min-width: 768px) and (max-width: 1024px) and (min-height: 600px) and (max-height: 1024px) and (orientation: portrait) { .homepage section.sezione-social .row h3 { font-size: 8rem; line-height: 8.4rem; } } @media only screen and (min-width: 768px) and (max-width: 1024px) and (min-height: 600px) and (max-height: 1024px) and (orientation: landscape) { .homepage section.sezione-social .row h3 { font-size: 11rem; line-height: 7rem; } } @media only screen and (min-width: 1024px) and (max-width: 1366px) and (min-height: 1024px) and (orientation: portrait) { .homepage section.sezione-social .row h3 { font-size: 11rem; line-height: 7rem; } } @media only screen and (min-width: 1024px) and (max-width: 1366px) and (min-height: 1024px) and (orientation: landscape) { .homepage section.sezione-social .row h3 { font-size: 14rem; line-height: 9rem; } } @media only screen and (min-device-width: 1281px) and (max-width: 1920px) and (max-device-height: 1080px) { .homepage section.sezione-social .row h3 { line-height: 15rem; } } @media only screen and (min-device-width: 1440px) and (max-device-width: 1440px) and (min-device-height: 900px) and (max-device-height: 900px) and (-webkit-min-device-pixel-ratio: 2) { .homepage section.sezione-social .row h3 { line-height: 11rem; } } @media only screen and (min-width: 1025px) and (max-width: 1280px) and (max-device-height: 720px) { .homepage section.sezione-social .row h3 { line-height: 16rem; } } .homepage section.sezione-social .row.row--follow { position: relative; margin-bottom: 2.5rem; display: flex; justify-content: space-between; align-items: flex-end; } @media only screen and (min-device-width: 0px) and (max-device-width: 1023px) { .homepage section.sezione-social .row.row--follow { align-items: center; margin-bottom: 0; margin-left: 5vw; width: 95vw; } } .homepage section.sezione-social .row.row--follow .cta { margin-right: 7vw; } @media only screen and (min-device-width: 0px) and (max-device-width: 1023px) { .homepage section.sezione-social .row.row--follow .follow { margin-top: -1rem; } } .homepage section.sezione-social .row.row--follow .links { position: relative; margin-right: 5vw; bottom: 1.25rem; } @media only screen and (min-device-width: 0px) and (max-device-width: 1023px) { .homepage section.sezione-social .row.row--follow .links { bottom: 0; } } @media only screen and (min-width: 768px) and (max-width: 1024px) and (min-height: 600px) and (max-height: 1024px) { .homepage section.sezione-social .row.row--follow .links { bottom: 0; } } .homepage section.sezione-social .row.row--follow .links .link { position: relative; } @media only screen and (min-device-width: 0px) and (max-device-width: 1023px) { .homepage section.sezione-social .row.row--follow .links .link { margin-bottom: 0.5rem; } } .homepage section.sezione-social .row.row--follow .links .link.link.ig { margin-bottom: 1.25rem; } @media only screen and (min-device-width: 0px) and (max-device-width: 1023px) { .homepage section.sezione-social .row.row--follow .links .link.link.ig { margin-bottom: 0.5rem; } } .homepage section.sezione-social .row.row--follow .links .link:hover .link__bg { opacity: 1; } @media only screen and (min-device-width: 0px) and (max-device-width: 1023px) { .homepage section.sezione-social .row.row--follow .links .link:hover .link__bg { opacity: 0; } } @media only screen and (min-width: 768px) and (max-width: 1024px) and (min-height: 600px) and (max-height: 1024px) { .homepage section.sezione-social .row.row--follow .links .link:hover .link__bg { opacity: 0; } } @media only screen and (min-width: 1024px) and (max-width: 1366px) and (min-height: 1024px) { .homepage section.sezione-social .row.row--follow .links .link:hover .link__bg { opacity: 0; } } .homepage section.sezione-social .row.row--follow .links .link:hover .link__wrapper a { color: #191919; } @media only screen and (min-device-width: 0px) and (max-device-width: 1023px) { .homepage section.sezione-social .row.row--follow .links .link:hover .link__wrapper a { color: #F5F3F4; } } @media only screen and (min-width: 768px) and (max-width: 1024px) and (min-height: 600px) and (max-height: 1024px) { .homepage section.sezione-social .row.row--follow .links .link:hover .link__wrapper a { color: #F5F3F4; } } @media only screen and (min-width: 1024px) and (max-width: 1366px) and (min-height: 1024px) { .homepage section.sezione-social .row.row--follow .links .link:hover .link__wrapper a { color: #F5F3F4; } } .homepage section.sezione-social .row.row--follow .links .link .link__bg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: #F5F3F4; border-radius: 28px; opacity: 0; -webkit-transition: opacity 0.2s linear 0s; -moz-transition: opacity 0.2s linear 0s; -o-transition: opacity 0.2s linear 0s; transition: opacity 0.2s linear 0s; } .homepage section.sezione-social .row.row--follow .links .link .link__wrapper { position: relative; display: inline-block; border: 1px solid white; border-radius: 78px; width: 16rem; height: 3rem; display: flex; align-items: center; justify-content: center; } @media only screen and (min-device-width: 0px) and (max-device-width: 1023px) { .homepage section.sezione-social .row.row--follow .links .link .link__wrapper { width: 10vw; height: auto; border: 1px solid white; border-radius: 12rem; } .homepage section.sezione-social .row.row--follow .links .link .link__wrapper a { font-size: 1rem; } } @media only screen and (min-width: 768px) and (max-width: 1024px) and (min-height: 600px) and (max-height: 1024px) and (orientation: portrait) { .homepage section.sezione-social .row.row--follow .links .link .link__wrapper { height: 2rem; display: flex; align-items: center; justify-content: center; } .homepage section.sezione-social .row.row--follow .links .link .link__wrapper a { font-size: 1rem; } } @media only screen and (min-width: 768px) and (max-width: 1024px) and (min-height: 600px) and (max-height: 1024px) and (orientation: landscape) { .homepage section.sezione-social .row.row--follow .links .link .link__wrapper { width: 8rem; } } @media only screen and (min-width: 1024px) and (max-width: 1366px) and (min-height: 1024px) and (orientation: portrait) { .homepage section.sezione-social .row.row--follow .links .link .link__wrapper { width: 8rem; } } .homepage section.sezione-social .row.row--follow .links .link .link__wrapper a { color: #F5F3F4; font-size: 2rem; -webkit-transition: color 0.2s linear 0s; -moz-transition: color 0.2s linear 0s; -o-transition: color 0.2s linear 0s; transition: color 0.2s linear 0s; } @media only screen and (min-device-width: 0px) and (max-device-width: 1023px) { .homepage section.sezione-social .row.row--follow .links .link .link__wrapper a { font-size: 1rem; } } @media only screen and (min-width: 768px) and (max-width: 1024px) and (min-height: 600px) and (max-height: 1024px) and (orientation: portrait) { .homepage section.sezione-social .row.row--follow .links .link .link__wrapper a { font-size: 1rem; } } .homepage section.sezione-social .row.row--follow .links .link .underscore { position: absolute; left: 0; top: 100%; height: 1px; width: 100%; } .homepage section.sezione-social .row.row--follow .links .link .underscore span { -webkit-transition: all 0.3s ease-in-out 0s; -moz-transition: all 0.3s ease-in-out 0s; -o-transition: all 0.3s ease-in-out 0s; transition: all 0.3s ease-in-out 0s; position: absolute; left: 0; top: 0; width: 0%; height: 100%; background-color: white; } .homepage section.sezione-social .row.row--icona-ig { position: relative; width: 2.6rem; margin-left: 2.5rem; margin-bottom: 2.5rem; } @media only screen and (min-device-width: 0px) and (max-device-width: 1023px) { .homepage section.sezione-social .row.row--icona-ig { width: 24px; margin-left: 6vw; margin-bottom: 1.25rem; } } .homepage section.sezione-social .row.row--icona-ig .svg-ig { fill: #191919; } .homepage section.sezione-social .row.row--us { display: flex; justify-content: space-between; align-items: flex-start; } @media only screen and (min-device-width: 0px) and (max-device-width: 1023px) { .homepage section.sezione-social .row.row--us { margin-left: 5vw; width: 90vw; } } @media only screen and (min-device-width: 0px) and (max-device-width: 1023px) { .homepage section.sezione-social .row.row--us { display: block; } } .homepage section.sezione-social .row.row--us .us { flex-basis: 27vw; } @media only screen and (min-device-width: 0px) and (max-device-width: 1023px) { .homepage section.sezione-social .row.row--us .us { margin-top: -1rem; } } .homepage section.sezione-social .row.row--us .feeds { position: relative; display: flex; justify-content: space-between; margin-left: 7vw; margin-top: 2.5rem; } @media only screen and (min-device-width: 0px) and (max-device-width: 1023px) { .homepage section.sezione-social .row.row--us .feeds { margin-left: 0; } } .homepage section.sezione-social .row.row--us .feeds .feed { flex-basis: 27vw; } @media only screen and (min-device-width: 0px) and (max-device-width: 1023px) { .homepage section.sezione-social .row.row--us .feeds .feed { flex-basis: 42.5vw; } } .homepage section.sezione-social .row.row--us .feeds .feed.feed--right { padding-top: 13.5vw; margin-right: 7vw; } @media only screen and (min-device-width: 0px) and (max-device-width: 1023px) { .homepage section.sezione-social .row.row--us .feeds .feed.feed--right { margin-right: 0; padding-top: 0; margin-top: -21.25vw; } } .homepage section.sezione-social .row.row--us .feeds .feed .image { position: relative; margin-bottom: 5vw; overflow: hidden; } .homepage section.sezione-social .row.row--cta-mobile { position: relative; width: 90vw; margin: 1.25rem auto 0 auto; } .homepage section.sezione-social .row.row--cta-mobile .cta-rect { position: relative; width: 100%; } @-webkit-keyframes rotate { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes rotate { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } .page-template-harcstore { background-color: #ffffff; } .pagina-harcstore { position: relative; } .pagina-harcstore .js-stagger-init { position: relative; opacity: 0; -webkit-transform: translateY(80px); -moz-transform: translateY(80px); -ms-transform: translateY(80px); transform: translateY(80px); -o-transform: translateY(80px); } .pagina-harcstore li { font-size: 1.3rem; line-height: 1.6rem; margin-bottom: 0.25rem; } .pagina-harcstore li:last-child { margin-bottom: 0; } @media only screen and (min-device-width: 0px) and (max-device-width: 1023px) { .pagina-harcstore li { font-size: 1.2rem; line-height: 1.5rem; } } .pagina-harcstore p { font-size: 1.3rem; line-height: 1.6rem; color: #000; } @media only screen and (min-device-width: 0px) and (max-device-width: 1023px) { .pagina-harcstore p { font-size: 1.2rem; line-height: 1.5rem; } } .pagina-harcstore a { font-size: 1.3rem; line-height: 1.6rem; color: #000; font-weight: 700; } .pagina-harcstore a.phone { font-weight: normal; } @media only screen and (min-device-width: 0px) and (max-device-width: 1023px) { .pagina-harcstore a { font-size: 1.2rem; line-height: 1.5rem; } } .pagina-harcstore .background-top { position: absolute; left: 0; top: 0; width: 100%; height: 120vh; background-color: #8e9592; } @media only screen and (min-width: 768px) and (max-width: 1024px) and (min-height: 600px) and (max-height: 1024px) and (orientation: landscape) { .pagina-harcstore .background-top { height: 130vh; } } @media only screen and (min-width: 1024px) and (max-width: 1366px) and (min-height: 1024px) { .pagina-harcstore .background-top { height: 90vh; } } .pagina-harcstore section { position: relative; } .pagina-harcstore .titoletto { margin-bottom: 2.5rem; } @media only screen and (min-device-width: 0px) and (max-device-width: 1023px) { .pagina-harcstore .titoletto { margin-bottom: 1.25rem; } } @media only screen and (min-device-width: 1366px) and (max-device-width: 1366px) and (max-device-height: 768px) { .pagina-harcstore .titoletto { margin-bottom: 2rem; } } .pagina-harcstore .titoletto p { font-weight: 700; } .pagina-harcstore .titoletto h2 { font-size: 2.6rem; } .pagina-harcstore .titoletto h3 { font-size: 4rem; } @media only screen and (min-device-width: 0px) and (max-device-width: 1023px) { .pagina-harcstore .titoletto h3 { font-size: 1.4rem; } } @media only screen and (min-width: 768px) and (max-width: 1024px) and (min-height: 600px) and (max-height: 1024px) and (orientation: landscape) { .pagina-harcstore .titoletto h3 { font-size: 2.6rem; } } @media only screen and (min-width: 1024px) and (max-width: 1366px) and (min-height: 1024px) { .pagina-harcstore .titoletto h3 { font-size: 3rem; } } @media only screen and (min-device-width: 1366px) and (max-device-width: 1366px) and (max-device-height: 768px) { .pagina-harcstore .titoletto h3 { font-size: 2.8rem; } } @media only screen and (min-width: 1025px) and (max-width: 1280px) and (max-device-height: 720px) { .pagina-harcstore .titoletto h3 { font-size: 2.8rem; } } @media only screen and (min-device-width: 1680px) and (max-device-width: 1680px) and (min-device-height: 1050px) and (max-device-height: 1050px) and (-webkit-min-device-pixel-ratio: 2) { .pagina-harcstore .titoletto h3 { font-size: 2.8rem; } } @media only screen and (min-device-width: 1440px) and (max-device-width: 1440px) and (min-device-height: 900px) and (max-device-height: 900px) and (-webkit-min-device-pixel-ratio: 2) { .pagina-harcstore .titoletto h3 { font-size: 2.8rem; } } .pagina-harcstore .sezione-top { padding-top: 25vh; padding-bottom: 10rem; margin-left: 25vw; width: 40vw; } @media only screen and (min-device-width: 0px) and (max-device-width: 1023px) { .pagina-harcstore .sezione-top { margin-left: 5vw; padding-top: 20vh; padding-bottom: 5rem; width: 90vw; } } @media only screen and (min-width: 768px) and (max-width: 1024px) and (min-height: 600px) and (max-height: 1024px) and (orientation: landscape) { .pagina-harcstore .sezione-top { margin-left: 2.5vw; width: 95vw; padding-bottom: 5rem; } } @media only screen and (min-width: 1024px) and (max-width: 1366px) and (min-height: 1024px) { .pagina-harcstore .sezione-top { margin-left: 5vw; width: 90vw; padding-bottom: 5rem; padding-top: 20vh; } } @media only screen and (min-device-width: 1281px) and (max-width: 1920px) and (max-device-height: 1080px) { .pagina-harcstore .sezione-top { width: 55vw; } } @media only screen and (min-device-width: 1366px) and (max-device-width: 1366px) and (max-device-height: 768px) { .pagina-harcstore .sezione-top { padding-top: 30vh; margin-left: 20vw; padding-bottom: 7.5rem; } } @media only screen and (min-width: 1025px) and (max-width: 1280px) and (max-device-height: 720px) { .pagina-harcstore .sezione-top { margin-left: 20vw; } } @media only screen and (min-device-width: 1680px) and (max-device-width: 1680px) and (min-device-height: 1050px) and (max-device-height: 1050px) and (-webkit-min-device-pixel-ratio: 2) { .pagina-harcstore .sezione-top { margin-left: 20vw; } } @media only screen and (min-device-width: 1440px) and (max-device-width: 1440px) and (min-device-height: 900px) and (max-device-height: 900px) and (-webkit-min-device-pixel-ratio: 2) { .pagina-harcstore .sezione-top { margin-left: 20vw; } } @media only screen and (min-device-width: 0px) and (max-device-width: 1023px) { .pagina-harcstore .sezione-top .cta { width: 100%; } } @media only screen and (min-device-width: 0px) and (max-device-width: 1023px) { .pagina-harcstore .sezione-top .cta .cta-rect { width: 100%; } } .pagina-harcstore .sezione-top p { color: #ffffff; } .pagina-harcstore .sezione-top h2 { color: #ffffff; } .pagina-harcstore .sezione-top h3 { color: #ffffff; } .pagina-harcstore .sezione-top .countdown { position: relative; } .pagina-harcstore .sezione-top .countdown .countdown__wrapper { position: relative; display: flex; } .pagina-harcstore .sezione-top .countdown .countdown__wrapper .countdown__item { position: relative; display: flex; align-items: flex-end; margin-right: 2.5rem; } @media only screen and (min-device-width: 0px) and (max-device-width: 1023px) { .pagina-harcstore .sezione-top .countdown .countdown__wrapper .countdown__item { margin-right: 1.25rem; flex-direction: column; align-items: center; } } @media only screen and (min-width: 768px) and (max-width: 1024px) and (min-height: 600px) and (max-height: 1024px) { .pagina-harcstore .sezione-top .countdown .countdown__wrapper .countdown__item { flex-direction: row; align-items: flex-end; margin-right: 2.5rem; } } .pagina-harcstore .sezione-top .countdown .countdown__wrapper .countdown__item .number { position: relative; } .pagina-harcstore .sezione-top .countdown .countdown__wrapper .countdown__item .number span { font-size: 6rem; line-height: 6rem; font-weight: 700; } @media only screen and (min-device-width: 0px) and (max-device-width: 1023px) { .pagina-harcstore .sezione-top .countdown .countdown__wrapper .countdown__item .number span { font-size: 2.4rem; line-height: 2.4rem; } } @media only screen and (min-width: 768px) and (max-width: 1024px) and (min-height: 600px) and (max-height: 1024px) { .pagina-harcstore .sezione-top .countdown .countdown__wrapper .countdown__item .number span { font-size: 4.2rem; line-height: 4.2rem; } } @media only screen and (min-device-width: 1366px) and (max-device-width: 1366px) and (max-device-height: 768px) { .pagina-harcstore .sezione-top .countdown .countdown__wrapper .countdown__item .number span { font-size: 5rem; line-height: 5rem; } } .pagina-harcstore .sezione-top .countdown .countdown__wrapper .countdown__item .number p { font-size: 6rem; line-height: 6rem; font-weight: 700; } @media only screen and (min-device-width: 0px) and (max-device-width: 1023px) { .pagina-harcstore .sezione-top .countdown .countdown__wrapper .countdown__item .number p { font-size: 2.4rem; line-height: 2.4rem; } } @media only screen and (min-width: 768px) and (max-width: 1024px) and (min-height: 600px) and (max-height: 1024px) { .pagina-harcstore .sezione-top .countdown .countdown__wrapper .countdown__item .number p { font-size: 4.2rem; line-height: 4.2rem; } } @media only screen and (min-device-width: 1366px) and (max-device-width: 1366px) and (max-device-height: 768px) { .pagina-harcstore .sezione-top .countdown .countdown__wrapper .countdown__item .number p { font-size: 5rem; line-height: 5rem; } } .pagina-harcstore .sezione-top .countdown .countdown__wrapper .countdown__item .number .hidden-decine { position: relative; visibility: hidden; } .pagina-harcstore .sezione-top .countdown .countdown__wrapper .countdown__item .number .hidden { position: relative; visibility: hidden; } .pagina-harcstore .sezione-top .countdown .countdown__wrapper .countdown__item .number .js-el { position: absolute; right: 0; top: 0; } .pagina-harcstore .sezione-top .countdown .countdown__wrapper .countdown__item .label { margin-bottom: 0.625rem; } @media only screen and (min-device-width: 0px) and (max-device-width: 1023px) { .pagina-harcstore .sezione-top .countdown .countdown__wrapper .countdown__item .label { margin-bottom: 0; margin-left: 0rem; margin-top: 0.25rem; } } @media only screen and (min-width: 768px) and (max-width: 1024px) and (min-height: 600px) and (max-height: 1024px) { .pagina-harcstore .sezione-top .countdown .countdown__wrapper .countdown__item .label { margin-bottom: 0; margin-left: 0.5rem; margin-top: 0.5rem; } } .pagina-harcstore .sezione-top .countdown .countdown__wrapper .countdown__item .label p { font-weight: 500; } @media only screen and (min-device-width: 0px) and (max-device-width: 1023px) { .pagina-harcstore .sezione-top .countdown .countdown__wrapper .countdown__item .label p { font-size: 0.6rem; margin-left: 0rem; line-height: 0.8rem; } } @media only screen and (min-width: 768px) and (max-width: 1024px) and (min-height: 600px) and (max-height: 1024px) { .pagina-harcstore .sezione-top .countdown .countdown__wrapper .countdown__item .label p { font-size: 1rem; line-height: 1.4rem; } } .pagina-harcstore .sezione-top .description { position: relative; margin-top: 3.75rem; margin-bottom: 2.5rem; width: 40vw; } @media only screen and (min-device-width: 0px) and (max-device-width: 1023px) { .pagina-harcstore .sezione-top .description { margin-top: 2.5rem; margin-bottom: 2.5rem; width: 90vw; } } @media only screen and (min-width: 768px) and (max-width: 1024px) and (min-height: 600px) and (max-height: 1024px) and (orientation: landscape) { .pagina-harcstore .sezione-top .description { width: 70vw; } } @media only screen and (min-width: 1024px) and (max-width: 1366px) and (min-height: 1024px) { .pagina-harcstore .sezione-top .description { width: 60vw; } } .pagina-harcstore .sezione-top .description .welcome { font-size: 2.6rem; line-height: 3rem; margin-bottom: 1.25rem; } @media only screen and (min-device-width: 0px) and (max-device-width: 1023px) { .pagina-harcstore .sezione-top .description .welcome { font-size: 1.8rem; line-height: 2rem; } } @media only screen and (min-width: 1024px) and (max-width: 1366px) and (min-height: 1024px) and (orientation: landscape) { .pagina-harcstore .sezione-2 { padding-bottom: 7.5rem; } } .pagina-harcstore .sezione-2 .sezione__wrapper { position: relative; width: 95vw; margin: 0 auto; } @media only screen and (min-device-width: 0px) and (max-device-width: 1023px) { .pagina-harcstore .sezione-2 .sezione__wrapper { display: flex; flex-direction: column; width: 100vw; } } @media only screen and (min-width: 1024px) and (max-width: 1366px) and (min-height: 1024px) { .pagina-harcstore .sezione-2 .sezione__wrapper { width: 90vw; } } .pagina-harcstore .sezione-2 .image--big { position: relative; width: 62.5vw; } @media only screen and (min-device-width: 0px) and (max-device-width: 1023px) { .pagina-harcstore .sezione-2 .image--big { order: 2; width: 90vw; margin: 5vw auto 0 auto; } } @media only screen and (min-width: 1024px) and (max-width: 1366px) and (min-height: 1024px) { .pagina-harcstore .sezione-2 .image--big { width: 90vw; } } .pagina-harcstore .sezione-2 .text { position: relative; padding-top: 15rem; padding-bottom: 20rem; margin-left: 22.5vw; width: 40vw; } @media only screen and (min-device-width: 0px) and (max-device-width: 1023px) { .pagina-harcstore .sezione-2 .text { order: 3; padding-top: 5rem; padding-bottom: 5rem; margin: 0 auto; width: 90vw; } } @media only screen and (min-width: 768px) and (max-width: 1024px) and (min-height: 600px) and (max-height: 1024px) and (orientation: landscape) { .pagina-harcstore .sezione-2 .text { padding-top: 7.5rem; padding-bottom: 10rem; margin-left: 0; width: 60vw; } } @media only screen and (min-width: 1024px) and (max-width: 1366px) and (min-height: 1024px) { .pagina-harcstore .sezione-2 .text { padding-top: 7.5rem; padding-bottom: 10rem; margin-left: 0; width: 55vw; } } @media only screen and (min-width: 1024px) and (max-width: 1366px) and (min-height: 1024px) and (orientation: landscape) { .pagina-harcstore .sezione-2 .text { position: absolute; margin-top: 7.5rem; } } @media only screen and (min-device-width: 1366px) and (max-device-width: 1366px) and (max-device-height: 768px) { .pagina-harcstore .sezione-2 .text { margin-left: 17.5vw; padding-top: 7.5rem; } } @media only screen and (min-width: 1025px) and (max-width: 1280px) and (max-device-height: 720px) { .pagina-harcstore .sezione-2 .text { margin-left: 17.5vw; } } @media only screen and (min-device-width: 1680px) and (max-device-width: 1680px) and (min-device-height: 1050px) and (max-device-height: 1050px) and (-webkit-min-device-pixel-ratio: 2) { .pagina-harcstore .sezione-2 .text { margin-left: 17.5vw; } } @media only screen and (min-device-width: 1440px) and (max-device-width: 1440px) and (min-device-height: 900px) and (max-device-height: 900px) and (-webkit-min-device-pixel-ratio: 2) { .pagina-harcstore .sezione-2 .text { margin-left: 17.5vw; padding-top: 7.5rem; } } .pagina-harcstore .sezione-2 .text .info .info__item { position: relative; margin-bottom: 2.5rem; } @media only screen and (min-device-width: 0px) and (max-device-width: 1023px) { .pagina-harcstore .sezione-2 .text .info .info__item { margin-bottom: 1.25rem; } } @media only screen and (min-device-width: 1366px) and (max-device-width: 1366px) and (max-device-height: 768px) { .pagina-harcstore .sezione-2 .text .info .info__item { margin-bottom: 2rem; } } .pagina-harcstore .sezione-2 .text .info .info__item p { color: #000; } @media only screen and (min-device-width: 0px) and (max-device-width: 1023px) { .pagina-harcstore .sezione-2 .text .info .info__item p { font-size: 1.2rem; line-height: 1.4rem; } } .pagina-harcstore .sezione-2 .text .info .info__item a { color: #000; font-size: 1.6rem; line-height: 2rem; } .pagina-harcstore .sezione-2 .text .info .info__item.info__item--phone { margin-bottom: 0; } .pagina-harcstore .sezione-2 .text .info .info__item .top { display: flex; align-items: flex-end; margin-bottom: 0.5rem; } .pagina-harcstore .sezione-2 .text .info .info__item .top p { font-size: 1.2rem; line-height: 1.4rem; } @media only screen and (min-device-width: 0px) and (max-device-width: 1023px) { .pagina-harcstore .sezione-2 .text .info .info__item .top p { font-size: 1rem; line-height: 1rem; } } .pagina-harcstore .sezione-2 .text .info .info__item .top .icona { width: 1.6rem; margin-right: 0.5rem; } @media only screen and (min-device-width: 0px) and (max-device-width: 1023px) { .pagina-harcstore .sezione-2 .text .info .info__item .top .icona { margin-right: 0.25rem; width: 1.4rem; } } .pagina-harcstore .sezione-2 .text .info .info__item .bottom p { font-size: 2.6rem; line-height: 2.6rem; } @media only screen and (min-device-width: 0px) and (max-device-width: 1023px) { .pagina-harcstore .sezione-2 .text .info .info__item .bottom p { font-size: 1.4rem; line-height: 1.4rem; } } @media only screen and (min-width: 768px) and (max-width: 1024px) and (min-height: 600px) and (max-height: 1024px) and (orientation: landscape) { .pagina-harcstore .sezione-2 .text .info .info__item .bottom p { font-size: 1.8rem; line-height: 1.8rem; } } @media only screen and (min-device-width: 1366px) and (max-device-width: 1366px) and (max-device-height: 768px) { .pagina-harcstore .sezione-2 .text .info .info__item .bottom p { font-size: 2.2rem; line-height: 2.2rem; } } @media only screen and (min-device-width: 1680px) and (max-device-width: 1680px) and (min-device-height: 1050px) and (max-device-height: 1050px) and (-webkit-min-device-pixel-ratio: 2) { .pagina-harcstore .sezione-2 .text .info .info__item .bottom p { font-size: 2.2rem; line-height: 2.2rem; } } @media only screen and (min-device-width: 1440px) and (max-device-width: 1440px) and (min-device-height: 900px) and (max-device-height: 900px) and (-webkit-min-device-pixel-ratio: 2) { .pagina-harcstore .sezione-2 .text .info .info__item .bottom p { font-size: 2.2rem; line-height: 2.2rem; } } .pagina-harcstore .sezione-2 .image--small { position: absolute; bottom: 20rem; right: 0vw; width: 30vw; } @media only screen and (min-device-width: 0px) and (max-device-width: 1023px) { .pagina-harcstore .sezione-2 .image--small { position: relative; bottom: 0; width: 90vw; order: 1; margin: 0 auto; } } @media only screen and (min-width: 1024px) and (max-width: 1366px) and (min-height: 1024px) { .pagina-harcstore .sezione-2 .image--small { bottom: 10rem; } } @media only screen and (min-width: 1024px) and (max-width: 1366px) and (min-height: 1024px) and (orientation: landscape) { .pagina-harcstore .sezione-2 .image--small { position: relative; margin-left: 50vw; width: 40vw; margin-top: 7.5rem; bottom: 0; } } .pagina-harcstore .sezione-promo.sezione-promo--card { background-color: #F5F3F4; } .pagina-harcstore .sezione-promo.sezione-promo--mensile { background-color: #31594b; } .pagina-harcstore .sezione-promo.sezione-promo--mensile p { color: white; } .pagina-harcstore .sezione-promo.sezione-promo--mensile h3 { color: white; } .pagina-harcstore .sezione-promo.sezione-promo--tasso { background-color: #A8A59E; } .pagina-harcstore .sezione-promo .text { padding: 15rem 32.5vw 15rem 25vw; } @media only screen and (min-device-width: 0px) and (max-device-width: 1023px) { .pagina-harcstore .sezione-promo .text { padding: 5rem 5vw; } } @media only screen and (min-width: 768px) and (max-width: 1024px) and (min-height: 600px) and (max-height: 1024px) and (orientation: landscape) { .pagina-harcstore .sezione-promo .text { padding: 7.5rem 15vw; } } @media only screen and (min-width: 1024px) and (max-width: 1366px) and (min-height: 1024px) { .pagina-harcstore .sezione-promo .text { padding: 7.5rem 5vw; } } @media only screen and (min-width: 1024px) and (max-width: 1366px) and (min-height: 1024px) and (orientation: landscape) { .pagina-harcstore .sezione-promo .text { padding: 7.5rem 15vw; } } @media only screen and (min-device-width: 1366px) and (max-device-width: 1366px) and (max-device-height: 768px) { .pagina-harcstore .sezione-promo .text { padding: 15rem 20vw; } } @media only screen and (min-width: 1025px) and (max-width: 1280px) and (max-device-height: 720px) { .pagina-harcstore .sezione-promo .text { padding: 15rem 20vw; } } @media only screen and (min-device-width: 1680px) and (max-device-width: 1680px) and (min-device-height: 1050px) and (max-device-height: 1050px) and (-webkit-min-device-pixel-ratio: 2) { .pagina-harcstore .sezione-promo .text { padding: 15rem 20vw; } } @media only screen and (min-device-width: 1440px) and (max-device-width: 1440px) and (min-device-height: 900px) and (max-device-height: 900px) and (-webkit-min-device-pixel-ratio: 2) { .pagina-harcstore .sezione-promo .text { padding: 15rem 20vw; } } .pagina-harcstore .sezione-promo .text ul { position: relative; list-style-type: disc; margin: 1.25rem 2.5rem; } .pagina-harcstore .sezione-promo .text .postille { margin-top: 2.5rem; } .pagina-harcstore .sezione-promo .text .postille p { font-size: 1rem; line-height: 1.2rem; margin-bottom: 0.5rem; } .pagina-progetti { position: relative; /* background-color: #191919;*/ } .pagina-progetti .testo-intro { position: relative; width: 50vw; margin: 0 auto; padding: 10rem 0; } @media only screen and (min-device-width: 0px) and (max-device-width: 1023px) { .pagina-progetti .testo-intro { width: 75vw; padding: 5rem 0; } } @media only screen and (min-width: 768px) and (max-width: 1024px) and (min-height: 600px) and (max-height: 1024px) and (orientation: landscape) { .pagina-progetti .testo-intro { padding: 7.5rem 0; } } .pagina-progetti .sezione-listing .block { position: relative; width: 86vw; margin: 0 auto; padding-bottom: 25rem; } @media only screen and (min-device-width: 0px) and (max-device-width: 1023px) { .pagina-progetti .sezione-listing .block { width: 95vw; padding-bottom: 5rem; } } @media only screen and (min-width: 768px) and (max-width: 1024px) and (min-height: 600px) and (max-height: 1024px) and (orientation: landscape) { .pagina-progetti .sezione-listing .block { width: 92vw; } } .pagina-progetti .sezione-listing .block:last-child { padding-bottom: 2.5rem; } .pagina-progetti .sezione-listing .block .row { position: relative; } .pagina-progetti .sezione-listing .block .row .project .project-title { padding-bottom: 0.25rem; } .pagina-progetti .sezione-listing .block .row .project .image .image__wrapper { position: relative; } .pagina-progetti .sezione-listing .block .row.row--1 .row__wrapper { display: flex; justify-content: space-between; } @media only screen and (min-device-width: 0px) and (max-device-width: 1023px) { .pagina-progetti .sezione-listing .block .row.row--1 .row__wrapper { flex-direction: column; } } @media only screen and (min-width: 768px) and (max-width: 1024px) and (min-height: 600px) and (max-height: 1024px) and (orientation: portrait) { .pagina-progetti .sezione-listing .block .row.row--1 .row__wrapper { flex-direction: row; } } .pagina-progetti .sezione-listing .block .row.row--1 .row__wrapper .project--1 { margin-left: 3.5vw; width: 31vw; flex-basis: 31vw; } @media only screen and (min-device-width: 0px) and (max-device-width: 1023px) { .pagina-progetti .sezione-listing .block .row.row--1 .row__wrapper .project--1 { width: 100%; flex-basis: 100%; margin-left: 0; } } @media only screen and (min-width: 768px) and (max-width: 1024px) and (min-height: 600px) and (max-height: 1024px) and (orientation: portrait) { .pagina-progetti .sezione-listing .block .row.row--1 .row__wrapper .project--1 { width: calc(50% - 1.25vw); margin-left: 0; flex-basis: calc(50% - 1.25vw); } } @media only screen and (min-width: 768px) and (max-width: 1024px) and (min-height: 600px) and (max-height: 1024px) and (orientation: landscape) { .pagina-progetti .sezione-listing .block .row.row--1 .row__wrapper .project--1 { flex-basis: 35vw; width: 35vw; } } .pagina-progetti .sezione-listing .block .row.row--1 .row__wrapper .project--1 .image__wrapper { width: 31vw; height: calc(31vw - 150px); overflow: hidden; } @media only screen and (min-device-width: 0px) and (max-device-width: 1023px) { .pagina-progetti .sezione-listing .block .row.row--1 .row__wrapper .project--1 .image__wrapper { width: 100%; height: auto; } } @media only screen and (min-width: 768px) and (max-width: 1024px) and (min-height: 600px) and (max-height: 1024px) and (orientation: landscape) { .pagina-progetti .sezione-listing .block .row.row--1 .row__wrapper .project--1 .image__wrapper { width: 35vw; height: 35vw; } } .pagina-progetti .sezione-listing .block .row.row--1 .row__wrapper .project--2 { margin-top: 15rem; width: 40vw; flex-basis: 40vw; } @media only screen and (min-device-width: 0px) and (max-device-width: 1023px) { .pagina-progetti .sezione-listing .block .row.row--1 .row__wrapper .project--2 { width: 100%; flex-basis: 100%; margin-top: 2.5rem; } } @media only screen and (min-width: 768px) and (max-width: 1024px) and (min-height: 600px) and (max-height: 1024px) and (orientation: portrait) { .pagina-progetti .sezione-listing .block .row.row--1 .row__wrapper .project--2 { width: calc(50% - 1.25vw); margin-left: 0; flex-basis: calc(50% - 1.25vw); margin-top: 0; } } .pagina-progetti .sezione-listing .block .row.row--1 .row__wrapper .project--2 .image__wrapper { width: 40vw; height: calc((40vw * 4 / 3) - 150px); overflow: hidden; } @media only screen and (min-device-width: 0px) and (max-device-width: 1023px) { .pagina-progetti .sezione-listing .block .row.row--1 .row__wrapper .project--2 .image__wrapper { width: 100%; height: auto; } } @media only screen and (min-width: 768px) and (max-width: 1024px) and (min-height: 600px) and (max-height: 1024px) and (orientation: landscape) { .pagina-progetti .sezione-listing .block .row.row--1 .row__wrapper .project--2 .image__wrapper { height: calc(40vw * 4 / 3); } } .pagina-progetti .sezione-listing .block .row.row--2 .row__wrapper { display: flex; justify-content: space-between; align-items: flex-end; } @media only screen and (min-device-width: 0px) and (max-device-width: 1023px) { .pagina-progetti .sezione-listing .block .row.row--2 .row__wrapper { flex-direction: column; } } @media only screen and (min-width: 768px) and (max-width: 1024px) and (min-height: 600px) and (max-height: 1024px) and (orientation: portrait) { .pagina-progetti .sezione-listing .block .row.row--2 .row__wrapper { flex-direction: row; } } .pagina-progetti .sezione-listing .block .row.row--2 .row__wrapper .project--3 { margin-top: calc(-25rem - 150px); margin-bottom: 25rem; width: 40vw; flex-basis: 40vw; } @media only screen and (min-device-width: 0px) and (max-device-width: 1023px) { .pagina-progetti .sezione-listing .block .row.row--2 .row__wrapper .project--3 { width: 100%; flex-basis: 100%; margin-top: 2.5rem; margin-bottom: 0; } } @media only screen and (min-width: 768px) and (max-width: 1024px) and (min-height: 600px) and (max-height: 1024px) and (orientation: portrait) { .pagina-progetti .sezione-listing .block .row.row--2 .row__wrapper .project--3 { width: calc(50% - 1.25vw); margin-left: 0; flex-basis: calc(50% - 1.25vw); } } @media only screen and (min-width: 768px) and (max-width: 1024px) and (min-height: 600px) and (max-height: 1024px) and (orientation: landscape) { .pagina-progetti .sezione-listing .block .row.row--2 .row__wrapper .project--3 { margin-top: -10rem; margin-bottom: 20rem; } } .pagina-progetti .sezione-listing .block .row.row--2 .row__wrapper .project--3 .image__wrapper { width: 40vw; height: calc((40vw * 4 / 3) - 150px); overflow: hidden; } @media only screen and (min-device-width: 0px) and (max-device-width: 1023px) { .pagina-progetti .sezione-listing .block .row.row--2 .row__wrapper .project--3 .image__wrapper { width: 100%; height: auto; } } .pagina-progetti .sezione-listing .block .row.row--2 .row__wrapper .project--4 { margin-right: 3.5vw; width: 31vw; flex-basis: 31vw; } @media only screen and (min-device-width: 0px) and (max-device-width: 1023px) { .pagina-progetti .sezione-listing .block .row.row--2 .row__wrapper .project--4 { width: 100%; flex-basis: 100%; margin-right: 0; margin-top: 2.5rem; } } @media only screen and (min-width: 768px) and (max-width: 1024px) and (min-height: 600px) and (max-height: 1024px) and (orientation: portrait) { .pagina-progetti .sezione-listing .block .row.row--2 .row__wrapper .project--4 { width: calc(50% - 1.25vw); margin-left: 0; flex-basis: calc(50% - 1.25vw); margin-top: 0; } } @media only screen and (min-width: 768px) and (max-width: 1024px) and (min-height: 600px) and (max-height: 1024px) and (orientation: landscape) { .pagina-progetti .sezione-listing .block .row.row--2 .row__wrapper .project--4 { width: 36vw; flex-basis: 36vw; } } .pagina-progetti .sezione-listing .block .row.row--2 .row__wrapper .project--4 .image__wrapper { width: 31vw; height: calc(31vw - 150px); overflow: hidden; } @media only screen and (min-width: 768px) and (max-width: 1024px) and (min-height: 600px) and (max-height: 1024px) and (orientation: landscape) { .pagina-progetti .sezione-listing .block .row.row--2 .row__wrapper .project--4 .image__wrapper { width: 36vw; height: 36vw; } } @media only screen and (min-device-width: 0px) and (max-device-width: 1023px) { .pagina-progetti .sezione-listing .block .row.row--2 .row__wrapper .project--4 .image__wrapper { width: 100%; height: auto; } } .pagina-progetti .sezione-listing .block .row.row--3 { margin-top: 20rem; } @media only screen and (min-device-width: 0px) and (max-device-width: 1023px) { .pagina-progetti .sezione-listing .block .row.row--3 { margin-top: 2.5rem; } } @media only screen and (min-width: 768px) and (max-width: 1024px) and (min-height: 600px) and (max-height: 1024px) and (orientation: portrait) { .pagina-progetti .sezione-listing .block .row.row--3 { margin-top: 5rem; } } @media only screen and (min-width: 768px) and (max-width: 1024px) and (min-height: 600px) and (max-height: 1024px) and (orientation: landscape) { .pagina-progetti .sezione-listing .block .row.row--3 { margin-top: 10rem; } } .pagina-progetti .sezione-listing .block .row.row--3 .row__wrapper .project--5 { width: 100%; } .pagina-progetti .sezione-listing .block .row.row--3 .row__wrapper .project--5 .image__wrapper { width: 86vw; height: calc((86vw / 1.6) - 150px); overflow: hidden; } @media only screen and (min-device-width: 0px) and (max-device-width: 1023px) { .pagina-progetti .sezione-listing .block .row.row--3 .row__wrapper .project--5 .image__wrapper { width: 100%; height: auto; } } @media only screen and (min-width: 768px) and (max-width: 1024px) and (min-height: 600px) and (max-height: 1024px) and (orientation: landscape) { .pagina-progetti .sezione-listing .block .row.row--3 .row__wrapper .project--5 .image__wrapper { height: calc(86vw / 1.6); } } .pagina-progetti .sezione-listing .block .row.row--4 { margin-top: 25rem; } @media only screen and (min-device-width: 0px) and (max-device-width: 1023px) { .pagina-progetti .sezione-listing .block .row.row--4 { margin-top: 2.5rem; } } @media only screen and (min-width: 768px) and (max-width: 1024px) and (min-height: 600px) and (max-height: 1024px) and (orientation: portrait) { .pagina-progetti .sezione-listing .block .row.row--4 { margin-top: 5rem; } } @media only screen and (min-width: 768px) and (max-width: 1024px) and (min-height: 600px) and (max-height: 1024px) and (orientation: landscape) { .pagina-progetti .sezione-listing .block .row.row--4 { margin-top: 10rem; } } .pagina-progetti .sezione-listing .block .row.row--4 .row__wrapper { display: flex; justify-content: space-between; flex-wrap: wrap; } .pagina-progetti .sezione-listing .block .row.row--4 .row__wrapper .project--6 { margin-left: 3.5vw; width: 31vw; flex-basis: 31vw; } @media only screen and (min-device-width: 0px) and (max-device-width: 1023px) { .pagina-progetti .sezione-listing .block .row.row--4 .row__wrapper .project--6 { width: 100%; flex-basis: 100%; margin-left: 0; } } @media only screen and (min-width: 768px) and (max-width: 1024px) and (min-height: 600px) and (max-height: 1024px) and (orientation: portrait) { .pagina-progetti .sezione-listing .block .row.row--4 .row__wrapper .project--6 { width: calc(50% - 1.25vw); margin-left: 0; flex-basis: calc(50% - 1.25vw); margin-top: 0; } } @media only screen and (min-width: 768px) and (max-width: 1024px) and (min-height: 600px) and (max-height: 1024px) and (orientation: landscape) { .pagina-progetti .sezione-listing .block .row.row--4 .row__wrapper .project--6 { margin-left: 0; flex-basis: 35vw; width: 35vw; } } .pagina-progetti .sezione-listing .block .row.row--4 .row__wrapper .project--6 .image__wrapper { width: 31vw; height: calc(31vw - 150px); overflow: hidden; } @media only screen and (min-device-width: 0px) and (max-device-width: 1023px) { .pagina-progetti .sezione-listing .block .row.row--4 .row__wrapper .project--6 .image__wrapper { width: 100%; height: auto; } } @media only screen and (min-width: 768px) and (max-width: 1024px) and (min-height: 600px) and (max-height: 1024px) and (orientation: landscape) { .pagina-progetti .sezione-listing .block .row.row--4 .row__wrapper .project--6 .image__wrapper { width: 35vw; height: calc(35vw * 1371 / 1200); } } .pagina-progetti .sezione-listing .block .row.row--4 .row__wrapper .project--7 { margin-top: 15rem; width: 40vw; flex-basis: 40vw; } @media only screen and (min-device-width: 0px) and (max-device-width: 1023px) { .pagina-progetti .sezione-listing .block .row.row--4 .row__wrapper .project--7 { width: 100%; flex-basis: 100%; margin-top: 2.5rem; } } @media only screen and (min-width: 768px) and (max-width: 1024px) and (min-height: 600px) and (max-height: 1024px) and (orientation: portrait) { .pagina-progetti .sezione-listing .block .row.row--4 .row__wrapper .project--7 { width: calc(50% - 1.25vw); margin-left: 0; flex-basis: calc(50% - 1.25vw); margin-top: 0; } } @media only screen and (min-width: 768px) and (max-width: 1024px) and (min-height: 600px) and (max-height: 1024px) and (orientation: landscape) { .pagina-progetti .sezione-listing .block .row.row--4 .row__wrapper .project--7 { margin-top: 10rem; } } .pagina-progetti .sezione-listing .block .row.row--4 .row__wrapper .project--7 .image__wrapper { width: 40vw; height: calc((40vw * 4 / 3) - 150px); overflow: hidden; } @media only screen and (min-device-width: 0px) and (max-device-width: 1023px) { .pagina-progetti .sezione-listing .block .row.row--4 .row__wrapper .project--7 .image__wrapper { width: 100%; height: auto; } } .pagina-progetti .sezione-listing .block .row.row--4 .row__wrapper .project--8 { width: 100%; flex-basis: 100%; margin-top: -35rem; } @media only screen and (min-device-width: 0px) and (max-device-width: 1023px) { .pagina-progetti .sezione-listing .block .row.row--4 .row__wrapper .project--8 { margin-top: 2.5rem; } } @media only screen and (min-width: 768px) and (max-width: 1024px) and (min-height: 600px) and (max-height: 1024px) and (orientation: landscape) { .pagina-progetti .sezione-listing .block .row.row--4 .row__wrapper .project--8 { margin-top: 5rem; } } .pagina-progetti .sezione-listing .block .row.row--4 .row__wrapper .project--8 .image { width: 40vw; } @media only screen and (min-device-width: 0px) and (max-device-width: 1023px) { .pagina-progetti .sezione-listing .block .row.row--4 .row__wrapper .project--8 .image { width: 100%; } } .pagina-progetti .sezione-listing .block .row.row--4 .row__wrapper .project--8 .image .image__wrapper { width: 40vw; height: calc(40vw - 150px); overflow: hidden; } @media only screen and (min-device-width: 0px) and (max-device-width: 1023px) { .pagina-progetti .sezione-listing .block .row.row--4 .row__wrapper .project--8 .image .image__wrapper { width: 100%; height: auto; } } .single-progetto { background-color: #31594b; } .single-progetto .torna-su .torna-su__wrapper .svgCircleThin { stroke: white; } .single-progetto .torna-su .torna-su__wrapper .svgCircleLarge { stroke: white; } .single-progetto .torna-su .torna-su__wrapper .svgArrowUp { fill: white; } .pagina-single-progetto { position: relative; opacity: 0; } .pagina-single-progetto .swiper-container { position: relative; width: 100%; height: 100%; } .pagina-single-progetto .swiper-slide__wrapper { position: absolute; width: 100%; height: 100%; background: center center / cover no-repeat; } .pagina-single-progetto .swiper-slide__wrapper .image { width: 100%; height: 100%; } .pagina-single-progetto .swiper-slide__wrapper img { width: 100%; height: 100%; object-fit: cover; } .pagina-single-progetto .swiper-slide__overlay { position: absolute; width: 100%; height: 100%; left: 0; top: 0; background-color: black; opacity: 0.2; } .pagina-single-progetto .stagger-fade-rotate-words { perspective: 40vw; } .pagina-single-progetto .stagger-fade-rotate-words .overflow { position: relative; overflow: hidden; padding-top: 3rem; padding-bottom: 0.5rem; } @media only screen and (min-device-width: 0px) and (max-device-width: 1023px) { .pagina-single-progetto .stagger-fade-rotate-words .overflow { padding-top: 1rem; } } .pagina-single-progetto .stagger-fade-rotate-words .rotate { -webkit-transform: rotateX(-90deg); -moz-transform: rotateX(-90deg); -ms-transform: rotateX(-90deg); transform: rotateX(-90deg); } .pagina-single-progetto .stagger-up-word { position: relative; -webkit-transform: translateY(100%); -moz-transform: translateY(100%); -ms-transform: translateY(100%); transform: translateY(100%); -o-transform: translateY(100%); } .pagina-single-progetto .fade { opacity: 0; } .pagina-single-progetto .scroll-down { position: absolute; bottom: 3.75rem; right: 2.75rem; padding: 1rem; z-index: 111; } @media only screen and (min-width: 768px) and (max-width: 1024px) and (min-height: 600px) and (max-height: 1024px) and (orientation: landscape) { .pagina-single-progetto .scroll-down { right: calc(2.5vw - 1rem); bottom: calc(2.5vw - 1rem); } } @media only screen and (min-device-width: 1440px) and (max-device-width: 1440px) and (min-device-height: 900px) and (max-device-height: 900px) and (-webkit-min-device-pixel-ratio: 2) { .pagina-single-progetto .scroll-down { right: calc(2.5vw - 1rem); bottom: calc(2.5vw - 1rem); } } .pagina-single-progetto .scroll-down .scroll-down__wrapper { position: relative; display: flex; align-items: center; justify-content: center; width: 60px; z-index: 91; } .pagina-single-progetto .scroll-down .scroll-down__wrapper .image--circle { position: relative; width: 100%; } .pagina-single-progetto .scroll-down .scroll-down__wrapper .image--arrow { position: absolute; width: 100%; } .pagina-single-progetto .scroll-down-mobile { position: absolute; left: calc(5vw - 1rem); bottom: calc(5vw - 0.5rem); padding: 1rem; z-index: 111; } .pagina-single-progetto .scroll-down-mobile .scroll-down__wrapper { position: relative; display: flex; align-items: center; justify-content: center; width: 48px; z-index: 91; } .pagina-single-progetto .scroll-down-mobile .scroll-down__wrapper .image--circle { position: relative; width: 100%; } .pagina-single-progetto .scroll-down-mobile .scroll-down__wrapper .image--arrow { position: absolute; width: 100%; } .pagina-single-progetto .slider-mobile .slider-mobile__wrapper .slider-mobile__container { position: relative; width: 100%; height: 100%; z-index: 1; } .pagina-single-progetto .slider-mobile .box-mobile { position: absolute; } .pagina-single-progetto .slider-mobile .box-mobile.padding-for-single-image { padding-top: 2.5vh; padding-bottom: 15vh; } .pagina-single-progetto .slider-mobile .box-mobile .box-mobile__bg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: #191919; } .pagina-single-progetto .slider-mobile .box-mobile .box-mobile__wrapper { position: relative; width: 100%; height: 100%; padding-bottom: 2.5rem; } .pagina-single-progetto .slider-mobile .box-mobile .controls { position: relative; display: flex; margin-top: 2.5rem; margin-left: calc(5vw - 1rem); } .pagina-single-progetto .slider-mobile .box-mobile .control { position: relative; padding: 0.5rem; } .pagina-single-progetto .slider-mobile .box-mobile .control .control__wrapper { position: relative; width: 48px; } .pagina-single-progetto .slider-mobile .box-mobile .control .control__wrapper .image { position: absolute; left: 0; top: 0; width: 100%; } .pagina-single-progetto .slider-mobile .box-mobile .control .control__wrapper .image.image-circle-stroke { position: relative; } .pagina-single-progetto .slider { position: relative; width: 100%; height: 100%; } .pagina-single-progetto .slider.single-image .slider__box .control { display: none; } .pagina-single-progetto .slider.single-image .slider__box .contatore { display: none; } .pagina-single-progetto .slider .slider__wrapper .slide { position: absolute; left: 0; top: 0; width: 100%; height: 100%; opacity: 0; z-index: 11; } .pagina-single-progetto .slider .slider__wrapper .slide.slide--center { opacity: 1; z-index: 21; } .pagina-single-progetto .slider .slider__wrapper .slide.slide--center .slide__container { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } .pagina-single-progetto .slider .slider__wrapper .slide .slide__container { -webkit-transform: scale(1.2); -moz-transform: scale(1.2); -ms-transform: scale(1.2); transform: scale(1.2); } .pagina-single-progetto .slider .slider__box .box__bg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: #191919; } .pagina-single-progetto .slider .slider__box .slide-text { position: absolute; left: 3.75rem; top: 5rem; opacity: 0; -webkit-transform: translateY(150px); -moz-transform: translateY(150px); -ms-transform: translateY(150px); transform: translateY(150px); -o-transform: translateY(150px); } .pagina-single-progetto .slider .slider__box .slide-text.slide-text--center { opacity: 1; -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); transform: translateY(0px); -o-transform: translateY(0px); } @media only screen and (min-width: 768px) and (max-width: 1024px) and (min-height: 600px) and (max-height: 1024px) and (orientation: landscape) { .pagina-single-progetto .slider .slider__box .slide-text { top: 2.5vw; left: 2.5vw; } } @media only screen and (min-width: 1024px) and (max-width: 1366px) and (min-height: 1024px) { .pagina-single-progetto .slider .slider__box .slide-text { top: 2.5vw; left: 2.5vw; } } @media only screen and (min-device-width: 1281px) and (max-width: 1920px) and (max-device-height: 1080px) { .pagina-single-progetto .slider .slider__box .slide-text { top: 2.5vw; } } @media only screen and (min-device-width: 1440px) and (max-device-width: 1440px) and (min-device-height: 900px) and (max-device-height: 900px) and (-webkit-min-device-pixel-ratio: 2) { .pagina-single-progetto .slider .slider__box .slide-text { top: 2.5vw; left: 2.5vw; } } @media only screen and (min-device-width: 1680px) and (max-device-width: 1680px) and (min-device-height: 1050px) and (max-device-height: 1050px) and (-webkit-min-device-pixel-ratio: 2) { .pagina-single-progetto .slider .slider__box .slide-text { top: 2.5vw; left: 2.5vw; } } @media only screen and (min-width: 1025px) and (max-width: 1280px) and (max-device-height: 720px) { .pagina-single-progetto .slider .slider__box .slide-text { top: 2.5vw; left: 2.5vw; } } .pagina-single-progetto .slider .slider__box .control { position: absolute; padding: 0.5rem; bottom: calc(5rem - 1rem); cursor: pointer; } .pagina-single-progetto .slider .slider__box .control.prev { left: calc(3.75rem - 1rem); } .pagina-single-progetto .slider .slider__box .control.next { left: calc(3.75rem - 1rem + 45px + 60px); } @media only screen and (min-width: 768px) and (max-width: 1024px) and (min-height: 600px) and (max-height: 1024px) and (orientation: landscape) { .pagina-single-progetto .slider .slider__box .control { bottom: calc(2.5vw - 1rem); } .pagina-single-progetto .slider .slider__box .control.prev { left: calc(2.5vw - 1rem); } .pagina-single-progetto .slider .slider__box .control.next { left: calc(2.5vw - 1rem + 45px + 60px); } } @media only screen and (min-width: 1024px) and (max-width: 1366px) and (min-height: 1024px) { .pagina-single-progetto .slider .slider__box .control { bottom: calc(2.5vw - 1rem); } .pagina-single-progetto .slider .slider__box .control.prev { left: calc(2.5vw - 1rem); } .pagina-single-progetto .slider .slider__box .control.next { left: calc(2.5vw - 1rem + 45px + 60px); } } @media only screen and (min-device-width: 1281px) and (max-width: 1920px) and (max-device-height: 1080px) { .pagina-single-progetto .slider .slider__box .control { bottom: calc(2.5vw - 1rem); } .pagina-single-progetto .slider .slider__box .control.prev { left: calc(2.5vw - 1rem); } .pagina-single-progetto .slider .slider__box .control.next { left: calc(2.5vw - 1rem + 45px + 60px); } } @media only screen and (min-device-width: 1440px) and (max-device-width: 1440px) and (min-device-height: 900px) and (max-device-height: 900px) and (-webkit-min-device-pixel-ratio: 2) { .pagina-single-progetto .slider .slider__box .control { bottom: calc(2.5vw - 0.5rem); } .pagina-single-progetto .slider .slider__box .control.prev { left: calc(2.5vw - 1rem); } .pagina-single-progetto .slider .slider__box .control.next { left: calc(2.5vw - 1rem + 45px + 60px); } } .pagina-single-progetto .slider .slider__box .control .control__wrapper { position: relative; width: 60px; } .pagina-single-progetto .slider .slider__box .control .control__wrapper .image { position: absolute; left: 0; top: 0; width: 100%; } .pagina-single-progetto .slider .slider__box .control .control__wrapper .image.image-circle-stroke { position: relative; } .pagina-single-progetto .slider .slider__box .contatore { position: absolute; right: 3.75rem; bottom: 5rem; display: flex; align-items: center; } @media only screen and (min-width: 768px) and (max-width: 1024px) and (min-height: 600px) and (max-height: 1024px) and (orientation: landscape) { .pagina-single-progetto .slider .slider__box .contatore { right: 2.5vw; bottom: 2.5vw; } } @media only screen and (min-width: 1024px) and (max-width: 1366px) and (min-height: 1024px) { .pagina-single-progetto .slider .slider__box .contatore { right: 2.5vw; bottom: 2.5vw; } } @media only screen and (min-device-width: 1440px) and (max-device-width: 1440px) and (min-device-height: 900px) and (max-device-height: 900px) and (-webkit-min-device-pixel-ratio: 2) { .pagina-single-progetto .slider .slider__box .contatore { right: 2.5vw; bottom: 2.5vw; } } @media only screen and (min-device-width: 1680px) and (max-device-width: 1680px) and (min-device-height: 1050px) and (max-device-height: 1050px) and (-webkit-min-device-pixel-ratio: 2) { .pagina-single-progetto .slider .slider__box .contatore { right: 2.5vw; bottom: 2.5vw; } } .pagina-single-progetto .slider .slider__box .contatore .slash { margin: 0 0.5rem; } .pagina-single-progetto section { position: relative; } .pagina-single-progetto .titoletto { position: relative; margin-bottom: 1.25rem; } @media only screen and (min-device-width: 0px) and (max-device-width: 1023px) { .pagina-single-progetto .titoletto { margin-bottom: 1rem; } } .pagina-single-progetto .titoletto p { font-weight: 500; } .pagina-single-progetto .description { width: 18vw; } @media only screen and (min-width: 768px) and (max-width: 1024px) and (min-height: 600px) and (max-height: 1024px) and (orientation: landscape) { .pagina-single-progetto .description { width: 45vw; } } @media only screen and (min-width: 1024px) and (max-width: 1366px) and (min-height: 1024px) { .pagina-single-progetto .description { width: 45vw; } } @media only screen and (min-device-width: 1440px) and (max-device-width: 1440px) and (min-device-height: 900px) and (max-device-height: 900px) and (-webkit-min-device-pixel-ratio: 2) { .pagina-single-progetto .description { width: 35vw; } } @media only screen and (min-device-width: 1680px) and (max-device-width: 1680px) and (min-device-height: 1050px) and (max-device-height: 1050px) and (-webkit-min-device-pixel-ratio: 2) { .pagina-single-progetto .description { width: 25vw; } } .pagina-single-progetto .tabulazione { position: relative; width: calc(100vw / 12); display: inline-block; } @media only screen and (min-device-width: 0px) and (max-device-width: 1023px) { .pagina-single-progetto .tabulazione { font-size: 1.3rem; line-height: 2rem; } } .pagina-single-progetto .svg-circle { fill: none; stroke-width: 1; stroke: white; } .pagina-single-progetto .svg-arrow { fill: white; } .pagina-single-progetto .svg-circle-stroke { fill: none; stroke: white; stroke-width: 2; stroke-miterlimit: 10; } .pagina-single-progetto .svg-circle-border { stroke: white; fill: none; stroke-width: 2; stroke-miterlimit: 10; stroke-dasharray: 182; stroke-dashoffset: 182; } .pagina-single-progetto .svg-coming-soon { fill: white; } .pagina-single-progetto section.sezione-top { width: 100vw; height: 100vh; overflow: hidden; background-color: #8e9592; margin-bottom: 30rem; } @media only screen and (min-device-width: 0px) and (max-device-width: 1023px) { .pagina-single-progetto section.sezione-top { z-index: 99; margin-bottom: 5rem; } } .pagina-single-progetto section.sezione-top .intro { position: absolute; right: 7.5rem; top: 45%; width: 35vw; } @media only screen and (min-device-width: 0px) and (max-device-width: 1023px) { .pagina-single-progetto section.sezione-top .intro { top: 10vw; left: 5vw; width: 90vw; } } @media only screen and (min-width: 768px) and (max-width: 1024px) and (min-height: 600px) and (max-height: 1024px) and (orientation: landscape) { .pagina-single-progetto section.sezione-top .intro { width: 60vw; } } @media only screen and (min-width: 1024px) and (max-width: 1366px) and (min-height: 1024px) { .pagina-single-progetto section.sezione-top .intro { width: 60vw; } } @media only screen and (min-device-width: 1440px) and (max-device-width: 1440px) and (min-device-height: 900px) and (max-device-height: 900px) and (-webkit-min-device-pixel-ratio: 2) { .pagina-single-progetto section.sezione-top .intro { width: 45vw; } } @media only screen and (min-width: 1025px) and (max-width: 1280px) and (max-device-height: 720px) { .pagina-single-progetto section.sezione-top .intro { width: 40vw; } } .pagina-single-progetto section.sezione-top .intro-text { position: relative; margin-bottom: 15rem; width: 100%; z-index: 81; } @media only screen and (min-device-width: 0px) and (max-device-width: 1023px) { .pagina-single-progetto section.sezione-top .intro-text { margin-bottom: 2.5rem; } } @media only screen and (min-width: 768px) and (max-width: 1024px) and (min-height: 600px) and (max-height: 1024px) and (orientation: landscape) { .pagina-single-progetto section.sezione-top .intro-text { margin-bottom: 5rem; } } @media only screen and (min-width: 1024px) and (max-width: 1366px) and (min-height: 1024px) { .pagina-single-progetto section.sezione-top .intro-text { margin-bottom: 5rem; } } @media only screen and (min-device-width: 1281px) and (max-width: 1920px) and (max-device-height: 1080px) { .pagina-single-progetto section.sezione-top .intro-text { margin-bottom: 10rem; } } @media only screen and (min-device-width: 1440px) and (max-device-width: 1440px) and (min-device-height: 900px) and (max-device-height: 900px) and (-webkit-min-device-pixel-ratio: 2) { .pagina-single-progetto section.sezione-top .intro-text { margin-bottom: 7.5rem; } } @media only screen and (min-width: 1025px) and (max-width: 1280px) and (max-device-height: 720px) { .pagina-single-progetto section.sezione-top .intro-text { margin-bottom: 5rem; } } @media only screen and (min-device-width: 0px) and (max-device-width: 1023px) { .pagina-single-progetto section.sezione-top .intro-text p { font-size: 3rem; line-height: 3.2rem; } } .pagina-single-progetto section.sezione-top .intro-logo { position: relative; perspective: 40vw; z-index: 191; } @media only screen and (min-device-width: 0px) and (max-device-width: 1023px) { .pagina-single-progetto section.sezione-top .intro-logo { margin-left: -0.5rem; } } .pagina-single-progetto section.sezione-top .intro-logo h3 { color: white; font-size: 22rem; } @media only screen and (min-device-width: 0px) and (max-device-width: 1023px) { .pagina-single-progetto section.sezione-top .intro-logo h3 { font-size: 8rem; } } @media only screen and (min-width: 768px) and (max-width: 1024px) and (min-height: 600px) and (max-height: 1024px) { .pagina-single-progetto section.sezione-top .intro-logo h3 { font-size: 12rem; } } @media only screen and (min-width: 1024px) and (max-width: 1366px) and (min-height: 1024px) { .pagina-single-progetto section.sezione-top .intro-logo h3 { font-size: 12rem; } } @media only screen and (min-width: 1024px) and (max-width: 1366px) and (min-height: 1024px) and (orientation: landscape) { .pagina-single-progetto section.sezione-top .intro-logo h3 { font-size: 16rem; } } @media only screen and (min-device-width: 1281px) and (max-width: 1920px) and (max-device-height: 1080px) { .pagina-single-progetto section.sezione-top .intro-logo h3 { font-size: 14rem; } } .pagina-single-progetto section.sezione-top .slider-mobile { position: absolute; height: 100vh; width: 100vw; } .pagina-single-progetto section.sezione-top .slider-mobile .slider-mobile__wrapper .slider-mobile__container { position: absolute; bottom: 0; left: 0; height: 70vh; width: 85vw; } @media only screen and (min-width: 768px) and (max-width: 1024px) and (min-height: 600px) and (max-height: 1024px) and (orientation: portrait) { .pagina-single-progetto section.sezione-top .slider-mobile .slider-mobile__wrapper .slider-mobile__container { height: 60vh; } } .pagina-single-progetto section.sezione-top .slider-mobile .box-mobile { position: absolute; left: 0; bottom: 0; width: 75vw; z-index: 2; transform: scale(0.7); transform-origin: bottom left; } @media only screen and (min-device-width: 0px) and (max-device-width: 1023px) { .pagina-single-progetto section.sezione-top .slider-mobile .box-mobile { padding-bottom: 5rem; } } .pagina-single-progetto section.sezione-top .slider-mobile .box-mobile .box-mobile__wrapper { opacity: 0; visibility: hidden; } .pagina-single-progetto section.sezione-top .slider-mobile .box-mobile .control { padding: 0.5rem; } .pagina-single-progetto section.sezione-top .slider-mobile .box-mobile .control .control__wrapper { position: relative; width: 48px; } .pagina-single-progetto section.sezione-top .slider-mobile .box-mobile .control .control__wrapper .image { position: absolute; left: 0; top: 0; width: 100%; } .pagina-single-progetto section.sezione-top .slider-mobile .box-mobile .control .control__wrapper .image.image-circle-stroke { position: relative; } .pagina-single-progetto section.sezione-top .slider-mobile .box-mobile .titoletto { position: relative; width: 65vw; margin: 2.5rem auto 1rem auto; } .pagina-single-progetto section.sezione-top .slider-mobile .box-mobile .description { position: relative; width: 65vw; margin: 0 auto; } .pagina-single-progetto section.sezione-top .slider { height: 100vh; } .pagina-single-progetto section.sezione-top .slider.scroll-enabled .slider__box { width: 40vw; height: 20vw; } .pagina-single-progetto section.sezione-top .slider.scroll-enabled .slider__box:hover .box__bg { opacity: 0.7; } @media only screen and (min-width: 768px) and (max-width: 1024px) and (min-height: 600px) and (max-height: 1024px) { .pagina-single-progetto section.sezione-top .slider.scroll-enabled .slider__box:hover .box__bg { opacity: 1; } } @media only screen and (min-width: 1024px) and (max-width: 1366px) and (min-height: 1024px) { .pagina-single-progetto section.sezione-top .slider.scroll-enabled .slider__box:hover .box__bg { opacity: 1; } } @media only screen and (min-width: 768px) and (max-width: 1024px) and (min-height: 600px) and (max-height: 1024px) and (orientation: landscape) { .pagina-single-progetto section.sezione-top .slider.scroll-enabled .slider__box { width: 60vw; height: 30vw; } } @media only screen and (min-width: 1024px) and (max-width: 1366px) and (min-height: 1024px) { .pagina-single-progetto section.sezione-top .slider.scroll-enabled .slider__box { width: 60vw; height: 30vw; } } .pagina-single-progetto section.sezione-top .slider.scroll-enabled .slider__wrapper { clip: rect(0vh, 100vw, 100vh, 0vw); } .pagina-single-progetto section.sezione-top .slider.scroll-enabled .slider__wrapper .slider__container { transform: scale(1); } .pagina-single-progetto section.sezione-top .slider .slider__box { position: absolute; left: 0; bottom: 0; width: 0vw; height: 20vw; -webkit-transition: all 1.2s ease-in-out 0s; -moz-transition: all 1.2s ease-in-out 0s; -o-transition: all 1.2s ease-in-out 0s; transition: all 1.2s ease-in-out 0s; z-index: 101; } .pagina-single-progetto section.sezione-top .slider .slider__box .box__bg { opacity: 1; -webkit-transition: opacity 0.3s linear 0s; -moz-transition: opacity 0.3s linear 0s; -o-transition: opacity 0.3s linear 0s; transition: opacity 0.3s linear 0s; } .pagina-single-progetto section.sezione-top .slider .slider__box .box__wrapper { opacity: 0; visibility: hidden; } .pagina-single-progetto section.sezione-top .slider .slider__wrapper { position: absolute; width: 100%; height: 100vh; clip: rect(0vh, 75vw, 100vh, 0vw); -webkit-transition: all 1.2s ease-in-out 0s; -moz-transition: all 1.2s ease-in-out 0s; -o-transition: all 1.2s ease-in-out 0s; transition: all 1.2s ease-in-out 0s; } .pagina-single-progetto section.sezione-top .slider .slider__wrapper .slider__container { position: absolute; right: 0; width: 100%; height: 100%; transform-origin: right bottom; -webkit-transition: all 1.2s ease-in-out 0s; -moz-transition: all 1.2s ease-in-out 0s; -o-transition: all 1.2s ease-in-out 0s; transition: all 1.2s ease-in-out 0s; } .pagina-single-progetto section.sezione-top .slider .slider__wrapper .slide { width: 100vw; } .pagina-single-progetto section.sezione-top .slider .slider__wrapper .slide.slide--center .slide__wrapper { width: 100%; } .pagina-single-progetto section.sezione-top .slider .slider__wrapper .slide .slide__wrapper { position: absolute; left: 0; top: 0; width: 0%; height: 100%; overflow: hidden; } .pagina-single-progetto section.sezione-top .slider .slider__wrapper .slide .slide__wrapper .slide__container { position: absolute; left: 0; top: 0; width: 100vw; height: 100%; } .pagina-single-progetto section.sezione-top .slider .slider__wrapper .slide .slide__wrapper .slide__container .slide__overlay { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: #000; opacity: 0.2; z-index: 99; } .pagina-single-progetto section.sezione-top .slider .slider__wrapper .slide picture { position: relative; width: 100vw; height: 100vh; display: block; } .pagina-single-progetto section.sezione-2 { position: relative; padding: 10rem 0 20rem 0; text-align: center; } .pagina-single-progetto section.sezione-2 h3 { color: white; } .pagina-single-progetto section.sezione-3 { width: 100vw; overflow: hidden; height: calc(65vw * 9 / 16 + 10rem); margin-top: -10rem; } @media only screen and (min-device-width: 0px) and (max-device-width: 1023px) { .pagina-single-progetto section.sezione-3 { height: auto; margin-top: 0; } } @media only screen and (min-width: 768px) and (max-width: 1024px) and (min-height: 600px) and (max-height: 1024px) and (orientation: landscape) { .pagina-single-progetto section.sezione-3 { margin-top: 0; } } @media only screen and (min-width: 768px) and (max-width: 1024px) and (min-height: 600px) and (max-height: 1024px) and (orientation: landscape) { .pagina-single-progetto section.sezione-3 .description { width: 30vw; } } @media only screen and (min-width: 1024px) and (max-width: 1366px) and (min-height: 1024px) { .pagina-single-progetto section.sezione-3 .description { width: 30vw; } } @media only screen and (min-device-width: 1440px) and (max-device-width: 1440px) and (min-device-height: 900px) and (max-device-height: 900px) and (-webkit-min-device-pixel-ratio: 2) { .pagina-single-progetto section.sezione-3 .description { width: 30vw; } } .pagina-single-progetto section.sezione-3 .slider-mobile { position: relative; width: auto; height: auto; background-color: #31594b; } .pagina-single-progetto section.sezione-3 .slider-mobile .slider__bg { position: absolute; left: 0; bottom: 0; width: 100%; height: calc(100% - 85vw); background-color: #191919; } .pagina-single-progetto section.sezione-3 .slider-mobile .slider-mobile__wrapper { position: relative; margin-left: 15vw; width: 85vw; z-index: 3; height: calc(85vw * 4 / 3); } .pagina-single-progetto section.sezione-3 .slider-mobile .box-mobile { position: relative; } @media only screen and (min-device-width: 0px) and (max-device-width: 1023px) { .pagina-single-progetto section.sezione-3 .slider-mobile .box-mobile { margin-top: 2.5rem; } } .pagina-single-progetto section.sezione-3 .slider-mobile .box-mobile .titoletto { margin-left: 15vw; width: 80vw; } .pagina-single-progetto section.sezione-3 .slider-mobile .box-mobile .description { margin-left: 15vw; width: 80vw; } .pagina-single-progetto section.sezione-3 .slider-mobile .box-mobile .controls { position: relative; display: flex; margin-bottom: 1.25rem; margin-left: calc(15vw - 0.5rem); } .pagina-single-progetto section.sezione-3 .slider-mobile .box-mobile .control .control__wrapper { position: relative; width: 48px; } .pagina-single-progetto section.sezione-3 .slider-mobile .box-mobile .control .control__wrapper .image { position: absolute; left: 0; top: 0; width: 100%; } .pagina-single-progetto section.sezione-3 .slider-mobile .box-mobile .control .control__wrapper .image.image-circle-stroke { position: relative; } .pagina-single-progetto section.sezione-3 .slider__wrapper { position: absolute; z-index: 2; margin-left: 0; left: auto; right: 0; top: 0; width: 65vw; height: calc(65vw * 9 / 16); } .pagina-single-progetto section.sezione-3 .slider__wrapper .slide { position: absolute; left: 0; top: 0; width: 100%; height: 100%; opacity: 0; z-index: 11; } .pagina-single-progetto section.sezione-3 .slider__wrapper .slide.slide--center .slide__wrapper { width: 100%; } .pagina-single-progetto section.sezione-3 .slider__wrapper .slide .slide__wrapper { position: absolute; left: 0; top: 0; width: 0%; height: 100%; overflow: hidden; } .pagina-single-progetto section.sezione-3 .slider__wrapper .slide .slide__wrapper .slide__container { position: absolute; left: 0; top: 0; width: 65vw; height: 100%; } .pagina-single-progetto section.sezione-3 .slider__box { position: relative; right: auto; left: 0; top: 10rem; width: 73vw; height: calc(65vw * 9 / 16 + 0rem); } .pagina-single-progetto section.sezione-3 .slider__box .control { bottom: 5rem; -webkit-transform: translateY(50%); -moz-transform: translateY(50%); -ms-transform: translateY(50%); transform: translateY(50%); -o-transform: translateY(50%); } .pagina-single-progetto section.sezione-3 .slider__box .contatore { -webkit-transform: translateY(50%); -moz-transform: translateY(50%); -ms-transform: translateY(50%); transform: translateY(50%); -o-transform: translateY(50%); } @media only screen and (min-device-width: 1440px) and (max-device-width: 1440px) and (min-device-height: 900px) and (max-device-height: 900px) and (-webkit-min-device-pixel-ratio: 2) { .pagina-single-progetto section.sezione-3 .slider__box .contatore { bottom: 5rem; } } .pagina-single-progetto section.sezione-4 { padding-top: 50vh; padding-bottom: 40vh; overflow: hidden; } @media only screen and (min-device-width: 0px) and (max-device-width: 1023px) { .pagina-single-progetto section.sezione-4 { padding-top: 5rem; padding-bottom: 5rem; } } @media only screen and (min-width: 768px) and (max-width: 1024px) and (min-height: 600px) and (max-height: 1024px) and (orientation: landscape) { .pagina-single-progetto section.sezione-4 { padding-top: 30vh; } } @media only screen and (min-width: 1024px) and (max-width: 1366px) and (min-height: 1024px) { .pagina-single-progetto section.sezione-4 { padding-top: 30vh; padding-bottom: 20vh; } } @media only screen and (min-device-width: 1440px) and (max-device-width: 1440px) and (min-device-height: 900px) and (max-device-height: 900px) and (-webkit-min-device-pixel-ratio: 2) { .pagina-single-progetto section.sezione-4 { padding-bottom: 30vh; } } .pagina-single-progetto section.sezione-4 .image-group { position: relative; width: 100vw; height: 27vw; display: flex; justify-content: space-between; z-index: 6; } @media only screen and (min-device-width: 0px) and (max-device-width: 1023px) { .pagina-single-progetto section.sezione-4 .image-group { height: auto; display: block; } } .pagina-single-progetto section.sezione-4 .image-group .image { position: relative; flex-basis: 27vw; } @media only screen and (min-device-width: 0px) and (max-device-width: 1023px) { .pagina-single-progetto section.sezione-4 .image-group .image { width: 100vw; } } .pagina-single-progetto section.sezione-4 .image-group .image .image__wrapper { position: relative; width: 27vw; height: 27vw; overflow: hidden; } @media only screen and (min-device-width: 0px) and (max-device-width: 1023px) { .pagina-single-progetto section.sezione-4 .image-group .image .image__wrapper { width: 60vw; height: auto; } } .pagina-single-progetto section.sezione-4 .image-group .image .image__inner { position: absolute; top: 0; left: 0; width: 27vw; } @media only screen and (min-device-width: 0px) and (max-device-width: 1023px) { .pagina-single-progetto section.sezione-4 .image-group .image .image__inner { position: relative; width: 100%; } } @media only screen and (min-device-width: 0px) and (max-device-width: 1023px) { .pagina-single-progetto section.sezione-4 .image-group .image.image--1 { z-index: 3; } } @media only screen and (min-device-width: 0px) and (max-device-width: 1023px) { .pagina-single-progetto section.sezione-4 .image-group .image.image--1 .image__wrapper { margin-left: 40vw; } } .pagina-single-progetto section.sezione-4 .image-group .image.image--2 { margin-top: 7.5vw; } @media only screen and (min-device-width: 0px) and (max-device-width: 1023px) { .pagina-single-progetto section.sezione-4 .image-group .image.image--2 { margin-top: -5rem; z-index: 2; } } @media only screen and (min-width: 768px) and (max-width: 1024px) and (min-height: 600px) and (max-height: 1024px) and (orientation: landscape) { .pagina-single-progetto section.sezione-4 .image-group .image.image--2 { margin-top: 20vw; } } .pagina-single-progetto section.sezione-4 .image-group .image.image--3 { margin-top: -7.5vw; } @media only screen and (min-device-width: 0px) and (max-device-width: 1023px) { .pagina-single-progetto section.sezione-4 .image-group .image.image--3 { margin-top: -5rem; z-index: 1; } } @media only screen and (min-device-width: 0px) and (max-device-width: 1023px) { .pagina-single-progetto section.sezione-4 .image-group .image.image--3 .image__wrapper { margin-left: 40vw; } } .pagina-single-progetto section.sezione-4 .testo-grande { position: absolute; left: 0; top: 20%; } .pagina-single-progetto section.sezione-4 .testo-grande h3 { color: #191919; } .pagina-single-progetto section.sezione-4 .testo-grande.testo-grande--stroke { z-index: 11; } .pagina-single-progetto section.sezione-4 .testo-grande.testo-grande--stroke h3 { -webkit-text-stroke: 2px #191919; color: transparent; } @media only screen and (min-device-width: 0px) and (max-device-width: 1023px) { .pagina-single-progetto section.sezione-4 .testo-grande.testo-grande--stroke h3 { -webkit-text-stroke: 1px #191919; } } .pagina-single-progetto section.sezione-5 { padding-bottom: 20rem; } @media only screen and (min-device-width: 0px) and (max-device-width: 1023px) { .pagina-single-progetto section.sezione-5 { padding-top: 2.5rem; padding-bottom: 7.5rem; } } @media only screen and (min-width: 768px) and (max-width: 1024px) and (min-height: 600px) and (max-height: 1024px) and (orientation: landscape) { .pagina-single-progetto section.sezione-5 { padding-bottom: 7.5rem; } } @media only screen and (min-width: 1024px) and (max-width: 1366px) and (min-height: 1024px) { .pagina-single-progetto section.sezione-5 { padding-bottom: 12.5rem; } } .pagina-single-progetto section.sezione-5 article { width: 50vw; margin-left: 25vw; } @media only screen and (min-device-width: 0px) and (max-device-width: 1023px) { .pagina-single-progetto section.sezione-5 article { width: 90vw; margin: 2.5rem auto 0 auto; } } @media only screen and (min-width: 768px) and (max-width: 1024px) and (min-height: 600px) and (max-height: 1024px) and (orientation: portrait) { .pagina-single-progetto section.sezione-5 article { width: 70vw; } } @media only screen and (min-device-width: 1366px) and (max-device-width: 1366px) and (max-device-height: 768px) { .pagina-single-progetto section.sezione-5 article { margin-left: 20vw; width: 60vw; } } @media only screen and (min-width: 1025px) and (max-width: 1280px) and (max-device-height: 720px) { .pagina-single-progetto section.sezione-5 article { margin-left: 20vw; width: 60vw; } } @media only screen and (min-device-width: 1680px) and (max-device-width: 1680px) and (min-device-height: 1050px) and (max-device-height: 1050px) and (-webkit-min-device-pixel-ratio: 2) { .pagina-single-progetto section.sezione-5 article { margin-left: 20vw; width: 60vw; } } @media only screen and (min-device-width: 1440px) and (max-device-width: 1440px) and (min-device-height: 900px) and (max-device-height: 900px) and (-webkit-min-device-pixel-ratio: 2) { .pagina-single-progetto section.sezione-5 article { margin-left: 20vw; width: 60vw; } } .pagina-single-progetto section.sezione-7 { padding-top: calc(15rem + 5vw); background-color: #A8A59E; overflow: hidden; padding-bottom: 15rem; } @media only screen and (min-device-width: 0px) and (max-device-width: 1023px) { .pagina-single-progetto section.sezione-7 { padding-top: 5rem; padding-bottom: 5rem; } } .pagina-single-progetto section.sezione-7 article { position: absolute; width: 20vw; left: 16vw; bottom: 0; z-index: 2; } @media only screen and (min-device-width: 0px) and (max-device-width: 1023px) { .pagina-single-progetto section.sezione-7 article { position: relative; width: 90vw; left: 0; margin: 5rem auto 0 auto; } } @media only screen and (min-width: 768px) and (max-width: 1024px) and (min-height: 600px) and (max-height: 1024px) and (orientation: portrait) { .pagina-single-progetto section.sezione-7 article { width: 60vw; } } @media only screen and (min-width: 768px) and (max-width: 1024px) and (min-height: 600px) and (max-height: 1024px) and (orientation: landscape) { .pagina-single-progetto section.sezione-7 article { width: 31vw; } } @media only screen and (min-width: 1024px) and (max-width: 1366px) and (min-height: 1024px) { .pagina-single-progetto section.sezione-7 article { width: 31vw; } } .pagina-single-progetto section.sezione-7 article p { color: #191919; font-size: 1.2rem; line-height: 1.4rem; } @media only screen and (min-device-width: 0px) and (max-device-width: 1023px) { .pagina-single-progetto section.sezione-7 article p { text-transform: unset; } } .pagina-single-progetto section.sezione-7 .image-group { position: relative; margin-left: 50vw; width: 43vw; height: calc(43vw * 5 / 4); z-index: 1; } @media only screen and (min-device-width: 0px) and (max-device-width: 1023px) { .pagina-single-progetto section.sezione-7 .image-group { display: flex; justify-content: space-between; width: 100vw; height: auto; margin-left: 0; } } .pagina-single-progetto section.sezione-7 .image-group .image--big { position: relative; width: 100%; height: 100%; overflow: hidden; } @media only screen and (min-device-width: 0px) and (max-device-width: 1023px) { .pagina-single-progetto section.sezione-7 .image-group .image--big { flex-basis: 47.5vw; width: 47.5vw; } } .pagina-single-progetto section.sezione-7 .image-group .image--big .image--big__wrapper .image__inner { position: absolute; left: 0; bottom: 0; width: 43vw; height: calc(43vw * 5 / 4); } @media only screen and (min-device-width: 0px) and (max-device-width: 1023px) { .pagina-single-progetto section.sezione-7 .image-group .image--big .image--big__wrapper .image__inner { position: relative; width: 100%; height: auto; } } .pagina-single-progetto section.sezione-7 .image-group .image--small { position: absolute; width: 31vw; height: 31vw; top: -5vw; left: -10vw; -webkit-transform: translateX(-100%); -moz-transform: translateX(-100%); -ms-transform: translateX(-100%); transform: translateX(-100%); } @media only screen and (min-device-width: 0px) and (max-device-width: 1023px) { .pagina-single-progetto section.sezione-7 .image-group .image--small { position: relative; top: 0; left: 0; width: 47.5vw; flex-basis: 47.5vw; height: auto; -webkit-transform: translateX(0%); -moz-transform: translateX(0%); -ms-transform: translateX(0%); transform: translateX(0%); } } .pagina-single-progetto section.sezione-7 .image-group .image--small .image--small__wrapper { position: absolute; width: 100%; height: 100%; left: 0; top: 0; } @media only screen and (min-device-width: 0px) and (max-device-width: 1023px) { .pagina-single-progetto section.sezione-7 .image-group .image--small .image--small__wrapper { position: relative; } } .pagina-single-progetto section.sezione-7 .image-group .image--small .image--small__wrapper .image--small__container { position: absolute; width: 31vw; height: 31vw; left: 0; top: 0; } @media only screen and (min-device-width: 0px) and (max-device-width: 1023px) { .pagina-single-progetto section.sezione-7 .image-group .image--small .image--small__wrapper .image--small__container { position: relative; width: 100%; height: 100%; } } .pagina-single-progetto section.sezione-7 .testo-grande { position: absolute; left: 0; top: 15%; } @media only screen and (min-device-width: 0px) and (max-device-width: 1023px) { .pagina-single-progetto section.sezione-7 .testo-grande { top: 5rem; } } .pagina-single-progetto section.sezione-7 .testo-grande h3 { color: #191919; } .pagina-single-progetto section.sezione-7 .testo-grande.testo-grande--stroke { z-index: 11; } .pagina-single-progetto section.sezione-7 .testo-grande.testo-grande--stroke h3 { -webkit-text-stroke: 2px #191919; color: transparent; } @media only screen and (min-device-width: 0px) and (max-device-width: 1023px) { .pagina-single-progetto section.sezione-7 .testo-grande.testo-grande--stroke h3 { -webkit-text-stroke: 1px #191919; } } .pagina-single-progetto section.sezione-8 { width: 100vw; overflow: hidden; background-color: #A8A59E; margin-top: -1px; } .pagina-single-progetto section.sezione-8 .descrizione-senza-immagine { position: relative; width: 50vw; margin: 0 auto; padding-bottom: 15rem; } @media only screen and (min-device-width: 0px) and (max-device-width: 1023px) { .pagina-single-progetto section.sezione-8 .descrizione-senza-immagine { width: 75vw; padding-bottom: 5rem; } } .pagina-single-progetto section.sezione-8 .descrizione-senza-immagine h3 { color: white; } @media only screen and (min-width: 768px) and (max-width: 1024px) and (min-height: 600px) and (max-height: 1024px) and (orientation: landscape) { .pagina-single-progetto section.sezione-8 .description { width: 30vw; } } @media only screen and (min-width: 1024px) and (max-width: 1366px) and (min-height: 1024px) { .pagina-single-progetto section.sezione-8 .description { width: 30vw; } } @media only screen and (min-device-width: 1440px) and (max-device-width: 1440px) and (min-device-height: 900px) and (max-device-height: 900px) and (-webkit-min-device-pixel-ratio: 2) { .pagina-single-progetto section.sezione-8 .description { width: 24vw; } } .pagina-single-progetto section.sezione-8 .slider-mobile { position: relative; } .pagina-single-progetto section.sezione-8 .slider-mobile .slider-mobile__wrapper .slider-mobile__container { height: calc(100vh - 50vw); } .pagina-single-progetto section.sezione-8 .slider-mobile .box-mobile { position: relative; width: 75vw; margin-top: -15vw; z-index: 2; } .pagina-single-progetto section.sezione-8 .slider-mobile .box-mobile .box-mobile__wrapper { padding-top: 2.5rem; } .pagina-single-progetto section.sezione-8 .slider-mobile .box-mobile .titoletto { margin-left: 5vw; width: 65vw; } .pagina-single-progetto section.sezione-8 .slider-mobile .box-mobile .description { margin-left: 5vw; width: 65vw; } .pagina-single-progetto section.sezione-8 .slider-mobile .box-mobile .controls { margin-left: calc(5vw - 0.5rem); margin-bottom: 1.25rem; margin-top: 0; } .pagina-single-progetto section.sezione-8 .slider .slider__wrapper { position: relative; margin-left: 25vw; width: 75vw; height: calc(75vw * 9 / 16); } @media only screen and (min-width: 768px) and (max-width: 1024px) and (min-height: 600px) and (max-height: 1024px) and (orientation: landscape) { .pagina-single-progetto section.sezione-8 .slider .slider__wrapper { margin-left: 15vw; width: 85vw; height: calc(85vw * 9 / 16); } } @media only screen and (min-width: 1024px) and (max-width: 1366px) and (min-height: 1024px) { .pagina-single-progetto section.sezione-8 .slider .slider__wrapper { margin-left: 15vw; width: 85vw; height: calc(85vw * 9 / 16); } } .pagina-single-progetto section.sezione-8 .slider .slider__wrapper .slider__container { position: absolute; right: 0; width: 100%; height: 100%; } .pagina-single-progetto section.sezione-8 .slider .slider__box { position: absolute; width: 29vw; height: 30vw; left: 0; bottom: 0; z-index: 101; } @media only screen and (min-width: 768px) and (max-width: 1024px) and (min-height: 600px) and (max-height: 1024px) and (orientation: landscape) { .pagina-single-progetto section.sezione-8 .slider .slider__box { width: 35vw; height: 35vw; } } @media only screen and (min-width: 1024px) and (max-width: 1366px) and (min-height: 1024px) { .pagina-single-progetto section.sezione-8 .slider .slider__box { width: 35vw; height: 35vw; } } .pagina-single-progetto section.sezione-8 .slider .slide { width: 75vw; } @media only screen and (min-width: 768px) and (max-width: 1024px) and (min-height: 600px) and (max-height: 1024px) and (orientation: landscape) { .pagina-single-progetto section.sezione-8 .slider .slide { width: 85vw; } } @media only screen and (min-width: 1024px) and (max-width: 1366px) and (min-height: 1024px) { .pagina-single-progetto section.sezione-8 .slider .slide { width: 85vw; } } .pagina-single-progetto section.sezione-8 .slider .slide.slide--center .slide__wrapper { width: 100%; } .pagina-single-progetto section.sezione-8 .slider .slide .slide__wrapper { position: absolute; left: 0; top: 0; width: 0%; height: 100%; overflow: hidden; } .pagina-single-progetto section.sezione-8 .slider .slide .slide__wrapper .slide__container { position: absolute; left: 0; top: 0; width: 75vw; height: 100%; } @media only screen and (min-width: 768px) and (max-width: 1024px) and (min-height: 600px) and (max-height: 1024px) and (orientation: landscape) { .pagina-single-progetto section.sezione-8 .slider .slide .slide__wrapper .slide__container { width: 85vw; } } @media only screen and (min-width: 1024px) and (max-width: 1366px) and (min-height: 1024px) { .pagina-single-progetto section.sezione-8 .slider .slide .slide__wrapper .slide__container { width: 85vw; } } .pagina-single-progetto section.sezione-9 { background-color: #A8A59E; } .pagina-single-progetto section.sezione-altri-progetti { padding-top: 15rem; background-color: #191919; } @media only screen and (min-device-width: 0px) and (max-device-width: 1023px) { .pagina-single-progetto section.sezione-altri-progetti { padding-top: 5rem; padding-bottom: 0; overflow: hidden; } } @media only screen and (min-width: 768px) and (max-width: 1024px) and (min-height: 600px) and (max-height: 1024px) and (orientation: landscape) { .pagina-single-progetto section.sezione-altri-progetti { padding-top: 7.5rem; padding-bottom: 2.5rem; } } @media only screen and (min-width: 1024px) and (max-width: 1366px) and (min-height: 1024px) { .pagina-single-progetto section.sezione-altri-progetti { padding-top: 7.5rem; padding-bottom: 2.5rem; } } @media only screen and (min-device-width: 1440px) and (max-device-width: 1440px) and (min-device-height: 900px) and (max-device-height: 900px) and (-webkit-min-device-pixel-ratio: 2) { .pagina-single-progetto section.sezione-altri-progetti { padding-top: 10rem; padding-bottom: 5rem; } } .pagina-single-progetto section.sezione-altri-progetti .text { position: relative; margin-bottom: calc(15vw + 7.5rem); } @media only screen and (min-device-width: 0px) and (max-device-width: 1023px) { .pagina-single-progetto section.sezione-altri-progetti .text { margin-bottom: calc(13.5vw + 2.5rem); margin-left: 5vw; width: 95vw; } } .pagina-single-progetto section.sezione-altri-progetti .text h3 { line-height: 27rem; color: #F5F3F4; } @media only screen and (min-device-width: 0px) and (max-device-width: 1023px) { .pagina-single-progetto section.sezione-altri-progetti .text h3 { font-size: 3.6rem; line-height: 4rem; } } @media only screen and (min-width: 768px) and (max-width: 1024px) and (min-height: 600px) and (max-height: 1024px) and (orientation: portrait) { .pagina-single-progetto section.sezione-altri-progetti .text h3 { font-size: 8rem; line-height: 8.4rem; } } @media only screen and (min-width: 768px) and (max-width: 1024px) and (min-height: 600px) and (max-height: 1024px) and (orientation: landscape) { .pagina-single-progetto section.sezione-altri-progetti .text h3 { font-size: 11rem; line-height: 7rem; } } @media only screen and (min-width: 1024px) and (max-width: 1366px) and (min-height: 1024px) and (orientation: portrait) { .pagina-single-progetto section.sezione-altri-progetti .text h3 { font-size: 11rem; line-height: 7rem; } } @media only screen and (min-width: 1024px) and (max-width: 1366px) and (min-height: 1024px) and (orientation: landscape) { .pagina-single-progetto section.sezione-altri-progetti .text h3 { font-size: 14rem; line-height: 9rem; } } @media only screen and (min-device-width: 1281px) and (max-width: 1920px) and (max-device-height: 1080px) { .pagina-single-progetto section.sezione-altri-progetti .text h3 { line-height: 15rem; } } @media only screen and (min-device-width: 1440px) and (max-device-width: 1440px) and (min-device-height: 900px) and (max-device-height: 900px) and (-webkit-min-device-pixel-ratio: 2) { .pagina-single-progetto section.sezione-altri-progetti .text h3 { line-height: 11rem; } } @media only screen and (min-width: 1025px) and (max-width: 1280px) and (max-device-height: 720px) { .pagina-single-progetto section.sezione-altri-progetti .text h3 { line-height: 16rem; } } .pagina-single-progetto section.sezione-altri-progetti .lista-progetti { position: relative; width: 86vw; margin: 0 auto; } .pagina-single-progetto section.sezione-altri-progetti .lista-progetti .row { display: flex; justify-content: space-between; } .pagina-single-progetto section.sezione-altri-progetti .lista-progetti .row .image { position: relative; margin-bottom: 5vw; overflow: hidden; flex-basis: 38vw; } .pagina-single-progetto section.sezione-altri-progetti .lista-progetti .row .image.image--1 { position: relative; margin-top: -13.5vw; } .pagina-single-progetto section.sezione-altri-progetti .lista-progetti .row .image.image--2 { position: relative; margin-bottom: 10vw; } .pagina-single-progetto section.sezione-altri-progetti .lista-progetti .row .image a:hover .image__wrapper .image__container { -webkit-transform: scale(1.08); -moz-transform: scale(1.08); -ms-transform: scale(1.08); transform: scale(1.08); } .pagina-single-progetto section.sezione-altri-progetti .lista-progetti .row .image a .project-title { margin-bottom: 0.25rem; } .pagina-single-progetto section.sezione-altri-progetti .lista-progetti .row .image a .image__wrapper { position: relative; width: 38vw; height: 38vw; overflow: hidden; } .pagina-single-progetto section.sezione-altri-progetti .lista-progetti .row .image a .image__wrapper .image__container { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); transform: scale(1); -webkit-transition: transform 0.8s ease-out 0s; -moz-transition: transform 0.8s ease-out 0s; -o-transition: transform 0.8s ease-out 0s; transition: transform 0.8s ease-out 0s; } footer { position: relative; margin-top: -1px; } footer p { font-size: 13px; line-height: 20px; color: #fff;} @media only screen and (min-device-width: 0px) and (max-device-width: 1023px) { footer p { font-size: 1.2rem; line-height: 1.4rem; } } footer a { font-size: 1.3rem; line-height: 1.6rem; color:#fff /*background: linear-gradient(to right, #ebdb9c, #e8ba50 50%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;*/ } @media only screen and (min-device-width: 0px) and (max-device-width: 1023px) { footer a { font-size: 1.2rem; line-height: 1.4rem; } } footer .prefooter { position: relative; } footer .prefooter .prefooter__container { position: relative; display: flex; align-items: center; justify-content: center; padding: 17.5rem 0; } @media only screen and (min-device-width: 0px) and (max-device-width: 1023px) { footer .prefooter .prefooter__container { padding: 2.5rem 0 5rem 0; flex-direction: column; } } footer .prefooter .prefooter__container .hashtag { flex-basis: 50%; width: 50%; text-align: center; } @media only screen and (min-device-width: 0px) and (max-device-width: 1023px) { footer .prefooter .prefooter__container .hashtag { width: auto; margin-bottom: 1.25rem; } } footer .cta { width: 20rem; } @media only screen and (min-device-width: 0px) and (max-device-width: 1023px) { footer .cta { width: 90vw; } footer .cta .cta-rect { width: 100%; } } footer .cta p { font-size: 1rem; } @media only screen and (min-device-width: 0px) and (max-device-width: 1023px) { footer .cta p { font-size: 0.8rem; } } footer .cta-stroke { width: 20rem; margin-top: 2.5rem; } @media only screen and (min-device-width: 0px) and (max-device-width: 1023px) { footer .cta-stroke { width: 100%; margin-top: 1.25rem; } } footer .description { width: 45vw; margin-bottom: 1.25rem; } footer .titoletto { position: relative; margin-bottom: 0.625rem; } footer .titoletto p { font-weight: 700; background: linear-gradient(to right, #ebdb9c, #e8ba50 50%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-size: 15px; } footer .email { margin-bottom: 0.5rem; } footer .email a { font-size: 3rem; } @media only screen and (min-device-width: 0px) and (max-device-width: 1023px) { footer .email a { font-size: 2.4rem; } } @media only screen and (min-width: 768px) and (max-width: 1024px) and (min-height: 600px) and (max-height: 1024px) and (orientation: landscape) { footer .email a { font-size: 3rem; } } @media only screen and (min-width: 1024px) and (max-width: 1366px) and (min-height: 1024px) { footer .email a { font-size: 3rem; } } footer .footer__container { /*background-color: #184535;*/ padding-top: 10rem; padding-bottom: 2.5rem; background: url(../images/AAryan-flower-bg.png) #184535; background-size: 50%; background-position: right; background-repeat: no-repeat; } @media only screen and (min-device-width: 0px) and (max-device-width: 1023px) { footer .footer__container { padding-top: 5rem; padding-bottom: 2.5rem; } } @media only screen and (min-width: 768px) and (max-width: 1024px) and (min-height: 600px) and (max-height: 1024px) and (orientation: landscape) { footer .footer__container { padding-top: 5rem; padding-bottom: 1.25rem; } } @media only screen and (min-width: 1024px) and (max-width: 1366px) and (min-height: 1024px) { footer .footer__container { padding-top: 5rem; padding-bottom: 1.25rem; } } @media only screen and (min-device-width: 1440px) and (max-device-width: 1440px) and (min-device-height: 900px) and (max-device-height: 900px) and (-webkit-min-device-pixel-ratio: 2) { footer .footer__container { padding-top: 7.5rem; } } footer .footer__wrapper { position: relative; width: calc(100vw - 7.5rem); margin: 0 auto; } @media only screen and (min-device-width: 0px) and (max-device-width: 1023px) { footer .footer__wrapper { width: 90vw; } } @media only screen and (min-width: 768px) and (max-width: 1024px) and (min-height: 600px) and (max-height: 1024px) and (orientation: landscape) { footer .footer__wrapper { width: 95vw; } } @media only screen and (min-width: 1024px) and (max-width: 1366px) and (min-height: 1024px) { footer .footer__wrapper { width: 95vw; } } footer .footer__wrapper .flex-container { display: flex; justify-content: space-between;gap:50px } footer .footer__wrapper .flex-container.align-end { align-items: flex-end; } footer .footer__wrapper .flex-container.flex-container--top .flex-item--right { display: flex; flex-direction: column; align-items: flex-end; } @media only screen and (min-device-width: 0px) and (max-device-width: 1023px) { footer .footer__wrapper .flex-container.flex-container--top .flex-item--right { display: none; } } footer .footer__wrapper .flex-container.flex-container--center { margin-top: 0rem; margin-bottom: 10rem; } footer .footer__wrapper .flex-container.flex-container--center .sede.sede--top { margin-bottom: 3.75rem; } footer .footer__wrapper .flex-container.flex-container--center .sede .indirizzo p { line-height: 1.8rem; } footer .footer__wrapper .flex-container.flex-container--center .sede .gm { margin-top: 0.25rem; } footer .footer__wrapper .flex-container.flex-container--center .sede .gm:hover .underscore span { width: 100%; } footer .footer__wrapper .flex-container.flex-container--center .sede .gm .gm__wrapper { position: relative; display: inline-block; } footer .footer__wrapper .flex-container.flex-container--center .sede .gm .gm__wrapper a { font-weight: 700; font-size: 1.1rem; } footer .footer__wrapper .flex-container.flex-container--center .sede .gm .underscore { position: absolute; left: 0; top: 100%; height: 1px; width: 100%; } footer .footer__wrapper .flex-container.flex-container--center .sede .gm .underscore span { -webkit-transition: all 0.3s ease-in-out 0s; -moz-transition: all 0.3s ease-in-out 0s; -o-transition: all 0.3s ease-in-out 0s; transition: all 0.3s ease-in-out 0s; position: absolute; left: 0; top: 0; width: 0%; height: 100%; background-color: #e8ba50; } @media only screen and (min-device-width: 0px) and (max-device-width: 1023px) { footer .footer__wrapper .flex-container.flex-container--center { margin-top: 2.5rem; margin-bottom: 2.5rem; } } @media only screen and (min-device-width: 0px) and (max-device-width: 1023px) { footer .footer__wrapper .flex-container.flex-container--bottom .flex-item.flex-item--left .cta .cta-rect .cta-rect__bg { opacity: 0; } } @media only screen and (min-device-width: 0px) and (max-device-width: 1023px) { footer .footer__wrapper .flex-container.flex-container--bottom .flex-item.flex-item--right { display: none; } } footer .footer__wrapper .description-mobile { position: relative; margin: 5rem auto 0 auto; width: 90vw; } footer .footer__wrapper .cta-mobile { margin-top: 2.5rem; } footer .footer__wrapper .cta-mobile.cta-stroke { margin-top: 1.25rem; } footer .footer__wrapper .bottom-mobile { position: relative; width: 90vw; margin: 7.5rem auto 0 auto; text-align: center; } footer .footer__wrapper .bottom-mobile p { font-size: 0.8rem; } footer .footer__wrapper .bottom-mobile a { font-size: 0.8rem; } footer .footer__wrapper .bottom-mobile span { font-size: 0.8rem; } footer .footer__wrapper .bottom-mobile .bottom-mobile__wrapper { position: relative; width: 100%; display: flex; align-items: flex-end; justify-content: space-between; } header .header__wrapper .logo img{ width: 200px; padding: 20px } .intro-text .top img{ width: 200px; margin-bottom: 30px } .project-tagline { width: 400px; margin: 100px auto 0; } .about-project{ font-size: 18px; line-height: 30px; width: 800px; margin: 30px auto 150px; text-align: center; background: linear-gradient(to right, #ebdb9c, #e8ba50 50%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .image-detail { font-size: 14px; line-height: 24px; text-align: justify; /*background: linear-gradient(to right, #ebdb9c, #e8ba50 50%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;*/ color:#fff } .main-title{ font-size: 30px; margin-bottom: 30px; background: linear-gradient(to right, #ebdb9c, #e8ba50 50%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; line-height: 30px; } .description-detail{ width: 30vw } .mt-40{ margin-top: 40px } .mt-100{ margin-top: 100px } .font-60{ font-size: 60px !important } .line-height-70{ line-height: 70px !important } .gallery-sec { margin-top: 30px; } .gallery-section{ position: absolute; left: 0; top: 11%; right: 0; text-align: center; } section.sezione-video.open-video-btn:after { position: absolute; content: ''; width: 100%; height: 100%; background: rgba(0,0,0,0.2); top: 0; left: 0; display: block; } .homepage-banner .js-resize-container img{ height: 100vh; width: 100% !important } .aaryan-logo{ width: 400px; margin-bottom: 30px; } /* =================================== 2. Menu CSS ====================================== */ #header-main-menu { padding-left: 0px; padding-right: 60px; width: 40%; display: inline-block; vertical-align: top; } #header-main-menu.no-right-text { width: 100%; } .main-menu.sm-clean { background-color: transparent; display: inline-block; max-width: 90%; } .sm ul { padding-left: 0; } .sm-clean a { position: relative; } .sm-clean a, .sm-clean a:hover, .sm-clean a:focus, .sm-clean a:active { background: linear-gradient(to right, #ebdb9c, #e8ba50 50%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; padding: 5px 0; font-size: 25px; line-height: 35px; font-weight: 500; } .sm-clean > li > a:after { content: ''; display: block; width: 0; height: 15px; background-color: #31594b; transition: width .3s; position: absolute; left: 30px; bottom: 12px; z-index: -1; } .sm-clean a.current:after, .sm-clean a:hover:after, .sm-clean ul a:hover:after { width: 100%; } .sm-clean a span.sub-arrow { color: #acacac; font-size: 45px !important; left: -42px; } .sm-clean a span.sub-arrow:before { display: block; content: '\203A'; transform: rotate(90deg); } .sm-clean a.highlighted span.sub-arrow:before { display: block; content: '\203A'; transform: rotate(270deg) translateY(-3px); margin-left: -4px; } .sm-clean .sub-menu li a, .sm-clean .children li a { color: #bbbbbb; text-transform: uppercase; font-size: 15px; line-height: 10px; padding: 10px 0; letter-spacing: 0.5px; font-weight: 400; } .sm-clean .sub-menu li a:hover, .sm-clean .sub-menu li a.current, .sm-clean .children li a:hover, .sm-clean .children li a.current { color: #fff; } .menu-background-image { position: absolute; z-index: -1; top: 38px; } .menu-left-part { background: url(../images/AAryan-flower-bg.png) #000; background-repeat: no-repeat; background-size: contain; background-position: right; } .menu-left-part { position: fixed; width: 100%; height: 100vh; background-color: #191919; overflow-y: auto; overflow-x: hidden; z-index: 998; top: 0; left: calc(-100% - 100px); transition: .4s left cubic-bezier(0.22, 0.61, 0.36, 1); padding-left: 150px; padding-top: 0; } .menu-left-part > * { position: relative; top: 40%; transform: translateY(-40%); } .menu-left-part.open { left: 0; } .menu-right-part { position: fixed; width: 0; left: 0px; top: 0; z-index: 999; transition: 0.2s left cubic-bezier(0.22, 0.61, 0.36, 1), 0s 0.2s background linear; height: 100%; overflow: visible; } .menu-right-part.open a { color: black; } #header-main-menu .search-field { font-family: 'Poppins', sans-serif; max-width: 480px; width: 90%; color: #fff; padding: 0; margin-top: -3px; font-size: 50px; line-height: 110%; font-weight: 800; background-color: transparent; border: none; border-bottom: 5px solid transparent; text-align: left; transition: border 0.4s ease; -webkit-appearance: none; } #header-main-menu .search-field::-ms-clear { display: none; width: 0; height: 0; } #header-main-menu .search-field::-ms-reveal { display: none; width: 0; height: 0; } #header-main-menu .search-field::-webkit-search-decoration, #header-main-menu .search-field::-webkit-search-cancel-button, #header-main-menu .search-field::-webkit-search-results-button, #header-main-menu .search-field::-webkit-search-results-decoration { display: none; } #header-main-menu .search-field:focus { border-bottom: 5px solid #31594b; } #header-main-menu .search-field::-webkit-input-placeholder { font-family: 'Poppins', sans-serif; color: #ffffff; padding: 5px 0; font-size: 50px; line-height: 110%; font-weight: 800; opacity: 1; text-align: left; } #header-main-menu .search-field::-moz-placeholder { font-family: 'Poppins', sans-serif; color: #ffffff; padding: 5px 0; font-size: 50px; line-height: 110%; font-weight: 800; opacity: 1; text-align: left; } #header-main-menu .search-field:-ms-input-placeholder { font-family: 'Poppins', sans-serif; color: #ffffff; padding: 5px 0; font-size: 50px; line-height: 110%; font-weight: 800; opacity: 1; text-align: left; } #header-main-menu .search-field:-moz-placeholder { font-family: 'Poppins', sans-serif; color: #ffffff; padding: 5px 0; font-size: 50px; line-height: 110%; font-weight: 800; opacity: 1; text-align: left; } .menu-text { font-weight: 100; font-size: 18px; line-height: 30px; color: #fff; text-align: justify; letter-spacing: 0.5px; } .menu-right-text .menu-text a { color: #31594b; } .menu-right-text .menu-text a:hover { color: #acacac; } p.menu-text-title { color: #31594b; font-size: 13px; letter-spacing: 5px; font-weight: 700; padding-bottom: 30px; margin-bottom: 0; } .menu-right-text { display: inline-block; width: 45%; vertical-align: top; padding-top: 0px; color: #fff; } .menu-right-text a { color: #fff; } .logo-holder { line-height: 0; font-size: 0; } .logo-holder img { max-width: 100%; max-height: 100%; width: 100%; height: auto; } .toggle-holder { /*bottom: 35px; position: absolute; width: 70px; height: 70px;*/ top: 35px; position: fixed; width: 70px; height: 70px; right: 0; } #toggle { height: 70px; position: relative; transition: transform .3s linear; background-color: #31594b; } .open #toggle, .done #toggle { background-color: transparent; } #toggle:hover { cursor: pointer; } #toggle:before, #toggle:after { content: ''; height: 3px; width: 0; background: #fbefb1; left: 22px; position: absolute; transform-origin: 50% 50%; transition: all 0.25s; top: 35px; } #toggle:before { transform: translate3d(0, -8px, 0px); } #toggle:hover:before { margin-left: 9px; } #toggle.on:before { transform: rotate3d(0, 0, 1, 45deg) translate3d(0, 0, 0); background-color: #fbefb1; margin-left: 0; width: 26px !important; } #toggle.on:after { transform: rotate3d(0, 0, 1, -45deg); background-color: #fbefb1; width: 26px !important; } #toggle:after { transform: translate3d(0, 8px, 0); } #toggle .menu-line { width: 0; height: 3px; background: #fbefb1; left: 22px; position: absolute; transition: all 0.25s; top: 35px; } #toggle.all-loaded .menu-line { width: 13px; } #toggle.all-loaded:before { width: 21px; } #toggle.all-loaded:after { width: 30px; } #toggle:hover .menu-line { margin-left: 17px; } #toggle.on .menu-line { opacity: 0; } .aranyan-menu-logo img{ width: 180px } .aranyan-menu-logo { top: 47px; transform: none; } .main-menu li{ margin-bottom: 10px } .whatsapp { right: 8px; position: fixed; z-index: 9; bottom: 20px; background: #184535; width: 60px; height: 60px; border-radius: 100px; } .whatsapp a { color: #fbefb1; /*-webkit-text-fill-color: antiquewhite !important;*/ } .whatsapp i { text-align: center; margin: 0 auto; display: block; line-height: 60px; font-size: 30px; color: #fbefb1; } .menu-right-part .header-logo{ opacity: 0 } .menu-right-part.open.done .header-logo{ opacity: 1 } .menu-right-part .header-logo{ position: absolute; top: 35px; left: 0; } .menu-right-part .header-logo img{ max-width: none; max-height: none; width: 95px; height: 120px; } a.socail-text { margin-right: 15px; font-size: 13px; letter-spacing: 1px; font-weight: 700; /* background: linear-gradient(to right, #ebdb9c, #e8ba50 50%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;*/ color:#111 } .rera-no { font-size: 12px; line-height: 20px; margin-top: 10px; /* background: linear-gradient(to right, #ebdb9c, #e8ba50 50%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;*/ color:#111 } .mt-10{ margin-top: 10px } .footer .description p{ font-size: 17px; line-height: 25px; text-align: justify; } .doc-loader { position: fixed; left: 0px; top: 0px; width: 100%; height: 100%; z-index: 99999; /*background-color: #fff;*/ background: url(../images/Arnayam_Logo_loader.gif) #3c614e; background-repeat: no-repeat; background-position: center; background-size: 20%; } .doc-loader img { width: 100px; height: 100px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .compubrain img{ width: auto; display: inline; top: 4px; position: relative; } .cta .cta-rect .cta-rect__bg.green{ background-color: #31594b; opacity: 1; } .home.header-bloccato .whatsapp{ display: none } .sezione-3 .titoletto p{ font-size: 25px; width: 400px } .gallery-more-btn{ margin: 0 auto; text-align: center; left: 46%; right: 0; position: relative; top: 128px; } .iframe-view-btn{ position: absolute; z-index: 9; margin: 0 auto; text-align: center; left: 45%; right: 0; top: 10%; display: flex } .wapper-client { width: 100%; display: flex; flex-wrap: wrap; margin-top: 50px; justify-content: center; /* padding-left: 25px;*/ } .logo-box { position: relative; /* border: 1px solid #fff; */ width: 20%; border-radius: 0px; display: flex; text-align: center; align-items: center; padding: 15px; min-height: 170px; margin: 0px; overflow: hidden; /* background: #333; */ } .logo-box .logo-box-inner { width: 180px; margin: 0 auto; } .logo-box-inner img { width: 100px; margin: 0 auto; /* background: linear-gradient(to right, #ebdb9c, #e8ba50 50%); border-radius: 100%;*/ } .logo-box-inner h4 { font-size: 15px; margin-top: 0px; font-weight: 400; line-height: 20px; /* color:#fff;*/ /* background: linear-gradient(to right, #ebdb9c, #e8ba50 50%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;*/ padding: 0 0 10px 0 } .pagina-progetti .inner-title{ width: auto; text-align: center; padding-bottom: 20px; } .logo-box:nth-child(odd) { background: #f1f1f1; } .logo-box:nth-child(even) { background: #f9f9f9; } .pb-8{ padding-bottom: 8rem !important; } .specification-sec .logo-box { position: relative; border-bottom: 1px solid #184535 ; width: 29%; margin: 22px; background: #f3f3f3; border-radius: 10px; } .specification-sec .logo-box-inner img{ background: none; border-radius: 0; width: 80px; margin-top: 20px; /* filter: invert(1) brightness(0);*/ margin-bottom: 20px; } .specification-sec .logo-box .logo-box-inner { width: auto; margin: 0 auto; } .specification-sec .logo-box .logo-box-inner p{ text-align: left; font-size: 14px; line-height: 20px; font-weight: normal; } .specification-sec .logo-box-inner h4{ font-weight: 400; font-size: 18px; } .specification-sec .logo-box-inner h4{ /* background: linear-gradient(to right, #ebdb9c, #e8ba50 50%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;*/ } .contact-form{ width: 60%; margin: 0 auto; } .contact-form form p { margin-top: 0; } .contact-form form .input-group.active label { color: #6a32b9; } .contact-form form .input-group { margin-top: 2em; } .contact-form form .input-group textarea { height: 7em; } .contact-form form .input-group input[type=text], .contact-form form .input-group input[type=email], .contact-form form .input-group textarea,textarea{ border: none; font-size: 18px; padding: 1em 0; border-bottom: 1px solid #184535; width: 100%; transition: all 0.5s ease-out; font-family: 'Poppins', sans-serif; } .contact-form form .input-group input[type=text]:focus, .contact-form form .input-group input[type=email]:focus, .contact-form form .input-group textarea:focus { outline: none; border-bottom: 1px solid rgb(232, 186, 80); } .contact-form form .input-group input[type=text]:disabled, .contact-form form .input-group input[type=email]:disabled, .contact-form form .input-group textarea:disabled { border-bottom: 1px solid rgb(232, 186, 80); cursor: not-allowed; } .contact-form form .input-group .warning { font-size: 10px; padding-bottom: 2em; } .contact-form form .btn { margin-top: 1em; background-color: #5e7ff5; color: white; padding: 0.5em 1em; border-radius: 3px; box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.2), 0 2px 10px 0 rgba(0, 0, 0, 0.2); } .contact-form form .btn:hover { cursor: pointer; background-color: #5b97ff; box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.4), 0 4px 20px 0 rgba(0, 0, 0, 0.2); } .contact-form form .btn:active { background-color: #5e7ff5; } /* .contact-form form label { font-weight: 600; font-size: 1rem; line-height: 1rem; opacity: 0.7; color: #fff; background: linear-gradient(to right, #ebdb9c, #e8ba50 50%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }*/ .form-btn{ border: none; border-radius: 50px; padding: 20px 60px; font-size: 15px; cursor: pointer; background: #191919; color: #fff; margin-top: 15px; } .contact-page .contact-form { width: 100%; } .contact-page .flex-container{ display: flex; justify-content: center; align-items: center; } .contact-page .flex-item{ width: 50%; } .my-info a{ color:#111 } .rera-no{ font-size: 12px; line-height: 20px; margin-top: 30px; /* background: linear-gradient(to right, #ebdb9c, #e8ba50 50%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;*/ color:#111 } span.padlft{ padding-left: 45px; } .my-info i { width: 35px; height: 28px; border-radius: 100px; margin: 0 auto; line-height: 35px; text-align: center; margin-right: 10px; } .my-info a{ color:#111 } body .rera-no{ font-size: 13px; /*margin-bottom: 0;*/ line-height: 23px; margin-top: 30px; /*background: linear-gradient(to right, #ebdb9c, #e8ba50 50%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;*/ color:#111 } footer .rera-no{ color:#fff } .my-info span { color: #adadad; } .my-info{ margin-bottom: 20px; font-size: 18px; line-height: 28px; } .gallery-sec .row__wrapper{ justify-content: center !important; align-items: center; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; } .gallery-sec .row__wrapper .project--1 { margin: 0 !important; flex: 0 0 33.333333%; max-width: 33.333333%; width: 100% !important; flex-basis: unset !important; display: block !important; margin-bottom: 30px !important; padding-right: 15px; padding-left: 15px; position: relative } .gallery-sec .project.project--1 a{ position: relative } .gallery-sec .row__wrapper .project .project-title{ position: absolute; z-index: 1; background: #1845356b; padding: 15px !important; bottom: 0; width: 92%; text-align: center; } .gallery-sec .project-title p{ font-size: 15px; color:#fff } .gallery-sec .row__wrapper .project--1 .image__wrapper { width: auto !important; height: auto !important; } .about-page{ display: flex; justify-content: center; text-align: center; margin: 0 auto; align-items: center; } .about-img{ margin: 0 auto; width: 500px; } @-webkit-keyframes spinnerRotate{from{-webkit-transform:rotate(0)}to{-webkit-transform:rotate(360deg)}}@-moz-keyframes spinnerRotate{from{-moz-transform:rotate(0)}to{-moz-transform:rotate(360deg)}}@-ms-keyframes spinnerRotate{from{-ms-transform:rotate(0)}to{-ms-transform:rotate(360deg)}}#form_process{-webkit-animation-name:spinnerRotate;-webkit-animation-duration:1.1s;-webkit-animation-iteration-count:infinite;-webkit-animation-timing-function:linear;-moz-animation-name:spinnerRotate;-moz-animation-duration:1.1s;-moz-animation-iteration-count:infinite;-moz-animation-timing-function:linear;-ms-animation-name:spinnerRotate;-ms-animation-duration:1.1s;-ms-animation-iteration-count:infinite;-ms-animation-timing-function:linear;display:inline-block;margin-left:10px;position:relative;visibility:hidden} #error_data{ color: red; font-size: 14px; margin: 0px 0px 10px; line-height: normal; } .alert.alert-success { color: #508e14; background: #f0f0f0; padding: 10px 15px; font-weight: 700; letter-spacing: 0.5px; line-height: 28px; } .alert.alert-danger { color: #454545; background-color: #ffb4b4; padding: 10px 15px; font-weight: 700; letter-spacing: 0.5px; line-height: 28px; } .about-page .about-project{ font-size: 18px; line-height: 30px; width: 800px; margin: 0px auto 50px; text-align: justify; background: linear-gradient(to right, #ebdb9c, #e8ba50 50%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; padding: 50px; } .homepage section.sezione-5 { padding-bottom: 10rem; padding-top: 10rem; } .homepage .scroll-down{ opacity: 1 !important; visibility: visible !important; } .homepage .scroll-down .scroll-down__wrapper{ transform: unset !important; opacity: 1 !important; visibility: visible !important; } .homepage section.sezione-top .slider .slider__box .box__bg, .homepage .slider .slider__box .contatore{ display: none; } .homepage section.sezione-top .slider.scroll-enabled .slider__box { width: 100%; height: 100%; bottom: 40%; } .homepage-banner .box__wrapper .control.next { right: 30px !important; left: unset !important; } .homepage-banner .box__wrapper .control.prev { left: 30px !important; } .homepage-banner .box__wrapper .control{ background: #184535; } /* .homepage-banner .svg-circle-border { stroke: #31594b; } .homepage-banner.svg-circle { stroke: #31594b; } .homepage-banner .svg-arrow { fill: #31594b; } .homepage-banner .svg-circle-stroke { stroke: #31594b; }*/ .sezione-3 .slider .slider__box .contatore{ display: inline-flex; } .home-abt-sec{ margin-top: 0; } .homepage section.home-abt-sec .slider__box { height: calc(65vw * 9 / 16 + 0rem); } .homepage section.sezione-3 { margin-top: 10rem; } header .header__wrapper .logo a{ display: inline-block } .text-center{ text-align: center } .legal{ text-align: center } .intro-text p{ color: #fff } .inner-title .medium-text{ text-transform: uppercase; color: #184535 } .slide-text__wrapper .titoletto .main-title{ font-size: 4rem !important; line-height: 4.6rem !important; margin-bottom: 40px; font-weight: normal !important; } .img-area{ width: 1170px; margin: 2% auto; } .single-img { position: relative; width: 30%; float: left; margin: 0 1%; } .image { display: block; width: 100%; height: auto; } .img-overlay { position: absolute; bottom: 0; left: 0; right: 0; background-color: #184535; overflow: hidden; width: 100%; height: 0; transition: .5s ease; } .single-img:hover .img-overlay { height: 100%; } .text { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); color: #fff; text-transform: none; letter-spacing: 0; font-weight: bold; width: 100%; padding: 0 20px; } .text span{ font-weight: 300; } html.has-scroll-smooth{ overflow: visible; position: relative; } .has-scroll-smooth body{ overflow: visible } #scrollable{ transform: none !important } .brochure-btn a b{ display: block } .no-padding-top{ padding-top: 0 !important } .sezione-listing.amenities{ padding-top: 70px } .sezione-listing.specifications{ padding-top: 70px } footer .footer__container{ padding-top: 5rem } .cta .cta-rect .cta-rect__wrapper .cta-rect__txt p{ font-size: 13px } footer a{ font-size: 13px; } .homepage section.sezione-3 { margin-top: 5rem; } @media only screen and (min-device-width: 1366px) and (max-device-width: 1366px) and (max-device-height: 768px) { footer p { font-size: 15px; } footer p a{ font-size: 15px; } footer .cta { width: 11rem; } } .sezione-hero{ position: relative } .sezione-hero:after{ position: absolute; top:0; left: 0; background: rgba(0,0,0,0.3); width: 100%; height: 100%; content: ''; } footer .gm{ margin-top: 10px } .video-section{ padding-top: 70px; padding-left: 40px; padding-right: 40px } .video-section iframe{ border-radius: 10px } @media (min-width: 1920px) and (max-width: 5000px) { .gallery-sec .project.project--1 iframe{ height: 284px } }