/* @override https://spinnova.test/assets/css/global.css?* https://spinnova.com/assets/css/global.min.css?* */ /* ----------------------------------------------------------- Project: Spinnova Version: 1.0 Created: June 26, 2020 Modified: June 14, 2023 [Table of contents] 1. Reset 2. Custom Properties 2. Typography 3. Utility styles 4. Structure 5. Animations ----------------------------------------------------------- */ /* ----------------------------------------------------------- RESET ----------------------------------------------------------- */ html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, hgroup, menu, nav, section, menu, time, mark, audio, video { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; } img { display: block; max-width: 100%; height: auto; } article, aside, figure, footer, header, hgroup, nav, section { display: block; } audio, canvas, video { display: inline-block; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } a { margin: 0; padding: 0; font-size: 100%; vertical-align: baseline; background: transparent; } ins { background-color: #ff9; color: #000; text-decoration: none; } mark { background-color: #ff9; color: #000; font-style: italic; font-weight: bold; } del { text-decoration: line-through; } abbr[title], dfn[title] { border-bottom: 1px dotted #000; cursor: help; } /* tables still need cellspacing="0" in the markup */ table { border-collapse: collapse; border-spacing: 0; } hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; } input, select { vertical-align: middle; } /* Set html font-size to 10px so: 1rem = 10px */ html { font-size: 62.5%; } /* Set basic typography settings for body */ body { -webkit-font-smoothing: antialiased; font-smoothing: antialiased; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; text-size-adjust: 100%; font-feature-settings: "kern"; -webkit-font-feature-settings: "kern"; -moz-font-feature-settings: "kern"; -moz-font-feature-settings: "kern=1"; scroll-behavior: smooth; } /* ----------------------------------------------------------- CUSTOM PROPERTIES ----------------------------------------------------------- */ :root { /* Colors */ --body-bg-color: #fff; --bg-color-gold: #E1DEDB; --body-text-color: #000; --heading-text-color: #000; --text-color-inverted: #fff; --text-color-gold: #706761; /* Typography */ --base-font-size: 200%; /* Set html font-size where 160% = 16px */ --base-line-height: 1.2; /* Set base line-height for body text */ --body-font-family: "Telegraf-Regular", "Helvetica Neue", Helvetica, Arial, sans-serif; /* Set font-family for body text */ --heading-font-family: "Telegraf-Regular", "Helvetica Neue", Helvetica, Arial, sans-serif; /* Set font-family for headers */ --bold-font: "Telegraf-Bold"; /* Title sizes */ --font-title-massive: 14em; --font-title-hero: 7em; --font-title-larger: 5em; --font-title-large: 90px; --font-title-smaller: 68px; --font-title-smallest: 60px; --font-title-tiny: 50px; /* Text sizes */ --font-body-large: 24px; --font-body-quote: 21px; --font-body-small: 15px; --font-body-smaller: 14px; --font-body-tiny: 12px; } /* ----------------------------------------------------------- TYPOGRAPHY ----------------------------------------------------------- */ @font-face { font-family: "Telegraf-Regular"; font-display: swap; src: url("../fonts/Telegraf-Regular.eot"); /* IE9 Compat Modes */ src: url("../fonts/Telegraf-Regular.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */ url("../fonts/Telegraf-Regular.woff2") format("woff2"), /* Super Modern Browsers */ url("../fonts/Telegraf-Regular.woff") format("woff"), /* Pretty Modern Browsers */ url("../fonts/Telegraf-Regular.ttf") format("truetype"); /* Safari, Android, iOS */ font-weight: normal; font-style: normal; } @font-face { font-family: "Telegraf-Bold"; font-display: swap; src: url("../fonts/Telegraf-Bold.eot"); /* IE9 Compat Modes */ src: url("../fonts/Telegraf-Bold.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */ url("../fonts/Telegraf-Bold.woff2") format("woff2"), /* Super Modern Browsers */ url("../fonts/Telegraf-Bold.woff") format("woff"), /* Pretty Modern Browsers */ url("../fonts/Telegraf-Bold.ttf") format("truetype"); /* Safari, Android, iOS */ font-weight: normal; font-style: normal; } body { font-size: var(--base-font-size); line-height: var(--base-line-height); font-family: var(--body-font-family); color: var(--body-text-color); background-color: var(--body-bg-color); } /* Set text selection color */ /*::selection { }*/ /* WebKit/Blink Browsers */ /*::-moz-selection { }*/ /* Gecko Browsers */ /* HEADINGS -------------------------------------------------------------- */ h1,h2,h3,h4,h5,h6 { font-weight: normal; color: var(--heading-text-color); font-family: var(--heading-font-family); text-rendering: optimizeLegibility; } /* TEXT ELEMENTS -------------------------------------------------------------- */ p { margin: 0 0 1.2em; } a:hover, a:active { outline: none; } a, a:active, a:visited { text-decoration: none; } a:hover { } .content__text a { font-family: var(--bold-font); color: inherit; text-decoration: none; } .content__text a:hover { font-family: var(--bold-font); color: inherit; text-decoration: underline; } blockquote { } strong { font-weight: normal; font-family: var(--bold-font); } em,dfn,i { font-style: italic; } dfn { font-weight: normal; } sup, sub { line-height: 0; font-size: 0.75em; position: relative; vertical-align: baseline; } sup { top: -0.5em; } sub { bottom: -0.25em; } abbr, acronym { } address { } del { } pre,code { white-space: pre; } pre,code,tt { } pre { white-space: pre; white-space: pre-wrap; white-space: pre-line; word-wrap: break-word; } /* BUTTONS & CALL-TO-ACTIONS -------------------------------------------------------------- */ .cta { color: var(--text-color-gold); text-transform: uppercase; letter-spacing: 2px; font-size: var(--font-body-smaller); } .cta:hover { } .cta--arrow { padding: 1rem 3.2rem; position: relative; line-height: 1; } .cta--arrow:after { content: "\2192"; position: absolute; top: 10px; right: 8px; transition: right 0.15s cubic-bezier(0.83, 0, 0.17, 1); } .cta--arrow:hover:after { right: 0px; } /*.text-block .wrapper__cta .cta--arrow { padding-left: 0; }*/ .btn { } .btn:hover { } /* LISTS -------------------------------------------------------------- */ li ul, li ol { margin: 0 1.2em; } ul, ol { margin: 0 1.2em 1.2em 1.2em; } ul { list-style-type: disc; } ol { list-style-type: decimal; } dl { margin: 0 0 1.2em 0; } dl dt { font-weight: normal; } dd { margin-left: 1.2em;} nav ul { list-style: none; margin: 0; padding: 0; } nav ul li { display: inline; } /* TABLES -------------------------------------------------------------- */ table { width: 100%; } th { overflow: hidden; padding: 10px 5px; word-break: normal; } th,td { border-color: var(--body-text-color); border-style: solid; border-width: 1px; font-size: var(--font-body-small); overflow: hidden; padding: 10px 5px; word-break:normal; } tr.even td { } tfoot { } caption { } /* FORMS -------------------------------------------------------------- */ /* align checkboxes, radios, text inputs with their label */ input[type="radio"] { vertical-align: text-bottom; } input[type="checkbox"] { vertical-align: bottom; *vertical-align: baseline; } .ie6 input { vertical-align: text-bottom; } label, input[type=button], input[type=submit], button { cursor: pointer; -webkit-appearance: none; } label { font-weight: normal; } fieldset { } legend { font-weight: normal; } input { } textarea { } textarea { } textarea:focus { } select { } select:focus { } /* Contact form */ .contact-form-wrapper { position: relative; max-width: 1440px; margin: 0 auto; padding: 6rem 0; } .contact-form-wrapper #thank-you { position: absolute; width: 100%; height: 100%; background-color: #fff; text-align: center; opacity: 0; z-index: -1; transition: all 0.2s cubic-bezier(0.83, 0, 0.17, 1); color: var(--text-color-gold); } .contact-form-wrapper #thank-you h2 { color: var(--text-color-gold); } .contact-form-wrapper #thank-you.visible { opacity: 1; z-index: 100; } #contact-form { text-align: left; } #contact-form ::placeholder { color: var(--text-color-gold); font-size: var(--font-body-smaller); text-transform: uppercase; } #contact-form input[type=text], #contact-form input[type=email] { border: none; border-bottom: 1px solid #979797; padding: 0; display: block; width: 100%; font-size: var(--font-body-smaller); text-transform: uppercase; color: var(--text-color-gold); line-height: 32px; margin-bottom: 4.5rem; outline: none; letter-spacing: 2px; -webkit-appearance: none; border-radius: 0; font-family: var(--body-font-family); } #contact-form label { font-size: var(--font-body-smaller); text-transform: uppercase; color: var(--text-color-gold); letter-spacing: 2px; display: block; text-align: left; } #contact-form textarea { width: 100%; min-height: 7.9rem; padding: 1rem; border-color: #979797; margin-top: 0.8rem; margin-bottom: 4.5rem; outline: none; font-size: var(--font-body-smaller); text-transform: uppercase; color: var(--text-color-gold); letter-spacing: 2px; -webkit-appearance: none; border-radius: 0; font-family: var(--body-font-family); } #contact-form input[type=submit] { padding: 0; border: none; background: transparent; font-size: var(--font-body-smaller); text-transform: uppercase; color: var(--text-color-gold); letter-spacing: 2px; } #contact-form .col-left { padding-right: 10rem; } #contact-form .col-right { padding-top: 1rem; padding-right: 10rem; } .newsletter-form-wrapper { position: relative; max-width: 1440px; margin: 0 auto; padding: 6rem 0; } .newsletter-form-wrapper form { text-align: left; } .newsletter-form-wrapper form ::placeholder { color: var(--text-color-gold); font-size: var(--font-body-smaller); text-transform: uppercase; } .newsletter-form-wrapper form input[type=email] { border: none; border-bottom: 1px solid #979797; padding: 0; display: block; width: 100%; font-size: var(--font-body-smaller); text-transform: uppercase; color: var(--text-color-gold); line-height: 32px; margin-bottom: 4.5rem; outline: none; letter-spacing: 2px; -webkit-appearance: none; border-radius: 0; font-family: var(--body-font-family); } .newsletter-form-wrapper form button { padding: 0; border: none; background: transparent; font-size: var(--font-body-smaller); text-transform: uppercase; color: var(--text-color-gold); letter-spacing: 2px; } .newsletter-form-wrapper form .col-left { padding-right: 10rem; } .newsletter-form-wrapper form .col-right { padding-top: 1rem; padding-right: 10rem; } .user-form-wrapper { min-width: 32rem; max-width: 50%; margin-left: auto; margin-right: auto; padding: 10rem 0; } .user-form-wrapper form { margin-bottom: 6rem; } .user-form-wrapper h2 { color: var(--text-color-gold); font-size: var(--font-title-tiny); line-height: 1.06; margin-bottom: 0.75em; } .user-form-wrapper input { border: none; border-bottom: 1px solid #979797; padding: 0; display: block; width: 100%; font-size: var(--font-body-smaller); text-transform: uppercase; color: var(--text-color-gold); line-height: 32px; margin-bottom: 4.5rem; outline: none; letter-spacing: 2px; -webkit-appearance: none; border-radius: 0; font-family: var(--body-font-family); } .user-form-wrapper label { font-size: var(--font-body-smaller); text-transform: uppercase; color: var(--text-color-gold); letter-spacing: 2px; display: block; text-align: left; } .user-form-wrapper button { padding: 0; border: none; background: transparent; font-size: var(--font-body-smaller); text-transform: uppercase; color: var(--text-color-gold); letter-spacing: 2px; } /* Change Autocomplete styles in Chrome*/ input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, textarea:-webkit-autofill, textarea:-webkit-autofill:hover, textarea:-webkit-autofill:focus, select:-webkit-autofill, select:-webkit-autofill:hover, select:-webkit-autofill:focus { -webkit-text-fill-color: #ffffff; -webkit-box-shadow: none; font-family: var(--body-font-family); } /* ----------------------------------------------------------- UTILITY STYLES ----------------------------------------------------------- */ .bg-video, .bg-cover { background-position: center center; background-repeat: no-repeat; background-size: cover; } .bg-video { position: absolute; top: 50%; left: 50%; min-width: 100%; min-height: 100%; width: auto; height: auto; z-index: -100; -webkit-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); } .center-vertically { position: relative; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .text-center { text-align: center; } .text-right { text-align: right; } .embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } /* Responsive video embedding */ .youtubeWrapper, .vimeoWrapper { position: relative; padding-top: 30px; height: 0; overflow: hidden; } /* Set the padding-bottom for 16:9 aspect ratio video from YouTube & Vimeo */ .youtubeWrapper, .vimeoWrapper { padding-bottom: 56.25%; } /* For each content source, set the IFRAME to be top left and occupy 100% of width and height of the containing DIV wrapper */ .youtubeWrapper iframe, .youtubeWrapper object, .youtubeWrapper embed, .vimeoWrapper iframe, .vimeoWrapper object, .vimeoWrapper embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } /* ----------------------------------------------------------- STRUCTURE ----------------------------------------------------------- */ *, *:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } html { height: 100%; overflow-y: scroll; -webkit-overflow-scrolling: touch; } body { height: 100%; text-align: center; } body.nav-is-open { height: 100vh; overflow: hidden; } .page-wrapper { width: 100%; min-height: 100%; _height: 100%; margin: auto; position: relative; text-align: left; overflow: hidden; } .page-hero, .page-content, .page-footer { width: 100%; position: relative; } /* GLOBAL PADDING -------------------------------------------------------------- */ .page-header, .page-hero__title, .page-hero__text { padding-left: 6rem; padding-right: 6rem; } .page-hero, .content-block, .page-footer { } .page-content { } /* FLEXBOX SETTINGS -------------------------------------------------------------- */ .flex-wrapper { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: stretch; } .flex-wrapper .flex-item { } .grid-2 > .span-1 { flex-basis: 50%; } .grid-2 > .span-2 { flex-basis: 100%; } .grid-3 > .span-1 { flex-basis: 33.33%; } .grid-3 > .span-2 { flex-basis: 66.66%; } .grid-3 > .span-3 { flex-basis: 100%; } .grid-4 > .span-1 { flex-basis: 25%; } .grid-4 > .span-2 { flex-basis: 50%; } .grid-4 > .span-3 { flex-basis: 75%; } .grid-4 > .span-4 { flex-basis: 100%; } .grid-5 > .span-1 { flex-basis: 20%; } .grid-5 > .span-2 { flex-basis: 40%; } .grid-5 > .span-3 { flex-basis: 60%; } .grid-5 > .span-4 { flex-basis: 80%; } .grid-5 > .span-5 { flex-basis: 100%; } /* MASTHEAD -------------------------------------------------------------- */ .page-header { position: absolute; width: 100%; text-align: center; padding-top: 6rem; padding-bottom: 0; } .page-header.relative { position: relative; } .main-nav { justify-content: center; position: relative; } .main-nav__part { width: calc(50% - 12rem - 2vw); } .main-nav__part.left { text-align: left; } .main-nav__part.right { text-align: right; } .page-header__logo { padding: 0 2vw; top: -0.35rem; position: relative; z-index: 10; } .page-header__logo img { display: block; width: 24rem; } .page-header.relative a { display: block; width: 24rem; margin-left: auto; margin-right: auto; } .page-header.relative a .logo { width: 24rem; } .page-header__logo .logo--blk { display: none; } .page-header__logo .logo--beige { display: none; } .news .page-header__logo .logo--wht, .dark-logo .page-header__logo .logo--wht { display: none; } .news .page-header__logo .logo--blk, .dark-logo .page-header__logo .logo--blk { display: block; } .beige-logo .page-header__logo .logo--beige { display: block; } .beige-logo .page-header__logo .logo--wht, .beige-logo .page-header__logo .logo—blk { display: none; } /* NAVIGATION -------------------------------------------------------------- */ .main-nav .main-nav__part { z-index: 100; position: relative; } .main-nav .main-nav__part a { color: var(--text-color-inverted); font-family: var(--bold-font); text-transform: uppercase; font-size: var(--font-body-tiny); letter-spacing: 2px; line-height: 28px; display: inline-block; border-bottom: 1px solid transparent; position: relative; } .main-nav .main-nav__part a:after { content: ""; position: absolute; width: 0%; height: 1px; background-color: var(--text-color-inverted); left: 50%; bottom: 4px; opacity: 0; transition: all 0.3s cubic-bezier(0.83, 0, 0.17, 1); } .main-nav .main-nav__part a:hover:after { width: 100%; opacity: 1; left: 0; } .main-nav .main-nav__part a.active:after { content: ""; position: absolute; width: 100%; height: 1px; background-color: var(--text-color-inverted); left: 0%; bottom: 4px; opacity: 1; } .main-nav .main-nav__part.left a { margin-right: 2.5rem; } .main-nav__part.left a:last-of-type { margin-right: 0; } .main-nav .main-nav__part.right a { margin-left: 2.5rem; } .main-nav__part.right a:first-of-type { margin-left: 0; } .main-nav .main-nav__part a.external { } .main-nav .main-nav__part a.external:before { content: "\2197"; position: absolute; top: -1px; right: -12px; transition: right 0.15s cubic-bezier(0.83, 0, 0.17, 1); } .main-nav .main-nav__part a.external:hover:before { right: -14px; } .news .main-nav .main-nav__part a:after, .dark-logo .main-nav .main-nav__part a:after { background-color: var(--body-text-color); } .news .main-nav .main-nav__part a.active:after, .dark-logo .main-nav .main-nav__part a.active:after { background-color: var(--body-text-color); } .news .main-nav .main-nav__part a, .dark-logo .main-nav .main-nav__part a { color: var(--body-text-color); } .beige-logo .main-nav .main-nav__part a:after, .beige-logo .main-nav .main-nav__part a.active:after { background-color: var(--text-color-gold); } .beige-logo .main-nav .main-nav__part a { color: var(--text-color-gold); } .burger-icon { width: 30px; height: 30px; position: absolute; z-index: 10000 !important; right: 2rem; top: 3.3rem; display: none; } .burger-icon .line { background-color: #fff; width: 30px; height: 2px; display: block; position: absolute; left: 0; transition: 0.2s ease; } .burger-icon.open .line { background-color: #000; } .burger-icon .line:nth-of-type(1) { top: 2px; } .burger-icon .line:nth-of-type(2) { top: 12px; } .burger-icon .line:nth-of-type(3) { top: 22px; } .burger-icon:hover { cursor: pointer; } .burger-icon:hover .line:nth-of-type(1) { top: 0px; } .burger-icon:hover .line:nth-of-type(3) { top: 24px; } .burger-icon.open .line:nth-of-type(1) { transform: rotate(45deg); top: 14px; } .burger-icon.open .line:nth-of-type(2) { display: none; } .burger-icon.open .line:nth-of-type(3) { transform: rotate(135deg); top: 14px; } .burger-icon.open:hover .line:nth-of-type(1) { top: 14px; width: 40px; left: -2px; } .burger-icon.open:hover .line:nth-of-type(3) { top: 14px; width: 40px; left: -2px; } .burger-nav { position: absolute; width: calc(100% - 3rem); height: 100vh; background-color: var(--bg-color-gold); top: 0; right: -100%; z-index: 1000; transition: right 0.5s ease-in-out; } .nav-is-open .burger-nav { right: 0; } .burger-nav-inner { list-style: none; margin: 0; padding: 0; text-align: left; padding: 12rem 7rem 12rem 3rem; height: 100vh; } .burger-nav-inner a { color: #000; font-size: 20px; display: block; line-height: 1; padding: 0.25rem 0 2rem 0; position: relative; z-index: 1000; position: relative; text-transform: uppercase; } .burger-nav-inner li { } .burger-nav-inner li:last-of-type { border-bottom: none; } /* Animating burger menu items to appear one by one on open */ .burger-nav .some-icons, .burger-nav-inner li { will-change: transform, opacity; opacity: 0; } .nav-is-open .burger-nav .some-icons, .nav-is-open .burger-nav-inner li { animation: navIntro 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards; animation-delay: 450ms; } .burger-nav-inner li:nth-child(2) { animation-delay: 0.5s; } .burger-nav-inner li:nth-child(3) { animation-delay: 0.55s; } .burger-nav-inner li:nth-child(4) { animation-delay: 0.6s; } .burger-nav-inner li:nth-child(5) { animation-delay: 0.65s; } .burger-nav-inner li:nth-child(6) { animation-delay: 0.7s; } .burger-nav-inner li:nth-child(7) { animation-delay: 0.75s; } .burger-nav-inner li:nth-child(7) { animation-delay: 0.8s; } .burger-nav-inner li:nth-child(8) { animation-delay: 0.85s; } .burger-nav .some-icons { animation-delay: 1.0s !important; } @-webkit-keyframes navIntro { from { opacity: 0; transform: translate3d(0px, 100%, 0px); } to { opacity: 1; transform: translate3d(0px, 0%, 0px); } } .burger-nav .some-icons { position: absolute; z-index: 1000; bottom: 6rem; left: 3rem; } .burger-nav .some-icons .icon { margin-right: 2rem; } /* PAGE-HEROS -------------------------------------------------------------- */ .page-hero { height: 100vh; position: relative; background-repeat: no-repeat; text-align: center; color: var(--text-color-inverted); } .page-hero__title h1 { font-size: var(--font-title-hero); line-height: 0.92; color: var(--text-color-inverted); margin: 0 auto; max-width: 1440px; /*perspective: 275px;*/ } .page-hero__text { font-size: var(--font-body-large); position: absolute; width: calc(60% + 12rem); bottom: 7vh; left: calc(20% - 6rem); } .page-hero__text p { margin: 0; text-transform: uppercase; letter-spacing: 2px; } .animated-text { display: inline-block; position: relative; transform: rotateX(90deg); position: relative; animation-name: letterSpin; animation-duration: 1s; animation-fill-mode: forwards; /*animation-timing-function: cubic-bezier(0.83, 0, 0.17, 1);*/ opacity: 0; animation-timing-function: linear; animation-delay: 0.25s; } @keyframes letterSpin { 0% { transform: rotateX(90deg); opacity: 0; } 50% { opacity: 1; } 100% { transform: rotateX(0deg); opacity: 1; } } .page-hero__text { will-change: transform, opacity; opacity: 0; transform: translate3d(0px, 100px, 0px); animation-fill-mode: forwards; animation: heroTextAppear 1.25s cubic-bezier(0.22, 1, 0.36, 1) 0.85s forwards; } @keyframes heroTextAppear { from { opacity: 0; transform: translate3d(0px, 100px, 0px); } to { opacity: 1; transform: translate3d(0px, 0, 0px); } } .article-hero { background-color: var(--bg-color-gold); color: var(--body-text-color); } .article-hero h1 { color: var(--body-text-color); font-size: var(--font-title-smallest); line-height: 1.06; } .white-logo.collaboration .article-hero { color: var(--text-color-inverted); } .white-logo.collaboration .article-hero h1 { color: var(--text-color-inverted); } .dark-logo.collaboration .article-hero { color: var(--body-text-color); } .dark-logo.collaboration .article-hero h1 { color: var(--body-text-color); } .article-hero--listing { color: var(--text-color-inverted); } .article-hero--listing p { margin: 0; top: 6rem; position: relative; text-transform: uppercase; font-size: var(--font-body-smaller); letter-spacing: 2px; } .article-hero--listing h1 a { color: var(--text-color-inverted); text-decoration: none; border-bottom: 1px solid transparent; transition: all 0.175s cubic-bezier(0.83, 0, 0.17, 1); } .article-hero--listing h1 a:hover { color: var(--text-color-inverted); text-decoration: none; border-bottom: 1px solid var(--text-color-inverted); } .dark-logo .article-hero--listing { color: var(--body-text-color); } .dark-logo .article-hero--listing h1 a { color: var(--body-text-color); } .dark-logo .article-hero--listing h1 a:hover { color: var(--body-text-color); border-bottom: 1px solid var(--body-text-color); } .media-hero { background-color: var(--body-bg-color); color: var(--text-color-gold); height: 60vh; min-height: 52rem; } .media-hero h1 { color: var(--text-color-gold); font-size: var(--font-title-smaller); line-height: 1.06; } .page-hero.video-bg { } .page-hero.video-bg .page-hero__title { z-index: 100; } .page-hero.video-bg .page-hero__text { z-index: 100; } .videobg { position: absolute; width: 100%; /* Set video container element width here */ height: 100%; /* Set video container element height here */ overflow: hidden; top: 0; bottom: 0; left: 0; right: 0; } /* horizontally center the video */ .videobg-width { position: absolute; width: 100%; /* Change width value to cover more area*/ height: 100%; left: -9999px; right: -9999px; margin: auto; } /* set video aspect ratio and vertically center */ .videobg-aspect { position: absolute; width: 100%; height: 0; top: -9999px; bottom: -9999px; margin: auto; padding-bottom: 56.25%; /* 16:9 ratio */ overflow: hidden; } .videobg-make-height { position: absolute; top: 0; right: 0; bottom: 0; left: 0; } .videobg-hide-controls { box-sizing: content-box; position: relative; height: 100%; width: 100%; /* Vimeo timeline and play button are ~55px high */ padding: 55px 97.7777px; /* 16:9 ratio */ top: -55px; left: -97.7777px; /* 16:9 ratio */ } .videobg iframe { position: absolute; width: 100%; height: 100%; top: 0; left: 0; border: 0 none; } /* CONTENT ELEMENTS -------------------------------------------------------------- */ .cookie-consent-wrapper { padding: 4rem 10rem; background-color: var(--bg-color-gold); position: fixed; z-index: 10000; bottom: 0; width: 100%; } .cookie-consent { display: flex; flex-wrap: nowrap; justify-content: space-between; max-width: 144rem; margin-left: auto; margin-right: auto; } .cookie-consent p { margin: 0; } .cookie-consent p a { font-family: var(--bold-font); color: inherit; text-decoration: none; } .cookie-consent p a:hover { font-family: var(--bold-font); color: inherit; text-decoration: underline; } .cookie-consent__text { width: 80%; text-transform: uppercase; font-size: var(--font-body-small); line-height: 1.4; } .cookie-consent__cta { width: 20%; text-align: right; } .cookie-consent__cta a { color: var(--body-text-color); border: 1px solid var(--body-text-color); padding: 1.25rem 3.5rem; display: inline-block; font-size: var(--font-body-small); } .cookie-consent__cta a:hover { color: var(--body-text-color); border: 1px solid var(--body-text-color); } .block { position: relative; } .block header h2 { font-size: var(--font-body-large); line-height: 1.25; color: var(--heading-text-color); text-transform: uppercase; letter-spacing: 2px; margin: 0; display: inline-block; } .block__inner { } .block .block__inner p:last-of-type { margin-bottom: 0; } .block--text-liftup { color: var(--text-color-gold); text-align: center; } .block--text-liftup .block__inner { max-width: 1440px; margin: 0 auto; padding: 21rem 15rem; } .block--text-liftup header { position: absolute; width: 100%; left: 0; top: 8rem; z-index: 10; } .block--text-liftup header h2 { color: var(--text-color-gold); } .block--text-liftup .wrapper__cta { position: absolute; width: 100%; bottom: 10rem; } .block--large-text { line-height: 1; } .block--large-text .block__inner { font-size: var(--font-title-smallest); } .block--large-text .wrapper__cta { } .block--large-text .cta { color: var(--text-color-gold); } .block--large-text.non-white-bg { background-color: var(--bg-color-gold); color: var(--body-text-color); } .block--large-text.non-white-bg header h2, .block--large-text.non-white-bg .cta { color: var(--body-text-color); } .block--medium-text { font-size: var(--font-body-large); } .block--medium-text h2 { color: var(--text-color-gold); font-size: var(--font-title-tiny); margin-bottom: 1em; } .block--medium-text .block__inner { line-height: 1.6; } .img-block--large { height: 92vh; min-height: 80rem; } .img-block--large header h2 { color: var(--text-color-inverted); } .img-block--large .block__inner { color: var(--text-color-inverted); font-size: var(--font-title-hero); line-height: 0.92; } .img-block--large .cta { color: var(--text-color-inverted) !important; } .img-block--large.text--dark header h2 { color: var(--body-text-color); } .img-block--large.text--dark .block__inner { color: var(--body-text-color); } .img-block--large.text--dark .cta { color: var(--body-text-color) !important; } .block.img-block.img-block--large { height: auto; min-height: 1rem; position: relative; overflow: hidden; perspective: 100px; } .block.img-block.img-block--large img { width: 100%; height: auto; transform: scale(1.1); transition: all 8s cubic-bezier(0.22, 1, 0.36, 1); } .zoom-in .img-zoom img { transform: scale(1); } .img-block--large-text { position: relative; text-align: center; } .img-block--large-text header { position: absolute; width: 100%; top: 8rem; left: 0; z-index: 10; } .img-block--large-text .block__inner { max-width: 1440px; margin: 0 auto; padding: 21rem 15rem; } .img-block--large-text .wrapper__cta { position: absolute; width: 100%; bottom: 10rem; } .block--img-text-cols { } .block--img-text-cols header { position: absolute; top: 8rem; padding-left: 6rem; width: 50%; z-index: 10; } .block--img-text-cols header h2 { color: var(--body-text-color); } .block--img-text-cols .text-block { color: var(--body-text-color); background-color: var(--bg-color-gold); text-align: left; line-height: 1.2; } .block--img-text-cols .block__inner { padding: 34rem 15rem 15rem 6rem; max-width: 720px; margin-left: 0; font-size: var(--font-body-large); } .block--img-text-cols .wrapper__cta { position: absolute; padding-left: 6rem; bottom: 6rem; } .block--img-text-cols .wrapper__cta a { color: var(--body-text-color); padding-left: 0; } .block--img-text-cols .img-block { overflow: hidden; } .block--img-text-cols.img--left .text-block { order: 2; background-color: var(--body-bg-color); color: var(--text-color-gold); } .block--img-text-cols.img--left header h2 { color: var(--body-color-gold); } .block--img-text-cols.img--left .img-block { order: 1; } .block--img-text-cols.img--right .text-block { order: 1; } .block--img-text-cols.img--right .img-block { order: 2; } .block-three-cols { background-color: var(--bg-color-gold); text-align: center; } .block-three-cols header { position: absolute; width: 100%; left: 0; top: 8rem; z-index: 10; } .block-three-cols header h2 { color: var(--body-text-color); max-width: 58rem; } .block-three-cols .columns { max-width: 1680px; margin: 0 auto; padding: 28rem 0 7rem 0; flex-wrap: nowrap; } .block-three-cols .columns__col { position: relative; text-align: left; color: var(--body-text-color); padding: 0 6rem 6rem 6rem; line-height: 1.6; } .block-three-cols .columns__col h2 { color: var(--body-text-color); font-size: var(--font-title-large); margin-bottom: 1.2em; line-height: 1.25; } .block-three-cols .columns__col figure { width: 66%; max-width: 16rem; } .block-three-cols .wrapper__cta { bottom: 0; } .block-three-cols .wrapper__cta a { color: var(--body-text-color); padding-left: 0; } .block-three-cols.white-bg { background-color: var(--body-bg-color); } .block-three-cols.white-bg .columns__col, .block-three-cols.white-bg .columns__col h2, .block-three-cols.white-bg header h2, .block-three-cols.white-bg .wrapper__cta a { color: var(--text-color-gold); } .block--people { background-color: var(--bg-color-gold); } .block--people__wrapper { max-width: 1680px; margin: 0 auto; padding: 6rem 0 0 0; } .block--people__person { padding: 0 3rem 9rem 3rem; text-align: center; } .block--people__person img { margin-bottom: 3.8rem; } .block--people__person h3 { font-size: var(--font-title-tiny); margin-bottom: 0.5em; } .block--people__person p { font-size: var(--font-body-smaller); text-transform: uppercase; letter-spacing: 2px; margin: 0; } .block--people__person .person__title { margin-bottom: 2.25em; } .block--animated-title { text-align: center; height: 92vh; min-height: 80rem; } .block--animated-title header { position: absolute; width: 100%; left: 0; top: 8rem; z-index: 10; } .block--animated-title header h2 { color: var(--text-color-inverted); } .block--animated-title .block__inner { font-size: var(--font-title-massive); color: var(--text-color-inverted); max-width: 1440px; margin: 0 auto; padding: 21rem 15rem; } .block--animated-title .block__inner sub { font-size: var(--font-title-larger); bottom: 0; } .block--animated-title .block__footer { position: absolute; width: 100%; bottom: 6rem; color: var(--text-color-inverted); padding: 0 4rem; } .block--animated-title .block__footer p { max-width: 1200px; margin: 0 auto; line-height: 1.2; font-size: 1.1em; } .block--plain-text { padding: 12rem 0; } .block--plain-text .content__text { margin: 0 auto; padding: 0 2rem; max-width: 1000px; font-size: var(--font-body-large); } .block--plain-text .content__text h2 { color: var(--heading-text-color); font-size: var(--font-title-tiny); margin-bottom: 1em; margin-top: 1.5em; } .block--plain-text .content__text img { max-width: 100%; height: auto; margin-bottom: 1.2em; } .block--plain-text table { } .block--code { padding: 0; } .block--plain-text .content__text { } .block--contact-form { text-align: center; color: var(--text-color-gold); padding: 0 6rem; } .block--contact-form h3 { color: var(--text-color-gold); font-size: var(--font-body-smaller); text-transform: uppercase; margin-bottom: 3.5rem; } .block--contact-form header { position: absolute; width: 100%; left: 0; top: 8rem; z-index: 10; } .block--contact-form header h2 { color: var(--text-color-gold); } .block--contact-form .block__inner { max-width: 1440px; margin: 0 auto; padding: 21rem 9rem 11rem 9rem; font-size: var(--font-title-smallest); } .block--contact-form .small-padding { padding-bottom: 5rem; } .block--contact-form .contact-details { max-width: 1440px; margin: 0 auto; padding: 8rem 0 18rem 0; font-size: var(--font-body-large); text-align: left; } .block--contact-form .contact-details > div { padding-right: 8rem; } .block--contact-form .content__text--small { padding-top: 0; font-size: var(--font-body-large); } .block--contact-form .content__text--small h3 { font-size: var(--font-body-large); padding-top: 5rem; margin-bottom: 0.5em; } .content__text--small h3:first-of-type { padding-top: 0; } .article-listing { display: grid; grid-template-columns: repeat(auto-fill, 30%); justify-content: space-between; max-width: 1680px; margin: 0 auto; padding: 11rem 6rem 6rem 6rem; } .article-listing__entry { text-align: center; margin: 0 0 8rem 0; } .article-listing__entry .article__thumb { margin-bottom: 4rem; position: relative; } .article-listing__entry .article__thumb.ext::before { position: absolute; content: ""; text-align: right; top: 0; right: 0; width: 0; height: 0; border-style: solid; border-width: 0 50px 50px 0; border-color: transparent var(--text-color-gold) transparent transparent; } .article-listing__entry .article__thumb.ext::after { position: absolute; content: "\2197"; top: 5px; right: 7px; color: #fff; } .article-listing__entry .article__date { font-size: var(--font-body-smaller); letter-spacing: 2px; text-transform: uppercase; color: var(--text-color-gold); margin-bottom: 3.3rem; } .article-listing__entry h2 { padding: 0 1rem; } .article-listing__entry h2 a { color: var(--body-text-color); } .article-listing__entry h2 a:hover { color: var(--body-text-color); text-decoration: underline; } .article-listing-navigation { text-align: center; padding: 11rem 2rem 0 2rem; margin: 0; } .article-listing-navigation ul { padding: 0; margin: 0; color: var(--text-color-gold); } .article-listing-navigation li { list-style: none; display: inline-block; } .article-listing-navigation a { color: var(--text-color-gold); text-transform: uppercase; padding: 0.25rem 0; margin: 0 2rem; } .article-listing-navigation li:first-of-type a { margin-left: 0; } .article-listing-navigation li:last-of-type a { margin-right: 0; } .article-listing-navigation a.active, .article-listing-navigation a:hover { color: var(--text-color-gold); text-decoration: none; border-bottom: 0.5px solid var(--text-color-gold); } .pagination { max-width: 1680px; margin: 0 auto; padding: 6rem 6rem 18rem 6rem; text-align: center; color: var(--text-color-gold); } .pagination a { color: var(--text-color-gold); } .pagination a:hover { color: var(--text-color-gold); text-decoration: underline; } .pagination a.prev { margin-right: 2rem; } .pagination a.next { margin-left: 2rem; } .block--collab-blocks { display: grid; grid-template-columns: repeat(auto-fill, 30%); justify-content: space-between; max-width: 1760px; margin: 0 auto; padding: 11rem 4rem 18rem 4rem; } .block--collab-blocks__elem { text-align: center; margin: 0 0 15rem 0; font-size: var(--font-body-large); } .block--collab-blocks__elem img { margin-bottom: 2em; } .block--collab-blocks__elem .cta { color: var(--body-text-color); } /* .block--news-slider header { position: absolute; width: 100%; left: 0; top: 8rem; z-index: 10; } .block--news-slider header h2 { color: var(--text-color-gold); } .block--news-slider .wrapper__cta { position: absolute; width: 100%; bottom: 10rem; } .block--news-slider .wrapper__cta a { color: var(--text-color-gold); } */ .block--news-slider__slide { width: 100%; text-align: center; } .block--news-slider__slide h1 { font-size: var(--font-title-tiny); color: var(--heading-text-color); } .block--news-slider__slide h2 a, .block--news-slider__slide h1 a { color: var(--heading-text-color); text-decoration: none; border-bottom: 1px solid transparent; transition: all 0.175s cubic-bezier(0.83, 0, 0.17, 1); } .block--news-slider__slide h2 a:hover, .block--news-slider__slide h1 a:hover { color: var(--heading-text-color); text-decoration: none; border-bottom: 1px solid var(--heading-text-color); } .block--news-slider__slide h2 { font-size: 36px; margin-bottom: 2rem; color: var(--heading-text-color); } .carousel-cell__text .break { padding-bottom: 6rem; display: block; } .carousel { height: 600px; } .carousel-cell { height: 100%; } .block--news-slider { height: 92vh; max-height: 90rem; background-color: var(--bg-color-gold); position: relative; } .block--news-slider header { position: absolute; top: 6rem; left: calc(50% + 5rem); z-index: 100; } .block--news-slider header h2 { margin-bottom: 1rem; } .block--news-slider header h2 a { color: var(--body-text-color); } .block--news-slider header h2 a:hover { color: var(--body-text-color); border-bottom: 1px solid var(--heading-text-color); } .block--news-slider header .cta { position: relative !important; display: block; padding-left: 0; color: var(--body-text-color); } .block--news-slider .carousel { height: 92vh; max-height: 90rem; } .block--news-slider .carousel-cell__col { background-position: center; background-repeat: no-repeat; background-size: cover; } .block--news-slider .carousel-cell__col h1 { text-align: left !important; padding: 0; } .carousel-cell__text { display: flex; flex-wrap: nowrap; justify-content: flex-start; align-items: flex-end; padding: 6rem 10rem 6rem 5rem; } .carousel-cell__text .wrap { text-align: left; } .carousel-cell__text .wrap h1 { margin-bottom: 4rem; } .carousel-cell__text .wrap .cta { padding-left: 0; color: var(--body-text-color); } .carousel-wrapper { position: relative; } .custom-ctrl { position: absolute; width: 6rem; height: 6rem; top: calc(50% - 3rem); z-index: 1000; background-position: center center; background-repeat: no-repeat; background-size: 94%; transition: all 0.1s cubic-bezier(0.83, 0, 0.17, 1); } .custom-ctrl:hover { cursor: pointer; background-size: 100%; } .custom-ctrl:active { cursor: pointer; background-size: 94%; } .custom-ctrl.prev { left: 4rem; background-image: url(../img/arrow-left.png); } .custom-ctrl.next { right: 4rem; background-image: url(../img/arrow-right.png); } .block--media { text-align: center; } .block--media header { z-index: 10; } .block--media header h2 { color: var(--text-color-gold); } .block--media .media-listing { display: grid; grid-template-columns: repeat(auto-fill, 30%); justify-content: space-between; max-width: 1760px; margin: 0 auto; padding: 9rem 6rem 0rem 6rem; } .block--media .media-listing__item { text-align: left; color: var(--text-color-gold); margin-bottom: 20rem; text-align: center; } .media-listing__item .embed-container { margin-bottom: 2.5rem; } .media-listing__item .img-wrapper { margin-bottom: 2.5rem; } .media-listing__item .img-wrapper img { display: block; max-width: 100%; height: auto; } .block--media .media-listing__item p { color: var(--text-color-gold); font-size: var(--font-body-small); text-transform: uppercase; margin: 0; letter-spacing: 1.75px; } .block--media .media-listing__item p a { color: var(--text-color-gold); text-decoration: none; border-bottom: 1px solid var(--text-color-gold); font-size: var(--font-body-small); text-transform: uppercase; letter-spacing: 1.75px; } .media-asset-title { margin-bottom: 2.5rem !important; } .block--collaboration-slider { color: var(--body-text-color); text-align: center; } .block--collaboration-slider header { position: absolute; width: 100%; left: 0; top: 8rem; z-index: 1000; } .block--collaboration-slider header h2 { color: var(--body-text-color); } .block--collaboration-slider .wrapper__cta { position: absolute; width: 100%; bottom: 10rem; } .block--collaboration-slider .wrapper__cta .cta { color: var(--body-text-color); } .block--collaboration-slider__carousel { position: relative; background-color: var(--bg-color-gold); } .block--collaboration-slider__carousel .custom-ctrl { width: 5.5rem; height: 11rem; top: calc(50% - 5.5rem); } .block--collaboration-slider__carousel .custom-ctrl.prev { background-image: url(../img/arrow-left-2.png); } .block--collaboration-slider__carousel .custom-ctrl.next { background-image: url(../img/arrow-right-2.png); } .block--collaboration-slider__carousel .carousel { height: 92vh; min-height: 80rem; } .block--collaboration-slider__carousel .carousel-cell { height: 92vh; min-height: 80rem; width: 100%; } .block--collaboration-slider__carousel .carousel-cell__inner { color: var(--body-text-color); font-size: var(--font-title-hero); line-height: 0.92; max-width: 1440px; margin: 0 auto; padding: 0 15rem; } /* Newsletter block */ .newsletter-block { } .newsletter-block .block__inner { max-width: 1440px; margin: 0 auto; padding: 16rem 9rem 16rem 9rem; } .newsletter-block__header { text-align: left; } .newsletter-block__header h3 { font-size: var(--font-title-smallest); color: var(--text-color-inverted); text-transform: none; } .newsletter-block__content { font-size: var(--font-body-small); text-align: left; text-transform: uppercase; color: var(--text-color-inverted); } .newsletter-block__content .span-1 { padding-right: 2rem; } .newsletter-block .newsletter-form-wrapper { padding: 0; margin: 0; } .newsletter-block .newsletter-block__text { } .newsletter-block .newsletter-block__text p { font-size: 16px; margin: 0; padding-top: 16px; letter-spacing: 1px; } .newsletter-block form input[type=email] { border: 1px solid #fff; padding: 0.75rem 2rem; display: block; width: 100%; font-size: var(--font-body-smaller); text-transform: uppercase; color: var(--text-color-inverted); line-height: 32px; margin-bottom: 0; outline: none; letter-spacing: 2px; -webkit-appearance: none; border-radius: 0; font-family: var(--body-font-family); background-color: transparent; } .newsletter-block form .span-1 { padding-right: 0rem; } .newsletter-block form button { padding: 0.75rem 2rem; border: none; background: rgba(255, 255, 255, 0.9); font-size: var(--font-body-smaller); text-transform: uppercase; color: var(--body-text-color); letter-spacing: 2px; line-height: 32px; } .newsletter-block form .col-right { padding-top: 0; padding-right: 0; padding-left: 2rem; } /* Logo cloud */ .block--logo-cloud { max-width: 1440px; margin: 0 auto; padding: 8rem 15rem; } .block--logo-cloud + .block--logo-cloud { padding-top: 0rem; } .block--logo-cloud header { text-align: center; } .block--logo-cloud header h2 { color: var(--text-color-gold); } .block--logo-cloud__inner { padding-top: 4.5rem; } .block--logo-cloud__inner::after { content: ""; flex: auto; } .block--logo-cloud__inner .logo-wrapper { height: 8rem; display: flex; align-items: center; justify-content: center; margin-bottom: 1.5rem; } .block--logo-cloud__inner .logo-wrapper__inner { display: block; width: 72%; display: flex; align-items: center; justify-content: center; } .block--logo-cloud__inner .logo-wrapper img { max-width: 100%; max-height: 100%; height: auto; width: auto; } /* Logo carousel */ /* .block--logo-slider { padding-top: 8rem; padding-bottom: 8rem; } .block--logo-slider header { text-align: center; } .block--logo-slider header h2 { color: var(--text-color-gold); } .block--logo-slider__carousel { position: relative; background-color: var(--body-bg-color); } .block--logo-slider__carousel .logo-carousel { width: 86%; margin-left: 7%; } .block--logo-slider__carousel .carousel { height: 36vh; min-height: 36rem; } .block--logo-slider__carousel .carousel-cell { height: 36vh; min-height: 36rem; width: 20%; display: flex; align-items: center; justify-content: center; } .block--logo-slider__carousel .carousel-cell__logo { display: block; width: 72%; display: flex; align-items: center; justify-content: center; } .block--logo-slider__carousel .carousel-cell__logo img { max-width: 100%; max-height: 100%; height: auto; width: auto; } */ .bg-color-wrapper.bg-dark { background-color: var(--bg-color-gold); } .bg-color-wrapper.bg-white { background-color: var(--body-bg-color); } .block--partner-slider { color: var(--body-text-color); text-align: center; } .block--partner-slider header { position: absolute; width: 100%; left: 0; top: 8rem; z-index: 1000; } .block--partner-slider header h2 { color: var(--text-color-gold); } .block--partner-slider__carousel { position: relative; } .block--partner-slider__carousel .carousel { height: 92vh; min-height: 80rem; } .block--partner-slider__carousel .carousel-cell { height: 92vh; min-height: 80rem; width: 100%; } .block--partner-slider__carousel .carousel-cell__inner { color: var(--body-text-color); font-size: var(--font-title-hero); line-height: 0.92; max-width: 1440px; margin: 0 auto; padding: 0 15rem; } .block--partner-slider__carousel .quote-wrapper { font-size: var(--font-title-smallest); color: var(--text-color-gold); line-height: var(--base-line-height); } .block--partner-slider__carousel .quote-wrapper p:last-of-type { margin-bottom: 0.5em; } .block--partner-slider__carousel .cite-wrapper { font-size: var(--font-body-large); color: var(--text-color-gold); } .block--partner-slider__carousel .logo-wrapper { width: 30%; max-width: 20rem; margin-left: auto; margin-right: auto; padding-top: 4rem; } .block--partner-slider__carousel .logo-wrapper img { width: 100%; height: auto; } /* Quote carousel slider */ .block--partner-slider__narrow { max-width: 1440px; margin: 0 auto; padding: 8rem 15rem; } .quote-carousel { height: 60vh !important; min-height: 60rem !important; } .quote-carousel .carousel-cell { height: 60vh !important; min-height: 60rem !important; width: 33.3%; } .quote-carousel .carousel-cell .carousel-cell__inner { position: relative !important; } .quote-carousel .carousel-cell:nth-of-type(3n+2) .carousel-cell__inner::before { content: ""; position: absolute; background-color: #4f4741; opacity: 20%; right: 0; top: -30%; width: 1px; height: 150%; } .quote-carousel .carousel-cell:nth-of-type(3n+2) .carousel-cell__inner::after { content: ""; position: absolute; background-color: #4f4741; opacity: 20%; left: 0; top: -30%; width: 1px; height: 150%; } .quote-carousel .carousel-cell__inner { padding: 0 5rem; } .quote-carousel .quote-wrapper { font-size: var(--font-body-quote); color: var(--heading-text-color); } .quote-carousel .logo-wrapper { width: 50%; max-width: 20rem; } .quote-carousel .flickity-page-dots { bottom: 10%; } .quote-carousel .flickity-page-dots .dot { background-color: transparent; border: 1px solid #4f4741; opacity: 1; margin-left: 5px; margin-right: 5px; } .quote-carousel .flickity-page-dots .dot.is-selected { background-color: #4f4741; border: 1px solid #4f4741; opacity: 1; } /* Product carousel */ .block--product-carousel { background-color: var(--bg-color-gold); } .block--product-carousel .block__inner { padding-right: 2.5em; } .block--product-carousel .img-block { position: relative; } .block--product-carousel .cell-header { position: absolute; top: 0; } .carousel--product { height: 100vh; width: calc(100% - 3rem); position: relative; } .carousel--product__cell { width: 100%; height: 100%; position: relative; } .carousel--product__cell .cell-header { position: absolute; top: 7rem; left: 2rem; color: var(--heading-text-color); z-index: 100; } .arrow--light .carousel--product__cell .cell-header { color: #fff; } .carousel--product__cell .cell-header span { padding: 0 1rem; } .carousel--product__cell .img-wrapper { width: 100%; height: calc(100% - 10rem); top: 3rem; position: relative; } .carousel--product__cell .img-text-wrapper { display: block; position: relative; top: 4.2rem; } .carousel--product__cell .img-text-wrapper p { margin: 0; font-size: var(--font-body-small); } .block--product-carousel .custom-ctrl { width: 6rem; height: 6rem; top: calc(50% - 3rem); } .block--product-carousel .custom-ctrl.prev { left: 2rem; background-image: url(../img/arrow-left-2.png); } .block--product-carousel .custom-ctrl.next { right: 5rem; background-image: url(../img/arrow-right-2.png); } .block--product-carousel.arrow--light .custom-ctrl.prev { background-image: url(../img/arrow-left-2-wht.png); } .block--product-carousel.arrow--light .custom-ctrl.next { background-image: url(../img/arrow-right-2-wht.png); } .data-table { } .data-table__label { padding-right: 2rem; } .data-table__label p { font-family: var(--bold-font); } .img--left.block--product-carousel { background-color: #fff; } .img--left.block--product-carousel .carousel--product { margin-left: 3rem; } .img--left.block--product-carousel .custom-ctrl.prev { left: 5rem; } .img--left.block--product-carousel .custom-ctrl.next { right: 2rem; } /* Large video block */ .video-block--large { } /* Collaboration slider */ .block--collaboration-slider { color: var(--body-text-color); text-align: center; } .block--collaboration-slider header { position: absolute; width: 100%; left: 0; top: 8rem; z-index: 1000; } .block--collaboration-slider header h2 { color: var(--body-text-color); } .block--collaboration-slider .wrapper__cta { position: absolute; width: 100%; bottom: 10rem; } .block--collaboration-slider .wrapper__cta .cta { color: var(--body-text-color); } .block--collaboration-slider__carousel { position: relative; background-color: var(--bg-color-gold); } .block--collaboration-slider__carousel .custom-ctrl { width: 5.5rem; height: 11rem; top: calc(50% - 5.5rem); } .block--collaboration-slider__carousel .custom-ctrl.prev { background-image: url(../img/arrow-left-2.png); } .block--collaboration-slider__carousel .custom-ctrl.next { background-image: url(../img/arrow-right-2.png); } .block--collaboration-slider__carousel .carousel { height: 92vh; min-height: 80rem; } .block--collaboration-slider__carousel .carousel-cell { height: 92vh; min-height: 80rem; width: 100%; } .block--collaboration-slider__carousel .carousel-cell__inner { color: var(--body-text-color); font-size: var(--font-title-hero); line-height: 0.92; max-width: 1440px; margin: 0 auto; padding: 0 15rem; } .block--our-story { background-color: var(--bg-color-gold); position: relative; text-align: center; color: var(--body-text-color); } .block--our-story header { position: absolute; width: 100%; left: 0; top: 8rem; z-index: 10; } .block--our-story header h2 { color: var(--body-text-color); } .block--our-story .block__inner { max-width: 1880px; margin: 0 auto; padding: 21rem 15rem; } .block--our-story .tabs { margin-bottom: 12rem; } .block--our-story .tabs ul { display: flex; flex-wrap: nowrap; justify-content: space-between; } .block--our-story .tabs ul li { line-height: 1; } .block--our-story .tabs a { font-size: var(--font-title-smallest); color: var(--body-text-color); transition: all 0.2s cubic-bezier(0.83, 0, 0.17, 1); } .block--our-story .tabs a:hover { color: #fff; } .block--our-story .tabs .is-active a { color: #fff; } .block--our-story .tab-content { text-align: left; font-size: var(--font-body-large); } .block--our-story .tab-content h3 { font-size: var(--font-body-large); text-transform: uppercase; } .some-icons { } .some-icons .icon { display: inline-block; width: 24px; height: 24px; background-position: center center; background-repeat: no-repeat; background-size: contain; margin-right: 1rem; } .some-icons .icon:last-of-type { margin-right: 0; } .some-icons .facebook { background-image: url(../img/facebook-f-brands.svg); } .some-icons .twitter { background-image: url(../img/twitter-brands.svg); } .some-icons .linkedin { background-image: url(../img/linkedin-in-brands.svg); } .some-icons .instagram { background-image: url(../img/instagram-brands.svg); } .tab-content { display: none; } .tab-content.is-active { display: block; } .img-zoom-wrapper--with-content { position: relative; } .img-zoom-wrapper--with-content .img-zoom { position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: -1; } .img-zoom-wrapper { overflow: hidden; perspective: 100px; } .img-zoom { width: 100%; height: 100%; transform: scale(1.1); transition: all 8s cubic-bezier(0.22, 1, 0.36, 1); } .zoom-in .img-zoom { transform: scale(1); } .animated-content-wrapper { position: relative; } .animated-content { will-change: transform, opacity; opacity: 0; transform: translate3d(0px, 200px, 0px); animation-delay: 1s; animation-fill-mode: forwards; } .animate .animated-content { animation: appear 1.5s cubic-bezier(0.22, 1, 0.36, 1) forwards; } @keyframes appear { from { opacity: 0; transform: translate3d(0px, 200px, 0px); } to { opacity: 1; transform: translate3d(0px, 0, 0px); } } .center-vertically.animated-content { transform: translateY(-20%); } .animate .center-vertically.animated-content { animation: appear-v2 1s cubic-bezier(0.22, 1, 0.36, 1) forwards; } @keyframes appear-v2 { from { opacity: 0; transform: translateY(-20%); } to { opacity: 1; transform: translateY(-50%); } } .block--team-tailor { } .teamtailor-jobs-widget { font-family: var(--body-font-family); } .teamtailor-jobs__job { position: relative; margin-bottom: 6rem; } .teamtailor-jobs__job-title { font-size: var(--font-body-quote); font-family: var(--body-font-family) !important; margin-bottom: 12px; } .teamtailor-jobs__job-title:hover { color: #000 !important; } .teamtailor-jobs__job-info { font-size: var(--font-body-tiny); display: block; } .teamtailor-jobs__filters { display: none; } .block--team-tailor__custom .block__inner { padding-top: 0 !important; margin-top: -21rem; padding-bottom: 0 !important; } .block--team-tailor__custom .teamtailor-jobs__job:last-of-type { margin-bottom: 0; } /* .teamtailor-jobs__select-wrapper { position: relative; margin: 0 !important; } .teamtailor-jobs__select:hover { cursor: pointer; } .teamtailor-jobs__select { display: block; font-size: 19px; font-family: var(--body-font-family); font-weight: normal; color: #000; line-height: 1.4; padding: .6em 1.4em .5em 0; width: 100%; max-width: 150%; box-sizing: border-box; margin: 0; border: none; box-shadow: none; -moz-appearance: none; -webkit-appearance: none; background: transparent; appearance: none; } .teamtailor-jobs__select::-ms-expand { display: none; } .teamtailor-jobs__select:focus { outline: none; } */ /* FOOTER -------------------------------------------------------------- */ .page-footer { padding: 6rem 6rem 9rem 6rem; background-color: var(--bg-color-gold); } .page-footer h3 { font-size: var(--font-body-large); margin-bottom: 1em; } .page-footer p { font-size: var(--font-body-smaller); text-transform: uppercase; letter-spacing: 2px; } .page-footer .some-icons { padding-top: 2.5rem; } .page-footer .footer-details { padding-top: 1.8rem; } .page-footer .footer-details a { color: var(--body-text-color); } .page-footer .footer-details a:hover { color: var(--body-text-color); text-decoration: underline; } .footer-logo { margin-bottom: 4rem; max-width: 22rem; } .footer-nav { font-size: var(--font-body-smaller); } .footer-nav ul { margin: 0; padding: 0; list-style: none; } .footer-nav ul a { color: var(--body-text-color); text-transform: uppercase; letter-spacing: 2px; } /* MEDIA QUERIES -------------------------------------------------------------- */ @media only screen and (max-width : 1420px) { :root { /* Title sizes */ --font-title-hero: 6em; --font-title-large: 76px; } /*.block--logo-slider { padding-top: 6rem; padding-bottom: 6rem; }*/ } @media only screen and (max-width : 1380px) { :root { /* Typography */ --base-font-size: 180%; /* Set html font-size where 160% = 16px */ /* Title sizes */ --font-title-massive: 12em; --font-title-hero: 5.5em; --font-title-smallest: 50px; --font-title-large: 68px; /* --font-title-larger: 5em; --font-title-smaller: 68px; --font-title-tiny: 50px; */ /* Text sizes */ /*--font-body-large: 24px; --font-body-small: 15px; --font-body-smaller: 14px; --font-body-tiny: 12px;*/ } /* GLOBAL PADDING */ .block--logo-cloud, .block--partner-slider__narrow, .page-header, .page-hero__title, .block--animated-title .block__inner , .block--our-story .block__inner, .block--contact-form, .block--media .media-listing, .article-listing , .page-footer , .page-hero__text { padding-left: 4rem; padding-right: 4rem; } .page-header__logo { padding: 0 1vw; top: -0.25rem; } .main-nav__part { width: calc(50% - 10rem - 1vw); } .page-header__logo img { width: 20rem; } .main-nav .main-nav__part.left a { margin-right: 2rem; } .main-nav .main-nav__part.right a { margin-left: 2rem; } .main-nav__part.left a:last-of-type { margin-right: 0; } .main-nav__part.right a:first-of-type { margin-left: 0; } .block--news-slider__slide h2 { font-size: 28px; } .block--text-liftup .block__inner { padding: 21rem 10rem; } .block--text-liftup header { top: 8rem; } .block--text-liftup .wrapper__cta { bottom: 10rem; } .img-block--large-text .block__inner { padding: 21rem 4rem; } .block-three-cols .columns__col { padding-left: 4rem; padding-right: 4rem; } /*.block--logo-slider__carousel .carousel-cell { width: 25%; }*/ } @media only screen and (max-width : 1280px) { :root { /* Title sizes */ --font-title-massive: 10em; --font-title-hero: 5em; --font-title-large: 60px; --font-title-smallest: 40px; } /* GLOBAL PADDING */ .block--logo-cloud, .block--partner-slider__narrow, .page-header, .page-hero__title, .block--animated-title .block__inner , .block--our-story .block__inner, .block--media .media-listing, .article-listing , .block--contact-form, .page-footer , .page-hero__text { padding-left: 2rem; padding-right: 2rem; } .page-header__logo { padding: 0 1vw; top: -0.1rem; } .main-nav__part { width: calc(50% - 9rem - 1vw); } .page-header__logo img { width: 18rem; } .main-nav .main-nav__part.left a { margin-right: 1.5rem; } .main-nav .main-nav__part.right a { margin-left: 1.5rem; } .main-nav__part.left a:last-of-type { margin-right: 0; } .main-nav__part.right a:first-of-type { margin-left: 0; } } @media only screen and (max-width : 1100px) { :root { /* Title sizes */ --font-title-massive: 8em; --font-title-hero: 4em; --font-title-smallest: 30px; } .block--img-text-cols { display: grid; grid-auto-rows: 1fr; width: 100%; justify-content: stretch; } .block--img-text-cols header { top: 8rem; padding-left: 2rem; padding-right: 2rem; width: 100%; z-index: 10; } .block--img-text-cols .block__inner { padding: 24rem 6rem 10rem 2rem; max-width: 100%; } .block--img-text-cols .text-block { flex-basis: 100% !important; width: 100%; position: relative; } .block--img-text-cols .img-block { flex-basis: 100%; } .block--img-text-cols .wrapper__cta { padding-left: 2rem; bottom: 5rem; } .article-listing { grid-template-columns: repeat(auto-fill, 46%); } .block--media .media-listing { grid-template-columns: repeat(auto-fill, 46%); } .main-nav .main-nav__part { display: none; } .page-header__logo { top: -2.25rem; left: 0; position: absolute; padding-left: 0; } .page-header__logo img { width: 16rem; } .page-hero__text { width: 100%; left: 0; } .burger-icon { display: block; } .block-three-cols .columns { flex-wrap: wrap; } .block-three-cols .columns__col { padding: 0 2rem 12rem 2rem; } .block--img-text-cols.img--left .text-block { order: 1; } .block--img-text-cols.img--left .img-block { order: 2; } .newsletter-form-wrapper .col-left, #contact-form .col-left { padding-right: 0rem; margin-bottom: 0rem; } .newsletter-form-wrapper .col-right, #contact-form .col-right { padding-right: 0rem; } .block--contact-form .contact-details > div { padding-right: 0rem; margin-bottom: 4rem; } .newsletter-block .block__inner { padding: 12rem 6rem 12rem 6rem; } .newsletter-block__content .span-1 { padding-right: 0; margin-bottom: 4rem; } .newsletter-block form .col-right { padding-left: 0; } .block--news-slider header { top: 6rem; left: 12rem; } .block--news-slider .carousel { height: 66vh; max-height: 90rem; } .carousel-cell__img { display: none; } .carousel-cell__text { align-items: center; padding: 6rem 12rem 6rem 12rem; } .tab-content__title { margin-bottom: 4rem; } .grid-2 > .span-1 { flex-basis: 100%; } .grid-2 > .span-2 { flex-basis: 100%; } .grid-3 > .span-1 { flex-basis: 100%; } .grid-3 > .span-2 { flex-basis: 100%; } .grid-3 > .span-3 { flex-basis: 100%; } .grid-4 > .span-1 { flex-basis: 100%; } .grid-4 > .span-2 { flex-basis: 100%; } .grid-4 > .span-3 { flex-basis: 100%; } .grid-4 > .span-4 { flex-basis: 100%; } .grid-5 > .span-1 { flex-basis: 25%; } .carousel--product { width: 100%; } .carousel--product__cell .cell-header { left: 2rem; } .block--product-carousel .custom-ctrl.prev { left: 2rem; } .img--left.block--product-carousel .carousel--product { margin-left: 0; } .img--left.block--product-carousel .custom-ctrl.prev { left: 2rem; } /*.block--logo-slider__carousel .carousel-cell { width: 33%; }*/ .cookie-consent-wrapper { padding: 4rem 6rem; } .footer-details__col, .footer-nav { margin-bottom: 5rem; } } @media only screen and (max-width : 780px) { :root { /* Title sizes */ --font-title-hero: 3.25em; --font-title-smallest: 26px; } .block--contact-form .block__inner { padding: 18rem 0rem 6rem 0rem; } .newsletter-block .block__inner { padding: 16rem 0 16rem 0; } .newsletter-block .block__inner { padding: 6rem 0 6rem 0; } .article-listing-navigation a { margin: 0 1rem; } .cookie-consent-wrapper { padding: 4rem 2rem; } /*.block--logo-slider__carousel .carousel-cell { width: 50%; }*/ .grid-5 > .span-1 { flex-basis: 33%; } .quote-carousel .carousel-cell { width: 50%; } .quote-carousel .carousel-cell:nth-of-type(3n+2) .carousel-cell__inner::before { opacity: 0; } .quote-carousel .carousel-cell:nth-of-type(3n+2) .carousel-cell__inner::after { opacity: 0; } .quote-carousel .carousel-cell:nth-of-type(2n+1) .carousel-cell__inner::before { content: ""; position: absolute; background-color: #4f4741; opacity: 20%; right: 0; top: -30%; width: 1px; height: 150%; } } @media only screen and (max-width : 580px) { :root { /* Typography */ --base-font-size: 160%; /* Set html font-size where 160% = 16px */ /* Title sizes */ --font-title-massive: 6em; --font-title-hero: 2.250em; --font-title-larger: 1.313em; --font-title-large: 21px; --font-title-smaller: 20px; --font-title-smallest: 20px; --font-title-tiny: 17px; /* Text sizes */ --font-body-large: 17px; --font-body-small: 15px; --font-body-smaller: 14px; --font-body-tiny: 12px; } .quote-carousel .carousel-cell { width: 100%; } .quote-carousel .carousel-cell:nth-of-type(3n+2) .carousel-cell__inner::before, .quote-carousel .carousel-cell:nth-of-type(3n+2) .carousel-cell__inner::after, .quote-carousel .carousel-cell:nth-of-type(2n+1) .carousel-cell__inner::before { display: none; } .quote-carousel .logo-wrapper { width: 80%; max-width: 15rem; } .page-hero { height: 100vh; max-height: -webkit-fill-available; } .block--text-liftup .block__inner { padding: 16rem 2rem; } .block--text-liftup header { top: 5rem; } .block--text-liftup .wrapper__cta { bottom: 6rem; } .block--team-tailor__custom .block__inner { padding-top: 0 !important; margin-top: -16rem; } .article-listing { grid-template-columns: repeat(auto-fill, 100%); } .block--media .media-listing { grid-template-columns: repeat(auto-fill, 100%); } .pagination { padding: 3rem 2rem 12rem 2rem; } .pagination a { display: block; margin-bottom: 1rem; } .img-block--large { height: 80vh; min-height: 70rem; } .img-block--large-text .block__inner { padding: 21rem 2rem; } .block--news-slider { height: 86vh; min-height: 90rem; } .block--news-slider__slide h1 { padding: 0 5rem; } .block--news-slider__slide h2 { font-size: 26px; } .block--animated-title { height: 80vh; min-height: 70rem; } .block--animated-title header { top: 4rem; } .block--animated-title .block__footer { bottom: 4rem; padding: 0 2rem; } .custom-ctrl { width: 2rem; height: 2rem; top: calc(50% - 1rem); } .custom-ctrl.prev { left: 1rem; } .custom-ctrl.next { right: 1rem; } .block--collaboration-slider__carousel .carousel { height: 80vh; min-height: 70rem; } .block--collaboration-slider__carousel .carousel-cell { height: 80vh; min-height: 70rem; width: 100%; } .block--collaboration-slider__carousel .custom-ctrl { width: 3rem; height: 8rem; top: calc(50% - 4rem); } .block--partner-slider__carousel .carousel { height: 80vh; min-height: 70rem; } .block--partner-slider__carousel .carousel-cell { height: 80vh; min-height: 70rem; } .block--partner-slider__carousel .carousel-cell__inner { padding: 0 5rem; } .block--collab-blocks { grid-template-columns: repeat(auto-fill, 100%); padding: 11rem 2rem 18rem 2rem; } .block--news-slider header { top: 6rem; left: 6rem; } .block--news-slider .carousel { height: 86vh; min-height: 90rem; } .carousel-cell__img { display: none; } .carousel-cell__text { align-items: center; padding: 6rem 6rem 6rem 6rem; } .block--news-slider__slide h1 { font-size: var(--font-title-hero); } /*.block--logo-slider__carousel .carousel-cell { width: 50%; }*/ .cookie-consent-wrapper { padding: 3rem 2rem; } .cookie-consent { flex-wrap: wrap; } .cookie-consent__text { width: 100%; margin-bottom: 2rem; } .cookie-consent__cta { width: 100%; text-align: center; } .cookie-consent__cta a { padding: 1rem 3.5rem; } .grid-5 > .span-1 { flex-basis: 50%; } .page-footer { text-align: center; } .footer-logo { margin-left: auto; margin-right: auto; } } /* ----------------------------------------------------------- ANIMATIONS ----------------------------------------------------------- */ /* Stop Animations During Window Resizing ----------------------------------------------------------- */ .resize-animation-stopper * { animation: none !important; transition: none !important; } /* 60fps scrolling http://www.thecssninja.com/javascript/pointer-events-60fps ----------------------------------------------------------- */ .disable-hover, .disable-hover * { pointer-events: none !important; } /* Remove all animations and transitions for people who prefer not to see them. ----------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }