From 0ea862dd74938377d5d247d542053adaf8f24796 Mon Sep 17 00:00:00 2001 From: Uzi <47419405+UziQidwai@users.noreply.github.com> Date: Wed, 20 Dec 2023 14:01:07 -0500 Subject: [PATCH] news12e --- css/normalize.css | 355 ++++ css/telosspark.webflow.css | 3341 ++++++++++++++++++++++++++++++++++++ css/webflow.css | 1817 ++++++++++++++++++++ 3 files changed, 5513 insertions(+) create mode 100644 css/normalize.css create mode 100644 css/telosspark.webflow.css create mode 100644 css/webflow.css diff --git a/css/normalize.css b/css/normalize.css new file mode 100644 index 0000000..411d0b2 --- /dev/null +++ b/css/normalize.css @@ -0,0 +1,355 @@ +/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */ +/** + * 1. Set default font family to sans-serif. + * 2. Prevent iOS and IE text size adjust after device orientation change, + * without disabling user zoom. + */ +html { + font-family: sans-serif; + /* 1 */ + -ms-text-size-adjust: 100%; + /* 2 */ + -webkit-text-size-adjust: 100%; + /* 2 */ +} +/** + * Remove default margin. + */ +body { + margin: 0; +} +/* HTML5 display definitions + ========================================================================== */ +/** + * Correct `block` display not defined for any HTML5 element in IE 8/9. + * Correct `block` display not defined for `details` or `summary` in IE 10/11 + * and Firefox. + * Correct `block` display not defined for `main` in IE 11. + */ +article, +aside, +details, +figcaption, +figure, +footer, +header, +hgroup, +main, +menu, +nav, +section, +summary { + display: block; +} +/** + * 1. Correct `inline-block` display not defined in IE 8/9. + * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera. + */ +audio, +canvas, +progress, +video { + display: inline-block; + /* 1 */ + vertical-align: baseline; + /* 2 */ +} +/** + * Prevent modern browsers from displaying `audio` without controls. + * Remove excess height in iOS 5 devices. + */ +audio:not([controls]) { + display: none; + height: 0; +} +/** + * Address `[hidden]` styling not present in IE 8/9/10. + * Hide the `template` element in IE 8/9/10/11, Safari, and Firefox < 22. + */ +[hidden], +template { + display: none; +} +/* Links + ========================================================================== */ +/** + * Remove the gray background color from active links in IE 10. + */ +a { + background-color: transparent; +} +/** + * Improve readability of focused elements when they are also in an + * active/hover state. + */ +a:active, +a:hover { + outline: 0; +} +/* Text-level semantics + ========================================================================== */ +/** + * Address styling not present in IE 8/9/10/11, Safari, and Chrome. + */ +abbr[title] { + border-bottom: 1px dotted; +} +/** + * Address style set to `bolder` in Firefox 4+, Safari, and Chrome. + */ +b, +strong { + font-weight: bold; +} +/** + * Address styling not present in Safari and Chrome. + */ +dfn { + font-style: italic; +} +/** + * Address variable `h1` font-size and margin within `section` and `article` + * contexts in Firefox 4+, Safari, and Chrome. + */ +h1 { + font-size: 2em; + margin: 0.67em 0; +} +/** + * Address styling not present in IE 8/9. + */ +mark { + background: #ff0; + color: #000; +} +/** + * Address inconsistent and variable font size in all browsers. + */ +small { + font-size: 80%; +} +/** + * Prevent `sub` and `sup` affecting `line-height` in all browsers. + */ +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} +sup { + top: -0.5em; +} +sub { + bottom: -0.25em; +} +/* Embedded content + ========================================================================== */ +/** + * Remove border when inside `a` element in IE 8/9/10. + */ +img { + border: 0; +} +/** + * Correct overflow not hidden in IE 9/10/11. + */ +svg:not(:root) { + overflow: hidden; +} +/* Grouping content + ========================================================================== */ +/** + * Address margin not present in IE 8/9 and Safari. + */ +figure { + margin: 1em 40px; +} +/** + * Address differences between Firefox and other browsers. + */ +hr { + box-sizing: content-box; + height: 0; +} +/** + * Contain overflow in all browsers. + */ +pre { + overflow: auto; +} +/** + * Address odd `em`-unit font size rendering in all browsers. + */ +code, +kbd, +pre, +samp { + font-family: monospace, monospace; + font-size: 1em; +} +/* Forms + ========================================================================== */ +/** + * Known limitation: by default, Chrome and Safari on OS X allow very limited + * styling of `select`, unless a `border` property is set. + */ +/** + * 1. Correct color not being inherited. + * Known issue: affects color of disabled elements. + * 2. Correct font properties not being inherited. + * 3. Address margins set differently in Firefox 4+, Safari, and Chrome. + */ +button, +input, +optgroup, +select, +textarea { + color: inherit; + /* 1 */ + font: inherit; + /* 2 */ + margin: 0; + /* 3 */ +} +/** + * Address `overflow` set to `hidden` in IE 8/9/10/11. + */ +button { + overflow: visible; +} +/** + * Address inconsistent `text-transform` inheritance for `button` and `select`. + * All other form control elements do not inherit `text-transform` values. + * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera. + * Correct `select` style inheritance in Firefox. + */ +button, +select { + text-transform: none; +} +/** + * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` + * and `video` controls. + * 2. Correct inability to style clickable `input` types in iOS. + * 3. Improve usability and consistency of cursor style between image-type + * `input` and others. + * 4. CUSTOM FOR WEBFLOW: Removed the input[type="submit"] selector to reduce + * specificity and defer to the .w-button selector + */ +button, +html input[type="button"], +input[type="reset"] { + -webkit-appearance: button; + /* 2 */ + cursor: pointer; + /* 3 */ +} +/** + * Re-set default cursor for disabled elements. + */ +button[disabled], +html input[disabled] { + cursor: default; +} +/** + * Remove inner padding and border in Firefox 4+. + */ +button::-moz-focus-inner, +input::-moz-focus-inner { + border: 0; + padding: 0; +} +/** + * Address Firefox 4+ setting `line-height` on `input` using `!important` in + * the UA stylesheet. + */ +input { + line-height: normal; +} +/** + * It's recommended that you don't attempt to style these elements. + * Firefox's implementation doesn't respect box-sizing, padding, or width. + * + * 1. Address box sizing set to `content-box` in IE 8/9/10. + * 2. Remove excess padding in IE 8/9/10. + */ +input[type='checkbox'], +input[type='radio'] { + box-sizing: border-box; + /* 1 */ + padding: 0; + /* 2 */ +} +/** + * Fix the cursor style for Chrome's increment/decrement buttons. For certain + * `font-size` values of the `input`, it causes the cursor style of the + * decrement button to change from `default` to `text`. + */ +input[type='number']::-webkit-inner-spin-button, +input[type='number']::-webkit-outer-spin-button { + height: auto; +} +/** + * 1. CUSTOM FOR WEBFLOW: changed from `textfield` to `none` to normalize iOS rounded input + * 2. CUSTOM FOR WEBFLOW: box-sizing: content-box rule removed + * (similar to normalize.css >=4.0.0) + */ +input[type='search'] { + -webkit-appearance: none; + /* 1 */ +} +/** + * Remove inner padding and search cancel button in Safari and Chrome on OS X. + * Safari (but not Chrome) clips the cancel button when the search input has + * padding (and `textfield` appearance). + */ +input[type='search']::-webkit-search-cancel-button, +input[type='search']::-webkit-search-decoration { + -webkit-appearance: none; +} +/** + * Define consistent border, margin, and padding. + */ +fieldset { + border: 1px solid #c0c0c0; + margin: 0 2px; + padding: 0.35em 0.625em 0.75em; +} +/** + * 1. Correct `color` not being inherited in IE 8/9/10/11. + * 2. Remove padding so people aren't caught out if they zero out fieldsets. + */ +legend { + border: 0; + /* 1 */ + padding: 0; + /* 2 */ +} +/** + * Remove default vertical scrollbar in IE 8/9/10/11. + */ +textarea { + overflow: auto; +} +/** + * Don't inherit the `font-weight` (applied by a rule above). + * NOTE: the default cannot safely be changed in Chrome and Safari on OS X. + */ +optgroup { + font-weight: bold; +} +/* Tables + ========================================================================== */ +/** + * Remove most spacing between table cells. + */ +table { + border-collapse: collapse; + border-spacing: 0; +} +td, +th { + padding: 0; +} diff --git a/css/telosspark.webflow.css b/css/telosspark.webflow.css new file mode 100644 index 0000000..82a0daa --- /dev/null +++ b/css/telosspark.webflow.css @@ -0,0 +1,3341 @@ +:root { + --white: white; + --black: black; +} + +.w-layout-grid { + grid-row-gap: 16px; + grid-column-gap: 16px; + grid-template-rows: auto auto; + grid-template-columns: 1fr 1fr; + grid-auto-columns: 1fr; + display: grid; +} + +body { + color: #1a1b1f; + font-family: Montserrat, sans-serif; + font-size: 16px; + font-weight: 400; + line-height: 28px; +} + +h1 { + margin-top: 20px; + margin-bottom: 15px; + font-size: 44px; + font-weight: 400; + line-height: 62px; +} + +h2 { + margin-top: 10px; + margin-bottom: 10px; + font-size: 36px; + font-weight: 400; + line-height: 50px; +} + +h3 { + margin-top: 10px; + margin-bottom: 10px; + font-size: 30px; + font-weight: 400; + line-height: 46px; +} + +h4 { + margin-top: 10px; + margin-bottom: 10px; + font-size: 24px; + font-weight: 400; + line-height: 38px; +} + +h5 { + margin-top: 10px; + margin-bottom: 10px; + font-size: 20px; + font-weight: 500; + line-height: 34px; +} + +h6 { + margin-top: 10px; + margin-bottom: 10px; + font-size: 16px; + font-weight: 500; + line-height: 28px; +} + +p { + margin-bottom: 10px; +} + +a { + color: #1a1b1f; + text-decoration: underline; + transition: opacity .2s; + display: block; +} + +a:hover { + color: #32343a; +} + +a:active { + color: #43464d; +} + +ul { + margin-top: 20px; + margin-bottom: 10px; + padding-left: 40px; + list-style-type: disc; +} + +li { + margin-bottom: 10px; +} + +img { + margin-right: 80px; + display: block; +} + +label { + letter-spacing: 1px; + text-transform: uppercase; + margin-bottom: 10px; + font-size: 12px; + font-weight: 500; + line-height: 20px; +} + +blockquote { + border-left: 5px solid #e2e2e2; + margin-top: 25px; + margin-bottom: 25px; + padding: 15px 30px; + font-size: 20px; + line-height: 34px; +} + +figure { + margin-top: 25px; + padding-bottom: 20px; +} + +figcaption { + opacity: .6; + text-align: center; + margin-top: 5px; + font-size: 14px; + line-height: 26px; +} + +.divider { + height: 1px; + background-color: #eee; +} + +.styleguide-content-wrap { + text-align: center; +} + +.section { + margin-bottom: 40px; + margin-left: 0; + margin-right: 0; + display: block; + position: relative; +} + +.section.cc-cta { + background-color: #f4f4f4; + margin-left: 0; + margin-right: 0; + padding-left: 80px; + padding-right: 80px; + display: none; +} + +.section.cc-store-home-wrap { + background-color: var(--white); +} + +.styleguide-block { + text-align: left; + flex-direction: column; + align-items: center; + margin-top: 80px; + margin-bottom: 80px; + display: block; +} + +.container { + width: 100%; + max-width: 1140px; + margin-left: auto; + margin-right: auto; +} + +.paragraph-tiny { + font-size: 12px; + line-height: 20px; +} + +.paragraph-bigger { + opacity: 1; + text-align: center; + margin-bottom: 10px; + margin-left: auto; + margin-right: auto; + padding-left: 20px; + font-size: 20px; + font-weight: 400; + line-height: 34px; +} + +.paragraph-bigger.cc-bigger-light { + opacity: .6; + color: var(--black); +} + +.paragraph-bigger.cc-bigger-white-light { + border: 1px none var(--black); + opacity: .6; + color: var(--black); + margin-bottom: 0; + font-style: normal; +} + +.button { + border: 1px none var(--black); + color: var(--black); + letter-spacing: 2px; + text-transform: uppercase; + background-color: #7648ca; + border-radius: 10px; + padding: 12px 25px; + font-size: 12px; + line-height: 20px; + text-decoration: none; + transition: background-color .4s, opacity .4s, color .4s; +} + +.button:hover { + background-color: var(--white); + outline-color: var(--black); + outline-offset: 0px; + color: var(--white); + border: 1px solid #000; + outline-width: 3px; + outline-style: solid; + transform: scale(1.1); +} + +.button:active { + background-color: #43464d; +} + +.button.cc-jumbo-button { + border-radius: 10px; + padding: 16px 35px; + font-size: 14px; + line-height: 26px; +} + +.button.cc-jumbo-button.cc-jumbo-white { + border: 1px none var(--black); + color: #000; + background-color: #8250e1; + border-radius: 10px; + margin-left: auto; + margin-right: auto; +} + +.button.cc-jumbo-button.cc-jumbo-white:hover { + outline-offset: 0px; + background-color: #f1f1f1; + border: 1px solid #000; + outline: 3px solid #000; + transform: scale(1.1); +} + +.button.cc-jumbo-button.cc-jumbo-white:active { + outline-offset: 0px; + background-color: #e1e1e1; + outline: 3px solid #000; +} + +.button.cc-contact-us { + z-index: 5; + border: 1px none var(--black); + background-color: #fe5f03; + border-radius: 10px; + position: relative; +} + +.button.cc-contact-us:hover { + background-color: var(--white); + outline-color: var(--black); + outline-offset: 0px; + outline-width: 3px; + outline-style: solid; + transform: scale(1.1); +} + +.button.cc-contact-us:active { + background-color: #fd5e01; +} + +.button.cc-white-button { + color: #202020; + background-color: #f56508; + padding: 16px 35px; + font-size: 14px; + line-height: 26px; +} + +.button.cc-white-button:hover { + background-color: rgba(255, 255, 255, .8); +} + +.button.cc-white-button:active { + background-color: rgba(255, 255, 255, .9); +} + +.button.cc-white-button.w--current { + background-color: #784acf; +} + +.label { + letter-spacing: 1px; + text-transform: uppercase; + margin-bottom: 10px; + font-size: 12px; + font-weight: 700; + line-height: 20px; +} + +.label.cc-styleguide-label { + margin-bottom: 25px; +} + +.label.cc-light { + opacity: .6; +} + +.label.cc-blog-date { + opacity: .6; + margin-top: 20px; +} + +.heading-jumbo-tiny { + text-transform: uppercase; + margin-top: 10px; + margin-bottom: 10px; + font-size: 18px; + font-weight: 500; + line-height: 32px; +} + +.rich-text { + width: 70%; + margin-bottom: 100px; + margin-left: auto; + margin-right: auto; +} + +.rich-text p { + opacity: .6; + margin-top: 15px; + margin-bottom: 25px; +} + +.paragraph-light { + opacity: .6; + text-align: left; + padding-left: 0; + padding-right: 20px; +} + +.heading-jumbo { + color: var(--black); + text-transform: none; + margin-top: 10px; + margin-bottom: 10px; + font-size: 36px; + line-height: 80px; +} + +.heading-jumbo-small { + color: var(--black); + text-align: center; + text-transform: none; + margin: 0 auto; + font-size: 36px; + font-weight: 400; + line-height: 50px; +} + +.styleguide-button-wrap { + margin-top: 10px; + margin-bottom: 10px; +} + +.styleguide-header-wrap { + height: 460px; + border: 1px solid var(--white); + background-color: var(--white); + color: #fff; + text-align: center; + flex-direction: column; + justify-content: center; + align-items: center; + padding: 30px; + display: flex; +} + +.paragraph-small { + font-size: 14px; + line-height: 26px; +} + +.logo-link { + z-index: 1; +} + +.logo-link:hover { + opacity: .8; +} + +.logo-link:active { + opacity: .7; +} + +.menu { + z-index: 0; + justify-content: center; + align-items: center; + margin-bottom: 30px; + padding-top: 30px; + padding-bottom: 30px; + display: flex; + position: absolute; + top: 0%; + bottom: 0%; + left: 0%; + right: 0%; +} + +.navigation-wrap { + flex: 1; + justify-content: space-between; + align-items: center; + display: flex; + position: relative; +} + +.navigation { + background-color: rgba(0, 0, 0, 0); + align-items: center; + padding: 30px 50px 0; + display: flex; +} + +.navigation-item { + opacity: .6; + letter-spacing: 1px; + text-transform: uppercase; + margin-right: 0; + padding: 9px 20px; + font-size: 12px; + font-weight: 500; + line-height: 20px; + text-decoration: none; +} + +.navigation-item:hover { + opacity: .9; + outline-offset: 0px; + border: 1px solid #000; + outline: 3px #32343a; +} + +.navigation-item:active { + opacity: .8; +} + +.navigation-item.w--current { + opacity: 1; + color: #1a1b1f; + font-weight: 600; +} + +.navigation-item.w--current:hover { + opacity: .8; + color: #32343a; +} + +.navigation-item.w--current:active { + opacity: .7; + color: #32343a; +} + +.logo-image { + margin-left: auto; + margin-right: auto; + display: block; +} + +.navigation-items { + flex: none; + justify-content: center; + align-items: center; + display: flex; +} + +.footer-wrap { + justify-content: center; + align-items: center; + padding-top: 70px; + padding-bottom: 70px; + display: flex; +} + +.webflow-link { + opacity: .5; + align-items: center; + text-decoration: none; + transition: opacity .4s; + display: flex; +} + +.webflow-link:hover { + opacity: 1; +} + +.webflow-link:active { + opacity: .8; +} + +.webflow-logo-tiny { + margin-top: -2px; + margin-right: 8px; +} + +.cta-text { + width: 70%; + margin-bottom: 35px; + margin-left: auto; + margin-right: auto; +} + +.cta-wrap { + text-align: center; + justify-content: center; + padding-top: 110px; + padding-bottom: 120px; + display: flex; +} + +.intro-header { + height: 620px; + background-color: var(--white); + color: #fff; + text-align: right; + justify-content: center; + align-items: center; + margin-bottom: 10px; + display: flex; +} + +.intro-header.cc-subpage { + height: 200px; + background-color: var(--white); + color: #fff; + object-fit: scale-down; + background-image: none; +} + +.intro-content { + width: 70%; + max-width: 1140px; + text-align: center; +} + +.intro-content.cc-homepage { + margin-bottom: 10px; +} + +.motto-wrap { + width: 80%; + text-align: center; + margin-bottom: 40px; + margin-left: auto; + margin-right: auto; +} + +.about-story-wrap { + width: 80%; + text-align: center; + margin: 80px auto; +} + +.our-services-grid { + grid-auto-rows: 0; + grid-auto-columns: .25fr; + grid-auto-flow: column; + justify-content: stretch; + margin-bottom: 120px; + display: grid; +} + +.section-heading-wrap { + text-align: center; + margin-top: 80px; + margin-bottom: 80px; +} + +.service-icon { + text-align: left; + margin-bottom: 30px; + margin-left: auto; + margin-right: auto; + display: block; +} + +.status-message { + color: #fff; + text-align: center; + background-color: #202020; + padding: 9px 30px; + font-size: 14px; + line-height: 26px; +} + +.status-message.cc-success-message { + background-color: #12b878; +} + +.status-message.cc-error-message { + background-color: #db4b68; +} + +.status-message.cc-no-data { + width: 70%; + margin: 100px auto; + display: block; +} + +.contact-form-wrap { + border: 1px solid #eee; + padding: 45px 50px 50px; +} + +.contact-form-grid { + grid-column-gap: 80px; + grid-row-gap: 30px; + grid-template: ". ." + / 2.5fr 1fr; + align-items: start; + margin-top: 100px; + margin-bottom: 100px; +} + +.details-wrap { + margin-bottom: 30px; +} + +.get-in-touch-form { + flex-direction: column; + display: flex; +} + +.text-field { + border: 1px solid #e4e4e4; + border-radius: 0; + margin-bottom: 18px; + padding: 21px 20px; + font-size: 14px; + line-height: 26px; + transition: border-color .4s; +} + +.text-field:hover { + border-color: #e3e6eb; +} + +.text-field:active, .text-field:focus { + border-color: #43464d; +} + +.text-field::-ms-input-placeholder { + color: rgba(50, 52, 58, .4); +} + +.text-field::placeholder { + color: rgba(50, 52, 58, .4); +} + +.text-field.cc-contact-field { + margin-bottom: 25px; +} + +.text-field.cc-textarea { + height: 200px; + padding-top: 12px; +} + +.contact-form { + width: 100%; + flex-direction: column; + align-items: stretch; + margin-bottom: 0; + margin-left: auto; + margin-right: auto; + display: flex; +} + +.contact-form-heading-wrap { + margin-bottom: 40px; +} + +.contact-heading { + margin-top: 0; + margin-bottom: 15px; + font-weight: 400; +} + +.map { + height: 460px; + margin-bottom: 100px; + line-height: 20px; +} + +.contact-team-name-wrap { + margin-bottom: 30px; +} + +.our-contacts { + grid-column-gap: 80px; + grid-row-gap: 60px; + text-align: center; + grid-template: ". . ." + / 1fr 1fr 1fr; + margin-bottom: 120px; +} + +.contact-team-details-wrap { + margin-top: 30px; +} + +.contact-team-pic { + height: 150px; + background-color: #f4f4f4; + margin-bottom: 30px; +} + +.team-pic { + width: 100%; + height: 420px; + background-color: #f4f4f4; + margin-bottom: 40px; +} + +.team-members { + grid-column-gap: 30px; + grid-row-gap: 30px; + grid-template-columns: 1fr 1fr 1fr; + grid-template-areas: ". . ." + ". . ."; + margin-bottom: 60px; +} + +.team-member-title-wrap { + width: 100%; + flex-direction: column; + justify-content: center; + align-items: center; + margin-bottom: 60px; + display: flex; +} + +.team-member-name { + opacity: 1; + margin-bottom: 5px; + font-size: 20px; + font-weight: 400; + line-height: 34px; +} + +.projects-grid { + grid-column-gap: 30px; + grid-row-gap: 30px; + grid-template: "." + "." + "." + / 1fr; + margin-bottom: 60px; +} + +.project-name-wrap { + width: 100%; + text-align: center; + flex-direction: column; + justify-content: center; + align-items: center; + margin-bottom: 60px; + display: flex; +} + +.project-name-link { + margin-bottom: 5px; + font-size: 20px; + font-weight: 400; + line-height: 34px; + text-decoration: none; +} + +.project-name-link:hover { + opacity: .8; +} + +.project-name-link:active { + opacity: .7; +} + +.project-cover-link { + margin-bottom: 40px; +} + +.project-cover-link:hover { + opacity: .8; +} + +.project-cover-link:active { + opacity: .7; +} + +.project-overview-header { + height: 620px; + color: #fff; + background-color: #f4f4f4; + background-image: url('../images/portfolio-1---wide.svg'); + background-position: 50%; + background-size: cover; + justify-content: center; + align-items: center; + margin-bottom: 100px; + display: flex; +} + +.project-overview-header.cc-project-2-header { + background-image: url('../images/portfolio-2---wide.svg'); + background-position: 50%; +} + +.project-overview-header.cc-project-3-header { + background-image: url('../images/portfolio-3---wide.svg'); + background-size: cover; +} + +.project-details-grid { + grid-column-gap: 80px; + grid-row-gap: 30px; + grid-template: ". ." + / 1fr 2fr; + align-items: start; + margin-top: 100px; + margin-bottom: 100px; +} + +.project-pics { + margin-bottom: 120px; +} + +.detail-image { + width: 100%; + margin-bottom: 30px; +} + +.blog-detail-header-wrap { + width: 70%; + margin: 60px auto; +} + +.detail-header-image { + width: 100%; + height: 620px; + background-image: url('https://d3e54v103j8qbb.cloudfront.net/img/background-image.svg'); + background-position: 0 0; + background-size: cover; + margin-bottom: 60px; + display: block; +} + +.detail-header-image.w--current { + margin-bottom: 60px; +} + +.blog-list-wrap { + margin-bottom: 100px; +} + +.blog-item { + text-align: center; + flex-direction: column; + justify-content: center; + margin-bottom: 80px; + margin-left: auto; + margin-right: auto; + display: block; +} + +.blog-preview-image { + width: 100%; + height: 620px; + background-image: url('https://d3e54v103j8qbb.cloudfront.net/img/background-image.svg'); + background-position: 0 0; + background-size: cover; + margin-bottom: 45px; + transition: opacity .6s; + display: block; +} + +.blog-preview-image:hover { + opacity: .8; +} + +.blog-preview-image:active { + opacity: .7; +} + +.blog-summary-wrap { + width: 70%; + text-align: left; + margin-bottom: 20px; + margin-left: auto; + margin-right: auto; +} + +.blog-heading-link { + margin-bottom: 10px; + font-size: 30px; + font-weight: 400; + line-height: 46px; + text-decoration: none; +} + +.blog-heading-link:hover { + opacity: .8; +} + +.blog-heading-link:active { + opacity: .7; +} + +.contact-email-link { + opacity: .6; + margin-bottom: 5px; +} + +.contact-email-link:hover { + opacity: 1; +} + +.contact-email-link:active { + opacity: .8; +} + +.protected-form { + flex-direction: column; + display: flex; +} + +.protected-wrap { + justify-content: center; + padding-top: 90px; + padding-bottom: 100px; + display: flex; +} + +.protected-heading { + margin-bottom: 30px; +} + +.utility-page-wrap { + width: 100vw; + height: 100vh; + max-height: 100%; + max-width: 100%; + color: #fff; + text-align: center; + justify-content: center; + align-items: center; + padding: 30px; + display: flex; +} + +._404-wrap { + width: 100%; + height: 100%; + background-color: var(--white); + flex-direction: column; + justify-content: center; + align-items: center; + padding: 30px; + display: flex; +} + +._404-content-wrap { + margin-bottom: 20px; +} + +.home-content-wrap { + margin-top: 80px; + margin-bottom: 120px; +} + +.home-section-wrap { + margin-bottom: 30px; +} + +.section-heading { + margin-top: 10px; + margin-bottom: 20px; + font-weight: 400; +} + +.about-grid { + grid-column-gap: 80px; + grid-row-gap: 30px; + grid-template: ". ." + / 1.25fr 1.75fr; + align-items: center; + margin-bottom: 0; + padding-left: 30px; + padding-right: 30px; +} + +.about-grid.cc-about-2 { + grid-template-columns: 1.75fr 1.25fr; + grid-template-areas: ". ."; +} + +.intro-text { + width: 80%; + margin-bottom: 20px; + margin-left: auto; + margin-right: auto; +} + +.collection-wrap { + flex-wrap: wrap; + align-content: flex-start; + justify-content: center; + align-items: flex-start; + margin-left: -15px; + margin-right: -15px; + display: flex; +} + +.work-heading { + margin-top: 10px; + margin-bottom: 20px; + font-weight: 400; +} + +.blog-heading { + text-align: center; + margin-bottom: 60px; +} + +.blog-preview-wrap { + width: 33.33%; + padding-bottom: 30px; + padding-left: 15px; + padding-right: 45px; +} + +.collection-list-wrapper { + margin-bottom: 120px; +} + +.business-article-heading { + margin-top: 10px; + margin-bottom: 10px; + font-size: 24px; + font-weight: 500; + line-height: 38px; + text-decoration: none; +} + +.business-article-heading:hover { + opacity: .8; +} + +.business-article-heading:active { + opacity: .7; +} + +.image { + margin-top: 0; + margin-left: auto; + margin-right: auto; + padding-top: 0; + display: inline-block; +} + +.image:hover { + height: 110%; +} + +.text-span, .text-block { + color: var(--black); +} + +.image-2 { + border: 1px #000; + border-radius: 10px; +} + +.footer-dark { + background-color: var(--white); + border-bottom: 1px solid #e4ebf3; + padding: 50px 30px 15px; + position: relative; +} + +.container-2 { + width: 100%; + max-width: 940px; + margin-left: auto; + margin-right: auto; +} + +.footer-wrapper { + max-width: 900px; + justify-content: space-between; + align-items: flex-start; + margin-left: auto; + margin-right: auto; + display: flex; +} + +.footer-content { + grid-column-gap: 70px; + grid-row-gap: 40px; + grid-template-rows: auto; + grid-template-columns: auto auto 1fr; + grid-auto-columns: 1fr; + align-items: stretch; + justify-items: stretch; + display: grid; +} + +.footer-block { + flex-direction: column; + justify-content: flex-start; + align-items: flex-start; + display: flex; +} + +.title-small { + letter-spacing: 1px; + text-transform: uppercase; + margin-bottom: 12px; + font-size: 14px; + font-weight: 700; + line-height: 16px; +} + +.footer-link { + color: #1a1b1f; + margin-top: 12px; + margin-bottom: 6px; + font-size: 14px; + line-height: 16px; + text-decoration: none; +} + +.footer-link:hover { + color: rgba(26, 27, 31, .75); +} + +.footer-social-block { + justify-content: flex-start; + align-items: center; + margin-top: 12px; + margin-left: -12px; + display: flex; +} + +.footer-social-link { + margin-left: 12px; + display: none; +} + +.footer-divider { + width: 100%; + height: 1px; + background-color: #e4ebf3; + margin-top: 70px; + margin-bottom: 15px; +} + +.footer-copyright-center { + text-align: center; + font-size: 14px; + line-height: 16px; +} + +.logos-title-large { + border-bottom: 1px solid #e4ebf3; + padding: 60px 30px; + position: relative; +} + +.clients-title { + text-align: center; + font-size: 24px; + line-height: 32px; +} + +.clients-wrapper { + max-width: 750px; + justify-content: space-between; + align-items: center; + margin-top: 40px; + margin-left: auto; + margin-right: auto; + display: flex; +} + +.clients-image { + min-width: 200px; + margin-left: auto; + margin-right: auto; +} + +.gallery-slider { + object-fit: contain; + border: 1px #000; + padding: 80px 30px; + display: block; + position: relative; +} + +.gallery-wrapper { + grid-column-gap: 40px; + grid-row-gap: 40px; + object-fit: contain; + grid-template-rows: auto; + grid-template-columns: 1fr 1fr 1fr; + grid-auto-columns: 1fr; + align-items: start; + text-decoration: none; + display: grid; + overflow: visible; +} + +.gallery-block { + flex-direction: column; + justify-content: flex-start; + align-items: flex-start; + display: flex; +} + +.gallery-slide { + height: auto; + background-color: rgba(0, 0, 0, 0); +} + +.gallery-slide-wrapper { + max-width: 47%; + margin-right: 6%; +} + +.gallery-slide-image { + object-fit: contain; + position: relative; +} + +.gallery-image { + width: 100%; + height: 100%; + opacity: 1; + outline-offset: 0px; + object-fit: contain; + border: 1px #000; + border-radius: 20px; + outline: 2px #1a1b1f; + margin: auto; + display: inline-block; + overflow: visible; + transform: translate(0); +} + +.gallery-image:hover { + width: 110%; + height: 110%; + margin-right: auto; + overflow: visible; + transform: none; +} + +.gallery-slide-text { + color: #f5f7fa; + text-align: center; + margin-bottom: 0; + line-height: 32px; + position: absolute; + top: 0%; + bottom: auto; + left: 0%; + right: 0%; +} + +.gallery-slider-left { + width: 40px; + justify-content: center; + align-items: center; + display: flex; + left: -50px; +} + +.gallery-slider-left:focus-visible { + outline-offset: 0px; + border-radius: 5px; + outline: 2px solid #0050bd; +} + +.gallery-slider-left[data-wf-focus-visible] { + outline-offset: 0px; + border-radius: 5px; + outline: 2px solid #0050bd; +} + +.slider-arrow-embed { + color: #1a1b1f; + margin-left: auto; + margin-right: auto; +} + +.gallery-slider-right { + width: 40px; + justify-content: center; + align-items: center; + display: flex; + right: -50px; +} + +.gallery-slider-right:focus-visible { + outline-offset: 0px; + border-radius: 5px; + outline: 2px solid #0050bd; +} + +.gallery-slider-right[data-wf-focus-visible] { + outline-offset: 0px; + border-radius: 5px; + outline: 2px solid #0050bd; +} + +.gallery-slide-nav { + display: none; +} + +.features-metrics { + background-color: var(--white); + border-bottom: 1px solid #e4ebf3; + padding: 60px 30px; + position: relative; +} + +.features-wrapper { + justify-content: space-around; + align-items: center; + display: flex; +} + +.features-block { + text-align: center; + flex-direction: column; + justify-content: flex-start; + align-items: center; + display: flex; +} + +.features-block:hover { + transform: scale(1.1); +} + +.features-title { + text-align: center; + margin-bottom: 8px; + font-size: 40px; + font-weight: 600; + line-height: 48px; + display: inline-block; +} + +.features-title-small { + font-size: 24px; + line-height: 32px; +} + +.features-list { + border-bottom: 1px solid #e4ebf3; + padding: 80px 30px; + display: block; + position: relative; +} + +.features-wrapper-two { + justify-content: space-between; + align-items: flex-start; + display: flex; +} + +.features-left { + max-width: 40%; + flex-direction: column; + justify-content: flex-start; + align-items: flex-start; + display: flex; +} + +.features-paragraph { + margin-bottom: 24px; +} + +.text-link-arrow { + color: #1a1b1f; + justify-content: flex-start; + align-items: center; + font-size: 14px; + line-height: 20px; + text-decoration: none; + display: flex; +} + +.arrow-embed { + margin-left: 2px; + display: flex; +} + +.features-right { + max-width: 46%; + flex-direction: column; + justify-content: flex-start; + align-items: flex-start; + margin-bottom: -16px; + display: flex; +} + +.features-block-two { + justify-content: flex-start; + align-items: center; + margin-bottom: 16px; + display: flex; +} + +.features-image { + width: 80px; + height: 80px; + outline-offset: 0px; + object-fit: cover; + border: 1px #000; + border-radius: 9px; + outline: 2px #1a1b1f; + margin-right: 16px; +} + +.features-image:hover { + width: 88px; + height: 88px; +} + +.text-span-3 { + color: var(--black); +} + +.section-2 { + padding-left: 30px; + padding-right: 30px; +} + +.navigation-home-page { + background-color: rgba(0, 0, 0, 0); + align-items: center; + padding: 30px 50px; + display: flex; +} + +.image-3 { + outline-offset: 0px; + transform: scale3d(1none, 1none, 1none); + transform-style: preserve-3d; + border: 1px #000; + border-radius: 10px; + outline: 0 #1a1b1f; +} + +.image-3:hover { + transform: none; +} + +.about-grid-copy { + grid-column-gap: 80px; + grid-row-gap: 30px; + object-fit: fill; + grid-template: ". ." + / 1.25fr 1.75fr; + align-items: center; + margin-bottom: 100px; + padding-left: 30px; + padding-right: 30px; + overflow: auto; +} + +.about-grid-copy.cc-about-2 { + grid-template-columns: 1.75fr 1.25fr; + grid-template-areas: ". ."; +} + +.project-overview-header-copy { + height: 620px; + color: #fff; + background-color: #f4f4f4; + background-image: url('../images/portfolio-1---wide.svg'); + background-position: 50%; + background-size: cover; + justify-content: center; + align-items: center; + margin-bottom: 100px; + display: flex; +} + +.project-overview-header-copy.cc-project-2-header { + background-image: url('../images/portfolio-2---wide.svg'); + background-position: 50%; +} + +.project-overview-header-copy.cc-project-3-header { + height: auto; + background-color: #fff; + background-image: none; + align-items: center; + margin-bottom: 0; +} + +.text-block-4 { + color: var(--black); +} + +.image-4 { + margin: auto; + padding-top: 20px; + padding-bottom: 20px; + display: inline-block; +} + +.section-copy { + margin-left: 0; + margin-right: 0; + display: none; +} + +.section-copy.cc-cta { + background-color: #f4f4f4; + margin-left: 0; + margin-right: 0; + padding-left: 80px; + padding-right: 80px; +} + +.section-copy.cc-store-home-wrap { + background-color: var(--white); +} + +.our-services-grid-copy { + text-align: left; + grid-auto-rows: 0; + grid-auto-columns: .25fr; + grid-auto-flow: row; + justify-content: stretch; + margin-bottom: 120px; + display: grid; +} + +.div-block { + text-align: left; +} + +.grid { + grid-column-gap: 16px; + grid-row-gap: 16px; + grid-template-rows: auto auto; + grid-template-columns: 1fr 1fr; + grid-auto-columns: 1fr; + display: grid; +} + +.grid-2 { + justify-content: space-between; +} + +.grid-3 { + grid-template-areas: "Area Area-2"; +} + +.logos-title-large-copy, .logos-title-large-2 { + border-bottom: 1px solid #e4ebf3; + padding: 60px 30px; + position: relative; +} + +.clients-image-2 { + margin-left: auto; + margin-right: auto; +} + +.navigation-item-copy { + opacity: .6; + letter-spacing: 1px; + text-transform: uppercase; + margin-right: 0; + padding-top: 9px; + padding-bottom: 9px; + font-size: 12px; + font-weight: 500; + line-height: 20px; +} + +.navigation-item-copy:hover { + opacity: .9; + outline-offset: 0px; + border-bottom: 1px solid #fe5f03; + outline: 3px #32343a; +} + +.navigation-item-copy:active { + opacity: .8; +} + +.navigation-item-copy.w--current { + opacity: 1; + color: #1a1b1f; + font-weight: 600; +} + +.navigation-item-copy.w--current:hover { + opacity: .8; + color: #32343a; +} + +.navigation-item-copy.w--current:active { + opacity: .7; + color: #32343a; +} + +.navbar-logo-center-container { + z-index: 5; + width: 1030px; + max-width: 100%; + background-color: rgba(0, 0, 0, 0); + margin-left: auto; + margin-right: auto; + padding: 20px; +} + +.navbar-logo-center-container.shadow-three { + width: 100%; + max-width: 1140px; +} + +.navbar-wrapper-three { + justify-content: center; + align-items: center; + display: flex; + position: relative; +} + +.navbar-brand-three { + z-index: 5; + position: absolute; +} + +.nav-menu-wrapper-three { + width: 100%; +} + +.nav-menu-three { + justify-content: space-between; + align-items: center; + margin-bottom: 0; + display: flex; +} + +.nav-menu-block { + justify-content: center; + align-items: center; + margin-bottom: 0; + display: flex; +} + +.nav-link { + color: #1a1b1f; + letter-spacing: .25px; + margin-left: 5px; + margin-right: 5px; + padding: 5px 10px; + font-size: 14px; + line-height: 20px; + text-decoration: none; +} + +.nav-link:hover { + color: rgba(26, 27, 31, .75); +} + +.nav-link:focus-visible { + outline-offset: 0px; + color: #0050bd; + border-radius: 4px; + outline: 2px solid #0050bd; +} + +.nav-link[data-wf-focus-visible] { + outline-offset: 0px; + color: #0050bd; + border-radius: 4px; + outline: 2px solid #0050bd; +} + +.nav-dropdown { + margin-left: 5px; + margin-right: 5px; +} + +.nav-dropdown-toggle { + letter-spacing: .25px; + padding: 5px 30px 5px 10px; + font-size: 14px; + line-height: 20px; +} + +.nav-dropdown-toggle:hover { + color: rgba(26, 27, 31, .75); +} + +.nav-dropdown-toggle:focus-visible { + outline-offset: 0px; + color: #0050bd; + border-radius: 5px; + outline: 2px solid #0050bd; +} + +.nav-dropdown-toggle[data-wf-focus-visible] { + outline-offset: 0px; + color: #0050bd; + border-radius: 5px; + outline: 2px solid #0050bd; +} + +.nav-dropdown-icon { + margin-right: 10px; +} + +.nav-dropdown-list { + background-color: #fff; + border-radius: 12px; +} + +.nav-dropdown-list.w--open { + padding-top: 10px; + padding-bottom: 10px; +} + +.nav-dropdown-link { + padding-top: 5px; + padding-bottom: 5px; + font-size: 14px; +} + +.nav-dropdown-link:focus-visible { + outline-offset: 0px; + color: #0050bd; + border-radius: 5px; + outline: 2px solid #0050bd; +} + +.nav-dropdown-link[data-wf-focus-visible] { + outline-offset: 0px; + color: #0050bd; + border-radius: 5px; + outline: 2px solid #0050bd; +} + +.nav-link-accent { + color: #1a1b1f; + letter-spacing: .25px; + margin-left: 5px; + margin-right: 20px; + padding: 5px 10px; + font-size: 14px; + font-weight: 700; + line-height: 20px; + text-decoration: none; +} + +.nav-link-accent:hover { + color: rgba(26, 27, 31, .75); +} + +.button-primary { + color: #fff; + letter-spacing: 2px; + text-transform: uppercase; + background-color: #1a1b1f; + padding: 12px 25px; + font-size: 12px; + line-height: 20px; + transition: all .2s; +} + +.button-primary:hover { + color: #fff; + background-color: #32343a; +} + +.button-primary:active { + background-color: #43464d; +} + +.navbar-no-shadow-container { + z-index: 5; + width: 100%; + max-width: 1140px; + background-color: rgba(0, 0, 0, 0); + margin-left: auto; + margin-right: auto; + padding: 20px; +} + +.container-regular { + width: 100%; + max-width: 1260px; + min-height: 30px; + margin-left: auto; + margin-right: auto; +} + +.navbar-wrapper { + justify-content: space-between; + align-items: center; + display: flex; +} + +.navbar-brand { + text-align: left; + flex: 0 auto; +} + +.nav-menu { + justify-content: space-between; + align-items: center; + margin-bottom: 0; + padding-bottom: 0; + padding-left: 0; + display: flex; +} + +.nav-button-wrapper { + margin-left: 120px; +} + +.navbar-logo-left-container { + z-index: 5; + width: 1030px; + max-width: 100%; + background-color: rgba(0, 0, 0, 0); + margin-left: auto; + margin-right: auto; + padding: 15px 20px; +} + +.navbar-logo-left-container.shadow-three { + width: 100%; + max-width: 1140px; + margin-bottom: 0; + padding-top: 20px; + padding-bottom: 20px; +} + +.nav-menu-two { + justify-content: space-between; + align-items: center; + margin-bottom: 0; + display: flex; +} + +.nav-divider { + width: 1px; + height: 22px; + background-color: #e4ebf3; + margin-left: 15px; + margin-right: 15px; +} + +.text-span-4 { + color: var(--black); +} + +.list-item { + display: block; +} + +.clients-image-copy { + margin-left: auto; + margin-right: auto; + display: block; +} + +.paragraph-light-copy { + opacity: .6; + text-align: center; + padding-left: 20px; + padding-right: 20px; +} + +.image-5 { + margin: auto; +} + +.accordion-toggle { + height: 80px; + min-height: 0; + min-width: 100%; + align-items: center; + display: inline-block; + position: absolute; + overflow: visible; +} + +.accordion-toggle.w--open { + display: block; + position: absolute; +} + +.accordion-1 { + min-width: 100%; + text-align: left; + object-fit: cover; + align-items: center; + margin-left: auto; + margin-right: auto; + display: block; + position: relative; +} + +.text-block-5 { + text-align: left; + margin-left: auto; + margin-right: auto; + padding-left: 20px; + padding-right: 20px; +} + +.text-block-6 { + text-align: left; + margin: 20px auto; + padding-left: 20px; + padding-right: 20px; + display: inline-block; + position: relative; +} + +.text-block-7, .text-block-8 { + display: inline-block; +} + +.dropdown-list { + display: block; + position: absolute; + overflow: visible; +} + +.dropdown-list.w--open { + display: block; +} + +.text-block-9 { + display: flex; + position: relative; +} + +.dropdown, .dropdown-toggle { + display: block; +} + +.text-block-10 { + padding: 20px; +} + +.accordion-1-copy { + min-width: 100%; + text-align: left; + object-fit: cover; + align-items: center; + margin-left: auto; + margin-right: auto; + display: block; + position: relative; +} + +.ticker-list { + width: 100%; + height: 100%; + grid-column-gap: 16px; + grid-row-gap: 16px; + grid-template-rows: auto; + grid-template-columns: 1fr 1fr 1fr 1fr; + grid-auto-columns: 1fr; + padding-left: 0; + list-style-type: none; + display: grid; + overflow: auto; +} + +.container-ticker { + max-width: 100%; + display: block; +} + +.section-ticker { + width: 100%; +} + +.ticker-item, .list-item-3, .list-item-4, .list-item-5 { + text-align: center; +} + +.ticker-title { + text-align: center; + margin-bottom: 8px; + font-size: 40px; + font-weight: 600; + line-height: 48px; + display: inline-block; +} + +.clients-image-copy { + margin-left: auto; + margin-right: auto; +} + +.navigation-item-copy { + opacity: .6; + letter-spacing: 1px; + text-transform: uppercase; + margin-right: 0; + padding: 9px 20px; + font-size: 12px; + font-weight: 500; + line-height: 20px; + text-decoration: none; + display: none; +} + +.navigation-item-copy:hover { + opacity: .9; + outline-offset: 0px; + border-bottom: 1px solid #fe5f03; + outline: 3px #32343a; +} + +.navigation-item-copy:active { + opacity: .8; +} + +.navigation-item-copy.w--current { + opacity: 1; + color: #1a1b1f; + font-weight: 600; +} + +.navigation-item-copy.w--current:hover { + opacity: .8; + color: #32343a; +} + +.navigation-item-copy.w--current:active { + opacity: .7; + color: #32343a; +} + +.footer-link-copy { + color: #1a1b1f; + margin-top: 12px; + margin-bottom: 6px; + font-size: 14px; + line-height: 16px; + text-decoration: none; + display: none; +} + +.footer-link-copy:hover { + color: rgba(26, 27, 31, .75); +} + +.clients-image-copy { + min-width: 200px; + min-width: 200px; + margin-left: auto; + margin-right: auto; + display: block; +} + +.image-6 { + margin-right: 0; + padding-top: 20px; +} + +.accordion-2-copy, .accordion-3-copy, .accordion-4-copy, .accordion-5-copy { + min-width: 100%; + text-align: left; + object-fit: cover; + align-items: center; + margin-left: auto; + margin-right: auto; + display: block; + position: relative; +} + +.section-copy { + margin-bottom: 40px; + margin-left: 0; + margin-right: 0; + display: block; + position: relative; +} + +.section-copy.cc-cta { + background-color: #f4f4f4; + margin-left: 0; + margin-right: 0; + padding-left: 80px; + padding-right: 80px; + display: none; +} + +.section-copy.cc-store-home-wrap { + background-color: var(--white); +} + +.link-block { + display: none; +} + +@media screen and (min-width: 1280px) { + .button.cc-jumbo-button.cc-jumbo-white { + margin-bottom: 40px; + } + + .heading-jumbo-small { + color: var(--black); + } + + .motto-wrap { + background-image: none; + } + + .project-overview-header.cc-project-3-header { + background-color: #fff; + background-image: none; + } + + .home-content-wrap { + margin-bottom: 80px; + } + + .about-grid.cc-about-2 { + margin-bottom: 40px; + } + + .footer-social-block { + display: none; + } + + .logos-title-large { + margin-bottom: 40px; + } + + .clients-image { + min-width: 180px; + flex: 0 auto; + margin-top: 0; + margin-left: 20px; + margin-right: 20px; + padding-top: 0; + padding-bottom: 0; + } + + .text-block-2 { + color: var(--black); + } + + .gallery-slide-text { + color: var(--white); + text-align: center; + top: 0%; + bottom: auto; + left: 0%; + right: 0%; + } + + .text-span-2 { + color: var(--black); + } + + .about-grid-copy { + display: none; + } + + .about-grid-copy.cc-about-2 { + margin-bottom: 40px; + } + + .clients-image-kava { + flex: 0 auto; + margin-left: 20px; + margin-right: 20px; + display: none; + } + + .project-overview-header-copy.cc-project-3-header { + background-color: #fff; + background-image: none; + } + + .logos-title-large-copy { + margin-bottom: 40px; + } + + .clients-image-copy { + flex: 0 auto; + margin-left: 20px; + margin-right: 20px; + } + + .div-block-2 { + margin-left: auto; + margin-right: auto; + } + + .text-block-6 { + padding-left: 20px; + padding-right: 20px; + } + + .clients-image-copy { + min-width: 180px; + min-width: 180px; + flex: 0 auto; + margin-top: 0; + margin-left: 20px; + margin-right: 20px; + padding-top: 0; + padding-bottom: 0; + } + + .image-7 { + object-fit: contain; + } +} + +@media screen and (min-width: 1920px) { + .section { + display: none; + } + + .section.cc-store-home-wrap { + width: 100%; + display: block; + } + + .image-7 { + object-fit: cover; + } + + .section-copy { + display: none; + } + + .section-copy.cc-home-wrap { + display: block; + } + + .body { + height: 100%; + max-height: 336.13%; + max-width: 100%; + min-height: 100px; + min-width: 100%; + grid-column-gap: 16px; + grid-row-gap: 16px; + aspect-ratio: 16 / 9; + object-fit: cover; + grid-template-rows: auto auto; + grid-template-columns: 1fr; + grid-auto-columns: 1fr; + grid-auto-flow: row; + justify-content: space-around; + display: block; + overflow: visible; + } +} + +@media screen and (max-width: 991px) { + .section.cc-cta { + padding-left: 0; + padding-right: 0; + } + + .styleguide-block { + text-align: center; + } + + .button { + justify-content: center; + } + + .button.cc-contact-us { + display: none; + } + + .paragraph-light { + text-align: center; + } + + .heading-jumbo { + font-size: 56px; + line-height: 70px; + } + + .logo-link.w--current { + flex: 1; + } + + .menu-icon { + display: block; + } + + .menu { + margin-left: 0; + position: static; + } + + .navigation-wrap { + background-color: #fff; + } + + .navigation { + padding: 25px 30px; + } + + .navigation-item { + text-align: center; + padding: 15px 30px; + transition: background-color .4s, opacity .4s, color .4s; + } + + .navigation-item:hover { + background-color: #f7f8f9; + } + + .navigation-item:active { + background-color: #eef0f3; + } + + .menu-button { + padding: 0; + } + + .menu-button.w--open { + background-color: rgba(0, 0, 0, 0); + } + + .navigation-items { + background-color: #fff; + } + + .cta-text { + width: auto; + } + + .cta-wrap { + width: auto; + padding: 80px 50px 90px; + } + + .intro-header { + background-position: 50%; + background-size: contain; + } + + .our-services-grid { + width: 80%; + text-align: center; + grid-template: ". ." + ". ." + ". ." + / 1fr 1fr; + margin-left: auto; + margin-right: auto; + } + + .service-icon { + text-align: center; + display: block; + } + + .contact-form-grid { + width: 80%; + grid-row-gap: 50px; + text-align: center; + grid-template: "." + "." + / 1fr; + margin-left: auto; + margin-right: auto; + } + + .get-in-touch-form { + text-align: left; + } + + .our-contacts { + width: 80%; + grid-template: "." + "." + "." + / 1fr; + margin-left: auto; + margin-right: auto; + } + + .team-members { + grid-template: ". ." + ". ." + ". ." + / 1fr 1fr; + } + + .team-member-title-wrap { + margin-bottom: 30px; + } + + .project-details-grid { + width: 80%; + grid-row-gap: 50px; + text-align: center; + grid-template: "." + "." + / 1fr; + margin-left: auto; + margin-right: auto; + } + + .blog-detail-header-wrap { + width: 70%; + } + + .detail-header-image { + height: 460px; + } + + .blog-item { + width: 80%; + } + + .blog-preview-image { + height: 460px; + } + + .blog-summary-wrap { + width: 100%; + } + + .about-grid { + grid-row-gap: 50px; + text-align: center; + grid-template: "." + "." + / 1fr; + } + + .about-grid.cc-about-2 { + grid-template-columns: 1fr; + grid-template-areas: "." + "."; + } + + .intro-text { + width: auto; + } + + .collection-wrap { + flex-flow: column; + align-items: center; + margin-left: 0; + margin-right: 0; + } + + .blog-preview-wrap { + width: 80%; + text-align: center; + padding-right: 15px; + } + + .container-2 { + max-width: 728px; + } + + .footer-content { + grid-column-gap: 60px; + } + + .clients-title { + margin-bottom: 32px; + } + + .gallery-wrapper { + grid-template-columns: 1fr 1fr; + } + + .gallery-slider-left { + left: -20px; + } + + .gallery-slider-right { + right: -20px; + } + + .features-wrapper { + justify-content: space-between; + } + + .features-wrapper-two { + flex-direction: column; + justify-content: flex-start; + align-items: flex-start; + } + + .features-left { + max-width: 100%; + margin-bottom: 40px; + } + + .features-right { + max-width: 100%; + } + + .navigation-home-page { + padding: 25px 30px; + } + + .about-grid-copy { + grid-row-gap: 50px; + text-align: center; + grid-template: "." + "." + / 1fr; + } + + .about-grid-copy.cc-about-2 { + grid-template-columns: 1fr; + grid-template-areas: "." + "."; + } + + .section-copy.cc-cta { + padding-left: 0; + padding-right: 0; + } + + .our-services-grid-copy { + width: 80%; + text-align: center; + grid-template: ". ." + ". ." + ". ." + / 1fr 1fr; + margin-left: auto; + margin-right: auto; + } + + .navigation-item-copy { + text-align: center; + padding: 15px 30px; + transition: background-color .4s, opacity .4s, color .4s; + } + + .navigation-item-copy:hover { + background-color: #f7f8f9; + } + + .navigation-item-copy:active { + background-color: #eef0f3; + } + + .navbar-wrapper-three { + justify-content: space-between; + } + + .navbar-brand-three { + position: relative; + } + + .nav-menu-wrapper-three { + background-color: rgba(0, 0, 0, 0); + top: 70px; + } + + .nav-menu-three { + background-color: #fff; + border-radius: 50px; + flex-wrap: wrap; + justify-content: space-between; + align-items: center; + margin-top: 10px; + padding: 20px; + display: flex; + box-shadow: 0 8px 50px rgba(0, 0, 0, .05); + } + + .nav-link { + padding-left: 5px; + padding-right: 5px; + } + + .nav-dropdown-list.shadow-three.w--open { + position: absolute; + } + + .menu-button-2 { + padding: 12px; + } + + .menu-button-2.w--open { + color: #fff; + background-color: #a6b1bf; + } + + .nav-menu-wrapper { + background-color: rgba(0, 0, 0, 0); + } + + .nav-menu { + background-color: #fff; + flex-wrap: wrap; + justify-content: space-around; + align-items: center; + padding-left: 0; + display: flex; + } + + .nav-button-wrapper { + width: 100%; + margin-left: 0; + } + + .nav-menu-two { + background-color: #fff; + border-radius: 50px; + flex-wrap: wrap; + justify-content: space-around; + align-items: center; + margin-top: 10px; + padding: 20px; + display: flex; + box-shadow: 0 8px 50px rgba(0, 0, 0, .05); + } + + .navigation-item-copy { + text-align: center; + padding: 15px 30px; + transition: background-color .4s, opacity .4s, color .4s; + } + + .navigation-item-copy:hover { + background-color: #f7f8f9; + } + + .navigation-item-copy:active { + background-color: #eef0f3; + } + + .section-copy.cc-cta { + padding-left: 0; + padding-right: 0; + } +} + +@media screen and (max-width: 767px) { + .section { + margin-left: 15px; + margin-right: 15px; + } + + .section.cc-cta { + padding: 15px; + } + + .section.cc-home-wrap, .section.cc-store-home-wrap { + margin-left: 15px; + margin-right: 15px; + } + + .container { + text-align: center; + } + + .paragraph-bigger { + font-size: 16px; + line-height: 28px; + } + + .rich-text { + width: 90%; + max-width: 470px; + text-align: left; + } + + .heading-jumbo { + font-size: 50px; + line-height: 64px; + } + + .heading-jumbo-small { + font-size: 30px; + line-height: 52px; + } + + .logo-link { + padding-left: 0; + } + + .navigation { + padding: 20px 30px; + } + + .cta-wrap { + padding-left: 30px; + padding-right: 30px; + } + + .intro-header { + background-position: 50%; + background-size: contain; + } + + .intro-content { + width: 80%; + } + + .our-services-grid { + grid-row-gap: 60px; + grid-template: "." + "." + "." + "." + "." + "." + / 1fr; + } + + .status-message.cc-no-data { + width: 80%; + max-width: 470px; + } + + .contact-form-wrap { + padding: 30px; + } + + .text-field.cc-contact-field, .text-field.cc-textarea { + text-align: left; + } + + .team-pic { + height: 300px; + margin-bottom: 30px; + } + + .team-member-name { + font-size: 16px; + line-height: 28px; + } + + .project-name-wrap { + margin-bottom: 30px; + } + + .project-name-link { + font-size: 16px; + line-height: 28px; + } + + .detail-image { + margin-bottom: 15px; + } + + .blog-detail-header-wrap { + width: 90%; + max-width: 470px; + text-align: left; + } + + .blog-item { + width: 90%; + max-width: 470px; + } + + .blog-summary-wrap { + text-align: center; + } + + .utility-page-wrap { + padding: 15px; + } + + ._404-wrap { + padding: 30px; + } + + .footer-dark { + padding-left: 15px; + padding-right: 15px; + } + + .footer-wrapper { + flex-direction: column; + align-items: center; + } + + .footer-content { + grid-template-columns: 1fr; + margin-top: 40px; + } + + .footer-block { + align-items: center; + } + + .footer-link:hover { + color: rgba(26, 27, 31, .75); + } + + .footer-social-block { + margin-top: 20px; + margin-left: -20px; + } + + .footer-social-link { + margin-left: 20px; + } + + .footer-divider { + margin-top: 60px; + } + + .logos-title-large { + padding: 60px 15px; + } + + .clients-wrapper { + flex-wrap: wrap; + justify-content: space-around; + margin-bottom: -20px; + } + + .clients-image { + margin-bottom: 30px; + margin-left: 20px; + margin-right: 20px; + } + + .gallery-slider { + padding: 60px 15px; + } + + .gallery-slide { + margin-left: 10px; + margin-right: 10px; + } + + .gallery-slide-text { + line-height: 30px; + } + + .gallery-slider-left { + left: -20px; + } + + .gallery-slider-right { + right: -20px; + } + + .features-metrics { + padding: 60px 15px; + } + + .features-wrapper { + flex-wrap: wrap; + margin-bottom: -40px; + } + + .features-block { + width: 50%; + margin-bottom: 40px; + } + + .features-list { + padding: 60px 15px; + } + + .navigation-home-page { + padding: 20px 30px; + } + + .clients-image-kava { + margin-bottom: 30px; + margin-left: 20px; + margin-right: 20px; + } + + .project-overview-header-copy.cc-project-3-header { + margin-left: auto; + margin-right: auto; + } + + .section-copy { + margin-left: 15px; + margin-right: 15px; + } + + .section-copy.cc-cta { + padding: 15px; + } + + .section-copy.cc-home-wrap, .section-copy.cc-store-home-wrap { + margin-left: 15px; + margin-right: 15px; + } + + .our-services-grid-copy { + grid-row-gap: 60px; + grid-template: "." + "." + "." + "." + "." + "." + / 1fr; + } + + .logos-title-large-copy, .logos-title-large-2 { + padding: 60px 15px; + } + + .clients-image-2 { + margin-bottom: 30px; + margin-left: 20px; + margin-right: 20px; + } + + .navbar-brand-three { + padding-left: 0; + } + + .nav-menu-three { + border-radius: 20px; + flex-direction: column; + padding-bottom: 30px; + } + + .nav-menu-block { + flex-direction: column; + } + + .nav-link { + padding-top: 10px; + padding-bottom: 10px; + display: inline-block; + } + + .nav-dropdown { + flex-direction: column; + align-items: center; + display: flex; + } + + .nav-dropdown-toggle { + padding-top: 10px; + padding-bottom: 10px; + } + + .nav-dropdown-list.shadow-three { + box-shadow: 0 8px 50px rgba(0, 0, 0, .05); + } + + .nav-dropdown-list.shadow-three.w--open { + position: relative; + } + + .nav-dropdown-list.shadow-three.mobile-shadow-hide { + box-shadow: none; + } + + .nav-link-accent { + margin-right: 5px; + padding-top: 10px; + padding-bottom: 10px; + display: inline-block; + } + + .mobile-margin-top-10 { + margin-top: 10px; + } + + .navbar-brand { + padding-left: 0; + } + + .nav-menu { + flex-direction: column; + padding-bottom: 30px; + padding-left: 0; + } + + .navbar-logo-left-container { + max-width: 100%; + } + + .nav-menu-two { + border-radius: 20px; + flex-direction: column; + padding-bottom: 30px; + } + + .nav-divider { + width: 200px; + height: 1px; + max-width: 100%; + margin-top: 10px; + margin-bottom: 10px; + } + + .clients-image-copy { + margin-bottom: 30px; + margin-left: 20px; + margin-right: 20px; + } + + .image-5 { + margin-left: auto; + margin-right: auto; + } + + .clients-image-copy { + margin-bottom: 30px; + margin-left: 20px; + margin-right: 20px; + } + + .footer-link-copy:hover { + color: rgba(26, 27, 31, .75); + } + + .clients-image-copy { + margin-bottom: 30px; + margin-left: 20px; + margin-right: 20px; + } + + .section-copy { + margin-left: 15px; + margin-right: 15px; + } + + .section-copy.cc-cta { + padding: 15px; + } + + .section-copy.cc-home-wrap, .section-copy.cc-store-home-wrap { + margin-left: 15px; + margin-right: 15px; + } +} + +@media screen and (max-width: 479px) { + h1 { + font-size: 36px; + line-height: 52px; + } + + .section, .section.cc-home-wrap { + margin-left: auto; + margin-right: auto; + } + + .rich-text { + width: 100%; + max-width: none; + } + + .paragraph-light { + padding-right: 0; + } + + .heading-jumbo { + font-size: 36px; + line-height: 48px; + } + + .menu { + margin-left: 15px; + } + + .navigation { + padding-left: 20px; + padding-right: 20px; + } + + .menu-button, .menu-button.w--open { + flex: none; + } + + .cta-wrap { + padding-left: 15px; + padding-right: 15px; + } + + .intro-header { + background-position: 50%; + } + + .intro-content { + margin-left: auto; + margin-right: auto; + } + + .status-message.cc-no-data, .contact-form-grid { + width: 100%; + } + + .our-contacts { + width: 90%; + } + + .team-members { + grid-template: "." + "." + "." + "." + "." + "." + / 1fr; + } + + .project-details-grid { + width: 100%; + } + + .blog-detail-header-wrap, .blog-item { + width: 100%; + max-width: none; + } + + .container-2 { + max-width: none; + } + + .clients-image { + margin-left: 10px; + margin-right: 10px; + } + + .gallery-wrapper { + grid-template-columns: 1fr; + } + + .gallery-slide-wrapper { + max-width: 100%; + margin-right: 0%; + } + + .gallery-slider-left { + left: -20px; + } + + .gallery-slider-right { + right: -20px; + } + + .features-right { + margin-bottom: -30px; + } + + .features-block-two { + flex-direction: column; + justify-content: flex-start; + align-items: flex-start; + margin-bottom: 30px; + } + + .features-image { + margin-bottom: 10px; + } + + .navigation-home-page { + padding-left: 20px; + padding-right: 20px; + } + + .clients-image-kava { + margin-left: 10px; + margin-right: 10px; + } + + .project-overview-header-copy.cc-project-3-header { + margin-left: auto; + margin-right: auto; + } + + .clients-image-2 { + margin-left: 10px; + margin-right: 10px; + } + + .nav-menu-three, .nav-menu { + flex-direction: column; + } + + .nav-button-wrapper { + width: auto; + } + + .nav-menu-two { + flex-direction: column; + } + + .clients-image-copy { + margin-left: 10px; + margin-right: 10px; + } + + .ticker-list { + text-align: left; + align-content: center; + justify-content: center; + align-items: start; + justify-items: center; + text-decoration: none; + } + + .clients-image-copy { + margin-left: 10px; + margin-right: 10px; + } + + .section-copy, .section-copy.cc-home-wrap { + margin-left: auto; + margin-right: auto; + } +} + +#w-node-a101090e-e4c6-0041-136e-760e5bdc10c6-a0447e95 { + grid-area: 1 / 1 / 2 / 2; +} + +#w-node-a101090e-e4c6-0041-136e-760e5bdc10d1-a0447e95, #w-node-a101090e-e4c6-0041-136e-760e5bdc10d3-a0447e95 { + grid-area: 1 / 2 / 2 / 3; +} + +#w-node-a101090e-e4c6-0041-136e-760e5bdc10de-a0447e95, #w-node-_06743181-4112-4a4e-bafd-08cc47f4acbd-a0447e95 { + grid-area: 1 / 1 / 2 / 2; +} + +#w-node-_06743181-4112-4a4e-bafd-08cc47f4acca-a0447e95 { + grid-area: 1 / 2 / 2 / 3; +} + +#w-node-ab5c6393-74d9-dbcf-c131-45692eb19df6-51e627e8, #w-node-ab5c6393-74d9-dbcf-c131-45692eb19dff-51e627e8, #w-node-ab5c6393-74d9-dbcf-c131-45692eb19e11-51e627e8 { + grid-area: span 1 / span 1 / span 1 / span 1; +} + +#w-node-f809c0a2-5803-caf6-4425-a92dcef7ae41-a0447e98 { + grid-area: 1 / 1 / 2 / 2; +} + +#w-node-f809c0a2-5803-caf6-4425-a92dcef7ae4e-a0447e98 { + grid-area: 1 / 2 / 2 / 3; +} + +#w-node-f809c0a2-5803-caf6-4425-a92dcef7ae5b-a0447e98 { + grid-area: 1 / 3 / 2 / 4; +} + +#w-node-c49f53d8-2d93-54a2-992b-3660fc65c7da-a0447e98 { + grid-area: 1 / 1 / 2 / 2; +} + +#w-node-c49f53d8-2d93-54a2-992b-3660fc65c7f2-a0447e98 { + grid-area: 1 / 2 / 2 / 3; +} + +@media screen and (max-width: 991px) { + #w-node-a101090e-e4c6-0041-136e-760e5bdc10c6-a0447e95 { + grid-area: 2 / 1 / 3 / 2; + } + + #w-node-a101090e-e4c6-0041-136e-760e5bdc10d1-a0447e95 { + grid-area: 1 / 1 / 2 / 2; + } + + #w-node-a101090e-e4c6-0041-136e-760e5bdc10d3-a0447e95 { + grid-area: 2 / 1 / 3 / 2; + } + + #w-node-a101090e-e4c6-0041-136e-760e5bdc10de-a0447e95 { + grid-area: 1 / 1 / 2 / 2; + } + + #w-node-_06743181-4112-4a4e-bafd-08cc47f4acbd-a0447e95 { + grid-area: 2 / 1 / 3 / 2; + } + + #w-node-_06743181-4112-4a4e-bafd-08cc47f4acca-a0447e95 { + grid-area: 1 / 1 / 2 / 2; + } + + #w-node-f809c0a2-5803-caf6-4425-a92dcef7ae4e-a0447e98 { + grid-area: 2 / 1 / 3 / 2; + } + + #w-node-f809c0a2-5803-caf6-4425-a92dcef7ae5b-a0447e98 { + grid-area: 3 / 1 / 4 / 2; + } + + #w-node-c49f53d8-2d93-54a2-992b-3660fc65c7f2-a0447e98 { + grid-area: 2 / 1 / 3 / 2; + } +} + + diff --git a/css/webflow.css b/css/webflow.css new file mode 100644 index 0000000..fa41700 --- /dev/null +++ b/css/webflow.css @@ -0,0 +1,1817 @@ +@font-face { + font-family: 'webflow-icons'; + src: url("data:application/x-font-ttf;charset=utf-8;base64,AAEAAAALAIAAAwAwT1MvMg8SBiUAAAC8AAAAYGNtYXDpP+a4AAABHAAAAFxnYXNwAAAAEAAAAXgAAAAIZ2x5ZmhS2XEAAAGAAAADHGhlYWQTFw3HAAAEnAAAADZoaGVhCXYFgQAABNQAAAAkaG10eCe4A1oAAAT4AAAAMGxvY2EDtALGAAAFKAAAABptYXhwABAAPgAABUQAAAAgbmFtZSoCsMsAAAVkAAABznBvc3QAAwAAAAAHNAAAACAAAwP4AZAABQAAApkCzAAAAI8CmQLMAAAB6wAzAQkAAAAAAAAAAAAAAAAAAAABEAAAAAAAAAAAAAAAAAAAAABAAADpAwPA/8AAQAPAAEAAAAABAAAAAAAAAAAAAAAgAAAAAAADAAAAAwAAABwAAQADAAAAHAADAAEAAAAcAAQAQAAAAAwACAACAAQAAQAg5gPpA//9//8AAAAAACDmAOkA//3//wAB/+MaBBcIAAMAAQAAAAAAAAAAAAAAAAABAAH//wAPAAEAAAAAAAAAAAACAAA3OQEAAAAAAQAAAAAAAAAAAAIAADc5AQAAAAABAAAAAAAAAAAAAgAANzkBAAAAAAEBIAAAAyADgAAFAAAJAQcJARcDIP5AQAGA/oBAAcABwED+gP6AQAABAOAAAALgA4AABQAAEwEXCQEH4AHAQP6AAYBAAcABwED+gP6AQAAAAwDAAOADQALAAA8AHwAvAAABISIGHQEUFjMhMjY9ATQmByEiBh0BFBYzITI2PQE0JgchIgYdARQWMyEyNj0BNCYDIP3ADRMTDQJADRMTDf3ADRMTDQJADRMTDf3ADRMTDQJADRMTAsATDSANExMNIA0TwBMNIA0TEw0gDRPAEw0gDRMTDSANEwAAAAABAJ0AtAOBApUABQAACQIHCQEDJP7r/upcAXEBcgKU/usBFVz+fAGEAAAAAAL//f+9BAMDwwAEAAkAABcBJwEXAwE3AQdpA5ps/GZsbAOabPxmbEMDmmz8ZmwDmvxmbAOabAAAAgAA/8AEAAPAAB0AOwAABSInLgEnJjU0Nz4BNzYzMTIXHgEXFhUUBw4BBwYjNTI3PgE3NjU0Jy4BJyYjMSIHDgEHBhUUFx4BFxYzAgBqXV6LKCgoKIteXWpqXV6LKCgoKIteXWpVSktvICEhIG9LSlVVSktvICEhIG9LSlVAKCiLXl1qal1eiygoKCiLXl1qal1eiygoZiEgb0tKVVVKS28gISEgb0tKVVVKS28gIQABAAABwAIAA8AAEgAAEzQ3PgE3NjMxFSIHDgEHBhUxIwAoKIteXWpVSktvICFmAcBqXV6LKChmISBvS0pVAAAAAgAA/8AFtgPAADIAOgAAARYXHgEXFhUUBw4BBwYHIxUhIicuAScmNTQ3PgE3NjMxOAExNDc+ATc2MzIXHgEXFhcVATMJATMVMzUEjD83NlAXFxYXTjU1PQL8kz01Nk8XFxcXTzY1PSIjd1BQWlJJSXInJw3+mdv+2/7c25MCUQYcHFg5OUA/ODlXHBwIAhcXTzY1PTw1Nk8XF1tQUHcjIhwcYUNDTgL+3QFt/pOTkwABAAAAAQAAmM7nP18PPPUACwQAAAAAANciZKUAAAAA1yJkpf/9/70FtgPDAAAACAACAAAAAAAAAAEAAAPA/8AAAAW3//3//QW2AAEAAAAAAAAAAAAAAAAAAAAMBAAAAAAAAAAAAAAAAgAAAAQAASAEAADgBAAAwAQAAJ0EAP/9BAAAAAQAAAAFtwAAAAAAAAAKABQAHgAyAEYAjACiAL4BFgE2AY4AAAABAAAADAA8AAMAAAAAAAIAAAAAAAAAAAAAAAAAAAAAAAAADgCuAAEAAAAAAAEADQAAAAEAAAAAAAIABwCWAAEAAAAAAAMADQBIAAEAAAAAAAQADQCrAAEAAAAAAAUACwAnAAEAAAAAAAYADQBvAAEAAAAAAAoAGgDSAAMAAQQJAAEAGgANAAMAAQQJAAIADgCdAAMAAQQJAAMAGgBVAAMAAQQJAAQAGgC4AAMAAQQJAAUAFgAyAAMAAQQJAAYAGgB8AAMAAQQJAAoANADsd2ViZmxvdy1pY29ucwB3AGUAYgBmAGwAbwB3AC0AaQBjAG8AbgBzVmVyc2lvbiAxLjAAVgBlAHIAcwBpAG8AbgAgADEALgAwd2ViZmxvdy1pY29ucwB3AGUAYgBmAGwAbwB3AC0AaQBjAG8AbgBzd2ViZmxvdy1pY29ucwB3AGUAYgBmAGwAbwB3AC0AaQBjAG8AbgBzUmVndWxhcgBSAGUAZwB1AGwAYQByd2ViZmxvdy1pY29ucwB3AGUAYgBmAGwAbwB3AC0AaQBjAG8AbgBzRm9udCBnZW5lcmF0ZWQgYnkgSWNvTW9vbi4ARgBvAG4AdAAgAGcAZQBuAGUAcgBhAHQAZQBkACAAYgB5ACAASQBjAG8ATQBvAG8AbgAuAAAAAwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA==") format('truetype'); + font-weight: normal; + font-style: normal; +} +[class^="w-icon-"], +[class*=" w-icon-"] { + /* use !important to prevent issues with browser extensions that change fonts */ + font-family: 'webflow-icons' !important; + speak: none; + font-style: normal; + font-weight: normal; + font-variant: normal; + text-transform: none; + line-height: 1; + /* Better Font Rendering =========== */ + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} +.w-icon-slider-right:before { + content: "\e600"; +} +.w-icon-slider-left:before { + content: "\e601"; +} +.w-icon-nav-menu:before { + content: "\e602"; +} +.w-icon-arrow-down:before, +.w-icon-dropdown-toggle:before { + content: "\e603"; +} +.w-icon-file-upload-remove:before { + content: "\e900"; +} +.w-icon-file-upload-icon:before { + content: "\e903"; +} +* { + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; +} +html { + height: 100%; +} +body { + margin: 0; + min-height: 100%; + background-color: #fff; + font-family: Arial, sans-serif; + font-size: 14px; + line-height: 20px; + color: #333; +} +img { + max-width: 100%; + vertical-align: middle; + display: inline-block; +} +html.w-mod-touch * { + background-attachment: scroll !important; +} +.w-block { + display: block; +} +.w-inline-block { + max-width: 100%; + display: inline-block; +} +.w-clearfix:before, +.w-clearfix:after { + content: " "; + display: table; + grid-column-start: 1; + grid-row-start: 1; + grid-column-end: 2; + grid-row-end: 2; +} +.w-clearfix:after { + clear: both; +} +.w-hidden { + display: none; +} +.w-button { + display: inline-block; + padding: 9px 15px; + background-color: #3898EC; + color: white; + border: 0; + line-height: inherit; + text-decoration: none; + cursor: pointer; + border-radius: 0; +} +input.w-button { + -webkit-appearance: button; +} +html[data-w-dynpage] [data-w-cloak] { + color: transparent !important; +} +.w-code-block { + margin: unset; +} +.w-webflow-badge, +.w-webflow-badge * { + position: static; + left: auto; + top: auto; + right: auto; + bottom: auto; + z-index: auto; + display: block; + visibility: visible; + overflow: visible; + overflow-x: visible; + overflow-y: visible; + box-sizing: border-box; + width: auto; + height: auto; + max-height: none; + max-width: none; + min-height: 0; + min-width: 0; + margin: 0; + padding: 0; + float: none; + clear: none; + border: 0 none transparent; + border-radius: 0; + background: none; + background-image: none; + background-position: 0% 0%; + background-size: auto auto; + background-repeat: repeat; + background-origin: padding-box; + background-clip: border-box; + background-attachment: scroll; + background-color: transparent; + box-shadow: none; + opacity: 1; + transform: none; + transition: none; + direction: ltr; + font-family: inherit; + font-weight: inherit; + color: inherit; + font-size: inherit; + line-height: inherit; + font-style: inherit; + font-variant: inherit; + text-align: inherit; + letter-spacing: inherit; + text-decoration: inherit; + text-indent: 0; + text-transform: inherit; + list-style-type: disc; + text-shadow: none; + font-smoothing: auto; + vertical-align: baseline; + cursor: inherit; + white-space: inherit; + word-break: normal; + word-spacing: normal; + word-wrap: normal; +} +.w-webflow-badge { + position: fixed !important; + display: inline-block !important; + visibility: visible !important; + z-index: 2147483647 !important; + top: auto !important; + right: 12px !important; + bottom: 12px !important; + left: auto !important; + color: #aaadb0 !important; + background-color: #fff !important; + border-radius: 3px !important; + padding: 6px !important; + font-size: 12px !important; + opacity: 1 !important; + line-height: 14px !important; + text-decoration: none !important; + transform: none !important; + margin: 0 !important; + width: auto !important; + height: auto !important; + overflow: visible !important; + white-space: nowrap; + box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), 0px 1px 3px rgba(0, 0, 0, 0.1); + cursor: pointer; +} +.w-webflow-badge > img { + display: inline-block !important; + visibility: visible !important; + opacity: 1 !important; + vertical-align: middle !important; +} +h1, +h2, +h3, +h4, +h5, +h6 { + font-weight: bold; + margin-bottom: 10px; +} +h1 { + font-size: 38px; + line-height: 44px; + margin-top: 20px; +} +h2 { + font-size: 32px; + line-height: 36px; + margin-top: 20px; +} +h3 { + font-size: 24px; + line-height: 30px; + margin-top: 20px; +} +h4 { + font-size: 18px; + line-height: 24px; + margin-top: 10px; +} +h5 { + font-size: 14px; + line-height: 20px; + margin-top: 10px; +} +h6 { + font-size: 12px; + line-height: 18px; + margin-top: 10px; +} +p { + margin-top: 0; + margin-bottom: 10px; +} +blockquote { + margin: 0 0 10px 0; + padding: 10px 20px; + border-left: 5px solid #E2E2E2; + font-size: 18px; + line-height: 22px; +} +figure { + margin: 0; + margin-bottom: 10px; +} +figcaption { + margin-top: 5px; + text-align: center; +} +ul, +ol { + margin-top: 0px; + margin-bottom: 10px; + padding-left: 40px; +} +.w-list-unstyled { + padding-left: 0; + list-style: none; +} +.w-embed:before, +.w-embed:after { + content: " "; + display: table; + grid-column-start: 1; + grid-row-start: 1; + grid-column-end: 2; + grid-row-end: 2; +} +.w-embed:after { + clear: both; +} +.w-video { + width: 100%; + position: relative; + padding: 0; +} +.w-video iframe, +.w-video object, +.w-video embed { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + border: none; +} +fieldset { + padding: 0; + margin: 0; + border: 0; +} +button, +[type='button'], +[type='reset'] { + border: 0; + cursor: pointer; + -webkit-appearance: button; +} +.w-form { + margin: 0 0 15px; +} +.w-form-done { + display: none; + padding: 20px; + text-align: center; + background-color: #dddddd; +} +.w-form-fail { + display: none; + margin-top: 10px; + padding: 10px; + background-color: #ffdede; +} +label { + display: block; + margin-bottom: 5px; + font-weight: bold; +} +.w-input, +.w-select { + display: block; + width: 100%; + height: 38px; + padding: 8px 12px; + margin-bottom: 10px; + font-size: 14px; + line-height: 1.42857143; + color: #333333; + vertical-align: middle; + background-color: #ffffff; + border: 1px solid #cccccc; +} +.w-input:-moz-placeholder, +.w-select:-moz-placeholder { + color: #999; +} +.w-input::-moz-placeholder, +.w-select::-moz-placeholder { + color: #999; + opacity: 1; +} +.w-input::-webkit-input-placeholder, +.w-select::-webkit-input-placeholder { + color: #999; +} +.w-input:focus, +.w-select:focus { + border-color: #3898EC; + outline: 0; +} +.w-input[disabled], +.w-select[disabled], +.w-input[readonly], +.w-select[readonly], +fieldset[disabled] .w-input, +fieldset[disabled] .w-select { + cursor: not-allowed; +} +.w-input[disabled]:not(.w-input-disabled), +.w-select[disabled]:not(.w-input-disabled), +.w-input[readonly], +.w-select[readonly], +fieldset[disabled]:not(.w-input-disabled) .w-input, +fieldset[disabled]:not(.w-input-disabled) .w-select { + background-color: #eeeeee; +} +textarea.w-input, +textarea.w-select { + height: auto; +} +.w-select { + background-color: #f3f3f3; +} +.w-select[multiple] { + height: auto; +} +.w-form-label { + display: inline-block; + cursor: pointer; + font-weight: normal; + margin-bottom: 0px; +} +.w-radio { + display: block; + margin-bottom: 5px; + padding-left: 20px; +} +.w-radio:before, +.w-radio:after { + content: " "; + display: table; + grid-column-start: 1; + grid-row-start: 1; + grid-column-end: 2; + grid-row-end: 2; +} +.w-radio:after { + clear: both; +} +.w-radio-input { + margin: 4px 0 0; + line-height: normal; + float: left; + margin-left: -20px; +} +.w-radio-input { + margin-top: 3px; +} +.w-file-upload { + display: block; + margin-bottom: 10px; +} +.w-file-upload-input { + width: 0.1px; + height: 0.1px; + opacity: 0; + overflow: hidden; + position: absolute; + z-index: -100; +} +.w-file-upload-default, +.w-file-upload-uploading, +.w-file-upload-success { + display: inline-block; + color: #333333; +} +.w-file-upload-error { + display: block; + margin-top: 10px; +} +.w-file-upload-default.w-hidden, +.w-file-upload-uploading.w-hidden, +.w-file-upload-error.w-hidden, +.w-file-upload-success.w-hidden { + display: none; +} +.w-file-upload-uploading-btn { + display: flex; + font-size: 14px; + font-weight: normal; + cursor: pointer; + margin: 0; + padding: 8px 12px; + border: 1px solid #cccccc; + background-color: #fafafa; +} +.w-file-upload-file { + display: flex; + flex-grow: 1; + justify-content: space-between; + margin: 0; + padding: 8px 9px 8px 11px; + border: 1px solid #cccccc; + background-color: #fafafa; +} +.w-file-upload-file-name { + font-size: 14px; + font-weight: normal; + display: block; +} +.w-file-remove-link { + margin-top: 3px; + margin-left: 10px; + width: auto; + height: auto; + padding: 3px; + display: block; + cursor: pointer; +} +.w-icon-file-upload-remove { + margin: auto; + font-size: 10px; +} +.w-file-upload-error-msg { + display: inline-block; + color: #ea384c; + padding: 2px 0; +} +.w-file-upload-info { + display: inline-block; + line-height: 38px; + padding: 0 12px; +} +.w-file-upload-label { + display: inline-block; + font-size: 14px; + font-weight: normal; + cursor: pointer; + margin: 0; + padding: 8px 12px; + border: 1px solid #cccccc; + background-color: #fafafa; +} +.w-icon-file-upload-icon, +.w-icon-file-upload-uploading { + display: inline-block; + margin-right: 8px; + width: 20px; +} +.w-icon-file-upload-uploading { + height: 20px; +} +.w-container { + margin-left: auto; + margin-right: auto; + max-width: 940px; +} +.w-container:before, +.w-container:after { + content: " "; + display: table; + grid-column-start: 1; + grid-row-start: 1; + grid-column-end: 2; + grid-row-end: 2; +} +.w-container:after { + clear: both; +} +.w-container .w-row { + margin-left: -10px; + margin-right: -10px; +} +.w-row:before, +.w-row:after { + content: " "; + display: table; + grid-column-start: 1; + grid-row-start: 1; + grid-column-end: 2; + grid-row-end: 2; +} +.w-row:after { + clear: both; +} +.w-row .w-row { + margin-left: 0; + margin-right: 0; +} +.w-col { + position: relative; + float: left; + width: 100%; + min-height: 1px; + padding-left: 10px; + padding-right: 10px; +} +.w-col .w-col { + padding-left: 0; + padding-right: 0; +} +.w-col-1 { + width: 8.33333333%; +} +.w-col-2 { + width: 16.66666667%; +} +.w-col-3 { + width: 25%; +} +.w-col-4 { + width: 33.33333333%; +} +.w-col-5 { + width: 41.66666667%; +} +.w-col-6 { + width: 50%; +} +.w-col-7 { + width: 58.33333333%; +} +.w-col-8 { + width: 66.66666667%; +} +.w-col-9 { + width: 75%; +} +.w-col-10 { + width: 83.33333333%; +} +.w-col-11 { + width: 91.66666667%; +} +.w-col-12 { + width: 100%; +} +.w-hidden-main { + display: none !important; +} +@media screen and (max-width: 991px) { + .w-container { + max-width: 728px; + } + .w-hidden-main { + display: inherit !important; + } + .w-hidden-medium { + display: none !important; + } + .w-col-medium-1 { + width: 8.33333333%; + } + .w-col-medium-2 { + width: 16.66666667%; + } + .w-col-medium-3 { + width: 25%; + } + .w-col-medium-4 { + width: 33.33333333%; + } + .w-col-medium-5 { + width: 41.66666667%; + } + .w-col-medium-6 { + width: 50%; + } + .w-col-medium-7 { + width: 58.33333333%; + } + .w-col-medium-8 { + width: 66.66666667%; + } + .w-col-medium-9 { + width: 75%; + } + .w-col-medium-10 { + width: 83.33333333%; + } + .w-col-medium-11 { + width: 91.66666667%; + } + .w-col-medium-12 { + width: 100%; + } + .w-col-stack { + width: 100%; + left: auto; + right: auto; + } +} +@media screen and (max-width: 767px) { + .w-hidden-main { + display: inherit !important; + } + .w-hidden-medium { + display: inherit !important; + } + .w-hidden-small { + display: none !important; + } + .w-row, + .w-container .w-row { + margin-left: 0; + margin-right: 0; + } + .w-col { + width: 100%; + left: auto; + right: auto; + } + .w-col-small-1 { + width: 8.33333333%; + } + .w-col-small-2 { + width: 16.66666667%; + } + .w-col-small-3 { + width: 25%; + } + .w-col-small-4 { + width: 33.33333333%; + } + .w-col-small-5 { + width: 41.66666667%; + } + .w-col-small-6 { + width: 50%; + } + .w-col-small-7 { + width: 58.33333333%; + } + .w-col-small-8 { + width: 66.66666667%; + } + .w-col-small-9 { + width: 75%; + } + .w-col-small-10 { + width: 83.33333333%; + } + .w-col-small-11 { + width: 91.66666667%; + } + .w-col-small-12 { + width: 100%; + } +} +@media screen and (max-width: 479px) { + .w-container { + max-width: none; + } + .w-hidden-main { + display: inherit !important; + } + .w-hidden-medium { + display: inherit !important; + } + .w-hidden-small { + display: inherit !important; + } + .w-hidden-tiny { + display: none !important; + } + .w-col { + width: 100%; + } + .w-col-tiny-1 { + width: 8.33333333%; + } + .w-col-tiny-2 { + width: 16.66666667%; + } + .w-col-tiny-3 { + width: 25%; + } + .w-col-tiny-4 { + width: 33.33333333%; + } + .w-col-tiny-5 { + width: 41.66666667%; + } + .w-col-tiny-6 { + width: 50%; + } + .w-col-tiny-7 { + width: 58.33333333%; + } + .w-col-tiny-8 { + width: 66.66666667%; + } + .w-col-tiny-9 { + width: 75%; + } + .w-col-tiny-10 { + width: 83.33333333%; + } + .w-col-tiny-11 { + width: 91.66666667%; + } + .w-col-tiny-12 { + width: 100%; + } +} +.w-widget { + position: relative; +} +.w-widget-map { + width: 100%; + height: 400px; +} +.w-widget-map label { + width: auto; + display: inline; +} +.w-widget-map img { + max-width: inherit; +} +.w-widget-map .gm-style-iw { + text-align: center; +} +.w-widget-map .gm-style-iw > button { + display: none !important; +} +.w-widget-twitter { + overflow: hidden; +} +.w-widget-twitter-count-shim { + display: inline-block; + vertical-align: top; + position: relative; + width: 28px; + height: 20px; + text-align: center; + background: white; + border: #758696 solid 1px; + border-radius: 3px; +} +.w-widget-twitter-count-shim * { + pointer-events: none; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} +.w-widget-twitter-count-shim .w-widget-twitter-count-inner { + position: relative; + font-size: 15px; + line-height: 12px; + text-align: center; + color: #999; + font-family: serif; +} +.w-widget-twitter-count-shim .w-widget-twitter-count-clear { + position: relative; + display: block; +} +.w-widget-twitter-count-shim.w--large { + width: 36px; + height: 28px; +} +.w-widget-twitter-count-shim.w--large .w-widget-twitter-count-inner { + font-size: 18px; + line-height: 18px; +} +.w-widget-twitter-count-shim:not(.w--vertical) { + margin-left: 5px; + margin-right: 8px; +} +.w-widget-twitter-count-shim:not(.w--vertical).w--large { + margin-left: 6px; +} +.w-widget-twitter-count-shim:not(.w--vertical):before, +.w-widget-twitter-count-shim:not(.w--vertical):after { + top: 50%; + left: 0; + border: solid transparent; + content: ' '; + height: 0; + width: 0; + position: absolute; + pointer-events: none; +} +.w-widget-twitter-count-shim:not(.w--vertical):before { + border-color: rgba(117, 134, 150, 0); + border-right-color: #5d6c7b; + border-width: 4px; + margin-left: -9px; + margin-top: -4px; +} +.w-widget-twitter-count-shim:not(.w--vertical).w--large:before { + border-width: 5px; + margin-left: -10px; + margin-top: -5px; +} +.w-widget-twitter-count-shim:not(.w--vertical):after { + border-color: rgba(255, 255, 255, 0); + border-right-color: white; + border-width: 4px; + margin-left: -8px; + margin-top: -4px; +} +.w-widget-twitter-count-shim:not(.w--vertical).w--large:after { + border-width: 5px; + margin-left: -9px; + margin-top: -5px; +} +.w-widget-twitter-count-shim.w--vertical { + width: 61px; + height: 33px; + margin-bottom: 8px; +} +.w-widget-twitter-count-shim.w--vertical:before, +.w-widget-twitter-count-shim.w--vertical:after { + top: 100%; + left: 50%; + border: solid transparent; + content: ' '; + height: 0; + width: 0; + position: absolute; + pointer-events: none; +} +.w-widget-twitter-count-shim.w--vertical:before { + border-color: rgba(117, 134, 150, 0); + border-top-color: #5d6c7b; + border-width: 5px; + margin-left: -5px; +} +.w-widget-twitter-count-shim.w--vertical:after { + border-color: rgba(255, 255, 255, 0); + border-top-color: white; + border-width: 4px; + margin-left: -4px; +} +.w-widget-twitter-count-shim.w--vertical .w-widget-twitter-count-inner { + font-size: 18px; + line-height: 22px; +} +.w-widget-twitter-count-shim.w--vertical.w--large { + width: 76px; +} +.w-background-video { + position: relative; + overflow: hidden; + height: 500px; + color: white; +} +.w-background-video > video { + background-size: cover; + background-position: 50% 50%; + position: absolute; + margin: auto; + width: 100%; + height: 100%; + right: -100%; + bottom: -100%; + top: -100%; + left: -100%; + object-fit: cover; + z-index: -100; +} +.w-background-video > video::-webkit-media-controls-start-playback-button { + display: none !important; + -webkit-appearance: none; +} +.w-background-video--control { + position: absolute; + bottom: 1em; + right: 1em; + background-color: transparent; + padding: 0; +} +.w-background-video--control > [hidden] { + display: none !important; +} +.w-slider { + position: relative; + height: 300px; + text-align: center; + background: #dddddd; + clear: both; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); + tap-highlight-color: rgba(0, 0, 0, 0); +} +.w-slider-mask { + position: relative; + display: block; + overflow: hidden; + z-index: 1; + left: 0; + right: 0; + height: 100%; + white-space: nowrap; +} +.w-slide { + position: relative; + display: inline-block; + vertical-align: top; + width: 100%; + height: 100%; + white-space: normal; + text-align: left; +} +.w-slider-nav { + position: absolute; + z-index: 2; + top: auto; + right: 0; + bottom: 0; + left: 0; + margin: auto; + padding-top: 10px; + height: 40px; + text-align: center; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); + tap-highlight-color: rgba(0, 0, 0, 0); +} +.w-slider-nav.w-round > div { + border-radius: 100%; +} +.w-slider-nav.w-num > div { + width: auto; + height: auto; + padding: 0.2em 0.5em; + font-size: inherit; + line-height: inherit; +} +.w-slider-nav.w-shadow > div { + box-shadow: 0 0 3px rgba(51, 51, 51, 0.4); +} +.w-slider-nav-invert { + color: #fff; +} +.w-slider-nav-invert > div { + background-color: rgba(34, 34, 34, 0.4); +} +.w-slider-nav-invert > div.w-active { + background-color: #222; +} +.w-slider-dot { + position: relative; + display: inline-block; + width: 1em; + height: 1em; + background-color: rgba(255, 255, 255, 0.4); + cursor: pointer; + margin: 0 3px 0.5em; + transition: background-color 100ms, color 100ms; +} +.w-slider-dot.w-active { + background-color: #fff; +} +.w-slider-dot:focus { + outline: none; + box-shadow: 0px 0px 0px 2px #fff; +} +.w-slider-dot:focus.w-active { + box-shadow: none; +} +.w-slider-arrow-left, +.w-slider-arrow-right { + position: absolute; + width: 80px; + top: 0; + right: 0; + bottom: 0; + left: 0; + margin: auto; + cursor: pointer; + overflow: hidden; + color: white; + font-size: 40px; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); + tap-highlight-color: rgba(0, 0, 0, 0); + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} +.w-slider-arrow-left [class^='w-icon-'], +.w-slider-arrow-right [class^='w-icon-'], +.w-slider-arrow-left [class*=' w-icon-'], +.w-slider-arrow-right [class*=' w-icon-'] { + position: absolute; +} +.w-slider-arrow-left:focus, +.w-slider-arrow-right:focus { + outline: 0; +} +.w-slider-arrow-left { + z-index: 3; + right: auto; +} +.w-slider-arrow-right { + z-index: 4; + left: auto; +} +.w-icon-slider-left, +.w-icon-slider-right { + top: 0; + right: 0; + bottom: 0; + left: 0; + margin: auto; + width: 1em; + height: 1em; +} +.w-slider-aria-label { + border: 0; + clip: rect(0 0 0 0); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + width: 1px; +} +.w-slider-force-show { + display: block !important; +} +.w-dropdown { + display: inline-block; + position: relative; + text-align: left; + margin-left: auto; + margin-right: auto; + z-index: 900; +} +.w-dropdown-btn, +.w-dropdown-toggle, +.w-dropdown-link { + position: relative; + vertical-align: top; + text-decoration: none; + color: #222222; + padding: 20px; + text-align: left; + margin-left: auto; + margin-right: auto; + white-space: nowrap; +} +.w-dropdown-toggle { + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + display: inline-block; + cursor: pointer; + padding-right: 40px; +} +.w-dropdown-toggle:focus { + outline: 0; +} +.w-icon-dropdown-toggle { + position: absolute; + top: 0; + right: 0; + bottom: 0; + margin: auto; + margin-right: 20px; + width: 1em; + height: 1em; +} +.w-dropdown-list { + position: absolute; + background: #dddddd; + display: none; + min-width: 100%; +} +.w-dropdown-list.w--open { + display: block; +} +.w-dropdown-link { + padding: 10px 20px; + display: block; + color: #222222; +} +.w-dropdown-link.w--current { + color: #0082f3; +} +.w-dropdown-link:focus { + outline: 0; +} +@media screen and (max-width: 767px) { + .w-nav-brand { + padding-left: 10px; + } +} +/** + * ## Note + * Safari (on both iOS and OS X) does not handle viewport units (vh, vw) well. + * For example percentage units do not work on descendants of elements that + * have any dimensions expressed in viewport units. It also doesn’t handle them at + * all in `calc()`. + */ +/** + * Wrapper around all lightbox elements + * + * 1. Since the lightbox can receive focus, IE also gives it an outline. + * 2. Fixes flickering on Chrome when a transition is in progress + * underneath the lightbox. + */ +.w-lightbox-backdrop { + cursor: auto; + font-style: normal; + letter-spacing: normal; + list-style: disc; + text-indent: 0; + text-shadow: none; + text-transform: none; + visibility: visible; + white-space: normal; + word-break: normal; + word-spacing: normal; + word-wrap: normal; + position: fixed; + top: 0; + right: 0; + bottom: 0; + left: 0; + color: #fff; + font-family: "Helvetica Neue", Helvetica, Ubuntu, "Segoe UI", Verdana, sans-serif; + font-size: 17px; + line-height: 1.2; + font-weight: 300; + text-align: center; + background: rgba(0, 0, 0, 0.9); + z-index: 2000; + outline: 0; + /* 1 */ + opacity: 0; + -webkit-user-select: none; + -moz-user-select: none; + -webkit-tap-highlight-color: transparent; + -webkit-transform: translate(0, 0); + /* 2 */ +} +/** + * Neat trick to bind the rubberband effect to our canvas instead of the whole + * document on iOS. It also prevents a bug that causes the document underneath to scroll. + */ +.w-lightbox-backdrop, +.w-lightbox-container { + height: 100%; + overflow: auto; + -webkit-overflow-scrolling: touch; +} +.w-lightbox-content { + position: relative; + height: 100vh; + overflow: hidden; +} +.w-lightbox-view { + position: absolute; + width: 100vw; + height: 100vh; + opacity: 0; +} +.w-lightbox-view:before { + content: ""; + height: 100vh; +} +/* .w-lightbox-content */ +.w-lightbox-group, +.w-lightbox-group .w-lightbox-view, +.w-lightbox-group .w-lightbox-view:before { + height: 86vh; +} +.w-lightbox-frame, +.w-lightbox-view:before { + display: inline-block; + vertical-align: middle; +} +/* + * 1. Remove default margin set by user-agent on the
element. + */ +.w-lightbox-figure { + position: relative; + margin: 0; + /* 1 */ +} +.w-lightbox-group .w-lightbox-figure { + cursor: pointer; +} +/** + * IE adds image dimensions as width and height attributes on the IMG tag, + * but we need both width and height to be set to auto to enable scaling. + */ +.w-lightbox-img { + width: auto; + height: auto; + max-width: none; +} +/** + * 1. Reset if style is set by user on "All Images" + */ +.w-lightbox-image { + display: block; + float: none; + /* 1 */ + max-width: 100vw; + max-height: 100vh; +} +.w-lightbox-group .w-lightbox-image { + max-height: 86vh; +} +.w-lightbox-caption { + position: absolute; + right: 0; + bottom: 0; + left: 0; + padding: 0.5em 1em; + background: rgba(0, 0, 0, 0.4); + text-align: left; + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; +} +.w-lightbox-embed { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + width: 100%; + height: 100%; +} +.w-lightbox-control { + position: absolute; + top: 0; + width: 4em; + background-size: 24px; + background-repeat: no-repeat; + background-position: center; + cursor: pointer; + -webkit-transition: all 0.3s; + transition: all 0.3s; +} +.w-lightbox-left { + display: none; + bottom: 0; + left: 0; + /* */ + background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9Ii0yMCAwIDI0IDQwIiB3aWR0aD0iMjQiIGhlaWdodD0iNDAiPjxnIHRyYW5zZm9ybT0icm90YXRlKDQ1KSI+PHBhdGggZD0ibTAgMGg1djIzaDIzdjVoLTI4eiIgb3BhY2l0eT0iLjQiLz48cGF0aCBkPSJtMSAxaDN2MjNoMjN2M2gtMjZ6IiBmaWxsPSIjZmZmIi8+PC9nPjwvc3ZnPg=="); +} +.w-lightbox-right { + display: none; + right: 0; + bottom: 0; + /* */ + background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9Ii00IDAgMjQgNDAiIHdpZHRoPSIyNCIgaGVpZ2h0PSI0MCI+PGcgdHJhbnNmb3JtPSJyb3RhdGUoNDUpIj48cGF0aCBkPSJtMC0waDI4djI4aC01di0yM2gtMjN6IiBvcGFjaXR5PSIuNCIvPjxwYXRoIGQ9Im0xIDFoMjZ2MjZoLTN2LTIzaC0yM3oiIGZpbGw9IiNmZmYiLz48L2c+PC9zdmc+"); +} +/* + * Without specifying the with and height inside the SVG, all versions of IE render the icon too small. + * The bug does not seem to manifest itself if the elements are tall enough such as the above arrows. + * (http://stackoverflow.com/questions/16092114/background-size-differs-in-internet-explorer) + */ +.w-lightbox-close { + right: 0; + height: 2.6em; + /* */ + background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9Ii00IDAgMTggMTciIHdpZHRoPSIxOCIgaGVpZ2h0PSIxNyI+PGcgdHJhbnNmb3JtPSJyb3RhdGUoNDUpIj48cGF0aCBkPSJtMCAwaDd2LTdoNXY3aDd2NWgtN3Y3aC01di03aC03eiIgb3BhY2l0eT0iLjQiLz48cGF0aCBkPSJtMSAxaDd2LTdoM3Y3aDd2M2gtN3Y3aC0zdi03aC03eiIgZmlsbD0iI2ZmZiIvPjwvZz48L3N2Zz4="); + background-size: 18px; +} +/** + * 1. All IE versions add extra space at the bottom without this. + */ +.w-lightbox-strip { + position: absolute; + bottom: 0; + left: 0; + right: 0; + padding: 0 1vh; + line-height: 0; + /* 1 */ + white-space: nowrap; + overflow-x: auto; + overflow-y: hidden; +} +/* + * 1. We use content-box to avoid having to do `width: calc(10vh + 2vw)` + * which doesn’t work in Safari anyway. + * 2. Chrome renders images pixelated when switching to GPU. Making sure + * the parent is also rendered on the GPU (by setting translate3d for + * example) fixes this behavior. + */ +.w-lightbox-item { + display: inline-block; + width: 10vh; + padding: 2vh 1vh; + box-sizing: content-box; + /* 1 */ + cursor: pointer; + -webkit-transform: translate3d(0, 0, 0); + /* 2 */ +} +.w-lightbox-active { + opacity: 0.3; +} +.w-lightbox-thumbnail { + position: relative; + height: 10vh; + background: #222; + overflow: hidden; +} +.w-lightbox-thumbnail-image { + position: absolute; + top: 0; + left: 0; +} +.w-lightbox-thumbnail .w-lightbox-tall { + top: 50%; + width: 100%; + -webkit-transform: translate(0, -50%); + transform: translate(0, -50%); +} +.w-lightbox-thumbnail .w-lightbox-wide { + left: 50%; + height: 100%; + -webkit-transform: translate(-50%, 0); + transform: translate(-50%, 0); +} +/* + * Spinner + * + * Absolute pixel values are used to avoid rounding errors that would cause + * the white spinning element to be misaligned with the track. + */ +.w-lightbox-spinner { + position: absolute; + top: 50%; + left: 50%; + box-sizing: border-box; + width: 40px; + height: 40px; + margin-top: -20px; + margin-left: -20px; + border: 5px solid rgba(0, 0, 0, 0.4); + border-radius: 50%; + -webkit-animation: spin 0.8s infinite linear; + animation: spin 0.8s infinite linear; +} +.w-lightbox-spinner:after { + content: ""; + position: absolute; + top: -4px; + right: -4px; + bottom: -4px; + left: -4px; + border: 3px solid transparent; + border-bottom-color: #fff; + border-radius: 50%; +} +/* + * Utility classes + */ +.w-lightbox-hide { + display: none; +} +.w-lightbox-noscroll { + overflow: hidden; +} +@media (min-width: 768px) { + .w-lightbox-content { + height: 96vh; + margin-top: 2vh; + } + .w-lightbox-view, + .w-lightbox-view:before { + height: 96vh; + } + /* .w-lightbox-content */ + .w-lightbox-group, + .w-lightbox-group .w-lightbox-view, + .w-lightbox-group .w-lightbox-view:before { + height: 84vh; + } + .w-lightbox-image { + max-width: 96vw; + max-height: 96vh; + } + .w-lightbox-group .w-lightbox-image { + max-width: 82.3vw; + max-height: 84vh; + } + .w-lightbox-left, + .w-lightbox-right { + display: block; + opacity: 0.5; + } + .w-lightbox-close { + opacity: 0.8; + } + .w-lightbox-control:hover { + opacity: 1; + } +} +.w-lightbox-inactive, +.w-lightbox-inactive:hover { + opacity: 0; +} +.w-richtext:before, +.w-richtext:after { + content: " "; + display: table; + grid-column-start: 1; + grid-row-start: 1; + grid-column-end: 2; + grid-row-end: 2; +} +.w-richtext:after { + clear: both; +} +.w-richtext[contenteditable="true"]:before, +.w-richtext[contenteditable="true"]:after { + white-space: initial; +} +.w-richtext ol, +.w-richtext ul { + overflow: hidden; +} +.w-richtext .w-richtext-figure-selected.w-richtext-figure-type-video div:after, +.w-richtext .w-richtext-figure-selected[data-rt-type="video"] div:after { + outline: 2px solid #2895f7; +} +.w-richtext .w-richtext-figure-selected.w-richtext-figure-type-image div, +.w-richtext .w-richtext-figure-selected[data-rt-type="image"] div { + outline: 2px solid #2895f7; +} +.w-richtext figure.w-richtext-figure-type-video > div:after, +.w-richtext figure[data-rt-type="video"] > div:after { + content: ''; + position: absolute; + display: none; + left: 0; + top: 0; + right: 0; + bottom: 0; +} +.w-richtext figure { + position: relative; + max-width: 60%; +} +.w-richtext figure > div:before { + cursor: default!important; +} +.w-richtext figure img { + width: 100%; +} +.w-richtext figure figcaption.w-richtext-figcaption-placeholder { + opacity: 0.6; +} +.w-richtext figure div { + /* fix incorrectly sized selection border in the data manager */ + font-size: 0px; + color: transparent; +} +.w-richtext figure.w-richtext-figure-type-image, +.w-richtext figure[data-rt-type="image"] { + display: table; +} +.w-richtext figure.w-richtext-figure-type-image > div, +.w-richtext figure[data-rt-type="image"] > div { + display: inline-block; +} +.w-richtext figure.w-richtext-figure-type-image > figcaption, +.w-richtext figure[data-rt-type="image"] > figcaption { + display: table-caption; + caption-side: bottom; +} +.w-richtext figure.w-richtext-figure-type-video, +.w-richtext figure[data-rt-type="video"] { + width: 60%; + height: 0; +} +.w-richtext figure.w-richtext-figure-type-video iframe, +.w-richtext figure[data-rt-type="video"] iframe { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; +} +.w-richtext figure.w-richtext-figure-type-video > div, +.w-richtext figure[data-rt-type="video"] > div { + width: 100%; +} +.w-richtext figure.w-richtext-align-center { + margin-right: auto; + margin-left: auto; + clear: both; +} +.w-richtext figure.w-richtext-align-center.w-richtext-figure-type-image > div, +.w-richtext figure.w-richtext-align-center[data-rt-type="image"] > div { + max-width: 100%; +} +.w-richtext figure.w-richtext-align-normal { + clear: both; +} +.w-richtext figure.w-richtext-align-fullwidth { + width: 100%; + max-width: 100%; + text-align: center; + clear: both; + display: block; + margin-right: auto; + margin-left: auto; +} +.w-richtext figure.w-richtext-align-fullwidth > div { + display: inline-block; + /* padding-bottom is used for aspect ratios in video figures + we want the div to inherit that so hover/selection borders in the designer-canvas + fit right*/ + padding-bottom: inherit; +} +.w-richtext figure.w-richtext-align-fullwidth > figcaption { + display: block; +} +.w-richtext figure.w-richtext-align-floatleft { + float: left; + margin-right: 15px; + clear: none; +} +.w-richtext figure.w-richtext-align-floatright { + float: right; + margin-left: 15px; + clear: none; +} +.w-nav { + position: relative; + background: #dddddd; + z-index: 1000; +} +.w-nav:before, +.w-nav:after { + content: " "; + display: table; + grid-column-start: 1; + grid-row-start: 1; + grid-column-end: 2; + grid-row-end: 2; +} +.w-nav:after { + clear: both; +} +.w-nav-brand { + position: relative; + float: left; + text-decoration: none; + color: #333333; +} +.w-nav-link { + position: relative; + display: inline-block; + vertical-align: top; + text-decoration: none; + color: #222222; + padding: 20px; + text-align: left; + margin-left: auto; + margin-right: auto; +} +.w-nav-link.w--current { + color: #0082f3; +} +.w-nav-menu { + position: relative; + float: right; +} +[data-nav-menu-open] { + display: block !important; + position: absolute; + top: 100%; + left: 0; + right: 0; + background: #C8C8C8; + text-align: center; + overflow: visible; + min-width: 200px; +} +.w--nav-link-open { + display: block; + position: relative; +} +.w-nav-overlay { + position: absolute; + overflow: hidden; + display: none; + top: 100%; + left: 0; + right: 0; + width: 100%; +} +.w-nav-overlay [data-nav-menu-open] { + top: 0; +} +.w-nav[data-animation="over-left"] .w-nav-overlay { + width: auto; +} +.w-nav[data-animation="over-left"] .w-nav-overlay, +.w-nav[data-animation="over-left"] [data-nav-menu-open] { + right: auto; + z-index: 1; + top: 0; +} +.w-nav[data-animation="over-right"] .w-nav-overlay { + width: auto; +} +.w-nav[data-animation="over-right"] .w-nav-overlay, +.w-nav[data-animation="over-right"] [data-nav-menu-open] { + left: auto; + z-index: 1; + top: 0; +} +.w-nav-button { + position: relative; + float: right; + padding: 18px; + font-size: 24px; + display: none; + cursor: pointer; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); + tap-highlight-color: rgba(0, 0, 0, 0); + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} +.w-nav-button:focus { + outline: 0; +} +.w-nav-button.w--open { + background-color: #C8C8C8; + color: white; +} +.w-nav[data-collapse="all"] .w-nav-menu { + display: none; +} +.w-nav[data-collapse="all"] .w-nav-button { + display: block; +} +.w--nav-dropdown-open { + display: block; +} +.w--nav-dropdown-toggle-open { + display: block; +} +.w--nav-dropdown-list-open { + position: static; +} +@media screen and (max-width: 991px) { + .w-nav[data-collapse="medium"] .w-nav-menu { + display: none; + } + .w-nav[data-collapse="medium"] .w-nav-button { + display: block; + } +} +@media screen and (max-width: 767px) { + .w-nav[data-collapse="small"] .w-nav-menu { + display: none; + } + .w-nav[data-collapse="small"] .w-nav-button { + display: block; + } + .w-nav-brand { + padding-left: 10px; + } +} +@media screen and (max-width: 479px) { + .w-nav[data-collapse="tiny"] .w-nav-menu { + display: none; + } + .w-nav[data-collapse="tiny"] .w-nav-button { + display: block; + } +} +.w-tabs { + position: relative; +} +.w-tabs:before, +.w-tabs:after { + content: " "; + display: table; + grid-column-start: 1; + grid-row-start: 1; + grid-column-end: 2; + grid-row-end: 2; +} +.w-tabs:after { + clear: both; +} +.w-tab-menu { + position: relative; +} +.w-tab-link { + position: relative; + display: inline-block; + vertical-align: top; + text-decoration: none; + padding: 9px 30px; + text-align: left; + cursor: pointer; + color: #222222; + background-color: #dddddd; +} +.w-tab-link.w--current { + background-color: #C8C8C8; +} +.w-tab-link:focus { + outline: 0; +} +.w-tab-content { + position: relative; + display: block; + overflow: hidden; +} +.w-tab-pane { + position: relative; + display: none; +} +.w--tab-active { + display: block; +} +@media screen and (max-width: 479px) { + .w-tab-link { + display: block; + } +} +.w-ix-emptyfix:after { + content: ""; +} +@keyframes spin { + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(360deg); + } +} +.w-dyn-empty { + padding: 10px; + background-color: #dddddd; +} +.w-dyn-hide { + display: none !important; +} +.w-dyn-bind-empty { + display: none !important; +} +.w-condition-invisible { + display: none !important; +} +.wf-layout-layout { + display: grid; +}