/*! ------------------------------------------------ * Project Name: Rayo - Digital Agency & Personal Portfolio HTML Template * Project Description: Elevate your digital presence with Rayo - dynamic and stylish HTML template designed for creative agencies and personal brands. With modern layouts, smooth interactions and a polished aesthetic, Rayo template helps showcase projects, services and expertise with clarity and impact. * Tags: mix_design, resume, portfolio, personal page, cv, template, one page, responsive, html5, css3, creative, clean, agency, studio * Version: 1.0.0 * Build Date: July 2025 * Last Update: January 2026 * This product is available exclusively on Themeforest * Author: mix_design * Author URI: https://themeforest.net/user/mix_design */ /*! File name: main.css * ------------------------------------------------ * ------------------------------------------------ * Table of Contents * ------------------------------------------------ * 01. Fonts * 02. Variables * 03. Template Backgrounds * 04. Basic Styles * 05. Elements - Page Structure * 06. Elements - Typography * 07. Elements - Controls * 08. Elements - Forms * 09. Elements - Components * 10. Elements - Common Classes * 11. Block - Header * 12. Block - Menu * 13. Block - CTA * 14. Block - Footer * 15. Block - Popup * 16. Block - Hero Section #00 * 17. Block - Hero Section #01 * 18. Block - Hero Section #02 * 19. Block - Hero Section #03 * 20. Block - Hero Section #04 * 21. Block - Hero Section #05 * 22. Block - Hero Section #06 * 22. Block - Hero Section #07 * 23. Block - Hero Section #08 * 24. Block - Hero Section #09 * 25. Block - Blog * 26. Block - Blog Article * 27. Block - 404 Error * 28. Block - Demo List * 29. Block - Demo Cards * 30. Block - Demo Responsive Promo * 31. Block - Demo Inner Pages Slider * 32. Block - Demo Components * 33. Block - Demo Features * 34. Block - Demo CTA * 35. Block - Demo Footer * 36. Features - Hover Reveal * 37. Features - About * 38. Features - Pinned Image * 39. Features - Pinned Universal * 40. Features - Pinned Projects * 41. Features - Projects List * 42. Features - Projects Masonry * 43. Features - Awards List * 44. Features - Statistics Simple * 45. Features - Statistics Cards * 46. Features - Services Cards #01 * 47. Features - Services Cards #02 * 48. Features - Services List * 49. Features - Capabilities List * 50. Features - Resume List * 51. Features - Approach List * 52. Features - Divider Image Parallax * 53. Features - Marquee * 54. Features - Stack Services #01 * 55. Features - Stack Services #02 * 56. Features - Stack Projects * 57. Features - Testimonials Style #01 * 58. Features - Testimonials Style #02 * 59. Features - Partners Cards * 60. Features - Tech Stack Cards * 61. Features - Blog Preview * 62. Features - Accordion * 63. Features - Pricing Cards * 64. Features - Team Cards * 65. Features - Values * 66. Features - Project Details * ------------------------------------------------ * Table of Contents End * ------------------------------------------------ */ /* ------------------------------------------------*/ /* Fonts Start */ /* ------------------------------------------------*/ /* Funnel Display font */ @import url("https://fonts.googleapis.com/css2?family=Funnel+Display:wght@300..800&display=swap"); /* Funnel Sans font */ @import url("https://fonts.googleapis.com/css2?family=Funnel+Sans:ital,wght@0,300..800;1,300..800&display=swap"); /* ------------------------------------------------*/ /* Fonts End */ /* ------------------------------------------------*/ /* ------------------------------------------------*/ /* Variables Start */ /* ------------------------------------------------*/ :root { --_size: 1.8rem; --_font-default: "Funnel Sans", sans-serif; --_font-accent: "Funnel Display", sans-serif; --_radius-s: 1rem; --_radius-m: 1.6rem; --_radius-pt-m: 1.6rem; --_radius-l: 3.8rem; --_radius-xl: 6rem; --_animspeed-fast: 0.1s; --_animspeed-medium: 0.3s; --_animspeed-slow: 0.6s; --_animbezier: cubic-bezier(0.23, 0.65, 0.74, 1.09); /* light color scheme */ --base--light: #FAF7F6; --base-rgb--light: 250, 247, 246; --base-tint--light: #FFFFFF; --base-shade--light: #e0dddb; --base-opp--light: #1f2933; --base-opp-tint--light: #1C1C1C; --accent--light: #0022FF; --accent-rgb--light: 0, 34, 255; --additional--light: #FF007F; --additional-rgb--light: 255, 0, 127; --neutral-transparent--light: rgba(255, 255, 255, 0.3); --st-bright--light: #161616; --st-medium--light: #7C7C7C; --st-muted--light: #E0DDDB; --st-opp-bright--light: #FFFFFF; --fw-regular--light: 400; --fw-medium--light: 600; --fw-semibold--light: 700; --fw-bold--light: 800; --fw-regular-opp--light: 300; --fw-medium-opp--light: 500; --t-bright--light: #161616; --t-medium--light: #303030; --t-muted--light: #585858; --t-muted-extra--light: #B2AEAD; --t-opp-bright--light: #FFFFFF; --t-opp-medium--light: #ACACAC; --t-opp-muted--light: #838383; --bg-demo-screen-01--light: url(../img/demo/screens/01.webp); --bg-demo-screen-02--light: url(../img/demo/screens/02.webp); --bg-demo-screen-03--light: url(../img/demo/screens/03.webp); --bg-demo-screen-04--light: url(../img/demo/screens/04.webp); --bg-demo-screen-05--light: url(../img/demo/screens/05.webp); --bg-demo-screen-06--light: url(../img/demo/screens/06.webp); --bg-demo-screen-07--light: url(../img/demo/screens/07.webp); --bg-demo-screen-08--light: url(../img/demo/screens/08.webp); --bg-demo-screen-09--light: url(../img/demo/screens/09.webp); /* dark color scheme */ --base--dark: #161616; --base-rgb--dark: 22, 22, 22; --base-tint--dark: #1C1C1C; --base-shade--dark: #0a0a0a; --base-opp--dark: #FAF7F6; --base-opp-tint--dark: #ffffff; --accent--dark: #0022FF; --accent-rgb--dark: 0, 34, 255; --additional--dark: #FF007F; --additional-rgb--dark: 255, 0, 127; --neutral-transparent--dark: rgba(0, 0, 0, 0.3); --st-bright--dark: #FFFFFF; --st-medium--dark: #646464; --st-muted--dark: #252525; --st-opp-bright--dark: #0f0f0f; --fw-regular--dark: 300; --fw-medium--dark: 500; --fw-semibold--dark: 600; --fw-bold--dark: 700; --fw-regular-opp--dark: 400; --fw-medium-opp--dark: 600; --t-bright--dark: #FFFFFF; --t-medium--dark: #ACACAC; --t-muted--dark: #838383; --t-muted-extra--dark: #535151; --t-opp-bright--dark: #161616; --t-opp-medium--dark: #303030; --t-opp-muted--dark: #969696; --bg-demo-screen-01--dark: url(../img/demo/screens/01-d.webp); --bg-demo-screen-02--dark: url(../img/demo/screens/02-d.webp); --bg-demo-screen-03--dark: url(../img/demo/screens/03-d.webp); --bg-demo-screen-04--dark: url(../img/demo/screens/04-d.webp); --bg-demo-screen-05--dark: url(../img/demo/screens/05-d.webp); --bg-demo-screen-06--dark: url(../img/demo/screens/06-d.webp); --bg-demo-screen-07--dark: url(../img/demo/screens/07-d.webp); --bg-demo-screen-08--dark: url(../img/demo/screens/08-d.webp); --bg-demo-screen-09--dark: url(../img/demo/screens/09-d.webp); /* permanent colors */ --pt-base: #FFFFFF; --pt-base-dark: #161616; --pt-t-light-bright: #FFFFFF; --pt-t-dark-bright: #161616; --pt-st-light-bright: #FFFFFF; --pt-st-dark-bright: #161616; --pt-purple-rgb: 159, 139, 231; --pt-purple-dark-rgb: 33, 10, 113; /* neutral colors */ --nl-white: #ffffff; --nl-black: #000000; } @media only screen and (min-width: 768px) { :root { --_radius-m: 2.6rem; --_radius-l: 5rem; --_radius-xl: 8rem; } } @media only screen and (min-width: 1200px) { :root { --_radius-xl: 8rem; } } /* defaults */ @media (prefers-color-scheme: light) { :root { --base: var(--base--light); --base-rgb: var(--base-rgb--light); --base-tint: var(--base-tint--light); --base-shade: var(--base-shade--light); --base-opp: var(--base-opp--light); --base-opp-tint: var(--base-opp-tint--light); --accent: var(--accent--light); --accent-rgb: var(--accent-rgb--light); --additional: var(--additional--light); --additional-rgb: var(--additional-rgb--light); --neutral-transparent: var(--neutral-transparent--light); --st-bright: var(--st-bright--light); --st-medium: var(--st-medium--light); --st-muted: var(--st-muted--light); --st-opp-bright: var(--st-opp-bright--light); --fw-regular: var(--fw-regular--light); --fw-medium: var(--fw-medium--light); --fw-semibold: var(--fw-semibold--light); --fw-bold: var(--fw-bold--light); --fw-regular-opp: var(--fw-regular-opp--light); --fw-medium-opp: var(--fw-medium-opp--light); --t-bright: var(--t-bright--light); --t-medium: var(--t-medium--light); --t-muted: var(--t-muted--light); --t-muted-extra: var(--t-muted-extra--light); --t-opp-bright: var(--t-opp-bright--light); --t-opp-medium: var(--t-opp-medium--light); --t-opp-muted: var(--t-opp-muted--light); --bg-demo-screen-01: var(--bg-demo-screen-01--light); --bg-demo-screen-02: var(--bg-demo-screen-02--light); --bg-demo-screen-03: var(--bg-demo-screen-03--light); --bg-demo-screen-04: var(--bg-demo-screen-04--light); --bg-demo-screen-05: var(--bg-demo-screen-05--light); --bg-demo-screen-06: var(--bg-demo-screen-06--light); --bg-demo-screen-07: var(--bg-demo-screen-07--light); --bg-demo-screen-08: var(--bg-demo-screen-08--light); --bg-demo-screen-09: var(--bg-demo-screen-09--light); } } @media (prefers-color-scheme: dark) { :root { --base: var(--base--dark); --base-rgb: var(--base-rgb--dark); --base-tint: var(--base-tint--dark); --base-shade: var(--base-shade--dark); --base-opp: var(--base-opp--dark); --base-opp-tint: var(--base-opp-tint--dark); --accent: var(--accent--dark); --accent-rgb: var(--accent-rgb--dark); --additional: var(--additional--dark); --additional-rgb: var(--additional-rgb--dark); --neutral-transparent: var(--neutral-transparent--dark); --st-bright: var(--st-bright--dark); --st-medium: var(--st-medium--dark); --fw-semibold: var(--fw-semibold--dark); --st-muted: var(--st-muted--dark); --st-opp-bright: var(--st-opp-bright--dark); --fw-regular: var(--fw-regular--dark); --fw-medium: var(--fw-medium--dark); --fw-bold: var(--fw-bold--dark); --fw-regular-opp: var(--fw-regular-opp--dark); --fw-medium-opp: var(--fw-medium-opp--dark); --t-bright: var(--t-bright--dark); --t-medium: var(--t-medium--dark); --t-muted: var(--t-muted--dark); --t-muted-extra: var(--t-muted-extra--dark); --t-opp-bright: var(--t-opp-bright--dark); --t-opp-medium: var(--t-opp-medium--dark); --t-opp-muted: var(--t-opp-muted--dark); --bg-demo-screen-01: var(--bg-demo-screen-01--dark); --bg-demo-screen-02: var(--bg-demo-screen-02--dark); --bg-demo-screen-03: var(--bg-demo-screen-03--dark); --bg-demo-screen-04: var(--bg-demo-screen-04--dark); --bg-demo-screen-05: var(--bg-demo-screen-05--dark); --bg-demo-screen-06: var(--bg-demo-screen-06--dark); --bg-demo-screen-07: var(--bg-demo-screen-07--dark); --bg-demo-screen-08: var(--bg-demo-screen-08--dark); --bg-demo-screen-09: var(--bg-demo-screen-09--dark); } } [color-scheme=light] { --base: var(--base--light); --base-rgb: var(--base-rgb--light); --base-tint: var(--base-tint--light); --base-shade: var(--base-shade--light); --base-opp: var(--base-opp--light); --base-opp-tint: var(--base-opp-tint--light); --accent: var(--accent--light); --accent-rgb: var(--accent-rgb--light); --additional: var(--additional--light); --additional-rgb: var(--additional-rgb--light); --neutral-transparent: var(--neutral-transparent--light); --st-bright: var(--st-bright--light); --st-medium: var(--st-medium--light); --st-muted: var(--st-muted--light); --st-opp-bright: var(--st-opp-bright--light); --fw-regular: var(--fw-regular--light); --fw-medium: var(--fw-medium--light); --fw-semibold: var(--fw-semibold--light); --fw-bold: var(--fw-bold--light); --fw-regular-opp: var(--fw-regular-opp--light); --fw-medium-opp: var(--fw-medium-opp--light); --t-bright: var(--t-bright--light); --t-medium: var(--t-medium--light); --t-muted: var(--t-muted--light); --t-muted-extra: var(--t-muted-extra--light); --t-opp-bright: var(--t-opp-bright--light); --t-opp-medium: var(--t-opp-medium--light); --t-opp-muted: var(--t-opp-muted--light); --bg-demo-screen-01: var(--bg-demo-screen-01--light); --bg-demo-screen-02: var(--bg-demo-screen-02--light); --bg-demo-screen-03: var(--bg-demo-screen-03--light); --bg-demo-screen-04: var(--bg-demo-screen-04--light); --bg-demo-screen-05: var(--bg-demo-screen-05--light); --bg-demo-screen-06: var(--bg-demo-screen-06--light); --bg-demo-screen-07: var(--bg-demo-screen-07--light); --bg-demo-screen-08: var(--bg-demo-screen-08--light); --bg-demo-screen-09: var(--bg-demo-screen-09--light); } [color-scheme=dark] { --base: var(--base--dark); --base-rgb: var(--base-rgb--dark); --base-tint: var(--base-tint--dark); --base-shade: var(--base-shade--dark); --base-opp: var(--base-opp--dark); --base-opp-tint: var(--base-opp-tint--dark); --accent: var(--accent--dark); --accent-rgb: var(--accent-rgb--dark); --additional: var(--additional--dark); --additional-rgb: var(--additional-rgb--dark); --neutral-transparent: var(--neutral-transparent--dark); --st-bright: var(--st-bright--dark); --st-medium: var(--st-medium--dark); --st-muted: var(--st-muted--dark); --st-opp-bright: var(--st-opp-bright--dark); --fw-regular: var(--fw-regular--dark); --fw-medium: var(--fw-medium--dark); --fw-semibold: var(--fw-semibold--dark); --fw-bold: var(--fw-bold--dark); --fw-regular-opp: var(--fw-regular-opp--dark); --fw-medium-opp: var(--fw-medium-opp--dark); --t-bright: var(--t-bright--dark); --t-medium: var(--t-medium--dark); --t-muted: var(--t-muted--dark); --t-muted-extra: var(--t-muted-extra--dark); --t-opp-bright: var(--t-opp-bright--dark); --t-opp-medium: var(--t-opp-medium--dark); --t-opp-muted: var(--t-opp-muted--dark); --bg-demo-screen-01: var(--bg-demo-screen-01--dark); --bg-demo-screen-02: var(--bg-demo-screen-02--dark); --bg-demo-screen-03: var(--bg-demo-screen-03--dark); --bg-demo-screen-04: var(--bg-demo-screen-04--dark); --bg-demo-screen-05: var(--bg-demo-screen-05--dark); --bg-demo-screen-06: var(--bg-demo-screen-06--dark); --bg-demo-screen-07: var(--bg-demo-screen-07--dark); --bg-demo-screen-08: var(--bg-demo-screen-08--dark); --bg-demo-screen-09: var(--bg-demo-screen-09--dark); } /* ------------------------------------------------*/ /* Variables End */ /* ------------------------------------------------*/ /* ------------------------------------------------*/ /* Template Backgrounds Start */ /* ------------------------------------------------*/ .about-image-1 { background-image: url(https://dummyimage.com/1400x1000/5d5d5d/838383); } .divider-image-1 { background-image: url(https://dummyimage.com/1920x1200/5d5d5d/838383); } .divider-image-2 { background-image: url(https://dummyimage.com/1920x1200/5d5d5d/838383); } .divider-image-3 { background-image: url(https://dummyimage.com/1920x1200/5d5d5d/838383); } .divider-image-4 { background-image: url(https://dummyimage.com/1920x1200/5d5d5d/838383); } .divider-image-5 { background-image: url(https://dummyimage.com/1920x1200/5d5d5d/838383); } .divider-image-6 { background-image: url(https://dummyimage.com/1920x1200/5d5d5d/838383); } .divider-image-7 { background-image: url(https://dummyimage.com/1920x1200/5d5d5d/838383); } .divider-image-8 { background-image: url(https://dummyimage.com/1920x1200/5d5d5d/838383); } .divider-image-9 { background-image: url(https://dummyimage.com/1920x1200/5d5d5d/838383); } .divider-image-10 { background-image: url(https://dummyimage.com/1920x1200/5d5d5d/838383); } .mxd-promo__bg { background-image: url(https://dummyimage.com/1400x900/838383/5d5d5d); } .preview-image-1 { background-image: url(https://dummyimage.com/1400x1400/5d5d5d/838383); } .preview-image-2 { background-image: url(https://dummyimage.com/1400x1400/5d5d5d/838383); } .preview-image-3 { background-image: url(https://dummyimage.com/1400x1400/5d5d5d/838383); } .preview-image-4 { background-image: url(https://dummyimage.com/1400x1400/5d5d5d/838383); } .preview-image-5 { background-image: url(https://dummyimage.com/1400x1400/5d5d5d/838383); } .preview-image-6 { background-image: url(https://dummyimage.com/1400x1400/5d5d5d/838383); } .preview-image-7 { background-image: url(https://dummyimage.com/1400x1400/5d5d5d/838383); } .blog-preview-image-1 { background-image: url(https://dummyimage.com/1000x1250/5d5d5d/838383); } .blog-preview-image-2 { background-image: url(https://dummyimage.com/1000x1250/5d5d5d/838383); } .blog-preview-image-3 { background-image: url(https://dummyimage.com/1000x1250/5d5d5d/838383); } .headline-img-01::before { background-image: url(https://dummyimage.com/400x200/5d5d5d/838383); } .headline-img-02::before { background-image: url(https://dummyimage.com/400x200/5d5d5d/838383); } .headline-img-03::after { background-image: url(https://dummyimage.com/400x200/5d5d5d/838383); } .headline-img-04::before { background-image: url(https://dummyimage.com/400x200/5d5d5d/838383); } .headline-img-05::before { background-image: url(https://dummyimage.com/400x200/5d5d5d/838383); } .headline-img-06::before { background-image: url(https://dummyimage.com/400x200/5d5d5d/838383); } .headline-img-07::before { background-image: url(https://dummyimage.com/400x200/5d5d5d/838383); } .image-values-1 { background-image: url(https://dummyimage.com/1200x1600/5d5d5d/838383); } .image-values-2 { background-image: url(https://dummyimage.com/1600x1200/5d5d5d/838383); } .prj-details-img-01 { background-image: url(https://dummyimage.com/1920x1200/414141/636363); } .prj-details-img-02 { background-image: url(https://dummyimage.com/1920x1200/414141/636363); } /* ------------------------------------------------*/ /* Template Backgrounds End */ /* ------------------------------------------------*/ /* ------------------------------------------------*/ /* Basic Styles Start */ /* ------------------------------------------------*/ *, *::before, *::after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } button:active, button:focus { outline: none !important; } button::-moz-focus-inner { border: 0 !important; } input::-moz-focus-inner { border: 0 !important; } [type=search]::-webkit-search-cancel-button, [type=search]::-webkit-search-decoration { -webkit-appearance: none; appearance: none; } a:focus, button:focus, input:focus, textarea:focus { -webkit-tap-highlight-color: transparent; } input, textarea, button, select, a { -webkit-tap-highlight-color: transparent; } ::-moz-selection { background-color: var(--accent); color: var(--t-opp-bright); text-shadow: none; } ::selection { background-color: var(--accent); color: var(--t-opp-bright); text-shadow: none; } ::-webkit-scrollbar { display: none; width: 6px; background: var(--base-shade); } @media only screen and (min-width: 768px) { ::-webkit-scrollbar { display: block; } } ::-webkit-scrollbar-track { background-color: var(--base-shade); } ::-webkit-scrollbar-thumb { background-color: var(--accent); border-radius: var(--_radius-s); } html { width: 100%; height: 100%; font-family: sans-serif; font-size: 62.5%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { position: relative; width: 100%; min-width: 360px; overflow-x: unset !important; font: normal 400 var(--_size)/1.6 var(--_font-default); text-rendering: optimizeLegibility; background-color: var(--base); color: var(--t-medium); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } section { position: relative; width: 100%; min-width: 360px; } a { text-decoration: none; outline: 0; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-transition: all var(--_animspeed-medium) var(--_animbezier); -moz-transition: all var(--_animspeed-medium) var(--_animbezier); transition: all var(--_animspeed-medium) var(--_animbezier); } img { display: block; width: 100%; height: auto; } .overflow-hidden { overflow: hidden !important; } .components { position: relative; } .components__item { position: relative; padding: 8rem 10%; border-bottom: 1px solid var(--st-muted); } .components__item.no-padding { padding: 0; } .components__caption { display: block; font: normal 400 1.3rem/1 var(--_font-default); color: var(--t-medium); text-transform: uppercase; letter-spacing: 0.1rem; margin-bottom: 2rem; } .width-50-desktop { width: 100%; } @media only screen and (min-width: 1200px) { .width-50-desktop { width: 50%; } } .mxd-spacer { position: relative; width: 100%; height: 100px; } html.lenis, html.lenis body { height: auto; } .lenis.lenis-smooth { scroll-behavior: auto !important; } .lenis.lenis-smooth [data-lenis-prevent] { -ms-scroll-chaining: none; overscroll-behavior: contain; } .lenis.lenis-stopped { overflow: hidden; } .lenis.lenis-scrolling iframe { pointer-events: none; } /* ------------------------------------------------*/ /* Basic Styles End */ /* ------------------------------------------------*/ /* ------------------------------------------------*/ /* Elements - Page Structure Start */ /* ------------------------------------------------*/ .mxd-page-content { position: relative; } .mxd-page-content.inner-page-content { padding-top: 7.6rem; } @media only screen and (min-width: 768px) { .mxd-page-content.inner-page-content { padding-top: 9.6rem; } } .mxd-wrapper { position: relative; width: 100%; min-width: 360px; } .mxd-wrapper.mxd-wrapper-opposite { background-color: var(--base-opp); -moz-border-radius: var(--_radius-l); border-radius: var(--_radius-l); } .mxd-wrapper.padding-top-pre-title { padding-top: 13rem; } .mxd-wrapper.margin-bottom-pre-title { margin-bottom: 13rem; } @media only screen and (min-width: 768px) { .mxd-wrapper.padding-top-pre-title { padding-top: 14.3rem; } .mxd-wrapper.margin-bottom-pre-title { margin-bottom: 14.3rem; } } @media only screen and (min-width: 1600px) { .mxd-wrapper.padding-top-pre-title { padding-top: 18.3rem; } .mxd-wrapper.margin-bottom-pre-title { margin-bottom: 18.3rem; } } .mxd-section { position: relative; width: 100%; min-width: 360px; } .mxd-section.padding-blog-default-pre-grid { padding-bottom: 3rem; } .mxd-section.padding-blog-descr-pre-grid { padding-bottom: 2.2rem; } .mxd-section.padding-default { padding-bottom: 14rem; } .mxd-section.padding-default.mobile-title { padding-bottom: 13rem; } .mxd-section.padding-pre-footer { padding-bottom: 11rem; } .mxd-section.padding-pre-pinned-img { padding-bottom: 14rem; } .mxd-section.padding-pre-grid { padding-bottom: 11rem; } .mxd-section.padding-pre-grid.mobile-grid-s { padding-bottom: 12.5rem; } .mxd-section.padding-pre-grid.mobile-grid-title { padding-bottom: 10rem; } .mxd-section.padding-pre-title { padding-bottom: 13rem; } .mxd-section.padding-pre-manifest { padding-bottom: 13.7rem; } .mxd-section.padding-pre-manifest.mobile-point-subtitle { padding-bottom: 13.7rem; } .mxd-section.padding-pre-stack { padding-bottom: 11rem; } .mxd-section.padding-stacked-section { padding-bottom: 10.1rem; } .mxd-section.padding-stacked-pre-mtext { padding-bottom: 8.1rem; } .mxd-section.padding-grid-pre-pinned { padding-bottom: 13rem; } .mxd-section.padding-grid-pre-mtext { padding-bottom: 11.3rem; } .mxd-section.padding-pinned-img-pre-mtext { padding-bottom: 10.4rem; } .mxd-section.padding-mtext { padding-bottom: 12.6rem; } .mxd-section.padding-mtext.mobile-title { padding-bottom: 11.6rem; } .mxd-section.padding-mtext-pre-title { padding-bottom: 11.6rem; } .mxd-section.padding-mtext-pre-grid { padding-bottom: 9.8rem; } .mxd-section.padding-mtext-pre-grid.mobile-grid-s { padding-bottom: 11.3rem; } .mxd-section.padding-mtext-pre-pinned { padding-bottom: 10.8rem; } .mxd-section.padding-mtext-pre-stack { padding-bottom: 2rem; } .mxd-section.padding-blog { padding-bottom: 13.1rem; } @media only screen and (min-width: 768px) { .mxd-section.padding-default { padding-bottom: 16rem; } .mxd-section.padding-default.mobile-title { padding-bottom: 14.5rem; } .mxd-section.padding-pre-footer { padding-bottom: 10.7rem; } .mxd-section.padding-pre-pinned-img { padding-bottom: 16rem; } .mxd-section.padding-pre-grid { padding-bottom: 13rem; } .mxd-section.padding-pre-grid.mobile-grid-s { padding-bottom: 13rem; } .mxd-section.padding-pre-grid.mobile-grid-title { padding-bottom: 11.3rem; } .mxd-section.padding-pre-title { padding-bottom: 14.3rem; } .mxd-section.padding-pre-manifest { padding-bottom: 13.9rem; } .mxd-section.padding-pre-manifest.mobile-point-subtitle { padding-bottom: 15.7rem; } .mxd-section.padding-pre-stack { padding-bottom: 10rem; } .mxd-section.padding-stacked-section { padding-bottom: 11.3rem; } .mxd-section.padding-stacked-pre-mtext { padding-bottom: 7.3rem; } .mxd-section.padding-grid-pre-pinned { padding-bottom: 14.3rem; } .mxd-section.padding-grid-pre-mtext { padding-bottom: 10.4rem; } .mxd-section.padding-pinned-img-pre-mtext { padding-bottom: 10rem; } .mxd-section.padding-mtext { padding-bottom: 13.4rem; } .mxd-section.padding-mtext.mobile-title { padding-bottom: 11.6rem; } .mxd-section.padding-mtext-pre-title { padding-bottom: 11.6rem; } .mxd-section.padding-mtext-pre-grid { padding-bottom: 10.6rem; } .mxd-section.padding-mtext-pre-grid.mobile-grid-s { padding-bottom: 10.6rem; } .mxd-section.padding-mtext-pre-pinned { padding-bottom: 10.8rem; } .mxd-section.padding-mtext-pre-stack { padding-bottom: 0; } .mxd-section.padding-blog { padding-bottom: 15.1rem; } } @media only screen and (min-width: 992px) { .mxd-section.padding-pre-footer { padding-bottom: 8.7rem; } } @media only screen and (min-width: 1200px) { .mxd-section.padding-blog-default-pre-grid { padding-bottom: 9rem; } .mxd-section.padding-blog-descr-pre-grid { padding-bottom: 7.2rem; } .mxd-section.padding-default { padding-bottom: 16rem; } .mxd-section.padding-default.mobile-title { padding-bottom: 14.5rem; } .mxd-section.padding-pre-footer { padding-bottom: 7.2rem; } .mxd-section.padding-pre-pinned-img { padding-bottom: 10rem; } .mxd-section.padding-pre-grid { padding-bottom: 13rem; } .mxd-section.padding-pre-grid.mobile-grid-s { padding-bottom: 13rem; } .mxd-section.padding-pre-grid.mobile-grid-title { padding-bottom: 13rem; } .mxd-section.padding-pre-title { padding-bottom: 14.3rem; } .mxd-section.padding-pre-manifest { padding-bottom: 13.9rem; } .mxd-section.padding-pre-manifest.mobile-point-subtitle { padding-bottom: 13.9rem; } .mxd-section.padding-pre-stack { padding-bottom: 10rem; } .mxd-section.padding-grid-pre-pinned { padding-bottom: 10rem; } .mxd-section.padding-grid-pre-mtext { padding-bottom: 10.4rem; } .mxd-section.padding-pinned-img-pre-mtext { padding-bottom: 4.3rem; } .mxd-section.padding-mtext { padding-bottom: 13.4rem; } .mxd-section.padding-mtext.mobile-title { padding-bottom: 13.4rem; } .mxd-section.padding-mtext-pre-pinned { padding-bottom: 7.6rem; } } @media only screen and (min-width: 1400px) { .mxd-section.padding-pre-footer { padding-bottom: 5.6rem; } } @media only screen and (min-width: 1600px) { .mxd-section.padding-blog-default-pre-grid { padding-bottom: 11rem; } .mxd-section.padding-default { padding-bottom: 20rem; } .mxd-section.padding-default.mobile-title { padding-bottom: 20rem; } .mxd-section.padding-pre-footer { padding-bottom: 6rem; } .mxd-section.padding-pre-pinned-img { padding-bottom: 11rem; } .mxd-section.padding-pre-grid { padding-bottom: 17rem; } .mxd-section.padding-pre-grid.mobile-grid-s { padding-bottom: 17rem; } .mxd-section.padding-pre-grid.mobile-grid-title { padding-bottom: 17rem; } .mxd-section.padding-pre-title { padding-bottom: 18.3rem; } .mxd-section.padding-pre-manifest { padding-bottom: 17.9rem; } .mxd-section.padding-pre-manifest.mobile-point-subtitle { padding-bottom: 17.9rem; } .mxd-section.padding-pre-stack { padding-bottom: 11rem; } .mxd-section.padding-stacked-section { padding-bottom: 12.3rem; } .mxd-section.padding-stacked-pre-mtext { padding-bottom: 8.3rem; } .mxd-section.padding-grid-pre-pinned { padding-bottom: 11rem; } .mxd-section.padding-grid-pre-mtext { padding-bottom: 14.4rem; } .mxd-section.padding-pinned-img-pre-mtext { padding-bottom: 5.3rem; } .mxd-section.padding-mtext { padding-bottom: 17.3rem; } .mxd-section.padding-mtext.mobile-title { padding-bottom: 17.3rem; } .mxd-section.padding-mtext-pre-title { padding-bottom: 15.6rem; } .mxd-section.padding-mtext-pre-grid { padding-bottom: 14.6rem; } .mxd-section.padding-mtext-pre-grid.mobile-grid-s { padding-bottom: 14.6rem; } .mxd-section.padding-mtext-pre-pinned { padding-bottom: 5.6rem; } .mxd-section.padding-mtext-pre-stack { padding-bottom: 3.7rem; } .mxd-section.padding-blog { padding-bottom: 19.2rem; } } .mxd-section.padding-hero-07 { padding-top: 14rem; } .mxd-section.padding-hero-09, .mxd-section.padding-hero-06 { padding-top: 13rem; } .mxd-section.padding-hero-08 { padding-top: 3.4rem; } @media only screen and (min-width: 768px) { .mxd-section.padding-hero-07 { padding-top: 16rem; } .mxd-section.padding-hero-09, .mxd-section.padding-hero-06 { padding-top: 13.8rem; } .mxd-section.padding-hero-08 { padding-top: 2.4rem; } } @media only screen and (min-width: 1200px) { .mxd-section.padding-hero-01 { padding-top: 12rem; } .mxd-section.padding-hero-07 { padding-top: 12rem; } .mxd-section.padding-hero-09 { padding-top: 6rem; } .mxd-section.padding-hero-06 { padding-top: 5.4rem; } .mxd-section.padding-hero-08 { padding-top: 0rem; } } @media only screen and (min-width: 1600px) { .mxd-section.padding-hero-01 { padding-top: 16rem; } .mxd-section.padding-hero-07 { padding-top: 16rem; } .mxd-section.padding-hero-06 { padding-top: 6.4rem; } .mxd-section.padding-hero-09 { padding-top: 7rem; } } .mxd-section-inner-headline { padding-top: 13rem; } @media only screen and (min-width: 768px) { .mxd-section-inner-headline { padding-top: 15rem; } } @media only screen and (min-width: 1200px) { .mxd-section-inner-headline { padding-top: 13.6rem; } .mxd-section-inner-headline.grid-headline { padding-top: 16rem; } } @media only screen and (min-width: 1600px) { .mxd-section-inner-headline { padding-top: 17rem; } .mxd-section-inner-headline.grid-headline { padding-top: 20rem; } } .mxd-section-inner-headline.padding-default { padding-bottom: 14rem; } .mxd-section-inner-headline.padding-headline-pre-block { padding-bottom: 13rem; } .mxd-section-inner-headline.padding-headline-pre-grid { padding-bottom: 10rem; } .mxd-section-inner-headline.padding-s-headline-pre-grid { padding-bottom: 2rem; } .mxd-section-inner-headline.padding-headline-pre-stack { padding-bottom: 2.3rem; } .mxd-section-inner-headline.padding-text-pre-block { padding-bottom: 13rem; } .mxd-section-inner-headline.padding-s-text-pre-block { padding-bottom: 4.9rem; } @media only screen and (min-width: 768px) { .mxd-section-inner-headline.padding-default { padding-bottom: 16rem; } .mxd-section-inner-headline.padding-headline-pre-block { padding-bottom: 14.6rem; } .mxd-section-inner-headline.padding-headline-pre-grid { padding-bottom: 11.6rem; } .mxd-section-inner-headline.padding-s-headline-pre-grid { padding-bottom: 3.6rem; } .mxd-section-inner-headline.padding-headline-pre-stack { padding-bottom: 1rem; } .mxd-section-inner-headline.padding-text-pre-block { padding-bottom: 14.8rem; } .mxd-section-inner-headline.padding-s-text-pre-form { padding-bottom: 0; } .mxd-section-inner-headline.padding-s-text-pre-block { padding-bottom: 6.9rem; } } @media only screen and (min-width: 1200px) { .mxd-section-inner-headline.padding-headline-pre-block { padding-bottom: 14.2rem; } .mxd-section-inner-headline.padding-headline-pre-grid { padding-bottom: 11.2rem; } .mxd-section-inner-headline.padding-s-headline-pre-grid { padding-bottom: 3.2rem; } .mxd-section-inner-headline.padding-headline-pre-stack { padding-bottom: 0.6rem; } .mxd-section-inner-headline.padding-s-text-pre-form { padding-bottom: 3.2rem; } } @media only screen and (min-width: 1600px) { .mxd-section-inner-headline.padding-default { padding-bottom: 20rem; } .mxd-section-inner-headline.padding-headline-pre-block { padding-bottom: 18rem; } .mxd-section-inner-headline.padding-headline-pre-grid { padding-bottom: 15rem; } .mxd-section-inner-headline.padding-s-headline-pre-grid { padding-bottom: 4.9rem; } .mxd-section-inner-headline.padding-headline-pre-stack { padding-bottom: 4.4rem; } .mxd-section-inner-headline.padding-text-pre-block { padding-bottom: 18.7rem; } .mxd-section-inner-headline.padding-s-text-pre-form { padding-bottom: 3rem; } .mxd-section-inner-headline.padding-s-text-pre-block { padding-bottom: 8.8rem; } } .mxd-section-fullscreen { width: 100%; height: 100vh; padding-top: 7.6rem; overflow: hidden; } @media only screen and (min-width: 768px) { .mxd-section-fullscreen { padding-top: 9.6rem; } } .mxd-container { position: relative; width: 100%; max-width: 1920px; padding: 0 3rem; margin: 0 auto; } .mxd-container.fullwidth-container { max-width: none; padding: 0; } .mxd-container.fullscreen-container { height: 100%; } .mxd-container.no-padding-container { padding: 0; overflow: hidden; } .mxd-container.grid-container { padding: 0 1.5rem; } .mxd-container.grid-l-container { padding: 0 1.5rem; } @media only screen and (min-width: 768px) { .mxd-container { padding: 0 6rem; } .mxd-container.grid-container { padding: 0 4.5rem; } .mxd-container.grid-l-container { padding: 0 4.5rem; } } @media only screen and (min-width: 1200px) { .mxd-container.grid-container.no-padding-right { padding-right: 0; } .mxd-container.grid-l-container { padding: 0 3rem; } } @media only screen and (min-width: 1600px) { .mxd-container { padding: 0 9rem; } .mxd-container.grid-container { padding: 0 7.5rem; } .mxd-container.grid-l-container { padding: 0 4.5rem; } } .mxd-container__circle { z-index: 2; position: relative; margin-bottom: -10rem; text-align: center; } @media only screen and (min-width: 1200px) { .mxd-container__circle { margin-bottom: 0; position: absolute; top: -10rem; right: 12rem; } .mxd-container__circle.circle-fit { right: 6rem; } } @media only screen and (min-width: 1600px) { .mxd-container__circle { right: 18rem; } .mxd-container__circle.circle-fit { right: 9rem; } } .mxd-grid-item { padding: 0 1.5rem; margin-top: 3rem; } .mxd-grid-item.no-margin { margin: 0; } .mxd-grid-item.no-margin-desktop { margin-top: 3rem; } .mxd-grid-item.no-margin-mobile { margin: 0; } @media only screen and (min-width: 1200px) { .mxd-grid-item.no-margin-desktop { margin: 0; } .mxd-grid-item.no-margin-mobile { margin-top: 3rem; } } .mxd-grid-item-l { padding: 0 1.5rem; margin-top: 3rem; } .mxd-grid-item-l.no-margin { margin: 0; } @media only screen and (min-width: 1200px) { .mxd-grid-item-l { padding: 0 3rem; } } .mxd-block { position: relative; } .mxd-block.pre-stack-block { margin-bottom: -3rem; z-index: 1; } .mxd-block.fullscreen-block { height: 100%; } .mxd-block.absolute-centered-block { position: absolute; left: 0; top: 50%; bottom: auto; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } @media only screen and (min-width: 768px) { .mxd-block.pre-stack-block { margin-bottom: -6rem; } } @media only screen and (min-width: 1600px) { .mxd-block.pre-stack-block { margin-bottom: -9rem; } } .mxd-block__image { position: relative; height: 460px; -moz-border-radius: var(--_radius-l); border-radius: var(--_radius-l); background-repeat: no-repeat; background-position: center; -moz-background-size: cover; background-size: cover; overflow: hidden; margin-bottom: 3.8rem; } .mxd-block__image img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } @media only screen and (min-width: 768px) { .mxd-block__image { height: 600px; margin-bottom: 4.4rem; } } @media only screen and (min-width: 1200px) { .mxd-block__image { height: 100%; } } .mxd-block__name { position: relative; } .mxd-block__name.name-manifest { margin-bottom: 2.8rem; padding-top: 0; } .mxd-block__name.name-inner-headline { margin-bottom: 0.2rem; } .mxd-block__name.name-project-link { margin-top: 0; margin-bottom: 0.1rem; } @media only screen and (min-width: 768px) { .mxd-block__name.name-manifest { margin-bottom: 3.2rem; } .mxd-block__name.name-inner-headline { margin-bottom: 0.4rem; } } @media only screen and (min-width: 1200px) { .mxd-block__name.name-manifest { margin-bottom: 0; padding-top: 1.5rem; } .mxd-block__name.name-inner-headline { margin-bottom: 0; margin-top: 2rem; } .mxd-block__name.name-project-link { margin-top: 1.3rem; margin-bottom: 0; } } @media only screen and (min-width: 1600px) { .mxd-block__name.name-inner-headline { margin-top: 2.6rem; } .mxd-block__name.name-project-link { margin-top: 2rem; } } .mxd-block__content.content-flex { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -moz-box-orient: vertical; -moz-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 6rem; } @media only screen and (min-width: 768px) { .mxd-block__content.content-flex { gap: 9rem; } } .inner-headline__title { position: relative; } .inner-headline__title.headline-img-before::before { content: ""; display: inline-block; width: 8rem; height: 4.3rem; -moz-border-radius: 4.2rem; border-radius: 4.2rem; margin-right: 1.6rem; background-repeat: no-repeat; background-position: center; -moz-background-size: cover; background-size: cover; } .inner-headline__title.headline-img-after::after { content: ""; display: inline-block; width: 8rem; height: 4.3rem; -moz-border-radius: 4.2rem; border-radius: 4.2rem; margin-left: 1.6rem; background-repeat: no-repeat; background-position: center; -moz-background-size: cover; background-size: cover; } @media only screen and (min-width: 768px) { .inner-headline__title.headline-img-before::before { width: 11rem; height: 5.8rem; margin-right: 2.2rem; } .inner-headline__title.headline-img-after::after { width: 11rem; height: 5.8rem; margin-left: 2.2rem; } } @media only screen and (min-width: 1200px) { .inner-headline__title.headline-img-before::before { width: 14rem; height: 7rem; margin-right: 2.6rem; } .inner-headline__title.headline-img-after::after { width: 14rem; height: 7rem; margin-left: 2.6rem; } } @media only screen and (min-width: 1600px) { .inner-headline__title.headline-img-before::before { width: 16rem; height: 8.4rem; margin-right: 3.3rem; } .inner-headline__title.headline-img-after::after { width: 16rem; height: 8.4rem; margin-left: 3.3rem; } } .inner-headline__descr { margin-top: 3.8rem; } @media only screen and (min-width: 1200px) { .inner-headline__descr { margin-top: 1.8rem; padding-left: 3rem; max-width: 560px; } } @media only screen and (min-width: 1600px) { .inner-headline__descr { margin-top: 2rem; max-width: 620px; } } .inner-headline__text { margin-top: 3.3rem; } @media only screen and (min-width: 768px) { .inner-headline__text { margin-top: 4.9rem; } } @media only screen and (min-width: 1200px) { .inner-headline__text { margin-top: 4.6rem; } } @media only screen and (min-width: 1600px) { .inner-headline__text { margin-top: 5.9rem; } } .inner-headline__paragraph { margin-top: 3.8rem; } @media only screen and (min-width: 768px) { .inner-headline__paragraph { margin-top: 3.5rem; } } @media only screen and (min-width: 1200px) { .inner-headline__paragraph { margin-top: 4.1rem; } } @media only screen and (min-width: 1600px) { .inner-headline__paragraph { margin-top: 4.5rem; } } .inner-headline__data { margin-top: 4.4rem; } @media only screen and (min-width: 1200px) { .inner-headline__data { margin-top: 5.4rem; } } @media only screen and (min-width: 1600px) { .inner-headline__data { margin-top: 6.1rem; } } .inner-headline__tags { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 1rem; margin-top: 5.5rem; } @media only screen and (min-width: 768px) { .inner-headline__tags { margin-top: 5.4rem; } } @media only screen and (min-width: 1200px) { .inner-headline__tags { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -moz-box-orient: vertical; -moz-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: end; -moz-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; -webkit-box-align: end; -moz-box-align: end; -ms-flex-align: end; align-items: flex-end; gap: 1rem; height: 100%; margin-top: 0; } .inner-headline__tags .tag { -ms-flex-item-align: end; align-self: flex-end; } } .inner-headline__blogtags { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 1rem; margin-top: 4.9rem; } @media only screen and (min-width: 1200px) { .inner-headline__blogtags { margin-top: 5.2rem; } } @media only screen and (min-width: 1600px) { .inner-headline__blogtags { margin-top: 5.9rem; } } .inner-headline__breadcrumbs { margin-top: 4.9rem; } @media only screen and (min-width: 1200px) { .inner-headline__breadcrumbs { margin-top: 5.2rem; } } @media only screen and (min-width: 1600px) { .inner-headline__breadcrumbs { margin-top: 5.9rem; } } .mxd-block__decoration { display: block; width: 7rem; height: auto; } .mxd-block__manifest.centered { text-align: center; } .mxd-manifest__controls { margin-top: 4.4rem; } @media only screen and (min-width: 768px) { .mxd-manifest__controls { margin-top: 5rem; } } .mxd-block__paragraph { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -moz-box-orient: vertical; -moz-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 2rem; margin-top: 1.8rem; } @media only screen and (min-width: 768px) { .mxd-block__paragraph { margin-top: 1.3rem; } } @media only screen and (min-width: 1200px) { .mxd-block__paragraph { margin-top: 0.4rem; gap: 3rem; } } @media only screen and (min-width: 1600px) { .mxd-block__paragraph { max-width: 855px; } } .mxd-paragraph__lists-item { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -moz-box-orient: vertical; -moz-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 1.2rem; margin-bottom: 2.1rem; } .mxd-paragraph__lists-item:last-of-type { margin-bottom: 0; } .mxd-paragraph__lists-item ul { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -moz-box-orient: vertical; -moz-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .mxd-paragraph__lists-item ul li { display: block; font: normal var(--fw-regular) 1.8rem/1.4 var(--_font-accent); } .mxd-paragraph__lists-item ul li a { font: normal var(--fw-regular) 1.8rem/1.4 var(--_font-accent); color: var(--t-medium); text-decoration: none; background: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0))), -webkit-gradient(linear, left top, right top, from(var(--t-bright)), to(var(--t-bright))); background: -moz-linear-gradient(left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)), -moz-linear-gradient(left, var(--t-bright), var(--t-bright)); background: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)), linear-gradient(to right, var(--t-bright), var(--t-bright)); -moz-background-size: 100% 1px, 0 1px; background-size: 100% 1px, 0 1px; background-position: 100% 100%, 0 100%; background-repeat: no-repeat; -webkit-transition: background-size 300ms, color 300ms; -moz-transition: background-size 300ms, color 300ms, -moz-background-size 300ms; transition: background-size 300ms, color 300ms; transition: background-size 300ms, color 300ms, -moz-background-size 300ms; } .no-touch .mxd-paragraph__lists-item ul li a:hover { color: var(--t-bright); -moz-background-size: 0 1px, 100% 1px; background-size: 0 1px, 100% 1px; } @media only screen and (min-width: 1200px) { .mxd-paragraph__lists-item { gap: 1.8rem; margin-bottom: 0; } } @media only screen and (min-width: 1600px) { .mxd-paragraph__lists-item ul li a { font-size: 1.8rem; } } .mxd-paragraph__controls { margin-top: 1.3rem; } @media only screen and (min-width: 1200px) { .mxd-paragraph__controls { margin-top: 1.4rem; } } @media only screen and (min-width: 1600px) { .mxd-paragraph__controls { margin-top: 1.7rem; } } .mxd-paragraph__client { margin-top: 0.2rem; } @media only screen and (min-width: 1200px) { .mxd-paragraph__client { margin-top: 0; } } @media only screen and (min-width: 1600px) { .mxd-paragraph__client { margin-top: 0.2rem; } } .mxd-pinned-fullscreen { position: relative; } .mxd-pinned-fullscreen__static { position: sticky; top: 0; width: 100%; height: 100vh; z-index: 1; } .mxd-pinned-fullscreen__scroll { width: 100%; position: relative; top: 0; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -moz-box-orient: vertical; -moz-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 20vh; z-index: 3; } .mxd-pinned-fullscreen__scroll p { font-size: 30rem; } .mxd-pinned-fullscreen__tl-trigger { position: absolute; right: 0; bottom: 30vh; width: 1px; height: 1px; } /* ------------------------------------------------*/ /* Elements - Page Structure End */ /* ------------------------------------------------*/ /* ------------------------------------------------*/ /* Elements - Typography Start */ /* ------------------------------------------------*/ h1 { font: normal var(--fw-medium) 6rem/1.1 var(--_font-accent); letter-spacing: -0.06rem; color: var(--t-bright); } @media only screen and (min-width: 768px) { h1 { font-size: 8rem; } h1.h1-small { font-size: 9rem; } } @media only screen and (min-width: 1200px) { h1 { font-size: 10rem; } h1.h1-small { font-size: 9rem; } } @media only screen and (min-width: 1400px) { h1.h1-small { font-size: 9rem; } } @media only screen and (min-width: 1600px) { h1 { font-size: 12rem; } h1.h1-small { font-size: 9rem; } } .typed-cursor { color: var(--accent); } h2 { font: normal var(--fw-medium) 4.4rem/1.1 var(--_font-accent); letter-spacing: -0.06rem; color: var(--t-bright); } h2.opposite { color: var(--t-opp-bright); } h2.permanent-light { color: var(--pt-t-light-bright); } h2.permanent-dark { color: var(--pt-t-dark-bright); } @media only screen and (min-width: 768px) { h2 { font-size: 7rem; } h2.h2-small { font-size: 5rem; } h2.h2-large { font-size: 9rem; } } @media only screen and (min-width: 1600px) { h2 { font-size: 7rem; } h2.h2-small { font-size: 7rem; } h2.h2-large { font-size: 12rem; } } h3 { font: normal var(--fw-medium) 3.6rem/1.2 var(--_font-accent); color: var(--t-bright); } h3.opposite { color: var(--t-opp-bright); } @media only screen and (min-width: 768px) { h3 { font-size: 5rem; } } h4 { font: normal var(--fw-medium) 3rem/1.2 var(--_font-accent); color: var(--t-bright); } @media only screen and (min-width: 1200px) { h4 { font-size: 4.4rem; } } h5 { font: normal var(--fw-medium) 2.6rem/1.2 var(--_font-accent); color: var(--t-bright); } h5 small { display: block; font: normal var(--fw-regular) 1.6rem/1.2 var(--_font-accent); color: var(--t-medium); margin-top: 0.2rem; } h5 a { color: var(--t-bright); } h5.opposite { color: var(--t-opp-bright); } h5.opposite a { color: var(--t-opp-bright); } @media only screen and (min-width: 768px) { h5 { font-size: 3.4rem; } } @media only screen and (min-width: 1600px) { h5 small { font-size: 1.8rem; } } h6 { font: normal var(--fw-medium) 2.2rem/1.2 var(--_font-accent); color: var(--t-bright); } h6 a { color: var(--t-bright); } h6.opposite { color: var(--t-opp-bright); } h6.opposite a { color: var(--t-opp-bright); } @media only screen and (min-width: 1200px) { h6 { font-size: 3rem; } } p { font: normal var(--fw-regular) 1.8rem/1.6 var(--_font-accent); color: var(--t-medium); } p span, p a { color: var(--t-bright); } p span { font-weight: var(--fw-semibold); } p a { text-decoration: none; background: -webkit-gradient(linear, left top, right top, from(var(--t-medium)), to(var(--t-medium))), -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0))); background: -moz-linear-gradient(left, var(--t-medium), var(--t-medium)), -moz-linear-gradient(left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)); background: linear-gradient(to right, var(--t-medium), var(--t-medium)), linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)); -moz-background-size: 100% 1px, 0 1px; background-size: 100% 1px, 0 1px; background-position: 100% 100%, 0 100%; background-repeat: no-repeat; -webkit-transition: background-size 400ms, color 300ms; -moz-transition: background-size 400ms, color 300ms, -moz-background-size 400ms; transition: background-size 400ms, color 300ms; transition: background-size 400ms, color 300ms, -moz-background-size 400ms; } p a.opposite { background: -webkit-gradient(linear, left top, right top, from(var(--t-opp-medium)), to(var(--t-opp-medium))), -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0))); background: -moz-linear-gradient(left, var(--t-opp-medium), var(--t-opp-medium)), -moz-linear-gradient(left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)); background: linear-gradient(to right, var(--t-opp-medium), var(--t-opp-medium)), linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)); } .no-touch p a:hover { color: var(--t-bright); -moz-background-size: 0 1px, 100% 1px; background-size: 0 1px, 100% 1px; } .no-touch p a:hover.opposite { color: var(--t-opp-bright); } p.t-120 { line-height: 1.2; } p.t-140 { line-height: 1.4; } p.t-xsmall { font-size: 1.4rem; line-height: 1.2; } p.t-small { font-size: 1.6rem; } p.t-small-mobile { font-size: 1.6rem; } p.t-large { font-family: var(--_font-accent); font-size: 2.2rem; color: var(--t-bright); } p.t-caption { line-height: 1.4; font-weight: var(--fw-medium); } p.t-muted { color: var(--t-muted); } p.t-muted span { color: var(--t-medium); } p.t-muted a { font-weight: var(--fw-regular); color: var(--t-muted); text-decoration: none; background: -webkit-gradient(linear, left top, right top, from(var(--t-muted)), to(var(--t-muted))), -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0))); background: -moz-linear-gradient(left, var(--t-muted), var(--t-muted)), -moz-linear-gradient(left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)); background: linear-gradient(to right, var(--t-muted), var(--t-muted)), linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)); -moz-background-size: 100% 1px, 0 1px; background-size: 100% 1px, 0 1px; background-position: 100% 100%, 0 100%; background-repeat: no-repeat; -webkit-transition: background-size 400ms, color 300ms; -moz-transition: background-size 400ms, color 300ms, -moz-background-size 400ms; transition: background-size 400ms, color 300ms; transition: background-size 400ms, color 300ms, -moz-background-size 400ms; } .no-touch p.t-muted a:hover { color: var(--t-medium); -moz-background-size: 0 1px, 100% 1px; background-size: 0 1px, 100% 1px; } p.t-muted a.no-effect { background: none; } p.t-opposite { color: var(--t-opp-bright); } p.t-opposite-medium { color: var(--t-opp-medium); } p.t-opposite-medium a { color: var(--t-opp-bright); text-decoration: none; background: -webkit-gradient(linear, left top, right top, from(var(--t-opp-medium)), to(var(--t-opp-medium))), -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0))); background: -moz-linear-gradient(left, var(--t-opp-medium), var(--t-opp-medium)), -moz-linear-gradient(left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)); background: linear-gradient(to right, var(--t-opp-medium), var(--t-opp-medium)), linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)); -moz-background-size: 100% 1px, 0 1px; background-size: 100% 1px, 0 1px; background-position: 100% 100%, 0 100%; background-repeat: no-repeat; -webkit-transition: background-size 400ms, color 300ms; -moz-transition: background-size 400ms, color 300ms, -moz-background-size 400ms; transition: background-size 400ms, color 300ms; transition: background-size 400ms, color 300ms, -moz-background-size 400ms; } .no-touch p.t-opposite-medium a:hover { color: var(--t-opp-bright); -moz-background-size: 0 1px, 100% 1px; background-size: 0 1px, 100% 1px; } p.t-bright { color: var(--t-bright); } p.t-bright.opposite { color: var(--t-opp-bright); } p.t-medium { font-weight: var(--fw-medium); } p.t-semibold { font-weight: var(--fw-semibold); } @media only screen and (min-width: 768px) { p.t-small-mobile { font-size: 1.8rem; } } @media only screen and (min-width: 1600px) { p { font-size: 2rem; } p.t-large { font-size: 2.6rem; } p.t-small { font-size: 1.8rem; } p.t-small-mobile { font-size: 2.2rem; } } .mxd-point-subtitle { display: -webkit-inline-box; display: -moz-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: left; -moz-box-pack: left; -ms-flex-pack: left; justify-content: left; gap: 1rem; font: normal var(--fw-regular) 2.2rem/1.2 var(--_font-accent); color: var(--t-bright); } .mxd-point-subtitle svg { width: 1.9rem; height: 1.9rem; fill: var(--t-bright); } .mxd-point-subtitle span { font-weight: var(--fw-regular); } .mxd-point-subtitle a { color: var(--t-bright); background: none; } .no-touch .mxd-point-subtitle:hover a { color: var(--t-medium); } .mxd-manifest { font: normal var(--fw-regular) 2.8rem/1.6 var(--_font-accent); color: var(--t-bright); } @media only screen and (min-width: 768px) { .mxd-manifest { font-size: 4.4rem; } } @media only screen and (min-width: 1600px) { .mxd-manifest { max-width: 855px; } .mxd-manifest.mxd-manifest-l { max-width: none; } } .mxd-stats-number { font: normal var(--fw-medium) 7rem/0.8 var(--_font-accent); color: var(--t-bright); letter-spacing: -0.1rem; } .mxd-stats-number.opposite { color: var(--t-opp-bright); } .mxd-stats-number.small { font-size: 5rem; } .mxd-stats-number.xsmall { font-size: 5rem; } @media only screen and (min-width: 768px) { .mxd-stats-number.small { font-size: 7rem; } .mxd-stats-number.xsmall { font-size: 5rem; } } @media only screen and (min-width: 1200px) { .mxd-stats-number { font-size: 9rem; } } @media only screen and (min-width: 1600px) { .mxd-stats-number { font-size: 12rem; } } /* ------------------------------------------------*/ /* Elements - Typography End */ /* ------------------------------------------------*/ /* ------------------------------------------------*/ /* Elements - Controls Start */ /* ------------------------------------------------*/ .mxd-color-switcher { position: relative; display: -webkit-inline-box; display: -moz-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-pack: center; -moz-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; width: 4.6rem; height: 4.6rem; -moz-border-radius: 50%; border-radius: 50%; border: none; outline: 0; cursor: pointer; text-decoration: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; background-color: transparent; color: var(--t-bright); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } .mxd-color-switcher::before { content: ""; display: block; position: absolute; left: 50%; top: 50%; bottom: auto; right: auto; -webkit-transform: translateX(-50%) translateY(-50%) scale(1); -moz-transform: translateX(-50%) translateY(-50%) scale(1); -ms-transform: translateX(-50%) translateY(-50%) scale(1); transform: translateX(-50%) translateY(-50%) scale(1); width: 100%; height: 100%; -moz-border-radius: 50%; border-radius: 50%; background-color: transparent; -webkit-transition: background-color var(--_animspeed-medium) var(--_animbezier), -webkit-transform var(--_animspeed-medium); transition: background-color var(--_animspeed-medium) var(--_animbezier), -webkit-transform var(--_animspeed-medium); -moz-transition: transform var(--_animspeed-medium), background-color var(--_animspeed-medium) var(--_animbezier), -moz-transform var(--_animspeed-medium); transition: transform var(--_animspeed-medium), background-color var(--_animspeed-medium) var(--_animbezier); transition: transform var(--_animspeed-medium), background-color var(--_animspeed-medium) var(--_animbezier), -webkit-transform var(--_animspeed-medium), -moz-transform var(--_animspeed-medium); } .mxd-color-switcher i { display: -webkit-inline-box; display: -moz-inline-box; display: -ms-inline-flexbox; display: inline-flex; position: relative; font-size: 2rem; overflow: hidden; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); transform: scale(1); -webkit-transition: -webkit-transform var(--_animspeed-medium) var(--_animbezier); transition: -webkit-transform var(--_animspeed-medium) var(--_animbezier); -moz-transition: transform var(--_animspeed-medium) var(--_animbezier), -moz-transform var(--_animspeed-medium) var(--_animbezier); transition: transform var(--_animspeed-medium) var(--_animbezier); transition: transform var(--_animspeed-medium) var(--_animbezier), -webkit-transform var(--_animspeed-medium) var(--_animbezier), -moz-transform var(--_animspeed-medium) var(--_animbezier); } .no-touch .mxd-color-switcher:hover::before { background-color: var(--base-tint); -webkit-transform: translateX(-50%) translateY(-50%) scale(1.04); -moz-transform: translateX(-50%) translateY(-50%) scale(1.04); -ms-transform: translateX(-50%) translateY(-50%) scale(1.04); transform: translateX(-50%) translateY(-50%) scale(1.04); } .no-touch .mxd-color-switcher:hover i { -webkit-transform: scale(0.92); -moz-transform: scale(0.92); -ms-transform: scale(0.92); transform: scale(0.92); } @media only screen and (min-width: 768px) { .mxd-color-switcher { width: 5.6rem; height: 5.6rem; } .mxd-color-switcher i { font-size: 3rem; } } .btn-rotating { display: -webkit-inline-box; display: -moz-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-pack: center; -moz-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; position: relative; color: var(--t-bright); font-size: 2.2rem; } .btn-rotating .btn-rotating__text { display: block; position: absolute; top: 0; left: 0; } .btn-rotating .btn-rotating__text text { fill: var(--t-bright); font-family: var(--_font-accent); font-weight: 500; text-transform: uppercase; -webkit-transition: var(--_animspeed-medium) var(--_animbezier); -moz-transition: var(--_animspeed-medium) var(--_animbezier); transition: var(--_animspeed-medium) var(--_animbezier); } .btn-rotating .btn-rotating__image { display: block; height: auto; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); transform: scale(1); -webkit-transition: -webkit-transform var(--_animspeed-medium) var(--_animbezier); transition: -webkit-transform var(--_animspeed-medium) var(--_animbezier); -moz-transition: transform var(--_animspeed-medium) var(--_animbezier), -moz-transform var(--_animspeed-medium) var(--_animbezier); transition: transform var(--_animspeed-medium) var(--_animbezier); transition: transform var(--_animspeed-medium) var(--_animbezier), -webkit-transform var(--_animspeed-medium) var(--_animbezier), -moz-transform var(--_animspeed-medium) var(--_animbezier); } .no-touch .btn-rotating:hover .btn-rotating__image { -webkit-transform: scale(0.92); -moz-transform: scale(0.92); -ms-transform: scale(0.92); transform: scale(0.92); } .btn-rotating-160 { width: 160px; height: 160px; } .btn-rotating-160 .btn-rotating__text { width: 160px; height: 160px; } .btn-rotating-160 .btn-rotating__text text { font-size: 1.39rem; letter-spacing: normal; } .btn-rotating-160 .btn-rotating__image { width: 6rem; } .btn-rotating-120-160 { width: 120px; height: 120px; } .btn-rotating-120-160 .btn-rotating__text { width: 120px; height: 120px; } .btn-rotating-120-160 .btn-rotating__text text { font-size: 1.4rem; letter-spacing: normal; } .btn-rotating-120-160 .btn-rotating__image { width: 5rem; } @media only screen and (min-width: 1600px) { .btn-rotating-120-160 { width: 160px; height: 160px; } .btn-rotating-120-160 .btn-rotating__text { width: 160px; height: 160px; } .btn-rotating-120-160 .btn-rotating__text text { font-size: 1.39rem; letter-spacing: normal; } .btn-rotating-120-160 .btn-rotating__image { width: 6rem; } } .btn-rotating-180 { width: 180px; height: 180px; } .btn-rotating-180 .btn-rotating__text { width: 180px; height: 180px; } .btn-rotating-180 .btn-rotating__text text { font-size: 1.53rem; letter-spacing: 0.1rem; } .btn-rotating-180 .btn-rotating__image { width: 7.6rem; } .btn-rotating-180.ver-02 .btn-rotating__text text { font-size: 1.36rem; } .btn-rotating-blur-outline { width: 200px; height: 200px; border: 1px solid var(--st-opp-bright); -moz-border-radius: 50%; border-radius: 50%; background-color: var(--neutral-transparent); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); } .btn-rotating-blur-outline .btn-rotating__text { width: 180px; height: 180px; top: 1rem; left: 1rem; } .btn-rotating-blur-outline .btn-rotating__text text { font-size: 1.4rem; letter-spacing: 0.09rem; } .btn-rotating-blur-outline .btn-rotating__image { width: 8rem; } .btn-rotating-blur-outline.ver-02 .btn-rotating__text text { font-size: 1.374rem; letter-spacing: 0.09rem; } .btn-rotating-blur-outline.ver-03 .btn-rotating__text text { font-size: 1.54rem; letter-spacing: 0.1rem; } .btn-rotating-blur-outline.ver-04 { width: 147px; height: 147px; color: var(--nl-white); } .btn-rotating-blur-outline.ver-04 .btn-rotating__text { width: 130px; height: 130px; top: 0.8rem; left: 0.8rem; } .btn-rotating-blur-outline.ver-04 .btn-rotating__text text { font-size: 1.54rem; letter-spacing: 0.1rem; } .btn-rotating-blur-outline.ver-04 .btn-rotating__image { width: 5rem; } @media only screen and (min-width: 1200px) { .btn-rotating-blur-outline.permanent-desktop { border: 1px solid rgba(255, 255, 255, 0.5); background-color: rgba(255, 255, 255, 0.05); } .btn-rotating-blur-outline.permanent-desktop .btn-rotating__text { fill: var(--nl-white); } .btn-rotating-blur-outline.permanent-desktop .btn-rotating__text text { fill: var(--nl-white); } } .btn { position: relative; display: -webkit-inline-box; display: -moz-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-pack: center; -moz-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; gap: 1.4rem; border: none; outline: 0; padding: 0; font: inherit; background-color: transparent; cursor: pointer; text-decoration: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .btn-to-top { position: fixed; right: 3rem; bottom: 3rem; width: 4.6rem; height: 4.6rem; -moz-border-radius: 50%; border-radius: 50%; border-width: 2px; background-color: rgba(255, 255, 255, 0.03); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: var(--nl-white); mix-blend-mode: difference; font: normal var(--fw-regular) 2.2rem/1.5 var(--_font-accent); -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); transform: scale(1); -webkit-transition: -webkit-transform var(--_animspeed-medium) var(--_animbezier); transition: -webkit-transform var(--_animspeed-medium) var(--_animbezier); -moz-transition: transform var(--_animspeed-medium) var(--_animbezier), -moz-transform var(--_animspeed-medium) var(--_animbezier); transition: transform var(--_animspeed-medium) var(--_animbezier); transition: transform var(--_animspeed-medium) var(--_animbezier), -webkit-transform var(--_animspeed-medium) var(--_animbezier), -moz-transform var(--_animspeed-medium) var(--_animbezier); z-index: 9; overflow: hidden; } .btn-to-top i { display: -webkit-inline-box; display: -moz-inline-box; display: -ms-inline-flexbox; display: inline-flex; position: relative; font-size: 2.2rem; overflow: hidden; } .no-touch .btn-to-top:hover { -webkit-transform: scale(1.04); -moz-transform: scale(1.04); -ms-transform: scale(1.04); transform: scale(1.04); } @media only screen and (min-width: 768px) { .btn-to-top { right: 6rem; bottom: 4rem; width: 5.6rem; height: 5.6rem; } .btn-to-top i { font-size: 2.5rem; } } @media only screen and (min-width: 1600px) { .btn-to-top { right: 9rem; } } .btn-line-default { gap: 1rem; font: normal var(--fw-medium) 1.8rem/1.2 var(--_font-accent); color: var(--t-bright); } .btn-line-default i, .btn-line-default .btn-caption { display: -webkit-inline-box; display: -moz-inline-box; display: -ms-inline-flexbox; display: inline-flex; position: relative; } .btn-line-default i { font-size: 2.2rem; overflow: hidden; } @media only screen and (min-width: 1600px) { .btn-line-default { font-size: 2.2rem; } .btn-line-default i { font-size: 2.6rem; } } .btn-line-medium { gap: 1rem; font: normal var(--fw-regular) 1.6rem/1.2 var(--_font-accent); color: var(--t-bright); } .btn-line-medium i, .btn-line-medium .btn-caption { display: -webkit-inline-box; display: -moz-inline-box; display: -ms-inline-flexbox; display: inline-flex; position: relative; } .btn-line-medium i { font-size: 1.8rem; overflow: hidden; } @media only screen and (min-width: 1600px) { .btn-line-medium { font-size: 1.8rem; } .btn-line-medium i { font-size: 2rem; } } .btn-line-small { gap: 1rem; font: normal var(--fw-regular) 1.8rem/1.2 var(--_font-accent); color: var(--t-muted); } .btn-line-small i, .btn-line-small .btn-caption { display: -webkit-inline-box; display: -moz-inline-box; display: -ms-inline-flexbox; display: inline-flex; position: relative; } .btn-line-small i { font-size: 2.2rem; overflow: hidden; } .btn-line-xsmall { font: normal var(--fw-regular) 1.4rem/1.2 var(--_font-accent); gap: 0.6rem; -webkit-box-pack: start; -moz-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; width: auto; } .btn-line-xsmall i, .btn-line-xsmall .btn-caption { display: -webkit-inline-box; display: -moz-inline-box; display: -ms-inline-flexbox; display: inline-flex; position: relative; } .btn-line-xsmall i { font-size: 1.6rem; overflow: hidden; } .btn-line-headline { gap: 1rem; -webkit-box-pack: start; -moz-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: end; -moz-box-align: end; -ms-flex-align: end; align-items: flex-end; width: auto; font: normal var(--fw-medium) 3.6rem/1.1 var(--_font-accent); letter-spacing: -0.06rem; color: var(--t-muted-extra); margin-top: 1rem; } .btn-line-headline i, .btn-line-headline .btn-caption { display: -webkit-inline-box; display: -moz-inline-box; display: -ms-inline-flexbox; display: inline-flex; position: relative; } .btn-line-headline i { font-size: 3.1rem; overflow: hidden; } @media only screen and (min-width: 768px) { .btn-line-headline { font-size: 8rem; margin-top: 0; } .btn-line-headline i { font-size: 6.7rem; } } @media only screen and (min-width: 1200px) { .btn-line-headline { font-size: 10rem; } .btn-line-headline i { font-size: 8.7rem; } .no-touch .btn-line-headline:hover { color: var(--accent); } } @media only screen and (min-width: 1600px) { .btn-line-headline { font-size: 12rem; } .btn-line-headline i { font-size: 10.1rem; } } .btn-default { height: 5.6rem; line-height: 5.6rem; gap: 1.2rem; padding: 0 2.2rem; -moz-border-radius: 2.8rem; border-radius: 2.8rem; border-width: 2px; font: normal var(--fw-medium) 2.2rem/1.5 var(--_font-accent); } .btn-default i, .btn-default .btn-caption { display: -webkit-inline-box; display: -moz-inline-box; display: -ms-inline-flexbox; display: inline-flex; position: relative; } .btn-default i { font-size: 2.6rem; overflow: hidden; } .btn-small { height: 4.4rem; line-height: 4.4rem; gap: 0.8rem; padding: 0 1.5rem; -moz-border-radius: 2.2rem; border-radius: 2.2rem; border-width: 1px; font: normal var(--fw-regular) 1.6rem/1.5 var(--_font-accent); } .btn-small i { font-size: 1.8rem; } .btn-large { height: 5.6rem; line-height: 5.6rem; gap: 1.2rem; padding: 0 2.2rem; -moz-border-radius: 2.8rem; border-radius: 2.8rem; border-width: 2px; font: normal var(--fw-medium) 2.2rem/1.5 var(--_font-accent); } .btn-large i { font-size: 2.6rem; } @media only screen and (min-width: 768px) { .btn-large { height: 8.4rem; line-height: 8.4rem; gap: 1.6rem; padding: 0 3.2rem; -moz-border-radius: 4.2rem; border-radius: 4.2rem; border-width: 2px; font: normal var(--fw-medium) 3rem/1.5 var(--_font-accent); } .btn-large i { font-size: 3.6rem; } } .btn-round { width: 5.6rem; height: 5.6rem; -moz-border-radius: 50%; border-radius: 50%; border-width: 2px; font: normal var(--fw-regular) 2.2rem/1.5 var(--_font-accent); -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); transform: scale(1); -webkit-transition: -webkit-transform var(--_animspeed-medium) var(--_animbezier); transition: -webkit-transform var(--_animspeed-medium) var(--_animbezier); -moz-transition: transform var(--_animspeed-medium) var(--_animbezier), -moz-transform var(--_animspeed-medium) var(--_animbezier); transition: transform var(--_animspeed-medium) var(--_animbezier); transition: transform var(--_animspeed-medium) var(--_animbezier), -webkit-transform var(--_animspeed-medium) var(--_animbezier), -moz-transform var(--_animspeed-medium) var(--_animbezier); } .btn-round i { display: -webkit-inline-box; display: -moz-inline-box; display: -ms-inline-flexbox; display: inline-flex; position: relative; font-size: 2.5rem; overflow: hidden; } .no-touch .btn-round:hover { -webkit-transform: scale(1.04); -moz-transform: scale(1.04); -ms-transform: scale(1.04); transform: scale(1.04); } .btn-round-large { width: 5.6rem; height: 5.6rem; border-width: 2px; } .btn-round-large i { font-size: 2.6rem; } @media only screen and (min-width: 768px) { .btn-round-large { width: 8.2rem; height: 8.2rem; } .btn-round-large i { font-size: 3rem; } } .btn-round-medium { width: 5.6rem; height: 5.6rem; border-width: 1px; } .btn-round-medium i { font-size: 2.4rem; } .btn-round-small { width: 4rem; height: 4rem; border-width: 1px; } .btn-round-small i { font-size: 1.8rem; } .btn-form { -webkit-box-pack: end; -moz-box-pack: end; -ms-flex-pack: end; justify-content: end; width: 6rem; height: 6rem; border-width: 2px; font: normal var(--fw-regular) 2.2rem/1.5 var(--_font-accent); -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); transform: scale(1); -webkit-transition: color var(--_animspeed-medium) var(--_animbezier), -webkit-transform var(--_animspeed-medium); transition: color var(--_animspeed-medium) var(--_animbezier), -webkit-transform var(--_animspeed-medium); -moz-transition: transform var(--_animspeed-medium), color var(--_animspeed-medium) var(--_animbezier), -moz-transform var(--_animspeed-medium); transition: transform var(--_animspeed-medium), color var(--_animspeed-medium) var(--_animbezier); transition: transform var(--_animspeed-medium), color var(--_animspeed-medium) var(--_animbezier), -webkit-transform var(--_animspeed-medium), -moz-transform var(--_animspeed-medium); } .btn-form i { display: -webkit-inline-box; display: -moz-inline-box; display: -ms-inline-flexbox; display: inline-flex; position: relative; font-size: 2.6rem; overflow: hidden; } .no-touch .btn-form:hover { -webkit-transform: scale(1.04); -moz-transform: scale(1.04); -ms-transform: scale(1.04); transform: scale(1.04); } .no-touch .btn-form:hover.no-scale { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } .btn-absolute-right { position: absolute; top: 0; right: 0; } .btn-fullwidth { width: 100%; -webkit-box-pack: justify; -moz-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .btn-outline { background-color: transparent; border-style: solid; border-color: var(--st-bright); color: var(--t-bright); } .btn-outline.opposite { border-color: var(--st-opp-bright); color: var(--t-opp-bright); } .btn-outline.permanent { border-color: var(--pt-base); color: var(--pt-t-light-bright); } .btn-accent { background-color: var(--accent); border-style: solid; border-color: var(--accent); color: var(--t-opp-bright); } .btn-additional { background-color: var(--additional); border-style: solid; border-color: var(--additional); color: var(--t-bright); } .btn-opposite { background-color: var(--base-opp); border-style: solid; border-color: var(--base-opp); color: var(--t-opp-bright); } .btn-base { background-color: var(--base); border-style: solid; border-color: var(--base); color: var(--t-bright); } .btn-permanent { background-color: var(--pt-base); border-style: solid; border-color: var(--pt-st-light-bright); color: var(--pt-t-dark-bright); } .btn-muted { background-color: transparent; color: var(--t-muted); } .no-touch .btn-muted:hover { color: var(--t-bright); } .btn-bright { background-color: transparent; color: var(--t-bright); } .no-touch .btn-bright:hover { color: var(--t-bright); } .btn-anim.play .btn-anim__letter { -webkit-transform: translateY(-100%); -moz-transform: translateY(-100%); -ms-transform: translateY(-100%); transform: translateY(-100%); } .btn-anim:hover .btn-anim__letter { -webkit-transform: translateY(-100%); -moz-transform: translateY(-100%); -ms-transform: translateY(-100%); transform: translateY(-100%); } .btn-anim .btn-caption { display: block !important; height: 3.3rem; line-height: 3.3rem; overflow: hidden; } .btn-anim.btn-anim-medium .btn-caption { height: 2.3rem; line-height: 2.3rem; } .btn-anim__letter { display: inline-block; -webkit-transition: -webkit-transform 0.5s cubic-bezier(0.76, 0, 0.024, 1); transition: -webkit-transform 0.5s cubic-bezier(0.76, 0, 0.024, 1); -moz-transition: transform 0.5s cubic-bezier(0.76, 0, 0.024, 1), -moz-transform 0.5s cubic-bezier(0.76, 0, 0.024, 1); transition: transform 0.5s cubic-bezier(0.76, 0, 0.024, 1); transition: transform 0.5s cubic-bezier(0.76, 0, 0.024, 1), -webkit-transform 0.5s cubic-bezier(0.76, 0, 0.024, 1), -moz-transform 0.5s cubic-bezier(0.76, 0, 0.024, 1); } .btn-anim .btn-anim__block:last-child { color: var(--primary); } .btn-anim__letter:nth-child(1) { -webkit-transition-delay: 0s; -moz-transition-delay: 0s; transition-delay: 0s; } .btn-anim__letter:nth-child(2) { -webkit-transition-delay: 0.03s; -moz-transition-delay: 0.03s; transition-delay: 0.03s; } .btn-anim__letter:nth-child(3) { -webkit-transition-delay: 0.06s; -moz-transition-delay: 0.06s; transition-delay: 0.06s; } .btn-anim__letter:nth-child(4) { -webkit-transition-delay: 0.09s; -moz-transition-delay: 0.09s; transition-delay: 0.09s; } .btn-anim__letter:nth-child(5) { -webkit-transition-delay: 0.12s; -moz-transition-delay: 0.12s; transition-delay: 0.12s; } .btn-anim__letter:nth-child(6) { -webkit-transition-delay: 0.15s; -moz-transition-delay: 0.15s; transition-delay: 0.15s; } .btn-anim__letter:nth-child(7) { -webkit-transition-delay: 0.18s; -moz-transition-delay: 0.18s; transition-delay: 0.18s; } .btn-anim__letter:nth-child(8) { -webkit-transition-delay: 0.21s; -moz-transition-delay: 0.21s; transition-delay: 0.21s; } .btn-anim__letter:nth-child(9) { -webkit-transition-delay: 0.24s; -moz-transition-delay: 0.24s; transition-delay: 0.24s; } .btn-anim__letter:nth-child(10) { -webkit-transition-delay: 0.27s; -moz-transition-delay: 0.27s; transition-delay: 0.27s; } .btn-anim__letter:nth-child(11) { -webkit-transition-delay: 0.3s; -moz-transition-delay: 0.3s; transition-delay: 0.3s; } .btn-anim__letter:nth-child(12) { -webkit-transition-delay: 0.33s; -moz-transition-delay: 0.33s; transition-delay: 0.33s; } .btn-anim__letter:nth-child(13) { -webkit-transition-delay: 0.36s; -moz-transition-delay: 0.36s; transition-delay: 0.36s; } .btn-anim__letter:nth-child(14) { -webkit-transition-delay: 0.39s; -moz-transition-delay: 0.39s; transition-delay: 0.39s; } .btn-anim__letter:nth-child(15) { -webkit-transition-delay: 0.42s; -moz-transition-delay: 0.42s; transition-delay: 0.42s; } .btn-anim__letter:nth-child(16) { -webkit-transition-delay: 0.45s; -moz-transition-delay: 0.45s; transition-delay: 0.45s; } .btn-anim__letter:nth-child(17) { -webkit-transition-delay: 0.48s; -moz-transition-delay: 0.48s; transition-delay: 0.48s; } .btn-anim__letter:nth-child(18) { -webkit-transition-delay: 0.51s; -moz-transition-delay: 0.51s; transition-delay: 0.51s; } .btn-anim__letter:nth-child(19) { -webkit-transition-delay: 0.54s; -moz-transition-delay: 0.54s; transition-delay: 0.54s; } .btn-anim__letter:nth-child(20) { -webkit-transition-delay: 0.57s; -moz-transition-delay: 0.57s; transition-delay: 0.57s; } .btn-anim__letter:nth-child(21) { -webkit-transition-delay: 0.6s; -moz-transition-delay: 0.6s; transition-delay: 0.6s; } .btn-anim__letter:nth-child(22) { -webkit-transition-delay: 0.63s; -moz-transition-delay: 0.63s; transition-delay: 0.63s; } .btn-anim__letter:nth-child(23) { -webkit-transition-delay: 0.66s; -moz-transition-delay: 0.66s; transition-delay: 0.66s; } .btn-anim__letter:nth-child(24) { -webkit-transition-delay: 0.69s; -moz-transition-delay: 0.69s; transition-delay: 0.69s; } .btn-anim__letter:nth-child(25) { -webkit-transition-delay: 0.72s; -moz-transition-delay: 0.72s; transition-delay: 0.72s; } .btn-anim__letter:nth-child(26) { -webkit-transition-delay: 0.75s; -moz-transition-delay: 0.75s; transition-delay: 0.75s; } .btn-anim__letter:nth-child(27) { -webkit-transition-delay: 0.78s; -moz-transition-delay: 0.78s; transition-delay: 0.78s; } .btn-anim__letter:nth-child(28) { -webkit-transition-delay: 0.81s; -moz-transition-delay: 0.81s; transition-delay: 0.81s; } .btn-anim__letter:nth-child(29) { -webkit-transition-delay: 0.84s; -moz-transition-delay: 0.84s; transition-delay: 0.84s; } .btn-anim__letter:nth-child(30) { -webkit-transition-delay: 0.87s; -moz-transition-delay: 0.87s; transition-delay: 0.87s; } .btn-mobile-icon { width: 4.6rem; height: 4.6rem; padding: 0; -moz-border-radius: 50%; border-radius: 50%; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } .btn-mobile-icon i { font-size: 2rem; } .btn-mobile-icon .btn-caption { display: none !important; } @media only screen and (min-width: 768px) { .btn-mobile-icon { width: auto; height: 5.6rem; padding: 0 2.2rem; -moz-border-radius: 2.8rem; border-radius: 2.8rem; } .btn-mobile-icon i { font-size: 2.6rem; } .btn-mobile-icon .btn-caption { display: block !important; } } .tag { position: relative; display: -webkit-inline-box; display: -moz-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-pack: center; -moz-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; gap: 0.8rem; border: none; outline: 0; padding: 0; font: inherit; background-color: transparent; text-decoration: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .tag-default { height: 3.2rem; line-height: 3.2rem; padding: 0 1.2rem; -moz-border-radius: 1.6rem; border-radius: 1.6rem; border-width: 1px; font: normal var(--fw-regular) 1.4rem/1.5 var(--_font-accent); } @media only screen and (min-width: 1600px) { .tag-default { height: 3.6rem; line-height: 3.6rem; padding: 0 1.4rem; -moz-border-radius: 1.8rem; border-radius: 1.8rem; font-size: 1.6rem; } } .tag-opposite { background-color: var(--base-opp); border-style: solid; border-color: var(--base-opp); color: var(--t-opp-bright); } .tag-link-opposite { -webkit-transition: all var(--_animspeed-medium) var(--_animbezier); -moz-transition: all var(--_animspeed-medium) var(--_animbezier); transition: all var(--_animspeed-medium) var(--_animbezier); } .tag-link-opposite a { color: var(--t-opp-bright); } .no-touch .tag-link-opposite:hover { background-color: transparent; border-color: var(--st-bright); color: var(--t-bright); } .no-touch .tag-link-opposite:hover a { color: var(--t-bright); } .tag-outline { background-color: transparent; border-style: solid; border-color: var(--st-bright); color: var(--t-bright); } .tag-link-outline { -webkit-transition: all var(--_animspeed-medium) var(--_animbezier); -moz-transition: all var(--_animspeed-medium) var(--_animbezier); transition: all var(--_animspeed-medium) var(--_animbezier); } .tag-link-outline a { color: var(--t-bright); } .no-touch .tag-link-outline:hover { background-color: var(--base-opp); border-color: var(--base-opp); color: var(--t-opp-bright); } .no-touch .tag-link-outline:hover a { color: var(--t-opp-bright); } .tag-outline-opposite { background-color: transparent; border-style: solid; border-color: var(--st-opp-bright); color: var(--t-opp-bright); } .tag-outline-medium { background-color: transparent; border-style: solid; border-color: var(--st-medium); color: var(--t-medium); } .tag-outline-permanent { background-color: transparent; border-style: solid; border-color: var(--pt-st-light-bright); color: var(--pt-t-light-bright); } .tag-link-outline-premanent { -webkit-transition: all var(--_animspeed-medium) var(--_animbezier); -moz-transition: all var(--_animspeed-medium) var(--_animbezier); transition: all var(--_animspeed-medium) var(--_animbezier); } .tag-link-outline-premanent a { color: var(--pt-t-light-bright); } .no-touch .tag-link-outline-premanent:hover { background-color: var(--pt-base); border-color: var(--pt-st-light-bright); color: var(--pt-t-dark-bright); } .no-touch .tag-link-outline-premanent:hover a { color: var(--pt-t-dark-bright); } .tag-permanent { background-color: var(--pt-base); border-style: solid; border-color: var(--pt-st-light-bright); color: var(--pt-t-dark-bright); } .tag-permanent-opposite { background-color: var(--pt-base-dark); border-style: solid; border-color: var(--pt-st-dark-bright); color: var(--pt-t-light-bright); } .tag-accent { background-color: var(--accent); border-style: solid; border-color: var(--accent); color: var(--t-opp-bright); } .tag-additional { background-color: var(--additional); border-style: solid; border-color: var(--additional); color: var(--t-bright); } .slide-right:hover i::before { -webkit-animation: 0.6s var(--_animbezier) 0.3s 1 both slideRight; -moz-animation: 0.6s var(--_animbezier) 0.3s 1 both slideRight; animation: 0.6s var(--_animbezier) 0.3s 1 both slideRight; } .slide-right-up:hover i::before { -webkit-animation: 0.6s var(--_animbezier) 0.3s 1 both slideRightUp; -moz-animation: 0.6s var(--_animbezier) 0.3s 1 both slideRightUp; animation: 0.6s var(--_animbezier) 0.3s 1 both slideRightUp; } .slide-right-down:hover i::before { -webkit-animation: 0.6s var(--_animbezier) 0.3s 1 both slideRightDown; -moz-animation: 0.6s var(--_animbezier) 0.3s 1 both slideRightDown; animation: 0.6s var(--_animbezier) 0.3s 1 both slideRightDown; } .slide-left:hover i::before { -webkit-animation: 0.6s var(--_animbezier) 0s 1 both slideLeft; -moz-animation: 0.6s var(--_animbezier) 0s 1 both slideLeft; animation: 0.6s var(--_animbezier) 0s 1 both slideLeft; } .slide-left-up:hover i::before { -webkit-animation: 0.6s var(--_animbezier) 0s 1 both slideLeftUp; -moz-animation: 0.6s var(--_animbezier) 0s 1 both slideLeftUp; animation: 0.6s var(--_animbezier) 0s 1 both slideLeftUp; } .slide-left-down:hover i::before { -webkit-animation: 0.6s var(--_animbezier) 0s 1 both slideLeftDown; -moz-animation: 0.6s var(--_animbezier) 0s 1 both slideLeftDown; animation: 0.6s var(--_animbezier) 0s 1 both slideLeftDown; } .slide-down:hover i::before { -webkit-animation: 0.6s var(--_animbezier) 0.3s 1 both slideDown; -moz-animation: 0.6s var(--_animbezier) 0.3s 1 both slideDown; animation: 0.6s var(--_animbezier) 0.3s 1 both slideDown; } .slide-up:hover i::before { -webkit-animation: 0.6s var(--_animbezier) 0s 1 both slideUp; -moz-animation: 0.6s var(--_animbezier) 0s 1 both slideUp; animation: 0.6s var(--_animbezier) 0s 1 both slideUp; } .anim-no-delay:hover i::before { -webkit-animation-delay: 0s; -moz-animation-delay: 0s; animation-delay: 0s; } @-webkit-keyframes slideRight { 0% { -webkit-transform: translateX(0); transform: translateX(0); } 50% { -webkit-transform: translateX(100%); transform: translateX(100%); } 51% { opacity: 0; } 52% { -webkit-transform: translateX(-100%); transform: translateX(-100%); opacity: 0; } 53% { opacity: 1; } 100% { -webkit-transform: translateX(0); transform: translateX(0); } } @-moz-keyframes slideRight { 0% { -moz-transform: translateX(0); transform: translateX(0); } 50% { -moz-transform: translateX(100%); transform: translateX(100%); } 51% { opacity: 0; } 52% { -moz-transform: translateX(-100%); transform: translateX(-100%); opacity: 0; } 53% { opacity: 1; } 100% { -moz-transform: translateX(0); transform: translateX(0); } } @keyframes slideRight { 0% { -webkit-transform: translateX(0); -moz-transform: translateX(0); transform: translateX(0); } 50% { -webkit-transform: translateX(100%); -moz-transform: translateX(100%); transform: translateX(100%); } 51% { opacity: 0; } 52% { -webkit-transform: translateX(-100%); -moz-transform: translateX(-100%); transform: translateX(-100%); opacity: 0; } 53% { opacity: 1; } 100% { -webkit-transform: translateX(0); -moz-transform: translateX(0); transform: translateX(0); } } @-webkit-keyframes slideRightUp { 0% { -webkit-transform: translateX(0) translateY(0); transform: translateX(0) translateY(0); } 50% { -webkit-transform: translateX(100%) translateY(-100%); transform: translateX(100%) translateY(-100%); } 51% { opacity: 0; } 52% { -webkit-transform: translateX(-100%) translateY(100%); transform: translateX(-100%) translateY(100%); opacity: 0; } 53% { opacity: 1; } 100% { -webkit-transform: translateX(0) translateY(0); transform: translateX(0) translateY(0); } } @-moz-keyframes slideRightUp { 0% { -moz-transform: translateX(0) translateY(0); transform: translateX(0) translateY(0); } 50% { -moz-transform: translateX(100%) translateY(-100%); transform: translateX(100%) translateY(-100%); } 51% { opacity: 0; } 52% { -moz-transform: translateX(-100%) translateY(100%); transform: translateX(-100%) translateY(100%); opacity: 0; } 53% { opacity: 1; } 100% { -moz-transform: translateX(0) translateY(0); transform: translateX(0) translateY(0); } } @keyframes slideRightUp { 0% { -webkit-transform: translateX(0) translateY(0); -moz-transform: translateX(0) translateY(0); transform: translateX(0) translateY(0); } 50% { -webkit-transform: translateX(100%) translateY(-100%); -moz-transform: translateX(100%) translateY(-100%); transform: translateX(100%) translateY(-100%); } 51% { opacity: 0; } 52% { -webkit-transform: translateX(-100%) translateY(100%); -moz-transform: translateX(-100%) translateY(100%); transform: translateX(-100%) translateY(100%); opacity: 0; } 53% { opacity: 1; } 100% { -webkit-transform: translateX(0) translateY(0); -moz-transform: translateX(0) translateY(0); transform: translateX(0) translateY(0); } } @-webkit-keyframes slideRightDown { 0% { -webkit-transform: translateX(0) translateY(0); transform: translateX(0) translateY(0); } 50% { -webkit-transform: translateX(100%) translateY(100%); transform: translateX(100%) translateY(100%); } 51% { opacity: 0; } 52% { -webkit-transform: translateX(-100%) translateY(-100%); transform: translateX(-100%) translateY(-100%); opacity: 0; } 53% { opacity: 1; } 100% { -webkit-transform: translateX(0) translateY(0); transform: translateX(0) translateY(0); } } @-moz-keyframes slideRightDown { 0% { -moz-transform: translateX(0) translateY(0); transform: translateX(0) translateY(0); } 50% { -moz-transform: translateX(100%) translateY(100%); transform: translateX(100%) translateY(100%); } 51% { opacity: 0; } 52% { -moz-transform: translateX(-100%) translateY(-100%); transform: translateX(-100%) translateY(-100%); opacity: 0; } 53% { opacity: 1; } 100% { -moz-transform: translateX(0) translateY(0); transform: translateX(0) translateY(0); } } @keyframes slideRightDown { 0% { -webkit-transform: translateX(0) translateY(0); -moz-transform: translateX(0) translateY(0); transform: translateX(0) translateY(0); } 50% { -webkit-transform: translateX(100%) translateY(100%); -moz-transform: translateX(100%) translateY(100%); transform: translateX(100%) translateY(100%); } 51% { opacity: 0; } 52% { -webkit-transform: translateX(-100%) translateY(-100%); -moz-transform: translateX(-100%) translateY(-100%); transform: translateX(-100%) translateY(-100%); opacity: 0; } 53% { opacity: 1; } 100% { -webkit-transform: translateX(0) translateY(0); -moz-transform: translateX(0) translateY(0); transform: translateX(0) translateY(0); } } @-webkit-keyframes slideLeft { 0% { -webkit-transform: translateX(0); transform: translateX(0); } 50% { -webkit-transform: translateX(-100%); transform: translateX(-100%); } 51% { opacity: 0; } 52% { -webkit-transform: translateX(100%); transform: translateX(100%); opacity: 0; } 53% { opacity: 1; } 100% { -webkit-transform: translateX(0); transform: translateX(0); } } @-moz-keyframes slideLeft { 0% { -moz-transform: translateX(0); transform: translateX(0); } 50% { -moz-transform: translateX(-100%); transform: translateX(-100%); } 51% { opacity: 0; } 52% { -moz-transform: translateX(100%); transform: translateX(100%); opacity: 0; } 53% { opacity: 1; } 100% { -moz-transform: translateX(0); transform: translateX(0); } } @keyframes slideLeft { 0% { -webkit-transform: translateX(0); -moz-transform: translateX(0); transform: translateX(0); } 50% { -webkit-transform: translateX(-100%); -moz-transform: translateX(-100%); transform: translateX(-100%); } 51% { opacity: 0; } 52% { -webkit-transform: translateX(100%); -moz-transform: translateX(100%); transform: translateX(100%); opacity: 0; } 53% { opacity: 1; } 100% { -webkit-transform: translateX(0); -moz-transform: translateX(0); transform: translateX(0); } } @-webkit-keyframes slideLeftUp { 0% { -webkit-transform: translateX(0) translateY(0); transform: translateX(0) translateY(0); } 50% { -webkit-transform: translateX(-100%) translateY(-100%); transform: translateX(-100%) translateY(-100%); } 51% { opacity: 0; } 52% { -webkit-transform: translateX(100%) translateY(100%); transform: translateX(100%) translateY(100%); opacity: 0; } 53% { opacity: 1; } 100% { -webkit-transform: translateX(0) translateY(0); transform: translateX(0) translateY(0); } } @-moz-keyframes slideLeftUp { 0% { -moz-transform: translateX(0) translateY(0); transform: translateX(0) translateY(0); } 50% { -moz-transform: translateX(-100%) translateY(-100%); transform: translateX(-100%) translateY(-100%); } 51% { opacity: 0; } 52% { -moz-transform: translateX(100%) translateY(100%); transform: translateX(100%) translateY(100%); opacity: 0; } 53% { opacity: 1; } 100% { -moz-transform: translateX(0) translateY(0); transform: translateX(0) translateY(0); } } @keyframes slideLeftUp { 0% { -webkit-transform: translateX(0) translateY(0); -moz-transform: translateX(0) translateY(0); transform: translateX(0) translateY(0); } 50% { -webkit-transform: translateX(-100%) translateY(-100%); -moz-transform: translateX(-100%) translateY(-100%); transform: translateX(-100%) translateY(-100%); } 51% { opacity: 0; } 52% { -webkit-transform: translateX(100%) translateY(100%); -moz-transform: translateX(100%) translateY(100%); transform: translateX(100%) translateY(100%); opacity: 0; } 53% { opacity: 1; } 100% { -webkit-transform: translateX(0) translateY(0); -moz-transform: translateX(0) translateY(0); transform: translateX(0) translateY(0); } } @-webkit-keyframes slideLeftDown { 0% { -webkit-transform: translateX(0) translateY(0); transform: translateX(0) translateY(0); } 50% { -webkit-transform: translateX(-100%) translateY(100%); transform: translateX(-100%) translateY(100%); } 51% { opacity: 0; } 52% { -webkit-transform: translateX(100%) translateY(-100%); transform: translateX(100%) translateY(-100%); opacity: 0; } 53% { opacity: 1; } 100% { -webkit-transform: translateX(0) translateY(0); transform: translateX(0) translateY(0); } } @-moz-keyframes slideLeftDown { 0% { -moz-transform: translateX(0) translateY(0); transform: translateX(0) translateY(0); } 50% { -moz-transform: translateX(-100%) translateY(100%); transform: translateX(-100%) translateY(100%); } 51% { opacity: 0; } 52% { -moz-transform: translateX(100%) translateY(-100%); transform: translateX(100%) translateY(-100%); opacity: 0; } 53% { opacity: 1; } 100% { -moz-transform: translateX(0) translateY(0); transform: translateX(0) translateY(0); } } @keyframes slideLeftDown { 0% { -webkit-transform: translateX(0) translateY(0); -moz-transform: translateX(0) translateY(0); transform: translateX(0) translateY(0); } 50% { -webkit-transform: translateX(-100%) translateY(100%); -moz-transform: translateX(-100%) translateY(100%); transform: translateX(-100%) translateY(100%); } 51% { opacity: 0; } 52% { -webkit-transform: translateX(100%) translateY(-100%); -moz-transform: translateX(100%) translateY(-100%); transform: translateX(100%) translateY(-100%); opacity: 0; } 53% { opacity: 1; } 100% { -webkit-transform: translateX(0) translateY(0); -moz-transform: translateX(0) translateY(0); transform: translateX(0) translateY(0); } } @-webkit-keyframes slideDown { 0% { -webkit-transform: translateY(0); transform: translateY(0); } 50% { -webkit-transform: translateY(100%); transform: translateY(100%); } 51% { opacity: 0; } 52% { -webkit-transform: translateY(-100%); transform: translateY(-100%); opacity: 0; } 53% { opacity: 1; } 100% { -webkit-transform: translateY(0); transform: translateY(0); } } @-moz-keyframes slideDown { 0% { -moz-transform: translateY(0); transform: translateY(0); } 50% { -moz-transform: translateY(100%); transform: translateY(100%); } 51% { opacity: 0; } 52% { -moz-transform: translateY(-100%); transform: translateY(-100%); opacity: 0; } 53% { opacity: 1; } 100% { -moz-transform: translateY(0); transform: translateY(0); } } @keyframes slideDown { 0% { -webkit-transform: translateY(0); -moz-transform: translateY(0); transform: translateY(0); } 50% { -webkit-transform: translateY(100%); -moz-transform: translateY(100%); transform: translateY(100%); } 51% { opacity: 0; } 52% { -webkit-transform: translateY(-100%); -moz-transform: translateY(-100%); transform: translateY(-100%); opacity: 0; } 53% { opacity: 1; } 100% { -webkit-transform: translateY(0); -moz-transform: translateY(0); transform: translateY(0); } } @-webkit-keyframes slideUp { 0% { -webkit-transform: translateY(0); transform: translateY(0); } 50% { -webkit-transform: translateY(-100%); transform: translateY(-100%); } 51% { opacity: 0; } 52% { -webkit-transform: translateY(100%); transform: translateY(100%); opacity: 0; } 53% { opacity: 1; } 100% { -webkit-transform: translateY(0); transform: translateY(0); } } @-moz-keyframes slideUp { 0% { -moz-transform: translateY(0); transform: translateY(0); } 50% { -moz-transform: translateY(-100%); transform: translateY(-100%); } 51% { opacity: 0; } 52% { -moz-transform: translateY(100%); transform: translateY(100%); opacity: 0; } 53% { opacity: 1; } 100% { -moz-transform: translateY(0); transform: translateY(0); } } @keyframes slideUp { 0% { -webkit-transform: translateY(0); -moz-transform: translateY(0); transform: translateY(0); } 50% { -webkit-transform: translateY(-100%); -moz-transform: translateY(-100%); transform: translateY(-100%); } 51% { opacity: 0; } 52% { -webkit-transform: translateY(100%); -moz-transform: translateY(100%); transform: translateY(100%); opacity: 0; } 53% { opacity: 1; } 100% { -webkit-transform: translateY(0); -moz-transform: translateY(0); transform: translateY(0); } } .mxd-spin { -webkit-animation: spin 15s linear infinite; -moz-animation: spin 15s linear infinite; animation: spin 15s linear infinite; } .mxd-spin-hover img { -webkit-animation: spin 5s linear infinite; -moz-animation: spin 5s linear infinite; animation: spin 5s linear infinite; -webkit-animation-play-state: paused; -moz-animation-play-state: paused; animation-play-state: paused; } .mxd-spin-hover:hover img { -webkit-animation-play-state: running; -moz-animation-play-state: running; animation-play-state: running; } @-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes spin { 100% { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); transform: rotate(360deg); } } /* ------------------------------------------------*/ /* Elements - Controls End */ /* ------------------------------------------------*/ /* ------------------------------------------------*/ /* Elements - Forms Start */ /* ------------------------------------------------*/ .form-container { position: relative; } .form { opacity: 1; -webkit-transition: opacity var(--_animspeed-slow) ease-in-out; -moz-transition: opacity var(--_animspeed-slow) ease-in-out; transition: opacity var(--_animspeed-slow) ease-in-out; } .form.is-hidden { opacity: 0; } form { position: relative; width: 100%; } form input, form textarea { position: relative; display: block; width: 100%; border: none; outline: none; margin: 0; padding: 1.2rem 0.2rem; background-color: transparent; border-bottom: 2px solid var(--st-medium); font: normal var(--fw-regular) 2.2rem var(--_font-accent); height: 6rem; line-height: 6rem; color: var(--t-bright); } form input:focus, form textarea:focus { border-bottom: 2px solid var(--st-bright); } form textarea { height: 16rem; line-height: 1.6; resize: none; } form ::-webkit-input-placeholder { color: var(--t-muted); } form :-moz-placeholder { color: var(--t-muted); } form ::-moz-placeholder { color: var(--t-muted); } form :-ms-input-placeholder { color: var(--t-muted); } form input:focus:required:invalid, form textarea:focus:required:invalid { color: var(--t-bright); } form input:required:valid, form textarea:required:valid { color: var(--t-bright); } @media only screen and (min-width: 768px) { form textarea { height: 23rem; } } @media only screen and (min-width: 1600px) { form input, form textarea { font-size: 2.2rem; } } .form__reply { position: absolute; top: auto; right: auto; bottom: 0; left: 0; opacity: 0; -webkit-transition: opacity var(--_animspeed-slow) ease-in-out; -moz-transition: opacity var(--_animspeed-slow) ease-in-out; transition: opacity var(--_animspeed-slow) ease-in-out; } .form__reply.centered { position: absolute; top: auto; right: auto; bottom: auto; left: auto; left: 50%; top: 50%; bottom: auto; right: auto; -webkit-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); max-width: 400px; } .form__reply.is-visible { opacity: 1; } .reply__icon { display: block; font-size: 6rem; color: var(--t-bright); margin-bottom: 1.2rem; } .reply__title { font: normal var(--fw-medium) 3.6rem/1.2 var(--_font-accent); color: var(--t-bright); margin-bottom: 1.4rem; } .reply__text { display: block; font: normal var(--fw-regular) 1.8rem/1.6 var(--_font-accent); color: var(--t-medium); } /* ------------------------------------------------*/ /* Elements - Forms End */ /* ------------------------------------------------*/ /* ------------------------------------------------*/ /* Elements - Components Start */ /* ------------------------------------------------*/ .mxd-logo { display: -webkit-inline-box; display: -moz-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: left; -moz-box-pack: left; -ms-flex-pack: left; justify-content: left; gap: 1rem; } .mxd-logo img { height: 60px; } html[color-scheme="light"] .mxd-logo img { filter: invert(0); } html[color-scheme="dark"] .mxd-logo img { filter:invert(1); } @media only screen and (min-width: 768px) { .mxd-logo { gap: 1.4rem; height:60px; } } .mxd-logo__image { display: block; width: 4.6rem; height: auto; } @media only screen and (min-width: 768px) { .mxd-logo__image { width: 5.6rem; } } .mxd-logo__text { font: normal var(--fw-medium) 1.9rem/1.1 var(--_font-accent); letter-spacing: normal; color: var(--t-bright); } @media only screen and (min-width: 768px) { .mxd-logo__text { font-size: 2.4rem; } } .mxd-section-title { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -moz-box-orient: vertical; -moz-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 3.4rem; text-align: left; margin-bottom: 7rem; } .mxd-section-title.h2-only { margin-bottom: 6.2rem; } .mxd-section-title.no-controls { margin-bottom: 6rem; } .mxd-section-title.title-large { gap: 4.2rem; } .mxd-section-title.pre-grid { margin-bottom: 4rem; } .mxd-section-title.pre-block { margin-bottom: 4.4rem; } .mxd-section-title.no-margin { margin: 0; } @media only screen and (min-width: 768px) { .mxd-section-title { margin-bottom: 8rem; } .mxd-section-title.h2-only { margin-bottom: 6.6rem; } .mxd-section-title.no-controls { margin-bottom: 7rem; } .mxd-section-title.pre-grid { margin-bottom: 5rem; } } @media only screen and (min-width: 1200px) { .mxd-section-title { margin-bottom: 6.7rem; } .mxd-section-title.no-controls { margin-bottom: 6.7rem; } .mxd-section-title.no-margin-desktop { margin-bottom: 0; } } @media only screen and (min-width: 1200px) { .mxd-section-title.title-large { gap: 4rem; } } @media only screen and (min-width: 1600px) { .mxd-section-title { gap: 4.2rem; margin-bottom: 6.7rem; } } .mxd-section-title__text { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -moz-box-orient: vertical; -moz-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 2.4rem; } @media only screen and (min-width: 1600px) { .mxd-section-title__text { gap: 2.6rem; } } .mxd-section-title__controls { position: relative; } .mxd-section-title__image-link { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; } .mxd-section-title__image-link svg, .mxd-section-title__image-link img { width: 140px; height: auto; } @media only screen and (min-width: 1600px) { .mxd-section-title__image-link svg, .mxd-section-title__image-link img { width: 160px; } } @media only screen and (min-width: 1200px) { .mxd-section-title__title.card-split-title { margin-top: -1.6rem; } } .mxd-section-title__descr { padding-right: 6rem; margin-top: 2.2rem; } @media only screen and (min-width: 768px) { .mxd-section-title__descr { margin-top: 1.8rem; max-width: 620px; } } @media only screen and (min-width: 1200px) { .mxd-section-title__descr { margin-top: 2.8rem; } } @media only screen and (min-width: 1600px) { .mxd-section-title__descr { margin-top: 2.5rem; } } .mxd-section-title__controls { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; margin-top: 3.2rem; } .mxd-section-title__controls.pre-title { margin-top: 3.2rem; } @media only screen and (min-width: 768px) { .mxd-section-title__controls.pre-title { margin-top: 2.9rem; } } @media only screen and (min-width: 1200px) { .mxd-section-title__controls { -webkit-box-pack: start; -moz-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; margin-top: 4.2rem; } .mxd-section-title__controls.pre-title { margin-top: 0; } } @media only screen and (min-width: 1600px) { .mxd-section-title__controls { margin-top: 4.2rem; } } @media only screen and (min-width: 1200px) { .mxd-section-title__hrtitle { padding-right: 6rem; margin-bottom: 0; } } .mxd-section-title__hrdescr { margin-top: 2.2rem; } @media only screen and (min-width: 768px) { .mxd-section-title__hrdescr { padding-right: 6rem; margin-top: 1.8rem; } } @media only screen and (min-width: 1200px) { .mxd-section-title__hrdescr { margin-top: 0; padding-top: 0.7rem; } } .mxd-section-title__hrcontrols { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; margin-top: 3.2rem; } .mxd-section-title__hrcontrols.pre-title { margin-top: 3.2rem; } @media only screen and (min-width: 768px) { .mxd-section-title__hrcontrols.pre-title { margin-top: 2.9rem; } } @media only screen and (min-width: 1200px) { .mxd-section-title__hrcontrols { -webkit-box-pack: end; -moz-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; padding-top: 1.7rem; margin-top: 0; } .mxd-section-title__hrcontrols.pre-title { margin-top: 0; } } @media only screen and (min-width: 1600px) { .mxd-section-title__hrcontrols { padding-top: 1.7rem; } } @media only screen and (min-width: 1200px) { .mxd-section-title__hrparagraph { margin-top: 4rem; } } @media only screen and (min-width: 1600px) { .mxd-section-title__hrparagraph { margin-top: 5.3rem; } } .mxd-data-list { position: relative; } .mxd-data-list__column { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -moz-box-orient: vertical; -moz-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 2.8rem; margin-bottom: 2.8rem; } .mxd-data-list__column:last-of-type { margin-bottom: 0; } @media only screen and (min-width: 768px) { .mxd-data-list__column { margin-bottom: 0; } } @media only screen and (min-width: 1200px) { .mxd-data-list__column { gap: 3.4rem; } } .mxd-data-list__item { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -moz-box-orient: vertical; -moz-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 0.6rem; } .mxd-data-list__name { font: normal var(--fw-regular) 1.8rem/1.2 var(--_font-accent); color: var(--t-medium); } .mxd-data-list__content { display: -webkit-inline-box; display: -moz-inline-box; display: -ms-inline-flexbox; display: inline-flex; font: normal var(--fw-medium) 2.2rem/1.2 var(--_font-accent); color: var(--t-bright); } .mxd-data-list__content a { text-decoration: none; background: -webkit-gradient(linear, left top, right top, from(var(--st-medium)), to(var(--st-medium))), -webkit-gradient(linear, left top, right top, from(var(--accent)), to(var(--accent))); background: -moz-linear-gradient(left, var(--st-medium), var(--st-medium)), -moz-linear-gradient(left, var(--accent), var(--accent)); background: linear-gradient(to right, var(--st-medium), var(--st-medium)), linear-gradient(to right, var(--accent), var(--accent)); -moz-background-size: 100% 1px, 0 1px; background-size: 100% 1px, 0 1px; background-position: 100% 100%, 0 100%; background-repeat: no-repeat; -webkit-transition: background-size 400ms, color 300ms; -moz-transition: background-size 400ms, color 300ms, -moz-background-size 400ms; transition: background-size 400ms, color 300ms; transition: background-size 400ms, color 300ms, -moz-background-size 400ms; -webkit-transform-origin: bottom right; -moz-transform-origin: bottom right; -ms-transform-origin: bottom right; transform-origin: bottom right; } .no-touch .mxd-data-list__content a:hover { color: var(--t-bright); -moz-background-size: 0 1px, 100% 1px; background-size: 0 1px, 100% 1px; -webkit-transform-origin: bottom left; -moz-transform-origin: bottom left; -ms-transform-origin: bottom left; transform-origin: bottom left; } .mxd-avatars-group { position: relative; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; gap: 2rem; } @media only screen and (min-width: 1200px) { .mxd-avatars-group { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -moz-box-orient: horizontal; -moz-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-align: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; } .mxd-avatars-group.align-right { -webkit-box-orient: vertical; -webkit-box-direction: normal; -moz-box-orient: vertical; -moz-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: end; -moz-box-align: end; -ms-flex-align: end; align-items: flex-end; -webkit-box-pack: end; -moz-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; text-align: right; } } .mxd-avatars-group__text { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -moz-box-orient: vertical; -moz-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .mxd-avatars-group__text p, .mxd-avatars-group__text a { line-height: 1.2; color: var(--t-medium); font-size: 1.8rem; } @media only screen and (min-width: 768px) { .mxd-avatars-group__text p, .mxd-avatars-group__text a { font-size: 2.2rem; } } .mxd-avatars { position: relative; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; } .mxd-avatars.align-right { -webkit-box-pack: end; -moz-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; text-align: right; } .mxd-avatars__item { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -moz-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 8rem; height: 8rem; -moz-border-radius: 50%; border-radius: 50%; overflow: hidden; margin-left: -2.2rem; } .mxd-avatars__item:first-of-type { margin-left: 0; } .mxd-avatars__item.small { width: 4.6rem; height: 4.6rem; margin-left: -1.4rem; } .mxd-avatars__item.small:first-of-type { margin-left: 0; } .mxd-avatars__item img { width: 100%; height: auto; -o-object-fit: cover; object-fit: cover; } @media only screen and (min-width: 768px) { .mxd-avatars__item.small { width: 5.6rem; height: 5.6rem; margin-left: -1.6rem; } } .mxd-avatars__icon { width: 4rem; height: auto; } .mxd-avatars__icon.small { width: 3rem; height: auto; } .mxd-preview-hover { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -moz-box-orient: vertical; -moz-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -moz-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; gap: 0.8rem; opacity: 0; -webkit-transition: fbackdrop-filter var(--_animspeed-medium), opacity var(--_animspeed-medium) var(--_animbezier); -moz-transition: fbackdrop-filter var(--_animspeed-medium), opacity var(--_animspeed-medium) var(--_animbezier); transition: fbackdrop-filter var(--_animspeed-medium), opacity var(--_animspeed-medium) var(--_animbezier); } .mxd-preview-hover__icon { display: block; width: 10rem; } .mxd-preview-hover__icon.icon-small { width: 8rem; } .mxd-preview-hover__icon img { width: 100%; height: auto; } .mxd-preview-hover__text { font: normal var(--fw-medium) 3rem/1.2 var(--_font-accent); color: var(--pt-t-light-bright); } .mxd-counter { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -moz-box-orient: vertical; -moz-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 3rem; } .mxd-counter.small { gap: 2rem; } .mxd-counter.horizontal { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -moz-box-orient: horizontal; -moz-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-align: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; gap: 1.4rem; } @media only screen and (min-width: 768px) { .mxd-counter.align-end { -webkit-box-align: end; -moz-box-align: end; -ms-flex-align: end; align-items: flex-end; text-align: right; } } .mxd-counter__descr { max-width: 250px; } .mxd-btngroup { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -moz-box-orient: vertical; -moz-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 1rem; } .mxd-btngroup.centered { -webkit-box-pack: center; -moz-box-pack: center; -ms-flex-pack: center; justify-content: center; } @media only screen and (min-width: 576px) { .mxd-btngroup { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -moz-box-orient: horizontal; -moz-box-direction: normal; -ms-flex-direction: row; flex-direction: row; gap: 2rem; } } .mxd-divider { position: relative; -moz-border-radius: var(--_radius-l); border-radius: var(--_radius-l); overflow: hidden; height: 460px; } @media only screen and (min-width: 768px) { .mxd-divider { height: 600px; } } @media only screen and (min-width: 1200px) { .mxd-divider { height: 760px; } .mxd-divider.divider-hero-01 { padding-top: 14rem; } } @media only screen and (min-width: 1600px) { .mxd-divider { height: 930px; } } .mxd-divider__image { position: relative; width: 100%; height: 460px; background-repeat: no-repeat; background-position: center; -moz-background-size: cover; background-size: cover; overflow: hidden; } .mxd-divider__image img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } @media only screen and (min-width: 768px) { .mxd-divider__image { height: 600px; } } @media only screen and (min-width: 1200px) { .mxd-divider__image { height: 760px; } } @media only screen and (min-width: 1600px) { .mxd-divider__image { height: 930px; } } .mxd-divider__video { position: relative; width: 100%; height: 460px; background-repeat: no-repeat; background-position: center; -moz-background-size: cover; background-size: cover; overflow: hidden; } .mxd-divider__video video { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: transparent; background-position: center center; -moz-background-size: contain; background-size: contain; -o-object-fit: cover; object-fit: cover; } .mxd-divider__video img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } @media only screen and (min-width: 768px) { .mxd-divider__video { height: 600px; } } @media only screen and (min-width: 1200px) { .mxd-divider__video { height: 760px; } } @media only screen and (min-width: 1600px) { .mxd-divider__video { height: 930px; } } .mxd-divider__trigger { position: absolute; left: 50%; top: 50%; bottom: auto; right: auto; -webkit-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); } .mxd-project-item__media { position: relative; display: block; margin-bottom: 1.4rem; height: 460px; } @media only screen and (min-width: 768px) { .mxd-project-item__media { height: 600px; margin-bottom: 2.3rem; } } @media only screen and (min-width: 1200px) { .mxd-project-item__media { height: 760px; } } @media only screen and (min-width: 1600px) { .mxd-project-item__media { height: 930px; } } .mxd-project-item__preview { position: relative; width: 100%; height: 460px; -moz-border-radius: var(--_radius-l); border-radius: var(--_radius-l); overflow: hidden; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -moz-box-orient: vertical; -moz-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: end; -moz-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; background-repeat: no-repeat; background-position: center; -moz-background-size: cover; background-size: cover; } @media only screen and (min-width: 768px) { .mxd-project-item__preview { height: 600px; } } @media only screen and (min-width: 1200px) { .mxd-project-item__preview { height: 760px; } } @media only screen and (min-width: 1600px) { .mxd-project-item__preview { height: 930px; } } .mxd-project-item__tags { position: absolute; bottom: 0; left: 0; width: 100%; padding: 2.6rem 3rem; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 1rem; } @media only screen and (min-width: 768px) { .mxd-project-item__tags { -webkit-box-align: start; -moz-box-align: start; -ms-flex-align: start; align-items: flex-start; padding: 4rem; } } @media only screen and (min-width: 1600px) { .mxd-project-item__tags { gap: 1.4rem; } } .mxd-project-item__promo { padding: 0 3rem; } @media only screen and (min-width: 768px) { .mxd-project-item__promo { padding: 0 4rem; } } .mxd-project-item__name a { display: inline; font: normal var(--fw-regular) 2.2rem/1.4 var(--_font-accent); color: var(--t-medium); text-decoration: none; background: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0))), -webkit-gradient(linear, left top, right top, from(var(--t-bright)), to(var(--t-bright))); background: -moz-linear-gradient(left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)), -moz-linear-gradient(left, var(--t-bright), var(--t-bright)); background: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)), linear-gradient(to right, var(--t-bright), var(--t-bright)); -moz-background-size: 100% 1px, 0 1px; background-size: 100% 1px, 0 1px; background-position: 100% 100%, 0 100%; background-repeat: no-repeat; -webkit-transition: background-size 300ms, color 300ms; -moz-transition: background-size 300ms, color 300ms, -moz-background-size 300ms; transition: background-size 300ms, color 300ms; transition: background-size 300ms, color 300ms, -moz-background-size 300ms; } .no-touch .mxd-project-item__name a:hover { color: var(--t-bright); -moz-background-size: 0 1px, 100% 1px; background-size: 0 1px, 100% 1px; } .mxd-project-item__name a span { font-weight: var(--fw-medium); color: var(--t-bright); } .mxd-project-item__name.small a { font-size: 2.2rem; } @media only screen and (min-width: 768px) { .mxd-project-item__name a { font-size: 3rem; } .mxd-project-item__name.small a { font-size: 2.2rem; } } .mxd-links-lines { position: relative; } @media (hover) and (prefers-reduced-motion: no-preference) { .mxd-links-lines > .mxd-links-lines__item { -webkit-transition: opacity 0.3s ease; -moz-transition: opacity 0.3s ease; transition: opacity 0.3s ease; } .mxd-links-lines:hover > .mxd-links-lines__item:not(:hover) { opacity: 0.2; } } .mxd-links-lines__item { position: relative; display: block; margin-top: -2px; } .mxd-links-lines__item:first-of-type { margin-top: 0; } .mxd-links-lines__divider { position: relative; width: 100%; height: 2px; background-color: var(--st-bright); } .mxd-links-lines__link { position: relative; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -moz-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; padding: 3rem 0; overflow: hidden; } .no-touch .mxd-links-lines__link:hover .mxd-links-lines__title { -webkit-transform: translateX(1rem); -moz-transform: translateX(1rem); -ms-transform: translateX(1rem); transform: translateX(1rem); } .no-touch .mxd-links-lines__link:hover .mxd-links-lines__icon i::before { -webkit-animation: 0.6s var(--_animbezier) 0s 1 both slideRightUp; -moz-animation: 0.6s var(--_animbezier) 0s 1 both slideRightUp; animation: 0.6s var(--_animbezier) 0s 1 both slideRightUp; } .mxd-links-lines__title { position: relative; font: normal var(--fw-medium) 2.2rem/1.2 var(--_font-accent); color: var(--t-bright); -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); -webkit-transition: color var(--_animspeed-medium) var(--_animbezier), -webkit-transform var(--_animspeed-medium); transition: color var(--_animspeed-medium) var(--_animbezier), -webkit-transform var(--_animspeed-medium); -moz-transition: transform var(--_animspeed-medium), color var(--_animspeed-medium) var(--_animbezier), -moz-transform var(--_animspeed-medium); transition: transform var(--_animspeed-medium), color var(--_animspeed-medium) var(--_animbezier); transition: transform var(--_animspeed-medium), color var(--_animspeed-medium) var(--_animbezier), -webkit-transform var(--_animspeed-medium), -moz-transform var(--_animspeed-medium); } .mxd-links-lines__title a { color: var(--t-bright); } .mxd-links-lines__title.opposite { color: var(--t-opp-bright); } .mxd-links-lines__title.opposite a { color: var(--t-opp-bright); } @media only screen and (min-width: 1200px) { .mxd-links-lines__title { font-size: 3rem; } } .mxd-links-lines__icon { position: relative; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; font-size: 3rem; -webkit-transform: translateX(0) rotate(0deg); -moz-transform: translateX(0) rotate(0deg); -ms-transform: translateX(0) rotate(0deg); transform: translateX(0) rotate(0deg); -webkit-transition: -webkit-transform var(--_animspeed-medium) var(--_animbezier); transition: -webkit-transform var(--_animspeed-medium) var(--_animbezier); -moz-transition: transform var(--_animspeed-medium) var(--_animbezier), -moz-transform var(--_animspeed-medium) var(--_animbezier); transition: transform var(--_animspeed-medium) var(--_animbezier); transition: transform var(--_animspeed-medium) var(--_animbezier), -webkit-transform var(--_animspeed-medium) var(--_animbezier), -moz-transform var(--_animspeed-medium) var(--_animbezier); } .mxd-links-lines__icon i { display: -webkit-inline-box; display: -moz-inline-box; display: -ms-inline-flexbox; display: inline-flex; position: relative; overflow: hidden; color: var(--t-bright); -webkit-transition: color var(--_animspeed-medium) var(--_animbezier); -moz-transition: color var(--_animspeed-medium) var(--_animbezier); transition: color var(--_animspeed-medium) var(--_animbezier); } .mxd-check-list { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -moz-box-orient: vertical; -moz-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 0.4rem; } .mxd-check-list li { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; gap: 1.2rem; font: normal var(--fw-regular) 1.8rem/1.6 var(--_font-accent); color: var(--t-medium); } .mxd-floating-img { position: absolute; top: 0; left: 0; width: 100%; height: 100vh; } .mxd-floating-img.floating-bg { overflow: hidden; z-index: -1; } .mxd-floating-img__item { position: absolute; width: -moz-calc(100% - 3rem); width: calc(100% - 3rem); height: auto; bottom: 20%; right: 1.5rem; } @media only screen and (min-width: 768px) { .mxd-floating-img__item { bottom: 4rem; right: 6rem; width: 600px; height: auto; } } @media only screen and (min-width: 1400px) { .mxd-floating-img__item { width: 46%; } } @media only screen and (min-width: 1600px) { .mxd-floating-img__item { right: 9rem; width: 40%; } } /* ------------------------------------------------*/ /* Elements - Components End */ /* ------------------------------------------------*/ /* ------------------------------------------------*/ /* Elements - Common Classes Start */ /* ------------------------------------------------*/ .bg-accent { background-color: var(--accent); } .bg-additional { background-color: var(--additional); } .bg-base { background-color: var(--base); } .bg-base-tint { background-color: var(--base-tint); } .bg-base-shade { background-color: var(--base-shade); } .bg-base-opp { background-color: var(--base-opp); } .st-accent { border: 1px solid var(--accent); } .st-additional { border: 1px solid var(--additional); } .st-base { border: 1px solid var(--base); } .st-base-tint { border: 1px solid var(--base-tint); } .st-base-shade { border: 1px solid var(--base-shade); } .st-base-opp { border: 1px solid var(--base-opp); } .t-accent { color: var(--accent); } .t-additional { color: var(--additional); } .radius-s { -moz-border-radius: var(--_radius-s); border-radius: var(--_radius-s); } .radius-m { -moz-border-radius: var(--_radius-m); border-radius: var(--_radius-m); } .radius-l { -moz-border-radius: var(--_radius-l); border-radius: var(--_radius-l); } .radius-xl { -moz-border-radius: var(--_radius-xl); border-radius: var(--_radius-xl); } .fullheight-l { height: auto; } @media only screen and (min-width: 992px) { .fullheight-l { height: 100%; } } .fullheight-xl { height: auto; } @media only screen and (min-width: 1200px) { .fullheight-xl { height: 100%; } } .anim-zoom-in-container, .anim-zoom-out-container { -webkit-transform-origin: center; -moz-transform-origin: center; -ms-transform-origin: center; transform-origin: center; } .padding-4 { padding: 2.6rem 3rem; } @media only screen and (min-width: 768px) { .padding-4 { padding: 3.6rem 4rem; } } .padding-5x4 { padding: 2.6rem 3rem; } @media only screen and (min-width: 768px) { .padding-5x4 { padding: 4rem 5rem; } } @media only screen and (min-width: 1200px) { .card-desktop-4 { width: -moz-calc(40% - 1.5rem); width: calc(40% - 1.5rem); } } @media only screen and (min-width: 1200px) { .card-desktop-6 { width: -moz-calc(60% - 1.5rem); width: calc(60% - 1.5rem); } } /* ------------------------------------------------*/ /* Elements - Common Classes End */ /* ------------------------------------------------*/ /* ------------------------------------------------*/ /* Block - Header Start */ /* ------------------------------------------------*/ .mxd-header { align-items:center; position: absolute; top: 0; left: 3rem; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -moz-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; width: 100%; width: -moz-calc(100% - 11.6rem); width: calc(100% - 11.6rem); padding-top: 3rem; z-index: 101; -webkit-transform: scaleY(1); -moz-transform: scaleY(1); -ms-transform: scaleY(1); transform: scaleY(1); opacity: 1; -webkit-transition: all var(--_animspeed-medium) var(--_animbezier); -moz-transition: all var(--_animspeed-medium) var(--_animbezier); transition: all var(--_animspeed-medium) var(--_animbezier); } .mxd-header.is-hidden { -webkit-transform: scaleY(1.2); -moz-transform: scaleY(1.2); -ms-transform: scaleY(1.2); transform: scaleY(1.2); opacity: 0; } .mxd-header.menu-is-visible { z-index: 10; } @media only screen and (min-width: 768px) { .mxd-header { left: 6rem; width: -moz-calc(100% - 19.6rem); width: calc(100% - 19.6rem); padding-top: 4rem; } } @media only screen and (min-width: 1600px) { .mxd-header { left: 9rem; width: -moz-calc(100% - 25.6rem); width: calc(100% - 25.6rem); } } .mxd-header__logo { position: relative; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; } .mxd-header__controls { position: relative; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; gap: 1rem; } @media only screen and (min-width: 768px) { .mxd-header__controls { gap: 2rem; } } /* ------------------------------------------------*/ /* Block - Header End */ /* ------------------------------------------------*/ /* ------------------------------------------------*/ /* Block - Menu Start */ /* ------------------------------------------------*/ .mxd-nav__wrap { position: fixed; top: auto; right: 0; bottom: auto; left: 0; z-index: 100; } .mxd-nav__contain { position: relative; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: end; -moz-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; min-height: 4.6rem; margin-top: 3rem; padding: 0 3rem; z-index: 2; pointer-events: none; } .mxd-nav__contain > * { pointer-events: auto; } @media only screen and (min-width: 768px) { .mxd-nav__contain { min-height: 5.8rem; margin-top: 4rem; padding: 0 6rem; } } @media only screen and (min-width: 1600px) { .mxd-nav__contain { padding: 0 9rem; } } .nav_link_wrap { position: relative; display: -webkit-inline-box; display: -moz-inline-box; display: -ms-inline-flexbox; display: inline-flex; } .nav_link_svg { display: block; width: 5rem; } .mxd-nav__hamburger { position: relative; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -moz-box-orient: vertical; -moz-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 0.7rem; -webkit-box-pack: center; -moz-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; width: 4.6rem; height: 4.6rem; } @media only screen and (min-width: 768px) { .mxd-nav__hamburger { width: 5.6rem; height: 5.6rem; } } .hamburger__base { position: absolute; inset: 0%; -moz-border-radius: var(--_radius-l); border-radius: var(--_radius-l); background-color: var(--base-opp-tint); z-index: 1; } .nav_hamburger_bg { position: absolute; inset: 0%; -moz-border-radius: 50%; border-radius: 50%; background-color: black; z-index: 2; } .hamburger__line { position: relative; -webkit-box-flex: 0; -moz-box-flex: 0; -ms-flex: none; flex: none; width: 50%; height: 0.3rem; -moz-border-radius: 0.3rem; border-radius: 0.3rem; background-color: var(--t-opp-bright); z-index: 2; } .mxd-menu__wrapper { position: absolute; inset: 0% 0% auto; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-align: start; -moz-box-align: start; -ms-flex-align: start; align-items: flex-start; -webkit-box-pack: end; -moz-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; width: 100%; height: 100vh; z-index: 1; padding: 1.5rem; display: none; } @media only screen and (min-width: 768px) { .mxd-menu__wrapper { padding: 2rem 4rem; } } @media only screen and (min-width: 1600px) { .mxd-menu__wrapper { padding: 2rem 7rem; } } .mxd-menu__base { position: absolute; inset: 0%; width: 100%; height: 100%; z-index: 1; } .mxd-menu__contain { position: relative; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -moz-box-orient: vertical; -moz-box-direction: normal; -ms-flex-direction: column; flex-direction: column; width: 100%; max-width: 100%; height: 100%; } .mxd-menu__inner { position: relative; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -moz-box-orient: vertical; -moz-box-direction: normal; -ms-flex-direction: column; flex-direction: column; width: 100%; height: 100%; padding-top: 7.6rem; overflow-y: scroll; overscroll-behavior-y: contain; scrollbar-width: none; } .mxd-menu__inner::-webkit-scrollbar { display: none; -webkit-appearance: none !important; width: 0 !important; height: 0; } @media only screen and (min-width: 768px) { .mxd-menu__inner::-webkit-scrollbar { display: none; width: 0 !important; } } @media only screen and (min-width: 1200px) { .mxd-menu__inner { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -moz-box-orient: horizontal; -moz-box-direction: normal; -ms-flex-direction: row; flex-direction: row; overflow: hidden; padding-top: 0; padding-bottom: 9.7rem; } } @media only screen and (min-width: 1600px) { .mxd-menu__inner { padding-bottom: 13.7rem; } } .mxd-menu__left { width: 100%; height: auto; padding: 0 3rem; z-index: 2; } @media only screen and (min-width: 1200px) { .mxd-menu__left { width: 50%; height: 100%; padding: 4rem 4rem 0 4rem; overflow-y: scroll; overscroll-behavior-y: contain; scrollbar-width: none; } .mxd-menu__left::-webkit-scrollbar { display: none; -webkit-appearance: none !important; width: 0 !important; height: 0; } } @media only screen and (min-width: 1600px) { .mxd-menu__left { padding-top: 6rem; padding: 6rem 7rem 0 7rem; } } .mxd-menu__right { position: relative; padding-top: 5.2rem; z-index: 2; } @media only screen and (min-width: 1200px) { .mxd-menu__right { width: 50%; height: 100%; padding-top: 0; } } .mxd-menu__data { position: relative; width: 100%; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -moz-box-orient: vertical; -moz-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: start; -moz-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: left; -moz-box-align: left; -ms-flex-align: left; align-items: left; gap: 0.6rem; padding: 0 3rem 2.6rem 3rem; margin-top: 2.4rem; text-align: center; z-index: 2; } .mxd-menu__data p { color: var(--t-opp-medium); } .mxd-menu__data p a { color: var(--t-opp-medium); text-decoration: none; background: -webkit-gradient(linear, left top, right top, from(var(--t-opp-muted)), to(var(--t-opp-muted))), -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0))); background: -moz-linear-gradient(left, var(--t-opp-muted), var(--t-opp-muted)), -moz-linear-gradient(left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)); background: linear-gradient(to right, var(--t-opp-muted), var(--t-opp-muted)), linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)); -moz-background-size: 100% 1px, 0 1px; background-size: 100% 1px, 0 1px; background-position: 100% 100%, 0 100%; background-repeat: no-repeat; -webkit-transition: background-size 400ms, color 300ms; -moz-transition: background-size 400ms, color 300ms, -moz-background-size 400ms; transition: background-size 400ms, color 300ms; transition: background-size 400ms, color 300ms, -moz-background-size 400ms; } .no-touch .mxd-menu__data p a:hover { color: var(--t-opp-bright); -moz-background-size: 0 1px, 100% 1px; background-size: 0 1px, 100% 1px; } @media only screen and (min-width: 1200px) { .mxd-menu__data { position: absolute; bottom: 4rem; left: 0; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -moz-box-orient: horizontal; -moz-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-pack: justify; -moz-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; width: 100%; padding: 0 4rem; margin-top: 0; } } @media only screen and (min-width: 1600px) { .mxd-menu__data { bottom: 6rem; padding: 0 7rem; } } .mxd-menu__caption { margin-bottom: 4.4rem; font-weight: var(--fw-regular-opp); color: var(--t-opp-medium); } @media only screen and (min-width: 1200px) { .mxd-menu__caption { max-width: 380px; } } @media only screen and (min-width: 1600px) { .mxd-menu__caption { max-width: 460px; } } .mxd-menu__link { position: relative; z-index: 2; color: GreenYellow; text-decoration: none; font-size: 4rem; } .main-menu { position: relative; } .main-menu__accordion { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -moz-box-orient: vertical; -moz-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 1.6rem; } @media only screen and (min-width: 1200px) { .main-menu__accordion { gap: 2rem; } } .main-menu__item { position: relative; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -moz-box-orient: vertical; -moz-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: start; -moz-box-align: start; -ms-flex-align: start; align-items: flex-start; width: 100%; color: var(--t-opp-bright); } .main-menu__item a { display: inline-block; } .main-menu__item.open .main-menu__toggle svg { -webkit-transform: rotate(135deg); -moz-transform: rotate(135deg); -ms-transform: rotate(135deg); transform: rotate(135deg); } .main-menu__link { height: 4.2rem; line-height: 4.2rem; font: normal var(--fw-medium-opp) 3.6rem var(--_font-accent); color: var(--t-opp-bright); } .main-menu__link .btn-caption { height: 4.2rem; line-height: 4.2rem; } @media only screen and (min-width: 1200px) { .main-menu__link { font-size: 5.6rem; height: 6.5rem; line-height: 6.5rem; } .main-menu__link .btn-caption { height: 6.5rem; line-height: 6.5rem; } } .main-menu__toggle { position: relative; width: 100%; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -moz-box-orient: horizontal; -moz-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-pack: justify; -moz-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; cursor: pointer; } .main-menu__toggle img, .main-menu__toggle svg { display: -webkit-inline-box; display: -moz-inline-box; display: -ms-inline-flexbox; display: inline-flex; width: 1.9rem; height: 1.9rem; -webkit-transition: -webkit-transform var(--_animspeed-medium) var(--_animbezier); transition: -webkit-transform var(--_animspeed-medium) var(--_animbezier); -moz-transition: transform var(--_animspeed-medium) var(--_animbezier), -moz-transform var(--_animspeed-medium) var(--_animbezier); transition: transform var(--_animspeed-medium) var(--_animbezier); transition: transform var(--_animspeed-medium) var(--_animbezier), -webkit-transform var(--_animspeed-medium) var(--_animbezier), -moz-transform var(--_animspeed-medium) var(--_animbezier); } .main-menu__toggle svg { fill: currentColor; } .no-touch .main-menu__toggle:hover svg { fill: var(--additional); } @media only screen and (min-width: 1200px) { .main-menu__toggle img, .main-menu__toggle svg { width: 2.3rem; height: 2.3rem; } } .submenu { position: relative; padding-top: 2rem; padding-left: 1.5rem; display: none; } @media only screen and (min-width: 768px) { .submenu { padding-left: 2rem; } } @media only screen and (min-width: 1600px) { .submenu { padding-left: 3.5rem; } } .submenu__item { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -moz-box-orient: vertical; -moz-box-direction: normal; -ms-flex-direction: column; flex-direction: column; width: 100%; margin-bottom: 1.2rem; } .submenu__item:last-of-type { margin-bottom: 0; } .submenu__item a { display: -webkit-inline-box; display: -moz-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-pack: start; -moz-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; height: auto; font: normal var(--fw-regular-opp) 2rem/1.2 var(--_font-accent); color: var(--t-opp-bright); padding-left: 0; } .no-touch .submenu__item a:hover { color: var(--t-opp-medium); -webkit-transform: translateX(1rem); -moz-transform: translateX(1rem); -ms-transform: translateX(1rem); transform: translateX(1rem); } .submenu__item.active a { color: color-mix(in srgb, var(--additional), var(--nl-black) 15%); font-weight: 600; } @media only screen and (min-width: 1400px) { .submenu__item a { font-size: 2.5rem; } } .menu-promo { position: relative; padding: 0 3rem; } @media only screen and (min-width: 768px) { .menu-promo { padding: 0 4rem; } } @media only screen and (min-width: 1200px) { .menu-promo { height: 100%; text-align: right; } } @media only screen and (min-width: 1600px) { .menu-promo { padding: 0 7rem; } } .menu-promo__content { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -moz-box-orient: vertical; -moz-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 2.1rem; } @media only screen and (min-width: 1200px) { .menu-promo__content { position: absolute; right: 0; bottom: 0; -webkit-box-align: end; -moz-box-align: end; -ms-flex-align: end; align-items: flex-end; gap: 3rem; width: 80%; padding: 0 4rem; } } @media only screen and (min-width: 1600px) { .menu-promo__content { padding: 0 7rem; } } .menu-promo__caption { font-weight: var(--fw-regular-opp); color: var(--t-opp-medium); } @media only screen and (min-width: 1200px) { .menu-promo__caption { max-width: 380px; } } @media only screen and (min-width: 1600px) { .menu-promo__caption { max-width: 460px; } } .menu-promo__video { position: relative; overflow: hidden; } @media only screen and (min-width: 1200px) { .menu-promo__video { width: 100%; height: auto; padding: 1rem; -moz-border-radius: var(--_radius-m); border-radius: var(--_radius-m); background-color: var(--base-opp); } } .menu-video { display: block; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; -moz-border-radius: var(--_radius-m); border-radius: var(--_radius-m); } @media only screen and (min-width: 1200px) { .menu-video { -moz-border-radius: 1.8rem; border-radius: 1.8rem; } } /* ------------------------------------------------*/ /* Block - Menu End */ /* ------------------------------------------------*/ /* ------------------------------------------------*/ /* Block - CTA Start */ /* ------------------------------------------------*/ .mxd-promo { position: relative; } .mxd-promo__inner { position: relative; width: 100%; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -moz-box-orient: vertical; -moz-box-direction: normal; -ms-flex-direction: column; flex-direction: column; background-color: var(--base-opp); padding-left: 3rem; padding-right: 3rem; overflow: hidden; } @media only screen and (min-width: 768px) { .mxd-promo__inner { padding-left: 5rem; padding-right: 5rem; } } @media only screen and (min-width: 1200px) { .mxd-promo__inner { padding-left: 6rem; padding-right: 6rem; } } @media only screen and (min-width: 1600px) { .mxd-promo__inner { padding-left: 9rem; padding-right: 9rem; } } .mxd-promo__bg { position: absolute; top: -4rem; right: -10rem; width: 70%; height: -moz-calc(100% + 4rem); height: calc(100% + 4rem); background-repeat: no-repeat; background-position: left center; -moz-background-size: cover; background-size: cover; } @media only screen and (min-width: 1200px) { .mxd-promo__bg { background-position: center; top: 0; right: 0; width: 50%; } } .mxd-promo__content { position: relative; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -moz-box-orient: vertical; -moz-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 6rem; margin: 12.2rem 0 14rem 0; } @media only screen and (min-width: 768px) { .mxd-promo__content { margin: 14rem 0 16rem 0; } } @media only screen and (min-width: 1600px) { .mxd-promo__content { margin: 17.6rem 0 20rem 0; } } .mxd-promo__title { display: block; color: var(--t-opp-bright); } .mxd-promo__title span { color: var(--t-opp-bright); } @media only screen and (min-width: 1200px) { .mxd-promo__title { width: 70%; } } @media only screen and (min-width: 1600px) { .mxd-promo__title { width: 60%; } } .mxd-promo__icon { padding-right: 1rem; } .mxd-promo__icon img { display: inline; width: auto; height: 3.4rem; } @media only screen and (min-width: 768px) { .mxd-promo__icon img { height: 5.4rem; } } @media only screen and (min-width: 1400px) { .mxd-promo__icon img { height: 7rem; } } .mxd-promo__caption { font: normal var(--fw-medium) 4.4rem/1.1 var(--_font-accent); letter-spacing: -0.06rem; color: var(--t-bright); } @media only screen and (min-width: 768px) { .mxd-promo__caption { font-size: 8rem; } } @media only screen and (min-width: 1400px) { .mxd-promo__caption { font-size: 10rem; } } .mxd-promo__images { display: none; } @media only screen and (min-width: 1200px) { .mxd-promo__images { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; position: absolute; top: 0; right: 0; width: 46%; height: 100%; } .mxd-promo__images .promo-image { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -moz-box-orient: vertical; -moz-box-direction: normal; -ms-flex-direction: column; flex-direction: column; position: absolute; } .mxd-promo__images .promo-image.bottom-layer { -webkit-box-ordinal-group: 0; -moz-box-ordinal-group: 0; -ms-flex-order: -1; order: -1; } .mxd-promo__images .promo-image-1 { width: 330px; height: auto; right: 6rem; bottom: 6rem; } .mxd-promo__images .promo-image-2 { width: 120px; height: auto; left: 0; bottom: 12rem; } } @media only screen and (min-width: 1400px) { .mxd-promo__images .promo-image-2 { left: 6rem; } } @media only screen and (min-width: 1600px) { .mxd-promo__images .promo-image-1 { width: 396px; right: 9rem; bottom: 9rem; } .mxd-promo__images .promo-image-2 { width: 140px; left: 6rem; bottom: 18rem; } } /* ------------------------------------------------*/ /* Block - CTA End */ /* ------------------------------------------------*/ /* ------------------------------------------------*/ /* Block - Footer Start */ /* ------------------------------------------------*/ .mxd-footer { position: relative; width: 100%; max-width: 1920px; margin: 0 auto; padding-bottom: 3rem; } @media only screen and (min-width: 768px) { .mxd-footer { padding-bottom: 6rem; } } .mxd-footer__text-wrap { position: relative; width: 100%; } .mxd-footer__fullwidth-text { position: relative; width: 100%; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -moz-box-orient: vertical; -moz-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -moz-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-flex: 0; -moz-box-flex: 0; -ms-flex: none; flex: none; -ms-flex-wrap: nowrap; flex-wrap: nowrap; height: -webkit-min-content; height: -moz-min-content; height: min-content; max-width: 1920px; padding: 0 3rem; color: var(--t-bright); z-index: -1; padding-top: 12.5rem; margin-bottom: 2rem; } .mxd-footer__fullwidth-text.personal { margin-bottom: 3rem; } @media only screen and (min-width: 768px) { .mxd-footer__fullwidth-text { padding: 0 6rem; padding-top: 10.5rem; margin-bottom: 0; } } @media only screen and (min-width: 1200px) { .mxd-footer__fullwidth-text.personal { margin-bottom: 5rem; } } @media only screen and (min-width: 1600px) { .mxd-footer__fullwidth-text { padding: 0 9rem; padding-top: 11.1rem; margin-bottom: -1rem; } } .mxd-footer__svg-v2 { position: relative; display: block; width: 100%; fill: currentColor; z-index: -1; } .fullwidth-text__tl-trigger { position: absolute; top: 0; right: 0; width: 0.1rem; height: 0.1rem; } .mxd-footer__svg { position: relative; outline: none; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -moz-box-orient: vertical; -moz-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: start; -moz-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -ms-flex-negative: 0; flex-shrink: 0; will-change: transform; opacity: 1; -webkit-transform: none; -moz-transform: none; -ms-transform: none; transform: none; } .mxd-footer__svg foreignObject, .mxd-footer__svg text { position: relative; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; } .mxd-footer__svg text { width: 100%; height: 100%; } .mxd-footer__text { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -moz-box-pack: center; -ms-flex-pack: center; justify-content: center; font-style: normal; font-weight: var(--fw-semibold); line-height: 1.1; font-family: var(--_font-accent); letter-spacing: -0.006rem; color: var(--t-bright); font-size: 1.2rem; } .mxd-footer__caption { display: -webkit-inline-box; display: -moz-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-pack: center; -moz-box-pack: center; -ms-flex-pack: center; justify-content: center; font-style: normal; font-weight: var(--fw-semibold); line-height: 1.1; font-family: var(--_font-accent); letter-spacing: -0.014rem; color: var(--t-bright); font-size: 1.2rem; } .mxd-footer__caption .word { display: -webkit-box !important; display: -moz-box !important; display: -ms-flexbox !important; display: flex !important; -ms-flex-wrap: nowrap !important; flex-wrap: nowrap !important; } .mxd-footer__footer-blocks { position: relative; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -moz-box-orient: vertical; -moz-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 3rem; width: 100%; max-width: 1920px; padding: 0 3rem; } @media only screen and (min-width: 768px) { .mxd-footer__footer-blocks { padding: 0 6rem; } } @media only screen and (min-width: 1200px) { .mxd-footer__footer-blocks { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -moz-box-orient: horizontal; -moz-box-direction: normal; -ms-flex-direction: row; flex-direction: row; } } @media only screen and (min-width: 1600px) { .mxd-footer__footer-blocks { padding: 0 9rem; } } .footer-blocks__column { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -moz-box-orient: vertical; -moz-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-flex: 1; -moz-box-flex: 1; -ms-flex: 1; flex: 1; gap: 3rem; } @media only screen and (min-width: 1200px) { .footer-blocks__column { height: 650px; } } @media only screen and (min-width: 1600px) { .footer-blocks__column { height: 650px; } } .footer-blocks__card { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -moz-box-orient: vertical; -moz-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 3rem; width: 100%; padding: 3rem; background-color: var(--base-tint); -moz-border-radius: var(--_radius-m); border-radius: var(--_radius-m); } .footer-blocks__card.fullheight-card { height: 100%; -webkit-box-pack: justify; -moz-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .footer-blocks__card.fill-card { -webkit-box-flex: 1; -moz-box-flex: 1; -ms-flex: 1; flex: 1; -webkit-box-pack: justify; -moz-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } @media only screen and (min-width: 768px) { .footer-blocks__card { padding: 5rem; } } .footer-blocks__block { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -moz-box-orient: vertical; -moz-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 3rem; } .footer-blocks__nav { position: relative; } .footer-nav { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -moz-box-orient: vertical; -moz-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 1.6rem; } .footer-nav__item { display: -webkit-inline-box; display: -moz-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; gap: 1.2rem; } .footer-nav__link { display: -webkit-inline-box; display: -moz-inline-box; display: -ms-inline-flexbox; display: inline-flex; font: normal var(--fw-medium) 3rem/1.2 var(--_font-accent); color: var(--t-bright); } .footer-nav__link .btn-caption { height: 3.6rem; line-height: 1.2; } @media only screen and (min-width: 768px) { .footer-nav__link { font-size: 4.4rem; } .footer-nav__link .btn-caption { height: 5.3rem; } } .footer-nav__counter { display: -webkit-inline-box; display: -moz-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; gap: 0.4rem; background-color: var(--accent); color: var(--t-opp-bright); height: 3.6rem; -moz-border-radius: 1.8rem; border-radius: 1.8rem; padding: 0 1.2rem; } .footer-nav__counter svg { width: 1.5rem; height: 1.5rem; } .footer-nav__counter span { font-size: 2.2rem; letter-spacing: -0.1rem; color: var(--t-opp-bright); } .footer-blocks__links { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -moz-box-orient: vertical; -moz-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: start; -moz-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; text-align: left; gap: 1rem; } .footer-blocks__links p { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-pack: start; -moz-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; text-align: left; gap: 0.2rem; } .no-touch .footer-blocks__links p a:hover { color: var(--t-bright); } @media only screen and (min-width: 768px) { .footer-blocks__links { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -moz-box-orient: horizontal; -moz-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-pack: justify; -moz-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } } .footer-blocks__title { position: relative; } .footer-blocks__title-m { font: normal var(--fw-medium) 3rem/1.2 var(--_font-accent); color: var(--t-bright); } @media only screen and (min-width: 768px) { .footer-blocks__title-m { font-size: 3.6rem; } } .footer-blocks__title-l { font: normal var(--fw-medium) 3rem/1.2 var(--_font-accent); color: var(--t-bright); } @media only screen and (min-width: 768px) { .footer-blocks__title-l { font-size: 4.4rem; } } .footer-blocks__socials { position: relative; } .footer-socials { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -moz-box-orient: vertical; -moz-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .footer-socials__item { display: block; margin-bottom: 0.3rem; } .footer-socials__item:last-of-type { margin-bottom: 0; } .footer-socials__link { font: normal var(--fw-regular) 2.2rem/1.6 var(--_font-accent); color: var(--t-bright); } .no-touch .footer-socials__link:hover { color: var(--t-medium); } /* ------------------------------------------------*/ /* Block - Footer End */ /* ------------------------------------------------*/ /* ------------------------------------------------*/ /* Block - Popup Start */ /* ------------------------------------------------*/ .mfp-bg { background-color: rgba(var(--base-rgb), 0.7); } .mfp-image-holder .mfp-close, .mfp-iframe-holder .mfp-close { color: var(--t-bright); /* overlay at start */ } .mfp-fade.mfp-bg { opacity: 0; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; } /* overlay animate in */ .mfp-fade.mfp-bg.mfp-ready { opacity: 1; } /* overlay animate out */ .mfp-fade.mfp-bg.mfp-removing { opacity: 0; } /* content at start */ .mfp-fade.mfp-wrap .mfp-content { opacity: 0; -webkit-transform: translateY(3rem); -moz-transform: translateY(3rem); -ms-transform: translateY(3rem); transform: translateY(3rem); -webkit-transition: all 0.3s var(--_animbezier); -moz-transition: all 0.3s var(--_animbezier); transition: all 0.3s var(--_animbezier); } /* content animate it */ .mfp-fade.mfp-wrap.mfp-ready .mfp-content { opacity: 1; -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } /* content animate out */ .mfp-fade.mfp-wrap.mfp-removing .mfp-content { opacity: 0; -webkit-transform: translateY(-3rem); -moz-transform: translateY(-3rem); -ms-transform: translateY(-3rem); transform: translateY(-3rem); } /* ------------------------------------------------*/ /* Block - Popup End */ /* ------------------------------------------------*/ /* ------------------------------------------------*/ /* Block - Hero Section #00 Start */ /* ------------------------------------------------*/ .mxd-hero-00 { position: relative; width: 100%; max-width: 1920px; margin: 0 auto; } .mxd-hero-00__wrap { position: relative; width: 100%; padding: 0 3rem; } @media only screen and (min-width: 768px) { .mxd-hero-00__wrap { padding: 0 6rem; } } @media only screen and (min-width: 1200px) { .mxd-hero-00__wrap { height: 100%; padding: 0 6rem; } } @media only screen and (min-width: 1600px) { .mxd-hero-00__wrap { padding: 0 9rem; } } .mxd-hero-00__top { position: relative; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -moz-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 100%; height: auto; padding: 11.5rem 0 11.2rem 0; } @media only screen and (min-width: 768px) { .mxd-hero-00__top { padding: 12.6rem 0 12.8rem 0; } } @media only screen and (min-width: 1200px) { .mxd-hero-00__top { -webkit-box-align: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; padding: 0; padding-top: 12.9rem; padding-bottom: 11.5rem; } } @media only screen and (min-width: 1400px) { .mxd-hero-00__top { padding-top: 12.9rem; } } @media only screen and (min-width: 1600px) { .mxd-hero-00__top { padding-top: 17rem; padding-bottom: 14.8rem; } } .mxd-hero-00__bottom { position: relative; width: 100%; } .mxd-hero-00__title-wrap { position: relative; width: 100%; } @media only screen and (min-width: 768px) { .mxd-hero-00__title-wrap { width: auto; } } .mxd-hero-00__marquee { position: absolute; top: 7.6rem; right: 0; width: 100%; background-color: var(--accent); border: 1px solid var(--base); -moz-border-radius: 3.3rem; border-radius: 3.3rem; overflow: hidden; } .mxd-hero-00__marquee .marquee-flex { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; gap: 1rem; } .mxd-hero-00__marquee .marquee__item.item-regular { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; gap: 1rem; margin: 0; color: var(--t-opp-bright); } .mxd-hero-00__marquee .marquee__item.item-regular p { font: normal var(--fw-medium) 6rem/1.1 var(--_font-accent); color: var(--t-opp-bright); } .mxd-hero-00__marquee .marquee__item.item-regular svg { width: 3.7rem; height: 3.7rem; fill: currentColor; } @media only screen and (min-width: 768px) { .mxd-hero-00__marquee { top: 0; width: 484px; height: 88px; -moz-border-radius: 4.4rem; border-radius: 4.4rem; } .mxd-hero-00__marquee .marquee-flex { gap: 2.6rem; } .mxd-hero-00__marquee .marquee__item.item-regular { gap: 2rem; } .mxd-hero-00__marquee .marquee__item.item-regular p { font-size: 8rem; } .mxd-hero-00__marquee .marquee__item.item-regular svg { width: 5.1rem; height: 5.1rem; } } @media only screen and (min-width: 1200px) { .mxd-hero-00__marquee { width: 719px; height: 132px; -moz-border-radius: 6.6rem; border-radius: 6.6rem; } .mxd-hero-00__marquee .marquee__item.item-regular { gap: 2.6rem; } .mxd-hero-00__marquee .marquee__item.item-regular p { font-size: 12rem; } .mxd-hero-00__marquee .marquee__item.item-regular svg { width: 8.5rem; height: 8.5rem; fill: currentColor; } } @media only screen and (min-width: 1600px) { .mxd-hero-00__marquee { width: 816px; height: 154px; -moz-border-radius: 7.7rem; border-radius: 7.7rem; } .mxd-hero-00__marquee .marquee__item.item-regular p { font-size: 14rem; } .mxd-hero-00__marquee .marquee__item.item-regular svg { width: 9.1rem; height: 9.1rem; } } .hero-00-title { position: relative; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -moz-box-orient: vertical; -moz-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 1rem; } @media only screen and (min-width: 768px) { .hero-00-title { -webkit-box-pack: center; -moz-box-pack: center; -ms-flex-pack: center; justify-content: center; gap: 1.4rem; font-size: 8rem; } } @media only screen and (min-width: 1200px) { .hero-00-title { gap: 2rem; font-size: 12rem; } } @media only screen and (min-width: 1600px) { .hero-00-title { font-size: 14rem; } } .hero-00-title__row { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -moz-box-orient: vertical; -moz-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -moz-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; gap: 1rem; text-align: center; } @media only screen and (min-width: 768px) { .hero-00-title__row { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -moz-box-orient: horizontal; -moz-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-pack: center; -moz-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; gap: 2rem; } } @media only screen and (min-width: 1200px) { .hero-00-title__row { gap: 3.2rem; } } @media only screen and (min-width: 1600px) { .hero-00-title__row { gap: 3.4rem; } } .hero-00-title__item { display: -webkit-inline-box; display: -moz-inline-box; display: -ms-inline-flexbox; display: inline-flex; } .hero-00-title__item.title-item-transparent { opacity: 0; } .hero-00-title__item.title-item-image { display: none; } .hero-00-title__item.title-item-image svg { fill: currentColor; } @media only screen and (min-width: 768px) { .hero-00-title__item { white-space: nowrap; } .hero-00-title__item.title-item-transparent { padding: 0 5rem; -moz-border-radius: 4.4rem; border-radius: 4.4rem; color: var(--t-opp-bright); } .hero-00-title__item.title-item-image { display: -webkit-inline-box; display: -moz-inline-box; display: -ms-inline-flexbox; display: inline-flex; padding-top: 1rem; } .hero-00-title__item.title-item-image svg { width: 5.1rem; height: 5.1rem; } } @media only screen and (min-width: 1200px) { .hero-00-title__item.title-item-transparent { padding: 0 7rem; -moz-border-radius: 6.6rem; border-radius: 6.6rem; } .hero-00-title__item.title-item-image svg { width: 8.5rem; height: 8.5rem; } } @media only screen and (min-width: 1600px) { .hero-00-title__item.title-item-transparent { -moz-border-radius: 7.7rem; border-radius: 7.7rem; } .hero-00-title__item.title-item-image svg { width: 9.1rem; height: 9.1rem; } } .mxd-hero-00__images { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .hero-00-image { position: absolute; display: none; } @media only screen and (min-width: 768px) { .hero-00-image { display: block; } .hero-00-image.image-01 { top: -16%; left: -6%; width: 180px; } .hero-00-image.image-02 { top: -40%; left: auto; right: 4%; width: 100px; z-index: 1; } } @media only screen and (min-width: 1200px) { .hero-00-image.image-01 { width: 260px; top: -14%; left: -9%; } .hero-00-image.image-02 { width: 140px; right: -6%; } } @media only screen and (min-width: 1600px) { .hero-00-image.image-01 { width: 300px; } .hero-00-image.image-02 { width: 180px; top: -40%; } } .hero-00-manifest { position: relative; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -moz-box-pack: center; -ms-flex-pack: center; justify-content: center; text-align: center; } .hero-00-manifest .mxd-manifest { line-height: 1.5; } @media only screen and (min-width: 768px) { .hero-00-manifest .mxd-manifest { font-size: 3rem; max-width: 780px; } } @media only screen and (min-width: 1200px) { .hero-00-manifest .mxd-manifest { font-size: 3.8rem; max-width: 1000px; } } @media only screen and (min-width: 1600px) { .hero-00-manifest .mxd-manifest { font-size: 4.4rem; max-width: 1150px; } } /* ------------------------------------------------*/ /* Block - Hero Section #00 End */ /* ------------------------------------------------*/ /* ------------------------------------------------*/ /* Block - Hero Section #01 Start */ /* ------------------------------------------------*/ .mxd-hero-section { padding-top: 7.6rem; } @media only screen and (min-width: 768px) { .mxd-hero-section { padding-top: 9.6rem; } } @media only screen and (min-width: 1200px) { .mxd-hero-fullheight { height: 100vh; } } .mxd-hero-01 { position: relative; width: 100%; max-width: 1920px; margin: 0 auto; } @media only screen and (min-width: 1200px) { .mxd-hero-01 { height: 100%; padding-bottom: 4rem; } } .mxd-hero-01__wrap { position: relative; width: 100%; padding: 0 3rem; } @media only screen and (min-width: 768px) { .mxd-hero-01__wrap { padding: 0 6rem; } } @media only screen and (min-width: 1200px) { .mxd-hero-01__wrap { height: 100%; padding: 0 6rem; } } @media only screen and (min-width: 1600px) { .mxd-hero-01__wrap { padding: 0 9rem; } } .mxd-hero-01__top { position: relative; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -moz-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 100%; height: auto; padding: 11.5rem 0 12.9rem 0; } @media only screen and (min-width: 768px) { .mxd-hero-01__top { padding: 12.6rem 0 14.6rem 0; } } @media only screen and (min-width: 1200px) { .mxd-hero-01__top { -webkit-box-align: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; height: -moz-calc(100% - 16rem); height: calc(100% - 16rem); padding: 0; } } @media only screen and (min-width: 1600px) { .mxd-hero-01__top { height: -moz-calc(100% - 20rem); height: calc(100% - 20rem); } } .mxd-hero-01__title-wrap { position: relative; width: 100%; } @media only screen and (min-width: 768px) { .mxd-hero-01__title-wrap { width: auto; } } @media only screen and (min-width: 1200px) { .mxd-hero-01__title-wrap { padding-bottom: 2rem; } } @media only screen and (min-width: 1600px) { .mxd-hero-01__title-wrap { padding-bottom: 4rem; } } .mxd-hero-01__marquee { position: absolute; top: 7.6rem; right: 0; width: 100%; background-color: var(--accent); border: 1px solid var(--base); -moz-border-radius: 3.3rem; border-radius: 3.3rem; overflow: hidden; } .mxd-hero-01__marquee .marquee-flex { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; gap: 1rem; } .mxd-hero-01__marquee .marquee__item.item-regular { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; gap: 1rem; margin: 0; color: var(--t-opp-bright); } .mxd-hero-01__marquee .marquee__item.item-regular p { font: normal var(--fw-medium) 6rem/1.1 var(--_font-accent); color: var(--t-opp-bright); } .mxd-hero-01__marquee .marquee__item.item-regular svg { width: 3.7rem; height: 3.7rem; fill: currentColor; } @media only screen and (min-width: 768px) { .mxd-hero-01__marquee { top: 0; right: 7rem; width: 265px; height: 88px; -moz-border-radius: 4.4rem; border-radius: 4.4rem; } .mxd-hero-01__marquee .marquee-flex { gap: 2.6rem; } .mxd-hero-01__marquee .marquee__item.item-regular { gap: 2rem; } .mxd-hero-01__marquee .marquee__item.item-regular p { font-size: 8rem; } .mxd-hero-01__marquee .marquee__item.item-regular svg { width: 5.1rem; height: 5.1rem; } } @media only screen and (min-width: 1200px) { .mxd-hero-01__marquee { right: 11rem; width: 389px; height: 132px; -moz-border-radius: 6.6rem; border-radius: 6.6rem; } .mxd-hero-01__marquee .marquee__item.item-regular { gap: 2.6rem; } .mxd-hero-01__marquee .marquee__item.item-regular p { font-size: 12rem; } .mxd-hero-01__marquee .marquee__item.item-regular svg { width: 8.5rem; height: 8.5rem; fill: currentColor; } } @media only screen and (min-width: 1600px) { .mxd-hero-01__marquee { right: 13.3rem; width: 430px; height: 154px; -moz-border-radius: 7.7rem; border-radius: 7.7rem; } .mxd-hero-01__marquee .marquee__item.item-regular p { font-size: 14rem; } .mxd-hero-01__marquee .marquee__item.item-regular svg { width: 9.2rem; height: 9.2rem; } } .hero-01-title { position: relative; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -moz-box-orient: vertical; -moz-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 1rem; } @media only screen and (min-width: 768px) { .hero-01-title { -webkit-box-pack: center; -moz-box-pack: center; -ms-flex-pack: center; justify-content: center; gap: 1.4rem; font-size: 8rem; } } @media only screen and (min-width: 1200px) { .hero-01-title { gap: 2rem; font-size: 12rem; } } @media only screen and (min-width: 1600px) { .hero-01-title { font-size: 14rem; } } .hero-01-title__row { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -moz-box-orient: vertical; -moz-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -moz-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; gap: 1rem; text-align: center; } @media only screen and (min-width: 768px) { .hero-01-title__row { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -moz-box-orient: horizontal; -moz-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-pack: center; -moz-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; gap: 2rem; } } @media only screen and (min-width: 1200px) { .hero-01-title__row { gap: 3.2rem; } } @media only screen and (min-width: 1600px) { .hero-01-title__row { gap: 3.4rem; } } .hero-01-title__item { display: -webkit-inline-box; display: -moz-inline-box; display: -ms-inline-flexbox; display: inline-flex; } .hero-01-title__item.title-item-transparent { opacity: 0; } .hero-01-title__item.title-item-image { display: none; } .hero-01-title__item.title-item-image svg { fill: currentColor; } @media only screen and (min-width: 768px) { .hero-01-title__item { white-space: nowrap; } .hero-01-title__item.title-item-transparent { padding: 0 5rem; -moz-border-radius: 4.4rem; border-radius: 4.4rem; color: var(--t-opp-bright); } .hero-01-title__item.title-item-image { display: -webkit-inline-box; display: -moz-inline-box; display: -ms-inline-flexbox; display: inline-flex; padding-top: 1rem; } .hero-01-title__item.title-item-image svg { width: 5.1rem; height: 5.1rem; } } @media only screen and (min-width: 1200px) { .hero-01-title__item.title-item-transparent { padding: 0 7rem; -moz-border-radius: 6.6rem; border-radius: 6.6rem; } .hero-01-title__item.title-item-image svg { width: 8.5rem; height: 8.5rem; } } @media only screen and (min-width: 1600px) { .hero-01-title__item.title-item-transparent { -moz-border-radius: 7.7rem; border-radius: 7.7rem; } .hero-01-title__item.title-item-image svg { width: 9.2rem; height: 9.2rem; } } .mxd-hero-01__images { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .hero-01-image { position: absolute; display: none; } .hero-01-image.image-01 { width: 180px; top: -6%; left: -20%; } .hero-01-image.image-02 { top: -20%; right: -1.5rem; } .hero-01-image.image-03 { top: 86%; left: 0; } .hero-01-image.image-02, .hero-01-image.image-03 { width: 100px; z-index: 1; } @media only screen and (min-width: 768px) { .hero-01-image { display: block; } .hero-01-image.image-01 { top: -26%; left: -5%; } .hero-01-image.image-02 { top: -36%; left: auto; right: 5%; } .hero-01-image.image-03 { top: 90%; left: 35%; } } @media only screen and (min-width: 1200px) { .hero-01-image.image-01 { width: 260px; top: -24%; left: -7%; } .hero-01-image.image-02, .hero-01-image.image-03 { width: 140px; } .hero-01-image.image-02 { top: -34%; right: 6%; } .hero-01-image.image-03 { top: 80%; left: 42%; } } @media only screen and (min-width: 1600px) { .hero-01-image.image-01 { width: 300px; } .hero-01-image.image-02, .hero-01-image.image-03 { width: 180px; } .hero-01-image.image-03 { top: 76%; left: 38%; } .hero-01-image.image-02 { top: -36%; right: 5%; } } .mxd-hero-01__bottom { position: relative; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: reverse; -moz-box-orient: vertical; -moz-box-direction: reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; width: 100%; } @media only screen and (min-width: 1200px) { .mxd-hero-01__bottom { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -moz-box-orient: horizontal; -moz-box-direction: normal; -ms-flex-direction: row; flex-direction: row; gap: 6rem; height: 16rem; } } @media only screen and (min-width: 1600px) { .mxd-hero-01__bottom { height: 20rem; } } .mxd-hero-01__data-wrap { position: relative; padding: 14rem 0 13.2rem 0; } @media only screen and (min-width: 1200px) { .mxd-hero-01__data-wrap { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -moz-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-flex: 1; -moz-box-flex: 1; -ms-flex: 1; flex: 1; padding-top: 4rem; } } @media only screen and (min-width: 1600px) { .mxd-hero-01__data-wrap { padding-right: 15rem; } } .mxd-hero-01__dash-line { display: none; width: 100%; height: 1rem; position: absolute; top: 0; left: 0; } @media only screen and (min-width: 1200px) { .mxd-hero-01__dash-line { display: block; } } .dash-line { --s: 0.8rem; height: 3px; background: -moz-radial-gradient(circle closest-side, var(--st-muted) 98%, rgba(0, 0, 0, 0)) 0 0/var(--s) 100%, -moz-linear-gradient(left, var(--st-muted) 50%, rgba(0, 0, 0, 0) 0) -moz-calc(var(--s) / 2) 0/calc(2 * var(--s)) 100%; background: radial-gradient(circle closest-side, var(--st-muted) 98%, rgba(0, 0, 0, 0)) 0 0/var(--s) 100%, -webkit-gradient(linear, left top, right top, color-stop(50%, var(--st-muted)), color-stop(0, rgba(0, 0, 0, 0))) calc(var(--s) / 2) 0/calc(2 * var(--s)) 100%; background: radial-gradient(circle closest-side, var(--st-muted) 98%, rgba(0, 0, 0, 0)) 0 0/var(--s) 100%, linear-gradient(90deg, var(--st-muted) 50%, rgba(0, 0, 0, 0) 0) calc(var(--s) / 2) 0/calc(2 * var(--s)) 100%; } .mxd-hero-01__data-btn { margin-bottom: 3.1rem; } @media only screen and (min-width: 1200px) { .mxd-hero-01__data-btn { -ms-flex-preferred-size: 12rem; flex-basis: 12rem; -webkit-box-flex: 0; -moz-box-flex: 0; -ms-flex-positive: 0; flex-grow: 0; -ms-flex-negative: 0; flex-shrink: 0; height: 12rem; margin-bottom: 0; } } @media only screen and (min-width: 1600px) { .mxd-hero-01__data-btn { -ms-flex-preferred-size: 16rem; flex-basis: 16rem; height: 16rem; } } .mxd-hero-01__data-descr { margin-bottom: 2.3rem; } @media only screen and (min-width: 1200px) { .mxd-hero-01__data-descr { width: 386px; margin-bottom: 0; } } .mxd-hero-01__data-socials ul { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -moz-box-orient: vertical; -moz-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .mxd-hero-01__data-socials ul li { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; gap: 1.2rem; color: var(--t-bright); } .mxd-hero-01__data-socials ul li svg { width: 1.5rem; height: 1.5rem; fill: currentColor; } .mxd-hero-01__data-socials ul li a { font: normal var(--fw-regular) 1.8rem/1.6 var(--_font-accent); color: var(--t-bright); } @media only screen and (min-width: 1200px) { .mxd-hero-01__data-socials ul li svg { width: 1.9rem; height: 1.9rem; } } @media only screen and (min-width: 1600px) { .mxd-hero-01__data-socials ul li a { font-size: 2.2rem; } } .mxd-hero-01__video-wrap { position: relative; -moz-border-radius: var(--_radius-m); border-radius: var(--_radius-m); overflow: hidden; } @media only screen and (min-width: 1200px) { .mxd-hero-01__video-wrap { -ms-flex-preferred-size: 24.6rem; flex-basis: 24.6rem; -webkit-box-flex: 0; -moz-box-flex: 0; -ms-flex-positive: 0; flex-grow: 0; -ms-flex-negative: 0; flex-shrink: 0; height: 16rem; } } @media only screen and (min-width: 1600px) { .mxd-hero-01__video-wrap { -ms-flex-preferred-size: 30.8rem; flex-basis: 30.8rem; height: 20rem; } } .mxd-hero-01__video-btn { position: absolute; right: 0; bottom: 0; padding: 1rem; } .mxd-hero-01__video { display: block; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .mxd-pulse { -webkit-animation: mxd-pulse 1.2s infinite ease-in-out alternate; -moz-animation: mxd-pulse 1.2s infinite ease-in-out alternate; animation: mxd-pulse 1.2s infinite ease-in-out alternate; } @-webkit-keyframes mxd-pulse { from { -webkit-transform: scale(0.94); transform: scale(0.94); } to { -webkit-transform: scale(1.06); transform: scale(1.06); } } @-moz-keyframes mxd-pulse { from { -moz-transform: scale(0.94); transform: scale(0.94); } to { -moz-transform: scale(1.06); transform: scale(1.06); } } @keyframes mxd-pulse { from { -webkit-transform: scale(0.94); -moz-transform: scale(0.94); transform: scale(0.94); } to { -webkit-transform: scale(1.06); -moz-transform: scale(1.06); transform: scale(1.06); } } .mxd-pulse-small { -webkit-animation: mxd-pulse 1.2s infinite ease-in-out alternate; -moz-animation: mxd-pulse 1.2s infinite ease-in-out alternate; animation: mxd-pulse 1.2s infinite ease-in-out alternate; } @keyframes mxd-pulse { from { -webkit-transform: scale(0.94); -moz-transform: scale(0.94); transform: scale(0.94); } to { -webkit-transform: scale(1.02); -moz-transform: scale(1.02); transform: scale(1.02); } } .mxd-move { -webkit-animation: mxd-move 1.2s infinite ease-in-out alternate; -moz-animation: mxd-move 1.2s infinite ease-in-out alternate; animation: mxd-move 1.2s infinite ease-in-out alternate; } .mxd-move-slow { -webkit-animation: mxd-move 2s infinite ease-in-out alternate; -moz-animation: mxd-move 2s infinite ease-in-out alternate; animation: mxd-move 2s infinite ease-in-out alternate; } @-webkit-keyframes mxd-move { from { -webkit-transform: translateY(-1rem); transform: translateY(-1rem); } to { -webkit-transform: translateY(1rem); transform: translateY(1rem); } } @-moz-keyframes mxd-move { from { -moz-transform: translateY(-1rem); transform: translateY(-1rem); } to { -moz-transform: translateY(1rem); transform: translateY(1rem); } } @keyframes mxd-move { from { -webkit-transform: translateY(-1rem); -moz-transform: translateY(-1rem); transform: translateY(-1rem); } to { -webkit-transform: translateY(1rem); -moz-transform: translateY(1rem); transform: translateY(1rem); } } .mxd-rotate { -webkit-animation: spin 5s linear infinite; -moz-animation: spin 5s linear infinite; animation: spin 5s linear infinite; } .mxd-rotate-slow { -webkit-animation: spin 16s linear infinite; -moz-animation: spin 16s linear infinite; animation: spin 16s linear infinite; } /* ------------------------------------------------*/ /* Block - Hero Section #01 End */ /* ------------------------------------------------*/ /* ------------------------------------------------*/ /* Block - Hero Section #02 Start */ /* ------------------------------------------------*/ .mxd-hero-02 { position: relative; } .hero-02-static__tl-trigger { position: absolute; top: 14%; right: 0; width: 1px; height: 1px; } .mxd-hero-02-static__top { position: relative; padding-top: 7.6rem; } @media only screen and (min-width: 768px) { .mxd-hero-02-static__top { padding-top: 9.6rem; } } .hero-02-static__caption { margin-top: 2rem; } @media only screen and (min-width: 768px) { .hero-02-static__caption { margin-top: 3rem; } } .mxd-hero-02-static__bottom { position: absolute; bottom: 3rem; left: 0; width: 100%; } @media only screen and (min-width: 768px) { .mxd-hero-02-static__bottom { position: absolute; bottom: 4rem; left: 0; } } .mxd-hero-02-static__btn { display: none; } @media only screen and (min-width: 768px) { .mxd-hero-02-static__btn { display: block; position: absolute; right: 6rem; bottom: 4rem; } } @media only screen and (min-width: 1600px) { .mxd-hero-02-static__btn { position: absolute; right: 9rem; bottom: 4rem; } } .mxd-hero-02-static__center { position: absolute; left: 0; top: 50%; bottom: auto; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); width: 100%; } .mxd-hero-02-marquee { position: relative; color: var(--t-bright); } .mxd-hero-02-marquee .marquee__item.item-regular { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; gap: 3rem; margin: 0; } .mxd-hero-02-marquee .marquee__text { font-size: 10rem; font-weight: var(--fw-medium); color: var(--t-bright); margin: 0; } .mxd-hero-02-marquee .marquee__image { width: 7.1rem; height: 7.1rem; } .mxd-hero-02-marquee .marquee__image svg { fill: currentColor; } @media only screen and (min-width: 768px) { .mxd-hero-02-marquee .marquee__item.item-regular { gap: 4rem; } .mxd-hero-02-marquee .marquee__text { font-size: 14rem; } .mxd-hero-02-marquee .marquee__image { width: 9.1rem; height: 9.1rem; } } @media only screen and (min-width: 1600px) { .mxd-hero-02-marquee .marquee__item.item-regular { gap: 5rem; } .mxd-hero-02-marquee .marquee__text { font-size: 18rem; } .mxd-hero-02-marquee .marquee__image { width: 12.1rem; height: 12.1rem; } } .mxd-hero-02-marquee__image { position: absolute; left: 50%; top: 50%; bottom: auto; right: auto; -webkit-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); z-index: 2; width: 18rem; } @media only screen and (min-width: 768px) { .mxd-hero-02-marquee__image { width: 30rem; } } @media only screen and (min-width: 1600px) { .mxd-hero-02-marquee__image { width: 42rem; } } .mxd-hero-02-marquee__line .marquee__toleft { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; gap: 3rem; } @media only screen and (min-width: 768px) { .mxd-hero-02-marquee__line .marquee__toleft { gap: 4rem; } } @media only screen and (min-width: 1600px) { .mxd-hero-02-marquee__line .marquee__toleft { gap: 5rem; } } .mxd-hero-02-scroll__wrap { padding: 0 3rem; padding-bottom: 100vh; } @media only screen and (min-width: 768px) { .mxd-hero-02-scroll__wrap { padding: 0 6rem; padding-bottom: 100vh; } } @media only screen and (min-width: 1200px) { .mxd-hero-02-scroll__wrap { padding-bottom: 100vh; } } @media only screen and (min-width: 1600px) { .mxd-hero-02-scroll__wrap { padding: 0 9rem; padding-bottom: 100vh; } } .mxd-hero-02-scroll__images { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -moz-box-orient: vertical; -moz-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 6rem; } @media only screen and (min-width: 768px) { .mxd-hero-02-scroll__images { gap: 6rem; } } @media only screen and (min-width: 1200px) { .mxd-hero-02-scroll__images { gap: 10rem; } } @media only screen and (min-width: 1600px) { .mxd-hero-02-scroll__images { gap: 14rem; } } .mxd-hero-02-images__row { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -moz-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: end; -moz-box-align: end; -ms-flex-align: end; align-items: flex-end; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 6rem; } @media only screen and (min-width: 768px) { .mxd-hero-02-images__row { gap: 6rem; -webkit-box-pack: justify; -moz-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: end; -moz-box-align: end; -ms-flex-align: end; align-items: flex-end; } } @media only screen and (min-width: 1200px) { .mxd-hero-02-images__row { -ms-flex-wrap: nowrap; flex-wrap: nowrap; } } .mxd-hero-02-images__row-02, .mxd-hero-02-images__row-03 { -webkit-box-align: start; -moz-box-align: start; -ms-flex-align: start; align-items: flex-start; } .mxd-hero-02-image__landscape, .mxd-hero-02-image__portrait { position: relative; display: block; } @media only screen and (min-width: 768px) { .mxd-hero-02-image__portrait.portrait-01 { padding-bottom: 9rem; } .mxd-hero-02-image__portrait.portrait-02 { margin-top: -3rem; } .mxd-hero-02-image__portrait.portrait-03 { margin-top: -9rem; } .mxd-hero-02-image__portrait.portrait-04 { padding-top: 3rem; } .mxd-hero-02-image__portrait.portrait-05 { padding-left: 30%; } } @media only screen and (min-width: 1200px) { .mxd-hero-02-image__portrait.portrait-01 { padding-bottom: 9rem; } .mxd-hero-02-image__portrait.portrait-02 { margin-top: 0; padding-top: 8rem; padding-bottom: 3rem; } .mxd-hero-02-image__portrait.portrait-03 { margin-top: 0; } .mxd-hero-02-image__portrait.portrait-04 { padding-top: 0; margin-top: -10rem; } .mxd-hero-02-image__portrait.portrait-05 { padding-left: 0; } } @media only screen and (min-width: 768px) { .mxd-hero-02-image__landscape.landscape-02 { padding-top: 100px; } .mxd-hero-02-image__landscape.landscape-03 { padding-top: 0; } } @media only screen and (min-width: 1200px) { .mxd-hero-02-image__landscape.landscape-02 { padding-top: 100px; } .mxd-hero-02-image__landscape.landscape-03 { padding-top: 60px; } } .mxd-hero-02-image__inner { position: relative; -moz-border-radius: var(--_radius-m); border-radius: var(--_radius-m); -webkit-box-shadow: 0 29px 58px rgba(0, 0, 0, 0.3), 0 25px 22px rgba(0, 0, 0, 0.22); -moz-box-shadow: 0 29px 58px rgba(0, 0, 0, 0.3), 0 25px 22px rgba(0, 0, 0, 0.22); box-shadow: 0 29px 58px rgba(0, 0, 0, 0.3), 0 25px 22px rgba(0, 0, 0, 0.22); overflow: hidden; } .no-touch .mxd-hero-02-image__inner:hover .mxd-preview-hover { opacity: 1; -webkit-filter: blur(0); filter: blur(0); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } .mxd-hero-02-image__inner.type-01, .mxd-hero-02-image__inner.type-02 { width: 220px; height: 266px; } .mxd-hero-02-image__inner.type-03 { width: 300px; height: 200px; } .mxd-hero-02-image__inner img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } @media only screen and (min-width: 768px) { .mxd-hero-02-image__inner.type-03 { width: 360px; height: 237px; } } @media only screen and (min-width: 1200px) { .mxd-hero-02-image__inner.type-01 { width: 280px; height: 340px; } .mxd-hero-02-image__inner.type-02 { width: 500px; height: 640px; } .mxd-hero-02-image__inner.type-03 { width: 440px; height: 290px; } } @media only screen and (min-width: 1600px) { .mxd-hero-02-image__inner.type-01 { width: 400px; height: 480px; } .mxd-hero-02-image__inner.type-02 { width: 760px; height: 940px; } .mxd-hero-02-image__inner.type-03 { width: 620px; height: 420px; } } /* ------------------------------------------------*/ /* Block - Hero Section #02 End */ /* ------------------------------------------------*/ /* ------------------------------------------------*/ /* Block - Hero Section #03 Start */ /* ------------------------------------------------*/ .mxd-hero-03 { position: relative; width: 100%; } .mxd-hero-03__wrap { position: relative; width: 100%; } .mxd-hero-03__top { position: relative; height: -moz-calc(100vh - 7.6rem); height: calc(100vh - 7.6rem); padding-top: 12rem; } @media only screen and (min-width: 768px) { .mxd-hero-03__top { height: -moz-calc(100vh - 9.6rem); height: calc(100vh - 9.6rem); padding-top: 14rem; } } .mxd-hero-03__bottom { position: relative; } .mxd-hero-03__marquee { position: absolute; left: 0; top: 50%; bottom: auto; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); width: 100%; overflow: hidden; } .mxd-hero-03__marquee .marquee__item { width: auto; height: auto; padding: 1rem 0; margin-right: 6rem; -moz-border-radius: 0; border-radius: 0; overflow: visible; } @media only screen and (min-width: 1600px) { .mxd-hero-03__marquee .marquee__item { margin-right: 6rem; } } .hero-03-marquee__video { width: 80vw; height: 80vw; -moz-border-radius: 50%; border-radius: 50%; overflow: hidden; } .hero-03-marquee__video video { display: block; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } @media only screen and (min-width: 768px) { .hero-03-marquee__video { width: 42vw; height: 42vw; } } @media only screen and (min-width: 1200px) { .hero-03-marquee__video { width: 26vw; height: 26vw; } } @media only screen and (min-width: 1600px) { .hero-03-marquee__video { width: 24vw; height: 24vw; } } .hero-03-marquee__image { position: relative; width: 80vw; height: auto; } @media only screen and (min-width: 768px) { .hero-03-marquee__image { width: 42vw; } } @media only screen and (min-width: 1200px) { .hero-03-marquee__image { width: 26vw; } } @media only screen and (min-width: 1600px) { .hero-03-marquee__image { width: 24vw; } } .mxd-hero-03__headline { position: absolute; bottom: 6rem; left: 50%; right: auto; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); width: 100%; max-width: 1920px; margin: 0 auto; padding: 0 1.5rem; mix-blend-mode: difference; } .mxd-hero-03__headline svg { fill: #ffffff; mix-blend-mode: difference; } @media only screen and (min-width: 768px) { .mxd-hero-03__headline { padding: 0 4.5rem; } } @media only screen and (min-width: 992px) { .mxd-hero-03__headline { bottom: 2rem; } } @media only screen and (min-width: 1600px) { .mxd-hero-03__headline { padding: 0 7.5rem; } } .hero-03-headline__caption { font: normal var(--fw-medium) 3rem/1.2 var(--_font-accent); color: #ffffff; margin-bottom: 5.2rem; } @media only screen and (min-width: 768px) { .hero-03-headline__caption { font-size: 4.4rem; margin-bottom: 4.7rem; } } @media only screen and (min-width: 992px) { .hero-03-headline__caption { margin-bottom: 1rem; } } .hero-03-headline__hidden { display: none; } .hero-03-headline__svg-mobile { display: block; } @media only screen and (min-width: 992px) { .hero-03-headline__svg-mobile { display: none; } } .hero-03-headline__svg { display: none; } @media only screen and (min-width: 992px) { .hero-03-headline__svg { display: block; } } /* ------------------------------------------------*/ /* Block - Hero Section #03 End */ /* ------------------------------------------------*/ /* ------------------------------------------------*/ /* Block - Hero Section #04 Start */ /* ------------------------------------------------*/ .mxd-hero-04 { position: relative; width: 100%; max-width: 1920px; margin: 0 auto; padding-top: 14rem; } @media only screen and (min-width: 768px) { .mxd-hero-04 { padding-top: 16rem; } } @media only screen and (min-width: 1200px) { .mxd-hero-04 { padding-top: 4rem; } } @media only screen and (min-width: 1600px) { .mxd-hero-04 { padding-top: 4rem; } } .mxd-page-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .hero-04-bg { height: 300vh; overflow: hidden; } @media only screen and (min-width: 1200px) { .hero-04-bg { height: 200vh; } } .hero-04-bg__obj-01, .hero-04-bg__obj-02 { position: absolute; } .hero-04-bg__obj-01 img, .hero-04-bg__obj-02 img { display: block; width: 100%; height: auto; } .hero-04-bg__obj-01 { top: 680px; left: -50px; width: 240px; } @media only screen and (min-width: 768px) { .hero-04-bg__obj-01 { width: 340px; } } @media only screen and (min-width: 1200px) { .hero-04-bg__obj-01 { top: 360px; width: 340px; } } @media only screen and (min-width: 1600px) { .hero-04-bg__obj-01 { top: 400px; left: -90px; width: 460px; } } .hero-04-bg__obj-02 { top: 10px; right: -30px; width: 200px; } @media only screen and (min-width: 768px) { .hero-04-bg__obj-02 { top: 40px; right: -60px; width: 360px; } } @media only screen and (min-width: 992px) { .hero-04-bg__obj-02 { top: 40px; right: -60px; width: 460px; } } @media only screen and (min-width: 1200px) { .hero-04-bg__obj-02 { top: 400px; right: -60px; width: 460px; } } @media only screen and (min-width: 1600px) { .hero-04-bg__obj-02 { top: 250px; right: -60px; width: 600px; } } .mxd-hero-04__wrap { position: relative; width: 100%; padding: 0 1.5rem; } @media only screen and (min-width: 768px) { .mxd-hero-04__wrap { padding: 0 4.5rem; } } @media only screen and (min-width: 1200px) { .mxd-hero-04__wrap { height: 100%; } } @media only screen and (min-width: 1600px) { .mxd-hero-04__wrap { padding: 0 7.5rem; } } .mxd-hero-04__left { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -moz-box-orient: vertical; -moz-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 3rem; } @media only screen and (min-width: 768px) { .mxd-hero-04__left { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -moz-box-orient: horizontal; -moz-box-direction: normal; -ms-flex-direction: row; flex-direction: row; } } @media only screen and (min-width: 1200px) { .mxd-hero-04__left { -webkit-box-orient: vertical; -webkit-box-direction: normal; -moz-box-orient: vertical; -moz-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } } .mxd-hero-04__right { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -moz-box-orient: vertical; -moz-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 3.9rem; padding-bottom: 5.2rem; } @media only screen and (min-width: 768px) { .mxd-hero-04__right { gap: 5.2rem; padding-bottom: 7.2rem; } } @media only screen and (min-width: 1200px) { .mxd-hero-04__right { padding-bottom: 0; } } @media only screen and (min-width: 1600px) { .mxd-hero-04__right { gap: 6.8rem; } } .mxd-hero-04__imageblock { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -moz-box-orient: vertical; -moz-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 4rem; padding: 3rem; -moz-border-radius: 3.6rem; border-radius: 3.6rem; background-color: rgba(var(--accent-rgb), 1); border: 1px solid rgba(var(--accent-rgb), 0.8); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } .mxd-hero-04__imageblock p { font: normal var(--fw-medium) 2.5rem/1.2 var(--_font-accent); color: var(--t-opp-bright); } @media only screen and (min-width: 768px) { .mxd-hero-04__imageblock { padding: 4rem; } } @media only screen and (min-width: 1600px) { .mxd-hero-04__imageblock { font-size: 3rem; } } .hero-04-imageblock__btn { position: absolute; top: 1rem; right: 1rem; } .mxd-hero-04__aboutblock { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -moz-box-orient: vertical; -moz-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 4rem; padding: 3rem; -moz-border-radius: 3.6rem; border-radius: 3.6rem; background-color: rgba(var(--additional-rgb), 1); border: 1px solid rgba(var(--additional-rgb), 0.9); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } .mxd-hero-04__aboutblock p { font: normal var(--fw-medium) 1.8rem/1.6 var(--_font-accent); color: var(--t-opp-bright); } @media only screen and (min-width: 768px) { .mxd-hero-04__aboutblock { padding: 4rem; } } @media only screen and (min-width: 1600px) { .mxd-hero-04__aboutblock p { font-size: 2.2rem; } } .mxd-hero-04__headline { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -moz-box-orient: vertical; -moz-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 3.5rem; } @media only screen and (min-width: 768px) { .mxd-hero-04__headline { gap: 3.8rem; } } @media only screen and (min-width: 1200px) { .mxd-hero-04__headline { gap: 3.8rem; } } @media only screen and (min-width: 1600px) { .mxd-hero-04__headline { gap: 4.8rem; } } .mxd-hero-04__headline, .mxd-hero-04__descr { padding: 0; } @media only screen and (min-width: 1200px) { .mxd-hero-04__headline, .mxd-hero-04__descr { padding: 0 3rem; } } @media only screen and (min-width: 1600px) { .mxd-hero-04__headline, .mxd-hero-04__descr { padding: 0 6rem; } } .hero-04-title { position: relative; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -moz-box-orient: vertical; -moz-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .hero-04-title__row { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-pack: start; -moz-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; gap: 1rem; } @media only screen and (min-width: 768px) { .hero-04-title__row { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -moz-box-orient: horizontal; -moz-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-pack: start; -moz-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; gap: 2rem; } } @media only screen and (min-width: 1200px) { .hero-04-title__row { gap: 3.2rem; } } @media only screen and (min-width: 1600px) { .hero-04-title__row { gap: 3.4rem; } } .hero-04-title__item { display: -webkit-inline-box; display: -moz-inline-box; display: -ms-inline-flexbox; display: inline-flex; } .hero-04-title__item.title-item-transparent { opacity: 0; } .hero-04-title__item.title-item-image { padding-top: 1rem; display: none; } .hero-04-title__item.title-item-image svg { width: 3.5rem; height: 3.5rem; fill: currentColor; } @media only screen and (min-width: 768px) { .hero-04-title__item { white-space: nowrap; } .hero-04-title__item.title-item-transparent { padding: 0 5rem; -moz-border-radius: 4.4rem; border-radius: 4.4rem; color: var(--t-opp-bright); } .hero-04-title__item.title-item-image { display: -webkit-inline-box; display: -moz-inline-box; display: -ms-inline-flexbox; display: inline-flex; padding-top: 1rem; } .hero-04-title__item.title-item-image svg { width: 7.5rem; height: 7.5rem; } } @media only screen and (min-width: 1200px) { .hero-04-title__item.title-item-transparent { padding: 0 7rem; -moz-border-radius: 6.6rem; border-radius: 6.6rem; } .hero-04-title__item.title-item-image svg { width: 7.5rem; height: 7.5rem; } } @media only screen and (min-width: 1600px) { .hero-04-title__item.title-item-transparent { -moz-border-radius: 7.7rem; border-radius: 7.7rem; } .hero-04-title__item.title-item-image svg { width: 8.2rem; height: 8.2rem; } } .hero-04-marquee { position: relative; width: 100%; height: 4.6rem; line-height: 4.6rem; -moz-border-radius: 2.3rem; border-radius: 2.3rem; border: 1px solid var(--st-opp-bright); background-color: var(--neutral-transparent); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: var(--t-bright); } .hero-04-marquee p { font: normal var(--fw-medium) 1.8rem/4.6rem var(--_font-accent); color: var(--t-bright); } .hero-04-marquee svg { width: 1.7rem; height: 1.7rem; fill: currentColor; } @media only screen and (min-width: 768px) { .hero-04-marquee { height: 5.6rem; -moz-border-radius: 2.8rem; border-radius: 2.8rem; } .hero-04-marquee p { font-size: 2.2rem; line-height: 5.6rem; } .hero-04-marquee svg { width: 1.9rem; height: 1.9rem; } } .hero-04-marquee .marquee-flex { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; gap: 1rem; } .hero-04-marquee .marquee__item.item-regular { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; gap: 1rem; margin: 0; } @media only screen and (min-width: 768px) { .hero-04-marquee .marquee-flex { gap: 1.4rem; } .hero-04-marquee .marquee__item.item-regular { gap: 1.4rem; } } /* ------------------------------------------------*/ /* Block - Hero Section #04 End */ /* ------------------------------------------------*/ /* ------------------------------------------------*/ /* Block - Hero Section #05 Start */ /* ------------------------------------------------*/ .mxd-hero-05 { position: relative; width: 100%; max-width: 1920px; margin: 0 auto; padding-top: 12rem; } @media only screen and (min-width: 768px) { .mxd-hero-05 { padding-top: 16rem; } } @media only screen and (min-width: 1200px) { .mxd-hero-05 { padding-top: 13.6rem; } } @media only screen and (min-width: 1600px) { .mxd-hero-05 { padding-top: 17rem; } } .mxd-hero-05__wrap { position: relative; width: 100%; padding: 0 1.5rem; overflow: hidden; } @media only screen and (min-width: 768px) { .mxd-hero-05__wrap { padding: 0 4.5rem; } } @media only screen and (min-width: 1200px) { .mxd-hero-05__wrap { height: 100%; } } @media only screen and (min-width: 1600px) { .mxd-hero-05__wrap { padding: 0 7.5rem; } } .mxd-hero-05__top { margin-bottom: 4.9rem; } @media only screen and (min-width: 1200px) { .mxd-hero-05__top { margin-bottom: 8.2rem; } } .mxd-hero-05__bottom { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -moz-box-orient: vertical; -moz-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 3rem; } @media only screen and (min-width: 768px) { .mxd-hero-05__bottom { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -moz-box-orient: horizontal; -moz-box-direction: normal; -ms-flex-direction: row; flex-direction: row; } } .mxd-hero-05__worksblock { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -moz-box-orient: vertical; -moz-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 4rem; padding: 3rem; -moz-border-radius: var(--_radius-l); border-radius: var(--_radius-l); background-color: var(--base-tint); } @media only screen and (min-width: 768px) { .mxd-hero-05__worksblock { -ms-flex-preferred-size: 30rem; flex-basis: 30rem; -webkit-box-flex: 0; -moz-box-flex: 0; -ms-flex-positive: 0; flex-grow: 0; -ms-flex-negative: 0; flex-shrink: 0; padding: 4rem; } } @media only screen and (min-width: 1200px) { .mxd-hero-05__worksblock { -ms-flex-preferred-size: 43rem; flex-basis: 43rem; padding: 4rem 6rem; } } @media only screen and (min-width: 1600px) { .mxd-hero-05__worksblock { -ms-flex-preferred-size: 55.5rem; flex-basis: 55.5rem; padding: 4rem 8rem; } } .hero-05-worksblock__descr { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -moz-box-orient: vertical; -moz-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; gap: 3rem; text-align: center; } .mxd-hero-05__videoblock { position: relative; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -moz-box-orient: vertical; -moz-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 4rem; -webkit-box-flex: 1; -moz-box-flex: 1; -ms-flex: 1; flex: 1; padding: 3rem; -moz-border-radius: var(--_radius-l); border-radius: var(--_radius-l); overflow: hidden; } .mxd-hero-05__videoblock img { position: absolute; left: 50%; top: 50%; bottom: auto; right: auto; -webkit-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } @media only screen and (min-width: 768px) { .mxd-hero-05__videoblock { padding: 4rem; } } .mxd-hero-05-videoblock__video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .mxd-hero-05-videoblock__video video { display: block; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .mxd-hero-05-videoblock__descr { position: relative; padding: 3rem; background-color: rgba(255, 255, 255, 0.3); border: 1px solid rgba(255, 255, 255, 0.3); -moz-border-radius: var(--_radius-m); border-radius: var(--_radius-m); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); } .mxd-hero-05-videoblock__descr p { color: var(--pt-t-dark-bright); font-weight: 500; } @media only screen and (min-width: 768px) { .mxd-hero-05-videoblock__descr { padding: 3rem 4rem; } } @media only screen and (min-width: 1200px) { .mxd-hero-05-videoblock__descr { max-width: 460px; } } @media only screen and (min-width: 1600px) { .mxd-hero-05-videoblock__descr { max-width: 535px; } } .hero-05-title { position: relative; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -moz-box-orient: vertical; -moz-box-direction: normal; -ms-flex-direction: column; flex-direction: column; margin-top: 3.5rem; } @media only screen and (min-width: 1200px) { .hero-05-title { margin-top: 0; } } .hero-05-title__row { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-pack: start; -moz-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; gap: 1rem; } @media only screen and (min-width: 768px) { .hero-05-title__row { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -moz-box-orient: horizontal; -moz-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-pack: start; -moz-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; gap: 2rem; } } @media only screen and (min-width: 1200px) { .hero-05-title__row { gap: 3.2rem; } } @media only screen and (min-width: 1600px) { .hero-05-title__row { gap: 3.4rem; } } .hero-05-title__item { display: -webkit-inline-box; display: -moz-inline-box; display: -ms-inline-flexbox; display: inline-flex; } .hero-05-title__item.title-item-transparent { opacity: 0; } .hero-05-title__item.title-item-image { padding-top: 1rem; display: none; } .hero-05-title__item.title-item-image svg { width: 3.5rem; height: 3.5rem; fill: currentColor; } @media only screen and (min-width: 768px) { .hero-05-title__item.title-item-transparent { padding: 0 5rem; -moz-border-radius: 4.4rem; border-radius: 4.4rem; color: var(--t-opp-bright); } .hero-05-title__item.title-item-image { display: -webkit-inline-box; display: -moz-inline-box; display: -ms-inline-flexbox; display: inline-flex; padding-top: 1rem; } .hero-05-title__item.title-item-image svg { width: 4.1rem; height: 4.1rem; } } @media only screen and (min-width: 1200px) { .hero-05-title__item.title-item-transparent { padding: 0 7rem; -moz-border-radius: 6.6rem; border-radius: 6.6rem; } .hero-05-title__item.title-item-image svg { width: 7.5rem; height: 7.5rem; } } @media only screen and (min-width: 1600px) { .hero-05-title__item.title-item-transparent { -moz-border-radius: 7.7rem; border-radius: 7.7rem; } .hero-05-title__item.title-item-image svg { width: 8.2rem; height: 8.2rem; } } @media only screen and (min-width: 1200px) { .hero-05-headline__avatars { padding-top: 2.4rem; } } @media only screen and (min-width: 1600px) { .hero-05-headline__avatars { padding-top: 3rem; } } /* ------------------------------------------------*/ /* Block - Hero Section #05 End */ /* ------------------------------------------------*/ /* ------------------------------------------------*/ /* Block - Hero Section #06 Start */ /* ------------------------------------------------*/ .mxd-hero-06 { position: relative; width: 100%; padding-top: 7.6rem; } @media only screen and (min-width: 768px) { .mxd-hero-06 { padding-top: 9.6rem; } } @media only screen and (min-width: 1200px) { .mxd-hero-06 { height: 100vh; } } .mxd-hero-06__wrap { position: relative; width: 100%; height: 100%; padding-top: 10.9rem; } @media only screen and (min-width: 768px) { .mxd-hero-06__wrap { padding-top: 14.9rem; } } @media only screen and (min-width: 1200px) { .mxd-hero-06__wrap { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -moz-box-orient: vertical; -moz-box-direction: normal; -ms-flex-direction: column; flex-direction: column; padding: 4rem 6rem 0 6rem; } } @media only screen and (min-width: 1600px) { .mxd-hero-06__wrap { padding: 4rem 9rem 0 9rem; } } .mxd-hero-06__top { position: relative; } @media only screen and (min-width: 1200px) { .mxd-hero-06__top { -webkit-box-flex: 1; -moz-box-flex: 1; -ms-flex: 1; flex: 1; } } .mxd-hero-06__bottom { position: relative; padding: 0 3rem; } @media only screen and (min-width: 768px) { .mxd-hero-06__bottom { padding: 0 6rem; } } @media only screen and (min-width: 1200px) { .mxd-hero-06__bottom { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -moz-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: start; -moz-box-align: start; -ms-flex-align: start; align-items: flex-start; padding: 4rem 0; } } @media only screen and (min-width: 1600px) { .mxd-hero-06__bottom { padding: 4rem 0; } } .mxd-hero-06__btn-mobile { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; padding: 0 3rem; margin-top: 5.2rem; } @media only screen and (min-width: 768px) { .mxd-hero-06__btn-mobile { padding: 0 6rem; margin-top: 7.2rem; } } @media only screen and (min-width: 1200px) { .mxd-hero-06__btn-mobile { display: none; } } .mxd-hero-06__content { position: relative; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: reverse; -moz-box-orient: vertical; -moz-box-direction: reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; width: 100%; overflow: hidden; } @media only screen and (min-width: 1200px) { .mxd-hero-06__content { -webkit-box-orient: vertical; -webkit-box-direction: normal; -moz-box-orient: vertical; -moz-box-direction: normal; -ms-flex-direction: column; flex-direction: column; width: 100%; height: 100%; } } .mxd-hero-06__video { padding: 0 3rem; margin-bottom: 1.5rem; } .mxd-hero-06__video video { display: block; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; -moz-border-radius: var(--_radius-m); border-radius: var(--_radius-m); } @media only screen and (min-width: 768px) { .mxd-hero-06__video { padding: 0 6rem; margin-bottom: 3rem; } } @media only screen and (min-width: 1200px) { .mxd-hero-06__video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding: 0; margin-bottom: 0; -moz-border-radius: var(--_radius-l); border-radius: var(--_radius-l); overflow: hidden; } .mxd-hero-06__video video { -moz-border-radius: none; border-radius: none; } } .hero-06-video__cover { display: none; } @media only screen and (min-width: 1200px) { .hero-06-video__cover { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: var(--base); background: -webkit-gradient(linear, left top, left bottom, color-stop(20%, rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0.6))); background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 20%, rgba(0, 0, 0, 0.6) 100%); background: linear-gradient(180deg, rgba(0, 0, 0, 0) 20%, rgba(0, 0, 0, 0.6) 100%); } } .mxd-hero-06__data { position: relative; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: reverse; -moz-box-orient: vertical; -moz-box-direction: reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; overflow: hidden; } @media only screen and (min-width: 1200px) { .mxd-hero-06__data { width: 100%; height: 100%; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -moz-box-orient: vertical; -moz-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: justify; -moz-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: start; -moz-box-align: start; -ms-flex-align: start; align-items: flex-start; } } .mxd-hero-06__list { position: relative; width: 100%; padding: 0 3rem; margin-bottom: 5.2rem; } @media only screen and (min-width: 768px) { .mxd-hero-06__list { padding: 0 6rem; margin-bottom: 7.2rem; } } @media only screen and (min-width: 1200px) { .mxd-hero-06__list { padding: 3.4rem 4rem 0 4rem; } .mxd-hero-06__list p { color: var(--pt-t-light-bright); font-weight: 400; } } .mxd-hero-06__headline { position: relative; width: 100%; } @media only screen and (min-width: 1200px) { .mxd-hero-06__headline { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -moz-box-orient: vertical; -moz-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: start; -moz-box-align: start; -ms-flex-align: start; align-items: flex-start; } } .hero-06-headline__descr { position: relative; width: 100%; padding: 0 3rem; margin-bottom: 2.5rem; } .hero-06-headline__descr p { color: var(--t-bright); font-size: 2rem; font-weight: var(--fw-medium); line-height: 1.4; } @media only screen and (min-width: 768px) { .hero-06-headline__descr { padding: 0 6rem; margin-bottom: 1.6rem; } .hero-06-headline__descr p { max-width: 440px; } } @media only screen and (min-width: 1200px) { .hero-06-headline__descr { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -moz-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: end; -moz-box-align: end; -ms-flex-align: end; align-items: flex-end; padding: 0 4rem; margin-bottom: 0.4rem; } .hero-06-headline__descr p { color: var(--pt-t-light-bright); font-weight: 500; max-width: 340px; } } @media only screen and (min-width: 1600px) { .hero-06-headline__descr { padding: 0 5rem; } .hero-06-headline__descr p { font-size: 2.4rem; max-width: 440px; } } .hero-06-headline__btn { display: none; } @media only screen and (min-width: 1200px) { .hero-06-headline__btn { display: block; position: absolute; right: 5rem; bottom: 0; } } .hero-06-headline__content { position: relative; width: 100%; overflow: hidden; } .hero-06-headline__title { position: absolute; top: 0; left: 0; white-space: nowrap; opacity: 0; visibility: hidden; } .mxd-hero-06__marquee { margin-bottom: 3.6rem; } @media only screen and (min-width: 768px) { .mxd-hero-06__marquee { margin-bottom: 4.3rem; } } @media only screen and (min-width: 1200px) { .mxd-hero-06__marquee { margin-bottom: 0; padding-bottom: 4.3rem; } } .mxd-hero-06__mark, .mxd-hero-06__more { position: relative; } .mxd-hero-06__mark { display: block; background-color: var(--base-tint); -moz-border-radius: var(--_radius-m); border-radius: var(--_radius-m); padding: 2rem; } @media only screen and (min-width: 768px) { .mxd-hero-06__mark { padding: 3rem; } } @media only screen and (min-width: 1200px) { .mxd-hero-06__mark { display: -webkit-inline-box; display: -moz-inline-box; display: -ms-inline-flexbox; display: inline-flex; background-color: transparent; -moz-border-radius: none; border-radius: none; padding: 0; } } .mxd-hero-06__more { display: none; } @media only screen and (min-width: 1200px) { .mxd-hero-06__more { display: -webkit-inline-box; display: -moz-inline-box; display: -ms-inline-flexbox; display: inline-flex; } } /* ------------------------------------------------*/ /* Block - Hero Section #06 End */ /* ------------------------------------------------*/ /* ------------------------------------------------*/ /* Block - Hero Section #07 Start */ /* ------------------------------------------------*/ .mxd-hero-07 { position: relative; width: 100%; } .mxd-hero-07__tl-trigger { position: absolute; right: 0; bottom: 0; width: 1px; height: 1px; } .hero-07-fade-out-scroll { -webkit-transform-origin: top center; -moz-transform-origin: top center; -ms-transform-origin: top center; transform-origin: top center; } .hero-07-slide-out-scroll { -webkit-transform-origin: top center; -moz-transform-origin: top center; -ms-transform-origin: top center; transform-origin: top center; } .mxd-hero-07__wrap { position: relative; width: 100%; padding-top: 7.6rem; } @media only screen and (min-width: 768px) { .mxd-hero-07__wrap { padding-top: 9.6rem; } } @media only screen and (min-width: 1200px) { .mxd-hero-07__wrap { height: 100vh; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -moz-box-orient: vertical; -moz-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: justify; -moz-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; padding-top: 9.6rem; } } .mxd-hero-07__top { position: relative; width: 100%; padding-top: 3.1rem; margin-bottom: 4.6rem; overflow: hidden; } @media only screen and (min-width: 768px) { .mxd-hero-07__top { padding-top: 10.3rem; margin-bottom: 13.3rem; } } @media only screen and (min-width: 1200px) { .mxd-hero-07__top { padding-top: 2.3rem; margin-bottom: 0; } } @media only screen and (min-width: 1600px) { .mxd-hero-07__top { padding-top: 4.3rem; } } .mxd-hero-07__title { position: absolute; top: 0; left: 0; width: 100%; white-space: nowrap; opacity: 0; visibility: hidden; } .mxd-hero-07__bottom { position: relative; width: 100%; padding: 0 3rem; overflow: hidden; } @media only screen and (min-width: 768px) { .mxd-hero-07__bottom { padding: 0 6rem; } } @media only screen and (min-width: 1200px) { .mxd-hero-07__bottom { -webkit-box-flex: 1; -moz-box-flex: 1; -ms-flex: 1; flex: 1; overflow: visible; } } @media only screen and (min-width: 1600px) { .mxd-hero-07__bottom { padding: 0 9rem; } } .mxd-hero-07__circle { position: relative; width: 100%; height: 460px; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -moz-box-orient: vertical; -moz-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: justify; -moz-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; padding: 1.5rem; margin-bottom: 4.6rem; } @media only screen and (min-width: 768px) { .mxd-hero-07__circle { width: 600px; height: 600px; -webkit-box-pack: start; -moz-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; margin: 0 auto 4.6rem; padding: 0; overflow: visible; } } @media only screen and (min-width: 1200px) { .mxd-hero-07__circle { position: absolute; bottom: -250px; left: 50%; right: auto; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); margin: 0; } } @media only screen and (min-width: 1400px) { .mxd-hero-07__circle { width: 680px; height: 680px; bottom: -250px; } } @media only screen and (min-width: 1600px) { .mxd-hero-07__circle { width: 900px; height: 900px; bottom: -400px; } } .hero-07-circle__image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; -moz-border-radius: var(--_radius-m); border-radius: var(--_radius-m); overflow: hidden; } .hero-07-circle__image img { display: block; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } @media only screen and (min-width: 768px) { .hero-07-circle__image { -moz-border-radius: 50%; border-radius: 50%; } } .hero-07-circle__container { position: relative; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-align: start; -moz-box-align: start; -ms-flex-align: start; align-items: flex-start; } .hero-07-circle__container.mobile-row { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-align: end; -moz-box-align: end; -ms-flex-align: end; align-items: flex-end; gap: 1rem; } @media only screen and (min-width: 768px) { .hero-07-circle__container { position: static; } } .hero-07-circle__item { padding: 1.8rem 2rem; -moz-border-radius: var(--_radius-pt-m); border-radius: var(--_radius-pt-m); background-color: var(--neutral-transparent); border: 1px solid var(--neutral-transparent); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); -webkit-box-shadow: 0px 4px 8px 0px rgba(var(--pt-purple-rgb), 0.3); -moz-box-shadow: 0px 4px 8px 0px rgba(var(--pt-purple-rgb), 0.3); box-shadow: 0px 4px 8px 0px rgba(var(--pt-purple-rgb), 0.3); } @media only screen and (min-width: 768px) { .hero-07-circle__item { position: absolute; } .hero-07-circle__item.item-01 { top: 3rem; right: -1.4rem; max-width: 20rem; } .hero-07-circle__item.item-02 { top: 25rem; right: -10rem; max-width: 16rem; } .hero-07-circle__item.item-03 { top: 20rem; left: -8rem; max-width: 16rem; } } @media only screen and (min-width: 1200px) { .hero-07-circle__item.item-02 { top: auto; top: 21rem; right: -10rem; max-width: 16rem; } .hero-07-circle__item.item-03 { top: 17rem; left: -8rem; max-width: 16rem; } } @media only screen and (min-width: 1600px) { .hero-07-circle__item.item-01 { top: 5rem; right: 5rem; max-width: 20rem; } .hero-07-circle__item.item-02 { top: auto; top: 29rem; right: -10rem; max-width: 16rem; } .hero-07-circle__item.item-03 { top: 24rem; left: -7rem; max-width: 16rem; } } .mxd-hero-07__info { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -moz-box-orient: vertical; -moz-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 1rem; } @media only screen and (min-width: 1200px) { .mxd-hero-07__info { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -moz-box-orient: horizontal; -moz-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-pack: justify; -moz-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; height: 100%; padding-top: 4rem; } } @media only screen and (min-width: 1600px) { .mxd-hero-07__info { padding-top: 5.6rem; } } .hero-07-info__container { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -moz-box-orient: vertical; -moz-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 5.2rem; } @media only screen and (min-width: 1200px) { .hero-07-info__container { -webkit-box-pack: justify; -moz-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; padding-bottom: 4rem; } .hero-07-info__container:nth-of-type(2) { padding-top: 1.3rem; } } @media only screen and (min-width: 1600px) { .hero-07-info__container:nth-of-type(2) { padding-top: 1.7rem; } } .hero-07-info__descr { position: relative; text-align: left; } @media only screen and (min-width: 768px) { .hero-07-info__descr { max-width: 500px; text-align: center; margin: 0 auto; } } @media only screen and (min-width: 1200px) { .hero-07-info__descr { max-width: 340px; text-align: left; margin: 0; } } @media only screen and (min-width: 1600px) { .hero-07-info__descr { max-width: 400px; } } .hero-07-info__tags { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-pack: start; -moz-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 1rem; } @media only screen and (min-width: 768px) { .hero-07-info__tags { -webkit-box-pack: center; -moz-box-pack: center; -ms-flex-pack: center; justify-content: center; } } @media only screen and (min-width: 1200px) { .hero-07-info__tags { -webkit-box-orient: vertical; -webkit-box-direction: normal; -moz-box-orient: vertical; -moz-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: start; -moz-box-align: start; -ms-flex-align: start; align-items: flex-start; } .hero-07-info__tags.right-align-desktop { -webkit-box-align: end; -moz-box-align: end; -ms-flex-align: end; align-items: flex-end; } } .mxd-hero-07__more { display: none; } @media only screen and (min-width: 1200px) { .mxd-hero-07__more { display: block; position: absolute; right: 0; bottom: 0; padding: 4rem 6rem; } } @media only screen and (min-width: 1600px) { .mxd-hero-07__more { padding: 4rem 9rem; } } /* ------------------------------------------------*/ /* Block - Hero Section #07 End */ /* ------------------------------------------------*/ /* ------------------------------------------------*/ /* Block - Hero Section #08 Start */ /* ------------------------------------------------*/ .mxd-hero-08 { position: relative; width: 100%; } .mxd-hero-08__tl-trigger { position: absolute; right: 0; bottom: 0; width: 1px; height: 1px; } .mxd-hero-08__wrap { position: relative; width: 100%; padding-top: 7.6rem; } @media only screen and (min-width: 768px) { .mxd-hero-08__wrap { padding-top: 9.6rem; } } @media only screen and (min-width: 1200px) { .mxd-hero-08__wrap { height: 100vh; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -moz-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; padding-top: 0; } } .mxd-hero-08__center { position: relative; width: 100%; text-align: center; padding: 11.5rem 0 11.9rem 0; } @media only screen and (min-width: 768px) { .mxd-hero-08__center { padding: 13.5rem 0 14.9rem 0; } } @media only screen and (min-width: 1200px) { .mxd-hero-08__center { padding: 0; } } .mxd-hero-08__headline { position: relative; } .hero-08-headline__image { position: absolute; left: 50%; top: 50%; bottom: auto; right: auto; -webkit-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); width: 50vw; } @media only screen and (min-width: 768px) { .hero-08-headline__image { width: 28vw; } } @media only screen and (min-width: 1600px) { .hero-08-headline__image { width: 24vw; } } .hero-08-headline__title { position: relative; mix-blend-mode: difference; } .hero-08-headline__title h1 { color: var(--nl-white); } .mxd-hero-08__bottom { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -moz-box-orient: vertical; -moz-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 3.6rem; padding: 0 3rem; } @media only screen and (min-width: 768px) { .mxd-hero-08__bottom { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -moz-box-orient: horizontal; -moz-box-direction: normal; -ms-flex-direction: row; flex-direction: row; gap: 6rem; padding: 0 6rem; } } @media only screen and (min-width: 1200px) { .mxd-hero-08__bottom { position: absolute; bottom: 4rem; left: 0; width: 100%; -webkit-box-align: end; -moz-box-align: end; -ms-flex-align: end; align-items: flex-end; -webkit-box-pack: justify; -moz-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; margin-bottom: 0; } } @media only screen and (min-width: 1600px) { .mxd-hero-08__bottom { padding: 0 9rem; } } .mxd-hero-08__video-wrap { position: relative; -moz-border-radius: var(--_radius-l); border-radius: var(--_radius-l); overflow: hidden; } @media only screen and (min-width: 768px) { .mxd-hero-08__video-wrap { -ms-flex-preferred-size: 50%; flex-basis: 50%; -webkit-box-flex: 0; -moz-box-flex: 0; -ms-flex-positive: 0; flex-grow: 0; -ms-flex-negative: 0; flex-shrink: 0; -moz-border-radius: var(--_radius-m); border-radius: var(--_radius-m); } } @media only screen and (min-width: 1200px) { .mxd-hero-08__video-wrap { -ms-flex-preferred-size: 24.6rem; flex-basis: 24.6rem; -webkit-box-flex: 0; -moz-box-flex: 0; -ms-flex-positive: 0; flex-grow: 0; -ms-flex-negative: 0; flex-shrink: 0; height: 16rem; } } @media only screen and (min-width: 1600px) { .mxd-hero-08__video-wrap { -ms-flex-preferred-size: 30.8rem; flex-basis: 30.8rem; height: 20rem; } } .mxd-hero-08__video-btn { position: absolute; right: 0; bottom: 0; padding: 1rem; } .mxd-hero-08__video { display: block; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .mxd-hero-08__data-wrap { position: relative; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -moz-box-orient: vertical; -moz-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 2.3rem; } @media only screen and (min-width: 1200px) { .mxd-hero-08__data-wrap { max-width: 480px; } } @media only screen and (min-width: 1600px) { .mxd-hero-08__data-wrap { max-width: 540px; } } .mxd-hero__mark { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; gap: 1rem; font: normal var(--fw-regular) 1.6rem/1.4 var(--_font-accent); color: var(--t-bright); } .mxd-hero__mark .mark-icon { display: -webkit-inline-box; display: -moz-inline-box; display: -ms-inline-flexbox; display: inline-flex; -ms-flex-preferred-size: 1rem; flex-basis: 1rem; -webkit-box-flex: 0; -moz-box-flex: 0; -ms-flex-positive: 0; flex-grow: 0; -ms-flex-negative: 0; flex-shrink: 0; width: 1rem; height: 1rem; -moz-border-radius: 50%; border-radius: 50%; background-color: #a1f21e; } .mxd-hero__mark .mark-text { display: -webkit-inline-box; display: -moz-inline-box; display: -ms-inline-flexbox; display: inline-flex; } @media only screen and (min-width: 768px) { .mxd-hero__mark { gap: 1.2rem; } } @media only screen and (min-width: 1600px) { .mxd-hero__mark { font-size: 1.8rem; } } /* ------------------------------------------------*/ /* Block - Hero Section #08 End */ /* ------------------------------------------------*/ /* ------------------------------------------------*/ /* Block - Hero Section #09 Start */ /* ------------------------------------------------*/ .mxd-hero-09 { position: relative; width: 100%; padding-top: 11rem; } @media only screen and (min-width: 768px) { .mxd-hero-09 { padding-top: 14.8rem; } } @media only screen and (min-width: 1200px) { .mxd-hero-09 { padding-top: 0; } } .mxd-hero-09__wrap { position: relative; width: 100%; padding-top: 9.6rem; overflow: hidden; } @media only screen and (min-width: 768px) { .mxd-hero-09__wrap { padding-top: 9.6rem; } } @media only screen and (min-width: 1200px) { .mxd-hero-09__wrap { padding-top: 0; height: 100vh; } } .mxd-hero-09__headline, .mxd-hero-09__objects { position: relative; padding: 0 3rem; } @media only screen and (min-width: 768px) { .mxd-hero-09__headline, .mxd-hero-09__objects { padding: 0 6rem; } } @media only screen and (min-width: 1600px) { .mxd-hero-09__headline, .mxd-hero-09__objects { padding: 0 9rem; } } .mxd-hero-09__headline { position: relative; } @media only screen and (min-width: 1200px) { .mxd-hero-09__headline { position: absolute; bottom: 4rem; left: 0; width: 100%; z-index: 2; } } .hero-09-headline__caption { margin-bottom: 3.6rem; } .hero-09-headline__caption p { font: normal var(--fw-medium) 2rem/1.2 var(--_font-accent); color: var(--t-bright); } @media only screen and (min-width: 768px) { .hero-09-headline__caption { max-width: 500px; margin-bottom: 5.4rem; } .hero-09-headline__caption p { font-size: 2.6rem; } } @media only screen and (min-width: 1200px) { .hero-09-headline__caption { max-width: 440px; } } .hero-09-headline__title { position: relative; overflow: hidden; color: var(--t-bright); } .hero-09-headline__title svg { fill: currentColor; } .hero-09-svg-mobile { display: block; } @media only screen and (min-width: 1200px) { .hero-09-svg-mobile { display: none; } } .hero-09-svg-desktop { display: none; } @media only screen and (min-width: 1200px) { .hero-09-svg-desktop { display: block; } } .hero-09-headline__hidden { position: absolute; top: 0; left: 0; white-space: nowrap; opacity: 0; visibility: hidden; } .hero-09-headline__tags { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-pack: start; -moz-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 1rem; margin-top: 6rem; max-width: 800px; } @media only screen and (min-width: 1600px) { .hero-09-headline__tags { max-width: 1000px; } } .mxd-hero-09__objects { position: relative; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -moz-box-orient: vertical; -moz-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 1.5rem; } @media only screen and (min-width: 768px) { .mxd-hero-09__objects { gap: 0; max-width: 430px; margin: 6rem auto 0; padding: 0; } } @media only screen and (min-width: 1200px) { .mxd-hero-09__objects { position: absolute; right: 14%; top: 6.8rem; margin: 0; z-index: 1; } } .hero-09-objects__image { position: relative; max-width: 325px; margin: 6rem auto 0; padding-bottom: 4.5rem; } @media only screen and (min-width: 768px) { .hero-09-objects__image { max-width: none; margin: 0; padding-bottom: 0; } } .hero-09-objects__item { position: relative; padding: 1.8rem 2rem; -moz-border-radius: var(--_radius-pt-m); border-radius: var(--_radius-pt-m); background-color: var(--base-tint); } @media only screen and (min-width: 768px) { .hero-09-objects__item { position: absolute; background-color: var(--neutral-transparent); border: 1px solid var(--neutral-transparent); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); -webkit-box-shadow: 0px 4px 8px 0px rgba(var(--pt-purple-rgb), 0.3); -moz-box-shadow: 0px 4px 8px 0px rgba(var(--pt-purple-rgb), 0.3); box-shadow: 0px 4px 8px 0px rgba(var(--pt-purple-rgb), 0.3); } .hero-09-objects__item.item-01 { top: 7rem; right: -3rem; } .hero-09-objects__item.item-02 { left: -14rem; top: 18rem; } .hero-09-objects__item.item-03 { right: -18rem; top: 24rem; } } @media only screen and (min-width: 1600px) { .hero-09-objects__item.item-01 { top: 8rem; right: -3rem; } .hero-09-objects__item.item-02 { left: -14rem; top: 29rem; } .hero-09-objects__item.item-03 { right: -18rem; top: 27rem; } } .mxd-hero-09__more { display: none; } @media only screen and (min-width: 1200px) { .mxd-hero-09__more { display: block; position: absolute; right: 0; bottom: 0; padding: 4rem 6rem; z-index: 3; } } @media only screen and (min-width: 1600px) { .mxd-hero-09__more { padding: 4rem 9rem; } } /* ------------------------------------------------*/ /* Block - Hero Section #09 End */ /* ------------------------------------------------*/ /* ------------------------------------------------*/ /* Block - Blog Start */ /* ------------------------------------------------*/ .breadcrumbs__nav { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: start; -moz-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; gap: 0.5rem; } .breadcrumbs__nav span { font: normal var(--fw-regular) 1.8rem/1.4 var(--_font-accent); color: var(--t-muted); } .breadcrumbs__nav span::after { content: "/"; display: -webkit-inline-box; display: -moz-inline-box; display: -ms-inline-flexbox; display: inline-flex; margin-left: 0.2rem; } .breadcrumbs__nav span:last-of-type::after { display: none; } .breadcrumbs__nav span a { display: inline; color: var(--t-muted); text-decoration: none; background: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0))), -webkit-gradient(linear, left top, right top, from(var(--t-muted)), to(var(--t-muted))); background: -moz-linear-gradient(left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)), -moz-linear-gradient(left, var(--t-muted), var(--t-muted)); background: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)), linear-gradient(to right, var(--t-muted), var(--t-muted)); -moz-background-size: 100% 1px, 0 1px; background-size: 100% 1px, 0 1px; background-position: 100% 100%, 0 100%; background-repeat: no-repeat; -webkit-transition: background-size 400ms, color 300ms; -moz-transition: background-size 400ms, color 300ms, -moz-background-size 400ms; transition: background-size 400ms, color 300ms; transition: background-size 400ms, color 300ms, -moz-background-size 400ms; } .no-touch .breadcrumbs__nav span a:hover { color: var(--t-medium); -moz-background-size: 0 1px, 100% 1px; background-size: 0 1px, 100% 1px; } .breadcrumbs__nav span.current-item { text-decoration: none; background: -webkit-gradient(linear, left top, right top, from(var(--t-muted)), to(var(--t-muted))); background: -moz-linear-gradient(left, var(--t-muted), var(--t-muted)); background: linear-gradient(to right, var(--t-muted), var(--t-muted)); -moz-background-size: 100% 1px, 0 1px; background-size: 100% 1px, 0 1px; background-position: 100% 100%; background-repeat: no-repeat; } .breadcrumbs__nav span.current-item a { text-decoration: none; background: -webkit-gradient(linear, left top, right top, from(var(--t-muted)), to(var(--t-muted))), -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0))); background: -moz-linear-gradient(left, var(--t-muted), var(--t-muted)), -moz-linear-gradient(left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)); background: linear-gradient(to right, var(--t-muted), var(--t-muted)), linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)); -moz-background-size: 100% 1px, 0 1px; background-size: 100% 1px, 0 1px; background-position: 100% 100%, 0 100%; background-repeat: no-repeat; -webkit-transition: background-size 400ms, color 300ms; -moz-transition: background-size 400ms, color 300ms, -moz-background-size 400ms; transition: background-size 400ms, color 300ms; transition: background-size 400ms, color 300ms, -moz-background-size 400ms; } .no-touch .breadcrumbs__nav span.current-item a:hover { color: var(--t-medium); -moz-background-size: 0 1px, 100% 1px; background-size: 0 1px, 100% 1px; } @media only screen and (min-width: 1200px) { .breadcrumbs__nav { -webkit-box-pack: end; -moz-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } } .mxd-posts-area { position: relative; width: 100%; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -moz-box-orient: vertical; -moz-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } @media only screen and (min-width: 1200px) { .mxd-posts-area { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -moz-box-orient: horizontal; -moz-box-direction: normal; -ms-flex-direction: row; flex-direction: row; } .mxd-posts-area.column { -webkit-box-orient: vertical; -webkit-box-direction: normal; -moz-box-orient: vertical; -moz-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } } .mxd-posts-container { position: relative; width: 100%; } @media only screen and (min-width: 1200px) { .mxd-posts-container { width: -moz-calc(100% - 450px); width: calc(100% - 450px); } .mxd-posts-container.fullwidth-posts-container { width: 100%; } } .mxd-sidebar { position: relative; width: 100%; } @media only screen and (min-width: 1200px) { .mxd-sidebar { width: 450px; } } .mxd-post { position: relative; overflow: hidden; } .post-featured { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -moz-box-orient: vertical; -moz-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 12.8rem; height: auto; padding: 3rem; margin-bottom: 6rem; } .post-featured.post-featured-v2 { margin-bottom: 0; } @media only screen and (min-width: 768px) { .post-featured { padding: 4rem; margin-bottom: 6rem; } } @media only screen and (min-width: 1200px) { .post-featured.post-featured-v2 { height: 760px; -webkit-box-pack: justify; -moz-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } } @media only screen and (min-width: 1400px) { .post-featured { -webkit-box-pack: justify; -moz-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; gap: 0; height: 670px; } .post-featured.post-featured-v2 { height: 760px; } } @media only screen and (min-width: 1600px) { .post-featured { height: 760px; } .post-featured.post-featured-v2 { height: 930px; } } .post-featured__thumb { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .post-featured__thumb img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .post-featured__categories { position: relative; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -moz-box-orient: horizontal; -moz-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-align: start; -moz-box-align: start; -ms-flex-align: start; align-items: flex-start; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 1rem; } @media only screen and (min-width: 1200px) { .post-featured__categories { -webkit-box-orient: vertical; -webkit-box-direction: normal; -moz-box-orient: vertical; -moz-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } } .post-featured__content { position: relative; } @media only screen and (min-width: 768px) { .post-featured__content { max-width: 500px; } } @media only screen and (min-width: 1200px) { .post-featured__content { overflow: hidden; } } @media only screen and (min-width: 1600px) { .post-featured__content { max-width: 600px; } } .post-featured__meta { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; row-gap: 0.4rem; -webkit-column-gap: 1rem; -moz-column-gap: 1rem; column-gap: 1rem; color: var(--pt-t-light-bright); margin-bottom: 1.6rem; } .post-featured__meta span { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; gap: 1rem; font: normal var(--fw-regular) 1.8rem/1.6 var(--_font-accent); } .post-featured__meta span a { color: var(--pt-t-light-bright); } .post-featured__meta span svg { width: 1.7rem; height: 1.7rem; fill: currentColor; } .post-featured__meta span.meta-tag { font-weight: var(--fw-semibold); } @media only screen and (min-width: 1600px) { .post-featured__meta span { font-size: 2.2rem; } } .post-featured__title { margin-bottom: 2.3rem; font: normal var(--fw-medium) 3.6rem/1.2 var(--_font-accent); color: var(--pt-t-light-bright); } .post-featured__title a { display: inline; color: var(--pt-t-light-bright); text-decoration: none; background: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0))), -webkit-gradient(linear, left top, right top, from(var(--pt-t-light-bright)), to(var(--pt-t-light-bright))); background: -moz-linear-gradient(left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)), -moz-linear-gradient(left, var(--pt-t-light-bright), var(--pt-t-light-bright)); background: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)), linear-gradient(to right, var(--pt-t-light-bright), var(--pt-t-light-bright)); -moz-background-size: 100% 1px, 0 1px; background-size: 100% 1px, 0 1px; background-position: 100% 100%, 0 100%; background-repeat: no-repeat; -webkit-transition: background-size 400ms, color 300ms; -moz-transition: background-size 400ms, color 300ms, -moz-background-size 400ms; transition: background-size 400ms, color 300ms; transition: background-size 400ms, color 300ms, -moz-background-size 400ms; } .no-touch .post-featured__title a:hover { color: var(--pt-t-light-bright); -moz-background-size: 0 1px, 100% 1px; background-size: 0 1px, 100% 1px; } @media only screen and (min-width: 768px) { .post-featured__title { font-size: 5rem; } } .post-featured__excerpt p { color: var(--pt-t-light-bright); } .post-featured__btn { padding-top: 3.3rem; } .post-simple { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -moz-box-orient: vertical; -moz-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 5rem; height: auto; padding: 6rem 0; border-top: 1px solid var(--st-muted); } .post-simple:last-of-type { border-bottom: 1px solid var(--st-muted); } @media only screen and (min-width: 768px) { .post-simple { gap: 3rem; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -moz-box-orient: horizontal; -moz-box-direction: normal; -ms-flex-direction: row; flex-direction: row; padding: 6rem 0; } } .post-simple__thumb { position: relative; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; width: 100%; height: 340px; overflow: hidden; } .post-simple__thumb img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .no-touch .post-simple__thumb:hover .mxd-preview-hover { opacity: 1; -webkit-filter: blur(0); filter: blur(0); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } @media only screen and (min-width: 768px) { .post-simple__thumb { -ms-flex-preferred-size: 260px; flex-basis: 260px; -webkit-box-flex: 0; -moz-box-flex: 0; -ms-flex-positive: 0; flex-grow: 0; -ms-flex-negative: 0; flex-shrink: 0; } } @media only screen and (min-width: 1400px) { .post-simple__thumb { -ms-flex-preferred-size: 300px; flex-basis: 300px; height: 320px; } } @media only screen and (min-width: 1600px) { .post-simple__thumb { -ms-flex-preferred-size: 400px; flex-basis: 400px; height: 340px; } } .post-simple__content { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -moz-box-orient: vertical; -moz-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 3rem; } @media only screen and (min-width: 768px) { .post-simple__content { max-width: 665px; -webkit-box-pack: justify; -moz-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } } @media only screen and (min-width: 1600px) { .post-simple__content { max-width: 765px; } } .post-simple__descr { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -moz-box-orient: vertical; -moz-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 1.6rem; } .post-simple__meta { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; row-gap: 0.4rem; -webkit-column-gap: 1rem; -moz-column-gap: 1rem; column-gap: 1rem; color: var(--t-medium); } .post-simple__meta span { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; gap: 1rem; font: normal var(--fw-regular) 1.8rem/1.6 var(--_font-accent); } .post-simple__meta span a { color: var(--t-medium); } .post-simple__meta span svg { width: 1.7rem; height: 1.7rem; fill: currentColor; } .post-simple__meta span.meta-tag { font-weight: var(--fw-semibold); } .no-touch .post-simple__meta span:hover a { color: var(--t-bright); } .post-simple__title h3 { font: normal var(--fw-medium) 2.6rem/1.2 var(--_font-accent); color: var(--t-bright); } .post-simple__title a { display: inline; color: var(--t-bright); text-decoration: none; background: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0))), -webkit-gradient(linear, left top, right top, from(var(--t-bright)), to(var(--t-bright))); background: -moz-linear-gradient(left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)), -moz-linear-gradient(left, var(--t-bright), var(--t-bright)); background: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)), linear-gradient(to right, var(--t-bright), var(--t-bright)); -moz-background-size: 100% 1px, 0 1px; background-size: 100% 1px, 0 1px; background-position: 100% 100%, 0 100%; background-repeat: no-repeat; -webkit-transition: background-size 300ms, color 300ms; -moz-transition: background-size 300ms, color 300ms, -moz-background-size 300ms; transition: background-size 300ms, color 300ms; transition: background-size 300ms, color 300ms, -moz-background-size 300ms; } .no-touch .post-simple__title a:hover { color: var(--t-bright); -moz-background-size: 0 1px, 100% 1px; background-size: 0 1px, 100% 1px; } @media only screen and (min-width: 768px) { .post-simple__title h3 { font-size: 3.4rem; } } .post-secondary { position: relative; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -moz-box-orient: vertical; -moz-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 2.6rem; } @media only screen and (min-width: 768px) { .post-secondary { gap: 2.9rem; } } .post-secondary-container { padding-bottom: 3.5rem; } .post-secondary-container:last-of-type { padding-bottom: 0; } @media only screen and (min-width: 1200px) { .post-secondary-container { padding-bottom: 0; } } .post-secondary__thumb { position: relative; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; overflow: hidden; height: 460px; } .no-touch .post-secondary__thumb:hover .mxd-preview-hover { opacity: 1; -webkit-filter: blur(0); filter: blur(0); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } .post-secondary__thumb img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } @media only screen and (min-width: 768px) { .post-secondary__thumb { height: 600px; } } @media only screen and (min-width: 1200px) { .post-secondary__thumb { height: 540px; } } @media only screen and (min-width: 1600px) { .post-secondary__thumb { height: 760px; } } .post-secondary__categories { position: absolute; top: 0; left: 0; width: 100%; padding: 3rem; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -moz-box-orient: horizontal; -moz-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-align: start; -moz-box-align: start; -ms-flex-align: start; align-items: flex-start; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 1rem; } @media only screen and (min-width: 768px) { .post-secondary__categories { padding: 4rem; } } @media only screen and (min-width: 1200px) { .post-secondary__categories { -webkit-box-orient: vertical; -webkit-box-direction: normal; -moz-box-orient: vertical; -moz-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } } .post-secondary__descr { position: relative; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -moz-box-orient: vertical; -moz-box-direction: normal; -ms-flex-direction: column; flex-direction: column; padding: 0 3rem 0.1rem 3rem; gap: 1.6rem; } @media only screen and (min-width: 768px) { .post-secondary__descr { padding: 0 4rem 0.1rem 4rem; } } .post-secondary__meta { position: relative; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; row-gap: 0; -webkit-column-gap: 1rem; -moz-column-gap: 1rem; column-gap: 1rem; color: var(--t-medium); } .post-secondary__meta span { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; gap: 1rem; font: normal var(--fw-regular) 1.8rem/1.6 var(--_font-accent); } .post-secondary__meta span a { color: var(--t-medium); } .post-secondary__meta span svg { width: 1.7rem; height: 1.7rem; fill: currentColor; } .post-secondary__meta span.meta-tag { font-weight: var(--fw-semibold); } .no-touch .post-secondary__meta span:hover a { color: var(--t-bright); } .post-secondary__title { position: relative; } .post-secondary__title h3 { font: normal var(--fw-medium) 2.6rem/1.2 var(--_font-accent); color: var(--t-bright); } .post-secondary__title a { display: inline; color: var(--t-bright); text-decoration: none; background: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0))), -webkit-gradient(linear, left top, right top, from(var(--t-bright)), to(var(--t-bright))); background: -moz-linear-gradient(left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)), -moz-linear-gradient(left, var(--t-bright), var(--t-bright)); background: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)), linear-gradient(to right, var(--t-bright), var(--t-bright)); -moz-background-size: 100% 1px, 0 1px; background-size: 100% 1px, 0 1px; background-position: 100% 100%, 0 100%; background-repeat: no-repeat; -webkit-transition: background-size 300ms, color 300ms; -moz-transition: background-size 300ms, color 300ms, -moz-background-size 300ms; transition: background-size 300ms, color 300ms; transition: background-size 300ms, color 300ms, -moz-background-size 300ms; } .no-touch .post-secondary__title a:hover { color: var(--t-bright); -moz-background-size: 0 1px, 100% 1px; background-size: 0 1px, 100% 1px; } @media only screen and (min-width: 768px) { .post-secondary__title h3 { font-size: 3.4rem; } } .mxd-projects-archive { position: relative; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -moz-box-orient: vertical; -moz-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } @media only screen and (min-width: 1200px) and (hover) and (prefers-reduced-motion: no-preference) { .mxd-projects-archive > .mxd-projects-archive__item { -webkit-transition: opacity 0.3s ease; -moz-transition: opacity 0.3s ease; transition: opacity 0.3s ease; } .mxd-projects-archive:hover > .mxd-projects-archive__item:not(:hover) { opacity: 0.2; } } .mxd-projects-archive__item { position: relative; display: block; margin-top: -2px; } .mxd-projects-archive__item:first-of-type { margin-top: 0; } @media only screen and (min-width: 1200px) { .no-touch .mxd-projects-archive__item:hover .mxd-projects-archive__title { -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } .no-touch .mxd-projects-archive__item:hover .mxd-projects-archive__image { -ms-flex-preferred-size: 160px; flex-basis: 160px; -moz-border-radius: 6.2rem; border-radius: 6.2rem; } } .mxd-projects-archive__border { position: relative; left: 1.5rem; width: -moz-calc(100% - 3rem); width: calc(100% - 3rem); height: 2px; background-color: var(--st-bright); } .mxd-projects-archive__inner { display: block; padding: 3rem 0; } @media only screen and (min-width: 1200px) { .mxd-projects-archive__inner { overflow: hidden; } } .mxd-projects-archive__title { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: reverse; -moz-box-orient: vertical; -moz-box-direction: reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; -webkit-box-align: start; -moz-box-align: start; -ms-flex-align: start; align-items: flex-start; gap: 3.5rem; margin-bottom: 3.4rem; } .mxd-projects-archive__title p { font: normal var(--fw-medium) 2.6rem/1.4 var(--_font-accent); letter-spacing: -0.06rem; color: var(--t-bright); } @media only screen and (min-width: 768px) { .mxd-projects-archive__title { gap: 3.8rem; margin-bottom: 3.8rem; } .mxd-projects-archive__title p { font-size: 3rem; } } @media only screen and (min-width: 1200px) { .mxd-projects-archive__title { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -moz-box-orient: horizontal; -moz-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-align: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; gap: 3rem; height: 100%; margin-bottom: 0; max-width: 720px; -webkit-transform: translateX(-50px); -moz-transform: translateX(-50px); -ms-transform: translateX(-50px); transform: translateX(-50px); -webkit-transition: -webkit-transform var(--_animspeed-slow) var(--_animbezier); transition: -webkit-transform var(--_animspeed-slow) var(--_animbezier); -moz-transition: transform var(--_animspeed-slow) var(--_animbezier), -moz-transform var(--_animspeed-slow) var(--_animbezier); transition: transform var(--_animspeed-slow) var(--_animbezier); transition: transform var(--_animspeed-slow) var(--_animbezier), -webkit-transform var(--_animspeed-slow) var(--_animbezier), -moz-transform var(--_animspeed-slow) var(--_animbezier); } .mxd-projects-archive__title p { display: inline; width: 530px; } .mxd-projects-archive__title p span { text-decoration: none; background: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0))), -webkit-gradient(linear, left top, right top, from(var(--t-bright)), to(var(--t-bright))); background: -moz-linear-gradient(left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)), -moz-linear-gradient(left, var(--t-bright), var(--t-bright)); background: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)), linear-gradient(to right, var(--t-bright), var(--t-bright)); -moz-background-size: 100% 1px, 0 1px; background-size: 100% 1px, 0 1px; background-position: 100% 100%, 0 100%; background-repeat: no-repeat; -webkit-transition: background-size 300ms, color 300ms; -moz-transition: background-size 300ms, color 300ms, -moz-background-size 300ms; transition: background-size 300ms, color 300ms; transition: background-size 300ms, color 300ms, -moz-background-size 300ms; } .no-touch .mxd-projects-archive__title p span:hover { color: var(--t-bright); -moz-background-size: 0 1px, 100% 1px; background-size: 0 1px, 100% 1px; } } .mxd-projects-archive__image { display: block; -moz-border-radius: var(--_radius-m); border-radius: var(--_radius-m); overflow: hidden; } .mxd-projects-archive__image img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } @media only screen and (min-width: 1200px) { .mxd-projects-archive__image { -ms-flex-preferred-size: 20px; flex-basis: 20px; -webkit-box-flex: 0; -moz-box-flex: 0; -ms-flex-positive: 0; flex-grow: 0; -ms-flex-negative: 0; flex-shrink: 0; height: 8.4rem; -moz-border-radius: 0; border-radius: 0; -webkit-transition: border-radius 1.5s, -webkit-flex-basis var(--_animspeed-medium) var(--_animbezier); transition: border-radius 1.5s, -webkit-flex-basis var(--_animspeed-medium) var(--_animbezier); -moz-transition: border-radius 1.5s, flex-basis var(--_animspeed-medium) var(--_animbezier), -moz-border-radius 1.5s, -moz-flex-basis var(--_animspeed-medium) var(--_animbezier); transition: border-radius 1.5s, flex-basis var(--_animspeed-medium) var(--_animbezier); transition: border-radius 1.5s, flex-basis var(--_animspeed-medium) var(--_animbezier), -moz-border-radius 1.5s, -webkit-flex-basis var(--_animspeed-medium) var(--_animbezier), -moz-flex-basis var(--_animspeed-medium) var(--_animbezier), -ms-flex-preferred-size var(--_animspeed-medium) var(--_animbezier); } } .mxd-projects-archive__tagslist { margin-bottom: 0.6rem; } .mxd-projects-archive__tagslist ul li p { color: var(--t-bright); } @media only screen and (min-width: 768px) { .mxd-projects-archive__tagslist { margin-bottom: 1rem; } } @media only screen and (min-width: 1200px) { .mxd-projects-archive__tagslist { margin-bottom: 0; } } .mxd-blog-pagination { position: relative; margin-top: 5rem; margin-bottom: 2.4rem; } @media only screen and (min-width: 1200px) { .mxd-blog-pagination { margin-bottom: 0; } } .mxd-blog-pagination__inner { position: relative; } .mxd-blog-pagination__items { position: relative; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -moz-box-pack: center; -ms-flex-pack: center; justify-content: center; gap: 1rem; font: normal var(--fw-medium) 1.8rem/3.3rem var(--_font-accent); } .blog-pagination-control { position: absolute; top: 0; } .blog-pagination-control .btn-caption { display: none !important; } .blog-pagination-control.prev { left: 0; } .blog-pagination-control.next { right: 0; } @media only screen and (min-width: 768px) { .blog-pagination-control .btn-caption { display: block !important; } } .blog-pagination-number { position: relative; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -moz-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 33px; height: 33px; font: normal var(--fw-regular) 1.8rem/3.3rem var(--_font-accent); color: var(--t-bright); } .blog-pagination-number.active { font-size: 3rem; font-weight: var(--fw-semibold); } .mxd-sidebar { position: relative; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -moz-box-orient: vertical; -moz-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 3rem; } .mxd-sidebar__widget { position: relative; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -moz-box-orient: vertical; -moz-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 3rem; padding: 3rem; } @media only screen and (min-width: 768px) { .mxd-sidebar__widget { padding: 4rem; } } .widget__title p { font: normal var(--fw-medium) 3rem/1.2 var(--_font-accent); color: var(--t-bright); } @media only screen and (min-width: 768px) { .widget__title p { font-size: 3.6rem; } } .widget__categories { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -moz-box-orient: vertical; -moz-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 0.3rem; } .categories__item { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; } .categories__link { font: normal var(--fw-regular) 2.2rem/1.6 var(--_font-accent); color: var(--t-bright); } .no-touch .categories__link:hover { color: var(--t-medium); } .widget__recent-posts { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -moz-box-orient: vertical; -moz-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 3rem; } .recent-post__item { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; gap: 2rem; } .recent-post__thumb { -ms-flex-preferred-size: 120px; flex-basis: 120px; -webkit-box-flex: 0; -moz-box-flex: 0; -ms-flex-positive: 0; flex-grow: 0; -ms-flex-negative: 0; flex-shrink: 0; height: 120px; -moz-border-radius: var(--_radius-s); border-radius: var(--_radius-s); overflow: hidden; } .recent-post__thumb a { display: block; } .recent-post__thumb img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; -webkit-filter: blur(0); filter: blur(0); -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); transform: scale(1); -webkit-transition: -webkit-filter var(--_animspeed-medium), -webkit-transform var(--_animspeed-medium) var(--_animbezier); transition: -webkit-filter var(--_animspeed-medium), -webkit-transform var(--_animspeed-medium) var(--_animbezier); -moz-transition: filter var(--_animspeed-medium), transform var(--_animspeed-medium) var(--_animbezier), -moz-transform var(--_animspeed-medium) var(--_animbezier); transition: filter var(--_animspeed-medium), transform var(--_animspeed-medium) var(--_animbezier); transition: filter var(--_animspeed-medium), transform var(--_animspeed-medium) var(--_animbezier), -webkit-filter var(--_animspeed-medium), -webkit-transform var(--_animspeed-medium) var(--_animbezier), -moz-transform var(--_animspeed-medium) var(--_animbezier); } .no-touch .recent-post__thumb:hover img { -webkit-filter: blur(3px); filter: blur(3px); -webkit-transform: scale(1.04); -moz-transform: scale(1.04); -ms-transform: scale(1.04); transform: scale(1.04); } .recent-post__content { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -moz-box-orient: vertical; -moz-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 1rem; } .recent-post__title { font: normal var(--fw-semibold) 1.8rem/1.4 var(--_font-accent); color: var(--t-bright); } .recent-post__title a { display: inline; color: var(--t-bright); text-decoration: none; background: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0))), -webkit-gradient(linear, left top, right top, from(var(--t-bright)), to(var(--t-bright))); background: -moz-linear-gradient(left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)), -moz-linear-gradient(left, var(--t-bright), var(--t-bright)); background: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)), linear-gradient(to right, var(--t-bright), var(--t-bright)); -moz-background-size: 100% 1px, 0 1px; background-size: 100% 1px, 0 1px; background-position: 100% 100%, 0 100%; background-repeat: no-repeat; -webkit-transition: background-size 300ms, color 300ms; -moz-transition: background-size 300ms, color 300ms, -moz-background-size 300ms; transition: background-size 300ms, color 300ms; transition: background-size 300ms, color 300ms, -moz-background-size 300ms; } .no-touch .recent-post__title a:hover { color: var(--t-bright); -moz-background-size: 0 1px, 100% 1px; background-size: 0 1px, 100% 1px; } .recent-post__meta { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; row-gap: 0.4rem; -webkit-column-gap: 1rem; -moz-column-gap: 1rem; column-gap: 1rem; color: var(--t-bright); } .recent-post__meta span { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; gap: 1rem; font: normal var(--fw-regular) 1.6rem/1.6 var(--_font-accent); } .recent-post__meta span a { color: var(--t-bright); } .recent-post__meta span svg { width: 1.3rem; height: 1.3rem; fill: currentColor; } .recent-post__meta span.meta-tag { font-weight: var(--fw-regular); } .no-touch .recent-post__meta span:hover a { color: var(--t-medium); } .widget__social-links-small { position: relative; } @media (hover) and (prefers-reduced-motion: no-preference) { .widget__social-links-small > .social-links-small__item { -webkit-transition: opacity 0.3s ease; -moz-transition: opacity 0.3s ease; transition: opacity 0.3s ease; } .widget__social-links-small:hover > .social-links-small__item:not(:hover) { opacity: 0.2; } } .social-links-small__item { position: relative; display: block; margin-top: -1px; } .social-links-small__item:first-of-type { margin-top: 0; } .social-links-small__divider { position: relative; width: 100%; height: 1px; background-color: var(--st-bright); } .social-links-small__link { position: relative; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -moz-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; padding: 1.5rem 0; overflow: hidden; } .no-touch .social-links-small__link:hover .social-links-small__title { -webkit-transform: translateX(1rem); -moz-transform: translateX(1rem); -ms-transform: translateX(1rem); transform: translateX(1rem); } .no-touch .social-links-small__link:hover .social-links-small__icon i::before { -webkit-animation: 0.6s var(--_animbezier) 0s 1 both slideRightUp; -moz-animation: 0.6s var(--_animbezier) 0s 1 both slideRightUp; animation: 0.6s var(--_animbezier) 0s 1 both slideRightUp; } .social-links-small__title { position: relative; font: normal var(--fw-medium) 1.8rem/1.2 var(--_font-accent); color: var(--t-bright); -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); -webkit-transition: color var(--_animspeed-medium) var(--_animbezier), -webkit-transform var(--_animspeed-medium); transition: color var(--_animspeed-medium) var(--_animbezier), -webkit-transform var(--_animspeed-medium); -moz-transition: transform var(--_animspeed-medium), color var(--_animspeed-medium) var(--_animbezier), -moz-transform var(--_animspeed-medium); transition: transform var(--_animspeed-medium), color var(--_animspeed-medium) var(--_animbezier); transition: transform var(--_animspeed-medium), color var(--_animspeed-medium) var(--_animbezier), -webkit-transform var(--_animspeed-medium), -moz-transform var(--_animspeed-medium); } .social-links-small__icon { position: relative; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; font-size: 1.8rem; -webkit-transform: translateX(0) rotate(0deg); -moz-transform: translateX(0) rotate(0deg); -ms-transform: translateX(0) rotate(0deg); transform: translateX(0) rotate(0deg); -webkit-transition: -webkit-transform var(--_animspeed-medium) var(--_animbezier); transition: -webkit-transform var(--_animspeed-medium) var(--_animbezier); -moz-transition: transform var(--_animspeed-medium) var(--_animbezier), -moz-transform var(--_animspeed-medium) var(--_animbezier); transition: transform var(--_animspeed-medium) var(--_animbezier); transition: transform var(--_animspeed-medium) var(--_animbezier), -webkit-transform var(--_animspeed-medium) var(--_animbezier), -moz-transform var(--_animspeed-medium) var(--_animbezier); } .social-links-small__icon i { display: -webkit-inline-box; display: -moz-inline-box; display: -ms-inline-flexbox; display: inline-flex; position: relative; overflow: hidden; color: var(--t-bright); -webkit-transition: color var(--_animspeed-medium) var(--_animbezier); -moz-transition: color var(--_animspeed-medium) var(--_animbezier); transition: color var(--_animspeed-medium) var(--_animbezier); } .widget-ad { position: relative; width: 100%; height: auto; padding: 0; overflow: hidden; } @media only screen and (min-width: 1200px) { .widget-ad { height: 460px; } } .widget__bgimage img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .widget__tags { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-pack: end; -moz-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; position: absolute; top: 0; left: 0; width: 100%; padding: 1rem; } /* ------------------------------------------------*/ /* Block - Blog End */ /* ------------------------------------------------*/ /* ------------------------------------------------*/ /* Block - Blog Article Start */ /* ------------------------------------------------*/ .mxd-article-area { position: relative; width: 100%; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -moz-box-orient: vertical; -moz-box-direction: normal; -ms-flex-direction: column; flex-direction: column; padding-top: 11.2rem; } @media only screen and (min-width: 768px) { .mxd-article-area { padding-top: 15.2rem; } } @media only screen and (min-width: 1200px) { .mxd-article-area { padding-top: 9.2rem; } } .mxd-article-container { position: relative; width: 100%; } .mxd-article { position: relative; width: 100%; } .mxd-article__headline { position: relative; width: 100%; text-align: center; margin-bottom: 7rem; } @media only screen and (min-width: 1200px) { .mxd-article__headline { max-width: 870px; margin: 0 auto 10rem; } } @media only screen and (min-width: 1600px) { .mxd-article__headline { max-width: 900px; } } .mxd-article__meta { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -moz-box-orient: vertical; -moz-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -moz-box-pack: center; -ms-flex-pack: center; justify-content: center; gap: 1rem; margin-bottom: 1.6rem; } @media only screen and (min-width: 1200px) { .mxd-article__meta { margin-bottom: 1.8rem; } } .mxd-article__breadcrumbs { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -moz-box-pack: center; -ms-flex-pack: center; justify-content: center; gap: 0.5rem; } .mxd-article__breadcrumbs span { font: normal var(--fw-regular) 1.8rem/1.2 var(--_font-accent); color: var(--t-muted); } .mxd-article__breadcrumbs span::after { content: "/"; display: -webkit-inline-box; display: -moz-inline-box; display: -ms-inline-flexbox; display: inline-flex; margin-left: 0.2rem; } .mxd-article__breadcrumbs span:last-of-type::after { display: none; } .mxd-article__breadcrumbs span a { display: inline; color: var(--t-muted); text-decoration: none; background: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0))), -webkit-gradient(linear, left top, right top, from(var(--t-muted)), to(var(--t-muted))); background: -moz-linear-gradient(left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)), -moz-linear-gradient(left, var(--t-muted), var(--t-muted)); background: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)), linear-gradient(to right, var(--t-muted), var(--t-muted)); -moz-background-size: 100% 1px, 0 1px; background-size: 100% 1px, 0 1px; background-position: 100% 100%, 0 100%; background-repeat: no-repeat; -webkit-transition: background-size 400ms, color 300ms; -moz-transition: background-size 400ms, color 300ms, -moz-background-size 400ms; transition: background-size 400ms, color 300ms; transition: background-size 400ms, color 300ms, -moz-background-size 400ms; } .no-touch .mxd-article__breadcrumbs span a:hover { color: var(--t-medium); -moz-background-size: 0 1px, 100% 1px; background-size: 0 1px, 100% 1px; } .mxd-article__breadcrumbs span.current-item { text-decoration: none; background: -webkit-gradient(linear, left top, right top, from(var(--t-muted)), to(var(--t-muted))); background: -moz-linear-gradient(left, var(--t-muted), var(--t-muted)); background: linear-gradient(to right, var(--t-muted), var(--t-muted)); -moz-background-size: 100% 1px, 0 1px; background-size: 100% 1px, 0 1px; background-position: 100% 100%; background-repeat: no-repeat; } .mxd-article__breadcrumbs span.current-item a { text-decoration: none; background: -webkit-gradient(linear, left top, right top, from(var(--t-muted)), to(var(--t-muted))), -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0))); background: -moz-linear-gradient(left, var(--t-muted), var(--t-muted)), -moz-linear-gradient(left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)); background: linear-gradient(to right, var(--t-muted), var(--t-muted)), linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)); -moz-background-size: 100% 1px, 0 1px; background-size: 100% 1px, 0 1px; background-position: 100% 100%, 0 100%; background-repeat: no-repeat; -webkit-transition: background-size 400ms, color 300ms; -moz-transition: background-size 400ms, color 300ms, -moz-background-size 400ms; transition: background-size 400ms, color 300ms; transition: background-size 400ms, color 300ms, -moz-background-size 400ms; } .no-touch .mxd-article__breadcrumbs span.current-item a:hover { color: var(--t-medium); -moz-background-size: 0 1px, 100% 1px; background-size: 0 1px, 100% 1px; } .mxd-article__data { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -moz-box-pack: center; -ms-flex-pack: center; justify-content: center; row-gap: 0.4rem; -webkit-column-gap: 1rem; -moz-column-gap: 1rem; column-gap: 1rem; color: var(--t-bright); } .mxd-article__data span { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; gap: 1rem; font: normal var(--fw-regular) 1.8rem/1.2 var(--_font-accent); } .mxd-article__data span a { color: var(--pt-t-light-bright); } .mxd-article__data span svg { width: 1.3rem; height: 1.3rem; fill: currentColor; } .mxd-article__data span.meta-tag { font-weight: var(--fw-semibold); } .mxd-article__data span.meta-time { font-weight: var(--fw-semibold); } .mxd-article__title { margin-bottom: 3.3rem; } .mxd-article__title h2 { font: normal var(--fw-medium) 6rem/1.1 var(--_font-accent); letter-spacing: -0.06rem; color: var(--t-bright); } @media only screen and (min-width: 768px) { .mxd-article__title h2 { font-size: 9rem; } } @media only screen and (min-width: 1200px) { .mxd-article__title { margin-bottom: 4.4rem; } .mxd-article__title h2 { font-size: 9rem; } } @media only screen and (min-width: 1400px) { .mxd-article__title h2 { font-size: 9rem; } } @media only screen and (min-width: 1600px) { .mxd-article__title h2 { font-size: 9rem; } } .mxd-article__tags { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -moz-box-pack: center; -ms-flex-pack: center; justify-content: center; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 1rem; } .mxd-article__thumb { position: relative; height: 460px; -moz-border-radius: var(--_radius-l); border-radius: var(--_radius-l); overflow: hidden; margin-bottom: 5.4rem; } .mxd-article__thumb img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } @media only screen and (min-width: 768px) { .mxd-article__thumb { height: 600px; } } @media only screen and (min-width: 1200px) { .mxd-article__thumb { height: 760px; margin-bottom: 8.3rem; } } @media only screen and (min-width: 1600px) { .mxd-article__thumb { height: 930px; margin-bottom: 8rem; } } .mxd-article__content { position: relative; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -moz-box-orient: vertical; -moz-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 6rem; width: 100%; text-align: left; } @media only screen and (min-width: 768px) { .mxd-article__content { gap: 7rem; } } @media only screen and (min-width: 1200px) { .mxd-article__content { max-width: 870px; margin: 0 auto; } } @media only screen and (min-width: 1600px) { .mxd-article__content { max-width: 900px; } } .mxd-article__block { position: relative; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -moz-box-orient: vertical; -moz-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 3rem; width: 100%; } .mxd-article__block.block-table-of-contents { background-color: var(--base-tint); -moz-border-radius: var(--_radius-m); border-radius: var(--_radius-m); padding: 3rem; } .mxd-article__block.block-quote { padding: 3rem 0; border-top: 1px solid var(--st-muted); border-bottom: 1px solid var(--st-muted); } .mxd-article__block.block-image { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -moz-box-orient: vertical; -moz-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 3rem; } @media only screen and (min-width: 768px) { .mxd-article__block.block-table-of-contents { padding: 4rem; } .mxd-article__block.block-image { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -moz-box-orient: horizontal; -moz-box-direction: normal; -ms-flex-direction: row; flex-direction: row; } } @media only screen and (min-width: 1200px) { .mxd-article__block.block-image { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -moz-box-orient: horizontal; -moz-box-direction: normal; -ms-flex-direction: row; flex-direction: row; } } .mxd-article__block h4 { font: normal var(--fw-medium) 2.6rem/1.2 var(--_font-accent); color: var(--t-bright); } @media only screen and (min-width: 768px) { .mxd-article__block h4 { font-size: 3.4rem; } } @media only screen and (min-width: 1200px) { .mxd-article__block h4 { font-size: 3.4rem; } } .mxd-article__secondary-title { font: normal var(--fw-medium) 3.6rem/1.2 var(--_font-accent); color: var(--t-bright); } .mxd-article__secondary-title.opposite { color: var(--t-opp-bright); } @media only screen and (min-width: 768px) { .mxd-article__secondary-title { font-size: 5rem; } } @media only screen and (min-width: 1600px) { .mxd-article__secondary-title { font-size: 5rem; } } .table-of-contents__title { font: normal var(--fw-medium) 3rem/1.2 var(--_font-accent); color: var(--t-bright); } @media only screen and (min-width: 768px) { .table-of-contents__title { font-size: 3.6rem; } } .table-of-contents__nav { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -moz-box-orient: vertical; -moz-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 0.3rem; } .table-of-contents__nav li { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; } .table-of-contents__nav li a { font: normal var(--fw-regular) 1.8rem/1.6 var(--_font-accent); color: var(--t-medium); } .no-touch .table-of-contents__nav li a:hover { color: var(--t-bright); } @media only screen and (min-width: 1600px) { .table-of-contents__nav li a { font-size: 2.2rem; } } .quote__text { font: normal var(--fw-regular) 3rem/1.2 var(--_font-accent); color: var(--t-bright); margin-bottom: 2rem; } @media only screen and (min-width: 768px) { .quote__text { font-size: 3.6rem; } } .quote__cite { font: normal var(--fw-regular) 1.8rem/1.6 var(--_font-accent); color: var(--t-medium); } @media only screen and (min-width: 1600px) { .quote__cite { font-size: 2.2rem; } } .mxd-article__content ol { list-style: decimal inside; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -moz-box-orient: vertical; -moz-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: start; -moz-box-align: start; -ms-flex-align: start; align-items: flex-start; gap: 1rem; } .mxd-article__content ol:not(:has(ol, ul)) { gap: 0; } .mxd-article__content ol li { font: normal var(--fw-regular) 1.8rem/1.6 var(--_font-accent); color: var(--t-medium); } .mxd-article__content ol li span { font-weight: var(--fw-semibold); color: var(--t-bright); } .mxd-article__content ol ul { gap: 0; -webkit-padding-start: 2.4rem; -moz-padding-start: 2.4rem; padding-inline-start: 2.4rem; margin-top: 1rem; } .mxd-article__content ul { list-style: disc inside; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -moz-box-orient: vertical; -moz-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: start; -moz-box-align: start; -ms-flex-align: start; align-items: flex-start; gap: 1rem; } .mxd-article__content ul:not(:has(ol, ul)) { gap: 0; } .mxd-article__content ul li { font: normal var(--fw-regular) 1.8rem/1.6 var(--_font-accent); color: var(--t-medium); } .mxd-article__content ul li span { font-weight: var(--fw-semibold); color: var(--t-bright); } .mxd-article__content ul ol, .mxd-article__content ul ul { gap: 0; -webkit-padding-start: 2.4rem; -moz-padding-start: 2.4rem; padding-inline-start: 2.4rem; margin-top: 1rem; } @media only screen and (min-width: 1600px) { .mxd-article__content ol li { font-size: 2.2rem; } .mxd-article__content ol ul { -webkit-padding-start: 2.8rem; -moz-padding-start: 2.8rem; padding-inline-start: 2.8rem; } .mxd-article__content ul li { font-size: 2.2rem; } .mxd-article__content ul ol, .mxd-article__content ul ul { -webkit-padding-start: 2.8rem; -moz-padding-start: 2.8rem; padding-inline-start: 2.8rem; } } .block-image__container { position: relative; -moz-border-radius: var(--_radius-m); border-radius: var(--_radius-m); overflow: hidden; } .block-image__tags { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-pack: end; -moz-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; position: absolute; top: 0; left: 0; width: 100%; padding: 1rem; } .mxd-article-author { position: relative; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -moz-box-orient: vertical; -moz-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 3rem; width: 100%; background-color: var(--base-tint); -moz-border-radius: var(--_radius-m); border-radius: var(--_radius-m); padding: 3rem; margin-top: 6rem; } @media only screen and (min-width: 768px) { .mxd-article-author { padding: 4rem; margin-top: 7rem; } } @media only screen and (min-width: 1200px) { .mxd-article-author { max-width: 870px; margin: 7rem auto 0; } } @media only screen and (min-width: 1600px) { .mxd-article-author { max-width: 900px; } } .mxd-article-author__data { position: relative; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -moz-box-orient: vertical; -moz-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: start; -moz-box-align: start; -ms-flex-align: start; align-items: flex-start; gap: 1.8rem; } @media only screen and (min-width: 768px) { .mxd-article-author__data { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -moz-box-orient: horizontal; -moz-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-align: stretch; -moz-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; gap: 3rem; } } .mxd-article-author__avatar { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -ms-flex-preferred-size: 100px; flex-basis: 100px; -webkit-box-flex: 0; -moz-box-flex: 0; -ms-flex-positive: 0; flex-grow: 0; -ms-flex-negative: 0; flex-shrink: 0; width: 10rem; height: 10rem; -moz-border-radius: var(--_radius-pt-m); border-radius: var(--_radius-pt-m); overflow: hidden; } .mxd-article-author__avatar img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } @media only screen and (min-width: 768px) { .mxd-article-author__avatar { -ms-flex-preferred-size: 120px; flex-basis: 120px; height: 12rem; } } .mxd-article-author__info { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -moz-box-orient: vertical; -moz-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .mxd-article-author__name { font: normal var(--fw-medium) 2.6rem/1.2 var(--_font-accent); color: var(--t-bright); } .mxd-article-author__name small { display: block; font: normal var(--fw-regular) 1.6rem/1.2 var(--_font-accent); color: var(--t-medium); margin-top: 0.2rem; } .mxd-article-author__name a { color: var(--t-bright); } .mxd-article-author__name.opposite { color: var(--t-opp-bright); } .mxd-article-author__name.opposite a { color: var(--t-opp-bright); } .mxd-article-author__name a { display: -webkit-inline-box; display: -moz-inline-box; display: -ms-inline-flexbox; display: inline-flex; } @media only screen and (min-width: 768px) { .mxd-article-author__name { font-size: 3.4rem; } } @media only screen and (min-width: 1200px) { .mxd-article-author__name { font-size: 3.4rem; } } @media only screen and (min-width: 1600px) { .mxd-article-author__name small { font-size: 1.8rem; } } .mxd-article-author__position { line-height: 1.4; } .mxd-article-author__socials { position: relative; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -moz-box-orient: horizontal; -moz-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-align: start; -moz-box-align: start; -ms-flex-align: start; align-items: flex-start; -ms-flex-wrap: wrap; flex-wrap: wrap; row-gap: 0.4rem; -webkit-column-gap: 1rem; -moz-column-gap: 1rem; column-gap: 1rem; margin-top: 2.2rem; } .mxd-article-navigation { position: relative; margin-top: 6rem; padding-bottom: 3rem; border-bottom: 1px solid var(--st-muted); } @media only screen and (min-width: 768px) { .mxd-article-navigation { margin-top: 7rem; } } @media only screen and (min-width: 1200px) { .mxd-article-navigation { max-width: 870px; margin: 7rem auto 0; } } @media only screen and (min-width: 1600px) { .mxd-article-navigation { max-width: 900px; } } .mxd-article-navigation__navitem { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -moz-box-orient: vertical; -moz-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .mxd-article-navigation__navitem.left { -webkit-box-align: start; -moz-box-align: start; -ms-flex-align: start; align-items: flex-start; padding-right: 1.5rem; } .mxd-article-navigation__navitem.right { -webkit-box-align: end; -moz-box-align: end; -ms-flex-align: end; align-items: flex-end; padding-left: 1.5rem; text-align: right; } .mxd-article-navigation__link { display: block; font: normal var(--fw-medium) 2.2rem/1.2 var(--_font-accent); color: var(--t-bright); margin-top: 0.5rem; } .mxd-article-navigation__link span { text-decoration: none; background: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0))), -webkit-gradient(linear, left top, right top, from(var(--t-bright)), to(var(--t-bright))); background: -moz-linear-gradient(left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)), -moz-linear-gradient(left, var(--t-bright), var(--t-bright)); background: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)), linear-gradient(to right, var(--t-bright), var(--t-bright)); -moz-background-size: 100% 1px, 0 1px; background-size: 100% 1px, 0 1px; background-position: 100% 100%, 0 100%; background-repeat: no-repeat; -webkit-transition: background-size 300ms, color 300ms; -moz-transition: background-size 300ms, color 300ms, -moz-background-size 300ms; transition: background-size 300ms, color 300ms; transition: background-size 300ms, color 300ms, -moz-background-size 300ms; } .no-touch .mxd-article-navigation__link span:hover { color: var(--t-bright); -moz-background-size: 0 1px, 100% 1px; background-size: 0 1px, 100% 1px; } .mxd-article-comments { position: relative; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -moz-box-orient: vertical; -moz-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 6rem; width: 100%; margin-top: 6rem; } @media only screen and (min-width: 768px) { .mxd-article-comments { gap: 7rem; margin-top: 7rem; } } @media only screen and (min-width: 1200px) { .mxd-article-comments { max-width: 870px; margin: 7rem auto 0; } } @media only screen and (min-width: 1600px) { .mxd-article-comments { max-width: 900px; } } .mxd-article-comments__container, .mxd-article-comments__respond { position: relative; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -moz-box-orient: vertical; -moz-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 3rem; } .mxd-article-comments__list { position: relative; width: 100%; } .mxd-article-comments__list ul { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -moz-box-orient: vertical; -moz-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .mxd-comment { margin-top: -1px; border-top: 1px solid var(--st-muted); } .mxd-comment:last-of-type { border-bottom: 1px solid var(--st-muted); } .mxd-comment__children { padding-left: 3rem; } @media only screen and (min-width: 768px) { .mxd-comment__children { padding-left: 13rem; } } .mxd-comment__container { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -moz-box-orient: vertical; -moz-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 1.5rem; padding: 3rem 0; } @media only screen and (min-width: 768px) { .mxd-comment__container { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -moz-box-orient: horizontal; -moz-box-direction: normal; -ms-flex-direction: row; flex-direction: row; gap: 3rem; } } .mxd-comment__avatar { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -ms-flex-preferred-size: 100px; flex-basis: 100px; -webkit-box-flex: 0; -moz-box-flex: 0; -ms-flex-positive: 0; flex-grow: 0; -ms-flex-negative: 0; flex-shrink: 0; width: 10rem; height: 10rem; -moz-border-radius: var(--_radius-pt-m); border-radius: var(--_radius-pt-m); overflow: hidden; margin-bottom: 0.6rem; } .mxd-comment__avatar img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } @media only screen and (min-width: 768px) { .mxd-comment__avatar { margin-bottom: 0; } } .mxd-comment__content { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -moz-box-orient: vertical; -moz-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 1.4rem; } @media only screen and (min-width: 1200px) { .mxd-comment__content { gap: 1.3rem; } } .mxd-comment__info { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -moz-box-orient: vertical; -moz-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 0.2rem; } .mxd-comment__name { font: normal var(--fw-medium) 2.2rem/1.2 var(--_font-accent); color: var(--t-bright); } .mxd-comment__name a { color: var(--t-bright); background: none; } .mxd-comment__name.opposite { color: var(--t-opp-bright); } .mxd-comment__name.opposite a { color: var(--t-opp-bright); } @media only screen and (min-width: 1200px) { .mxd-comment__name { font-size: 3rem; } } .mxd-comment__reply { margin-top: 0.9rem; } /* ------------------------------------------------*/ /* Block - Blog Article End */ /* ------------------------------------------------*/ /* ------------------------------------------------*/ /* Block - 404 Error Start */ /* ------------------------------------------------*/ .mxd-error { position: relative; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -moz-box-orient: vertical; -moz-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: justify; -moz-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; height: 100%; overflow: hidden; padding: 2rem 0 3rem 0; } @media only screen and (min-width: 768px) { .mxd-error { padding: 3rem 0 4rem 0; } } .mxd-error__descr, .mxd-error__controls { position: relative; z-index: 1; } @media only screen and (min-width: 1200px) { .marquee-error { margin-top: -4rem; } } /* ------------------------------------------------*/ /* Block - 404 Error End */ /* ------------------------------------------------*/ /* ------------------------------------------------*/ /* Block - Demo List Start */ /* ------------------------------------------------*/ .mxd-demo-list { position: relative; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -moz-box-orient: vertical; -moz-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 3rem; padding-top: 12.9rem; } @media only screen and (min-width: 768px) { .mxd-demo-list { gap: 6rem; padding-top: 14.5rem; } } @media only screen and (min-width: 1600px) { .mxd-demo-list { padding-top: 18.2rem; } } .mxd-demo-list__row { position: relative; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -moz-box-orient: vertical; -moz-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 3rem; } @media only screen and (min-width: 768px) { .mxd-demo-list__row { gap: 6rem; } } @media only screen and (min-width: 1200px) { .mxd-demo-list__row { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -moz-box-orient: horizontal; -moz-box-direction: normal; -ms-flex-direction: row; flex-direction: row; } } .mxd-demo-list__item { position: relative; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -moz-box-orient: vertical; -moz-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 1rem; padding: 1rem; background-color: var(--base-tint); -moz-border-radius: var(--_radius-m); border-radius: var(--_radius-m); border: 1px solid var(--st-muted); -webkit-box-shadow: 0 6px 14px rgba(7, 1, 23, 0), 4px 10px 38px rgba(13, 2, 46, 0); -moz-box-shadow: 0 6px 14px rgba(7, 1, 23, 0), 4px 10px 38px rgba(13, 2, 46, 0); box-shadow: 0 6px 14px rgba(7, 1, 23, 0), 4px 10px 38px rgba(13, 2, 46, 0); -webkit-transition: -webkit-box-shadow var(--_animspeed-medium) var(--_animbezier); transition: -webkit-box-shadow var(--_animspeed-medium) var(--_animbezier); -moz-transition: box-shadow var(--_animspeed-medium) var(--_animbezier), -moz-box-shadow var(--_animspeed-medium) var(--_animbezier); transition: box-shadow var(--_animspeed-medium) var(--_animbezier); transition: box-shadow var(--_animspeed-medium) var(--_animbezier), -webkit-box-shadow var(--_animspeed-medium) var(--_animbezier), -moz-box-shadow var(--_animspeed-medium) var(--_animbezier); } .no-touch .mxd-demo-list__item:hover { -webkit-box-shadow: 0 14px 28px rgba(var(--accent-rgb), 0.25), 0 10px 10px rgba(var(--accent-rgb), 0.12); -moz-box-shadow: 0 14px 28px rgba(var(--accent-rgb), 0.25), 0 10px 10px rgba(var(--accent-rgb), 0.12); box-shadow: 0 14px 28px rgba(var(--accent-rgb), 0.25), 0 10px 10px rgba(var(--accent-rgb), 0.12); } .no-touch .mxd-demo-list__item:hover .mxd-demo-list__screen { -webkit-transform: scale(1.014); -moz-transform: scale(1.014); -ms-transform: scale(1.014); transform: scale(1.014); } .mxd-demo-list__item.empty-item { padding: 5.6rem 3.1rem; border: 1px solid var(--base-tint); } .no-touch .mxd-demo-list__item.empty-item:hover { -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } .mxd-demo-list__item.item-accent { background-color: var(--accent); border: 1px solid var(--accent); } @media only screen and (min-width: 768px) { .mxd-demo-list__item.empty-item { padding: 5.6rem; } } @media only screen and (min-width: 1200px) { .mxd-demo-list__item.empty-item { padding: 3rem; } } .empty-item__wrap { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -moz-box-pack: center; -ms-flex-pack: center; justify-content: center; text-align: center; } @media only screen and (min-width: 1200px) { .empty-item__wrap { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -moz-box-pack: center; -ms-flex-pack: center; justify-content: center; text-align: center; } } .empty-item__logo { position: relative; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -moz-box-pack: center; -ms-flex-pack: center; justify-content: center; text-align: center; } .empty-item__logo svg { display: -webkit-inline-box; display: -moz-inline-box; display: -ms-inline-flexbox; display: inline-flex; width: 8rem; height: 8rem; } .empty-item__caption { font: normal var(--fw-medium) 1.8rem/1.2 var(--_font-accent); color: var(--t-medium); padding-top: 1.1rem; } @media only screen and (min-width: 768px) { .empty-item__caption { font-size: 2.2rem; padding-top: 2.6rem; } } @media only screen and (min-width: 1200px) { .empty-item__caption { font-size: 1.8rem; } } @media only screen and (min-width: 1600px) { .empty-item__caption { font-size: 2.2rem; } } .mxd-demo-list__image { position: relative; display: block; overflow: hidden; -moz-border-radius: 1rem; border-radius: 1rem; } .mxd-demo-list__image.image-placeholder { display: none; } .mxd-demo-list__image img { opacity: 0; } @media only screen and (min-width: 768px) { .mxd-demo-list__image { -moz-border-radius: 2rem; border-radius: 2rem; } } @media only screen and (min-width: 1200px) { .mxd-demo-list__image.image-placeholder { display: block; } } .mxd-demo-list__screen { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-repeat: no-repeat; background-position: center; -moz-background-size: cover; background-size: cover; -webkit-transition: -webkit-transform var(--_animspeed-medium) var(--_animbezier); transition: -webkit-transform var(--_animspeed-medium) var(--_animbezier); -moz-transition: transform var(--_animspeed-medium) var(--_animbezier), -moz-transform var(--_animspeed-medium) var(--_animbezier); transition: transform var(--_animspeed-medium) var(--_animbezier); transition: transform var(--_animspeed-medium) var(--_animbezier), -webkit-transform var(--_animspeed-medium) var(--_animbezier), -moz-transform var(--_animspeed-medium) var(--_animbezier); } .mxd-demo-list__screen.screen-01 { background-image: var(--bg-demo-screen-01); } .mxd-demo-list__screen.screen-02 { background-image: var(--bg-demo-screen-02); } .mxd-demo-list__screen.screen-03 { background-image: var(--bg-demo-screen-03); } .mxd-demo-list__screen.screen-04 { background-image: var(--bg-demo-screen-04); } .mxd-demo-list__screen.screen-05 { background-image: var(--bg-demo-screen-05); } .mxd-demo-list__screen.screen-06 { background-image: var(--bg-demo-screen-06); } .mxd-demo-list__screen.screen-07 { background-image: var(--bg-demo-screen-07); } .mxd-demo-list__screen.screen-08 { background-image: var(--bg-demo-screen-08); } .mxd-demo-list__screen.screen-09 { background-image: var(--bg-demo-screen-09); } .mxd-demo-list__caption { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -moz-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; padding: 1rem; } @media only screen and (min-width: 768px) { .mxd-demo-list__caption { padding: 1rem 1.6rem; } } .mxd-demo-list__link { font: normal var(--fw-medium) 1.8rem/1.4 var(--_font-accent); color: var(--t-bright); } .mxd-demo-list__link.opposite { color: var(--t-opp-bright); } @media only screen and (min-width: 768px) { .mxd-demo-list__link { font-size: 2.2rem; } } @media only screen and (min-width: 1200px) { .mxd-demo-list__link.small { font-size: 1.8rem; } } @media only screen and (min-width: 1600px) { .mxd-demo-list__link { font-size: 3rem; } .mxd-demo-list__link.small { font-size: 2.2rem; } } .mxd-demo-list__num { font: normal var(--fw-medium) 1.8rem/1.4 var(--_font-accent); color: var(--accent); } .mxd-demo-list__num.opposite { color: var(--t-opp-bright); } @media only screen and (min-width: 768px) { .mxd-demo-list__num { font-size: 2.2rem; } } @media only screen and (min-width: 1200px) { .mxd-demo-list__num.small { font-size: 1.8rem; } } @media only screen and (min-width: 1600px) { .mxd-demo-list__num { font-size: 3rem; } .mxd-demo-list__num.small { font-size: 2.2rem; } } /* ------------------------------------------------*/ /* Block - Demo List End */ /* ------------------------------------------------*/ /* ------------------------------------------------*/ /* Block - Demo Cards Start */ /* ------------------------------------------------*/ .mxd-demo-cards { position: relative; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -moz-box-orient: vertical; -moz-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 3rem; } @media only screen and (min-width: 1200px) { .mxd-demo-cards { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -moz-box-orient: horizontal; -moz-box-direction: normal; -ms-flex-direction: row; flex-direction: row; gap: 6rem; } } .mxd-demo-cards__item { position: relative; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -moz-box-orient: vertical; -moz-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: justify; -moz-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; gap: 5rem; background-color: var(--base-tint); -moz-border-radius: var(--_radius-l); border-radius: var(--_radius-l); overflow: hidden; margin-top: 3rem; } .mxd-demo-cards__item.card-item-left { padding-top: 4rem; } .mxd-demo-cards__item.card-item-right { padding-bottom: 4rem; } @media only screen and (min-width: 768px) { .mxd-demo-cards__item { gap: 5rem; } .mxd-demo-cards__item.card-item-left { padding-top: 6rem; } .mxd-demo-cards__item.card-item-right { padding-bottom: 6rem; } } @media only screen and (min-width: 1200px) { .mxd-demo-cards__item { -webkit-box-pack: justify; -moz-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; gap: 6rem; width: -moz-calc(50% - 3rem); width: calc(50% - 3rem); height: 760px; } .mxd-demo-cards__item.card-item-left, .mxd-demo-cards__item.card-item-right { -webkit-box-pack: justify; -moz-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } } @media only screen and (min-width: 1600px) { .mxd-demo-cards__item { height: 930px; } .mxd-demo-cards__item.card-item-left { padding-top: 8rem; } .mxd-demo-cards__item.card-item-right { padding-bottom: 8rem; } } .mxd-demo-card__gradient { position: absolute; top: -50%; left: 50%; right: auto; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); width: 600px; height: 600px; z-index: 0; } .mxd-demo-card__gradient svg { width: 100%; height: 100%; } @media only screen and (min-width: 768px) { .mxd-demo-card__gradient { width: 800px; height: 800px; } } @media only screen and (min-width: 1600px) { .mxd-demo-card__gradient { width: 1000px; height: 1000px; } } .mxd-demo-cards__image { position: relative; margin: 0 auto; } .mxd-demo-cards__image.card-image-padding { padding: 0 3rem; } @media only screen and (min-width: 768px) { .mxd-demo-cards__image.card-image-padding { padding: 0 6rem; } } @media only screen and (min-width: 1200px) { .mxd-demo-cards__image.card-image-fullwidth { max-height: none; } .mxd-demo-cards__image.card-image-padding { max-width: 610px; } } @media only screen and (min-width: 1600px) { .mxd-demo-cards__image.card-image-padding { padding: 0 8rem; max-width: none; } } .mxd-demo-cards__content { position: relative; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -moz-box-orient: vertical; -moz-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 5rem; text-align: center; padding: 0 3rem; } @media only screen and (min-width: 768px) { .mxd-demo-cards__content { gap: 5rem; padding: 0 6rem; } } @media only screen and (min-width: 1200px) { .mxd-demo-cards__content { gap: 6rem; } } @media only screen and (min-width: 1600px) { .mxd-demo-cards__content { gap: 6.8rem; padding: 0 8rem; } } .mxd-demo-cards__descr p { max-width: 420px; margin: 0 auto; } @media only screen and (min-width: 1600px) { .mxd-demo-cards__descr p { max-width: 600px; } } .mxd-demo-cards__title { margin-bottom: 3rem; } .mxd-demo-cards__title a { color: var(--t-bright); } .no-touch .mxd-demo-cards__title a:hover { color: var(--accent); } .mxd-demo-cards__tags { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 1rem; -webkit-box-pack: center; -moz-box-pack: center; -ms-flex-pack: center; justify-content: center; margin-bottom: 2.8rem; } .mxd-demo-cards__icons { position: relative; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -moz-box-pack: center; -ms-flex-pack: center; justify-content: center; row-gap: 3rem; -webkit-column-gap: 1.5rem; -moz-column-gap: 1.5rem; column-gap: 1.5rem; -ms-flex-wrap: wrap; flex-wrap: wrap; } .mxd-demo-cards__icons.justify-start-desktop { -webkit-box-pack: center; -moz-box-pack: center; -ms-flex-pack: center; justify-content: center; } @media only screen and (min-width: 768px) { .mxd-demo-cards__icons { gap: 3rem; -ms-flex-wrap: nowrap; flex-wrap: nowrap; } } @media only screen and (min-width: 1200px) { .mxd-demo-cards__icons.justify-start-desktop { -webkit-box-pack: start; -moz-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; } } .demo-icons__item { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -moz-box-orient: vertical; -moz-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; gap: 1.2rem; -ms-flex-preferred-size: 7rem; flex-basis: 7rem; -webkit-box-flex: 0; -moz-box-flex: 0; -ms-flex-positive: 0; flex-grow: 0; -ms-flex-negative: 0; flex-shrink: 0; text-align: center; } @media only screen and (min-width: 768px) { .demo-icons__item { -ms-flex-preferred-size: 8.4rem; flex-basis: 8.4rem; max-width: 8.4rem; } } @media only screen and (min-width: 1200px) { .demo-icons__item { -ms-flex-preferred-size: 6.4rem; flex-basis: 6.4rem; max-width: 6.4rem; } } @media only screen and (min-width: 1400px) { .demo-icons__item { -ms-flex-preferred-size: 7.8rem; flex-basis: 7.8rem; max-width: 7.8rem; } } @media only screen and (min-width: 1600px) { .demo-icons__item { -ms-flex-preferred-size: 8.4rem; flex-basis: 8.4rem; max-width: 8.4rem; } } .demo-icons__icon { position: relative; width: 7rem; height: 7rem; } .demo-icons__icon svg { display: block; width: 100%; height: auto; } .demo-icons__icon svg path { fill: var(--accent); stroke: var(--accent); stroke-width: 1px; stroke-linecap: round; stroke-linejoin: round; } .demo-icons__icon i { display: block; position: absolute; left: 50%; top: 50%; bottom: auto; right: auto; -webkit-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); font-size: 3rem; color: var(--t-opp-bright); } .demo-icons__icon.transparent svg path { fill: none; stroke: var(--st-medium); } .demo-icons__icon.transparent i { color: var(--t-muted); } @media only screen and (min-width: 768px) { .demo-icons__icon { width: 100%; height: auto; } .demo-icons__icon i { font-size: 3.7rem; } } .demo-icons__caption { font: normal var(--fw-regular) 1.4rem/1.2 var(--_font-accent); color: var(--t-bright); } @media only screen and (min-width: 1600px) { .demo-icons__caption { font-size: 1.6rem; white-space: nowrap; } } /* ------------------------------------------------*/ /* Block - Demo Cards End */ /* ------------------------------------------------*/ /* ------------------------------------------------*/ /* Block - Demo Responsive Promo Start */ /* ------------------------------------------------*/ .mxd-resp-promo, .mxd-resp-promo__item { position: relative; } .mxd-resp-promo { padding-top: 12.3rem; padding-bottom: 9.6rem; } @media only screen and (min-width: 768px) { .mxd-resp-promo { padding-top: 14rem; padding-bottom: 8.4rem; } } @media only screen and (min-width: 1600px) { .mxd-resp-promo { padding-top: 20rem; padding-bottom: 11.7rem; } } @media only screen and (min-width: 1200px) { .mxd-resp-promo__item { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -moz-box-orient: vertical; -moz-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -moz-box-pack: center; -ms-flex-pack: center; justify-content: center; } } .mxd-resp-promo__content { margin-bottom: 5.6rem; } @media only screen and (min-width: 768px) { .mxd-resp-promo__content { max-width: 800px; margin: 0 auto 5.6rem; } } @media only screen and (min-width: 1200px) { .mxd-resp-promo__content { max-width: 700px; margin: 0; padding-bottom: 1.7rem; } } @media only screen and (min-width: 1600px) { .mxd-resp-promo__content { padding-bottom: 5rem; } } .mxd-resp-promo__manifest { margin-bottom: 4.6rem; text-align: center; } .mxd-resp-promo__manifest p { font: normal var(--fw-regular) 2.8rem/1.6 var(--_font-accent); color: var(--t-bright); } @media only screen and (min-width: 768px) { .mxd-resp-promo__manifest p { font-size: 3.2rem; } } @media only screen and (min-width: 1200px) { .mxd-resp-promo__manifest { margin-bottom: 5.6rem; text-align: left; } } @media only screen and (min-width: 1600px) { .mxd-resp-promo__manifest { margin-bottom: 6.2rem; } .mxd-resp-promo__manifest p { font-size: 4rem; } } .mxd-resp-promo__image { padding-left: 3rem; } @media only screen and (min-width: 768px) { .mxd-resp-promo__image { padding-left: 6rem; } } @media only screen and (min-width: 1200px) { .mxd-resp-promo__image { padding-left: 0; } } /* ------------------------------------------------*/ /* Block - Demo Responsive Promo End */ /* ------------------------------------------------*/ /* ------------------------------------------------*/ /* Block - Demo Inner Pages Slider Start */ /* ------------------------------------------------*/ .mxd-demo-swiper { margin-left: auto; margin-right: auto; position: relative; overflow: hidden; overflow: clip; list-style: none; padding: 0; z-index: 1; display: block; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; overflow: hidden; width: 100%; height: auto; padding: 0; } .no-touch .mxd-demo-swiper .swiper-slide-active:hover .demo-swiper-slide__image { -webkit-box-shadow: 0 14px 28px rgba(var(--accent-rgb), 0.25), 0 10px 10px rgba(var(--accent-rgb), 0.12); -moz-box-shadow: 0 14px 28px rgba(var(--accent-rgb), 0.25), 0 10px 10px rgba(var(--accent-rgb), 0.12); box-shadow: 0 14px 28px rgba(var(--accent-rgb), 0.25), 0 10px 10px rgba(var(--accent-rgb), 0.12); } .mxd-demo-swiper .swiper-slide-next, .mxd-demo-swiper .swiper-slide-prev { -webkit-transform: scale(0.96); -moz-transform: scale(0.96); -ms-transform: scale(0.96); transform: scale(0.96); -webkit-transition: -webkit-transform var(--_animspeed-medium) var(--_animbezier); transition: -webkit-transform var(--_animspeed-medium) var(--_animbezier); -moz-transition: transform var(--_animspeed-medium) var(--_animbezier), -moz-transform var(--_animspeed-medium) var(--_animbezier); transition: transform var(--_animspeed-medium) var(--_animbezier); transition: transform var(--_animspeed-medium) var(--_animbezier), -webkit-transform var(--_animspeed-medium) var(--_animbezier), -moz-transform var(--_animspeed-medium) var(--_animbezier); } .mxd-demo-swiper__slide { position: relative; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -moz-box-orient: vertical; -moz-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: start; -moz-box-align: start; -ms-flex-align: start; align-items: flex-start; -webkit-box-pack: justify; -moz-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; width: 100%; height: auto; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .demo-swiper-slide__image { padding: 1rem; background-color: var(--base-tint); -moz-border-radius: var(--_radius-m); border-radius: var(--_radius-m); border: 1px solid var(--st-muted); -webkit-box-shadow: 0 6px 14px rgba(7, 1, 23, 0), 4px 10px 38px rgba(13, 2, 46, 0); -moz-box-shadow: 0 6px 14px rgba(7, 1, 23, 0), 4px 10px 38px rgba(13, 2, 46, 0); box-shadow: 0 6px 14px rgba(7, 1, 23, 0), 4px 10px 38px rgba(13, 2, 46, 0); -webkit-transition: -webkit-box-shadow var(--_animspeed-medium) var(--_animbezier); transition: -webkit-box-shadow var(--_animspeed-medium) var(--_animbezier); -moz-transition: box-shadow var(--_animspeed-medium) var(--_animbezier), -moz-box-shadow var(--_animspeed-medium) var(--_animbezier); transition: box-shadow var(--_animspeed-medium) var(--_animbezier); transition: box-shadow var(--_animspeed-medium) var(--_animbezier), -webkit-box-shadow var(--_animspeed-medium) var(--_animbezier), -moz-box-shadow var(--_animspeed-medium) var(--_animbezier); } .demo-swiper-slide__image img { -moz-border-radius: 1rem; border-radius: 1rem; } @media only screen and (min-width: 768px) { .demo-swiper-slide__image img { -moz-border-radius: 2rem; border-radius: 2rem; } } .demo-swiper-slide__descr { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -moz-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 100%; text-align: center; overflow: hidden; margin-top: 3rem; } .demo-swiper-slide__descr a { display: -webkit-inline-box; display: -moz-inline-box; display: -ms-inline-flexbox; display: inline-flex; font: normal var(--fw-medium) 2.2rem/4rem var(--_font-accent); color: var(--t-bright); } .demo-swiper-slide__descr a span { text-decoration: none; background: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0))), -webkit-gradient(linear, left top, right top, from(var(--t-bright)), to(var(--t-bright))); background: -moz-linear-gradient(left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)), -moz-linear-gradient(left, var(--t-bright), var(--t-bright)); background: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)), linear-gradient(to right, var(--t-bright), var(--t-bright)); -moz-background-size: 100% 1px, 0 1px; background-size: 100% 1px, 0 1px; background-position: 100% 100%, 0 100%; background-repeat: no-repeat; -webkit-transition: background-size 300ms, color 300ms; -moz-transition: background-size 300ms, color 300ms, -moz-background-size 300ms; transition: background-size 300ms, color 300ms; transition: background-size 300ms, color 300ms, -moz-background-size 300ms; } .no-touch .demo-swiper-slide__descr a span:hover { color: var(--t-bright); -moz-background-size: 0 1px, 100% 1px; background-size: 0 1px, 100% 1px; } @media only screen and (min-width: 768px) { .demo-swiper-slide__descr a { font-size: 2.5rem; } } @media only screen and (min-width: 1600px) { .demo-swiper-slide__descr a { font-size: 3.6rem; } } /* ------------------------------------------------*/ /* Block - Demo Inner Pages Slider End */ /* ------------------------------------------------*/ /* ------------------------------------------------*/ /* Block - Demo Components Start */ /* ------------------------------------------------*/ .mxd-demo-components { position: relative; padding-top: 6.5rem; padding-bottom: 8rem; } @media only screen and (min-width: 768px) { .mxd-demo-components { padding-top: 5.6rem; padding-bottom: 7.7rem; } } @media only screen and (min-width: 1600px) { .mxd-demo-components { padding-top: 6.8rem; padding-bottom: 9.1rem; } } .mxd-demo-components__title { position: relative; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -moz-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; text-align: center; } .mxd-demo-components__title span { font: normal var(--fw-medium) 5rem/1.1 var(--_font-accent); letter-spacing: -0.06rem; color: var(--t-bright); } @media only screen and (min-width: 768px) { .mxd-demo-components__title span { font-size: 8rem; } } @media only screen and (min-width: 1600px) { .mxd-demo-components__title span { font-size: 10rem; } } .mxd-demo-components__objects { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; } .mxd-demo-components__object { position: absolute; height: auto; } .mxd-demo-components__object.obj-01 { top: -110px; right: 60px; width: 140px; } .mxd-demo-components__object.obj-02 { bottom: 0; right: 0; width: 80px; } .mxd-demo-components__object.obj-03 { bottom: -140px; left: 0; width: 200px; } @media only screen and (min-width: 768px) { .mxd-demo-components__object.obj-01 { top: -120px; right: 60px; width: 150px; } .mxd-demo-components__object.obj-02 { bottom: 0; right: 0; width: 80px; } .mxd-demo-components__object.obj-03 { bottom: -140px; left: 0; width: 220px; } } @media only screen and (min-width: 1200px) { .mxd-demo-components__object.obj-01 { top: -180px; right: 80px; width: 270px; } .mxd-demo-components__object.obj-02 { bottom: 1rem; right: 0; width: 120px; } .mxd-demo-components__object.obj-03 { bottom: -200px; left: 10px; width: 340px; } } @media only screen and (min-width: 1600px) { .mxd-demo-components__object.obj-01 { top: -220px; right: 100px; width: 360px; } .mxd-demo-components__object.obj-02 { bottom: 3rem; right: 0; width: 160px; } .mxd-demo-components__object.obj-03 { bottom: -270px; left: 10px; width: 460px; } } /* ------------------------------------------------*/ /* Block - Demo Components End */ /* ------------------------------------------------*/ /* ------------------------------------------------*/ /* Block - Demo Features Start */ /* ------------------------------------------------*/ .mxd-features-promo, .mxd-features-promo__item { position: relative; } .mxd-features-promo { padding-top: 9rem; padding-bottom: 10.8rem; } @media only screen and (min-width: 768px) { .mxd-features-promo { padding-top: 10.9rem; padding-bottom: 12.5rem; } } @media only screen and (min-width: 1200px) { .mxd-features-promo { padding-top: 12.8rem; } } @media only screen and (min-width: 1600px) { .mxd-features-promo { padding-top: 17rem; padding-bottom: 16.4rem; } } @media only screen and (min-width: 1200px) { .mxd-features-promo__item { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -moz-box-orient: vertical; -moz-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -moz-box-pack: center; -ms-flex-pack: center; justify-content: center; } } .mxd-features-promo__content { margin-bottom: 5rem; text-align: center; } @media only screen and (min-width: 768px) { .mxd-features-promo__content { max-width: 600px; margin: 0 auto 5rem; } } @media only screen and (min-width: 1200px) { .mxd-features-promo__content { max-width: 700px; margin: 0; padding-bottom: 1.7rem; text-align: left; } } @media only screen and (min-width: 1600px) { .mxd-features-promo__content { padding-bottom: 3.2rem; } } .mxd-features-promo__image { padding-left: 0; } .mxd-features-cards, .mxd-features-cards-s { position: relative; } .mxd-features-cards-s { margin-top: 2.7rem; } @media only screen and (min-width: 1600px) { .mxd-features-cards-s { margin-top: 6.6rem; } } .mxd-features-cards__teaser { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -moz-box-pack: center; -ms-flex-pack: center; justify-content: center; padding-top: 0.2rem; color: var(--t-muted); } .mxd-features-cards__teaser.teaser-wp { padding-top: 2.7rem; } .mxd-features-cards__teaser .mxd-point-subtitle { color: var(--t-medium); } .mxd-features-cards__teaser .mxd-point-subtitle span { font-weight: var(--fw-medium); color: var(--t-medium); } @media only screen and (min-width: 1600px) { .mxd-features-cards__teaser { padding-top: 1.2rem; } .mxd-features-cards__teaser.teaser-wp { padding-top: 6.5rem; } .mxd-features-cards__teaser .mxd-point-subtitle { font-size: 2.5rem; } } .mxd-features-cards__item { position: relative; height: 500px; } .mxd-features-cards__item .mxd-features-cards__title, .mxd-features-cards__item .mxd-features-cards__info { width: 90%; } @media only screen and (min-width: 768px) { .mxd-features-cards__item { height: 460px; } .mxd-features-cards__item .mxd-features-cards__title, .mxd-features-cards__item .mxd-features-cards__info { width: 60%; max-width: 500px; } } @media only screen and (min-width: 992px) { .mxd-features-cards__item .mxd-features-cards__title, .mxd-features-cards__item .mxd-features-cards__info { width: 40%; } } @media only screen and (min-width: 1200px) { .mxd-features-cards__item .mxd-features-cards__title, .mxd-features-cards__item .mxd-features-cards__info { width: 100%; max-width: none; } .mxd-features-cards__item.features-item-01 .mxd-features-cards__title, .mxd-features-cards__item.features-item-01 .mxd-features-cards__info { width: 40%; } .mxd-features-cards__item.features-item-01 .mxd-features-cards__info { max-width: 400px; } } @media only screen and (min-width: 1600px) { .mxd-features-cards__item { height: 600px; } } .mxd-features-cards__inner { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -moz-box-orient: vertical; -moz-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: start; -moz-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; position: relative; width: 100%; height: 100%; overflow: hidden; } .mxd-features-cards__inner.justify-end { -webkit-box-pack: end; -moz-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } @media only screen and (min-width: 768px) { .mxd-features-cards__inner.justify-end { -webkit-box-pack: end; -moz-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } .mxd-features-cards__inner.justify-between { -webkit-box-pack: justify; -moz-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } } .mxd-features-cards__title, .mxd-features-cards__info { position: relative; z-index: 1; } .mxd-features-cards__title { margin-bottom: 2.8rem; } .mxd-features-cards__title h3 { font-size: 3.6rem; } @media only screen and (min-width: 1200px) { .mxd-features-cards__title { z-index: 1; } .mxd-features-cards__title h3 { font-size: 3.6rem; } } @media only screen and (min-width: 1600px) { .mxd-features-cards__title h3 { font-size: 5rem; } } .mxd-features-cards__info p { font-size: 1.6rem; } @media only screen and (min-width: 1600px) { .mxd-features-cards__info p { font-size: 2.2rem; } } .mxd-features-cards__tags { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 1rem; margin-bottom: 2.6rem; } .mxd-features-cards__image { position: absolute; height: auto; } .mxd-features-cards__image.features-image-01 { bottom: 0; right: 0; width: 68%; } .mxd-features-cards__image.features-image-02 { top: 0; right: 0; width: 68%; } .mxd-features-cards__image.features-image-03 { bottom: 0; right: 3rem; width: 78%; } .mxd-features-cards__image.features-image-04 { bottom: 0; right: 3rem; width: 78%; } .mxd-features-cards__image.features-image-05 { top: 4rem; right: 1.5rem; width: 68%; } @media only screen and (min-width: 768px) { .mxd-features-cards__image.features-image-01 { width: 50%; } .mxd-features-cards__image.features-image-02 { width: 50%; } .mxd-features-cards__image.features-image-03 { right: 4rem; width: 50%; } .mxd-features-cards__image.features-image-04 { right: 4rem; width: 50%; } .mxd-features-cards__image.features-image-05 { width: 50%; } } @media only screen and (min-width: 1200px) { .mxd-features-cards__image.features-image-01 { width: 58%; } .mxd-features-cards__image.features-image-02 { width: 70%; } .mxd-features-cards__image.features-image-03 { right: auto; left: 4rem; width: -moz-calc(100% - 8rem); width: calc(100% - 8rem); } .mxd-features-cards__image.features-image-04 { right: auto; left: 50%; right: auto; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); width: 78%; } .mxd-features-cards__image.features-image-05 { width: 68%; } } .mxd-features-cards__gradient { position: absolute; width: 600px; height: 600px; z-index: 0; } .mxd-features-cards__gradient svg { width: 100%; height: 100%; } @media only screen and (min-width: 768px) { .mxd-features-cards__gradient { width: 800px; height: 800px; } } @media only screen and (min-width: 1200px) { .mxd-features-cards__gradient { width: 1000px; height: 1000px; } .mxd-features-cards__gradient.features-gradient-01 { bottom: -300px; right: -200px; width: 900px; height: 900px; } .mxd-features-cards__gradient.features-gradient-02 { top: -340px; right: -200px; width: 700px; height: 700px; } } @media only screen and (min-width: 1600px) { .mxd-features-cards__gradient { width: 1000px; height: 1000px; } .mxd-features-cards__gradient.features-gradient-01 { bottom: -300px; right: -200px; width: 1000px; height: 1000px; } .mxd-features-cards__gradient.features-gradient-02 { top: -400px; right: -260px; width: 900px; height: 900px; } } .mxd-features-cards-s__inner { position: relative; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -moz-box-orient: vertical; -moz-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; text-align: center; height: 100%; } .mxd-features-cards-s__icon { position: relative; width: 8rem; height: 8rem; margin-bottom: 2.7rem; } .mxd-features-cards-s__icon img { display: block; width: auto; height: 100%; } .mxd-features-cards-s__title { margin-bottom: 2.2rem; } .mxd-features-cards-s__title p { font: normal var(--fw-medium) 2.2rem/1.2 var(--_font-accent); color: var(--t-bright); } .mxd-features-cards-s__title p a { color: var(--t-bright); } .mxd-features-cards-s__title p.opposite { color: var(--t-opp-bright); } .mxd-features-cards-s__title p.opposite a { color: var(--t-opp-bright); } @media only screen and (min-width: 1200px) { .mxd-features-cards-s__title p { font-size: 2.8rem; } } .mxd-features-cards-s__descr { max-width: 320px; } /* ------------------------------------------------*/ /* Block - Demo Features End */ /* ------------------------------------------------*/ /* ------------------------------------------------*/ /* Block - Demo Elementor Promo Start */ /* ------------------------------------------------*/ .mxd-elementor-promo { position: relative; padding-bottom: 10.4rem; } @media only screen and (min-width: 768px) { .mxd-elementor-promo { padding-bottom: 9.4rem; } } @media only screen and (min-width: 1600px) { .mxd-elementor-promo { padding-bottom: 13.3rem; } } @media only screen and (min-width: 1200px) { .mxd-elementor-promo__item { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -moz-box-orient: vertical; -moz-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -moz-box-pack: center; -ms-flex-pack: center; justify-content: center; } } .mxd-elementor-promo__content { text-align: center; } @media only screen and (min-width: 768px) { .mxd-elementor-promo__content { max-width: 600px; margin: 0 auto; } } @media only screen and (min-width: 1200px) { .mxd-elementor-promo__content { margin: 0; text-align: left; } } .mxd-elementor-promo__image { position: relative; padding-bottom: 1rem; max-width: 840px; margin: 0 auto; } .mxd-elementor-promo__image .img-mobile { display: block; } .mxd-elementor-promo__image .img-desktop { display: none; } @media only screen and (min-width: 1200px) { .mxd-elementor-promo__image { max-width: none; } .mxd-elementor-promo__image .img-mobile { display: none; } .mxd-elementor-promo__image .img-desktop { display: block; } } .mxd-elementor-promo__obj01 img, .mxd-elementor-promo__obj02 img { display: block; width: 100%; height: auto; } .mxd-elementor-promo__obj01 { display: none; } @media only screen and (min-width: 1200px) { .mxd-elementor-promo__obj01 { display: block; position: absolute; top: 3rem; right: -4rem; width: 9rem; height: auto; } } @media only screen and (min-width: 1400px) { .mxd-elementor-promo__obj01 { top: 4rem; right: -5rem; width: 11rem; } } @media only screen and (min-width: 1600px) { .mxd-elementor-promo__obj01 { top: 5rem; right: -6rem; width: 15rem; } } .mxd-elementor-promo__obj02 { display: none; } @media only screen and (min-width: 1200px) { .mxd-elementor-promo__obj02 { display: block; position: absolute; bottom: -1rem; left: 19rem; width: 5rem; height: auto; } } @media only screen and (min-width: 1400px) { .mxd-elementor-promo__obj02 { bottom: -2rem; left: 24rem; width: 6rem; } } @media only screen and (min-width: 1600px) { .mxd-elementor-promo__obj02 { bottom: -3rem; left: 30rem; width: 8rem; } } /* ------------------------------------------------*/ /* Block - Demo Elementor Promo End */ /* ------------------------------------------------*/ /* ------------------------------------------------*/ /* Block - Demo CTA Start */ /* ------------------------------------------------*/ .mxd-demo-cta { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -moz-box-orient: vertical; -moz-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -moz-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; padding-top: 11.6rem; } @media only screen and (min-width: 768px) { .mxd-demo-cta { padding-top: 13.4rem; } } @media only screen and (min-width: 1600px) { .mxd-demo-cta { padding-top: 16.5rem; } } .mxd-demo-cta__caption { position: relative; text-align: center; } .mxd-demo-cta__caption h2 { margin: 0 auto; } @media only screen and (min-width: 768px) { .mxd-demo-cta__caption h2 { max-width: 600px; } } @media only screen and (min-width: 1600px) { .mxd-demo-cta__caption h2 { max-width: 860px; } } .mxd-demo-cta__btn { margin-top: 5rem; } @media only screen and (min-width: 768px) { .mxd-demo-cta__btn { margin-top: 5.2rem; } } @media only screen and (min-width: 1200px) { .mxd-demo-cta__btn { margin-top: 6.2rem; } } @media only screen and (min-width: 1600px) { .mxd-demo-cta__btn { margin-top: 6.7rem; } } /* ------------------------------------------------*/ /* Block - Demo CTA End */ /* ------------------------------------------------*/ /* ------------------------------------------------*/ /* Block - Demo Footer Start */ /* ------------------------------------------------*/ .mxd-demo-footer { position: relative; } .mxd-demo-footer__bg { position: absolute; bottom: 0; left: 0; width: 100%; height: auto; z-index: 0; } .mxd-demo-footer__item { margin: 0 0 4.4rem 0; } .mxd-demo-footer__item:last-of-type { margin: 0; } @media only screen and (min-width: 1200px) { .mxd-demo-footer__item { margin: 0; } } .mxd-demo-footer__logo { margin-bottom: 2.3rem; } .mxd-demo-footer__slogan { margin-bottom: 3.4rem; max-width: 300px; } @media only screen and (min-width: 768px) { .mxd-demo-footer__slogan { max-width: 460px; } } @media only screen and (min-width: 1200px) { .mxd-demo-footer__slogan { max-width: 340px; } } .mxd-demo-footer__btn { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -moz-box-orient: vertical; -moz-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 1rem; margin-bottom: 0.6rem; } .mxd-demo-footer__btn.centered { -webkit-box-pack: center; -moz-box-pack: center; -ms-flex-pack: center; justify-content: center; } @media only screen and (min-width: 576px) { .mxd-demo-footer__btn { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -moz-box-orient: horizontal; -moz-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 1.6rem; } } .mxd-footer-nav__item { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -moz-box-orient: vertical; -moz-box-direction: normal; -ms-flex-direction: column; flex-direction: column; margin: 0 0 4.4rem 0; } .mxd-footer-nav__item:last-of-type { margin: 0; } @media only screen and (min-width: 768px) { .mxd-footer-nav__item { margin: 0; } } .mxd-footer-nav__block { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -moz-box-orient: vertical; -moz-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 2rem; margin: 0 0 4.4rem 0; } .mxd-footer-nav__block:last-of-type { margin: 0; } .mxd-footer-nav__list ul { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -moz-box-orient: vertical; -moz-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 0.8rem; } .mxd-footer-nav__list ul li { display: block; font: normal var(--fw-regular) 1.6rem/1.4 var(--_font-accent); } .mxd-footer-nav__list ul li a { display: inline-block; color: var(--t-medium); } .no-touch .mxd-footer-nav__list ul li a:hover { color: var(--accent); -webkit-transform: translateX(0.4rem); -moz-transform: translateX(0.4rem); -ms-transform: translateX(0.4rem); transform: translateX(0.4rem); } @media only screen and (min-width: 1600px) { .mxd-footer-nav__list ul li { font-size: 1.8rem; } } .mxd-demo-footer__promo { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -moz-box-orient: vertical; -moz-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 2.4rem; } .mxd-footer-promo__list { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -moz-box-orient: vertical; -moz-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 1.6rem; } .mxd-footer-promo__item { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; gap: 1.6rem; -webkit-transition: -webkit-transform var(--_animspeed-medium); transition: -webkit-transform var(--_animspeed-medium); -moz-transition: transform var(--_animspeed-medium), -moz-transform var(--_animspeed-medium); transition: transform var(--_animspeed-medium); transition: transform var(--_animspeed-medium), -webkit-transform var(--_animspeed-medium), -moz-transform var(--_animspeed-medium); } .no-touch .mxd-footer-promo__item:hover { -webkit-transform: translateX(0.4rem); -moz-transform: translateX(0.4rem); -ms-transform: translateX(0.4rem); transform: translateX(0.4rem); } .no-touch .mxd-footer-promo__item:hover .mxd-footer-promo__link { color: var(--accent); } @media only screen and (min-width: 768px) { .mxd-footer-promo__item { max-width: 360px; } } .mxd-footer-promo__icon { width: 4.6rem; height: 4.6rem; } .mxd-footer-promo__icon img { width: 4.6rem; height: 4.6rem; } @media only screen and (min-width: 768px) { .mxd-footer-promo__icon { width: 5.6rem; height: 5.6rem; } .mxd-footer-promo__icon img { width: 5.6rem; height: 5.6rem; } } .mxd-footer-promo__link { font: normal var(--fw-regular) 1.6rem/1.4 var(--_font-accent); color: var(--t-medium); -webkit-transition: color var(--_animspeed-medium); -moz-transition: color var(--_animspeed-medium); transition: color var(--_animspeed-medium); } @media only screen and (min-width: 1600px) { .mxd-footer-promo__link { font-size: 1.8rem; } } .mxd-demo-footer__mixdesign { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; position: relative; bottom: 0; padding-top: 11.4rem; color: var(--t-bright); overflow: hidden; } .mxd-demo-footer__mixdesign a, .mxd-demo-footer__mixdesign svg { display: block; } .mxd-demo-footer__mixdesign a { width: 100%; color: var(--t-bright); } .mxd-demo-footer__mixdesign svg { width: 100%; height: auto; } .mxd-demo-footer__mixdesign.wp-footer-caption { padding-top: 10.3rem; } @media only screen and (min-width: 768px) { .mxd-demo-footer__mixdesign { padding-top: 10.6rem; } .mxd-demo-footer__mixdesign.wp-footer-caption { padding-top: 8.5rem; } } @media only screen and (min-width: 992px) { .mxd-demo-footer__mixdesign { padding-top: 8.6rem; } .mxd-demo-footer__mixdesign.wp-footer-caption { padding-top: 5.9rem; } } @media only screen and (min-width: 1200px) { .mxd-demo-footer__mixdesign { padding-top: 7rem; } .mxd-demo-footer__mixdesign.wp-footer-caption { padding-top: 3.4rem; } } @media only screen and (min-width: 1400px) { .mxd-demo-footer__mixdesign { padding-top: 5.3rem; } .mxd-demo-footer__mixdesign.wp-footer-caption { padding-top: 1.7rem; } } @media only screen and (min-width: 1600px) { .mxd-demo-footer__mixdesign { padding-top: 5rem; } .mxd-demo-footer__mixdesign.wp-footer-caption { padding-top: 0.7rem; } } /* ------------------------------------------------*/ /* Block - Demo Footer End */ /* ------------------------------------------------*/ /* ------------------------------------------------*/ /* Features - Hover Reveal Start */ /* ------------------------------------------------*/ .hover-reveal__item { position: relative; } .hover-reveal__content { display: none; position: absolute; left: 50%; top: 50%; bottom: auto; right: auto; -webkit-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); width: 300px; height: 300px; pointer-events: none; -moz-border-radius: var(--_radius-m); border-radius: var(--_radius-m); overflow: hidden; opacity: 0; -webkit-transform: translate(-80%, -50%); -moz-transform: translate(-80%, -50%); -ms-transform: translate(-80%, -50%); transform: translate(-80%, -50%); -webkit-transition: opacity var(--_animspeed-medium) var(--_animbezier), -webkit-transform var(--_animspeed-medium); transition: opacity var(--_animspeed-medium) var(--_animbezier), -webkit-transform var(--_animspeed-medium); -moz-transition: transform var(--_animspeed-medium), opacity var(--_animspeed-medium) var(--_animbezier), -moz-transform var(--_animspeed-medium); transition: transform var(--_animspeed-medium), opacity var(--_animspeed-medium) var(--_animbezier); transition: transform var(--_animspeed-medium), opacity var(--_animspeed-medium) var(--_animbezier), -webkit-transform var(--_animspeed-medium), -moz-transform var(--_animspeed-medium); z-index: 1; } .hover-reveal__content.overflow-visible { overflow: visible; } .hover-reveal__content.hover-reveal-360x440 { width: 360px; height: 440px; } .hover-reveal__content.hover-reveal-280x340 { width: 280px; height: 340px; } .hover-reveal__content.hover-reveal-260x260 { width: 220px; height: 220px; } @media only screen and (min-width: 1200px) { .hover-reveal__content { display: block; } } @media only screen and (min-width: 1600px) { .hover-reveal__content.hover-reveal-260x260 { width: 260px; height: 260px; } } .hover-reveal__image { position: relative; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; -webkit-transform: scale(1, 1.4); -moz-transform: scale(1, 1.4); -ms-transform: scale(1, 1.4); transform: scale(1, 1.4); -webkit-transform-origin: top left; -moz-transform-origin: top left; -ms-transform-origin: top left; transform-origin: top left; -webkit-transition: -webkit-transform 0.5s var(--_animbezier); transition: -webkit-transform 0.5s var(--_animbezier); -moz-transition: transform 0.5s var(--_animbezier), -moz-transform 0.5s var(--_animbezier); transition: transform 0.5s var(--_animbezier); transition: transform 0.5s var(--_animbezier), -webkit-transform 0.5s var(--_animbezier), -moz-transform 0.5s var(--_animbezier); } /* ------------------------------------------------*/ /* Features - Hover Reveal End */ /* ------------------------------------------------*/ /* ------------------------------------------------*/ /* Features - About Start */ /* ------------------------------------------------*/ /* ------------------------------------------------*/ /* Features - About End */ /* ------------------------------------------------*/ /* ------------------------------------------------*/ /* Features - Pinned Image Start */ /* ------------------------------------------------*/ .page-padding { width: 100%; padding: 0; } @media only screen and (min-width: 1200px) { .page-padding { padding: 6rem 0; } } @media only screen and (min-width: 1600px) { .page-padding { padding: 9rem 0; } } .mxd-pinned { display: block; } @media only screen and (min-width: 1200px) { .mxd-pinned { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; gap: 3rem; } } .mxd-pinned__visual { display: none; } @media only screen and (min-width: 1200px) { .mxd-pinned__visual { position: sticky; top: 0; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -moz-box-pack: center; -ms-flex-pack: center; justify-content: center; height: 100vh; } } .mxd-pinned__img-wrap { width: 30em; height: 40em; max-height: 100%; max-width: 100%; background-color: var(--base-tint); -moz-border-radius: var(--_radius-l); border-radius: var(--_radius-l); } @media only screen and (min-width: 1200px) { .mxd-pinned__img-wrap { width: 100%; height: 100%; } } .mxd-pinned__img-list { position: relative; width: 100%; height: 100%; } .mxd-pinned__img-item { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -moz-box-pack: center; -ms-flex-pack: center; justify-content: center; opacity: 0; -webkit-transition: opacity var(--_animspeed-medium); -moz-transition: opacity var(--_animspeed-medium); transition: opacity var(--_animspeed-medium); } .mxd-pinned__img-item.is-active { opacity: 1; } .mxd-pinned__img { width: auto; height: 30rem; -o-object-fit: cover; object-fit: cover; -moz-border-radius: 2em; border-radius: 2em; } @media only screen and (min-width: 1600px) { .mxd-pinned__img { height: 40rem; } } .mxd-pinned__content { padding: 0; } @media only screen and (min-width: 1200px) { .mxd-pinned__content { padding: 6rem 0; } } @media only screen and (min-width: 1600px) { .mxd-pinned__content { padding: 9rem 0; } } .mxd-pinned__text-wrap { padding: 0; } @media only screen and (min-width: 1200px) { .mxd-pinned__text-wrap { padding: 0 9rem 0 3rem; } } @media only screen and (min-width: 1600px) { .mxd-pinned__text-wrap { padding: 0 9rem 0 6rem; } } .mxd-pinned__text-list { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -moz-box-orient: vertical; -moz-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 7rem; } @media only screen and (min-width: 768px) { .mxd-pinned__text-list { gap: 8rem; } } @media only screen and (min-width: 1200px) { .mxd-pinned__text-list { gap: 0; } } .mxd-pinned__text-item { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -moz-box-orient: vertical; -moz-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: start; -moz-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: start; -moz-box-align: start; -ms-flex-align: start; align-items: flex-start; } @media only screen and (min-width: 1200px) { .mxd-pinned__text-item { height: -moz-calc(100vh - 12rem); height: calc(100vh - 12rem); max-width: 640px; -webkit-box-pack: center; -moz-box-pack: center; -ms-flex-pack: center; justify-content: center; opacity: 0.2; -webkit-transition: opacity var(--_animspeed-medium); -moz-transition: opacity var(--_animspeed-medium); transition: opacity var(--_animspeed-medium); } .mxd-pinned__text-item.is-active { opacity: 1; } } @media only screen and (min-width: 1600px) { .mxd-pinned__text-item { height: -moz-calc(100vh - 18rem); height: calc(100vh - 18rem); } } .mxd-pinned__img-mobile { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -moz-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 100%; height: 460px; background-color: var(--base-tint); -moz-border-radius: var(--_radius-l); border-radius: var(--_radius-l); margin-bottom: 2.4rem; } .mxd-pinned__img-mobile img { display: block; width: auto; height: 24rem; -o-object-fit: cover; object-fit: cover; -moz-border-radius: 2em; border-radius: 2em; } @media only screen and (min-width: 768px) { .mxd-pinned__img-mobile { height: 600px; } .mxd-pinned__img-mobile img { height: 30rem; } } @media only screen and (min-width: 1200px) { .mxd-pinned__img-mobile { display: none; } } .mxd-pinned__title { margin-bottom: 3.4rem; } .mxd-pinned__title.centered-mobile { text-align: center; } @media only screen and (min-width: 1200px) { .mxd-pinned__title.centered-mobile { text-align: left; } } @media only screen and (min-width: 1600px) { .mxd-pinned__title { margin-bottom: 4rem; } } .mxd-pinned__tags { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 1rem; margin-bottom: 3.2rem; } .mxd-pinned__tags.centered-mobile { -webkit-box-pack: center; -moz-box-pack: center; -ms-flex-pack: center; justify-content: center; } @media only screen and (min-width: 1200px) { .mxd-pinned__tags.centered-mobile { -webkit-box-pack: start; -moz-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; } } @media only screen and (min-width: 1600px) { .mxd-pinned__tags { gap: 1.4rem; margin-bottom: 3.8rem; } } /* ------------------------------------------------*/ /* Features - Pinned Image End */ /* ------------------------------------------------*/ /* ------------------------------------------------*/ /* Features - Pinned Universal Start */ /* ------------------------------------------------*/ .mxd-pinned-universal { position: relative; } .mxd-pinned-universal__static-inner { text-align: center; } @media only screen and (min-width: 1200px) { .mxd-pinned-universal__static-inner { position: sticky; top: 0; padding-top: 6rem; text-align: left; } } @media only screen and (min-width: 1600px) { .mxd-pinned-universal__static-inner { padding-top: 9rem; } } @media only screen and (min-width: 1200px) { .mxd-pinned-universal__scroll { padding-top: 6rem; grid-column-gap: 1.2rem; grid-row-gap: 1.2rem; -webkit-box-orient: vertical; -webkit-box-direction: normal; -moz-box-orient: vertical; -moz-box-direction: normal; -ms-flex-flow: column; flex-flow: column; -webkit-box-pack: start; -moz-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: stretch; -moz-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; } } @media only screen and (min-width: 1600px) { .mxd-pinned-universal__scroll { padding-top: 9rem; } } .mxd-pinned-universal__scroll-inner { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -moz-box-orient: vertical; -moz-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 6.5rem; } @media only screen and (min-width: 768px) { .mxd-pinned-universal__scroll-inner { gap: 7.5rem; } } @media only screen and (min-width: 1600px) { .mxd-pinned-universal__scroll-inner { gap: 9.3rem; } } /* ------------------------------------------------*/ /* Features - Pinned Universal End */ /* ------------------------------------------------*/ /* ------------------------------------------------*/ /* Features - Pinned Projects Start */ /* ------------------------------------------------*/ .mxd-pinned-projects { position: relative; } .mxd-pinned-projects__static-inner { text-align: center; } @media only screen and (min-width: 1200px) { .mxd-pinned-projects__static-inner { position: sticky; top: 0; padding-top: 6rem; text-align: left; } } @media only screen and (min-width: 1600px) { .mxd-pinned-projects__static-inner { padding-top: 9rem; } } @media only screen and (min-width: 1200px) { .mxd-pinned-projects__scroll { padding-top: 6rem; grid-column-gap: 1.2rem; grid-row-gap: 1.2rem; -webkit-box-orient: vertical; -webkit-box-direction: normal; -moz-box-orient: vertical; -moz-box-direction: normal; -ms-flex-flow: column; flex-flow: column; -webkit-box-pack: start; -moz-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: stretch; -moz-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; } } @media only screen and (min-width: 1600px) { .mxd-pinned-projects__scroll { padding-top: 9rem; } } .mxd-pinned-projects__scroll-inner { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -moz-box-orient: vertical; -moz-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 6.2rem; } @media only screen and (min-width: 768px) { .mxd-pinned-projects__scroll-inner { gap: 7rem; } } @media only screen and (min-width: 1200px) { .mxd-pinned-projects__scroll-inner { gap: 9rem; } } @media only screen and (min-width: 1600px) { .mxd-pinned-projects__scroll-inner { gap: 11rem; } } /* ------------------------------------------------*/ /* Features - Pinned Projects End */ /* ------------------------------------------------*/ /* ------------------------------------------------*/ /* Features - Projects List Start */ /* ------------------------------------------------*/ .mxd-projects-list { position: relative; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -moz-box-orient: vertical; -moz-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } @media only screen and (min-width: 1200px) and (hover) and (prefers-reduced-motion: no-preference) { .mxd-projects-list > .mxd-projects-list__item { -webkit-transition: opacity 0.3s ease; -moz-transition: opacity 0.3s ease; transition: opacity 0.3s ease; } .mxd-projects-list:hover > .mxd-projects-list__item:not(:hover) { opacity: 0.2; } } .mxd-projects-list__item { position: relative; display: block; margin-top: -2px; } .mxd-projects-list__item:first-of-type { margin-top: 0; } @media only screen and (min-width: 1200px) { .no-touch .mxd-projects-list__item:hover .mxd-projects-list__title p { -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } .no-touch .mxd-projects-list__item:hover .mxd-projects-list__icon { -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } .no-touch .mxd-projects-list__item:hover .mxd-projects-list__icon i::before { -webkit-animation: var(--_animspeed-slow) var(--_animbezier) 0.2s 1 both slideRight; -moz-animation: var(--_animspeed-slow) var(--_animbezier) 0.2s 1 both slideRight; animation: var(--_animspeed-slow) var(--_animbezier) 0.2s 1 both slideRight; } .no-touch .mxd-projects-list__item:hover .mxd-projects-list__product p { -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } .no-touch .mxd-projects-list__item:hover .mxd-projects-list__icon-v2 { -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } .no-touch .mxd-projects-list__item:hover .mxd-projects-list__icon-v2 i::before { -webkit-animation: var(--_animspeed-slow) var(--_animbezier) 0.3s 1 both slideRightUp; -moz-animation: var(--_animspeed-slow) var(--_animbezier) 0.3s 1 both slideRightUp; animation: var(--_animspeed-slow) var(--_animbezier) 0.3s 1 both slideRightUp; } } .mxd-projects-list__border { position: relative; left: 1.5rem; width: -moz-calc(100% - 3rem); width: calc(100% - 3rem); height: 2px; background-color: var(--st-bright); } .mxd-projects-list__inner { display: block; padding: 3rem 0; } .mxd-projects-list__inner-v2 { display: block; padding: 4rem 0 5.6rem 0; } @media only screen and (min-width: 768px) { .mxd-projects-list__inner-v2 { padding: 3.7rem 0 5.5rem 0; } } @media only screen and (min-width: 1200px) { .mxd-projects-list__inner-v2 { padding: 6rem 0; } } .mxd-projects-list__title { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; gap: 1rem; margin-bottom: 3.6rem; overflow: hidden; } .mxd-projects-list__title p { font: normal var(--fw-medium) 3rem/1.2 var(--_font-accent); letter-spacing: -0.06rem; color: var(--t-bright); } @media only screen and (min-width: 768px) { .mxd-projects-list__title { margin-bottom: 3.9rem; } .mxd-projects-list__title p { font-size: 4.4rem; } } @media only screen and (min-width: 1200px) { .mxd-projects-list__title { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; gap: 1rem; height: 100%; margin-bottom: 0; } .mxd-projects-list__title p { -webkit-transform: translateX(-5.4rem); -moz-transform: translateX(-5.4rem); -ms-transform: translateX(-5.4rem); transform: translateX(-5.4rem); -webkit-transition: -webkit-transform var(--_animspeed-medium) var(--_animbezier); transition: -webkit-transform var(--_animspeed-medium) var(--_animbezier); -moz-transition: transform var(--_animspeed-medium) var(--_animbezier), -moz-transform var(--_animspeed-medium) var(--_animbezier); transition: transform var(--_animspeed-medium) var(--_animbezier); transition: transform var(--_animspeed-medium) var(--_animbezier), -webkit-transform var(--_animspeed-medium) var(--_animbezier), -moz-transform var(--_animspeed-medium) var(--_animbezier); } } @media only screen and (min-width: 1600px) { .mxd-projects-list__title p { font-size: 4.4rem; } } .mxd-projects-list__title-v2 { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; gap: 1rem; margin-bottom: 3.1rem; overflow: hidden; } .mxd-projects-list__title-v2 p { font: normal var(--fw-medium) 4.4rem/1.2 var(--_font-accent); letter-spacing: -0.06rem; color: var(--t-bright); } @media only screen and (min-width: 768px) { .mxd-projects-list__title-v2 { margin-bottom: 3rem; } .mxd-projects-list__title-v2 p { font-size: 5rem; } } @media only screen and (min-width: 1200px) { .mxd-projects-list__title-v2 { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; gap: 1rem; height: 100%; margin-bottom: 0; } } @media only screen and (min-width: 1600px) { .mxd-projects-list__title-v2 p { font-size: 7rem; } } .mxd-projects-list__icon { position: relative; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; font-size: 3rem; } .mxd-projects-list__icon i { display: -webkit-inline-box; display: -moz-inline-box; display: -ms-inline-flexbox; display: inline-flex; position: relative; overflow: hidden; color: var(--t-bright); -webkit-transition: color var(--_animspeed-medium) var(--_animbezier); -moz-transition: color var(--_animspeed-medium) var(--_animbezier); transition: color var(--_animspeed-medium) var(--_animbezier); } @media only screen and (min-width: 768px) { .mxd-projects-list__icon { font-size: 4.4rem; } } @media only screen and (min-width: 1200px) { .mxd-projects-list__icon { -webkit-transform: translateX(-5.4rem); -moz-transform: translateX(-5.4rem); -ms-transform: translateX(-5.4rem); transform: translateX(-5.4rem); -webkit-transition: -webkit-transform var(--_animspeed-medium) var(--_animbezier); transition: -webkit-transform var(--_animspeed-medium) var(--_animbezier); -moz-transition: transform var(--_animspeed-medium) var(--_animbezier), -moz-transform var(--_animspeed-medium) var(--_animbezier); transition: transform var(--_animspeed-medium) var(--_animbezier); transition: transform var(--_animspeed-medium) var(--_animbezier), -webkit-transform var(--_animspeed-medium) var(--_animbezier), -moz-transform var(--_animspeed-medium) var(--_animbezier); } } .mxd-projects-list__icon-v2 { position: relative; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; font-size: 1.8rem; } .mxd-projects-list__icon-v2 i { display: -webkit-inline-box; display: -moz-inline-box; display: -ms-inline-flexbox; display: inline-flex; position: relative; overflow: hidden; color: var(--t-bright); -webkit-transition: color var(--_animspeed-medium) var(--_animbezier); -moz-transition: color var(--_animspeed-medium) var(--_animbezier); transition: color var(--_animspeed-medium) var(--_animbezier); } @media only screen and (min-width: 1200px) { .mxd-projects-list__icon-v2 { font-size: 2.2rem; -webkit-transform: translateX(3.2rem); -moz-transform: translateX(3.2rem); -ms-transform: translateX(3.2rem); transform: translateX(3.2rem); -webkit-transition: -webkit-transform var(--_animspeed-medium) var(--_animbezier); transition: -webkit-transform var(--_animspeed-medium) var(--_animbezier); -moz-transition: transform var(--_animspeed-medium) var(--_animbezier), -moz-transform var(--_animspeed-medium) var(--_animbezier); transition: transform var(--_animspeed-medium) var(--_animbezier); transition: transform var(--_animspeed-medium) var(--_animbezier), -webkit-transform var(--_animspeed-medium) var(--_animbezier), -moz-transform var(--_animspeed-medium) var(--_animbezier); } } @media only screen and (min-width: 1600px) { .mxd-projects-list__icon-v2 { font-size: 2.6rem; -webkit-transform: translateX(3.8rem); -moz-transform: translateX(3.8rem); -ms-transform: translateX(3.8rem); transform: translateX(3.8rem); } } .mxd-projects-list__image { display: block; -moz-border-radius: var(--_radius-m); border-radius: var(--_radius-m); overflow: hidden; margin-bottom: 3.4rem; } @media only screen and (min-width: 1200px) { .mxd-projects-list__image { display: none; } } .mxd-projects-list__tagslist { margin-bottom: 0.6rem; } .mxd-projects-list__tagslist ul li p { color: var(--t-bright); } @media only screen and (min-width: 768px) { .mxd-projects-list__tagslist { margin-bottom: 1.2rem; } } @media only screen and (min-width: 1200px) { .mxd-projects-list__tagslist { margin-bottom: 0; } } .mxd-projects-list__tagslist-v2 { margin-bottom: 1rem; } .mxd-projects-list__tagslist-v2 ul { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; gap: 1rem; color: var(--t-bright); } .mxd-projects-list__tagslist-v2 ul li { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; gap: 1rem; } .mxd-projects-list__tagslist-v2 ul li p { line-height: 1.2; color: var(--t-bright); } .mxd-projects-list__tagslist-v2 ul li svg { width: 1.7rem; height: 1.7rem; fill: currentColor; } @media only screen and (min-width: 768px) { .mxd-projects-list__tagslist-v2 { margin-bottom: 0; } } @media only screen and (min-width: 1200px) { .mxd-projects-list__tagslist-v2 { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; height: 100%; } .mxd-projects-list__tagslist-v2 ul { -webkit-transition: -webkit-transform var(--_animspeed-medium) var(--_animbezier); transition: -webkit-transform var(--_animspeed-medium) var(--_animbezier); -moz-transition: transform var(--_animspeed-medium) var(--_animbezier), -moz-transform var(--_animspeed-medium) var(--_animbezier); transition: transform var(--_animspeed-medium) var(--_animbezier); transition: transform var(--_animspeed-medium) var(--_animbezier), -webkit-transform var(--_animspeed-medium) var(--_animbezier), -moz-transform var(--_animspeed-medium) var(--_animbezier); } } .mxd-projects-list__date { text-align: right; } .mxd-projects-list__date p { color: var(--t-bright); } @media only screen and (min-width: 1200px) { .mxd-projects-list__date { text-align: right; } } .mxd-projects-list__product { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: start; -moz-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; gap: 0.8rem; text-align: right; } .mxd-projects-list__product p { line-height: 1.2; font-weight: var(--fw-medium); color: var(--t-bright); } @media only screen and (min-width: 768px) { .mxd-projects-list__product { -webkit-box-pack: end; -moz-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; gap: 1.2rem; } } @media only screen and (min-width: 1200px) { .mxd-projects-list__product { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: end; -moz-box-pack: end; -ms-flex-pack: end; justify-content: end; width: 100%; height: 100%; overflow: hidden; } .mxd-projects-list__product p { -webkit-transform: translateX(3.2rem); -moz-transform: translateX(3.2rem); -ms-transform: translateX(3.2rem); transform: translateX(3.2rem); -webkit-transition: -webkit-transform var(--_animspeed-medium) var(--_animbezier); transition: -webkit-transform var(--_animspeed-medium) var(--_animbezier); -moz-transition: transform var(--_animspeed-medium) var(--_animbezier), -moz-transform var(--_animspeed-medium) var(--_animbezier); transition: transform var(--_animspeed-medium) var(--_animbezier); transition: transform var(--_animspeed-medium) var(--_animbezier), -webkit-transform var(--_animspeed-medium) var(--_animbezier), -moz-transform var(--_animspeed-medium) var(--_animbezier); } } @media only screen and (min-width: 1600px) { .mxd-projects-list__product p { -webkit-transform: translateX(3.8rem); -moz-transform: translateX(3.8rem); -ms-transform: translateX(3.8rem); transform: translateX(3.8rem); } } /* ------------------------------------------------*/ /* Features - Projects List End */ /* ------------------------------------------------*/ /* ------------------------------------------------*/ /* Features - Projects Masonry Start */ /* ------------------------------------------------*/ .mxd-projects-masonry { position: relative; } .mxd-projects-masonry__title { position: relative; height: auto; padding: 0 1.5rem; } .mxd-projects-masonry__title.headline-title { margin-bottom: 12.9rem; } .mxd-projects-masonry__title.section-title { margin-bottom: 0; } @media only screen and (min-width: 768px) { .mxd-projects-masonry__title.headline-title { margin-bottom: 14.6rem; } } @media only screen and (min-width: 1200px) { .mxd-projects-masonry__title { padding: 0 3rem; } .mxd-projects-masonry__title.headline-title { margin-bottom: 14.2rem; } .mxd-projects-masonry__title.section-title { margin-bottom: 16rem; } } @media only screen and (min-width: 1600px) { .mxd-projects-masonry__title { padding: 0 3rem; } .mxd-projects-masonry__title.headline-title { margin-bottom: 17.9rem; } .mxd-projects-masonry__title.section-title { margin-bottom: 20rem; } } .mxd-projects-masonry__item { padding: 0 1.5rem; margin-bottom: 6.2rem; } @media only screen and (min-width: 768px) { .mxd-projects-masonry__item { padding: 0 1.5rem; margin-bottom: 7rem; } } @media only screen and (min-width: 1200px) { .mxd-projects-masonry__item { padding: 0 3rem; margin-bottom: 9rem; } .mxd-projects-masonry__item:last-of-type { margin-bottom: 0; } } @media only screen and (min-width: 1600px) { .mxd-projects-masonry__item { padding: 0 4.5rem; margin-bottom: 11rem; } } .mxd-project-item__media.masonry-media { height: auto; } @media only screen and (min-width: 1200px) { .mxd-project-item__media.masonry-media { height: 600px; } } @media only screen and (min-width: 1400px) { .mxd-project-item__media.masonry-media { height: 600px; } } @media only screen and (min-width: 1600px) { .mxd-project-item__media.masonry-media { height: 800px; } } @media only screen and (min-width: 1200px) { .mxd-project-item__preview.masonry-preview { height: 600px; } } @media only screen and (min-width: 1400px) { .mxd-project-item__preview.masonry-preview { height: 600px; } } @media only screen and (min-width: 1600px) { .mxd-project-item__preview.masonry-preview { height: 800px; } } .mxd-projects-masonry__btngroup { padding: 0 1.5rem; } @media only screen and (min-width: 1200px) { .mxd-projects-masonry__btngroup { position: absolute; right: 0; bottom: 0; padding: 0 3rem; } } /* ------------------------------------------------*/ /* Features - Projects Masonry End */ /* ------------------------------------------------*/ /* ------------------------------------------------*/ /* Features - Awards List Start */ /* ------------------------------------------------*/ .mxd-awards-list { position: relative; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -moz-box-orient: vertical; -moz-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } @media only screen and (min-width: 1200px) and (hover) and (prefers-reduced-motion: no-preference) { .mxd-awards-list > .mxd-awards-list__item { -webkit-transition: opacity 0.3s ease; -moz-transition: opacity 0.3s ease; transition: opacity 0.3s ease; } .mxd-awards-list:hover > .mxd-awards-list__item:not(:hover) { opacity: 0.2; } } .mxd-awards-list__item { position: relative; display: block; margin-top: -2px; } .mxd-awards-list__item:first-of-type { margin-top: 0; } @media only screen and (min-width: 1200px) { .no-touch .mxd-awards-list__item:hover .mxd-awards-list__title p { -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } .no-touch .mxd-awards-list__item:hover .mxd-awards-list__icon { -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } .no-touch .mxd-awards-list__item:hover .mxd-awards-list__icon i::before { -webkit-animation: var(--_animspeed-slow) var(--_animbezier) 0.2s 1 both slideRight; -moz-animation: var(--_animspeed-slow) var(--_animbezier) 0.2s 1 both slideRight; animation: var(--_animspeed-slow) var(--_animbezier) 0.2s 1 both slideRight; } } .mxd-awards-list__border { position: relative; left: 1.5rem; width: -moz-calc(100% - 3rem); width: calc(100% - 3rem); height: 2px; background-color: var(--st-bright); } .mxd-awards-list__inner { display: block; padding: 3rem 0; } .mxd-awards-list__title { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -moz-box-orient: horizontal; -moz-box-direction: reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; -webkit-box-pack: justify; -moz-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; gap: 1rem; margin-bottom: 2.6rem; overflow: hidden; } .mxd-awards-list__title p { font: normal var(--fw-medium) 3rem/1.2 var(--_font-accent); letter-spacing: -0.06rem; color: var(--t-bright); } @media only screen and (min-width: 768px) { .mxd-awards-list__title { margin-bottom: 2.9rem; } .mxd-awards-list__title p { font-size: 4.4rem; } } @media only screen and (min-width: 1200px) { .mxd-awards-list__title { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -moz-box-orient: horizontal; -moz-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-pack: start; -moz-box-pack: start; -ms-flex-pack: start; justify-content: start; -webkit-box-align: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; gap: 1rem; height: 100%; margin-bottom: 0; } .mxd-awards-list__title p { -webkit-transform: translateX(-5.4rem); -moz-transform: translateX(-5.4rem); -ms-transform: translateX(-5.4rem); transform: translateX(-5.4rem); -webkit-transition: -webkit-transform var(--_animspeed-medium) var(--_animbezier); transition: -webkit-transform var(--_animspeed-medium) var(--_animbezier); -moz-transition: transform var(--_animspeed-medium) var(--_animbezier), -moz-transform var(--_animspeed-medium) var(--_animbezier); transition: transform var(--_animspeed-medium) var(--_animbezier); transition: transform var(--_animspeed-medium) var(--_animbezier), -webkit-transform var(--_animspeed-medium) var(--_animbezier), -moz-transform var(--_animspeed-medium) var(--_animbezier); } } @media only screen and (min-width: 1600px) { .mxd-awards-list__title p { font-size: 4.4rem; } } .mxd-awards-list__icon { position: relative; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; font-size: 3rem; } .mxd-awards-list__icon i { display: -webkit-inline-box; display: -moz-inline-box; display: -ms-inline-flexbox; display: inline-flex; position: relative; overflow: hidden; color: var(--t-bright); -webkit-transition: color var(--_animspeed-medium) var(--_animbezier); -moz-transition: color var(--_animspeed-medium) var(--_animbezier); transition: color var(--_animspeed-medium) var(--_animbezier); } @media only screen and (min-width: 768px) { .mxd-awards-list__icon { font-size: 4.4rem; } } @media only screen and (min-width: 1200px) { .mxd-awards-list__icon { -webkit-transform: translateX(-5.4rem); -moz-transform: translateX(-5.4rem); -ms-transform: translateX(-5.4rem); transform: translateX(-5.4rem); -webkit-transition: -webkit-transform var(--_animspeed-medium) var(--_animbezier); transition: -webkit-transform var(--_animspeed-medium) var(--_animbezier); -moz-transition: transform var(--_animspeed-medium) var(--_animbezier), -moz-transform var(--_animspeed-medium) var(--_animbezier); transition: transform var(--_animspeed-medium) var(--_animbezier); transition: transform var(--_animspeed-medium) var(--_animbezier), -webkit-transform var(--_animspeed-medium) var(--_animbezier), -moz-transform var(--_animspeed-medium) var(--_animbezier); } } .mxd-awards-list__image { display: block; -moz-border-radius: var(--_radius-m); border-radius: var(--_radius-m); overflow: hidden; margin-bottom: 3.4rem; } @media only screen and (min-width: 768px) { .mxd-awards-list__image { margin-bottom: 4rem; } } @media only screen and (min-width: 1200px) { .mxd-awards-list__image { display: none; } } .mxd-awards-list__tagslist { margin-bottom: 0.6rem; } .mxd-awards-list__tagslist ul li p { color: var(--t-bright); } @media only screen and (min-width: 768px) { .mxd-awards-list__tagslist { margin-bottom: 1.2rem; } } @media only screen and (min-width: 1200px) { .mxd-awards-list__tagslist { margin-bottom: 0; } } .mxd-awards-list__date { text-align: right; } .mxd-awards-list__date p { color: var(--t-bright); } @media only screen and (min-width: 1200px) { .mxd-awards-list__date { text-align: right; } } /* ------------------------------------------------*/ /* Features - Awards List End */ /* ------------------------------------------------*/ /* ------------------------------------------------*/ /* Features - Statistics Simple Start */ /* ------------------------------------------------*/ .mxd-stats-simple { position: relative; } @media only screen and (min-width: 1200px) and (hover) and (prefers-reduced-motion: no-preference) { .mxd-stats-simple > .mxd-stats-simple__item { -webkit-transition: opacity 0.3s ease; -moz-transition: opacity 0.3s ease; transition: opacity 0.3s ease; } .mxd-stats-simple:hover > .mxd-stats-simple__item:not(:hover) { opacity: 0.2; } } .mxd-stats-simple__item { position: relative; padding-top: 3rem; } .mxd-stats-simple__item:first-of-type { padding-top: 0; } .mxd-stats-simple__item:first-of-type .mxd-stats-simple__inner { padding-top: 6rem; border-top: 1px solid var(--st-bright); } .mxd-stats-simple__item .mxd-stats-simple__inner { padding-bottom: 6rem; border-bottom: 1px solid var(--st-bright); } @media only screen and (min-width: 992px) { .mxd-stats-simple__item { padding-top: 0; } .mxd-stats-simple__item .mxd-stats-simple__inner { padding-bottom: 0; border-bottom: none; } .mxd-stats-simple__item:first-of-type .mxd-stats-simple__inner { padding-top: 0; border-top: none; } } .no-touch .mxd-stats-simple__item:hover .mxd-stats-simple__image { opacity: 1; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } .mxd-stats-simple__inner { -webkit-box-flex: 1; -moz-box-flex: 1; -ms-flex: 1; flex: 1; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -moz-box-orient: vertical; -moz-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: justify; -moz-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; } @media only screen and (min-width: 992px) { .mxd-stats-simple__inner { -webkit-box-align: start; -moz-box-align: start; -ms-flex-align: start; align-items: flex-start; height: 320px; padding: 0 3rem; border-bottom: none; border-left: 1px solid var(--st-bright); } } @media only screen and (min-width: 1600px) { .mxd-stats-simple__inner { height: 400px; } } .mxd-stats-simple__image { display: -webkit-inline-box; display: -moz-inline-box; display: -ms-inline-flexbox; display: inline-flex; height: 5.4rem; width: auto; -o-object-fit: contain; object-fit: contain; margin-bottom: 2rem; } @media only screen and (min-width: 992px) { .mxd-stats-simple__image { margin-bottom: 0; } } @media only screen and (min-width: 1200px) { .mxd-stats-simple__image { opacity: 0; -webkit-transform: scale(0); -moz-transform: scale(0); -ms-transform: scale(0); transform: scale(0); -webkit-transition: all var(--_animspeed-medium) var(--_animbezier); -moz-transition: all var(--_animspeed-medium) var(--_animbezier); transition: all var(--_animspeed-medium) var(--_animbezier); } } @media only screen and (min-width: 1600px) { .mxd-stats-simple__image { height: 7rem; } } .mxd-stats-simple__counter { margin-bottom: 2.8rem; } @media only screen and (min-width: 992px) { .mxd-stats-simple__counter { margin-bottom: 0; } } .mxd-stats-simple__descr { text-align: center; } @media only screen and (min-width: 992px) { .mxd-stats-simple__descr { text-align: left; } } /* ------------------------------------------------*/ /* Features - Statistics Simple End */ /* ------------------------------------------------*/ /* ------------------------------------------------*/ /* Features - Statistics Cards Start */ /* ------------------------------------------------*/ .mxd-stats-cards { position: relative; } .mxd-stats-cards__item { position: relative; height: 540px; } @media only screen and (min-width: 768px) { .mxd-stats-cards__item { height: 420px; } } @media only screen and (min-width: 1600px) { .mxd-stats-cards__item { height: 600px; } } .mxd-stats-cards__inner { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -moz-box-orient: vertical; -moz-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: start; -moz-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; gap: 3.4rem; position: relative; width: 100%; height: 100%; overflow: hidden; } .mxd-stats-cards__inner .mxd-counter { z-index: 1; } @media only screen and (min-width: 768px) { .mxd-stats-cards__inner { -webkit-box-pack: justify; -moz-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; gap: 0; } .mxd-stats-cards__inner.align-end { -webkit-box-align: end; -moz-box-align: end; -ms-flex-align: end; align-items: flex-end; } } .mxd-stats-cards__btngroup { z-index: 1; } .mxd-stats-cards__image { position: absolute; left: 0; top: 32rem; width: 100%; max-width: 400px; height: auto; padding: 0 4rem 0 0; z-index: 0; } @media only screen and (min-width: 768px) { .mxd-stats-cards__image { top: 0; width: 60%; max-width: none; padding: 0; } .mxd-stats-cards__image.mxd-stats-cards-image-1 { width: 470px; top: -4rem; left: -4rem; } .mxd-stats-cards__image.mxd-stats-cards-image-2 { width: 420px; top: auto; bottom: -4rem; padding-top: 4rem; } .mxd-stats-cards__image.mxd-stats-cards-image-3 { width: 450px; top: auto; right: -4rem; bottom: 0; left: auto; } .mxd-stats-cards__image.mxd-stats-cards-image-4 { width: 400px; top: auto; bottom: 4rem; left: auto; right: -6rem; } } @media only screen and (min-width: 1200px) { .mxd-stats-cards__image.mxd-stats-cards-image-1 { width: 330px; top: 0; } .mxd-stats-cards__image.mxd-stats-cards-image-4 { width: 280px; } } @media only screen and (min-width: 1600px) { .mxd-stats-cards__image.mxd-stats-cards-image-1 { width: 470px; top: 4rem; left: -6rem; } .mxd-stats-cards__image.mxd-stats-cards-image-2 { width: 620px; bottom: auto; top: 4rem; padding-top: 0; } .mxd-stats-cards__image.mxd-stats-cards-image-3 { width: 620px; } .mxd-stats-cards__image.mxd-stats-cards-image-4 { width: 400px; } } /* ------------------------------------------------*/ /* Features - Statistics Cards End */ /* ------------------------------------------------*/ /* ------------------------------------------------*/ /* Features - Services Cards #01 Start */ /* ------------------------------------------------*/ .mxd-services-cards { position: relative; } .mxd-services-cards__item { position: relative; height: auto; } @media only screen and (min-width: 768px) { .mxd-services-cards__item { height: 540px; } } @media only screen and (min-width: 1600px) { .mxd-services-cards__item { height: 760px; } } .mxd-services-cards__inner { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -moz-box-orient: vertical; -moz-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: start; -moz-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; position: relative; width: 100%; height: 100%; overflow: hidden; } @media only screen and (min-width: 1200px) { .mxd-services-cards__inner.justify-end { -webkit-box-pack: end; -moz-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } .mxd-services-cards__inner.justify-between { -webkit-box-pack: justify; -moz-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } } .mxd-services-cards__controls { position: absolute; top: 1rem; right: 1rem; z-index: 2; } .mxd-services-cards__title { margin-bottom: 3.6rem; padding-right: 2.6rem; } .mxd-services-cards__title p { font: normal var(--fw-medium) 3.6rem/1.1 var(--_font-accent); letter-spacing: -0.06rem; color: var(--t-bright); } .mxd-services-cards__title p.opposite { color: var(--t-opp-bright); } .mxd-services-cards__title p.permanent-light { color: var(--pt-t-light-bright); } .mxd-services-cards__title p.permanent-dark { color: var(--pt-t-dark-bright); } @media only screen and (min-width: 768px) { .mxd-services-cards__title { margin-bottom: 3.4rem; } .mxd-services-cards__title p { font-size: 5rem; } } @media only screen and (min-width: 1200px) { .mxd-services-cards__title { z-index: 1; } .mxd-services-cards__title.width-60 { width: 60%; max-width: 640px; } .mxd-services-cards__title.width-70 { width: 75%; max-width: 360px; } } @media only screen and (min-width: 1400px) { .mxd-services-cards__title.width-70 { max-width: 440px; } } @media only screen and (min-width: 1600px) { .mxd-services-cards__title { margin-bottom: 4rem; } .mxd-services-cards__title p { font-size: 7rem; } .mxd-services-cards__title.width-70 { max-width: 564px; } } @media only screen and (min-width: 1200px) { .mxd-services-cards__info { z-index: 1; } .mxd-services-cards__info.width-60 { width: 60%; max-width: 640px; } .mxd-services-cards__info.width-70 { width: 70%; max-width: 300px; } } @media only screen and (min-width: 1400px) { .mxd-services-cards__info.width-70 { max-width: 440px; } } @media only screen and (min-width: 1600px) { .mxd-services-cards__info.width-70 { max-width: 490px; } } .mxd-services-cards__tags { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 1rem; margin-bottom: 3.2rem; } @media only screen and (min-width: 1600px) { .mxd-services-cards__tags { gap: 1.4rem; margin-bottom: 3.8rem; } } .mxd-services-cards__image { width: 100%; max-width: 400px; margin-top: 3.4rem; } .mxd-services-cards__image.mxd-services-cards-image-3 .image-2 { display: none; } @media only screen and (min-width: 1200px) { .mxd-services-cards__image { position: absolute; max-width: none; margin-top: 0; z-index: 0; } .mxd-services-cards__image.mxd-services-cards-image-1 { width: 480px; right: 0; bottom: -240px; } .mxd-services-cards__image.mxd-services-cards-image-2 { width: 380px; left: 50%; right: auto; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); bottom: -220px; } .mxd-services-cards__image.mxd-services-cards-image-3 { width: 50%; height: 100%; top: 0; right: 0; } .mxd-services-cards__image.mxd-services-cards-image-3 .image-1, .mxd-services-cards__image.mxd-services-cards-image-3 .image-2 { position: absolute; } .mxd-services-cards__image.mxd-services-cards-image-3 .image-1 { width: 300px; left: 0; top: -100px; } .mxd-services-cards__image.mxd-services-cards-image-3 .image-2 { display: block; width: 480px; bottom: -180px; right: -40px; } .mxd-services-cards__image.mxd-services-cards-image-4 { width: 280px; top: 1rem; right: -50px; } .mxd-services-cards__image.mxd-services-cards-image-5 { width: 450px; bottom: -30px; right: -80px; } } @media only screen and (min-width: 1600px) { .mxd-services-cards__image.mxd-services-cards-image-1 { width: 710px; right: calc(50% - 360px); bottom: -70px; } .mxd-services-cards__image.mxd-services-cards-image-2 { width: 630px; left: 50%; right: auto; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); bottom: -125px; } .mxd-services-cards__image.mxd-services-cards-image-3 .image-1 { width: 300px; left: 0; top: 90px; } .mxd-services-cards__image.mxd-services-cards-image-3 .image-2 { display: block; width: 100%; top: 100px; right: 0; } .mxd-services-cards__image.mxd-services-cards-image-4 { width: 600px; top: 30px; right: 55px; transform: rotate(-27deg); } .mxd-services-cards__image.mxd-services-cards-image-5 { width: 430px; bottom: -10px; right: -90px; } } /* ------------------------------------------------*/ /* Features - Services Cards #01 End */ /* ------------------------------------------------*/ /* ------------------------------------------------*/ /* Features - Services Cards #02 Start */ /* ------------------------------------------------*/ .mxd-services-cards-s { position: relative; } .mxd-services-cards-s__item { position: relative; height: auto; } @media only screen and (min-width: 768px) { .mxd-services-cards-s__item { height: 420px; } } @media only screen and (min-width: 1600px) { .mxd-services-cards-s__item { height: 600px; } } .mxd-services-cards-s__inner { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -moz-box-orient: vertical; -moz-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: start; -moz-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; position: relative; width: 100%; height: 100%; overflow: hidden; } @media only screen and (min-width: 1200px) { .mxd-services-cards-s__inner.justify-end { -webkit-box-pack: end; -moz-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } .mxd-services-cards-s__inner.justify-between { -webkit-box-pack: justify; -moz-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } } .mxd-services-cards-s__title { margin-bottom: 2.8rem; } .mxd-services-cards-s__title p { font: normal var(--fw-medium) 3.6rem/1.2 var(--_font-accent); color: var(--t-bright); font-size: 3.6rem; } .mxd-services-cards-s__title p.opposite { color: var(--t-opp-bright); } @media only screen and (min-width: 992px) { .mxd-services-cards-s__title { width: 50%; } } @media only screen and (min-width: 1200px) { .mxd-services-cards-s__title { width: 100%; z-index: 1; } .mxd-services-cards-s__title p { font-size: 4rem; } } @media only screen and (min-width: 1600px) { .mxd-services-cards-s__title p { font-size: 5rem; } } @media only screen and (min-width: 992px) { .mxd-services-cards-s__info { width: 50%; } } @media only screen and (min-width: 1200px) { .mxd-services-cards-s__info { width: 100%; z-index: 1; } .mxd-services-cards-s__info.width-50 { width: 50%; max-width: 480px; } } .mxd-services-cards-s__tags { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 1rem; margin-bottom: 2.6rem; } .mxd-services-cards-s__image { width: 100%; margin-top: 2.8rem; } @media only screen and (min-width: 992px) { .mxd-services-cards-s__image { position: absolute; top: 0; right: -3rem; width: 50%; } } @media only screen and (min-width: 1200px) { .mxd-services-cards-s__image { max-width: none; margin-top: 0; z-index: 0; } .mxd-services-cards-s__image.image-right { top: 3rem; } .mxd-services-cards-s__image.image-top-right { width: 260px; top: -80px; right: -30px; } .mxd-services-cards-s__image.image-bottom { width: 100%; max-width: 300px; top: auto; right: auto; left: 50%; right: auto; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); bottom: -160px; } .mxd-services-cards-s__image.image-bottom-2 { bottom: -260px; } .mxd-services-cards-s__image.image-top { width: 100%; max-width: 330px; top: auto; right: auto; top: -120px; } } @media only screen and (min-width: 1600px) { .mxd-services-cards-s__image.image-top-right { width: 414px; top: -120px; right: -60px; } .mxd-services-cards-s__image.image-bottom { max-width: 470px; bottom: -200px; } .mxd-services-cards-s__image.image-bottom-2 { bottom: -350px; } .mxd-services-cards-s__image.image-top { max-width: 470px; top: -100px; } } /* ------------------------------------------------*/ /* Features - Services Cards #02 End */ /* ------------------------------------------------*/ /* ------------------------------------------------*/ /* Features - Services List Start */ /* ------------------------------------------------*/ .mxd-services-list { position: relative; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -moz-box-orient: vertical; -moz-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .mxd-services-list.grid-top { padding-top: 14rem; } @media only screen and (min-width: 768px) { .mxd-services-list.grid-top { padding-top: 16rem; } } @media only screen and (min-width: 1600px) { .mxd-services-list.grid-top { padding-top: 20rem; } } @media only screen and (min-width: 1200px) and (hover) and (prefers-reduced-motion: no-preference) { .mxd-services-list > .mxd-services-list__item { -webkit-transition: opacity 0.3s ease; -moz-transition: opacity 0.3s ease; transition: opacity 0.3s ease; } .mxd-services-list:hover > .mxd-services-list__item:not(:hover) { opacity: 0.2; } } .mxd-services-list__item { position: relative; margin-top: -2px; } .mxd-services-list__item:first-of-type { margin-top: 0; } .mxd-services-list__border { position: relative; left: 1.5rem; width: -moz-calc(100% - 3rem); width: calc(100% - 3rem); height: 2px; background-color: var(--st-bright); } .mxd-services-list__inner { padding: 6rem 0; } .mxd-services-list__title { margin-bottom: 3.4rem; } .mxd-services-list__title p { font: normal var(--fw-medium) 4.4rem/0.7 var(--_font-accent); letter-spacing: -0.06rem; color: var(--t-bright); } @media only screen and (min-width: 1200px) { .mxd-services-list__title { margin-bottom: 0; } .mxd-services-list__title p { font-size: 9rem; } } @media only screen and (min-width: 1600px) { .mxd-services-list__title p { font-size: 12rem; } } .mxd-services-list__descr { margin-bottom: 2.6rem; } .mxd-services-list__descr p { color: var(--t-medium); font-size: 1.8rem; } @media only screen and (min-width: 1200px) { .mxd-services-list__descr { margin-bottom: 0; } } .mxd-services-list__tagslist ul li p { color: var(--t-medium); font-size: 1.8rem; } @media only screen and (min-width: 1200px) { .mxd-services-list__tagslist { padding: 0 3rem; } } /* ------------------------------------------------*/ /* Features - Services List End */ /* ------------------------------------------------*/ /* ------------------------------------------------*/ /* Features - Capabilities List Start */ /* ------------------------------------------------*/ .mxd-cpb-list { position: relative; } @media only screen and (min-width: 1200px) and (hover) and (prefers-reduced-motion: no-preference) { .mxd-cpb-list > .mxd-cpb-list__item { -webkit-transition: opacity 0.3s ease; -moz-transition: opacity 0.3s ease; transition: opacity 0.3s ease; } .mxd-cpb-list:hover > .mxd-cpb-list__item:not(:hover) { opacity: 0.2; } } .mxd-cpb-list__item { position: relative; display: block; margin-top: -2px; } .mxd-cpb-list__item:first-of-type { margin-top: 0; } .mxd-cpb-list__divider { position: relative; width: 100%; height: 2px; background-color: var(--st-bright); } .mxd-cpb-list__content { position: relative; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -moz-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; padding: 3rem 0 3.5rem 0; overflow: hidden; } @media only screen and (min-width: 1200px) { .mxd-cpb-list__content { padding: 3rem 0; } } .mxd-cpb-list__title { position: relative; font: normal var(--fw-medium) 2.2rem/1.2 var(--_font-accent); color: var(--t-bright); } .mxd-cpb-list__title a { color: var(--t-bright); } .mxd-cpb-list__title.opposite { color: var(--t-opp-bright); } .mxd-cpb-list__title.opposite a { color: var(--t-opp-bright); } @media only screen and (min-width: 1200px) { .mxd-cpb-list__title { font-size: 3rem; } } .mxd-cpb-list__num { font: normal var(--fw-medium) 2.2rem/1.2 var(--_font-accent); color: var(--t-muted); } @media only screen and (min-width: 1200px) { .mxd-cpb-list__num { font-size: 3rem; color: var(--t-bright); } } .mxd-cpb-list__image { display: block; -moz-border-radius: var(--_radius-m); border-radius: var(--_radius-m); overflow: hidden; margin-bottom: 4rem; } @media only screen and (min-width: 1200px) { .mxd-cpb-list__image { display: none; } } /* ------------------------------------------------*/ /* Features - Capabilities List End */ /* ------------------------------------------------*/ /* ------------------------------------------------*/ /* Features - Resume List Start */ /* ------------------------------------------------*/ .mxd-res-list { position: relative; } @media only screen and (min-width: 1200px) and (hover) and (prefers-reduced-motion: no-preference) { .mxd-res-list > .mxd-res-list__item { -webkit-transition: opacity 0.3s ease; -moz-transition: opacity 0.3s ease; transition: opacity 0.3s ease; } .mxd-res-list:hover > .mxd-res-list__item:not(:hover) { opacity: 0.2; } } .mxd-res-list__item { position: relative; display: block; margin-top: -2px; } .mxd-res-list__item:first-of-type { margin-top: 0; } .mxd-res-list__divider { position: relative; width: 100%; height: 2px; background-color: var(--st-bright); } .mxd-res-list__content { position: relative; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: reverse; -moz-box-orient: vertical; -moz-box-direction: reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; -webkit-box-pack: justify; -moz-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; padding: 3.6rem 0 3.5rem 0; overflow: hidden; } @media only screen and (min-width: 1200px) { .mxd-res-list__content { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -moz-box-orient: horizontal; -moz-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-pack: justify; -moz-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; padding: 6rem 0 7rem 0; } } .mxd-res-list__data { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -moz-box-orient: vertical; -moz-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 1.6rem; } @media only screen and (min-width: 1200px) { .mxd-res-list__data { gap: 2.8rem; } } .mxd-res-list__title h3 { font-size: 3rem; } @media only screen and (min-width: 768px) { .mxd-res-list__title h3 { font-size: 4.4rem; } } @media only screen and (min-width: 1200px) { .mxd-res-list__title h3 { font-size: 4.4rem; } } .mxd-res-list__source { font-size: 1.6rem; margin-top: 0.2rem; } @media only screen and (min-width: 1600px) { .mxd-res-list__source { font-size: 1.8rem; } } .mxd-res-list__descr { max-width: 560px; } .mxd-res-list__year { margin-bottom: 1.1rem; } .mxd-res-list__year p { font-weight: var(--fw-medium); color: var(--t-bright); } /* ------------------------------------------------*/ /* Features - Resume List End */ /* ------------------------------------------------*/ /* ------------------------------------------------*/ /* Features - Approach List Start */ /* ------------------------------------------------*/ .mxd-approach-list { position: relative; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -moz-box-orient: vertical; -moz-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } @media only screen and (min-width: 1200px) and (hover) and (prefers-reduced-motion: no-preference) { .mxd-approach-list > .mxd-approach-list__item { -webkit-transition: opacity var(--_animspeed-medium) ease; -moz-transition: opacity var(--_animspeed-medium) ease; transition: opacity var(--_animspeed-medium) ease; } .no-touch .mxd-approach-list:hover > .mxd-approach-list__item:not(:hover) { opacity: 0.2; } } .mxd-approach-list__item { position: relative; width: 100%; margin-top: -2px; } .mxd-approach-list__item:first-of-type { margin-top: 0; } .no-touch .mxd-approach-list__item:hover .mxd-approach-list__image img { -webkit-animation-play-state: running; -moz-animation-play-state: running; animation-play-state: running; } .mxd-approach-list__border { position: relative; left: 1.5rem; width: -moz-calc(100% - 3rem); width: calc(100% - 3rem); height: 2px; background-color: var(--st-bright); } .mxd-approach-list__inner { padding: 7rem 0; } @media only screen and (min-width: 768px) { .mxd-approach-list__inner { padding: 8rem 0; } } .mxd-approach-list__image { display: block; width: 7rem; height: 7rem; margin-bottom: 2.4rem; } .mxd-approach-list__image img { display: block; position: relative; -webkit-animation: spin 5s linear infinite; -moz-animation: spin 5s linear infinite; animation: spin 5s linear infinite; -webkit-animation-play-state: paused; -moz-animation-play-state: paused; animation-play-state: paused; } @media only screen and (min-width: 1200px) { .mxd-approach-list__image { margin-bottom: 0; } } .mxd-approach-list__title { margin-bottom: 2.2rem; } .mxd-approach-list__title p { font: normal var(--fw-medium) 2.2rem/1.2 var(--_font-accent); color: var(--t-bright); } .mxd-approach-list__title p a { color: var(--t-bright); } .mxd-approach-list__title p.opposite { color: var(--t-opp-bright); } .mxd-approach-list__title p.opposite a { color: var(--t-opp-bright); } @media only screen and (min-width: 1200px) { .mxd-approach-list__title { margin-bottom: 0; padding: 0 3rem; text-align: right; } .mxd-approach-list__title p { font-size: 3rem; } } /* ------------------------------------------------*/ /* Features - Approach List End */ /* ------------------------------------------------*/ /* ------------------------------------------------*/ /* Features - Divider Image Parallax Start */ /* ------------------------------------------------*/ /* ------------------------------------------------*/ /* Features - Divider Image Parallax End */ /* ------------------------------------------------*/ /* ------------------------------------------------*/ /* Features - Marquee Start */ /* ------------------------------------------------*/ .marquee { max-width: 100%; overflow: hidden; } .marquee.bright .marquee__text, .marquee.bright .marquee__image { color: var(--t-bright); } .marquee.medium .marquee__text, .marquee.medium .marquee__image { color: var(--t-medium); } .marquee.muted .marquee__text, .marquee.muted .marquee__image { color: var(--t-muted); } .marquee.muted-extra .marquee__text, .marquee.muted-extra .marquee__image { color: var(--t-muted-extra); } .marquee.permanent-desktop .marquee__text, .marquee.permanent-desktop .marquee__image { color: var(--t-bright); } @media only screen and (min-width: 1200px) { .marquee.permanent-desktop .marquee__text, .marquee.permanent-desktop .marquee__image { color: var(--pt-t-light-bright); } .marquee.permanent-desktop .marquee__text { font-weight: var(--fw-regular); } } .marquee--gsap .marquee__top, .marquee--gsap .marquee__bottom { translate: -moz-calc(-100% + 100vw) !important; translate: calc(-100% + 100vw) !important; } .marquee-right--gsap .marquee__toright, .marquee-left--gsap .marquee__toleft { translate: -moz-calc(-100% + 100vw) !important; translate: calc(-100% + 100vw) !important; } .marquee__top, .marquee__bottom, .marquee__toleft, .marquee__toright, .items__container { position: relative; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; width: -webkit-max-content; width: -moz-max-content; width: max-content; will-change: transform; } .marquee__item { margin-top: 1.5rem; margin-right: 1.5rem; } .marquee__item.one-line { margin-top: 0; } .marquee__item.item-regular-xl { margin-right: 3rem; } @media only screen and (min-width: 768px) { .marquee__item { margin-top: 3rem; margin-right: 3rem; } .marquee__item.one-line { margin-top: 0; } .marquee__item.item-regular-xl { margin-right: 6rem; } } .marquee__item { position: relative; width: 430px; height: 320px; -moz-border-radius: var(--_radius-m); border-radius: var(--_radius-m); overflow: hidden; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; gap: 20px; -webkit-animation: animateZ 1s infinite; -moz-animation: animateZ 1s infinite; animation: animateZ 1s infinite; } .marquee__item img { display: block; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .marquee__item.overflow-visible { overflow: visible; } .marquee__item.has-caption { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-align: end; -moz-box-align: end; -ms-flex-align: end; align-items: flex-end; -webkit-box-pack: start; -moz-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; background-color: var(--accent); } .marquee__item.has-caption p { font: normal var(--fw-medium) 2.2rem/1.2 var(--_font-accent); color: var(--t-opp-bright); } .marquee__item.item-vertical { width: 400px; height: 460px; } .marquee__item.item-regular { width: auto; height: auto; -moz-border-radius: 0; border-radius: 0; gap: 0; background-color: transparent; -webkit-animation: animateZ 1s infinite; -moz-animation: animateZ 1s infinite; animation: animateZ 1s infinite; } .marquee__item.item-regular-xl { gap: 3rem; } .marquee__item.item-partners { -webkit-box-pack: center; -moz-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 380px; height: 250px; } .marquee__item.item-partners::before { content: ""; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--base-tint); -moz-border-radius: var(--_radius-m); border-radius: var(--_radius-m); z-index: -1; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); transform: scale(1); -webkit-transition: -webkit-transform var(--_animspeed-slow) var(--_animbezier); transition: -webkit-transform var(--_animspeed-slow) var(--_animbezier); -moz-transition: transform var(--_animspeed-slow) var(--_animbezier), -moz-transform var(--_animspeed-slow) var(--_animbezier); transition: transform var(--_animspeed-slow) var(--_animbezier); transition: transform var(--_animspeed-slow) var(--_animbezier), -webkit-transform var(--_animspeed-slow) var(--_animbezier), -moz-transform var(--_animspeed-slow) var(--_animbezier); } .marquee__item.item-partners img { width: 170px; height: auto; } .marquee__item.item-large { width: 830px; height: 630px; } @media only screen and (min-width: 768px) { .marquee__item { width: 490px; height: 360px; } .marquee__item.has-caption p { font-size: 3rem; } .marquee__item.item-vertical { width: 525px; height: 600px; } .marquee__item.item-regular-xl { gap: 6rem; } } @media only screen and (min-width: 1200px) { .marquee__item { width: 540px; height: 400px; } .marquee__item.item-vertical { width: 470px; height: 540px; } } @media only screen and (min-width: 1400px) { .marquee__item.item-large { width: 880px; height: 670px; } } @media only screen and (min-width: 1600px) { .marquee__item { width: 730px; height: 540px; } .marquee__item.has-caption p { font-size: 5rem; } .marquee__item.item-vertical { width: 525px; height: 600px; } .marquee__item.item-large { width: 1000px; height: 760px; } } .marquee__link { display: block; width: 100%; height: 100%; } .marquee__link img { display: block; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .marquee__text { margin-right: 1.6rem; } .marquee__text.text-with-gliph { margin-right: 0; } .marquee__text.text-with-gliph::after { content: "*"; display: inline; padding-left: 1.6rem; } @media only screen and (min-width: 1200px) { .marquee__text { margin-right: 3.6rem; } .marquee__text.text-with-gliph::after { padding-left: 3.6rem; } } .marquee__image { -ms-flex-negative: 0; flex-shrink: 0; width: 4.1rem; height: 4.1rem; } .marquee__image.image-xl { width: 9rem; height: 9rem; } @media only screen and (min-width: 768px) { .marquee__image { width: 8.1rem; height: 8.1rem; } .marquee__image.image-xl { width: 14rem; height: 14rem; } } @media only screen and (min-width: 1400px) { .marquee__image.image-xl { width: 18rem; height: 18rem; } } .marquee__image img, .marquee__image video { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .marquee__text { font: normal var(--fw-regular) 6rem/1.2 var(--_font-accent); letter-spacing: -0.06rem; } .marquee__text.text-xl { font-weight: var(--fw-medium); font-size: 20rem; line-height: 0.8; } @media only screen and (min-width: 768px) { .marquee__text { font-size: 12rem; } .marquee__text.text-xl { font-size: 30rem; } } @media only screen and (min-width: 1200px) { .marquee__text { font-size: 12rem; } } @media only screen and (min-width: 1400px) { .marquee__text.text-xl { font-size: 40rem; } } .marquee__component { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; width: auto; height: 280px; margin: 3rem 0; -moz-border-radius: var(--_radius-m); border-radius: var(--_radius-m); overflow: hidden; padding: 1rem; background-color: var(--base-tint); border: 1px solid var(--st-muted); } .marquee__component img { -moz-border-radius: 1rem; border-radius: 1rem; } @media only screen and (min-width: 768px) { .marquee__component { -moz-border-radius: 2rem; border-radius: 2rem; } } @media only screen and (min-width: 1600px) { .marquee__component { height: 320px; } } @-webkit-keyframes toLeft { to { -webkit-transform: translateX(-50%); transform: translateX(-50%); } } @-moz-keyframes toLeft { to { -moz-transform: translateX(-50%); transform: translateX(-50%); } } @keyframes toLeft { to { -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); transform: translateX(-50%); } } @-webkit-keyframes toRight { to { -webkit-transform: translateX(0); transform: translateX(0); } } @-moz-keyframes toRight { to { -moz-transform: translateX(0); transform: translateX(0); } } @keyframes toRight { to { -webkit-transform: translateX(0); -moz-transform: translateX(0); transform: translateX(0); } } @-webkit-keyframes animateZ { to { -webkit-transform: translateZ(1px); transform: translateZ(1px); } } @-moz-keyframes animateZ { to { -moz-transform: translateZ(1px); transform: translateZ(1px); } } @keyframes animateZ { to { -webkit-transform: translateZ(1px); -moz-transform: translateZ(1px); transform: translateZ(1px); } } /* ------------------------------------------------*/ /* Features - Marquee End */ /* ------------------------------------------------*/ /* ------------------------------------------------*/ /* Features - Stack Services #01 Start */ /* ------------------------------------------------*/ .stack-wrapper { position: relative; width: 100%; } .stack-wrapper.in-content-stack { margin-top: -7.6rem; } .stack-wrapper.mxd-hero-02-stack { margin-top: -10.6rem; } @media only screen and (min-width: 768px) { .stack-wrapper.mxd-hero-02-stack { margin-top: -13.6rem; } } @media only screen and (min-width: 1200px) { .stack-wrapper.mxd-hero-08-stack { margin-top: -1.6rem; } } @media only screen and (min-width: 1600px) { .stack-wrapper.in-content-stack { margin-top: -4.6rem; } .stack-wrapper.mxd-hero-02-stack { margin-top: -13.6rem; } .stack-wrapper.mxd-hero-08-stack { margin-top: 2.3rem; } } .stack-offset { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; width: 100%; height: 10.6rem; background-color: transparent; } @media only screen and (min-width: 768px) { .stack-offset { height: 13.6rem; } } .services-stack { width: 100%; position: relative; height: 75vh; min-height: 600px; } @media only screen and (min-width: 992px) { .services-stack { height: 600px; min-height: 0; } } @media only screen and (min-width: 1600px) { .services-stack { height: 760px; } } .stack-item { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; position: absolute; width: 100%; height: 100%; padding-bottom: 3rem; } @media only screen and (min-width: 1600px) { .stack-item { padding-bottom: 6rem; } } .mxd-services-stack__inner { position: relative; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -moz-box-orient: vertical; -moz-box-direction: normal; -ms-flex-direction: column; flex-direction: column; overflow: hidden; width: 100%; height: 100%; padding: 2.6rem 3rem 0 3rem; z-index: 0; -moz-border-radius: var(--_radius-l); border-radius: var(--_radius-l); } .mxd-services-stack__inner.radius-dark { -moz-border-radius: 3.6rem; border-radius: 3.6rem; } .mxd-services-stack__inner.showcase-inner { padding: 2.6rem 3rem 3rem 3rem; } @media only screen and (min-width: 768px) { .mxd-services-stack__inner { padding: 4.2rem 5rem 0 5rem; } .mxd-services-stack__inner.showcase-inner { padding: 4.2rem 5rem 5rem 5rem; } .mxd-services-stack__inner.radius-dark { -moz-border-radius: 4.6rem; border-radius: 4.6rem; } } @media only screen and (min-width: 992px) { .mxd-services-stack__inner { padding: 4.2rem 5rem 4.6rem 5rem; } .mxd-services-stack__inner.justify-end { -webkit-box-pack: end; -moz-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } .mxd-services-stack__inner.justify-between { -webkit-box-pack: justify; -moz-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } } .mxd-services-stack__container { position: relative; width: 100%; height: 100%; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -moz-box-orient: vertical; -moz-box-direction: normal; -ms-flex-direction: column; flex-direction: column; overflow: hidden; } .mxd-services-stack__controls { position: absolute; top: 1rem; right: 1rem; z-index: 1; } .mxd-services-stack__title { margin-bottom: 3.4rem; padding-right: 2.6rem; } .mxd-services-stack__title.showcase-title { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: reverse; -moz-box-orient: vertical; -moz-box-direction: reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; gap: 0; width: 100%; padding-right: 0; margin-bottom: 1.8rem; } @media only screen and (min-width: 768px) { .mxd-services-stack__title.showcase-title { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -moz-box-orient: horizontal; -moz-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-pack: justify; -moz-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; gap: 3rem; margin-bottom: 2.2rem; } } @media only screen and (min-width: 992px) { .mxd-services-stack__title { z-index: 1; } .mxd-services-stack__title.width-60 { width: 60%; max-width: 580px; } .mxd-services-stack__title.width-70 { width: 70%; } } @media only screen and (min-width: 1200px) { .mxd-services-stack__title h3 { font-size: 7rem; } } @media only screen and (min-width: 1400px) { .mxd-services-stack__title.showcase-title { margin-bottom: 2.8rem; } } @media only screen and (min-width: 1600px) { .mxd-services-stack__title { margin-bottom: 4rem; } .mxd-services-stack__title.width-60 { max-width: 800px; } .mxd-services-stack__title.showcase-title { margin-bottom: 3rem; } } .mxd-services-stack__number { font: normal var(--fw-medium) 3.6rem/1.2 var(--_font-accent); } .mxd-services-stack__number.t-muted { color: var(--t-muted); } .mxd-services-stack__number.t-muted-extra { color: var(--t-muted-extra); } .mxd-services-stack__number.t-opp-brigth { color: var(--t-opp-bright); } .mxd-services-stack__number.t-opp-muted { color: var(--t-opp-muted); } @media only screen and (min-width: 768px) { .mxd-services-stack__number { font-size: 5rem; } } @media only screen and (min-width: 1200px) { .mxd-services-stack__number { font-size: 7rem; } } .mxd-services-stack__info { z-index: 1; margin-bottom: 3.3rem; } .mxd-services-stack__info.showcase-info { width: 100%; margin-bottom: 2.7rem; } @media only screen and (min-width: 768px) { .mxd-services-stack__info { width: 80%; margin-bottom: 3.3rem; } .mxd-services-stack__info.showcase-info { margin-bottom: 3.4rem; } } @media only screen and (min-width: 992px) { .mxd-services-stack__info.width-60 { width: 60%; max-width: 470px; margin-bottom: 0; } .mxd-services-stack__info.width-70 { width: 70%; max-width: 300px; } .mxd-services-stack__info.showcase-info { width: 50%; padding-right: 1.5rem; } } @media only screen and (min-width: 1400px) { .mxd-services-stack__info.showcase-info { margin-bottom: 4.4rem; } } @media only screen and (min-width: 1600px) { .mxd-services-stack__info.width-60 { max-width: 610px; } .mxd-services-stack__info.width-70 { max-width: 490px; } .mxd-services-stack__info.showcase-info { margin-bottom: 5rem; } } .mxd-services-stack__works { position: relative; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -moz-box-orient: vertical; -moz-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-flex: 1; -moz-box-flex: 1; -ms-flex: 1; flex: 1; gap: 1.5rem; } @media only screen and (min-width: 768px) { .mxd-services-stack__works { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -moz-box-orient: horizontal; -moz-box-direction: normal; -ms-flex-direction: row; flex-direction: row; gap: 3rem; } } .mxd-services-stack__work { position: relative; width: 100%; height: 100%; overflow: hidden; -moz-border-radius: var(--_radius-m); border-radius: var(--_radius-m); } @media only screen and (min-width: 768px) { .mxd-services-stack__work { width: -moz-calc(50% - 1.5rem); width: calc(50% - 1.5rem); } } .no-touch .mxd-services-stack__work:hover .mxd-services-stack__preview { -webkit-filter: blur(10px); filter: blur(10px); -webkit-transform: scale(1.04); -moz-transform: scale(1.04); -ms-transform: scale(1.04); transform: scale(1.04); } .no-touch .mxd-services-stack__work:hover .mxd-preview-hover { opacity: 1; -webkit-filter: blur(0); filter: blur(0); } .mxd-services-stack__preview { position: absolute; top: 0; left: 0; min-width: 100%; min-height: 100%; -o-object-fit: cover; object-fit: cover; -webkit-transition: all var(--_animspeed-medium) var(--_animbezier); -moz-transition: all var(--_animspeed-medium) var(--_animbezier); transition: all var(--_animspeed-medium) var(--_animbezier); } .mxd-services-stack__tags { display: none; } @media only screen and (min-width: 768px) { .mxd-services-stack__tags { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 1rem; } .mxd-services-stack__tags.tags-absolute { position: absolute; bottom: 0; left: 0; width: 100%; padding: 2.6rem 3rem; -webkit-transition: all var(--_animspeed-medium) var(--_animbezier); -moz-transition: all var(--_animspeed-medium) var(--_animbezier); transition: all var(--_animspeed-medium) var(--_animbezier); } } @media only screen and (min-width: 1200px) { .mxd-services-stack__tags.tags-absolute { padding: 3.6rem 4rem; } } @media only screen and (min-width: 1600px) { .mxd-services-stack__tags { gap: 1.4rem; } } .services-stack__image { position: relative; overflow: hidden; } .services-stack__image .service-img-m { display: none; } @media only screen and (min-width: 992px) { .services-stack__image { position: absolute; top: 0; right: 0; width: 100%; height: 100%; z-index: 0; padding-left: 0; } .services-stack__image .service-img { position: absolute; right: -15%; bottom: 0; height: 100%; width: auto; } .services-stack__image .service-img-s { display: none; } .services-stack__image .service-img-m { display: block; } } @media only screen and (min-width: 1200px) { .services-stack__image .service-img { position: absolute; right: 0; bottom: -5%; max-height: none; height: 110%; width: auto; } } .portfolio-stack__inner { position: relative; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -moz-box-orient: vertical; -moz-box-direction: normal; -ms-flex-direction: column; flex-direction: column; width: 100%; height: 100%; background-color: var(--base); -moz-border-radius: var(--_radius-l); border-radius: var(--_radius-l); overflow: hidden; cursor: pointer; background-repeat: no-repeat; background-position: center center; -moz-background-size: cover; background-size: cover; } .portfolio-stack__descr { display: none; position: absolute; bottom: 0; left: 0; width: 100%; padding: 2.4rem 3rem; } @media only screen and (min-width: 768px) { .portfolio-stack__descr { display: block; width: 60%; padding: 2.6rem 3rem; } } @media only screen and (min-width: 1200px) { .portfolio-stack__descr { width: 40%; padding: 4rem 5rem 4.6rem 5rem; } } @media only screen and (min-width: 1600px) { .portfolio-stack__descr { width: 33.3334%; } } .portfolio-stack__title.dark { font-weight: 400; } .portfolio-stack__title.light { font-weight: 300; } .portfolio-stack__text { margin-top: 3rem; font-weight: 300; } .portfolio-stack__text.dark { font-weight: 400; } @media only screen and (min-width: 1400px) { .portfolio-stack__text { margin-top: 4rem; } } /* ------------------------------------------------*/ /* Features - Stack Services #01 End */ /* ------------------------------------------------*/ /* ------------------------------------------------*/ /* Features - Stack Services #02 Start */ /* ------------------------------------------------*/ /* ------------------------------------------------*/ /* Features - Stack Services #02 End */ /* ------------------------------------------------*/ /* ------------------------------------------------*/ /* Features - Stack Projects Start */ /* ------------------------------------------------*/ .projects-stack { width: 100%; position: relative; height: 75vh; min-height: 600px; } @media only screen and (min-width: 992px) { .projects-stack { height: 600px; min-height: 0; } } @media only screen and (min-width: 1600px) { .projects-stack { height: 760px; } } .mxd-projects-stack__inner { position: relative; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -moz-box-orient: vertical; -moz-box-direction: normal; -ms-flex-direction: column; flex-direction: column; overflow: hidden; width: 100%; height: 100%; -moz-border-radius: var(--_radius-l); border-radius: var(--_radius-l); padding: 3rem; z-index: 0; } .mxd-projects-stack__inner.justify-between { -webkit-box-pack: justify; -moz-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .mxd-projects-stack__inner.justify-end { -webkit-box-pack: end; -moz-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } @media only screen and (min-width: 768px) { .mxd-projects-stack__inner { padding: 5rem; } } .mxd-projects-stack__image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .mxd-projects-stack__image img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .mxd-projects-stack__image img.mobile { display: block; } .mxd-projects-stack__image img.desktop { display: none; } @media only screen and (min-width: 768px) { .mxd-projects-stack__image img.mobile { display: none; } .mxd-projects-stack__image img.desktop { display: block; } } .mxd-projects-stack__title { position: relative; margin-bottom: 2.4rem; max-width: 600px; } .mxd-projects-stack__title.no-margin { margin-bottom: 0; } .mxd-projects-stack__tags { position: relative; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 1rem; } @media only screen and (min-width: 1600px) { .mxd-projects-stack__tags { gap: 1.4rem; } } /* ------------------------------------------------*/ /* Features - Stack Projects End */ /* ------------------------------------------------*/ /* ------------------------------------------------*/ /* Features - Testimonials Style #01 Start */ /* ------------------------------------------------*/ .mxd-testimonials-card { position: relative; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -moz-box-orient: vertical; -moz-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: justify; -moz-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; gap: 4.6rem; padding: 3rem; height: auto; } @media only screen and (min-width: 768px) { .mxd-testimonials-card { -webkit-box-pack: justify; -moz-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; height: 600px; max-width: 460px; padding: 4rem; } } @media only screen and (min-width: 1400px) { .mxd-testimonials-card { height: 640px; max-width: 500px; } } @media only screen and (min-width: 1600px) { .mxd-testimonials-card { height: 700px; max-width: 630px; } } .mxd-testimonials-card__content { position: relative; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -moz-box-orient: vertical; -moz-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 4.9rem; } .mxd-testimonials-card__media { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -moz-box-orient: horizontal; -moz-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-pack: justify; -moz-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } @media only screen and (min-width: 768px) { .mxd-testimonials-card__media { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -moz-box-orient: horizontal; -moz-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-pack: justify; -moz-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } } .mxd-testimonials-card__photo { width: 8rem; height: 8rem; -moz-border-radius: 50%; border-radius: 50%; overflow: hidden; } .mxd-testimonials-card__photo img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } @media only screen and (min-width: 768px) { .mxd-testimonials-card__photo { width: 12rem; height: 12rem; } } .mxd-testimonials-card__company { position: relative; max-width: 12rem; } @media only screen and (min-width: 768px) { .mxd-testimonials-card__company { max-width: 18rem; } } .mxd-testimonials-card__text p { margin-bottom: 3.3rem; } .mxd-testimonials-card__name { font: normal var(--fw-medium) 2.6rem/1.2 var(--_font-accent); color: var(--t-bright); } .mxd-testimonials-card__name small { display: block; font: normal var(--fw-regular) 1.6rem/1.2 var(--_font-accent); color: var(--t-medium); margin-top: 0.2rem; } .mxd-testimonials-card__name a { color: var(--t-bright); } .mxd-testimonials-card__name.opposite { color: var(--t-opp-bright); } .mxd-testimonials-card__name.opposite a { color: var(--t-opp-bright); } @media only screen and (min-width: 768px) { .mxd-testimonials-card__name { font-size: 3.4rem; } } @media only screen and (min-width: 1600px) { .mxd-testimonials-card__name small { font-size: 1.8rem; } } .mxd-testimonials-photo { position: relative; } @media only screen and (min-width: 992px) { .mxd-testimonials-photo { height: 600px; } } @media only screen and (min-width: 1400px) { .mxd-testimonials-photo { height: 640px; } } @media only screen and (min-width: 1600px) { .mxd-testimonials-photo { height: 760px; } } .mxd-testimonials-photo__content { position: relative; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -moz-box-orient: vertical; -moz-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 4rem; } @media only screen and (min-width: 992px) { .mxd-testimonials-photo__content { padding-right: 6rem; } } .mxd-testimonials-photo__author { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; gap: 1.5rem; } @media only screen and (min-width: 768px) { .mxd-testimonials-photo__author { gap: 3rem; } } .mxd-testimonials-photo__avatar { width: 8rem; height: 8rem; -moz-border-radius: 50%; border-radius: 50%; overflow: hidden; } .mxd-testimonials-photo__avatar img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } @media only screen and (min-width: 768px) { .mxd-testimonials-photo__avatar { width: 12rem; height: 12rem; } } .mxd-testimonials-photo__info { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -moz-box-orient: vertical; -moz-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -moz-box-pack: center; -ms-flex-pack: center; justify-content: center; gap: 0.6rem; width: -moz-calc(100% - 9.5rem); width: calc(100% - 9.5rem); } @media only screen and (min-width: 768px) { .mxd-testimonials-photo__info { width: auto; } } .mxd-testimonials-photo__name { font: normal var(--fw-medium) 2.6rem/1.2 var(--_font-accent); color: var(--t-bright); } .mxd-testimonials-photo__name small { display: block; font: normal var(--fw-regular) 1.6rem/1.2 var(--_font-accent); color: var(--t-medium); margin-top: 0.2rem; } .mxd-testimonials-photo__name a { color: var(--t-bright); } .mxd-testimonials-photo__name.opposite { color: var(--t-opp-bright); } .mxd-testimonials-photo__name.opposite a { color: var(--t-opp-bright); } @media only screen and (min-width: 768px) { .mxd-testimonials-photo__name { font-size: 3.4rem; } } @media only screen and (min-width: 1600px) { .mxd-testimonials-photo__name small { font-size: 1.8rem; } } .mxd-testimonials-photo__position { line-height: 1.2; } .mxd-testimonials-photo__rating { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; gap: 0.8rem; margin-top: 0.5rem; } .mxd-testimonials-photo__rating i { display: block; font-size: 1.8rem; color: var(--t-bright); } @media only screen and (min-width: 1600px) { .mxd-testimonials-photo__rating i { font-size: 2rem; } } .mxd-testimonials-photo__image { position: relative; } @media only screen and (min-width: 992px) { .mxd-testimonials-photo__image { height: 100%; } } .mxd-testimonials-photo__image-inner { overflow: hidden; } .mxd-testimonials-photo__image-inner img { min-width: 100%; min-height: 100%; -o-object-fit: cover; object-fit: cover; } .mxd-testimonials-photo__text { margin-bottom: 6rem; } .mxd-testimonials-photo__text p { margin-bottom: 3rem; } @media only screen and (min-width: 992px) { .mxd-testimonials-photo__text { margin-bottom: 0; } } .testimonials-slider { position: relative; height: auto; padding: 0 3rem; } .testimonials-slider.no-padding { padding: 0; } @media only screen and (min-width: 768px) { .testimonials-slider { padding: 0 6rem; } } @media only screen and (min-width: 1200px) { .testimonials-slider { padding: 0 1.5rem; } } @media only screen and (min-width: 1200px) { .testimonials-slider__shadow { position: absolute; top: 0; right: 0; width: 6rem; height: 100%; background: -webkit-gradient(linear, left top, right top, from(rgba(var(--base-rgb), 0)), to(rgba(var(--base-rgb), 1))); background: -moz-linear-gradient(left, rgba(var(--base-rgb), 0) 0%, rgba(var(--base-rgb), 1) 100%); background: linear-gradient(to right, rgba(var(--base-rgb), 0) 0%, rgba(var(--base-rgb), 1) 100%); z-index: 1; } } .swiper-testimonials { position: relative; height: 100%; padding-bottom: 7rem; } @media only screen and (min-width: 992px) { .swiper-testimonials.no-padding { padding-bottom: 0; } } .swiper-slide { width: 100%; -webkit-filter: blur(4px); filter: blur(4px); -webkit-transition: -webkit-filter var(--_animspeed-slow) var(--_animbezier); transition: -webkit-filter var(--_animspeed-slow) var(--_animbezier); -moz-transition: filter var(--_animspeed-slow) var(--_animbezier); transition: filter var(--_animspeed-slow) var(--_animbezier); transition: filter var(--_animspeed-slow) var(--_animbezier), -webkit-filter var(--_animspeed-slow) var(--_animbezier); } .swiper-slide.mxd-fullwidth-slide { width: 100%; } .swiper-slide.swiper-slide-active { -webkit-filter: blur(0); filter: blur(0); } @media only screen and (min-width: 768px) { .swiper-slide { width: auto; } .swiper-slide.mxd-fullwidth-slide { width: 100%; } } .mxd-slider-btn { display: block; position: absolute; top: auto; right: auto; bottom: 0.2rem; left: auto; width: auto; height: auto; margin: 0; } .mxd-slider-btn::after { display: none; } .mxd-slider-btn-round-prev { left: 0; } .mxd-slider-btn-round-prev.v2 { bottom: 0.2rem; left: 0.2rem; } .mxd-slider-btn-round-next { left: 5.4rem; } .mxd-slider-btn-round-next.v2 { left: auto; bottom: 0.2rem; right: 0.2rem; } .mxd-swiper-pagination-fraction { font: normal var(--fw-regular) 1.6rem/1.6 var(--_font-default); color: var(--t-bright); } .mxd-swiper-pagination-fraction.opposite { color: var(--t-opp-bright); } .swiper-testimonials__controls { position: relative; position: absolute; bottom: 0; left: 0; width: 100%; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -moz-box-orient: horizontal; -moz-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-align: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -moz-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; gap: 3rem; padding: 0 1.5rem; } .swiper-testimonials__controls .mxd-slider-btn { position: relative; bottom: auto; width: auto; height: auto; margin: 0; } .swiper-testimonials__controls .mxd-slider-btn-round-prev { left: auto; } .swiper-testimonials__controls .mxd-slider-btn-round-next { left: auto; } .swiper-testimonials__controls .mxd-swiper-pagination-fraction { position: relative; top: auto; right: auto; bottom: auto; left: auto; width: auto; } @media only screen and (min-width: 992px) { .swiper-testimonials__controls { position: absolute; bottom: 0; left: 1.5rem; -webkit-box-pack: start; -moz-box-pack: start; -ms-flex-pack: start; justify-content: start; padding: 0; } } /* ------------------------------------------------*/ /* Features - Testimonials Style #01 End */ /* ------------------------------------------------*/ /* ------------------------------------------------*/ /* Features - Testimonials Style #02 Start */ /* ------------------------------------------------*/ .testimonials-slider-2 { position: relative; height: auto; } .swiper-testimonials-2 { position: relative; height: 100%; padding-bottom: 7rem; } @media only screen and (min-width: 1200px) { .swiper-testimonials-2.no-padding { padding-bottom: 0; } } .swiper-slide.no-blur { -webkit-filter: blur(0); filter: blur(0); } .mxd-testimonials-image { position: relative; } .mxd-testimonials-image__content { position: relative; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -moz-box-orient: vertical; -moz-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 4rem; } @media only screen and (min-width: 1200px) { .mxd-testimonials-image__content { padding-right: 6rem; padding-bottom: 9.6rem; } } .mxd-testimonials-image__img { position: relative; } @media only screen and (min-width: 1200px) { .mxd-testimonials-image__img { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; } } .mxd-testimonials-image__author { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; gap: 1.5rem; } @media only screen and (min-width: 768px) { .mxd-testimonials-image__author { gap: 3rem; } } .mxd-testimonials-image__avatar { width: 8rem; height: 8rem; -moz-border-radius: 50%; border-radius: 50%; overflow: hidden; } .mxd-testimonials-image__avatar img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } @media only screen and (min-width: 768px) { .mxd-testimonials-image__avatar { width: 12rem; height: 12rem; } } .mxd-testimonials-image__info { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -moz-box-orient: vertical; -moz-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -moz-box-pack: center; -ms-flex-pack: center; justify-content: center; gap: 0.6rem; width: -moz-calc(100% - 9.5rem); width: calc(100% - 9.5rem); } @media only screen and (min-width: 768px) { .mxd-testimonials-image__info { width: auto; } } .mxd-testimonials-image__name { font: normal var(--fw-medium) 2.6rem/1.2 var(--_font-accent); color: var(--t-bright); } .mxd-testimonials-image__name small { display: block; font: normal var(--fw-regular) 1.6rem/1.2 var(--_font-accent); color: var(--t-medium); margin-top: 0.2rem; } .mxd-testimonials-image__name a { color: var(--t-bright); } .mxd-testimonials-image__name.opposite { color: var(--t-opp-bright); } .mxd-testimonials-image__name.opposite a { color: var(--t-opp-bright); } @media only screen and (min-width: 768px) { .mxd-testimonials-image__name { font-size: 3.4rem; } } @media only screen and (min-width: 1600px) { .mxd-testimonials-image__name small { font-size: 1.8rem; } } .mxd-testimonials-image__position { line-height: 1.2; } .mxd-testimonials-image__rating { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; gap: 0.8rem; margin-top: 0.5rem; } .mxd-testimonials-image__rating i { display: block; font-size: 1.8rem; color: var(--t-bright); } .mxd-testimonials-image__rating.opposite i { color: var(--t-opp-bright); } @media only screen and (min-width: 1600px) { .mxd-testimonials-image__rating i { font-size: 2rem; } } .mxd-testimonials-image__text { margin-bottom: 6rem; } .mxd-testimonials-image__text p { margin-bottom: 3rem; } @media only screen and (min-width: 1200px) { .mxd-testimonials-image__text { margin-bottom: 0; } } /* ------------------------------------------------*/ /* Features - Testimonials Style #02 End */ /* ------------------------------------------------*/ /* ------------------------------------------------*/ /* Features - Partners Cards Start */ /* ------------------------------------------------*/ .mxd-partners-cards { position: relative; } .mxd-partners-cards__item { position: relative; height: 250px; } .mxd-partners-cards__inner { position: relative; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -moz-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 100%; height: 100%; } .mxd-partners-cards__inner::before { content: ""; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--base-tint); -moz-border-radius: var(--_radius-m); border-radius: var(--_radius-m); z-index: -1; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); transform: scale(1); -webkit-transition: -webkit-transform var(--_animspeed-slow) var(--_animbezier); transition: -webkit-transform var(--_animspeed-slow) var(--_animbezier); -moz-transition: transform var(--_animspeed-slow) var(--_animbezier), -moz-transform var(--_animspeed-slow) var(--_animbezier); transition: transform var(--_animspeed-slow) var(--_animbezier); transition: transform var(--_animspeed-slow) var(--_animbezier), -webkit-transform var(--_animspeed-slow) var(--_animbezier), -moz-transform var(--_animspeed-slow) var(--_animbezier); } .no-touch .mxd-partners-cards__inner:hover::before { -webkit-transform: scale(1.04); -moz-transform: scale(1.04); -ms-transform: scale(1.04); transform: scale(1.04); } .no-touch .mxd-partners-cards__inner:hover .mxd-partners-cards__logo img { opacity: 1; } .mxd-partners-cards__logo { width: 170px; height: auto; } .mxd-partners-cards__logo img { opacity: 0.6; -webkit-transition: opacity var(--_animspeed-slow) ease; -moz-transition: opacity var(--_animspeed-slow) ease; transition: opacity var(--_animspeed-slow) ease; } /* ------------------------------------------------*/ /* Features - Partners Cards End */ /* ------------------------------------------------*/ /* ------------------------------------------------*/ /* Features - Tech Stack Cards Start */ /* ------------------------------------------------*/ .mxd-tech-stack-cards { position: relative; } .mxd-tech-stack-cards.grid-cards { display: -ms-grid; display: grid; -ms-grid-columns: (1fr)[2]; grid-template-columns: repeat(2, 1fr); grid-column-gap: 3rem; grid-row-gap: 3rem; } @media only screen and (min-width: 768px) { .mxd-tech-stack-cards.grid-cards { -ms-grid-columns: (1fr)[3]; grid-template-columns: repeat(3, 1fr); } } @media only screen and (min-width: 1400px) { .mxd-tech-stack-cards.grid-cards { -ms-grid-columns: (1fr)[4]; grid-template-columns: repeat(4, 1fr); } } .mxd-tech-stack-cards__item { position: relative; } .mxd-tech-stack-cards__inner { position: relative; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; gap: 2.6rem; width: 100%; height: 100%; padding: 3rem; } .mxd-tech-stack-cards__inner::before { content: ""; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--base-tint); -moz-border-radius: var(--_radius-m); border-radius: var(--_radius-m); z-index: -1; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); transform: scale(1); -webkit-transition: -webkit-transform var(--_animspeed-slow) var(--_animbezier); transition: -webkit-transform var(--_animspeed-slow) var(--_animbezier); -moz-transition: transform var(--_animspeed-slow) var(--_animbezier), -moz-transform var(--_animspeed-slow) var(--_animbezier); transition: transform var(--_animspeed-slow) var(--_animbezier); transition: transform var(--_animspeed-slow) var(--_animbezier), -webkit-transform var(--_animspeed-slow) var(--_animbezier), -moz-transform var(--_animspeed-slow) var(--_animbezier); } .no-touch .mxd-tech-stack-cards__inner:hover::before { -webkit-transform: scale(1.04); -moz-transform: scale(1.04); -ms-transform: scale(1.04); transform: scale(1.04); } .mxd-tech-stack-cards__inner-v2 { position: relative; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -moz-box-orient: vertical; -moz-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; gap: 1.6rem; width: 100%; height: 100%; padding: 3rem 1rem; } .mxd-tech-stack-cards__inner-v2::before { content: ""; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--base-tint); -moz-border-radius: var(--_radius-m); border-radius: var(--_radius-m); z-index: -1; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); transform: scale(1); -webkit-transition: -webkit-transform var(--_animspeed-slow) var(--_animbezier); transition: -webkit-transform var(--_animspeed-slow) var(--_animbezier); -moz-transition: transform var(--_animspeed-slow) var(--_animbezier), -moz-transform var(--_animspeed-slow) var(--_animbezier); transition: transform var(--_animspeed-slow) var(--_animbezier); transition: transform var(--_animspeed-slow) var(--_animbezier), -webkit-transform var(--_animspeed-slow) var(--_animbezier), -moz-transform var(--_animspeed-slow) var(--_animbezier); } .no-touch .mxd-tech-stack-cards__inner-v2:hover::before { -webkit-transform: scale(1.04); -moz-transform: scale(1.04); -ms-transform: scale(1.04); transform: scale(1.04); } @media only screen and (min-width: 768px) { .mxd-tech-stack-cards__inner-v2 { gap: 2.2rem; padding: 4rem 1rem; } } .mxd-tech-stack-cards__inner-v3 { position: relative; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -moz-box-orient: vertical; -moz-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; gap: 1.6rem; width: 100%; height: 100%; padding: 3rem 4rem; background-color: var(--base-tint); -moz-border-radius: var(--_radius-m); border-radius: var(--_radius-m); } @media only screen and (min-width: 768px) { .mxd-tech-stack-cards__inner-v3 { gap: 2.2rem; padding: 4rem 6rem; } } .mxd-tech-stack-cards__logo { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -moz-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 8rem; height: 8rem; -moz-border-radius: var(--_radius-pt-m); border-radius: var(--_radius-pt-m); background-color: var(--accent); color: var(--t-opp-bright); } .mxd-tech-stack-cards__logo svg, .mxd-tech-stack-cards__logo img { display: block; width: 4.4rem; height: auto; } .mxd-tech-stack-cards__logo svg { fill: currentColor; } .mxd-tech-stack-cards__icon { position: relative; height: 7rem; } .mxd-tech-stack-cards__icon img { width: auto; height: 100%; } @media only screen and (min-width: 768px) { .mxd-tech-stack-cards__icon { height: 9rem; } } /* ------------------------------------------------*/ /* Features - Tech Stack Cards End */ /* ------------------------------------------------*/ /* ------------------------------------------------*/ /* Features - Blog Preview Start */ /* ------------------------------------------------*/ .mxd-blog-preview { position: relative; } .mxd-blog-preview__item { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -moz-box-orient: vertical; -moz-box-direction: normal; -ms-flex-direction: column; flex-direction: column; padding-bottom: 3.2rem; } .mxd-blog-preview__item:last-of-type { padding-bottom: 0; } @media only screen and (min-width: 768px) { .mxd-blog-preview__item { padding-bottom: 4.2rem; } } @media only screen and (min-width: 1200px) { .mxd-blog-preview__item { padding-bottom: 0; } } .mxd-blog-preview__media { display: block; position: relative; height: 460px; -moz-border-radius: var(--_radius-l); border-radius: var(--_radius-l); margin-bottom: 1.5rem; overflow: hidden; } .no-touch .mxd-blog-preview__media:hover .mxd-preview-hover { opacity: 1; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } @media only screen and (min-width: 768px) { .mxd-blog-preview__media { height: 600px; margin-bottom: 2.4rem; } } @media only screen and (min-width: 1200px) { .mxd-blog-preview__media { height: 460px; } } @media only screen and (min-width: 1600px) { .mxd-blog-preview__media { height: 600px; } } .mxd-blog-preview__image { position: relative; width: 100%; height: 460px; -moz-border-radius: var(--_radius-l); border-radius: var(--_radius-l); overflow: hidden; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -moz-box-orient: vertical; -moz-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: end; -moz-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; background-repeat: no-repeat; background-position: center; -moz-background-size: cover; background-size: cover; } .mxd-blog-preview__image img { display: block; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } @media only screen and (min-width: 768px) { .mxd-blog-preview__image { height: 600px; } } @media only screen and (min-width: 1200px) { .mxd-blog-preview__image { height: 460px; } } @media only screen and (min-width: 1600px) { .mxd-blog-preview__image { height: 600px; } } .mxd-blog-preview__tags { position: absolute; bottom: 0; left: 0; width: 100%; padding: 2.6rem 3rem; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 1rem; -webkit-transition: all var(--_animspeed-medium) var(--_animbezier); -moz-transition: all var(--_animspeed-medium) var(--_animbezier); transition: all var(--_animspeed-medium) var(--_animbezier); } @media only screen and (min-width: 768px) { .mxd-blog-preview__tags { padding: 3.6rem 4rem; } } @media only screen and (min-width: 1600px) { .mxd-blog-preview__tags { gap: 1.4rem; } } .mxd-blog-preview__data { padding: 0 3rem; } .mxd-blog-preview__data a { display: inline; font: normal var(--fw-regular) 2.2rem/1.2 var(--_font-accent); line-height: 1.2; color: var(--t-medium); text-decoration: none; background: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0))), -webkit-gradient(linear, left top, right top, from(var(--t-bright)), to(var(--t-bright))); background: -moz-linear-gradient(left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)), -moz-linear-gradient(left, var(--t-bright), var(--t-bright)); background: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)), linear-gradient(to right, var(--t-bright), var(--t-bright)); -moz-background-size: 100% 1px, 0 1px; background-size: 100% 1px, 0 1px; background-position: 100% 100%, 0 100%; background-repeat: no-repeat; -webkit-transition: background-size 300ms, color 300ms; -moz-transition: background-size 300ms, color 300ms, -moz-background-size 300ms; transition: background-size 300ms, color 300ms; transition: background-size 300ms, color 300ms, -moz-background-size 300ms; } .no-touch .mxd-blog-preview__data a:hover { color: var(--t-bright); -moz-background-size: 0 1px, 100% 1px; background-size: 0 1px, 100% 1px; } .mxd-blog-preview__data a span { font-weight: var(--fw-medium); line-height: 1.2; color: var(--t-bright); } .mxd-blog-preview__data p { font: normal var(--fw-regular) 2.2rem/1.2 var(--_font-accent); } @media only screen and (min-width: 768px) { .mxd-blog-preview__data { padding: 0 4rem; } } @media only screen and (min-width: 1600px) { .mxd-blog-preview__data p, .mxd-blog-preview__data a { font-size: 3rem; } } /* ------------------------------------------------*/ /* Features - Blog Preview End */ /* ------------------------------------------------*/ /* ------------------------------------------------*/ /* Features - Accordion Start */ /* ------------------------------------------------*/ .mxd-accordion { position: relative; } @media only screen and (min-width: 1200px) and (hover) and (prefers-reduced-motion: no-preference) { .mxd-accordion > .mxd-accordion__item { -webkit-transition: opacity 0.3s ease; -moz-transition: opacity 0.3s ease; transition: opacity 0.3s ease; } .mxd-accordion:hover > .mxd-accordion__item:not(:hover) { opacity: 0.2; } } .mxd-accordion__item { position: relative; cursor: pointer; margin-top: -2px; } .mxd-accordion__item:first-of-type { margin-top: 0; } .mxd-accordion__divider { position: relative; width: 100%; height: 2px; background-color: var(--st-bright); } .mxd-accordion__content { position: relative; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -moz-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; padding: 0 0 3.6rem 0; overflow: hidden; display: none; } @media only screen and (min-width: 1200px) { .mxd-accordion__content { padding: 0 0 3.4rem 0; } } .mxd-accordion__title { position: relative; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -moz-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; padding: 3rem 0; } .mxd-accordion__title p { font: normal var(--fw-medium) 2.2rem/1.2 var(--_font-accent); color: var(--t-bright); } .mxd-accordion__title p a { color: var(--t-bright); } .mxd-accordion__title p.opposite { color: var(--t-opp-bright); } .mxd-accordion__title p.opposite a { color: var(--t-opp-bright); } @media only screen and (min-width: 1200px) { .mxd-accordion__title { padding: 3rem 0 3.4rem 0; } .mxd-accordion__title p { font-size: 3rem; } } .mxd-accordion__arrow { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; font-size: 2.2rem; line-height: 1.2; color: var(--t-bright); -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); will-change: transform; -webkit-transition: -webkit-transform var(--_animspeed-medium) var(--_animbezier); transition: -webkit-transform var(--_animspeed-medium) var(--_animbezier); -moz-transition: transform var(--_animspeed-medium) var(--_animbezier), -moz-transform var(--_animspeed-medium) var(--_animbezier); transition: transform var(--_animspeed-medium) var(--_animbezier); transition: transform var(--_animspeed-medium) var(--_animbezier), -webkit-transform var(--_animspeed-medium) var(--_animbezier), -moz-transform var(--_animspeed-medium) var(--_animbezier); } @media only screen and (min-width: 1200px) { .mxd-accordion__arrow { font-size: 3rem; } } .accordion-rotate { -webkit-transform: rotate(135deg); -moz-transform: rotate(135deg); -ms-transform: rotate(135deg); transform: rotate(135deg); } /* ------------------------------------------------*/ /* Features - Accordion End */ /* ------------------------------------------------*/ /* ------------------------------------------------*/ /* Features - Pricing Cards Start */ /* ------------------------------------------------*/ .mxd-pricing-table { position: relative; } .mxd-pricing-table__item { position: relative; } .mxd-pricing-table__inner { position: relative; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -moz-box-orient: vertical; -moz-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 3rem; width: 100%; background-color: var(--base-tint); -moz-border-radius: var(--_radius-m); border-radius: var(--_radius-m); padding: 3rem; -webkit-transition: -webkit-box-shadow var(--_animspeed-slow) var(--_animbezier); transition: -webkit-box-shadow var(--_animspeed-slow) var(--_animbezier); -moz-transition: box-shadow var(--_animspeed-slow) var(--_animbezier), -moz-box-shadow var(--_animspeed-slow) var(--_animbezier); transition: box-shadow var(--_animspeed-slow) var(--_animbezier); transition: box-shadow var(--_animspeed-slow) var(--_animbezier), -webkit-box-shadow var(--_animspeed-slow) var(--_animbezier), -moz-box-shadow var(--_animspeed-slow) var(--_animbezier); } .no-touch .mxd-pricing-table__inner:hover { -webkit-box-shadow: 0 14px 28px rgba(var(--accent-rgb), 0.25), 0 10px 10px rgba(var(--accent-rgb), 0.12); -moz-box-shadow: 0 14px 28px rgba(var(--accent-rgb), 0.25), 0 10px 10px rgba(var(--accent-rgb), 0.12); box-shadow: 0 14px 28px rgba(var(--accent-rgb), 0.25), 0 10px 10px rgba(var(--accent-rgb), 0.12); } @media only screen and (min-width: 1200px) { .mxd-pricing-table__inner { height: 100%; padding: 4rem; } } @media only screen and (min-width: 1600px) { .mxd-pricing-table__inner { padding: 5rem; } } .mxd-pricing-table__tag { position: absolute; top: -1.6rem; left: 3rem; } @media only screen and (min-width: 1200px) { .mxd-pricing-table__tag { left: 4rem; } } @media only screen and (min-width: 1600px) { .mxd-pricing-table__tag { left: 5rem; } } .mxd-pricing-table__data { position: relative; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-flex: 1; -moz-box-flex: 1; -ms-flex: 1; flex: 1; -webkit-box-orient: vertical; -webkit-box-direction: normal; -moz-box-orient: vertical; -moz-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 3rem; } @media only screen and (min-width: 1200px) { .mxd-pricing-table__data { -webkit-box-pack: justify; -moz-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } } .pricing-data__header { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -moz-box-orient: vertical; -moz-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .pricing-header__title { margin-bottom: 1rem; font: normal var(--fw-medium) 3rem/1.2 var(--_font-accent); color: var(--t-bright); } @media only screen and (min-width: 1200px) { .pricing-header__title { font-size: 4.4rem; } } .pricing-header__descr { font-size: 1.8rem; } @media only screen and (min-width: 1600px) { .pricing-header__descr { font-size: 1.8rem; } } .pricing-data__info { position: relative; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -moz-box-orient: vertical; -moz-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 3rem; } .pricing-data__price { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -moz-box-orient: vertical; -moz-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 0.6rem; margin-bottom: 1.2rem; } .pricing-data__num { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-align: end; -moz-box-align: end; -ms-flex-align: end; align-items: flex-end; gap: 0.4rem; } .pricing-data__currency, .pricing-data__period { font: normal var(--fw-regular) 1.8rem/1.6 var(--_font-accent); color: var(--t-muted); } @media only screen and (min-width: 1600px) { .pricing-data__currency, .pricing-data__period { font-size: 2.2rem; } } .pricing-data__amount { font: normal var(--fw-semibold) 7.4rem/0.9 var(--_font-accent); letter-spacing: -0.2rem; color: var(--t-bright); } .pricing-data__btnholder { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -moz-box-orient: vertical; -moz-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 1rem; width: 100%; margin-bottom: 1.8rem; } .pricing-data__divider { width: 100%; height: 0.2rem; -moz-border-radius: 0.2rem; border-radius: 0.2rem; background-color: var(--base-opp); } .mxd-pricing-table__plan { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -moz-box-orient: vertical; -moz-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 0.4rem; width: 100%; margin-top: 0.7rem; } .pricing-plan__caption { font-size: 1.8rem; } @media only screen and (min-width: 1600px) { .pricing-plan__caption { font-size: 1.8rem; } } .mxd-pricing-table__link { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; gap: 1rem; width: 100%; } .mxd-pricing-table__link a { font: normal var(--fw-regular) 1.8rem/1.2 var(--_font-accent); color: var(--t-bright); text-decoration: none; background: -webkit-gradient(linear, left top, right top, from(var(--t-bright)), to(var(--t-bright))), -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0))); background: -moz-linear-gradient(left, var(--t-bright), var(--t-bright)), -moz-linear-gradient(left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)); background: linear-gradient(to right, var(--t-bright), var(--t-bright)), linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)); -moz-background-size: 100% 1px, 0 1px; background-size: 100% 1px, 0 1px; background-position: 100% 100%, 0 100%; background-repeat: no-repeat; -webkit-transition: background-size 400ms, color 300ms; -moz-transition: background-size 400ms, color 300ms, -moz-background-size 400ms; transition: background-size 400ms, color 300ms; transition: background-size 400ms, color 300ms, -moz-background-size 400ms; } .no-touch .mxd-pricing-table__link a:hover { color: var(--t-bright); -moz-background-size: 0 1px, 100% 1px; background-size: 0 1px, 100% 1px; } /* ------------------------------------------------*/ /* Features - Pricing Cards End */ /* ------------------------------------------------*/ /* ------------------------------------------------*/ /* Features - Team Cards Start */ /* ------------------------------------------------*/ .mxd-team-cards { position: relative; } .mxd-team-cards__item { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -moz-box-orient: vertical; -moz-box-direction: normal; -ms-flex-direction: column; flex-direction: column; padding-bottom: 3.5rem; } .mxd-team-cards__item:last-of-type { padding-bottom: 0; } .mxd-team-cards__item:last-of-type.padding-bottom-mobile { padding-bottom: 3.5rem; } .mxd-team-cards__item.no-padding-bottom { padding-bottom: 0; } @media only screen and (min-width: 768px) { .mxd-team-cards__item { padding-bottom: 0; } } @media only screen and (min-width: 1200px) { .mxd-team-cards__item { padding-bottom: 0; } .mxd-team-cards__item:last-of-type { padding-bottom: 0; } .mxd-team-cards__item:last-of-type.padding-bottom-mobile { padding-bottom: 0; } .mxd-team-cards__item.padding-bottom-desktop { padding-bottom: 3.5rem; } } .mxd-team-cards__h2-block { position: relative; } .mxd-team-cards__h2-block.right-block { padding-left: 0; } .mxd-team-cards__h2-block.left-block { padding-right: 0; } @media only screen and (min-width: 1200px) { .mxd-team-cards__h2-block.right-block { padding-left: 3rem; } .mxd-team-cards__h2-block.left-block { padding-right: 3rem; } } .mxd-team-cards__media { position: relative; height: 460px; -moz-border-radius: var(--_radius-m); border-radius: var(--_radius-m); margin-bottom: 1.7rem; overflow: hidden; } .mxd-team-cards__media.no-margin { margin-bottom: 0; } .mxd-team-cards__media.overflow-visible { overflow: visible; } @media only screen and (min-width: 768px) { .mxd-team-cards__media { height: 460px; } } @media only screen and (min-width: 1200px) { .mxd-team-cards__media { height: 460px; } } @media only screen and (min-width: 1600px) { .mxd-team-cards__media { height: 600px; } } .mxd-team-cards__career { position: relative; display: block; width: 100%; height: 100%; -moz-border-radius: var(--_radius-m); border-radius: var(--_radius-m); } .mxd-team-cards__career::before { content: ""; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--base-tint); -moz-border-radius: var(--_radius-m); border-radius: var(--_radius-m); z-index: -1; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); transform: scale(1); -webkit-transition: -webkit-transform var(--_animspeed-slow), -webkit-box-shadow var(--_animspeed-slow) var(--_animbezier); transition: -webkit-transform var(--_animspeed-slow), -webkit-box-shadow var(--_animspeed-slow) var(--_animbezier); -moz-transition: transform var(--_animspeed-slow), box-shadow var(--_animspeed-slow) var(--_animbezier), -moz-transform var(--_animspeed-slow), -moz-box-shadow var(--_animspeed-slow) var(--_animbezier); transition: transform var(--_animspeed-slow), box-shadow var(--_animspeed-slow) var(--_animbezier); transition: transform var(--_animspeed-slow), box-shadow var(--_animspeed-slow) var(--_animbezier), -webkit-transform var(--_animspeed-slow), -moz-transform var(--_animspeed-slow), -webkit-box-shadow var(--_animspeed-slow) var(--_animbezier), -moz-box-shadow var(--_animspeed-slow) var(--_animbezier); } .no-touch .mxd-team-cards__career:hover::before { -webkit-transform: scale(1.04); -moz-transform: scale(1.04); -ms-transform: scale(1.04); transform: scale(1.04); -webkit-box-shadow: 0 14px 28px rgba(var(--accent-rgb), 0.25), 0 10px 10px rgba(var(--accent-rgb), 0.12); -moz-box-shadow: 0 14px 28px rgba(var(--accent-rgb), 0.25), 0 10px 10px rgba(var(--accent-rgb), 0.12); box-shadow: 0 14px 28px rgba(var(--accent-rgb), 0.25), 0 10px 10px rgba(var(--accent-rgb), 0.12); } .career__image { position: absolute; left: 50%; top: 50%; bottom: auto; right: auto; -webkit-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); width: 256px; height: auto; padding-bottom: 4rem; } .career__caption { position: absolute; bottom: 0; left: 0; width: 100%; padding: 1.6rem; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -moz-box-orient: vertical; -moz-box-direction: normal; -ms-flex-direction: column; flex-direction: column; text-align: center; } @media only screen and (min-width: 768px) { .career__caption { padding: 2.6rem; } } .mxd-team-cards__photo { position: relative; width: 100%; height: 460px; overflow: hidden; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -moz-box-orient: vertical; -moz-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: end; -moz-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; background-repeat: no-repeat; background-position: center; -moz-background-size: cover; background-size: cover; } .mxd-team-cards__photo img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } @media only screen and (min-width: 768px) { .mxd-team-cards__photo { height: 460px; } } @media only screen and (min-width: 1200px) { .mxd-team-cards__photo { height: 460px; } } @media only screen and (min-width: 1600px) { .mxd-team-cards__photo { height: 600px; } } .mxd-team-cards__socials { position: absolute; bottom: 0; left: 0; width: 100%; padding: 1.6rem; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 1rem; } @media only screen and (min-width: 768px) { .mxd-team-cards__socials { padding: 2.6rem; } } .mxd-team-cards__info { padding: 0 1.6rem; } @media only screen and (min-width: 768px) { .mxd-team-cards__info { padding: 0 2.6rem; } } /* ------------------------------------------------*/ /* Features - Team Cards End */ /* ------------------------------------------------*/ /* ------------------------------------------------*/ /* Features - Values Start */ /* ------------------------------------------------*/ .mxd-values { position: relative; } .mxd-values__item { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -moz-box-orient: vertical; -moz-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .mxd-values__item.mobile-reverse { -webkit-box-orient: vertical; -webkit-box-direction: reverse; -moz-box-orient: vertical; -moz-box-direction: reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; } @media only screen and (min-width: 1200px) { .mxd-values__item.mobile-reverse { -webkit-box-orient: vertical; -webkit-box-direction: normal; -moz-box-orient: vertical; -moz-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } } .mxd-values__lists { padding: 6rem 3rem 0 3rem; } @media only screen and (min-width: 768px) { .mxd-values__lists { padding: 6.4rem 4rem 0 4rem; } } @media only screen and (min-width: 1200px) { .mxd-values__lists { padding: 0; } } .mxd-values__lists-item { margin-bottom: 2.6rem; } .mxd-values__lists-item:last-of-type { margin-bottom: 0; } @media only screen and (min-width: 576px) { .mxd-values__lists-item { margin-bottom: 0; } } .mxd-values__image { position: relative; height: 460px; -moz-border-radius: var(--_radius-l); border-radius: var(--_radius-l); background-repeat: no-repeat; background-position: center; -moz-background-size: cover; background-size: cover; } @media only screen and (min-width: 768px) { .mxd-values__image { height: 600px; } } @media only screen and (min-width: 1200px) { .mxd-values__image.image-large-desktop { height: 930px; } } .mxd-values__descr { padding: 5.4rem 3rem 5.9rem 3rem; } .mxd-values__descr.has-top-list { padding: 4.6rem 3rem 5.9rem 3rem; } @media only screen and (min-width: 768px) { .mxd-values__descr { padding: 6.4rem 4rem 6.9rem 4rem; } .mxd-values__descr.has-top-list { padding: 5.5rem 4rem 6.9rem 4rem; } } @media only screen and (min-width: 1200px) { .mxd-values__descr { padding: 6.4rem 4rem 0 4rem; } .mxd-values__descr.has-top-list { padding: 6.4rem 4rem 0 4rem; } } @media only screen and (min-width: 1600px) { .mxd-values__descr { padding: 6rem 4rem 0 4rem; } .mxd-values__descr.has-top-list { padding: 6rem 4rem 0 4rem; } } /* ------------------------------------------------*/ /* Features - Values End */ /* ------------------------------------------------*/ /* ------------------------------------------------*/ /* Features - Project Details Start */ /* ------------------------------------------------*/ .mxd-project { position: relative; width: 100%; min-width: 360px; } .mxd-project__block { position: relative; margin-top: 12.3rem; margin-bottom: 13.1rem; } .mxd-project__block.pre-grid { margin-bottom: 10.1rem; } .mxd-project__block.no-margin { margin: 0; } @media only screen and (min-width: 768px) { .mxd-project__block { margin-top: 13.1rem; margin-bottom: 15.1rem; } .mxd-project__block.pre-grid { margin-bottom: 12.1rem; } } @media only screen and (min-width: 1200px) { .mxd-project__block { margin-top: 14.3rem; margin-bottom: 15.1rem; } } @media only screen and (min-width: 1600px) { .mxd-project__block { margin-top: 18.3rem; margin-bottom: 19rem; } .mxd-project__block.pre-grid { margin-bottom: 16.1rem; } } .mxd-project__subtitle { position: relative; } .mxd-project__paragraph { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -moz-box-orient: vertical; -moz-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 2rem; margin-top: 1.8rem; } @media only screen and (min-width: 768px) { .mxd-project__paragraph { margin-top: 1.3rem; } } @media only screen and (min-width: 1200px) { .mxd-project__paragraph { margin-top: 0.4rem; gap: 3rem; } .mxd-project__paragraph.medium-text { margin-top: 0.8rem; } } @media only screen and (min-width: 1600px) { .mxd-project__paragraph { max-width: 855px; } .mxd-project__paragraph.medium-text { margin-top: 0.6rem; } } .mxd-project__controls { margin-top: 1.3rem; } @media only screen and (min-width: 1200px) { .mxd-project__controls { margin-top: 1.4rem; } } @media only screen and (min-width: 1600px) { .mxd-project__controls { margin-top: 1.7rem; } } .mxd-project__client { margin-top: 0.2rem; } @media only screen and (min-width: 1200px) { .mxd-project__client { margin-top: 0; } } @media only screen and (min-width: 1600px) { .mxd-project__client { margin-top: 0.2rem; } } .mxd-project__client-name { font: normal var(--fw-medium) 2.6rem/1.2 var(--_font-accent); color: var(--t-bright); } .mxd-project__client-name small { display: block; font: normal var(--fw-regular) 1.6rem/1.2 var(--_font-accent); color: var(--t-medium); margin-top: 0.2rem; } .mxd-project__client-name a { color: var(--t-bright); } .mxd-project__client-name.opposite { color: var(--t-opp-bright); } .mxd-project__client-name.opposite a { color: var(--t-opp-bright); } @media only screen and (min-width: 768px) { .mxd-project__client-name { font-size: 3.4rem; } } @media only screen and (min-width: 1600px) { .mxd-project__client-name small { font-size: 1.8rem; } } .mxd-project-cards { position: relative; } .mxd-project-cards__item { position: relative; height: 460px; } @media only screen and (min-width: 768px) { .mxd-project-cards__item { height: 420px; } } @media only screen and (min-width: 1600px) { .mxd-project-cards__item { height: 600px; } } .mxd-project-cards__inner { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -moz-box-orient: vertical; -moz-box-direction: normal; -ms-flex-direction: column; flex-direction: column; position: relative; width: 100%; height: 100%; overflow: hidden; } .mxd-project-cards__inner img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .mxd-project__nav { position: relative; padding-top: 3rem; padding-bottom: 13.3rem; } @media only screen and (min-width: 768px) { .mxd-project__nav { padding-bottom: 15.1rem; } } @media only screen and (min-width: 1200px) { .mxd-project__nav { padding-top: 4rem; } } @media only screen and (min-width: 1600px) { .mxd-project__nav { padding-bottom: 19.1rem; } } .mxd-project__divider { position: absolute; top: 0; left: 1.5rem; width: -moz-calc(100% - 3rem); width: calc(100% - 3rem); height: 0.2rem; background-color: var(--base-opp); } .mxd-project__navitem { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -moz-box-orient: vertical; -moz-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .mxd-project__navitem.left { -webkit-box-align: start; -moz-box-align: start; -ms-flex-align: start; align-items: start; } .mxd-project__navitem.right { -webkit-box-align: end; -moz-box-align: end; -ms-flex-align: end; align-items: end; text-align: right; } .mxd-project__link { font: normal var(--fw-medium) 2.2rem/1.2 var(--_font-accent); color: var(--t-bright); } .mxd-project__link.opposite { color: var(--t-opp-bright); } .mxd-project__link span { text-decoration: none; background: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0))), -webkit-gradient(linear, left top, right top, from(var(--t-bright)), to(var(--t-bright))); background: -moz-linear-gradient(left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)), -moz-linear-gradient(left, var(--t-bright), var(--t-bright)); background: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)), linear-gradient(to right, var(--t-bright), var(--t-bright)); -moz-background-size: 100% 1px, 0 1px; background-size: 100% 1px, 0 1px; background-position: 100% 100%, 0 100%; background-repeat: no-repeat; -webkit-transition: background-size 300ms, color 300ms; -moz-transition: background-size 300ms, color 300ms, -moz-background-size 300ms; transition: background-size 300ms, color 300ms; transition: background-size 300ms, color 300ms, -moz-background-size 300ms; } .no-touch .mxd-project__link span:hover { color: var(--t-bright); -moz-background-size: 0 1px, 100% 1px; background-size: 0 1px, 100% 1px; } @media only screen and (min-width: 768px) { .mxd-project__link { font-size: 3.4rem; } } /* ------------------------------------------------*/ /* Features - Project Details End */ /* ------------------------------------------------*/