/* CSS FRAMEWORK versione 4.0 by Newwave srl - http://www.newwwave-media.it/ ------------------------------------------------------------- ------------------------------------------------------------- background-image: url(../img/xxx.png); _background-image: url(../common/img/transparent.gif); _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="common/img/xxx.png", sizingMethod="crop"); background-repeat: no-repeat; */ html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, hgroup, menu, nav, section, menu, time, mark, audio, video { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; } article, aside, figure, footer, header, hgroup, nav, section { display: block; } nav ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } a { margin: 0; padding: 0; font-size: 100%; vertical-align: baseline; background: transparent; } ins { background-color: #ff9; color: #000; text-decoration: none; } mark { background-color: #ff9; color: #000; font-style: italic; font-weight: bold; } del { text-decoration: line-through; } abbr[title], dfn[title] { border-bottom: 1px dotted #000; cursor: help; } table { border-collapse: collapse; border-spacing: 0; } hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; } input, select { vertical-align: middle; } pre { padding: 15px; white-space: pre; /* CSS2 */ white-space: pre-wrap; /* CSS 2.1 */ white-space: pre-line; /* CSS 3 (and 2.1 as well, actually) */ word-wrap: break-word; /* IE */ } /* align checkboxes, radios, text inputs with their label */ input[type="radio"] { vertical-align: text-bottom; } input[type="checkbox"] { vertical-align: bottom; width: auto !important; } .ie6 input { vertical-align: text-bottom; } /* hand cursor on clickable input elements */ label, input[type=button], input[type=submit], button { cursor: pointer; } :focus { outline: 0; } /* bicubic resizing for non-native sized IMG:*/ .ie7 img { -ms-interpolation-mode: bicubic; } .clearer { visibility: hidden; display: block; font-size: 0; clear: both; height: 0; } /* Heading kerning pairs and ligatures */ h1, h2, h3 { text-rendering: optimizeLegibility; } /* END RESET CSS */ #infocontent { width: 100px; height: 100px; position: absolute; top: -900px; left: -900px; font-weight: normal; font-style: normal; text-decoration: none; font-size: 10px; } #infocontent ul li { list-style-type: none; } #infocontent h3 a, #infocontent ul li a { font-size: 10px; font-weight: normal; font-style: normal; text-decoration: none; } /* -------- STILI PROGETTO ------- */ :root { /* #D48F94 */ --root-color: 212, 143, 148; --main: rgba(var(--root-color), 1); } ::selection { background: var(--main); color: #fff; } ::-moz-selection { background: var(--main); color: #fff; } #loader { width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: 10000; background-color: #fff; opacity: 1; -webkit-transform: translateZ(0); -moz-transform: translateZ(0); -ms-transform: translateZ(0); -o-transform: translateZ(0); transform: translateZ(0); -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; backface-visibility: hidden; transition: all 600ms; -moz-transition: all 600ms; -webkit-transition: all 600ms; -o-transition: all 600ms; } #loader.nascosto { opacity: 0; z-index: -100; } #privacySlider { background-color: #a1a1a1; color: #fff; position: fixed; z-index: 1000; width: 100%; text-align: left; text-decoration: none; overflow: hidden; bottom: 0; height: auto; min-height: 30px; -webkit-backface-visibility: hidden; backface-visibility: hidden; font-style: normal; line-height: 150%; font-size: 13px; font-variant: normal; border-radius: 0; padding: 15px 70px 15px 15px; display: none; } #privacySlider a { color: #fff; text-decoration: underline; font-weight: bold; } #privacySlider a:hover { text-decoration: none; } #privacySlider a#cookieBtn { text-decoration: none; text-transform: uppercase; padding: 5px; display: inline-block; color: #fff; position: absolute; bottom: 13px; right: 10px; font: bold 14px Arial; } #privacySlider a#cookieBtn:hover { color: #333; } @font-face { font-family: 'Chronicle Display'; src: url('../fonts/ChronicleDisplay-LightItalic.eot'); src: url('../fonts/ChronicleDisplay-LightItalic.eot?#iefix') format('embedded-opentype'), url('../fonts/ChronicleDisplay-LightItalic.woff2') format('woff2'), url('../fonts/ChronicleDisplay-LightItalic.woff') format('woff'), url('../fonts/ChronicleDisplay-LightItalic.ttf') format('truetype'); font-weight: 300; font-style: italic; font-display: swap; } @font-face { font-family: 'Chronicle Display'; src: url('../fonts/ChronicleDisplay-Roman.eot'); src: url('../fonts/ChronicleDisplay-Roman.eot?#iefix') format('embedded-opentype'), url('../fonts/ChronicleDisplay-Roman.woff2') format('woff2'), url('../fonts/ChronicleDisplay-Roman.woff') format('woff'), url('../fonts/ChronicleDisplay-Roman.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; } body { font-family: "Poppins", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; font-weight: 300; font-size: 16px; color: #444; -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; -moz-font-smoothing: antialiased; -o-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } html, body { height: 100%; } body.noscroll { overflow: hidden; } .srf { font-weight: 400; font-family: 'Chronicle Display', serif; } a, a:hover, a:focus, a:active { color: inherit; text-decoration: none; outline: 0; } img:not([src]) { visibility: hidden; /* nascondo bordo su img senza 'src' */ } .figure, .img-full { position: relative; width: 100%; height: auto; display: block; } .img-cover, .img-contain { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block; object-fit: cover; pointer-events: none; } .img-contain { object-fit: contain; } .btn { color: #fff; border-radius: 0; border: 1px solid #fff; padding: 10px 36px; font-size: 13px; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; background-color: transparent; } .btn:hover, .btn:focus { color: #444; border-color: #fff; background-color: #fff; box-shadow: none; } .btn-out { color: #666; border-color: #aaa; background-color: #fff; } .btn-out:hover, .btn-out:focus { color: #fff; border-color: #aaa; background-color: #aaa; } .btn-inline { position: relative; color: #666; padding: 40px 56px 40px 50px; font-size: 13px; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; display: inline-block; } .btn-inline::before { content: ""; position: absolute; top: 50%; left: 0; height: 1px; width: 40px; display: block; background-color: #666; will-change: width; transition: width 1s cubic-bezier(0.75, 0, 0, 1); } .btn-inline:hover::before { width: 56px; } .btn-inline span { position: relative; z-index: 2; left: 0; display: inline-block; white-space: nowrap; will-change: transform; transition: transform 1s cubic-bezier(0.75, 0, 0, 1); } .btn-inline:hover span { transform: translateX(25px); } .btn-inline::after { content: ""; position: absolute; right: 0; top: 50%; width: 86px; height: 86px; transform: translateY(-50%) rotate(10deg); will-change: transform; background: url(../img/btn-inline.png) no-repeat center / contain; transition: transform 1s cubic-bezier(0.75, 0, 0, 1); } .btn-inline:hover::after { transform: translateY(-50%) rotate(20deg); } .collapse-btn { font-weight: 500; margin-top: 60px; display: inline-block; text-decoration: underline; } /* -------- HEADER ------- */ header { position: fixed; z-index: 100; top: 0; left: 0; width: 100%; color: #444; padding: 12px 0; background-color: #fff; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); will-change: transform, background; transition: transform 1s cubic-bezier(0.75, 0, 0, 1), background 1s cubic-bezier(0.75, 0, 0, 1), padding 1s cubic-bezier(0.75, 0, 0, 1); } header.headroom--pinned { transform: translateY(0%); background-color: #fff; } header.headroom--unpinned { -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); background-color: rgba(0, 0, 0, 0); } header.is-myworld { transform: translateY(0%); background-color: rgba(0, 0, 0, 0); } #brand { width: 65px; height: auto; display: block; } #brand svg { width: 100%; height: auto; fill: #444; } #brand_payoff { /* width: 180px; */ max-width: 40vw; height: auto; display: block; } #brand_payoff svg { width: 100%; height: auto; fill: #444; } #hamburger { width: 32px; height: auto; display: block; padding: 3px; margin-left: auto; } #hamburger span { width: 75%; height: 2px; display: block; background-color: #444; transition: background 360ms ease-in-out; } #hamburger span + span { width: 100%; margin-top: 6px; } .aside, .aside-panel { display: none; } /* -------- DRAWER ------- */ #drawer {/* opacity: 0;*/ opacity: 1 !important; pointer-events: none; position: fixed; top: 0; left: 0; z-index: 101; width: 100%; height: 100%; display: block; overflow: hidden; color: #000; background-color: #fff; transition: all 520ms cubic-bezier(0.4, 0, 0.2, 1); clip-path: inset(0 100% 0 0); } #drawer.in {/* opacity: 1 !important;*/ pointer-events: all; clip-path: inset(0 0 0 0); } #drawer .drawer-bg { display: none; } #drawer .drawer-wrapper { opacity: 0; position: relative; width: 100%; height: 100%; overflow-y: auto; transition: all 520ms cubic-bezier(0.79, 0.07, 0.2, 1) 280ms; } #drawer.in .drawer-wrapper { opacity: 1; } #drawer .drawer-header { padding: 20px 0; min-height: 70px; } #drawer_brand { width: 120px; height: auto; display: block; } #drawer_brand svg { width: 100%; height: auto; display: block; } #drawer_brand .brand-h { fill: #cac9c9; } #drawer_brand .brand-hoppe { fill: #0072b6; } #hamburger_close { width: 32px; height: 22px; display: block; position: relative; } #hamburger_close span { position: relative; top: 10px; width: 100%; height: 1px; margin: 0; display: block; background-color: #000; transform: rotate(-45deg); transition: all 360ms ease-in-out; } #hamburger_close span:nth-child(2) { transform: rotate(45deg) translateY(-1px); } #drawer .drawer-content { display: flex; flex-direction: column; justify-content: center; padding: 45px 0; min-height: calc(100vh - 115px); } #drawer_navbar { font-size: 22px; text-transform: uppercase; } #drawer_navbar li { position: relative; display: block; margin-bottom: 30px; } #drawer_navbar li:last-child { margin-bottom: 0; } #drawer_navbar li a { padding: 0; position: relative; opacity: 1; display: block; will-change: transform; transition: transform 1s cubic-bezier(0.75, 0, 0, 1); } #drawer_navbar li a:hover { color: var(--main); transform: translateX(25px); } #drawer_navbar li.current_page_item a { color: var(--main); } #drawer_navbar li a::before { content: ""; position: absolute; top: 46%; left: 0; width: 0; height: 1px; background: #000; transition: width 1s cubic-bezier(0.75, 0, 0, 1), transform 1s cubic-bezier(0.75, 0, 0, 1); } #drawer_navbar li a:hover::before { width: 20px; transform: translateX(-25px); background-color: var(--main); } #drawer_navbar li.current_page_item a::before { background-color: var(--main); } #drawer_lang { margin-bottom: 45px; } #drawer_lang li { margin-right: 10px; display: inline-block; } #drawer_lang li a { font-weight: 400; font-size: 16px; line-height: 120%; text-transform: uppercase; } #drawer_lang li a.current { color: var(--main); font-weight: 600; } /* -------- CURSOR ------- */ #cursor { position: fixed; top: 0px; left: 0px; z-index: 1000; contain: layout style size; pointer-events: none; display: none; } #cursor::before { content: ""; position: absolute; top: -15px; left: -15px; font-size: .8181rem; line-height: 1.22; color: #fff; text-align: center; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; text-transform: uppercase; width: 70px; height: 70px; padding: 7px; font-weight: 500; -webkit-transform: scale(0.3); transform: scale(0.3); background-color: rgba(var(--root-color), 0.5); border-radius: 50%; opacity: 1; transition: transform .45s cubic-bezier(0.79, 0, 0.4, 1), opacity .35s ease, background .35s ease; will-change: transform; } #cursor.is-hover::before { transform: scale(1); opacity: 1; background-color: rgba(var(--root-color), 0.85); } #cursor.is-mousedown::before { transition-duration: 0.1s !important; transform: scale(0.85) !important; } #cursor.drag::before { content: "Drag"; } #cursor.link::before { content: var(--cursorCaption, "More"); } #cursor.back::before { background-color: rgba(var(--root-color), 0.35); content: var(--cursorCaption, "More"); } #cursor.play::before { content: "Play"; } #cursor.pause::before { content: "Pause"; } /* -------- PAGE ------- */ .tt { overflow: hidden; } .tt span { position: relative; display: block; } .txt p + p { margin-top: 16px; } .txt ul { margin-left: 20px; } /* -------- HOME ------- */ #heroHome, #hero { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh; min-height: 500px; padding: 0; overflow: hidden; position: relative; color: #fff; background-color: #f5f5f5; clip-path: polygon(0vw 0vw, 100vw 0vw, 100vw 100vh, 0vw 100vh); } #hero.half { height: 50%; max-height: 50vh; padding-bottom: 60px; } #hero { justify-content: flex-end; padding-bottom: 90px; } #heroHome .bg, #hero .bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; pointer-events: none; transform: scale(1); } #heroHome .bg::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(74deg, rgba(0, 0, 0, 0.5) 20%, rgba(0, 0, 0, 0.2) 100%); } #hero .bg::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(74deg, rgba(0, 0, 0, 0.4) 19.14%, rgba(0, 0, 0, 0) 89.89%); } #heroHome .hero-mask, #hero .hero-mask { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0 solid #fff; z-index: 1; pointer-events: none; } #hero .stt { text-transform: uppercase; margin-bottom: 10px; font-size: 20px; letter-spacing: 0.04em; } #heroHome .tt, #hero .tt { font-style: italic; font-weight: 300; font-size: 36px; line-height: 105%; letter-spacing: 0.04em; margin-bottom: 28px; } #heroHome .txt, #hero .txt { font-size: 18px; line-height: 119%; letter-spacing: 0.04em; margin-bottom: 45px; } #scroll_dwn { position: absolute; bottom: 2.5vh; left: 50%; width: 36px; height: auto; display: block; z-index: 1; transform: translateX(-50%); } #hero #scroll_dwn { left: 76.5%; } .l-section-top { width: 100%; height: 100%; background-color: #333; position: relative; } .c-scrolldown { width: 1px; height: 60px; position: absolute; bottom: 20px; left: 0; right: 0; margin: 0 auto; overflow: hidden; } .c-scrolldown .c-line { width: 100%; height: 100%; display: block; background: linear-gradient(to bottom, white 50%, rgba(255, 255, 255, 0) 50%); background-position: 0 -60px; background-size: 100% 200%; animation: scrolldown 2.2s cubic-bezier(0.76, 0, 0.3, 1) forwards infinite; } @keyframes scrolldown { 0% { background-position: 0 -60px; } 75% { background-position: 0 0; } 100% { background-position: 0 60px; } } /* -------- ABOUT ------- */ .alternate, .pdd-y { padding-top: 60px; padding-bottom: 60px; } .pdd-y + .pdd-y { padding-top: 0; } .alternates .alternate { padding: 0; } .alternates .alternate + .alternate { padding-top: 120px; } #hero + .alternates.alts-color { margin-top: 120px; } .alternates.alts-color { position: relative; padding-top: 50px; } .alternates.alts-color::before { content: ""; position: absolute; top: 0; right: 0; width: 78%; height: 75%; background-color: rgba(var(--root-color), 0.17); } .alternates.alts-color .alternate + .alternate { padding-top: 90px; } .alternates .alternate + .alternate.no-title { padding-top: 15px; } .alternate .tt, .rels .tt, .testimonials .tt, #default_page .tt { font-style: italic; font-weight: 300; font-size: 36px; line-height: 105%; letter-spacing: 0.04em; } .alternate .txt, .rels .txt, .testimonials .txt { font-weight: 300; font-size: 15px; line-height: 169%; letter-spacing: 0.04em; margin-top: 28px; margin-bottom: 28px; } .alternate .txt-wrp, .testimonials .txt-wrp { position: relative; z-index: 1; } .alternate .txt-wrp > .txt, .intro .txt-wrp > .txt, .testimonials .txt-wrp > .txt { max-width: 485px; } .alternate .fig-wrp { position: relative; } .alternate .fig-label, .testimonials .fig-label, .intro .fig-label { position: absolute; z-index: 1; top: 13%; left: 26px; transform: rotate(90deg); transform-origin: top left; } .alternate.alt-inv .fig-label, .alternate.alt-group .fig-wrp-dx .fig-label, .alt-emo .fig-wrp .fig-label, .testimonials .fig-label, .intro .fig-label { left: 100%; } .alternate .fig-label span, .testimonials .fig-label span, .intro .fig-label span { position: absolute; color: #fff; padding: 2px 36px; font-style: italic; font-weight: 300; min-width: 100px; font-size: 15px; text-align: center; display: block; background-color: var(--main); transform: rotate(180deg); white-space: nowrap; } .alternate .figure { overflow: hidden; } .alternate.alt-group .txt-wrp { padding: 0; } .alternate.alt-group .fig-wrp-dx { padding-left: 0; padding-right: 15px; margin-top: -35px; } .alternate.alt-group .fig-label { top: 30%; } .alt-emo { position: relative; } .alt-emo::before { content: ""; position: absolute; top: 30px; right: 0; width: 100%; height: calc(100% - 73px); background-color: rgba(var(--root-color), 0.17); } .alt-emo .figure { width: 100%; height: 0; padding-top: 100%; } .alt-emo .figure::after { content: ""; position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; background: linear-gradient(290deg, rgba(255, 255, 255, 0.35) 14.25%, rgba(255, 255, 255, 0) 27.66%); } .alt-emo .tt { margin-top: 45px; } .rels .shdwy { position: absolute; z-index: 1; top: 0; left: 30px; width: calc(100% - 45px); font-size: 46px; text-transform: uppercase; color: rgba(var(--root-color), 0.35); } .rels .shdwy span { position: relative; top: 0; left: 0; width: 100%; display: block; line-height: 90%; } /* -------- BANNER ------- */ .slice { width: 100%; height: 45vw; min-height: 400px; max-height: 640px; overflow: hidden; background: no-repeat center / cover; } .embed-container { position: relative; padding-bottom: 56.25%; overflow: hidden; max-width: 100%; height: auto; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } /* -------- BANNER ------- */ .content-cover .figure { margin-left: auto;/* width: calc(100vw - 15px);*/ height: 45vw; max-height: 60vh; margin-bottom: 45px; clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%); } .content-cover .shdwy { text-align: left; position: relative; width: 100%; font-size: 82px; text-transform: uppercase; color: rgba(var(--root-color), 0.35); } .content-cover .shdwy span { position: absolute; width: 100%; display: block; line-height: 90%; top: -100px; left: -24px; } .content-cover .tt { font-style: italic; font-weight: 300; font-size: 36px; line-height: 105%; letter-spacing: 0.04em; } .content-cover .txt-wrp { margin-top: 28px; } .content-cover .txt { font-weight: 300; font-size: 15px; line-height: 169%; letter-spacing: 0.04em; } .content-cover .txt-wrp .btn-inline { margin-top: 45px; } /* -------- MY WORLD ------- */ .cta-world { padding: 120px 0; } .cta-world .tt { font-style: italic; font-weight: 300; font-size: 36px; line-height: 105%; letter-spacing: 0.04em; margin-bottom: 25px; } .cta-world .shdwy { position: relative; top: -3%; width: 100%; font-size: 46px; text-transform: uppercase; color: rgba(var(--root-color), 0.35); } .cta-world .shdwy span { position: absolute; top: 0; left: 0; width: 100%; display: block; line-height: 90%; } /* -------- RELAZIONALE ------- */ .rel-link { position: relative; display: block; margin-bottom: 45px; } .rel-link .figure { display: block; width: 100%; height: 0; padding-top: 134%; overflow: hidden; } .rel-link .rel-wrp { position: absolute; top: 0; left: 0; height: 100%; width: 100%; padding: 25px; color: #fff; display: flex; flex-direction: column; justify-content: flex-end; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 100%); } .rel-link .rel-tt { text-transform: uppercase; font-size: 28px; line-height: 110%; } .rel-link .rel-txt { margin-top: 2px; font-size: 18px; line-height: 110%; } /* -------- FOOTER ------- */ footer { background-color: rgba(var(--root-color), 0.05); } #awards { padding: 20px 0; background-color: rgba(var(--root-color), 0.05); border-top: 1px solid rgba(var(--root-color), 0.3); border-bottom: 1px solid rgba(var(--root-color), 0.3); } #awards ul { list-style: none; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; } #awards li { margin-left: 15px; } #awards .tt { font-style: italic; font-weight: 300; font-size: 22px; line-height: 105%; letter-spacing: 0.04em; margin-right: 15px; } #awards .figure { margin: 5px 0; width: 62px; height: 62px; display: block; mix-blend-mode: multiply; } #footer { font-size: 14px; padding: 60px 0; } #footer .f-txt { font-weight: 300; line-height: 160%; margin-bottom: 30px; text-align: center; } #footer .f-txt strong { font-weight: 500; } #footer_brand { max-width: 100%; width: 500px; height: 90px; display: block; margin: auto; margin-bottom: 25px; background: url(../img/logo.png) no-repeat top left / contain; } #footer_copy { padding: 22px 0; color: #444; font-size: 12px; line-height: 110%; min-height: 80px; display: flex; align-items: center; background-color: rgba(var(--root-color), 0.02); border-top: 1px solid rgba(var(--root-color), 0.3); } /* -------- PORTFOLIO ------- */ .intro .tt { font-weight: 300; font-size: 32px; line-height: 105%; letter-spacing: 0.04em; } .intro .shdwy { text-align: left; position: relative; z-index: 1; width: 100%; font-size: 82px; text-transform: uppercase; color: rgba(var(--root-color), 0.25); } .intro .shdwy span { position: absolute; width: 100%; display: block; line-height: 90%; top: -40px; left: -24px; } .intro .shdwy span::first-letter { margin-left: 5vw; } .intro .txt { font-weight: 300; font-size: 15px; line-height: 169%; letter-spacing: 0.04em; margin-top: 28px; margin-bottom: 28px; } .intro .txt-2 { margin-top: 45px; } .intro .fig-wrp { position: relative; } /* .intro .fig-label { position: absolute; z-index: 0; top: 13%; left: calc(100% + 11px); transform: rotate(90deg); transform-origin: top left; } .intro .fig-label span { position: absolute; color: #fff; padding: 2px 36px; font-style: italic; font-weight: 300; min-width: 100px; font-size: 15px; text-align: center; display: block; background-color: var(--main); transform: rotate(180deg); white-space: nowrap; } */ .intro .figure { overflow: hidden; } .intro .fig-wrp [data-cursor="play"] { position: relative; } .intro .fig-wrp [data-cursor="play"]::after { content: ""; position: absolute; bottom: 20px; left: 20px; width: 48px; height: 48px; display: block; background: url(../img/icon-play.svg) no-repeat center / contain; } .gallery { display: flex; } .gallery-grid { list-style: none; margin-left: -15px; margin-right: -15px; } .gallery .grid-sizer, .gallery .item { width: calc(50% - 6px); margin: 3px; float: left; } .gallery .item a { position: relative; display: block; width: 100%; padding-top: 80%; } .gallery .item a { position: relative; display: block; width: 100%; padding-top: 80%; } .gallery .item a { position: relative; display: block; width: 100%; padding-top: 125% !important; } .gallery .item a .figure { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } /* -------- TESIMONIALS ------- */ .testimonials { position: relative; } .testimonials .tt strong { color: var(--main); font-weight: inherit; } .testimonials::before { content: ""; position: absolute; top: 20px; left: 0; width: 100%; height: 75%; background-color: rgba(var(--root-color), 0.17); } .testimonials .swiper-slide:not(.swiper-slide-active) { opacity: 0 !important; } .testimonials .fig-wrp { position: relative; padding-left: 0; padding-right: 15px; } .testimonials .figure { width: 100%; height: 0; padding-top: 133%; } .testimonials .txt-wrp { margin-bottom: 45px; } .testimonials .txt-wrp .txt { margin-bottom: 45px; font-style: italic; } .testimonials .swiper-navigation { position: relative; width: 100px; display: inline-flex; flex-wrap: nowrap; justify-content: space-between; } .testimonials .swiper-navigation .swiper-button-next, .testimonials .swiper-navigation .swiper-button-prev { position: relative; width: 34px; height: 13px; top: unset; bottom: unset; left: unset; right: unset; margin: 0; background: url(../img/swiper-arrow.svg) no-repeat center / contain; } .testimonials .swiper-navigation .swiper-button-next { transform: rotate(180deg); } .testimonials .swiper-navigation .swiper-button-next::after, .testimonials .swiper-navigation .swiper-button-prev::after { display: none; } .testimonials .shdwy { position: relative; top: -18px; width: 100%; font-size: 46px; text-transform: uppercase; color: rgba(var(--root-color), 0.35); } .testimonials .shdwy span { position: relative; top: 0; left: 0; width: 100%; display: block; line-height: 90%; } /* -------- FEATURED ------- */ .featured { overflow: hidden; } .featured.alternate .tt { left: 0; } .featured .swiper { padding-top: 45px; overflow: visible; } .featured .swiper-slide { width: 150px; } .featured .feat-link { width: 100%; display: block; } .featured .feat-link .figure { width: 100%; height: 0; padding-top: 100%; display: block; } /* -------- EMOZIONI ------- */ #emozioni_swiper { width: 100vw; height: 100vh; position: relative; top: 0; left: 0; overflow: hidden; background-color: #000; } #emozioni_swiper .swiper { width: 100vw; height: 100vh; overflow: hidden; } #emozioni_swiper .swiper-slide { display: flex; flex-direction: column; align-items: flex-end; justify-content: flex-end; position: relative; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; backface-visibility: hidden; cursor: pointer; background: #000 no-repeat center / cover; } #emozioni_swiper .swiper-slide .fig-main-blurred { position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: no-repeat center / cover; opacity: 0.75; filter: blur(52px); } #emozioni_swiper .swiper-slide .fig-main { position: absolute; top: 20px; left: 20px; width: calc(100% - 40px); height: calc(100% - 40px); background: no-repeat center / contain; } #emozioni_swiper .swiper-slide::after { content: ""; position: absolute; z-index: 0; bottom: 0; left: 0; width: 100%; height: 40%; opacity: 0.75; background-image: linear-gradient(to bottom, transparent, #000 100%); } .emozione { width: 100%; height: 100vh; position: absolute; will-change: transform; display: flex; align-items: flex-end; justify-content: flex-end; flex-direction: column; background-color: #fff; } .emozione .emozione-cover { width: 100%; height: 100%; position: fixed; z-index: 1; color: #ccc; font-style: italic; font-weight: 400; font-size: 7vh; text-transform: uppercase; line-height: 1; display: flex; align-items: center; justify-content: center; flex-direction: column; background-color: rgba(0, 0, 0, 0.75);/* background: radial-gradient(circle, rgba(0,0,0,1) 0%, rgba(34,34,34,1) 70%);*/ } .emozione .emozione-cover strong { font-weight: 400; color: var(--main); } .emozione-cover-mobile-fg { position: fixed; left: 50%; bottom: 5vw; padding: 15px; transform: translate(-50%); font-style: italic; font-size: 20px; color: #fff; text-transform: uppercase; border-radius: 50%; width: 120px; height: 120px; text-align: center; display: flex; flex-direction: column; justify-content: center; align-items: center; border: 1px solid #ddd; background-color: rgba(255, 255, 255, 0.1); transition: background 360ms ease; } .emozione-cover-mobile-fg:hover { color: #878787; background-color: rgba(255, 255, 255, 0.95); } .emozione-cover-fg { position: absolute; top: 0; left: 0; z-index: 1; width: 100%; height: 100%; display: block; } #emozioni_swiper .bg-video { position: absolute; top: 0; left: 0; z-index: -1; width: 100%; height: 100%; display: block; object-fit: cover; } #emozioni_swiper .clip { pointer-events: none; position: absolute; z-index: 3; top: 0; left: 0; width: 100; color: #fff; font-weight: 300; font-size: 220px; background: rgba(0, 0, 0, 0.85);/* mix-blend-mode: multiply;*/ width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; flex-direction: column; opacity: 1; transition: opacity 900ms cubic-bezier(0.75, 0, 0, 1) 600ms; } #emozioni_swiper .swiper-slide-prev .clip, #emozioni_swiper .swiper-slide-active .clip { opacity: 0; } #emozioni_swiper .clip .clip-n { color: #fff; display: inline-block; position: relative; top: 2%; } #emozioni_swiper .clip .clip-n span { display: inline-block; } #emozioni_swiper .bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; background-size: cover; background-position: center; background-repeat: no-repeat; } #emozioni_swiper .bg::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; background: linear-gradient(340deg, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0)); } #emozioni_swiper .fg { width: 100%; height: 100%; display: flex; align-items: flex-end; justify-content: flex-end; flex-direction: column; } #emozioni_swiper .emz-prev, #emozioni_swiper .emz-next { position: absolute; top: 0; left: 0; width: 100%; height: 50%; display: block; cursor: pointer; z-index: 1; } #emozioni_swiper .emz-next { top: 50%; } #emozioni_swiper .swiper-slide.first-slide .emz-next { top: 0; height: 100%; } #emozioni_swiper .emz-btn { position: absolute; bottom: 15px; left: 15px; display: block; cursor: pointer; z-index: 2; border: 0; padding: 0; background-color: transparent; color: #fff; display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; transition: opacity 360ms cubic-bezier(0.75, 0, 0, 1); } #emozioni_swiper .emz-btn:hover { opacity: 0.75; } #emozioni_swiper .emz-btn .icon { position: relative; width: 26px; height: 26px; display: block; border: 2px solid #fff; border-radius: 50%; margin-right: 8px; } #emozioni_swiper .emz-btn .icon::before, #emozioni_swiper .emz-btn .icon::after { content: ""; position: absolute; left: 50%; top: 50%; width: 50%; height: 2px; display: block; background-color: #fff; transform: translate(-50%, -50%); } #emozioni_swiper .emz-btn .icon::after { transform: translate(-50%, -50%) rotate(90deg); } #emozioni_swiper .emz-btn .icon + span { font-size: 18px; font-style: italic; line-height: 100%; } #emozioni_swiper .pop-emz { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 5; background: linear-gradient(45deg, rgb(0, 0, 0), rgba(0, 0, 0, 0.75)); display: none; } #emozioni_swiper .pop-emz-wrp { position: relative; width: 100%; height: 100%; display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: center; padding: 50px 0; color: #fff; } #emozioni_swiper .pop-emz-wrp .emz-tt { font-style: italic; font-size: 28px; margin-bottom: 15px; } #emozioni_swiper .pop-emz-wrp .emz-txt { font-size: 15px; line-height: 150%; margin-bottom: 30px; } #emozioni_swiper .pop-emz-wrp .emz-txt p { margin-bottom: 1em; } #emozioni_swiper .emz-fraction { display: none; } #sound_toggle { display: none; } /* -------- FORM ------- */ .txt .gform_wrapper.gravity-theme { letter-spacing: 0; } .txt .gform_wrapper.gravity-theme .gfield_label { color: #444; font-size: 14px; margin-top: 15px; display: block; font-weight: 300; text-align: left; margin-bottom: 0; } .txt .gform_wrapper.gravity-theme .gfield_label .gfield_required { color: #444; } .txt .gform_wrapper.gravity-theme .gfield input[type="text"], .txt .gform_wrapper.gravity-theme .gfield textarea, .txt .gform_wrapper.gravity-theme .gfield select { -webkit-appearance: none; -moz-appearance: none; appearance: none; display: block; width: 100%; height: 30px; line-height: 30px; border-radius: 0; padding: 0; border: 0; border-bottom: 1px solid rgba(68, 68, 68, 0.2); background-color: transparent; color: #4a4a4a; font-size: 15px; display: inline-block; margin-bottom: 10px; resize: none; } .txt .gform_wrapper.gravity-theme .gfield textarea { height: 90px; } .txt .gform_wrapper.gravity-theme .gfield input[type="text"]:focus, .txt .gform_wrapper.gravity-theme .gfield textarea:focus { border-color: rgba(var(--root-color), 0.5); } .txt .gform_wrapper.gravity-theme .gform_footer input[type=submit] { margin-top: 30px; color: #fff; border-radius: 0; border: 1px solid #444; padding: 8px 32px; font-size: 13px; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; background-color: #444; transition: all .36s cubic-bezier(0.75, 0, 0, 1); } .txt .gform_wrapper.gravity-theme .gform_footer input[type=submit]:hover, .txt .gform_wrapper.gravity-theme .gform_footer input[type=submit]:focus { color: #444; background-color: #fff; box-shadow: none; } .txt .gform_wrapper.gravity-theme .ginput_container_consent { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; line-height: 120%; font-size: 13px; letter-spacing: 0; } .txt .gform_wrapper.gravity-theme .ginput_container_consent .gfield_required_asterisk { display: none; } .txt .gform_wrapper.gravity-theme .ginput_container_consent input[type="checkbox"]:checked { filter: hue-rotate(140deg) brightness(1.6) grayscale(0.4); } .txt .gform_wrapper.gravity-theme .ginput_container_consent input { margin-right: 10px; } .txt .gform_wrapper.gravity-theme .ginput_container_consent .gfield_consent_label { color: #444; } .txt .gform_wrapper.gravity-theme .ginput_container_consent .gfield_consent_label a { text-decoration: underline; } .txt .gform_wrapper .gfield_validation_message, .txt .gform_wrapper .validation_message { border: 0; padding: 0 !important; background: transparent; color: var(--main); margin-top: -8px; font-weight: 500; font-size: 13px !important; } .txt .gform_wrapper .ginput_container_consent + .gfield_validation_message { margin-top: 0; } .txt .gform_wrapper .gform_validation_errors { padding: 0; background: transparent; border: 0; box-shadow: none; } .txt .gform_wrapper .gform_validation_errors .gform_submission_error { color: var(--main); } .txt .gform_wrapper .gform_validation_errors .gform-icon--close:before { display: none; } /* -------- PAGE ------- */ #default_page .tt { text-align: center; margin-bottom: 90px; } #default_page .txt p, #default_page .txt table { margin-top: 20px; } #default_page .txt a { text-decoration: underline; } #default_page .txt h1, #default_page .txt h2, #default_page .txt h3, #default_page .txt h4, #default_page .txt h5, #default_page .txt h6, #default_page .txt strong, #default_page .txt th { font-weight: 700; color: var(--main); } /* -------- SOCIAL ------- */ #footer .social-nav ul { margin-top: 10px; justify-content: center; } .social-nav { } .social-nav ul { display: flex; flex-direction: row; flex-wrap: nowrap; margin: 0 -4px; } .social-nav ul li { padding: 0 4px; } .social-nav .social-link { width: 22px; height: auto; display: block; } .social-nav .social-link svg { width: 100%; height: auto; display: block; fill: #444; } .social-nav .social-link:hover svg { fill: var(--main); } /* -------- SINGLE POST ------- */ .single-post .post-cat { text-align: center; font-size: 13px; margin-bottom: 30px; letter-spacing: 0.2em; } .single-post .post-cat .cat-name { text-transform: uppercase; } .single-post .tt { margin-bottom: 30px !important; } .single-post .tt span { font-size: 75%; line-height: 125%; } .single-post .post-author { text-align: center; font-style: italic; font-size: 13px; margin-bottom: 90px; letter-spacing: 0.2em; } .single-post .txt { line-height: 180% } .single-post .txt li::marker { content: '- '; } .single-post .figure { text-align: center; } .single-post .figure-wrapper { display: block; width: 100%; height: 0; padding-top: 100%; position: relative; overflow: hidden; } .single-post .figcaption { font-style: italic; margin-top: 15px; font-size: 15px; } /* -------- MAGAZINE ------- */ #magazine .article { text-align: center; margin-bottom: 90px; } #magazine .article .figure { width: 100%; height: 0; padding-top: 62.5%; margin-bottom: 30px; background-color: rgba(var(--root-color), 0.05); } #magazine .article .post-txt-wrapper { padding: 0 15px; } #magazine .article .post-cat { font-size: 13px; margin-bottom: 30px; letter-spacing: 0.2em; } #magazine .article .post-cat .cat-name { text-transform: uppercase; } #magazine .article .post-title { font-size: 28px; margin-bottom: 30px; } #pagination { padding: 20px 0; font-size: 14px; line-height: 100%; border-top: 1px solid rgba(var(--root-color), 0.3); } #pagination nav ul { display: flex; flex-direction: row; column-gap: 8px; } #pagination nav ul a { display: flex; flex-direction: row; justify-content: center; align-items: center; width: 26px; height: 26px; border: 1px solid rgba(var(--root-color), 1); transition: opacity 900ms cubic-bezier(0.75, 0, 0, 1); } #pagination nav ul a:hover, #pagination nav ul a.current { color: #fff; background-color: rgba(var(--root-color), 0.75); } /* -------- LANCI ------- */ .lanci-link { display: block; } .lanci-link .figure { display: block; width: 100%; height: 0; padding-top: 100%; overflow: hidden; border: 0 solid #fff; transition: border 900ms cubic-bezier(0.75, 0, 0, 1); } .lanci-link .lanci-ptt { font-size: 13px; margin: 30px 0 5px; letter-spacing: 0.04em; } .lanci-link .lanci-tt { font-size: 28px; margin-bottom: 60px; } /* -------- COOKIE ------- */ #default_page .txt #cmplz-document h2 { margin-top: 60px; } #cmplz-document .screen-reader-text { border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; word-wrap: normal !important; } /* -------- MEDIA QUERY ------- */ @media screen and (min-width:768px) and (min-height:415px) { #privacySlider { width: 400px; right: 10px; bottom: 10px; } header { padding: 18px 0; } header.is-myworld .not-pinned { opacity: 0; pointer-events: none; } #brand_payoff { /* width: 180px; */ height: auto; display: block; } #main_navbar { font-weight: 400; font-size: 14px; letter-spacing: 0.04em; text-transform: uppercase; } #main_navbar .menu-item.active .nav-link, #main_navbar .menu-item .nav-link:hover { color: var(--main); } #heroHome, #hero { min-height: 600px; } #hero { padding-bottom: 120px; } #heroHome .tt, #hero .tt, .cta-world .tt { font-size: 42px; } .cta-world .tt { margin-bottom: 55px; } #heroHome .txt, #hero .txt { font-size: 19px; } .alternate, .pdd-y { padding-top: 75px; padding-bottom: 75px; } .alternate .fig-wrp { padding-left: 15px; } .alternate.alt-inv .fig-wrp, .alternate.alt-emo .fig-wrp, .intro .fig-wrp { padding-left: 0; padding-right: 15px; } .alternate .fig-label, .testimonials .fig-label { z-index: 0; left: 15px } .alternate.alt-inv .fig-label, .alternate.alt-group .fig-wrp-dx .fig-label, .alt-emo .fig-wrp .fig-label, .testimonials .fig-label { left: calc(100% + 11px); } .alternate .fig-label span, .intro .fig-label span, .testimonials .fig-label span { font-size: 17px; } .alternate.alt-inv .fig-label, .alternate.alt-group .fig-wrp-dx .fig-label, .intro .fig-label, .alt-emo .fig-wrp .fig-label, .testimonials .fig-label { left: calc(100% + 14px); } .alternate .tt, .alternate.alt-group .txt-wrp-dx .tt { position: relative; left: -90px; width: calc(100% + 90px); } .alternate.alt-inv .tt, .alternate.alt-group .tt, .rels .tt { left: 0; } .alternate .txt, .rels .txt, .intro .txt, .content-cover .txt { font-size: 13px; } .cta-world .shdwy { font-size: 92px; } .alternate.alt-group .tt, .rels .tt { margin-top: 75px; } .alternate.alt-group .fig-wrp-sx { padding: 0; } .alternate.alt-group .fig-wrp-dx { margin-top: 0; } .alternate.alt-group .txt-wrp-sx { margin-bottom: 90px; } .alternate.alt-group .shdwy { text-align: center; position: relative; margin-top: -10px; width: 100%; font-size: 82px; text-transform: uppercase; color: rgba(var(--root-color), 0.35); } .alternate.alt-group .shdwy span { width: 100%; display: block; line-height: 90%; } .alternates.alts-color .alternate + .alternate { padding-top: 20px; } .gallery-grid { margin-left: -12px; margin-right: -12px; } .gallery .grid-sizer, .gallery .item { width: calc((100% / 3) - 6px); } .rels .rel-link.rel-sx { margin-top: -100px; } .content-cover .figure { width: calc(50vw + 345px); margin-bottom: 75px; } .alt-emo .tt { margin-top: 210px; } .alt-emo .figure { width: 110%; padding-top: 110%; left: -10%; } .testimonials .tt { margin-top: 60px; } .testimonials .shdwy { top: -14px; left: -23px; font-size: 68px; } .featured .swiper-slide { margin-left: 30px; } .rels .shdwy { top: 18%; font-size: 68px; } #awards .tt { font-size: 32px; } #emozioni_swiper .clip { font-size: 320px; } .alt-emo::before { height: 75%; } #footer { padding: 90px 0; } #footer_brand { margin-left: 0; } #footer .f-txt { text-align: left; } #emozioni_swiper .pop-emz-wrp .container-fluid { padding: 0 8.5vw; } #emozioni_swiper .emz-fraction { display: block; position: absolute; z-index: 1; right: 15px; bottom: 15px; color: #fff; } #emozioni_swiper .emz-fraction span { display: inline-block; font-size: 18px; padding: 0 4px; letter-spacing: 0.02em; } #emozioni_swiper .swiper-slide .fig-main { top: 50px; left: 50px; width: calc(100% - 100px); height: calc(100% - 100px); } } @media screen and (min-width:992px) { #drawer .drawer-bg { width: 60%; height: 100%; position: absolute; top: 0; left: 0; display: block; background: no-repeat center / cover; } #drawer .drawer-bg .figures, #drawer .drawer-bg .figures .figure { list-style: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block; background: no-repeat center / cover; } #drawer .drawer-bg .figures li { display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; } #drawer .drawer-wrapper { padding: 0 15px; width: 40%; margin-left: auto; } #drawer .drawer-header { padding: 21px 0; } #drawer_navbar { font-size: 24px; } #hero.half { padding-bottom: 75px; } .newspaper { column-count: 2; column-gap: 30px; } #main_navbar .menu-item { margin-left: 10px; } .alternate .txt-wrp { padding: 0 15px; } .alternate.alt-inv .txt-wrp { padding-left: 0; } .alternate .tt, .alternate.alt-group .txt-wrp-dx .tt { font-size: 46px; left: -105px; width: calc(100% + 105px); } .rels .tt, .content-cover .tt, .testimonials .tt, #default_page .tt { font-size: 46px; } .intro .tt { font-size: 38px; } .alternate .txt, .rels .txt, .intro .txt, .content-cover .txt, .testimonials .txt { font-size: 14px; } .alternate .fig-label span, .intro .fig-label span, .testimonials .fig-label span { font-size: 19px; } .alternate.alt-inv .fig-label, .alternate.alt-group .fig-wrp-dx .fig-label, .intro .fig-label, .alt-emo .fig-wrp .fig-label, .testimonials .fig-label { left: calc(100% + 17px); } .cta-world .shdwy { top: -6%; font-size: 125px; } .alternate.alt-group .fig-wrp-dx { padding-left: 15px; } .alternate.alt-group .txt-wrp-dx { margin-top: 90px; padding: 0 15px; } .alternate.alt-group .shdwy { margin-top: -15px; font-size: 112px; } .rel-link .rel-wrp { padding: 45px; } .rel-link .rel-tt { font-size: 36px; } .rel-link .rel-txt { font-size: 22px; } .intro .tt { margin-top: 55px; } .intro .shdwy, .content-cover .shdwy { font-size: 110px; } .intro .shdwy span { top: -110px; } .gallery .grid-sizer, .gallery .item { width: calc((100% / 3) - 6px); } .rels .rel-link.rel-sx { margin-top: -150px; } .content-cover .figure { width: calc(50vw + 465px); margin-bottom: 90px; } .content-cover .shdwy span { top: -130px; left: -30px; } .alt-emo .tt { margin-top: 260px; } .alt-emo .figure { width: 105%; padding-top: 105%; left: -5%; } .alt-emo::before { top: 120px; width: 78%; } .testimonials::before { width: 78%; } .testimonials .txt-wrp { margin-top: 0; } .testimonials .tt { margin-top: 75px; } .testimonials .shdwy { padding-top: 60px; font-size: 96px; } .rels .shdwy { top: 9%; font-size: 96px; } #footer { padding: 120px 0; } #emozioni_swiper .swiper-slide .fig-main { top: 85px; left: 85px; width: calc(100% - 170px); height: calc(100% - 170px); } } @media screen and (min-width:1200px) { .newspaper { column-gap: 60px; } #drawer .drawer-wrapper { padding: 0 3vw; } #drawer .drawer-header { padding: 28px 0; } #drawer_brand { width: 180px; } #drawer_navbar { max-width: 580px; font-size: 28px; } #drawer_navbar li { margin-bottom: 45px; } #main_navbar .menu-item { margin-left: 20px; } #hero { padding-bottom: 150px; /* margin fix passepartout */ margin-bottom: -65px } #hero #scroll_dwn { left: calc(50vw - 554px); } #heroHome .tt, #hero .tt, .cta-world .tt { font-size: 52px; } #heroHome .txt { font-size: 20px; } .alternate, .pdd-y { padding: 120px 0; } .alternate .fig-wrp, .alternate.alt-inv .fig-wrp, .testimonials .fig-wrp { padding: 0 15px; } .alternate .fig-wrp { padding-left: 30px; } .alternate .fig-label { left: 30px; } .alternate .fig-label span, .intro .fig-label span, .testimonials .fig-label span { font-size: 20px; min-width: 150px; } .alternate .tt, .alternate.alt-group .txt-wrp-dx .tt { font-size: 45px; left: -120px; width: calc(100% + 120px); } .rels .tt, .content-cover .tt, .testimonials .tt, #default_page .tt { font-size: 56px; } .intro .tt { font-size: 42px; } .alternate .txt, .rels .txt, .intro .txt, .testimonials .txt { font-size: 15px; margin: 35px 0; } .content-cover .txt { font-size: 15px; } .cta-world { padding-bottom: 150px; } .cta-world .shdwy { top: -6%; font-size: 149px; } .alternate.alt-group .fig-wrp-sx { padding-right: 15px; } .alternate.alt-group .fig-wrp-dx, .alternate.alt-inv .fig-wrp, .testimonials .fig-wrp { padding-right: 30px; } .alternate.alt-inv .fig-label, .alternate.alt-group .fig-wrp-dx .fig-label, .intro .fig-label, .alt-emo .fig-wrp .fig-label, .testimonials .fig-label { left: calc(100% + 4px); } .alternate.alt-group .txt-wrp-sx { margin-bottom: 110px; } .alternate.alt-group .txt-wrp-dx { margin-top: 90px; } .alternate.alt-group .shdwy { margin-top: -20px; font-size: 132px; } .rel-link .rel-wrp { opacity: 0; transition: opacity 1s cubic-bezier(0.75, 0, 0, 1); } .rel-link:hover .rel-wrp { opacity: 1; } .rels .txt-wrp, .rels .rel-sx { padding-right: 15px; } .rels .rel-dx { padding-left: 15px; } .rels .rel-link.rel-sx { margin-top: -225px; } .intro .shdwy, .content-cover .shdwy { font-size: 125px; } .intro .shdwy span { top: -130px; } .intro .txt-wrp { padding-right: 15px; } .intro .fig-wrp { padding-left: 15px; padding-right: 30px; } .content-cover .figure { width: calc(50vw + 555px); margin-bottom: 120px; } .content-cover .shdwy span { top: -164px; left: -40px; } .content-cover .txt-wrp { margin-top: 45px; } .alt-emo .tt { margin-top: 290px; } .alternate.alt-emo .fig-wrp { padding-right: 30px; } .alt-emo .figure { width: 108%; padding-top: 108%; left: -8%; } .testimonials .tt { margin-top: 150px; } .testimonials::before { top: 60px; } .testimonials .shdwy { padding-top: 75px; font-size: 116px; top: 10px; left: -39px; } .rels .shdwy { top: 9%; font-size: 116px; } #awards .tt { font-size: 36px; } #emozioni_swiper .clip { font-size: 420px; } #sound_toggle { display: block; position: fixed; z-index: 100; top: 50%; transform: translateY(-50%) rotate(90deg); left: 0; min-height: 77px; min-width: 30px; padding: 9px; border: 0; background: none; cursor: pointer; mix-blend-mode: difference; } #sound_toggle span { display: block; float: left; width: 2px; height: 13px; margin-right: 2px; background: rgba(255, 255, 255, 0.8); -webkit-transform: scale(1, 0.1); transform: scale(1, 0.1); -webkit-transform-origin: bottom; transform-origin: bottom; transition: transform .5s cubic-bezier(.23, 1.08, .62, .95); } #sound_toggle:hover span:nth-child(3n) { -webkit-transform: scale(1, 0.3); transform: scale(1, 0.3) } #sound_toggle:hover span:nth-child(3n+1) { -webkit-transform: scale(1, 0.4); transform: scale(1, 0.4) } #sound_toggle:hover span { -webkit-transform: scale(1, 0.3); transform: scale(1, 0.3) } #sound_toggle.playing span { -webkit-animation: sound-toggle 2s infinite; animation: sound-toggle 2s infinite } #sound_toggle.playing span:nth-child(2) { -webkit-animation-delay: 1.2s; animation-delay: 1.2s } #sound_toggle.playing span:nth-child(3) { -webkit-animation-delay: .3s; animation-delay: .3s } #sound_toggle.playing span:nth-child(4) { -webkit-animation-delay: 1.7s; animation-delay: 1.7s } #sound_toggle.playing span:nth-child(5) { -webkit-animation-delay: .4s; animation-delay: .4s } #magazine .article { padding: 0 30px; } .intro .fig-wrp [data-cursor="play"]::after { display: none; } } @media screen and (min-width:1440px) { .container { max-width: 1152px; } /* CAMBIO EFFETTO HEADER + SIDELINES */ header { padding: 0; border-bottom: 1px solid rgba(var(--root-color), 0.3); } header.headroom--unpinned { transform: translateY(0%); border-bottom: 1px solid background-color:rgba(0, 0, 0, 0); } header .not-pinned { opacity: 1; transition: opacity 1s cubic-bezier(0.75, 0, 0, 1); } header.headroom--unpinned .not-pinned { opacity: 0; pointer-events: none; } header .pinned { width: 85px; height: 85px; padding: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; } #brand_payoff { /* width: 224px; */ margin-left: 15px; } #hamburger { margin: auto; } #main_navbar { margin-right: 8px; } .aside { display: block; position: fixed; top: 0; width: 85px; height: 100vh; border: 0; z-index: 100; pointer-events: none; will-change: background; background-color: rgba(var(--root-color), 0); transition: background .85s cubic-bezier(0.75, 0, 0, 1); } .aside.in { z-index: 102; background-color: rgba(var(--root-color), 0.85); } #aside_sx { left: 0; border-right: 1px solid rgba(var(--root-color), 0.3); } #aside_dx { right: 0; border-left: 1px solid rgba(var(--root-color), 0.3); } .aside .aside-cnt { position: absolute; top: 50%; left: 50%; transform: translateX(-50%) rotate(-90deg); pointer-events: all; height: 85px; padding-left: 85px; width: calc(100vh - 85px); text-align: center; display: flex; align-items: center; justify-content: center; } .aside .aside-link { display: block; font-weight: 500; font-size: 14px; color: #919191; text-transform: uppercase; letter-spacing: 0.04em; mix-blend-mode: difference; transition: color .85s cubic-bezier(0.75, 0, 0, 1); } .aside.in .aside-link { color: #fff; } #aside_dx.aside .aside-link { transform: rotate(180deg); } .aside .aside-link strong { font-weight: 500; color: var(--main); } #heroHome, #hero { /* rimuovere 'height' per fullscreen */ /* height: 56.25vw; */ /* max-height: 100vh; */ } #hero { margin-bottom: -85px; padding-bottom: 180px; } #hero #scroll_dwn { left: calc(50vw + 561px); } .alternate, .pdd-y { padding: 150px 0; } .alternate .fig-label span, .intro .fig-label span, .testimonials .fig-label span { min-width: 180px; } .alternates.alts-color { padding-top: 66px; } .alternates.alts-color::before { height: 69%; width: calc(50vw + 397px); } .alt-emo::before { width: calc(50vw + 397px); height: 70%; } .alt-emo .txt-wrp { padding-bottom: 120px; } .rel-link .rel-tt { font-size: 52px; } .rel-link .rel-txt { font-size: 26px; } .gallery .grid-sizer, .gallery .item { width: calc((100% / 4) - 6px); } .intro .tt { margin-top: 50px; } .intro .shdwy, .content-cover .shdwy { font-size: 130px; } .intro .shdwy span { top: -140px; } .content-cover .figure { width: calc(50vw + 561px); margin-bottom: 135px; } .content-cover .shdwy span { top: -180px; left: -114px; } .alt-emo .tt { margin-top: 330px; } .alt-emo .figure { width: 130%; padding-top: 130%; left: -30%; } .testimonials::before { height: 72%; width: calc(50vw + 397px); } .testimonials .shdwy { font-size: 136px; left: -64px; } .rels .shdwy { top: 12%; font-size: 136px; } #awards .tt { font-size: 38px; } #emozioni_swiper .clip { font-size: 560px; } .aside-panel { display: block; position: fixed; top: 0; left: -100vw; width: 100vw; height: 100vh; border: 0; z-index: 101; pointer-events: none; background-color: #000; will-change: transform; transition: transform .85s cubic-bezier(0.75, 0, 0, 1); display: flex; align-items: center; justify-content: center; flex-direction: column; } .aside-panel.in { transform: translateX(100vw); } #aside_dx_panel { left: 100vw; } #aside_dx_panel.in { transform: translateX(-100vw); } .aside-panel .aside-panel-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; } .aside-panel::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; background-color: rgba(0, 0, 0, 0.75); } .aside-panel .srf { color: #ccc; font-style: italic; font-weight: 400; font-size: 7vh; text-transform: uppercase; line-height: 1; z-index: 2; } #emozioni_swiper::after { content: ""; position: absolute; z-index: 1; bottom: 85px; left: 0; width: 100%; display: block; border-top: 1px solid rgba(var(--root-color), 0.3); } #emozioni_swiper .emz-btn { bottom: 24px; left: 105px; } #emozioni_swiper .emz-fraction { bottom: 24px; right: 105px; } #emozioni_swiper .swiper-slide .fig-main { top: 120px; left: 120px; width: calc(100% - 240px); height: calc(100% - 240px); } } @media screen and (min-width:1600px) { #heroHome .tt, #hero .tt, .cta-world .tt { font-size: 68px; } #heroHome .txt { font-size: 24px; } .alternate .tt, .alternate.alt-group .txt-wrp-dx .tt { font-size: 45px; width: calc(100% + 155px); } .rels .tt, .content-cover .tt, .testimonials .tt, #default_page .tt { font-size: 68px; } .intro .tt { font-size: 46px; } .alternate .txt, .rels .txt, .intro .txt { margin-bottom: 45px; } .alternate .fig-label span, .intro .fig-label span, .testimonials .fig-label span { min-width: 200px; height: 35px; } .btn-inline { padding-right: 70px; } .btn-inline::after { width: 95px; height: 95px; } .cta-world { padding-bottom: 180px; } .alternate, .pdd-y { padding: 180px 0; } .rel-link .rel-tt { font-size: 56px; } .rel-link .rel-txt { font-size: 30px; } .intro .tt { font-size: 48px; } .alt-emo .tt { margin-top: 350px; } .featured .swiper { padding-top: 60px; } #awards .tt { font-size: 42px; } #emozioni_swiper .pop-emz-wrp .emz-tt { font-size: 36px; margin-bottom: 25px; } #emozioni_swiper .pop-emz-wrp .emz-txt { font-size: 16px; margin-bottom: 45px; } } @media screen and (min-width:1920px) { .intro .shdwy, .content-cover .shdwy { font-size: 149px; } .intro .tt { margin-top: 75px; } .gallery .grid-sizer, .gallery .item { width: calc((100% / 5) - 6px); } .content-cover .shdwy span { top: -180px; left: -114px; } .testimonials .shdwy { font-size: 149px; left: -154px; top: 30px; } } /* -------- EXTRA ------- */ /** * Swiper 8.0.6 * Most modern mobile touch slider and framework with hardware accelerated transitions * https://swiperjs.com * * Copyright 2014-2022 Vladimir Kharlampidi * * Released under the MIT License * * Released on: February 14, 2022 */ @font-face { font-family: swiper-icons; src: url('data:application/font-woff;charset=utf-8;base64, d09GRgABAAAAAAZgABAAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAGRAAAABoAAAAci6qHkUdERUYAAAWgAAAAIwAAACQAYABXR1BPUwAABhQAAAAuAAAANuAY7+xHU1VCAAAFxAAAAFAAAABm2fPczU9TLzIAAAHcAAAASgAAAGBP9V5RY21hcAAAAkQAAACIAAABYt6F0cBjdnQgAAACzAAAAAQAAAAEABEBRGdhc3AAAAWYAAAACAAAAAj//wADZ2x5ZgAAAywAAADMAAAD2MHtryVoZWFkAAABbAAAADAAAAA2E2+eoWhoZWEAAAGcAAAAHwAAACQC9gDzaG10eAAAAigAAAAZAAAArgJkABFsb2NhAAAC0AAAAFoAAABaFQAUGG1heHAAAAG8AAAAHwAAACAAcABAbmFtZQAAA/gAAAE5AAACXvFdBwlwb3N0AAAFNAAAAGIAAACE5s74hXjaY2BkYGAAYpf5Hu/j+W2+MnAzMYDAzaX6QjD6/4//Bxj5GA8AuRwMYGkAPywL13jaY2BkYGA88P8Agx4j+/8fQDYfA1AEBWgDAIB2BOoAeNpjYGRgYNBh4GdgYgABEMnIABJzYNADCQAACWgAsQB42mNgYfzCOIGBlYGB0YcxjYGBwR1Kf2WQZGhhYGBiYGVmgAFGBiQQkOaawtDAoMBQxXjg/wEGPcYDDA4wNUA2CCgwsAAAO4EL6gAAeNpj2M0gyAACqxgGNWBkZ2D4/wMA+xkDdgAAAHjaY2BgYGaAYBkGRgYQiAHyGMF8FgYHIM3DwMHABGQrMOgyWDLEM1T9/w8UBfEMgLzE////P/5//f/V/xv+r4eaAAeMbAxwIUYmIMHEgKYAYjUcsDAwsLKxc3BycfPw8jEQA/gZBASFhEVExcQlJKWkZWTl5BUUlZRVVNXUNTQZBgMAAMR+E+gAEQFEAAAAKgAqACoANAA+AEgAUgBcAGYAcAB6AIQAjgCYAKIArAC2AMAAygDUAN4A6ADyAPwBBgEQARoBJAEuATgBQgFMAVYBYAFqAXQBfgGIAZIBnAGmAbIBzgHsAAB42u2NMQ6CUAyGW568x9AneYYgm4MJbhKFaExIOAVX8ApewSt4Bic4AfeAid3VOBixDxfPYEza5O+Xfi04YADggiUIULCuEJK8VhO4bSvpdnktHI5QCYtdi2sl8ZnXaHlqUrNKzdKcT8cjlq+rwZSvIVczNiezsfnP/uznmfPFBNODM2K7MTQ45YEAZqGP81AmGGcF3iPqOop0r1SPTaTbVkfUe4HXj97wYE+yNwWYxwWu4v1ugWHgo3S1XdZEVqWM7ET0cfnLGxWfkgR42o2PvWrDMBSFj/IHLaF0zKjRgdiVMwScNRAoWUoH78Y2icB/yIY09An6AH2Bdu/UB+yxopYshQiEvnvu0dURgDt8QeC8PDw7Fpji3fEA4z/PEJ6YOB5hKh4dj3EvXhxPqH/SKUY3rJ7srZ4FZnh1PMAtPhwP6fl2PMJMPDgeQ4rY8YT6Gzao0eAEA409DuggmTnFnOcSCiEiLMgxCiTI6Cq5DZUd3Qmp10vO0LaLTd2cjN4fOumlc7lUYbSQcZFkutRG7g6JKZKy0RmdLY680CDnEJ+UMkpFFe1RN7nxdVpXrC4aTtnaurOnYercZg2YVmLN/d/gczfEimrE/fs/bOuq29Zmn8tloORaXgZgGa78yO9/cnXm2BpaGvq25Dv9S4E9+5SIc9PqupJKhYFSSl47+Qcr1mYNAAAAeNptw0cKwkAAAMDZJA8Q7OUJvkLsPfZ6zFVERPy8qHh2YER+3i/BP83vIBLLySsoKimrqKqpa2hp6+jq6RsYGhmbmJqZSy0sraxtbO3sHRydnEMU4uR6yx7JJXveP7WrDycAAAAAAAH//wACeNpjYGRgYOABYhkgZgJCZgZNBkYGLQZtIJsFLMYAAAw3ALgAeNolizEKgDAQBCchRbC2sFER0YD6qVQiBCv/H9ezGI6Z5XBAw8CBK/m5iQQVauVbXLnOrMZv2oLdKFa8Pjuru2hJzGabmOSLzNMzvutpB3N42mNgZGBg4GKQYzBhYMxJLMlj4GBgAYow/P/PAJJhLM6sSoWKfWCAAwDAjgbRAAB42mNgYGBkAIIbCZo5IPrmUn0hGA0AO8EFTQAA'); font-weight: 400; font-style: normal } :root { --swiper-theme-color: #007aff } .swiper { margin-left: auto; margin-right: auto; position: relative; overflow: hidden; list-style: none; padding: 0; z-index: 1 } .swiper-vertical>.swiper-wrapper { flex-direction: column } .swiper-wrapper { position: relative; width: 100%; height: 100%; z-index: 1; display: flex; transition-property: transform; box-sizing: content-box } .swiper-android .swiper-slide, .swiper-wrapper { transform: translate3d(0px, 0, 0) } .swiper-pointer-events { touch-action: pan-y } .swiper-pointer-events.swiper-vertical { touch-action: pan-x } .swiper-slide { flex-shrink: 0; width: 100%; height: 100%; position: relative; transition-property: transform } .swiper-slide-invisible-blank { visibility: hidden } .swiper-autoheight, .swiper-autoheight .swiper-slide { height: auto } .swiper-autoheight .swiper-wrapper { align-items: flex-start; transition-property: transform, height } .swiper-backface-hidden .swiper-slide { transform: translateZ(0); -webkit-backface-visibility: hidden; backface-visibility: hidden } .swiper-3d, .swiper-3d.swiper-css-mode .swiper-wrapper { perspective: 1200px } .swiper-3d .swiper-cube-shadow, .swiper-3d .swiper-slide, .swiper-3d .swiper-slide-shadow, .swiper-3d .swiper-slide-shadow-bottom, .swiper-3d .swiper-slide-shadow-left, .swiper-3d .swiper-slide-shadow-right, .swiper-3d .swiper-slide-shadow-top, .swiper-3d .swiper-wrapper { transform-style: preserve-3d } .swiper-3d .swiper-slide-shadow, .swiper-3d .swiper-slide-shadow-bottom, .swiper-3d .swiper-slide-shadow-left, .swiper-3d .swiper-slide-shadow-right, .swiper-3d .swiper-slide-shadow-top { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; z-index: 10 } .swiper-3d .swiper-slide-shadow { background: rgba(0, 0, 0, .15) } .swiper-3d .swiper-slide-shadow-left { background-image: linear-gradient(to left, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0)) } .swiper-3d .swiper-slide-shadow-right { background-image: linear-gradient(to right, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0)) } .swiper-3d .swiper-slide-shadow-top { background-image: linear-gradient(to top, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0)) } .swiper-3d .swiper-slide-shadow-bottom { background-image: linear-gradient(to bottom, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0)) } .swiper-css-mode>.swiper-wrapper { overflow: auto; scrollbar-width: none; -ms-overflow-style: none } .swiper-css-mode>.swiper-wrapper::-webkit-scrollbar { display: none } .swiper-css-mode>.swiper-wrapper>.swiper-slide { scroll-snap-align: start start } .swiper-horizontal.swiper-css-mode>.swiper-wrapper { scroll-snap-type: x mandatory } .swiper-vertical.swiper-css-mode>.swiper-wrapper { scroll-snap-type: y mandatory } .swiper-centered>.swiper-wrapper::before { content: ''; flex-shrink: 0; order: 9999 } .swiper-centered.swiper-horizontal>.swiper-wrapper>.swiper-slide:first-child { margin-inline-start: var(--swiper-centered-offset-before) } .swiper-centered.swiper-horizontal>.swiper-wrapper::before { height: 100%; min-height: 1px; width: var(--swiper-centered-offset-after) } .swiper-centered.swiper-vertical>.swiper-wrapper>.swiper-slide:first-child { margin-block-start: var(--swiper-centered-offset-before) } .swiper-centered.swiper-vertical>.swiper-wrapper::before { width: 100%; min-width: 1px; height: var(--swiper-centered-offset-after) } .swiper-centered>.swiper-wrapper>.swiper-slide { scroll-snap-align: center center } .swiper-virtual .swiper-slide { -webkit-backface-visibility: hidden; transform: translateZ(0) } .swiper-virtual.swiper-css-mode .swiper-wrapper::after { content: ''; position: absolute; left: 0; top: 0; pointer-events: none } .swiper-virtual.swiper-css-mode.swiper-horizontal .swiper-wrapper::after { height: 1px; width: var(--swiper-virtual-size) } .swiper-virtual.swiper-css-mode.swiper-vertical .swiper-wrapper::after { width: 1px; height: var(--swiper-virtual-size) } :root { --swiper-navigation-size: 44px } .swiper-button-next, .swiper-button-prev { position: absolute; top: 50%; width: calc(var(--swiper-navigation-size)/ 44 * 27); height: var(--swiper-navigation-size); margin-top: calc(0px - (var(--swiper-navigation-size)/ 2)); z-index: 10; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--swiper-navigation-color, var(--swiper-theme-color)) } .swiper-button-next.swiper-button-disabled, .swiper-button-prev.swiper-button-disabled { opacity: .35; cursor: auto; pointer-events: none } .swiper-button-next:after, .swiper-button-prev:after { font-family: swiper-icons; font-size: var(--swiper-navigation-size); text-transform: none !important; letter-spacing: 0; text-transform: none; font-variant: initial; line-height: 1 } .swiper-button-prev, .swiper-rtl .swiper-button-next { left: 10px; right: auto } .swiper-button-prev:after, .swiper-rtl .swiper-button-next:after { content: 'prev' } .swiper-button-next, .swiper-rtl .swiper-button-prev { right: 10px; left: auto } .swiper-button-next:after, .swiper-rtl .swiper-button-prev:after { content: 'next' } .swiper-button-lock { display: none } .swiper-pagination { position: absolute; text-align: center; transition: .3s opacity; transform: translate3d(0, 0, 0); z-index: 10 } .swiper-pagination.swiper-pagination-hidden { opacity: 0 } .swiper-horizontal>.swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction { bottom: 10px; left: 0; width: 100% } .swiper-pagination-bullets-dynamic { overflow: hidden; font-size: 0 } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet { transform: scale(.33); position: relative } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active { transform: scale(1) } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main { transform: scale(1) } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev { transform: scale(.66) } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev { transform: scale(.33) } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next { transform: scale(.66) } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next { transform: scale(.33) } .swiper-pagination-bullet { width: var(--swiper-pagination-bullet-width, var(--swiper-pagination-bullet-size, 8px)); height: var(--swiper-pagination-bullet-height, var(--swiper-pagination-bullet-size, 8px)); display: inline-block; border-radius: 50%; background: var(--swiper-pagination-bullet-inactive-color, #000); opacity: var(--swiper-pagination-bullet-inactive-opacity, .2) } button.swiper-pagination-bullet { border: none; margin: 0; padding: 0; box-shadow: none; -webkit-appearance: none; appearance: none } .swiper-pagination-clickable .swiper-pagination-bullet { cursor: pointer } .swiper-pagination-bullet:only-child { display: none !important } .swiper-pagination-bullet-active { opacity: var(--swiper-pagination-bullet-opacity, 1); background: var(--swiper-pagination-color, var(--swiper-theme-color)) } .swiper-pagination-vertical.swiper-pagination-bullets, .swiper-vertical>.swiper-pagination-bullets { right: 10px; top: 50%; transform: translate3d(0px, -50%, 0) } .swiper-pagination-vertical.swiper-pagination-bullets .swiper-pagination-bullet, .swiper-vertical>.swiper-pagination-bullets .swiper-pagination-bullet { margin: var(--swiper-pagination-bullet-vertical-gap, 6px) 0; display: block } .swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic, .swiper-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic { top: 50%; transform: translateY(-50%); width: 8px } .swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet, .swiper-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet { display: inline-block; transition: .2s transform, .2s top } .swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet, .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet { margin: 0 var(--swiper-pagination-bullet-horizontal-gap, 4px) } .swiper-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic, .swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic { left: 50%; transform: translateX(-50%); white-space: nowrap } .swiper-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet, .swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet { transition: .2s transform, .2s left } .swiper-horizontal.swiper-rtl>.swiper-pagination-bullets-dynamic .swiper-pagination-bullet { transition: .2s transform, .2s right } .swiper-pagination-progressbar { background: rgba(0, 0, 0, .25); position: absolute } .swiper-pagination-progressbar .swiper-pagination-progressbar-fill { background: var(--swiper-pagination-color, var(--swiper-theme-color)); position: absolute; left: 0; top: 0; width: 100%; height: 100%; transform: scale(0); transform-origin: left top } .swiper-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill { transform-origin: right top } .swiper-horizontal>.swiper-pagination-progressbar, .swiper-pagination-progressbar.swiper-pagination-horizontal, .swiper-pagination-progressbar.swiper-pagination-vertical.swiper-pagination-progressbar-opposite, .swiper-vertical>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite { width: 100%; height: 4px; left: 0; top: 0 } .swiper-horizontal>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite, .swiper-pagination-progressbar.swiper-pagination-horizontal.swiper-pagination-progressbar-opposite, .swiper-pagination-progressbar.swiper-pagination-vertical, .swiper-vertical>.swiper-pagination-progressbar { width: 4px; height: 100%; left: 0; top: 0 } .swiper-pagination-lock { display: none } .swiper-scrollbar { border-radius: 10px; position: relative; -ms-touch-action: none; background: rgba(0, 0, 0, .1) } .swiper-horizontal>.swiper-scrollbar { position: absolute; left: 1%; bottom: 3px; z-index: 50; height: 5px; width: 98% } .swiper-vertical>.swiper-scrollbar { position: absolute; right: 3px; top: 1%; z-index: 50; width: 5px; height: 98% } .swiper-scrollbar-drag { height: 100%; width: 100%; position: relative; background: rgba(0, 0, 0, .5); border-radius: 10px; left: 0; top: 0 } .swiper-scrollbar-cursor-drag { cursor: move } .swiper-scrollbar-lock { display: none } .swiper-zoom-container { width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; text-align: center } .swiper-zoom-container>canvas, .swiper-zoom-container>img, .swiper-zoom-container>svg { max-width: 100%; max-height: 100%; object-fit: contain } .swiper-slide-zoomed { cursor: move } .swiper-lazy-preloader { width: 42px; height: 42px; position: absolute; left: 50%; top: 50%; margin-left: -21px; margin-top: -21px; z-index: 10; transform-origin: 50%; box-sizing: border-box; border: 4px solid var(--swiper-preloader-color, var(--swiper-theme-color)); border-radius: 50%; border-top-color: transparent } .swiper-slide-visible .swiper-lazy-preloader { animation: swiper-preloader-spin 1s infinite linear } .swiper-lazy-preloader-white { --swiper-preloader-color: #fff } .swiper-lazy-preloader-black { --swiper-preloader-color: #000 } @keyframes swiper-preloader-spin { 100% { transform: rotate(360deg) } } .swiper .swiper-notification { position: absolute; left: 0; top: 0; pointer-events: none; opacity: 0; z-index: -1000 } .swiper-free-mode>.swiper-wrapper { transition-timing-function: ease-out; margin: 0 auto } .swiper-grid>.swiper-wrapper { flex-wrap: wrap } .swiper-grid-column>.swiper-wrapper { flex-wrap: wrap; flex-direction: column } .swiper-fade.swiper-free-mode .swiper-slide { transition-timing-function: ease-out } .swiper-fade .swiper-slide { pointer-events: none; transition-property: opacity } .swiper-fade .swiper-slide .swiper-slide { pointer-events: none } .swiper-fade .swiper-slide-active, .swiper-fade .swiper-slide-active .swiper-slide-active { pointer-events: auto } .swiper-cube { overflow: visible } .swiper-cube .swiper-slide { pointer-events: none; -webkit-backface-visibility: hidden; backface-visibility: hidden; z-index: 1; visibility: hidden; transform-origin: 0 0; width: 100%; height: 100% } .swiper-cube .swiper-slide .swiper-slide { pointer-events: none } .swiper-cube.swiper-rtl .swiper-slide { transform-origin: 100% 0 } .swiper-cube .swiper-slide-active, .swiper-cube .swiper-slide-active .swiper-slide-active { pointer-events: auto } .swiper-cube .swiper-slide-active, .swiper-cube .swiper-slide-next, .swiper-cube .swiper-slide-next+.swiper-slide, .swiper-cube .swiper-slide-prev { pointer-events: auto; visibility: visible } .swiper-cube .swiper-slide-shadow-bottom, .swiper-cube .swiper-slide-shadow-left, .swiper-cube .swiper-slide-shadow-right, .swiper-cube .swiper-slide-shadow-top { z-index: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden } .swiper-cube .swiper-cube-shadow { position: absolute; left: 0; bottom: 0px; width: 100%; height: 100%; opacity: .6; z-index: 0 } .swiper-cube .swiper-cube-shadow:before { content: ''; background: #000; position: absolute; left: 0; top: 0; bottom: 0; right: 0; filter: blur(50px) } .swiper-flip { overflow: visible } .swiper-flip .swiper-slide { pointer-events: none; -webkit-backface-visibility: hidden; backface-visibility: hidden; z-index: 1 } .swiper-flip .swiper-slide .swiper-slide { pointer-events: none } .swiper-flip .swiper-slide-active, .swiper-flip .swiper-slide-active .swiper-slide-active { pointer-events: auto } .swiper-flip .swiper-slide-shadow-bottom, .swiper-flip .swiper-slide-shadow-left, .swiper-flip .swiper-slide-shadow-right, .swiper-flip .swiper-slide-shadow-top { z-index: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden } .swiper-creative .swiper-slide { -webkit-backface-visibility: hidden; backface-visibility: hidden; overflow: hidden; transition-property: transform, opacity, height } .swiper-cards { overflow: visible } .swiper-cards .swiper-slide { transform-origin: center bottom; -webkit-backface-visibility: hidden; backface-visibility: hidden; overflow: hidden } /* fancyBox v3.5.7 */ body.compensate-for-scrollbar { overflow: hidden } .fancybox-active { height: auto } .fancybox-is-hidden { left: -9999px; margin: 0; position: absolute !important; top: -9999px; visibility: hidden } .fancybox-container { -webkit-backface-visibility: hidden; height: 100%; left: 0; outline: none; position: fixed; -webkit-tap-highlight-color: transparent; top: 0; -ms-touch-action: manipulation; touch-action: manipulation; transform: translateZ(0); width: 100%; z-index: 99992 } .fancybox-container * { box-sizing: border-box } .fancybox-bg, .fancybox-inner, .fancybox-outer, .fancybox-stage { bottom: 0; left: 0; position: absolute; right: 0; top: 0 } .fancybox-outer { -webkit-overflow-scrolling: touch; overflow-y: auto } .fancybox-bg { background: #1e1e1e; opacity: 0; transition-duration: inherit; transition-property: opacity; transition-timing-function: cubic-bezier(.47, 0, .74, .71) } .fancybox-is-open .fancybox-bg { opacity: .9; transition-timing-function: cubic-bezier(.22, .61, .36, 1) } .fancybox-caption, .fancybox-infobar, .fancybox-navigation .fancybox-button, .fancybox-toolbar { direction: ltr; opacity: 0; position: absolute; transition: opacity .25s ease, visibility 0s ease .25s; visibility: hidden; z-index: 99997 } .fancybox-show-caption .fancybox-caption, .fancybox-show-infobar .fancybox-infobar, .fancybox-show-nav .fancybox-navigation .fancybox-button, .fancybox-show-toolbar .fancybox-toolbar { opacity: 1; transition: opacity .25s ease 0s, visibility 0s ease 0s; visibility: visible } .fancybox-infobar { color: #ccc; font-size: 13px; -webkit-font-smoothing: subpixel-antialiased; height: 44px; left: 0; line-height: 44px; min-width: 44px; mix-blend-mode: difference; padding: 0 10px; pointer-events: none; top: 0; -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none } .fancybox-toolbar { right: 0; top: 0 } .fancybox-stage { direction: ltr; overflow: visible; transform: translateZ(0); z-index: 99994 } .fancybox-is-open .fancybox-stage { overflow: hidden } .fancybox-slide { -webkit-backface-visibility: hidden; display: none; height: 100%; left: 0; outline: none; overflow: auto; -webkit-overflow-scrolling: touch; padding: 44px; position: absolute; text-align: center; top: 0; transition-property: transform, opacity; white-space: normal; width: 100%; z-index: 99994 } .fancybox-slide:before { content: ""; display: inline-block; font-size: 0; height: 100%; vertical-align: middle; width: 0 } .fancybox-is-sliding .fancybox-slide, .fancybox-slide--current, .fancybox-slide--next, .fancybox-slide--previous { display: block } .fancybox-slide--image { overflow: hidden; padding: 44px 0 } .fancybox-slide--image:before { display: none } .fancybox-slide--html { padding: 6px } .fancybox-content { background: #fff; display: inline-block; margin: 0; max-width: 100%; overflow: auto; -webkit-overflow-scrolling: touch; padding: 44px; position: relative; text-align: left; vertical-align: middle } .fancybox-slide--image .fancybox-content { animation-timing-function: cubic-bezier(.5, 0, .14, 1); -webkit-backface-visibility: hidden; background: transparent; background-repeat: no-repeat; background-size: 100% 100%; left: 0; max-width: none; overflow: visible; padding: 0; position: absolute; top: 0; transform-origin: top left; transition-property: transform, opacity; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; z-index: 99995 } .fancybox-can-zoomOut .fancybox-content { cursor: zoom-out } .fancybox-can-zoomIn .fancybox-content { cursor: zoom-in } .fancybox-can-pan .fancybox-content, .fancybox-can-swipe .fancybox-content { cursor: grab } .fancybox-is-grabbing .fancybox-content { cursor: grabbing } .fancybox-container [data-selectable=true] { cursor: text } .fancybox-image, .fancybox-spaceball { background: transparent; border: 0; height: 100%; left: 0; margin: 0; max-height: none; max-width: none; padding: 0; position: absolute; top: 0; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; width: 100% } .fancybox-spaceball { z-index: 1 } .fancybox-slide--iframe .fancybox-content, .fancybox-slide--map .fancybox-content, .fancybox-slide--pdf .fancybox-content, .fancybox-slide--video .fancybox-content { height: 100%; overflow: visible; padding: 0; width: 100% } .fancybox-slide--video .fancybox-content { background: #000 } .fancybox-slide--map .fancybox-content { background: #e5e3df } .fancybox-slide--iframe .fancybox-content { background: #fff } .fancybox-iframe, .fancybox-video { background: transparent; border: 0; display: block; height: 100%; margin: 0; overflow: hidden; padding: 0; width: 100% } .fancybox-iframe { left: 0; position: absolute; top: 0 } .fancybox-error { background: #fff; cursor: default; max-width: 400px; padding: 40px; width: 100% } .fancybox-error p { color: #444; font-size: 16px; line-height: 20px; margin: 0; padding: 0 } .fancybox-button { background: rgba(30, 30, 30, .6); border: 0; border-radius: 0; box-shadow: none; cursor: pointer; display: inline-block; height: 44px; margin: 0; padding: 10px; position: relative; transition: color .2s; vertical-align: top; visibility: inherit; width: 44px } .fancybox-button, .fancybox-button:link, .fancybox-button:visited { color: #ccc } .fancybox-button:hover { color: #fff } .fancybox-button:focus { outline: none } .fancybox-button.fancybox-focus { outline: 1px dotted } .fancybox-button[disabled], .fancybox-button[disabled]:hover { color: #888; cursor: default; outline: none } .fancybox-button div { height: 100% } .fancybox-button svg { display: block; height: 100%; overflow: visible; position: relative; width: 100% } .fancybox-button svg path { fill: currentColor; stroke-width: 0 } .fancybox-button--fsenter svg:nth-child(2), .fancybox-button--fsexit svg:first-child, .fancybox-button--pause svg:first-child, .fancybox-button--play svg:nth-child(2) { display: none } .fancybox-progress { background: #ff5268; height: 2px; left: 0; position: absolute; right: 0; top: 0; transform: scaleX(0); transform-origin: 0; transition-property: transform; transition-timing-function: linear; z-index: 99998 } .fancybox-close-small { background: transparent; border: 0; border-radius: 0; color: #ccc; cursor: pointer; opacity: .8; padding: 8px; position: absolute; right: -12px; top: -44px; z-index: 401 } .fancybox-close-small:hover { color: #fff; opacity: 1 } .fancybox-slide--html .fancybox-close-small { color: currentColor; padding: 10px; right: 0; top: 0 } .fancybox-slide--image.fancybox-is-scaling .fancybox-content { overflow: hidden } .fancybox-is-scaling .fancybox-close-small, .fancybox-is-zoomable.fancybox-can-pan .fancybox-close-small { display: none } .fancybox-navigation .fancybox-button { background-clip: content-box; height: 100px; opacity: 0; position: absolute; top: calc(50% - 50px); width: 70px } .fancybox-navigation .fancybox-button div { padding: 7px } .fancybox-navigation .fancybox-button--arrow_left { left: 0; left: env(safe-area-inset-left); padding: 31px 26px 31px 6px } .fancybox-navigation .fancybox-button--arrow_right { padding: 31px 6px 31px 26px; right: 0; right: env(safe-area-inset-right) } .fancybox-caption { background: linear-gradient(0deg, rgba(0, 0, 0, .85) 0, rgba(0, 0, 0, .3) 50%, rgba(0, 0, 0, .15) 65%, rgba(0, 0, 0, .075) 75.5%, rgba(0, 0, 0, .037) 82.85%, rgba(0, 0, 0, .019) 88%, transparent); bottom: 0; color: #eee; font-size: 14px; font-weight: 400; left: 0; line-height: 1.5; padding: 75px 44px 25px; pointer-events: none; right: 0; text-align: center; z-index: 99996 } @supports (padding:max(0px)) { .fancybox-caption { padding: 75px max(44px, env(safe-area-inset-right)) max(25px, env(safe-area-inset-bottom)) max(44px, env(safe-area-inset-left)) } } .fancybox-caption--separate { margin-top: -50px } .fancybox-caption__body { max-height: 50vh; overflow: auto; pointer-events: all } .fancybox-caption a, .fancybox-caption a:link, .fancybox-caption a:visited { color: #ccc; text-decoration: none } .fancybox-caption a:hover { color: #fff; text-decoration: underline } .fancybox-loading { animation: a 1s linear infinite; background: transparent; border: 4px solid #888; border-bottom-color: #fff; border-radius: 50%; height: 50px; left: 50%; margin: -25px 0 0 -25px; opacity: .7; padding: 0; position: absolute; top: 50%; width: 50px; z-index: 99999 } @keyframes a { to { transform: rotate(1turn) } } .fancybox-animated { transition-timing-function: cubic-bezier(0, 0, .25, 1) } .fancybox-fx-slide.fancybox-slide--previous { opacity: 0; transform: translate3d(-100%, 0, 0) } .fancybox-fx-slide.fancybox-slide--next { opacity: 0; transform: translate3d(100%, 0, 0) } .fancybox-fx-slide.fancybox-slide--current { opacity: 1; transform: translateZ(0) } .fancybox-fx-fade.fancybox-slide--next, .fancybox-fx-fade.fancybox-slide--previous { opacity: 0; transition-timing-function: cubic-bezier(.19, 1, .22, 1) } .fancybox-fx-fade.fancybox-slide--current { opacity: 1 } .fancybox-fx-zoom-in-out.fancybox-slide--previous { opacity: 0; transform: scale3d(1.5, 1.5, 1.5) } .fancybox-fx-zoom-in-out.fancybox-slide--next { opacity: 0; transform: scale3d(.5, .5, .5) } .fancybox-fx-zoom-in-out.fancybox-slide--current { opacity: 1; transform: scaleX(1) } .fancybox-fx-rotate.fancybox-slide--previous { opacity: 0; transform: rotate(-1turn) } .fancybox-fx-rotate.fancybox-slide--next { opacity: 0; transform: rotate(1turn) } .fancybox-fx-rotate.fancybox-slide--current { opacity: 1; transform: rotate(0deg) } .fancybox-fx-circular.fancybox-slide--previous { opacity: 0; transform: scale3d(0, 0, 0) translate3d(-100%, 0, 0) } .fancybox-fx-circular.fancybox-slide--next { opacity: 0; transform: scale3d(0, 0, 0) translate3d(100%, 0, 0) } .fancybox-fx-circular.fancybox-slide--current { opacity: 1; transform: scaleX(1) translateZ(0) } .fancybox-fx-tube.fancybox-slide--previous { transform: translate3d(-100%, 0, 0) scale(.1) skew(-10deg) } .fancybox-fx-tube.fancybox-slide--next { transform: translate3d(100%, 0, 0) scale(.1) skew(10deg) } .fancybox-fx-tube.fancybox-slide--current { transform: translateZ(0) scale(1) } @media (max-height:576px) { .fancybox-slide { padding-left: 6px; padding-right: 6px } .fancybox-slide--image { padding: 6px 0 } .fancybox-close-small { right: -6px } .fancybox-slide--image .fancybox-close-small { background: #4e4e4e; color: #f2f4f6; height: 36px; opacity: 1; padding: 6px; right: 0; top: 0; width: 36px } .fancybox-caption { padding-left: 12px; padding-right: 12px } @supports (padding:max(0px)) { .fancybox-caption { padding-left: max(12px, env(safe-area-inset-left)); padding-right: max(12px, env(safe-area-inset-right)) } } } .fancybox-share { background: #f4f4f4; border-radius: 3px; max-width: 90%; padding: 30px; text-align: center } .fancybox-share h1 { color: #222; font-size: 35px; font-weight: 700; margin: 0 0 20px } .fancybox-share p { margin: 0; padding: 0 } .fancybox-share__button { border: 0; border-radius: 3px; display: inline-block; font-size: 14px; font-weight: 700; line-height: 40px; margin: 0 5px 10px; min-width: 130px; padding: 0 15px; text-decoration: none; transition: all .2s; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; white-space: nowrap } .fancybox-share__button:link, .fancybox-share__button:visited { color: #fff } .fancybox-share__button:hover { text-decoration: none } .fancybox-share__button--fb { background: #3b5998 } .fancybox-share__button--fb:hover { background: #344e86 } .fancybox-share__button--pt { background: #bd081d } .fancybox-share__button--pt:hover { background: #aa0719 } .fancybox-share__button--tw { background: #1da1f2 } .fancybox-share__button--tw:hover { background: #0d95e8 } .fancybox-share__button svg { height: 25px; margin-right: 7px; position: relative; top: -1px; vertical-align: middle; width: 25px } .fancybox-share__button svg path { fill: #fff } .fancybox-share__input { background: transparent; border: 0; border-bottom: 1px solid #d7d7d7; border-radius: 0; color: #5d5b5b; font-size: 14px; margin: 10px 0 0; outline: none; padding: 10px 15px; width: 100% } .fancybox-thumbs { background: #ddd; bottom: 0; display: none; margin: 0; -webkit-overflow-scrolling: touch; -ms-overflow-style: -ms-autohiding-scrollbar; padding: 2px 2px 4px; position: absolute; right: 0; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); top: 0; width: 212px; z-index: 99995 } .fancybox-thumbs-x { overflow-x: auto; overflow-y: hidden } .fancybox-show-thumbs .fancybox-thumbs { display: block } .fancybox-show-thumbs .fancybox-inner { right: 212px } .fancybox-thumbs__list { font-size: 0; height: 100%; list-style: none; margin: 0; overflow-x: hidden; overflow-y: auto; padding: 0; position: absolute; position: relative; white-space: nowrap; width: 100% } .fancybox-thumbs-x .fancybox-thumbs__list { overflow: hidden } .fancybox-thumbs-y .fancybox-thumbs__list::-webkit-scrollbar { width: 7px } .fancybox-thumbs-y .fancybox-thumbs__list::-webkit-scrollbar-track { background: #fff; border-radius: 10px; box-shadow: inset 0 0 6px rgba(0, 0, 0, .3) } .fancybox-thumbs-y .fancybox-thumbs__list::-webkit-scrollbar-thumb { background: #2a2a2a; border-radius: 10px } .fancybox-thumbs__list a { -webkit-backface-visibility: hidden; backface-visibility: hidden; background-color: rgba(0, 0, 0, .1); background-position: 50%; background-repeat: no-repeat; background-size: cover; cursor: pointer; float: left; height: 75px; margin: 2px; max-height: calc(100% - 8px); max-width: calc(50% - 4px); outline: none; overflow: hidden; padding: 0; position: relative; -webkit-tap-highlight-color: transparent; width: 100px } .fancybox-thumbs__list a:before { border: 6px solid #ff5268; bottom: 0; content: ""; left: 0; opacity: 0; position: absolute; right: 0; top: 0; transition: all .2s cubic-bezier(.25, .46, .45, .94); z-index: 99991 } .fancybox-thumbs__list a:focus:before { opacity: .5 } .fancybox-thumbs__list a.fancybox-thumbs-active:before { opacity: 1 } @media (max-width:576px) { .fancybox-thumbs { width: 110px } .fancybox-show-thumbs .fancybox-inner { right: 110px } .fancybox-thumbs__list a { max-width: calc(100% - 10px) } } /*! Animate.css - http://daneden.me/animate Licensed under the MIT license - http://opensource.org/licenses/MIT Copyright (c) 2015 Daniel Eden */ .animated { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .animated.infinite { -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; } .animated.hinge { -webkit-animation-duration: 2s; animation-duration: 2s; } .animated.bounceIn, .animated.bounceOut { -webkit-animation-duration: .75s; animation-duration: .75s; } .animated.flipOutX, .animated.flipOutY { -webkit-animation-duration: .75s; animation-duration: .75s; } @-webkit-keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } .fadeIn { -webkit-animation-name: fadeIn; animation-name: fadeIn; } @-webkit-keyframes fadeInDown { 0% { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInDown { 0% { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } .fadeInDown { -webkit-animation-name: fadeInDown; animation-name: fadeInDown; } @-webkit-keyframes fadeInDownBig { 0% { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInDownBig { 0% { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } .fadeInDownBig { -webkit-animation-name: fadeInDownBig; animation-name: fadeInDownBig; } @-webkit-keyframes fadeInLeft { 0% { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInLeft { 0% { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } .fadeInLeft { -webkit-animation-name: fadeInLeft; animation-name: fadeInLeft; } @-webkit-keyframes fadeInLeftBig { 0% { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInLeftBig { 0% { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } .fadeInLeftBig { -webkit-animation-name: fadeInLeftBig; animation-name: fadeInLeftBig; } @-webkit-keyframes fadeInRight { 0% { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInRight { 0% { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } .fadeInRight { -webkit-animation-name: fadeInRight; animation-name: fadeInRight; } @-webkit-keyframes fadeInRightBig { 0% { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInRightBig { 0% { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } .fadeInRightBig { -webkit-animation-name: fadeInRightBig; animation-name: fadeInRightBig; } @-webkit-keyframes fadeInUp { 0% { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInUp { 0% { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } .fadeInUp { -webkit-animation-name: fadeInUp; animation-name: fadeInUp; } @-webkit-keyframes fadeInUpBig { 0% { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInUpBig { 0% { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } .fadeInUpBig { -webkit-animation-name: fadeInUpBig; animation-name: fadeInUpBig; } @-webkit-keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } @keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } .fadeOut { -webkit-animation-name: fadeOut; animation-name: fadeOut; } @-webkit-keyframes fadeOutDown { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } } @keyframes fadeOutDown { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } } .fadeOutDown { -webkit-animation-name: fadeOutDown; animation-name: fadeOutDown; } @-webkit-keyframes fadeOutDownBig { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } } @keyframes fadeOutDownBig { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } } .fadeOutDownBig { -webkit-animation-name: fadeOutDownBig; animation-name: fadeOutDownBig; } @-webkit-keyframes fadeOutLeft { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } } @keyframes fadeOutLeft { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } } .fadeOutLeft { -webkit-animation-name: fadeOutLeft; animation-name: fadeOutLeft; } @-webkit-keyframes fadeOutLeftBig { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); } } @keyframes fadeOutLeftBig { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); } } .fadeOutLeftBig { -webkit-animation-name: fadeOutLeftBig; animation-name: fadeOutLeftBig; } @-webkit-keyframes fadeOutRight { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } } @keyframes fadeOutRight { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } } .fadeOutRight { -webkit-animation-name: fadeOutRight; animation-name: fadeOutRight; } @-webkit-keyframes fadeOutRightBig { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); } } @keyframes fadeOutRightBig { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); } } .fadeOutRightBig { -webkit-animation-name: fadeOutRightBig; animation-name: fadeOutRightBig; } @-webkit-keyframes fadeOutUp { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } } @keyframes fadeOutUp { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } } .fadeOutUp { -webkit-animation-name: fadeOutUp; animation-name: fadeOutUp; } @-webkit-keyframes fadeOutUpBig { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } } @keyframes fadeOutUpBig { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } } .fadeOutUpBig { -webkit-animation-name: fadeOutUpBig; animation-name: fadeOutUpBig; } @-webkit-keyframes slideInDown { 0% { -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); visibility: visible; } 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes slideInDown { 0% { -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); visibility: visible; } 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .slideInDown { -webkit-animation-name: slideInDown; animation-name: slideInDown; } @-webkit-keyframes slideInLeft { 0% { -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); visibility: visible; } 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes slideInLeft { 0% { -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); visibility: visible; } 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .slideInLeft { -webkit-animation-name: slideInLeft; animation-name: slideInLeft; } @-webkit-keyframes slideInRight { 0% { -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); visibility: visible; } 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes slideInRight { 0% { -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); visibility: visible; } 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .slideInRight { -webkit-animation-name: slideInRight; animation-name: slideInRight; } @-webkit-keyframes slideInUp { 0% { -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); visibility: visible; } 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes slideInUp { 0% { -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); visibility: visible; } 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .slideInUp { -webkit-animation-name: slideInUp; animation-name: slideInUp; } @-webkit-keyframes slideOutDown { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { visibility: hidden; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } } @keyframes slideOutDown { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { visibility: hidden; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } } .slideOutDown { -webkit-animation-name: slideOutDown; animation-name: slideOutDown; } @-webkit-keyframes slideOutLeft { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { visibility: hidden; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } } @keyframes slideOutLeft { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { visibility: hidden; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } } .slideOutLeft { -webkit-animation-name: slideOutLeft; animation-name: slideOutLeft; } @-webkit-keyframes slideOutRight { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { visibility: hidden; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } } @keyframes slideOutRight { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { visibility: hidden; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } } .slideOutRight { -webkit-animation-name: slideOutRight; animation-name: slideOutRight; } @-webkit-keyframes slideOutUp { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { visibility: hidden; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } } @keyframes slideOutUp { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { visibility: hidden; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } } .slideOutUp { -webkit-animation-name: slideOutUp; animation-name: slideOutUp; } .spinner { width: 50px; height: 16px; text-align: center; font-size: 10px; position: relative; top: 50%; margin: -8px auto 100px; } .spinner > div { background-color: #666; height: 100%; width: 1px; display: inline-block; -webkit-animation: stretchdelay 1.2s infinite ease-in-out; animation: stretchdelay 1.2s infinite ease-in-out; } .spinner .rect2 { -webkit-animation-delay: -1.1s; animation-delay: -1.1s; } .spinner .rect3 { -webkit-animation-delay: -1.0s; animation-delay: -1.0s; } .spinner .rect4 { -webkit-animation-delay: -0.9s; animation-delay: -0.9s; } .spinner .rect5 { -webkit-animation-delay: -0.8s; animation-delay: -0.8s; } @-webkit-keyframes stretchdelay { 0%, 40%, 100% { -webkit-transform: scaleY(0.4) } 20% { -webkit-transform: scaleY(1.0) } } @keyframes stretchdelay { 0%, 40%, 100% { transform: scaleY(0.4); -webkit-transform: scaleY(0.4); } 20% { transform: scaleY(1.0); -webkit-transform: scaleY(1.0); } } /* fine spinner */ /* SOUND TOGGLE ANIMATION */ @-webkit-keyframes sound-toggle { 0% { -webkit-transform: scale(1, 0.1); transform: scale(1, 0.1) } 25% { -webkit-transform: scale(1, 1); transform: scale(1, 1) } 50% { -webkit-transform: scale(1, 0.3); transform: scale(1, 0.3) } 75% { -webkit-transform: scale(1, 0.6); transform: scale(1, 0.6) } 100% { -webkit-transform: scale(1, 0.1); transform: scale(1, 0.1) } } @keyframes sound-toggle { 0% { -webkit-transform: scale(1, 0.1); transform: scale(1, 0.1) } 25% { -webkit-transform: scale(1, 1); transform: scale(1, 1) } 50% { -webkit-transform: scale(1, 0.3); transform: scale(1, 0.3) } 75% { -webkit-transform: scale(1, 0.6); transform: scale(1, 0.6) } 100% { -webkit-transform: scale(1, 0.1); transform: scale(1, 0.1) } }