/* Title: CSS for Guardrails 2025 Author: https://agentartifact.com */ /* =Reset default browser CSS. -------------------------------------------------------------- */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, textarea, input { border: 0; font-family: inherit; font-size: 100%; font-style: inherit; font-weight: inherit; margin: 0; outline: 0; padding: 0; vertical-align: baseline; } img { border: 0px; } li { list-style-type: none; } button.forward-tab, button.reverse-tab, button.forward-landing, button.reverse-landing, button.forward-tab-entry, button.reverse-tab-entry, button.forward-landing-entry, button.reverse-landing-entry { clip: rect(1px 1px 1px 1px); clip: rect(1px, 1px, 1px, 1px); padding: 0 !important;border: 0 !important; height: 1px !important; width: 1px !important; overflow: hidden; position: absolute; outline: none !important; } :focus { outline: 0; } :root { --artifactRed: #ff0546; --artifactRedHover: #e6053f; --artifactNavy: var(--gray16); --primaryTextColor: var(--gray18); /* Guardrails Variables */ --bodyFontFamily: Inter, Helvetica, Arial, Sans-serif; --bodyFontColor: var(--primaryTextColor); --bodyFontSize: 16px; --headingFontFamily: Inter, Helvetica, Arial, Sans-serif; --headingFontColor: var(--primaryTextColor); --headingFontWeight: bold; --h1FontSize: 2rem; --h2FontSize: 1.65rem; --h3FontSize: 1.3rem; --h4FontSize: 1.25rem; --h5FontSize: 1.15rem; --h6FontSize: 1.1rem; --siteWidth: 1340px; --siteWidthMediaQuery: calc(var(--siteWidth) + 20px); --bodyBackground: #ffffff; --bannerHeight: 40px; --bannerFontSize: 14px; --bannerLineHeight: 1.5em; --bannerTextColor: #ffffff; --bannerBackground: #000000; --headerHeight: 80px; --headerHeightScrolled: 60px; --logoWidthHeader: 170px; --logoWidthHeaderScrolled: 120px; --headerPosition: fixed; --headerBackground: #ffffff; --headerScrolledBoxShadow: var(--primaryBoxShadow); --footerHeightPadded: calc(var(--footerHeight) + var(--footerTopPadding) + var(--footerBottomPadding)); --linkTextColor: #0069FF; --linkTextWeight: normal; --linkTextDecoration: none; --linkTextColorHover: var(--gray14); --linkTextOpacityHover: 1; --linkTextDecorationHover: none; --buttonBackground: var(--artifactRed); --buttonTextColor: #ffffff; --buttonBorderWidth: 1px; --buttonBorderStyle: solid; --buttonBorderColor: transparent; --buttonHoverBackground: var(--artifactRedHover); --buttonHoverBorderColor: var(--artifactRedHover); --buttonSmallFontSize: 14px; --buttonSmallFontWeight: bold; --buttonSmallPadding: 6px 12px 5px 12px; --buttonSmallBorderRadius: 3px; --buttonSmallBoxShadow: none; --buttonMediumFontSize: 16px; --buttonMediumFontWeight: bold; --buttonMediumPadding: 10px 20px 9px 20px; --buttonMediumBorderRadius: 3px; --buttonMediumBoxShadow: none; --buttonLargeFontSize: 18px; --buttonLargeFontWeight: bold; --buttonLargePadding: 15px 30px 14px 30px; --buttonLargeBorderRadius: 5px; --buttonLargeBoxShadow: none; --buttonCta1Background: var(--artifactRed); --buttonCta1Color: #ffffff; --buttonCta1BorderWidth: 1px; --buttonCta1BorderStyle: solid; --buttonCta1BorderColor: transparent; --buttonCta1HoverBackground: var(--artifactRedHover); --buttonCta1HoverBorderColor: var(--artifactRedHover); --buttonCta2Background: var(--gray4); --buttonCta2Color: var(--artifactNavy); --buttonCta2BorderWidth: 1px; --buttonCta2BorderStyle: solid; --buttonCta2BorderColor: transparent; --buttonCta2HoverBackground: var(--artifactRedHover); --buttonCta2HoverBorderColor: var(--artifactRedHover); --headerMenuLinkColor: var(--bodyFontColor); --headerMenuLinkColorHover: var(--linkTextColorHover); --headerMenuLinkColorActive: var(--artifactRed) --headerMenuLinkFontSize: 14px; --headerMenuLinkWeight: normal; --headerMenuLinkTrimBorderColorHover: transparent; --headerMenuLinkTrimBorderColorActive: transparent; --headerMenuLinkTrimBordersWidth: 0px; --headerMenuLinkTrimBoxColorHover: transparent; --headerMenuLinkTrimBoxColorActive: transparent; --headerMenuLinkTrimTextColorActive: var(--bodyFontColor); --headerMenuLinkTrimBoxesPadding: 0px; --headerMenuLinkTrimBoxesBorderRadius: 0px; --headerStripeGap: 40px; --headerMenuItemsGap: 40px; --headerCtaButtonsGap: 20px; --dropDownWidth: 250px; --dropDownColumns: 1; --dropDownColumnGap: 30px; --dropDownPadding: 0 20px 20px 20px; --dropDownMenuShift: calc(-1 * var(--dropdownPaddingLeftShift)); --dropDownBorderRadius: 0 0 5px 5px; --dropDownBackground: var(--white); --dropDownBoxShadow: 0 30px 30px rgba(0,0,0,.15); --subMenuItemsGap: 5px; --mediaBackground: var(--white); --mediaBorderColor: var(--gray6); --mediaBorderWidth: 0px; --mediaWrapperBorderRadius: 0px; --mediaBorderRadius: 0px; --mediaBorderStyle: solid; --mediaPadding: 0px; --mediaBoxShadow: none; --cardBackground: var(--white); --cardBorderColor: var(--gray6); --cardBorderWidth: 1px; --cardBorderStyle: solid; --cardBorderRadius: 5px; --cardBoxShadow: none; /* Tertiary */ --white: #ffffff; --gray1: #f8f9fa; --gray2: #f6f7f8; --gray3: #eeeff0; --gray4: #e0e5ec; --gray5: #d7d7de; --gray6: #c7c7d1; --gray7: #b6b6c4; --gray8: #a7a7b8; --gray9: #9898ab; --gray10: #89899e; --gray11: #7b7b91; --gray12: #707085; --gray13: #646478; --gray14: #58586b; --gray15: #4c4c5e; --gray16: #454253; --gray17: #383645; --gray18: #2d2b38; --gray19: #23212b; --gray20: #18171f; --gray21: #0e0d12; /* Other Neutrals */ --black: #000000; --twhite: var(--gray1); --twhite2: var(--gray2); --twhite3: var(--gray3); --whiteTranslucent: rgba(255,255,255,.7); --whiteTranslucent2: rgba(255,255,255,.9); /* Shadows */ --primaryBoxShadow: 0 0 30px rgba(0,0,0,.15); --secondaryBoxShadow: 0 0 30px rgba(0,0,0,.1); --cardBoxShadow: 0 0 20px rgba(0,0,0,.075); --smallBoxShadow: 0 0 20px rgba(0,0,0,.15); --avatarBoxShadow: 0 0 15px rgba(0,0,0,.15); /* Fonts */ --primaryFont: Inter, Helvetica, Arial, Sans-serif; --primaryMonospaceFont: 'Source Code Pro', 'Courier New', Courier, monospace; --blockquoteFont: Georgia, Sans-serif; } /* ================== EVERYTHING is BOX-SIZED - position relative ================== */ * { position: relative; box-sizing: border-box; -webkit-text-size-adjust: none; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -ms-box-sizing: border-box; } /* ================== EVERYTHING is BOX-SIZED - position relative ================== */ * { -webkit-text-size-adjust: none; } /* Disable iOS gettin' in muh business */ html { height: 100%; scroll-behavior: smooth; } body { height: 100%; font-size: var(--bodyFontSize); font-family: var(--bodyFontFamily); color: var(--bodyFontColor); line-height: var(--bodyLineHeight); margin: 0; background: var(--bodyBackground); } body.noscroll { overflow-y: hidden; } .clearfix:after { content: "."; visibility: hidden; display: block; height: 0; clear: both; } /* On the rare occasion you need to use a float */ .clearright { clear: right; } /* Titles, Text Sizing, Colors, Links, Buttons ============================================== */ /* Headings & Text */ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { -webkit-font-smoothing: antialiased; line-height: var(--headingLineHeight); letter-spacing: -.03em; font-weight: var(--headingFontWeight); color: var(--headingFontColor); font-family: var(--headingFontFamily); } h1, .h1 { font-size: var(--h1FontSize); } h2, .h2 { font-size: var(--h2FontSize); } h3, .h3 { font-size: var(--h3FontSize); } h4, .h4 { font-size: var(--h4FontSize); } h5, .h5 { font-size: var(--h5FontSize); } h6, .h6 { font-size: var(--h6FontSize); letter-spacing: 0px; } /* Weights, Italics, Underlines, Strikes */ strong, .strong, .weight700 { font-weight: bold; } .lightweight, .weight300 { font-weight: 300; } .normalweight, .weight400 { font-weight: normal; } .midweight, .semiweight, .weight600 { font-weight: 600; } .heavyweight, .weight800 { font-weight: 800; } .blackweight, .weight900 { font-weight: 900; } em, .italic { font-style: italic; } .stritalic { font-weight: bold; font-style: italic; } .underline { text-decoration: underline; } .strike { text-decoration: line-through; } /* Character Spacing & Casing */ tt { font-family: var(--primaryMonospaceFont); } .tight { letter-spacing: -.03em; } .tight2 { letter-spacing: -.06em; } .upper { text-transform: uppercase; } .lower { text-transform: none; } /* Text Alignment */ .center, .centertext { text-align: center; } .indent { margin-left: 30px; margin-bottom: 30px; } /* Basic Paragraph Rules */ p { margin-bottom: var(--paragraphMargin); } p:last-child { margin-bottom: 0; padding-bottom: 0; } p.nobot, p.mclear { margin-bottom: 0; } p.withlist { margin-bottom: 10px; } .saboxplugin-wrap { margin-bottom: var(--paragraphMargin) !important; } /* Lists */ .reading-pane ul, .reading-pane ol { margin-bottom: var(--paragraphMargin); } .reading-pane ul:last-child, .reading-pane ol:last-child { margin-bottom: 0; } .reading-pane ul li, .reading-pane ol li { list-style-type: disc; margin: var(--listItemMargin); } .reading-pane ol li { list-style-type: decimal; } .reading-pane ul li:last-child, .reading-pane ol li:last-child { margin-bottom: 0; } .reading-pane ul.icons li { list-style-type: none; margin-left: 0; padding-left: 35px; margin: 7px 0 7px 0; } .reading-pane ul.icons li:first-child { margin-top: 0; } .reading-pane ul.icons li svg { width: 20px; height: 20px; top: 3px; left: 0; position: absolute; } .reading-pane ul.icons.large li { font-size: 14px; margin-top: 20px; margin-bottom: 20px; padding-left: 45px; } .reading-pane ul.icons.large li:first-child { margin-top: 0; } .reading-pane ul.icons.large li svg { width: 22px; height: 22px; top: 0px; } .reading-pane ul.icons.narrow { max-width: 600px; margin: 0 auto; } .reading-pane ul.icons.spread li { margin: 12px 0 12px 0; } .reading-pane ul.icons li .check-wrap { width: 24px; height: 24px; padding: 3px; border: 2px solid var(--gray16); position: absolute; left: 0; top: 2px; border-radius: 3px; display: block; background-color: var(--artifactRed); } .reading-pane ul.icons li .check-wrap svg { color: var(--white); width: 20px; height: 20px; top: 0px; left: 0px; } .reading-pane ul.centered { max-width: 600px; margin-left: auto; margin-right: auto; margin-top: 50px; } .reading-pane ul.centered.thin { max-width: 400px; margin-top: 30px; } .reading-pane .wpforms-field-radio ul li, .reading-pane .wpforms-field-radio ol li, .reading-pane .wpforms-field-checkbox ul li, .reading-pane .wpforms-field-checkbox ol li { list-style-type: none; display: flex; align-items: center; margin: 10px 0; gap: 10px; } .reading-pane .wpforms-field-radio ul li label, .reading-pane .wpforms-field-radio ol li label, .reading-pane .wpforms-field-checkbox ul li label, .reading-pane .wpforms-field-checkbox ol li label { width: 100%; } /* Block Quote */ blockquote { border-left: 10px solid var(--bodyFontColor); padding-left: 40px; margin-bottom: var(--paragraphMargin); font-style: italic; } blockquote p:last-child { padding-bottom: 0; } cite { font-size: 14px; font-style: normal; } /* Color Palette */ .white { color: var(--white); } .whiteb { background: var(--white); } .black { color: var(--black); } .blackb { background: var(--black); } .twhite { color: var(--twhite); } /* Not Quite White */ .twhite2 { color: var(--twhite2); } /* Not Quite White 2 */ .twhite3 { color: var(--twhite3); } /* Definitely not White, but still fairly light */ .red1, .bred1 { color: var(--artifactRed); } /* Artifact Red */ .red2, .bred2 { color: var(--artifactRedLight); } /* Artifact Red Tint */ .red3, .bred3 { color: var(--artifactDark); } /* Artifact Red Hover */ .navy1 { color: var(--artifactNavy); } /* Artifact Navy 1 */ .gray1 { color: var(--gray1); } .gray2 { color: var(--gray2); } .gray3 { color: var(--gray3); } .gray4 { color: var(--gray4); } .gray5 { color: var(--gray5); } .gray6 { color: var(--gray6); } .gray7 { color: var(--gray7); } .gray8 { color: var(--gray8); } .gray9 { color: var(--gray9); } .gray10 { color: var(--gray10); } .gray11 { color: var(--gray11); } .gray12 { color: var(--gray12); } .gray13 { color: var(--gray13); } .gray14 { color: var(--gray14); } .gray15 { color: var(--gray15); } .gray16 { color: var(--gray16); } .gray17 { color: var(--gray17); } .gray18 { color: var(--gray18); } .gray19 { color: var(--gray19); } .gray20 { color: var(--gray20); } .gray21 { color: var(--gray21); } /* Basic Table */ table { width: 100%; float: left; border: none; border-collapse: collapse; border-radius: 0; margin-bottom: var(--paragraphMargin); } table tr th { padding: 10px 10px; font-weight: bold; line-height: 14px; vertical-align: middle; background: var(--gray16); color: #fff; text-align: left; } table tr { transition:background .15s linear; } table tr td { background: #fff; border: 1px solid var(--gray3); padding: 6px 10px; line-height: 16px; vertical-align: middle; background: #fff; cursor: pointer; line-height: 1.2em; transition:background .15s linear; } table.alternating tr:nth-child(even) td{ background: var(--twhite2); } /* Links */ a, a:visited { color: var(--linkTextColor); text-decoration: var(--linkTextDecoration); cursor: pointer; transition:color .15s linear; opacity: 1; font-weight: var(--linkTextWeight); } a:hover { color: var(--linkTextColorHover); text-decoration: var(--linkTextDecorationHover); opacity: var(--linkTextOpacityHover); transition:color .15s linear; } a.has-title-color:hover { color: var(--linkTextColorHover) !important; } .iconright { padding-right: 27px; position: relative; } .iconright i { position: absolute; top: 1px; right: 0; } .iconleft { padding-left: 27px; position: relative; } .iconleft i { position: absolute; top: 1px; left: 0; } /* Displays */ .hide, .hidden { display: none; } .eclipse { height: 0; overflow: hidden; padding: 0; margin: 0; } .req, .required, .wpforms-required-label { color: var(--artifactRed); font-weight: bold; } .req:after, .required:after { content: " * "; } /* Buttons */ /* The 'button' HTML element is reset to look like text in case I need a button that looks like a normal link */ button { padding: 0; margin: 0; border: 0; line-height: inherit; background: transparent; } /* Standard Button Dimensions - requires the class '.button', or be a Submit button */ .button, a.button, button[type=submit], input[type=submit], input[type=submit].wpforms-submit, button.wpforms-page-button { line-height: 1em; font-family: var(--bodyFontFamily); padding: 8px 19px; border-radius: 3px; font-size: 14px; text-align: center; overflow: hidden; margin: 0px; transition: .15s linear all; background: var(--buttonBackground); color: var(--buttonTextColor); border-width: var(--buttonBorderWidth); border-style: var(--buttonBorderStyle); border-color: var(--buttonBorderColor); font-family: var(--headingFontFamily); } .button:hover, a.button:hover, button[type=submit]:hover, input[type=submit]:hover, input[type=submit].wpforms-submit:hover, button.wpforms-page-button:hover { cursor: pointer; transition: .15s linear all; background: var(--buttonHoverBackground); border-color: var(--buttonHoverBorderColor); } /* Disabled Button Override */ .button.disabled, a.button.disabled, button[type=submit].disabled, input[type=submit].disabled, input[type=submit].wpforms-submit.disabled { opacity: .5; filter: grayscale(100%); pointer-events: none; } /* Small Button */ .button.small, a.button.small, button[type=submit].small, input[type=submit].small, input[type=submit].wpforms-submit.small { font-size: var(--buttonSmallFontSize); font-weight: var(--buttonSmallFontWeight); padding: var(--buttonSmallPadding); border-radius: var(--buttonSmallBorderRadius); box-shadow: var(--buttonSmallBoxShadow); } /* Medium Sized Button */ .button.medium, a.button.medium, button[type=submit].medium, input[type=submit].medium, input[type=submit].wpforms-submit.medium { font-size: var(--buttonMediumFontSize); font-weight: var(--buttonMediumFontWeight); padding: var(--buttonMediumPadding); border-radius: var(--buttonMediumBorderRadius); box-shadow: var(--buttonMediumBoxShadow); } /* Large Sized Button */ .button.large, a.button.large, button[type=submit].large, input[type=submit].large, input[type=submit].wpforms-submit.large { font-size: var(--buttonLargeFontSize); font-weight: var(--buttonLargeFontWeight); padding: var(--buttonLargePadding); border-radius: var(--buttonLargeBorderRadius); box-shadow: var(--buttonLargeBoxShadow); } /* Button Text Only */ button.text { padding: 0; border-radius: 0; background: transparent; } .button-wrap { display: flex; align-items: center; gap: 10px; margin-top: 5px; } .button-wrap.left { text-align: left; justify-content: flex-start;} .button-wrap.center { text-align: center; justify-content: center; } .button-wrap.right { text-align: left; justify-content: flex-end; } .button-wrap.justify { text-align: left; justify-content: space-between; } .button-wrap a, .button-wrap button { } /* Form Basics */ textarea { font-size: 14px; } input[type=text], input[type=email], textarea { -webkit-appearance: none; } /* Rmemoves iOS Styling */ ::-webkit-input-placeholder { color: var(--gray10); } ::-moz-placeholder { color: var(--gray10); } /* firefox 19+ */ :-ms-input-placeholder { color: var(--gray10); } /* ie */ input:-moz-placeholder { color: var(--gray10); } label:hover { cursor: pointer; font-size: var(--labelFontSize); font-weight: var(--labelFontWeight); } input, select, textarea { font-size: var(--inputFontSize); font-weight: var(--inputFontWeight); color: var(--inputFontColor); padding: var(--inputPadding); background: var(--inputBackground); border-color: var(--inputBorderColor); border-width: var(--inputBorderWidth); border-style: var(--inputBorderStyle); border-radius: var(--inputBorderRadius); box-shadow: var(--inputBoxShadow); line-height: 1.3em; } textarea { -webkit-overflow-scrolling:touch; width: 100%; min-width: 100%; max-width: 100%; min-height: 160px; font-size: var(--textareaFontSize); font-weight: var(--textareaFontWeight); color: var(--textareaFontColor); padding: var(--textareaPadding); background: var(--textareaBackground); border-color: var(--textareaBorderColor); border-width: var(--textareaBorderWidth); border-style: var(--textareaBorderStyle); border-radius: var(--textareaBorderRadius); box-shadow: var(--textareaBoxShadow); line-height: 1.5em; } ::-webkit-search-cancel-button { display: none; } /* Removes the clear / cancel / x "button" in the search field */ .wpforms-confirmation-container { width: 100%; padding: 15px; border: 1px solid var(--gray7); background: var(--gray1); margin-bottom: 30px; text-align: center; font-weight: 600; font-size: 16px; } /* WP Forms */ .wpforms-field { width: 100%; display: flex; margin-bottom: 20px; flex-wrap: wrap; } .wpforms-field input[type=text], .wpforms-field input[type=search], .wpforms-field input[type=email], .wpforms-field input#email, .wpforms-field input#url, .wpforms-field textarea, .wpforms-field select, input[type=url] { background: var(--inputBackground); border-color: var(--inputBorderColor); border-width: var(--inputBorderWidth); border-style: var(--inputBorderStyle); border-radius: var(--inputBorderRadius); box-shadow: var(--inputBoxShadow); align-self: start; width: 65%; } .wpforms-field label { width: 35%; line-height: 20px; font-weight: bold; cursor: pointer; display: flex; align-items: center; } .wpforms-field.wpforms-field-textarea { display: block; } .wpforms-field.wpforms-field-textarea label { width: 100%; display: block; padding-bottom: 15px; } .wpforms-field textarea { min-height: 160px; border-radius: 5px; width: 100%; min-width: 100%; padding: 20px; font-weight: normal; } .wpforms-field.wpforms-has-error { display: block; } .wpforms-field label.wpforms-error { font-weight: normal; font-size: 14px; color: var(--artifactRedHover); display: block; width: 100%; } .wpforms-field .iti { max-width: 65%; } .wpforms-field input.wpforms-smart-phone-field { } .wpforms-field input.phone { max-width: 200px; align-self: start; max-width: 65%; } .wpforms-field-description { width: 100%; font-size: 14px; line-height: 1.3em; display: block; padding-left: 35%; margin-top: 5px; } .wpforms-field-textarea .wpforms-field-description { padding-left: 0; } .wpforms-field-address { display: block; } .wpforms-field-address div { display: flex; flex-wrap: wrap; width: 100%; margin-top: 10px; flex-direction: row-reverse; } .wpforms-field-address div.wpforms-field-medium { flex-direction: row; } .wpforms-field-address div.wpforms-one-half { width: 50%; flex-direction: row-reverse; } .wpforms-field-address div.wpforms-field-medium div.wpforms-one-half:first-child { padding-right: 15px; } .wpforms-field-address div.wpforms-field-medium div.wpforms-one-half:nth-child(2) { padding-left: 15px; } div.wpforms-container div.wpforms-uploader { width: 65%; } .wpforms-recaptcha-container { margin-bottom: 20px; } .wpforms-field label.wpforms-label-hide { position: absolute; top: -99999px; z-index: -999999; height: 0; overflow: hidden; } .wpforms-field-address .wpforms-field label { width: 100%; } .wpforms-page-button-group { display: flex; align-items: center; justify-content: space-between; } /* Lightboxes */ .blackcover { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 250; background: rgba(0,0,0,.8); opacity: 0; visibility: hidden; pointer-events: none; transition: .15s linear all; } .blackcover.active { opacity: 1; visibility: visible; pointer-events: all; transition: .15s linear all; } .lightbox { position: fixed; top: 0; right: 0; bottom: 0; left: 0; width: 400px; max-width: 100%; height: 500px; max-height: 100%; margin: auto; z-index: 260; padding: 30px; background-color: var(--white); border-radius: 5px; box-shadow: var(--primaryBoxShadow); opacity: 0; visibility: hidden; pointer-events: none; transition: .15s linear all; } .lightbox.active { visibility: visible; opacity: 1; pointer-events: all; transition: .15s linear all; } button.close-button.close-lightbox { position: absolute; top: 20px; right: 20px; cursor: pointer; transition: .15s linear all; width: 30px; height: 30px; } .lightbox.image button.close-button.close-lightbox { background-color: rgba(0,0,0,.5); } button.close-button.close-lightbox:hover { opacity: .7; transition: .15s linear all; } button.close-button.close-lightbox svg { width: 30px; height: 30px; } .lightbox-title { font-weight: bold; } .lightbox.image { width: auto; height: auto; top: 30px; right: 30px; bottom: 30px; left: 30px; background-color: transparent; padding: 0; pointer-events: none; } .lightbox.image button.close-button { color: var(--white); } .lightbox.content { width: 100%; max-width: 700px; height: 100%; max-height: 900px; margin: auto; padding: 50px; overflow-y: auto; } .lightbox-image-wrap { overflow: hidden; margin: auto; max-width: 100%; max-height: 100%; pointer-events: all; top: 0; right: 0; bottom: 0; left: 0; position: absolute; } .lightbox-image-wrap img { object-fit: cover; cursor: zoom-in; transition: transform 0.3s ease; height: 100%; margin: auto; position: absolute; left: 0; right: 0; top: 0; bottom: 0; max-width: 100%; } .lightbox-image-wrap.zoomed { overflow: auto; } .lightbox-image-wrap.zoomed img { transform: scale(1); cursor: zoom-out; transition: transform 0.3s ease; top: auto; bottom: auto; width: 100%; height: auto; max-width: 1704px; margin: auto; } button.image-prev, button.image-next { position: absolute; z-index: 10; position: absolute; width: 40px; height: 40px; top: 0; bottom: 0; margin: auto 0; cursor: pointer; pointer-events: all; transition: .15s linear all; background-color: rgba(0,0,0,.5); } button.image-prev:hover, button.image-next:hover { opacity: .7; transition: .15s linear all; } button.image-prev img, button.image-next img { width: 40px; height: 40px; } button.image-prev { left: 0; } button.image-next { right: 0; } .lightbox.youtube, .lightbox.video { background: transparent; padding: 0; width: 800px; max-width: 100%; height: calc(800px * 0.5625); aspect-ratio: 16 / 9; } .lightbox.youtube .lightbox-youtube-wrap, .lightbox.video .lightbox-video-wrap { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; } .lightbox.youtube .lightbox-youtube-wrap iframe, .lightbox.video .lightbox-video-wrap video { width: 100%; height: 100%; } .lightbox-header { display: flex; gap: 30px; align-items: center; margin-bottom: 30px; } .lightbox-header .lightbox-avatar { flex-shrink: 0; } .lightbox-avatar { width: 140px; height: 140px; padding: 6px; background: var(--white); border-radius: 50%; overflow: hidden; box-shadow: var(--primaryBoxShadow); } .lightbox-avatar img { width: 100%; height: 100%; float: left; object-fit: cover; border-radius: 50%; overflow: hidden; } .lightbox-header-text { display: flex; gap: 5px; flex-direction: column; } .lightbox-title, .lightbox-subtitle { line-height: 1.2em; } .lightbox-content { width: 100%; margin: 0 auto; } .lightbox-social-links { display: flex; align-items: center; gap: 20px; margin-top: 30px; margin-left: -4px; } .lightbox-social-links a { display: block; } .lightbox-social-links a svg { width: 40px; height: 40px; } /* STRUCTURE ============================================== */ /* Wrappers */ #fill { width: 100%; height: 100%; margin: 0 auto; display: flex; flex-direction: column; } #container { width: 100%; flex-grow: 1; padding-top: calc(var(--headerHeight) + var(--bannerHeight)); padding-bottom: var(--footerHeightPadded); } body.scrolled #container { padding-top: calc(var(--headerHeightScrolled) + var(--bannerHeight)); } .stripe.banner { width: 100%; height: var(--bannerHeight); background: var(--bannerBackground); color: var(--bannerTextColor); font-size: var(--bannerFontSize); line-height: var(--bannerLineHeight); display: flex; align-items: center; justify-content: center; position: fixed; top: 0; z-index: 200; overflow: hidden; } .stripe.banner .stripe-inside { padding: 0 30px; } .banner-text { margin: 0 auto; display: block; text-align: center; align-self: center; } /* Global Stripes (Sections) */ .stripe { } /* Empty Wrapper */ .stripe.overflow-image { overflow: hidden; } .stripe-inside { width: var(--siteWidth); padding-left: 30px; padding-right: 30px; margin: 0 auto; display: block; } .super-text { font-size: 13px; line-height: 1.1em; } h2.stripe-title { font-size: var(--h2FontSizeOverride); } h3.stripe-subtitle { font-size: var(--h3FontSizeOverride); } h2.stripe-subtitle, h3.stripe-subtitle { color: var(--subtitleColor); font-weight: var(--subtitleFontWeight); } .highlight { -webkit-box-decoration-break: clone; background: linear-gradient(to left, #0e94ba, #10a8d3); font-weight: bold; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } em .highlight, em .highlight, span.italic .highlight, span.italic .highlight, .highlight.italic { padding-right: .1em; } .glow { text-shadow: 0 0 1em rgba(255,255,255,.85); color: #ffffff; } .background-gradient { position: relative; background: linear-gradient(110deg, rgba(224, 240, 255, 1) 0%, #ffffff 25%, #c9ebff 50%, #ffffff 75%, rgba(224, 240, 255, 1) 100%); background-size: 400% 100%; animation: waveFlow 30s ease-in-out infinite; } .background-gradient { position: relative; background: linear-gradient(110deg, rgba(224, 240, 255, 1) 0%, #dfffde 25%, #c9ebff 50%, #defff9 75%, #65edfd 100%); background-size: 400% 100%; animation: waveFlow 30s ease-in-out infinite; } @keyframes waveFlow { 0% { background-position: 0% 0%; } 50% { background-position: 100% 0%; } 100% { background-position: 0% 0%; } } @keyframes shapeWave { 0% { background-position: 50% 50%; } 50% { background-position: 70% 50%; } 100% { background-position: 50% 50%; } } /* linear-gradient(140deg, #65edfd 20%, #44aeec 60%, #3b92b7 100%) */ .statsbg { background-image: linear-gradient(140deg, #65edfd, #44aeec, #3b92b7, #44aeec, #3b92b7, #23d5ab); background-size: 600%; background-position: 0 0; animation-duration: 30s; animation-iteration-count: infinite; animation-name: gradients; } @keyframes gradients { 0% { background-position: 0 0; } 25% { background-position: 50% 0; } 50% { background-position: 90% 0; } 60% { background-position: 60%; } 75% { background-position: 40%; } 100% { background-position: 0 0; } } .bg-image { position: absolute; top: 0; right: 0; bottom: 0; left: 0; } .bg-image img { width: 100%; height: 100%; object-fit: cover; } /* Global Columns */ .columns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 100px; } .columns.one { grid-template-columns: repeat(1, minmax(0, 1fr)); } .columns.two { grid-template-columns: repeat(2, minmax(0, 1fr)); } .columns.three { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 80px; } .columns.four { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 40px; } .columns.five { grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: 20px; } .columns.six { grid-template-columns: repeat(6, minmax(0, 1fr)); column-gap: 20px; } .columns.wide { width: 100%; max-width: 960px; margin: 0 auto; } .columns.thin { width: 100%; max-width: 760px; margin: 0 auto; } .column { display: flex; align-items: center; width: 100%; height: 100%; } .column-inside, .column-content, .footer-column { width: 100%; } .column-content, .column-inside { display: flex; flex-direction: column; } .column-content.left, .column-inside.left { text-align: left; } .column-content.right, .column-inside.right { text-align: right; } .column-content.center, .column-inside.center { text-align: center; } .column-content.justify, .column-inside.justify { text-align: justify; } .column.section-header { order: 0; } .column.section-footer { order: 3; } .column.column1 { order: 1; } .column.column2 { order: 2; } .columns.flipped .column.column1 { order: 2; } .columns.flipped .column.column2 { order: 1; } .columns.two .column.section-header, .columns.two .column.section-footer { grid-column: span 2; } .columns.three .column.section-header, .columns.three .column.section-footer { grid-column: span 3; } .columns.four .column.section-header, .columns.four .column.section-footer { grid-column: span 4; } .columns.five .column.section-header, .columns.five .column.section-footer { grid-column: span 5; } .columns.six .column.section-header, .columns.six .column.section-footer { grid-column: span 6; } .columns.columns_one_sixth { grid-template-columns: minmax(0, 1fr) minmax(0, 5fr); } .columns.columns_one_fifth { grid-template-columns: minmax(0, 1fr) minmax(0, 4fr); } .columns.columns_one_fourth { grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); } .columns.columns_one_third { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); } .columns.columns_two_fifths { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); } .columns.flipped.columns_one_sixth { grid-template-columns: minmax(0, 5fr) minmax(0, 1fr); } .columns.flipped.columns_one_fifth { grid-template-columns: minmax(0, 4fr) minmax(0, 1fr); } .columns.flipped.columns_one_fourth { grid-template-columns: minmax(0, 3fr) minmax(0, 1fr); } .columns.flipped.columns_one_third { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); } .columns.flipped.columns_two_fifths { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); } /* Global Reading Panes */ .reading-pane { width: 100%; max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; } .reading-pane.wide { max-width: 960px; } .reading-pane.full { max-width: 100%; } .content-editor { width: 100%; } .content-editor.left { text-align: left; } .cotnent-editor.right { text-align: right; } .content-editor.center { text-align: center; } .content-editor.justify { text-align: justify; } .pane_left { align-self: flex-start; margin: 0; margin: 0 auto 0 0 !important; } .pane_center { align-self: center; } .pane_right { align-self: flex-end; margin: 0; margin: 0 0 0 auto !important; } .content-area h1, .content-area h2, .content-area h3, .content-area h4, .content-area h5, .content-area h6 { margin-bottom: 10px; } /* Global Media Container */ .media-container { width: 100%; margin: 0 auto 0 auto; } .media-container.with-vertical-content { display: flex; flex-direction: column; } .media-wrapper-styles { background: var(--mediaBackground); border-radius: var(--mediaWrapperBorderRadius); border-width: var(--mediaBorderWidth); border-style: var(--mediaBorderStyle); border-color: var(--mediaBorderColor); padding: var(--mediaPadding); box-shadow: var(--mediaBoxShadow); } .media-element-styles { border-radius: var(--mediaBorderRadius); } .media-container.no_styles .media-element-styles { border-radius: unset; } .media-image-wrap, .media-iframe-wrap { width: 100%; } .media-image-wrap:after { content: "."; visibility: hidden; display: block; height: 0; clear: both; } .media-image-wrap img { width: 100%; object-fit: cover; float: left; overflow: hidden; } .media-wrap { width: 100%; height: 0; padding-top: 56.25%; overflow: hidden; } .media-thumb-wrap { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 5; cursor: pointer; top: var(--mediaThumbnailOffset); right: var(--mediaThumbnailOffset); bottom: var(--mediaThumbnailOffset); left: var(--mediaThumbnailOffset); } .media-thumb-wrap img { width: 100%; height: 100%; float: left; object-fit: cover; border-radius: var(--mediaBorderRadius); } .media-play-icon { position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; width: 100px; height: 100px; font-size: 100px; text-align: center; z-index: 6; pointer-events: none; } .media-play-icon svg { position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; line-height: 1em; width: 100px; height: 100px; transition: .15s linear all; opacity: .5; } .media-wrap:hover .media-play-icon svg { opacity: 1; transition: .15s linear all; } .media-element-wrap { position: absolute; top: var(--mediaThumbnailOffset); right: var(--mediaThumbnailOffset); bottom: var(--mediaThumbnailOffset); left: var(--mediaThumbnailOffset); border-radius: var(--mediaBorderRadius); overflow: hidden; width: auto; height: auto; padding: unset; } .media-element-wrap iframe, .media-element-wrap video { width: 100%; height: 100%; position: absolute; top: 0; right: 0; bottom: 0; left: 0; overflow: hidden; } .media-wrap.has-thumbnail .media-element-wrap iframe, .media-wrap.has-thumbnail .media-element-wrap video { display: none; } .media-wrap.has-thumbnail iframe.playing, .media-wrap.has-thumbnail video.playing { z-index: 10; display: block; } .media-container.no_styles .media-wrapper-styles { background: transparent; border-radius: 0px; border-width: 0px; padding: 0; box-shadow: unset; } .media-container.no_styles .media-thumb-wrap { top: 0; right: 0; bottom: 0; left: 0; } .media-container.no_styles .media-thumb-wrap img { border-radius: 0; } /* Header */ header.main { height: var(--headerHeight); position: var(--headerPosition); top: 0; left: 0; right: 0; box-shadow: 0 0 0 rgba(0,0,0,.15); transition: .15s linear all; z-index: 90; background: var(--headerBackground); margin-top: var(--bannerHeight); } header.main .stripe-inside { display: flex; height: 100%; align-items: center; gap: var(--headerStripeGap); } body.scrolled header.main { transition: .15s linear all; height: var(--headerHeightScrolled); box-shadow: var(--headerScrolledBoxShadow); } button.hamburger { background: transparent; color: var(--bodyFontColor); position: fixed; text-transform: uppercase; left: 20px; cursor: pointer; margin: 0; z-index: 100; font-weight: 700; font-size: 14px; padding: 10px 15px 8px 35px; line-height: 1em; transition: .15s linear all; border: 1px solid var(--gray4); border-radius: 5px; display: none; top: calc((var(--headerHeight) - 34px) / 2 + var(--bannerHeight)); } button.hamburger:hover { opacity: .7; transition: .15s linear all; } button.hamburger svg { width: 18px; position: absolute; top: 7px; left: 10px; transition: .15s linear all; } body.showmobile button.hamburger svg { filter: invert(100%); transition: .15s linear all; } body.showmobile button.hamburger:hover { opacity: .7; } body.scrolled button.hamburger { top: calc((var(--headerHeightScrolled) - 34px) / 2 + var(--bannerHeight)); } .logo-wrap { flex: 1; } a.logo { width: var(--logoWidthHeader); display: block; transition: .15s linear all; flex-shrink: 0; } a.logo img { width: 100%; float: left; } body.scrolled a.logo { transition: .15s linear all; width: var(--logoWidthHeaderScrolled); } a.logo-icon { display: none; } a.logo-icon img { width: 100%; float: left; } .logo-icon-menu { display: none; width: 100%; padding: 40px; position: absolute; bottom: 0; text-align: center; } .logo-icon-menu img { filter: invert(40%) sepia(7%) saturate(50%) hue-rotate(260deg) brightness(130%) contrast(95%); opacity: .3; width: 100%; } .menuwrap { height: 100%; justify-content: flex-end; align-items: center; display: flex; } .menuwrap div { height: 100%; display: inline-flex; } /* Level 1 Menus */ header.main ul.menu { height: 100%; display: flex; align-items: center; gap: var(--headerMenuItemsGap); } header.main ul.menu li { height: 100%; list-style-type: none; width: auto; width: auto; display: flex; align-items: center; border-top-color: transparent; border-bottom-color: transparent; border-style: solid; transition: .15s linear all; flex-shrink: 0; } header.main ul.menu li.mobile-only { display: none; } header.main ul.menu li a { transition: .15s linear all; color: var(--headerMenuLinkColor); padding: var(--headerMenuLinkTrimBoxesPadding); width: auto; line-height: 1.1em; border-radius: var(--headerMenuLinkTrimBoxesBorderRadius); opacity: 1; font-weight: var(--headerMenuLinkWeight); -webkit-font-smoothing: antialiased; font-size: var(--headerMenuLinkFontSize); font-family: var(--headingFontFamily); } header.main ul.menu li:hover { transition: .15s linear all; border-bottom-color: var(--headerMenuLinkTrimBorderColorHover); } header.main ul.menu li:hover > a { transition: .15s linear all; background: var(--headerMenuLinkTrimBoxColorHover); color: var(--headerMenuLinkColorHover); } header.main ul.menu li.has-icon > a { padding-right: 30px; } header.main ul.menu li.has-icon > a svg { position: absolute; right: 5px; width: 20px; height: 20px; top: 0; bottom: 0; margin: auto 0; } header.main ul.menu li.bookmark a { color: var(--headerMenuLinkColor) !important; background: transparent !important; } header.main ul.menu li.bookmark a:hover { background: var(--headerMenuLinkTrimBoxColorHover) !important; color: var(--headerMenuLinkColorHover) !important; } header.main ul.menu li.hide { display: none; } header.main ul.menu li a:hover { transition: .15s linear all; } header.main ul.menu li.current-menu-item, header.main ul.menu li.current-menu-ancestor { border-bottom-color: var(--headerMenuLinkTrimBorderColorActive); } header.main ul.menu li.current-menu-item > a, header.main ul.menu li.current-menu-ancestor > a { color: var(--headerMenuLinkColorActive); } header.main .menuwrap.use-box-trim ul.menu li.current-menu-item > a, header.main .menuwrap.use-box-trim ul.menu li.current-menu-ancestor > a { color: var(--headerMenuLinkTrimTextColorActive); background: var(--headerMenuLinkTrimBoxColorActive); } /* Level 2 Menus */ header.main ul.menu li ul { background: var(--dropDownBackground); position: absolute; top: var(--headerHeight); visibility: hidden; opacity: 0; max-width: var(--dropDownWidth); box-shadow: var(--dropDownBoxShadow); padding: var(--dropDownPadding); padding-top: 0; border-radius: var(--dropDownBorderRadius); border-top-left-radius: 0; border-top-right-radius: 0; min-width: fit-content; display: var(--subMenuGrid); flex-direction: column; gap: var(--subMenuItemsGap); column-gap: var(--dropDownColumnGap); margin-left: var(--dropDownMenuShift); grid-template-columns: repeat(var(--dropDownColumns), minmax(0, 1fr)); transition: all 0.15s ease-in-out; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; } body.header.full-width-submenu header.main ul.menu li ul { width: var(--siteWidth) !important; margin-left: auto; margin-right: auto; position: fixed; left: 0; right: 0; } body.scrolled header.main ul.menu li ul { top: var(--headerHeightScrolled); transition: .15s linear all; } header.main ul.menu li.menu-item-has-children:hover ul { visibility: visible; opacity: 1; } header.main ul.menu li ul li { width: 100%; height: auto; align-items: start; min-width: max-content; } header.main ul.menu li ul li a { color: var(--headerMenuLinkColor); text-align: left; min-width: max-content; } header.main ul.menu li.menu-item-has-children ul li > a { color: var(--headerMenuLinkColor); } header.main ul.menu li.menu-item-has-children ul li > a:hover { color: var(--headerMenuLinkColorHover); } header.main ul.menu li.menu-item-has-children ul li.current-menu-item > a { color: var(--headerMenuLinkColorActive); } header.main .menuwrap.use-box-trim ul.menu li.menu-item-has-children ul li.current-menu-item > a { color: var(--headerMenuLinkTrimTextColorActive); background: var(--headerMenuLinkTrimBoxColorActive); } /* Header Buttons */ .header-cta-buttons { display: flex; align-items: center; gap: var(--headerCtaButtonsGap); flex-shrink: 0; } .button.cta1 { background: var(--buttonCta1Background); border-width: var(--buttonCta1BorderWidth); border-style: var(--buttonCta1BorderStyle); border-color: var(--buttonCta1BorderColor); border-width: var(--buttonCta1BorderWidth); color: var(--buttonCta1Color); } .button.cta1:hover { background: var(--buttonCta1HoverBackground); border-color: var(--buttonCta1HoverBorderColor); } .button.cta2 { background: var(--buttonCta2Background); border-width: var(--buttonCta2BorderWidth); border-style: var(--buttonCta2BorderStyle); border-color: var(--buttonCta2BorderColor); border-width: var(--buttonCta2BorderWidth); color: var(--buttonCta2Color); } .button.cta2:hover { background: var(--buttonCta2HoverBackground); border-color: var(--buttonCta2HoverBorderColor); } /* Content */ /* Hero */ .device-wrapper { width: 100%; max-width: 800px; height: 500px; position: relative; margin-bottom: -30px; right: 40px; } .device-wrapper.tablet-wrapper { width: 800px; right: auto; left: 0; padding-top: 85%; margin-bottom: -90px; } .device-wrapper.phone-wrapper { width: 220px; height: 442px; padding: 0; position: absolute; left: -30px; bottom: -140px; } .tablet, .phone { position: absolute; top: 0; left: 0; right: 0; bottom: 0; overflow: hidden; border-radius: 20px; background: rgba(255, 255, 255, 1); padding: 20px; box-shadow: 0 50px 100px -20px rgba(50, 50, 93, .25), 0 30px 60px -30px rgba(0, 0, 0, .3), inset 0 -2px 6px 0 rgba(10, 37, 64, .35); } .tablet-screen, .phone-screen { width: 100%; height: 100%; border-radius: 5px; } .tablet-screen img, .phone-screen img { width: 100%; height: 100%; object-fit: cover; height: 100%; float: left; box-shadow: 0 0 2px rgba(0, 0, 0, .3); } .phone-screen img { object-fit: unset; } /* Logos */ .grid-inside-column { display: grid; width: 100%; } .cards .grid-inside-column { grid-template-columns: repeat(auto-fit, minmax(250px, 350px)); } .logos .grid-inside-column { grid-template-columns: repeat(auto-fit, minmax(130px, 160px)); } .client-logo-wrap { width: 100%; display: flex; align-items: center; } .client-logo-wrap img { width: 100%; } .grid-inside-column.grayscale .client-logo-wrap img { filter: grayscale(100%); } .grid-inside-column.carousel_on { overflow: hidden; } .grid-inside-column.carousel_on .client-logo-wrap { flex: 0 0 auto; text-align: center; } .carousel-track { display: flex; } /* Smooth scrolling animation */ @keyframes logocarousel { /* Called in section-proof-logos.php */ 0% { transform: translateX(0); } 100% { transform: translateX(calc(-100% / (1 + var(--clone-count)))); } /* Move only the original items' width */ } /* Left-to-right animation (new) */ @keyframes logocarousel-reverse { 0% { transform: translateX(calc(-100% / (1 + var(--clone-count)))); } /* Start at the leftmost point */ 100% { transform: translateX(0); } /* Move right to initial position */ } /* Pause on hover */ .carousel-container:hover .carousel-track {/* animation-play-state: paused; */ } /* Responsive adjustments */ @media (max-width: 768px) { .carousel-item { width: 150px; } } @media (max-width: 480px) { .carousel-item { width: 120px; } } /* Testimonial */ .profile-wrap { width: 100%; max-width: 760px; display: flex; align-items: center; margin-left: auto; margin-right: auto; } .profile-inside-wrap { display: flex; align-items: center; gap: 15px; margin: 0 auto; text-align: left; } .profile-photo { width: 68px; height: 68px; border-radius: 50%; border: 4px solid var(--white); box-shadow: 0 0 40px rgba(33,41,52,.35); flex-shrink: 0; } .profile-photo img { width: 100%; height: 100%; float: left; border-radius: 50%; overflow: hidden; } .profile-text-wrap { display: flex; flex-direction: column; gap: 5px; } .profile-name { font-size: 18px; font-weight: bold; line-height: 1.1em; font-family: var(--headingFontFamily); } .profile-title { font-size: 14px; font-weight: 300; line-height: 1.1em; } /* Cards */ .card-wrap { width: 100%; height: 100%; overflow: hidden; text-align: left; background: var(--cardBackground); border-width: var(--cardBorderWidth); border-style: var(--cardBorderStyle); border-color: var(--cardBorderColor); border-radius: var(--cardBorderRadius); box-shadow: var(--cardBoxShadow); } .card-wrap.icon { display: flex; flex-direction: column; } .card-image-wrap { width: 100%; overflow: hidden; padding: var(--cardContentPadding); } .card-wrap.padded .card-image-wrap, .card-image-wrap.padded { padding: var(--cardContentPadding); } .card-wrap.full_bleed .card-image-wrap, .card-image-wrap.full_bleed { padding: 0; } .card-wrap.icon .card-image-wrap, .card-image-wrap.icon { height: auto; padding: 0; } .card-image-wrap:after { content: "."; visibility: hidden; display: block; height: 0; clear: both; } .testimonials .card-image-wrap:after { content: unset; visibility: unset; display: unset; height: unset; clear: unset; } .card-image-wrap .card-image { width: 100%; overflow: hidden; display: block; } .card-wrap.padded .card-image-wrap .card-image, .card-wrap.full_bleed .card-image-wrap .card-image, .card-image-wrap.padded .card-image, .card-image-wrap.full_bleed .card-image { height: 0; } .card-wrap.padded .card-image-wrap.twentyone_nine .card-image, .card-wrap.full_bleed .card-image-wrap.twentyone_nine .card-image { padding-top: 42.86%; } .card-wrap.padded .card-image-wrap.sixteen_nine .card-image, .card-wrap.full_bleed .card-image-wrap.sixteen_nine .card-image { padding-top: 56.25%; } .card-wrap.padded .card-image-wrap.four_three .card-image, .card-wrap.full_bleed .card-image-wrap.four_three .card-image { padding-top: 75%; } .card-wrap.padded .card-image-wrap.one_one .card-image, .card-wrap.full_bleed .card-image-wrap.one_one .card-image { padding-top: 100%; } .card-wrap.padded .card-image-wrap.three_four .card-image, .card-wrap.full_bleed .card-image-wrap.three_four .card-image { padding-top: 133.33%; } .card-wrap.padded .card-image-wrap img, .card-image-wrap.padded img, .card-image-wrap.full_bleed img, .card-image-wrap.padded img, .card-wrap.full_bleed img, .card-wrap.padded img { width: 100%; height: 100%; object-fit: cover; overflow: hidden; position: absolute; top: 0; right: 0; bottom: 0; left: 0; } .card-wrap.icon .card-image-wrap .card-image { width: var(--cardIconWidth); height: var(--cardIconHeight); margin: 0 auto; } .card-wrap.icon .card-image-wrap .card-image img { width: 100%; height: 100%; object-fit: cover; overflow: hidden; filter: var(--cardIconDropShadow); } .card-wrap.testimonial .card-content-wrap, .card-wrap.testimonial .card-image-wrap { padding: 0px !important; } .card-wrap.testimonial .card-image-wrap { display: flex; align-items: center; flex-direction: row; } .card-wrap.testimonial .card-image-wrap .card-image { flex-shrink: 0; } .card-wrap.testimonial .card-image-wrap .card-image img { overflow: hidden; } .card-content-wrap { width: 100%; padding: var(--cardContentPadding); font-size: var(--bodyFontSize); display: flex; flex-direction: column; } .card-wrap.show_content_top_border .card-content-wrap { border-top-width: var(--cardBorderWidth); border-top-style: var(--cardBorderStyle); border-top-color: var(--cardBorderColor); padding: var(--cardContentPadding); } .card-wrap.hide_content_top_border .card-content-wrap { border-top-width: 0px !important; } .card-content-wrap header.entry-header { display: flex; flex-direction: column; } .card-link-wrap { display: flex; width: 100%; } .card-wrap.bottom .card-link-wrap { position: absolute; left: 0; right: 0; padding: var(--cardContentPadding); padding-bottom: 0; padding-top: 0; } .card-wrap.bottom.left .card-link-wrap { justify-content: flex-start; } .card-wrap.bottom.center .card-link-wrap { justify-content: center; } .card-wrap.bottom.right .card-link-wrap { justify-content: flex-end; } .card-wrap.bottom.justify .card-link-wrap { justify-content: flex-start; } .card-wrap a.card-link { display: inline-block; } .card-wrap.bottom_full a.card-link { display: block; width: 100%; } /* Text Links */ .card-link.text_link { font-size: var(--cardContentFontSize); } .card-wrap.bottom_full a.card-link.text_link { text-align: center; } .card-link.text_link svg { width: 1.3em; height: 1.3em; position: absolute; top: .075em; bottom: 0; margin: auto 0; } .card-link.text_link.icon_right, .button.icon_right { padding-right: 1.7em; } .card-link.text_link.icon_right svg, .button.icon_right svg { margin-left: .5em; } .card-link.text_link.icon_left, .button.icon_left { padding-left: 1.75em; } .card-link.text_link.icon_left svg, .button.icon_left svg { margin-right: .5em } /* Button Links */ .card-link.button svg, .button svg { position: absolute; top: 0; bottom: 0; margin: auto 0; width: 1.4em; height: 1.4em; } .card-link.button.small.icon_right, .button.small.icon_right { padding-right: 2.5em; } .card-link.button.small.icon_right svg, .button.small.icon_right svg { margin-left: .5em; } .card-link.button.medium.icon_right, .button.medium.icon_right { padding-right: 2.75em; } .card-link.button.medium.icon_right svg, .button.medium.icon_right svg { margin-left: .75em; } .card-link.button.large.icon_right, .button.large.icon_right { padding-right: 3em; } .card-link.button.large.icon_right svg, .button.large.icon_right svg { margin-left: 1em; } .card-link.button.small.icon_left, .button.small.icon_left { padding-left: 2.5em; } .card-link.button.small.icon_left svg, .button.small.icon_left svg { left: .5em; } .card-link.button.medium.icon_left, .button.medium.icon_left { padding-left: 2.75em; } .card-link.button.medium.icon_left svg, .button.medium.icon_left svg { left: .75em; } .card-link.button.large.icon_left, .button.large.icon_left { padding-left: 3em; } .card-link.button.large.icon_left svg, .button.large.icon_left svg { left: 1em; } .stat { letter-spacing: -.1em; line-height: 1em; display: inline-block; } .stat-unit { font-size: 40px; letter-spacing: -.2em; position: absolute; top: .5em; display: inline-block; line-height: 1em; opacity: .5; } .unit-right { padding-right: 35px; } .unit-right .stat-unit { right: 0; } .unit-left { padding-left: 35px; } .unit-left .stat-unit { left: 0; } /* Post Index */ ul.post-categories { display: flex; flex-wrap: wrap; margin: 0; } ul.post-categories li { list-style-type: none; margin: 0; } ul.post-categories li a { font-weight: normal; display: inline-block; transition: .15s linear all; background: var(--catBackground); color: var(--catFontColor); } ul.post-categories li a:hover { transition: .15s linear all; background: var(--catBackgroundHover); color: var(--catFontColorHover); } article.right ul.post-categories { flex-direction: row-reverse; } article.center ul.post-categories { justify-content: center; } .card-content-wrap .entry-content { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; } /* Navigation */ .navigation { display: flex; gap: 4px; } .nav-links .page-numbers { padding: 5px 10px; font-size: 14px; color: var(--navTextColor); border: 1px solid var(--navBorderColor); background: var(--navBackground); } .nav-links .page-numbers.current { border: 1px solid var(--navCurrentBorderColor); background: var(--navCurrentBackground); color: var(--navCurrentTextColor); } .nav-links a { opacity: 1; transition: .15s linear all; } .nav-links a:hover { opacity: .7; transition: .15s linear all; } /* Sidebar */ .stripe.potential-sidebar .columns { grid-template-columns: minmax(0, 1fr); } .stripe.potential-sidebar .columns .column.section-sidebar { grid-column-start: 1; } .columns.sidebar_active { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); } .columns.sidebar_active.sidebar_one_sixth { grid-template-columns: minmax(0, 5fr) minmax(0, 1fr); } .columns.sidebar_active.sidebar_one_fifth { grid-template-columns: minmax(0, 4fr) minmax(0, 1fr); } .columns.sidebar_active.sidebar_one_fourth { grid-template-columns: minmax(0, 3fr) minmax(0, 1fr); } .columns.sidebar_active.sidebar_one_third { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); } .columns.sidebar_active.sidebar_two_fifths { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); } .columns.sidebar_active.sidebar_half { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .column.sidebar { align-items: flex-start; grid-column-start: 2; grid-row-start: 1; max-width: 100%; } .columns.show_header .column.sidebar { grid-row-start: 2; } .columns.sidebar_active.show_sidebar_left, .columns.sidebar_active.show_sidebar_left_below_header { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); } .columns.sidebar_active.show_sidebar_left.sidebar_one_sixth, .columns.sidebar_active.show_sidebar_left_below_header.sidebar_one_sixth { grid-template-columns: minmax(0, 1fr) minmax(0, 5fr); } .columns.sidebar_active.show_sidebar_left.sidebar_one_fifth, .columns.sidebar_active.show_sidebar_left_below_header.sidebar_one_fifth { grid-template-columns: minmax(0, 1fr) minmax(0, 4fr); } .columns.sidebar_active.show_sidebar_left.sidebar_one_fourth, .columns.sidebar_active.show_sidebar_left_below_header.sidebar_one_fourth { grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); } .columns.sidebar_active.show_sidebar_left.sidebar_one_third, .columns.sidebar_active.show_sidebar_left_below_header.sidebar_one_third { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); } .columns.sidebar_active.show_sidebar_left.sidebar_two_fifths, .columns.sidebar_active.show_sidebar_left_below_header.sidebar_two_fifths { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); } .columns.sidebar_active.show_sidebar_right .column.sidebar { grid-column-start: 2; } .columns.sidebar_active.show_sidebar_left .column.sidebar { grid-column-start: 1; } .sticky-wrap { width: 100%; position: relative; } .sticky-wrap.sticky { top: calc(var(--headerHeight) + 30px); position: sticky; } body.scrolled .sticky-wrap.sticky { top: calc(var(--headerHeightScrolled) + 30px); } .sticky-outside { width: 100% } .sticky-inside { position: relative; display: flex; flex-direction: column; gap: 30px; } .sticky-required-sibling { content: "."; visibility: hidden; display: block; height: 0; clear: both; } .column.sidebar .column-content { border-color: var(--gray7); border-width: 1px; border-style: solid; background-color: var(--gray1); } .sidebar-section { display: none; flex-direction: column; } .sidebar-section.search, .sidebar-section.content, .sidebar-section.recent-posts, .sidebar-section.recent-case-studies, .sidebar-section.recent-lead-magnets, .sidebar-section.recent-videos, .sidebar-section.recent-news { display: flex; } .post-index .columns.sidebar_active .column .column-content { align-self: flex-start; } /* Search */ .search-form { padding: var(--inputPadding); padding-right: 45px; background: var(--inputBackground); border-color: var(--inputBorderColor); border-width: var(--inputBorderWidth); border-style: var(--inputBorderStyle); border-radius: var(--inputBorderRadius); box-shadow: var(--inputBoxShadow); font-size: var(--inputFontSize); font-weight: var(--inputFontWeight); color: var(--inputFontColor); line-height: 1.1em; } .search-form input.search-field { padding: 0; background: transparent; border: none; border-radius: 0; box-shadow: none; font-size: var(--inputFontSize); } .search-form button.search-submit { position: absolute; right: 0; top: 0; bottom: 0; width: 45px; height: 100%; background: transparent; border: none; color: var(--bodyFontColor); z-index: 10; padding: 0; padding-right: 5px; } .search-form button.search-submit svg { width: 1.25em; height: 1.25em; position: absolute; top: 0; bottom: 0; margin: auto 0; opacity: 1; transition: .15s linear all; } .search-form button.search-submit svg:hover { opacity: .7; transition: .15s linear all; } /* Recent Posts */ .columns.recent { width: 100%; row-gap: 20px; } .columns.recent .column { width: 100%; } .columns.recent .column .column-inside { display: grid; column-gap: 15px; grid-template-columns: 80px 1fr;} .card-image-wrap.recent-image { width: 100%; padding: 0; } .card-image-wrap.recent-image a.card-image { width: 100%; height: 0; padding-top: 56.25%; overflow: hidden; } .card-image-wrap.recent-image a.card-image img { position: absolute; top: 0; right: 0; bottom: 0; left: 0; overflow: hidden; width: 100%; height: 100%; object-fit: cover; } .columns.recent .column-text h1.entry-title { font-size: 14px; font-weight: var(--headingFontWeight); } .columns.recent .column-text h1.entry-title a { color: var(--headingFontColor); opacity: 1; transition: .15s linear all; font-weight: var(--headingFontWeight); } .columns.recent .column-text h1.entry-title a:hover { opacity: .7; transition: .15s linear all; } .columns.recent .column-text .post-date { font-size: 12px; line-height: 1.2em; margin-top: 5px; } /* Single Post Page */ .stripe.single { background: var(--postPageAreaBackground); border-top-width: var(--postPageAreaTopBorderWidth); border-top-style: var(--postPageAreaTopBorderStyle); border-top-color: var(--postPageAreaTopBorderColor); } .columns.outer { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); row-gap: var(--postPageAreaRowGap); column-gap: var(--postPageAreaColumnGap); } .columns.outer.hide_sidebar { grid-template-columns: minmax(0, 1fr); } .columns.outer .column.section-header { display: flex; flex-direction: column; } .columns.outer .column.section-content { grid-column-start: 1; grid-column-end: 2; } .columns.outer .column.section-sidebar { grid-row-start: 1; grid-row-end: 4; grid-column-start: 2; grid-column-end: 3; } .columns.outer.show_sidebar_left .column.section-content { grid-column-start: 2; grid-column-end: 3; } .columns.outer.show_sidebar_left .column.section-sidebar { grid-row-start: 1; grid-row-end: 4; grid-column-start: 1; grid-column-end: 2; } .columns.outer.show_sidebar_right_below_header .column.section-header { grid-column-start: 1; grid-column-end: 3; } .columns.outer.show_sidebar_right_below_header .column.section-sidebar { grid-row-start: 2; grid-row-end: 4; grid-column-start: 2; grid-column-end: 3; } .columns.outer.show_sidebar_left_below_header .column.section-header { grid-column-start: 1; grid-column-end: 3; } .columns.outer.show_sidebar_left_below_header .column.section-sidebar { grid-row-start: 2; grid-row-end: 4; grid-column-start: 1; grid-column-end: 2; } .columns.outer.show_sidebar_left_below_header .column.section-content { grid-column-start: 2; grid-column-end: 3; } .columns.sidebar_value { grid-template-columns: minmax(0, 1fr) minmax(0, var(--postPageSidebarWidthValue)); } .columns.show_sidebar_left.sidebar_value, .columns.show_sidebar_left_below_header.sidebar_value { grid-template-columns: minmax(0, var(--postPageSidebarWidthValue)) minmax(0, 1fr); } .column.section-header { row-gap: var(--postPageHeaderImageGap); } .column-content.header-meta { row-gap: var(--postPageHeaderContentGap); } .column.header_pane_left .reading-pane, .column.header_pane_right .reading-pane, .column.content_pane_left .reading-pane, .column.content_pane_right .reading-pane { margin: 0; } .column.header_pane_left, .column.content_pane_left { align-items: flex-start; } .column.header_pane_center, .column.content_pane_center { align-items: center; } .column.header_pane_right, .column.content_pane_right { align-items: flex-end; } /* Post Meta */ .post-meta { row-gap: var(--postPageHeaderContentGap); display: flex; flex-direction: column; column-gap: var(--postPageMetaMetaColumnGap); } .post-meta.meta_inline { flex-direction: row; align-items: center; } .reading-pane.center .post-meta.meta_inline { justify-content: center; } .reading-pane.right .post-meta.meta_inline { justify-content: flex-end; } .post-meta .date, .post-meta .author { font-size: var(--postPageMetaFontSize); font-weight: var(--postPageMetaFontWeight); } /* Categories */ .stripe.single ul.post-categories { gap: var(--postPageMetaCatGap); } .stripe.single .reading-pane.center ul.post-categories { justify-content: center; } .stripe.single .reading-pane.right ul.post-categories { justify-content: flex-end; } .stripe.single ul.post-categories li a { font-size: var(--postPageMetaCatFontSize); font-weight: var(--postPageMetaFontWeight); color: var(--postPageMetaCatTextColor); background: var(--postPageMetaCatBg); border-radius: var(--postPageMetaCatBorderRadius); padding: var(--postPageMetaCatPadding); transition: .15s linear all; line-height: 1.1em; } .stripe.single ul.post-categories li a:hover { color: var(--postPageMetaCatTextColorHover); background: var(--postPageMetaCatBgHover); transition: .15s linear all; } /* Single Page Sidebar */ .stripe.sidebar_options .column.section-sidebar { background: var(--sidebarBackground); border-width: var(--sidebarBorderWidth); border-style: var(--sidebarBorderStyle); border-color: var(--sidebarBorderColor); border-radius: var(--sidebarBorderRadius); box-shadow: var(--sidebarBoxShadow); align-items: unset; } .sidebar-sections-wrap { gap: var(--sidebarSectionsGap); } .sidebar-section { gap: var(--sidebarSectionsContentGap); background: var(--sidebarSectionsBackground); padding: var(--sidebarSectionsPadding); border-width: var(--sidebarSectionsBorderWidth); border-color: var(--sidebarSectionsBorderColor); border-style: var(--sidebarSectionsBorderStyle); border-radius: var(--sidebarSectionsBorderRadius); box-shadow: var(--sidebarSectionsBoxShadow); } .sidebar-section-title { font-size: var(--sidebarSectionsTitleSize); font-weight: var(--sidebarSectionsTitleWeight); color: var(--sidebarSectionsTitleColor); } /* Callout Box */ .callout-box { margin-bottom: var(--paragraphMargin); padding: 30px; border: 1px solid var(--gray7); background-color: var(--gray1); border-radius: 5px; } /* Content Standard */ .column.section-content { display: flex; flex-direction: column; gap: 20px; } .entry-content, .entry-footer { text-align: left; } .featured-image img { width: auto; height: auto; object-fit: cover; } .featured-image.native { width: auto; } .featured-image.fill { width: 100%; } .featured-image.fill img { width: 100%; } /* FAQ Accordion */ .faq-list { display: flex; flex-direction: column; width: 100%; } .faq-item { border-bottom: 1px solid var(--gray5); } .faq-item:first-child { border-top: 1px solid var(--gray5); } .faq-question { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 20px 0; background: transparent; border: none; cursor: pointer; text-align: left; font-size: 1.1em; font-weight: 600; color: inherit; font-family: var(--headingFontFamily); line-height: 1.4em; gap: 15px; } .faq-question:hover { color: var(--linkColor); } .faq-question-text { flex: 1; } .faq-icon { flex-shrink: 0; transition: transform 0.2s ease; } .faq-icon svg { display: block; width: 24px; height: 24px; } .faq-question[aria-expanded="true"] .faq-icon { transform: rotate(180deg); } .faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.3s ease, padding 0.3s ease; } .faq-answer[aria-hidden="false"] { max-height: 2000px; } .faq-answer-content { padding-bottom: 20px; } .faq-answer-content p:last-child { margin-bottom: 0; } /* Search */ .search-title { font-size: 24px; } .results { display: flex; flex-direction: column; gap: 40px; } .result-wrap { width: 100%; display: flex; align-items: flex-start; gap: 30px; } .result-text { display: flex; flex-direction: column; gap: 10px; width: 100%; } .result-text .entry-title { font-size: 18px; } .result-text .entry-summary { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: 3; font-size: 16px; line-height: 1.7em; } .result-text .entry-footer { font-size: 14px; color: var(--gray12); } .result-thumb-wrap { width: 200px; flex-shrink: 0; display: none; flex-direction: column; text-align: center; } .result-thumb-wrap.has-thumb { display: flex; } .result-thumb { width: 100%; height: 0; padding-top: 56.25%; overflow: hidden; } .result-thumb img { width: 100%; height: 100%; position: absolute; top: 0; right: 0; bottom: 0; left: 0; object-fit: cover; padding: 3px; background-color: var(--white); border: 1px solid var(--gray4); border-radius: 5px; border-bottom-left-radius: 0; border-bottom-right-radius: 0; } p.result-post-type { width: 100%; padding: 4px 10px; background-color: var(--gray1); border: 1px solid var(--gray4); border-radius: 3px; font-size: 12px; font-weight: bold; line-height: 1.1em; border-top-right-radius: 0; border-top-left-radius: 0; border-top: 0; } /* White Paper */ .iframe-wrap { width: 100%; padding: 4px; background-color: var(--white); border-radius: 5px; border: 1px solid var(--gray7); box-shadow: var(--primaryBoxShadow); } .iframe-inside { width: 100%; height: 0; padding-top: 56.25%; } .iframe-inside iframe { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; } /* Onboarding Section */ .phase-wrap { display: flex; align-items: center; gap: 10px; font-size: 16px; margin-bottom: var(--paragraphMargin); } .phase { border: 2px solid var(--primaryTextColor); border-radius: 5px; background-color: var(--buttonBackground); color: var(--buttonTextColor); font-weight: bold; padding: 0 10px; } .phase-title { font-weight: bold; } /* Footer */ .stripe.footer { position: absolute; background: var(--footerBackground); bottom: 0; width: 100%; height: var(--footerHeightPadded); border-top-color: var(--footerBorderTopColor); border-top-width: var(--footerBorderTopWidth); border-top-style: var(--footerBorderTopStyle); color: var(--footerColor); } .stripe.footer a { color: var(--footerLinkColor); } .stripe.footer a:hover { color: var(--footerLinkColorHover); } .stripe.footer .stripe-inside { height: 100%; font-size: var(--footerFontSize); } .stripe.footer .stripe-inside .columns { column-gap: var(--footerColumnGap); } .stripe.footer .stripe-inside .columns .column { align-items: unset; } .stripe.footer .stripe-inside .columns .column .column-content { row-gap: var(--footerColumnContentRowGap); text-align: var(--footerColumnContentAlignment); line-height: var(--footerLineHeight); } .footer-column-title { font-size: var(--footerColumnTitleSize); font-weight: var(--footerColumnTitleWeight); color: var(--footerColumnTitleColor); } .logo.white { filter: brightness(200%) grayscale(100%) contrast(200%); display: block; } .social-wrap { width: 100%; display: flex; align-items: center; gap: 20px; } .social-wrap a.social-link { display: inline-block; width: 30px; height: 30px; } .social-wrap a.social-link svg { width: 100%; height: 100%; } .awards-wrap { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 30px; row-gap: 30px; } .award-wrap { display: flex; align-items: center; gap: 10px; } .award-image { width: 40px; height: auto; flex-shrink: 0;} .award-image img { width: 100%; height: 100%; object-fit: cover; } .award-text { display: flex; flex-direction: column; gap: 4px; } .stripe.footer .columns { display: flex; align-items: flex-start; } .stripe.footer .columns .column { flex-basis: content; } .stripe.footer .columns .column.footer-column1, .stripe.footer .columns .column.footer-column2 { flex-shrink: 0; } /* Begin Overrides */ a > img.aligncenter { overflow: auto; display: block; float: none; } img.aligncenter { display: block; margin-left: auto; margin-right: auto; margin-bottom: 10px; } img.alignleft { float: left; margin-left: 0px; margin-right: 15px; margin-bottom: 10px; } /* Default is scaling */ img.alignright { float: right; margin-left: 20px; margin-bottom: 10px; } img.alignnone { margin: 0px; } img.imagefull { clear: both; width: 100%; border: 0px; padding: 0px; margin: 0px; margin-bottom: 30px; } .reading-pane img { max-width: 100%; } .reading-pane img.alignright, .reading-page img.alignleft { max-width: 50%; height: auto; } .entry-content iframe { width: 100%; max-width: 100%; } .reading-pane .featured-image img { height: 100%; } .wp-block-image { margin-bottom: 30px !important; } figure { max-width: 100%; width: 100%; } figure img { width: 100%; object-fit: cover; } figcaption { font-size: 13px; margin-top: 5px; margin-bottom: 30px; width: 100%; } figure.alignright { float: right; max-width: 50%; margin: 0; margin-left: 20px; margin-bottom: 30px; } figure.alignleft { float: left; max-width: 50%; margin: 0; margin-right: 20px; margin-bottom: 30px; } figure.alignleft img, figure.alignright img { width: 100%; height: auto; } input[disabled] { opacity: .5; } input.notop { margin-top: 0; } .gallery { margin-bottom: var(--paragraphMargin) !important; } .gallery-item .gallery-icon img { object-fit: cover; } .nocursor { cursor: default; } .aligncenter { display: block; margin-left: auto; margin-right: auto; } .alignleft { float: left; } .alignright { float: right; } .aligntextleft { text-align: left; } .aligntextright { text-align: right; } .aligntextcenter, .center { text-align: center; } .fill { width: 100%; } .inlineblock { display: inline-block; } .breathe120 { padding-top: 120px; padding-bottom: 120px; } .breathe120top { padding-top: 120px; } .breathe120bottom { padding-bottom: 120px; } .breathe110 { padding-top: 110px; padding-bottom: 110px; } .breathe110top { padding-top: 110px; } .breathe110bottom { padding-bottom: 110px; } .breathe100 { padding-top: 100px; padding-bottom: 100px; } .breathe100top { padding-top: 100px; } .breathe100bottom { padding-bottom: 100px; } .breathe90 { padding-top: 90px; padding-bottom: 90px; } .breathe90top { padding-top: 90px; } .breathe90bottom { padding-bottom: 90px; } .breathe80 { padding-top: 80px; padding-bottom: 80px; } .breathe80top { padding-top: 80px; } .breathe80bottom { padding-bottom: 80px; } .breathe70 { padding-top: 70px; padding-bottom: 70px; } .breathe70top { padding-top: 70px; } .breathe70bottom { padding-bottom: 70px; } .breathe60 { padding-top: 60px; padding-bottom: 60px; } .breathe60top { padding-top: 60px; } .breathe60bottom { padding-bottom: 60px; } .breathe50 { padding-top: 50px; padding-bottom: 50px; } .breathe50top { padding-top: 50px; } .breathe50bottom { padding-bottom: 50px; } .breathe40 { padding-top: 40px; padding-bottom: 40px; } .breathe40top { padding-top: 40px; } .breathe40bottom { padding-bottom: 40px; } .breathe30 { padding-top: 30px; padding-bottom: 30px; } .breathe30top { padding-top: 30px; } .breathe30bottom { padding-bottom: 30px; } .breathe20 { padding-top: 20px; padding-bottom: 20px; } .breathe20top { padding-top: 20px; } .breathe20bottom { padding-bottom: 20px; } .mclear { margin-top: 0px; margin-bottom: 0px; } .mtop0 { margin-top: 0; } .mtop5 { margin-top: 5px; } .mtop10 { margin-top: 10px; } .mtop15 { margin-top: 15px; } .mtop20 { margin-top: 20px; } .mtop25 { margin-top: 25px; } .mtop30 { margin-top: 30px; } .mtop40 { margin-top: 40px; } .mtop50 { margin-top: 50px; } .mtop60 { margin-top: 60px; } .mbot0 { margin-bottom: 0; } .mbot5 { margin-bottom: 5px; } .mbot10 { margin-bottom: 10px; } .mbot15 { margin-bottom: 15px; } .mbot20 { margin-bottom: 20px; } .mbot25 { margin-bottom: 25px; } .mbot30 { margin-bottom: 30px; } .mbot40 { margin-bottom: 40px; } .mbot50 { margin-bottom: 50px; } .mbot60 { margin-bottom: 60px; } /* Lengths */ .w40 { width: 40px; } .w50 { width: 50px; } .w60 { width: 60px; } .w70 { width: 70px; } .w80 { width: 80px; } .w100 { width: 100px; } .w125 { width: 125px; } .w150 { width: 150px; } .w200 { width: 200px; } .w300 { width: 300px; } .w350 { width: 350px; } .w400 { width: 400px; } .w50p { width: 50%; } .w60p { width: 60%; } .w70p { width: 70%; } .w80p { width: 80%; } .w90p { width: 90%; } /* End Overrides */ /* New Changes */ .divider { padding-top: 30px; border-top: 1px solid var(--gray6); margin-top: 30px;} /* Media Queries */ /* Touch Screens */ @media (hover:none) { } /* Small Desktop - Max content width = 940px with 30px gutters totalling 1000px */ /* Optimized for the 1024px CSS screen resolution */ @media only screen and (max-width: 1360px) { h1, .h1 { font-size: 32px; font-weight: bold; } h2, .h2 { font-size: 24px; } h3, .h3 { font-size: 22px; } h4, .h4 { font-size: 20px; } h5, .h5 { font-size: 18px; } h6, .h6 { font-size: 16px; letter-spacing: 0px; } #container { padding-bottom: 0; } /* Stripes */ .stripe-inside { width: 1000px; } /* Stripe Headings */ h1.stripe-title, h2.stripe-title, h2.entry-title { font-size: 30px; } h2.stripe-subtitle, h3.stripe-subtitle { font-size: 20px; } /* Menu */ ul.menu li { } header.main .stripe-inside { gap: 20px; } header.main ul.menu { gap: 15px; } /* Columns */ .columns-onetwo .columns { column-gap: 6% !important; } /* Cards */ .showing4cards .grid-inside-column, .post-index .grid-inside-column { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } .showing4cards .grid-inside-column { max-width: 600px; margin: 0 auto; } /* Sidebar */ .sidebar-section .recent { row-gap: 30px !important;} .sidebar-section .recent .column .column-inside { grid-template-columns: 1fr !important; row-gap: 10px !important;} /* Footer */ .stripe.footer { height: auto !important; position: relative;} .stripe.footer .columns { display: flex; align-items: flex-start; flex-wrap: wrap; row-gap: 40px; } .stripe.footer .columns .column { flex-basis: content; } .stripe.footer .columns .column.footer-column1, .stripe.footer .columns .column.footer-column2 { flex-shrink: 0; } } @media only screen and (max-width: 1018px) { /* Header */ .logo-wrap { width: 180px; position: absolute; left: 0; right: 0; margin: auto; } .logo-wrap a { width: 100%; } .logo-icon-menu { display: block; } a.button.cta { position: absolute; right: 30px; } /* Menu */ button.hamburger { display: block; z-index: 110; } body.showmobile button.hamburger { } .menuwrap { position: fixed; top: 0; left: -200px; bottom: 0; width: 200px; padding: 0; transition: .15s linear all; opacity: 0; visibility: hidden; margin: 0; top: 0; box-shadow: 0 0 0 rgba(0,0,0,.2); display: block; z-index: 100; background: var(--headerBackground); } body.showmobile .menuwrap { transition: .15s linear all; left: 0; opacity: 1; visibility: visible; box-shadow: 0 0 30px rgba(0,0,0,.2); } .menuwrap div { width: 100%;} .menu-primary-container { display: block; height: auto; } header.main ul.menu { padding-top: calc(var(--headerHeight) + var(--bannerHeight)); flex-direction: column; width: 100%; column-gap: 0; row-gap: 0; transition: .15s linear all; } body.scrolled header.main ul.menu { padding-top: calc(var(--headerHeightScrolled) + var(--bannerHeight)); transition: .15s linear all; } header.main ul.menu li { width: 100%; margin: 0; height: auto; } header.main ul.menu li a { width: 100%; line-height: 1em; border: 0; border-radius: 0; padding: 12px 20px; } header.main ul.menu li.has-icon a { padding-right: 35px; } header.main ul.menu li.has-icon a svg { right: 10px; transform: rotate(-90deg); } header.main ul.menu li:last-child { margin-right: 0; } header.main ul.menu li.mobilehome { display: block; } header.main ul.menu li ul { top: 0px; left: 200px; margin-left: 0; border-radius: var(--dropDownBorderRadius); border-top-left-radius: 0; border-bottom-left-radius: 0; padding: var(--dropDownPadding); width: 200px; top: var(--dropDownMenuShift); } body.scrolled header.main ul.menu li ul { top: var(--dropDownMenuShift); } header.main ul.menu li.mobile-only { display: flex; } /* Stripes */ header.main .stripe-inside { justify-content: flex-end; width: 100%; } .stripe-inside { width: 100% !important; } /* Stripe Headings */ h1.stripe-title, h2.stripe-title, h2.entry-title { font-size: 34px; } /* Integrations */ .stripe.integrations-market-data .grid-inside-column { column-gap: 100px !important; } } @media only screen and (max-width: 900px) { } @media only screen and (max-width: 767px) { h1 { font-size: 150%; } h2 { font-size: 125%; } h3 { font-size: 120%; } h4 { font-size: 115%; } h5 { font-size: 110%; } h6 { font-size: 105%; } h1.stripe-title, h2.stripe-title { font-size: 160%; } h2.stripe-subtitle, h3.stripe-subtitle { font-size: 110%; } .stripe.proof-logos .grid-inside-column, .stripe.cards-a.integrations-popular .grid-inside-column { column-gap: 60px !important; max-width: 360px; margin: 0 auto; } .stripe.integrations-market-data .grid-inside-column .client-logo-wrap:nth-child(1), .stripe.integrations-market-data .grid-inside-column .client-logo-wrap:nth-child(4) { display: none; } .stripe.proof-logos .grid-inside-column.carousel_on { max-width: 100%; } .stripe.post-index .columns.two { gap: 30px !important;} .stripe.post-index .grid-inside-column { gap: 30px !important; } .columns.sidebar_active.show_sidebar_right .column.section-index, .columns.sidebar_active.show_sidebar_left .column.section-index { grid-column: span 2; } .columns.sidebar_active.show_sidebar_right .column.sidebar, .columns.sidebar_active.show_sidebar_left .column.sidebar { grid-column-start: 1; grid-column-end: 2; grid-row-start: 3; grid-row-end: 4; grid-column: span 2; } /* Home */ .device-wrapper.tablet-wrapper { left: 80px; } .device-wrapper.phone-wrapper { left: 30px; } .stripe.columns-onetwo .columns.two .column.column1 { grid-column: span 2; } .stripe.columns-onetwo .columns.two .column.column2 { grid-column: span 2; } .stripe.home-problem .columns.two .column.column1 { order: 1; max-width: 250px; margin: 0 auto; } .stripe.home-problem .columns.two .column.column2 { order: 2; } .stripe.stats-time .grid-inside-column, .stripe.stats-performance .grid-inside-column { grid-template-columns: 1fr 1fr 1fr !important; column-gap: 40px !important; } .stripe.stats-time .grid-inside-column .card-content-wrap h4, .stripe.stats-performance .grid-inside-column .card-content-wrap h4 { font-size: 60px !important; } .stripe.white-paper .column.column1 { max-width: 250px; margin: 0 auto; } /* Platform */ .stripe.platform-hero .columns.two .column.column1 { width: 100%; order: 1; } .stripe.platform-hero .columns.two .column.column2 { max-width: 400px; margin: 0 auto; order: 0; } .stripe.newsletter .columns.two { grid-template-columns: 1fr 1fr !important; } /* Features */ .stripe.features-intro .columns.two .column.column1 { order: 1; } .stripe.features-intro .columns.two .column.column2 { order: 0; } .stripe.features-dashboards .columns.two .column.column1 { order: 1; } .stripe.features-dashboards .columns.two .column.column2 { order: 2; } /* About Us */ .stripe.about-hero .columns.two .column.column2 { display: none; } /* Search */ .result-thumb-wrap { width: 150px; } /* Single */ .column.section-sidebar { display: none; } .columns.sidebar_active.sidebar_one_fourth { grid-template-columns: 1fr; } /* Careers */ /* Footer */ .awards-wrap { grid-template-columns: 1fr 1fr !important; } } @media only screen and (max-width: 660px) { /* Header */ .logo-wrap { width: 80px; } .logo-wrap a.logo { display: none; } .logo-wrap a.logo-icon { display: block; } /* Stats */ .stripe.stats-time .grid-inside-column, .stripe.stats-performance .grid-inside-column { grid-template-columns: 1fr !important; width: 100%; max-width: 300px; margin: 0 auto; } /* Testimonials */ .card-wrap.testimonial .card-image-wrap { flex-direction: column; gap: 15px; } .card-wrap.testimonial .card-image-wrap .card-image { margin: 0 auto; } .card-wrap.testimonial .card-image-wrap .testimonial-text { text-align: center; } .showing4cards .grid-inside-column { grid-template-columns: 1fr !important; width: 100%; max-width: 100%; } .showing4cards .grid-inside-column, .post-index .grid-inside-column { grid-template-columns: 1fr !important; width: 100%; max-width: 100%; } /* Search */ .result-wrap { flex-direction: column; gap: 15px; } .result-thumb-wrap { width: 100%; max-width: 400px; order: 0; } .result-thumb-wrap img { border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; } p.result-post-type { display: none;} .result-text { order: 1; } } @media only screen and (max-width: 480px) { .logo-wrap { display: none; } } /* Mobile View */ @media only screen and (max-device-width: 415px) { #fill { width: 100%; } /* Width specified for iPhone 7s */ #container { width: 100%; } /* Width specified for iPhone 7s */ /* Footer */ .awards-wrap { grid-template-columns: 1fr !important; } } /* Mobile Landscape Only - Max content width = 696px with 20px gutters totalling 736px; */ @media only screen and (max-device-width: 737px) and (orientation: landscape) { #fill { width: 100%; } #container { width: 100%; } }